Creating Decentralized Apps Part 2
In this post i will be using javascript to call a contract deployed using Remix IDE and ethereum-js Test RPC(nodeJs)
The contract being deployed is
To get the ABI or "Interface ABI" Follow this POST for the "Contract Address" Follow this POST
After Deploying you should now be ready to create a UI (interface with html)
The html will contain javascript as well
Note: the "Interface ABI" must be in JSON format. so make sure to use "JSON.parse"
Note2: Make sure you deploy the Html file to a Web Server (IIS,Apache)
Click "Send Data" to call the "getNumber()" function of the contract to increment the integer.
Click "Get Data" to call the "myConstantNumber()" function which returns the incremented value
ive also included an example of how to pass data using the "myConstantMethod" where i am passing "Aresh".
Now we are ready to create an actual application. from Knowing how to write basic solidity contracts, deploy to a private blockchain and use Html and javascript to call the functions of the contract from User Interface (UI)
The contract being deployed is
pragma solidity ^0.4.0;
contract NumberGetNextNumberAresh{
uint index;
function getNumber() returns (uint)
{
index = index + 1;
return index;
}
function myConstantMethod(string a) constant returns (string d)
{
return a;
}
function myConstantNumber() constant returns (uint)
{
return index;
}
}
To get the ABI or "Interface ABI" Follow this POST for the "Contract Address" Follow this POST
After Deploying you should now be ready to create a UI (interface with html)
The html will contain javascript as well
<html>
<head>
<title>Smart Contract Ethereum</title>
</head>
<body>
<fieldset>
<button onclick="send()">Send Data</button>
<button onclick="get()">Get Data</button>
<div id="response"></div>
</fieldset>
</body>
<script>
//Part 1
window.addEventListener('load', function() {
// Check if Web3 has been injected by the browser:
if (typeof web3 !== 'undefined') {
// You have a web3 browser! Continue below!
console.log('You have web3');
init(); //Initialize contract
} else {
console.log('You DONT HAVE web3. Also Due to browser security restrictions, we cant communicate with dapps running on file: Please use a local server for development.');
alert("Install Metamask");
// Warn the user that they need to get a web3 browser
// Or install MetaMask, maybe with a nice graphic.
}
})
//---------------Part 2--------
//initialize the contract
var myContractInstance; //GLOBAL VARIABLE
function init()
{
var abi= JSON.parse('[{"constant":true,"inputs":[{"name":"a","type":"string"}],"name":"myConstantMethod","outputs":[{"name":"d","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"myConstantNumber","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"getNumber","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"function"}]');
var ContractAddress = "0x463a83e381eb502ec4e734146d07d33b788c8890";
// creation of contract object
var MyContract = web3.eth.contract(abi);
// initiate contract for an address
myContractInstance = MyContract.at(ContractAddress);
}
//------------Part 3-------
//Send Data or call non constant function
function send() {
var result = myContractInstance.getNumber(function(error, transactionHash) { console.log(transactionHash); });
//var result = myContractInstance.myConstantMethod('Aresh',function(error, transactionHash) { console.log(transactionHash); }); //passing data
}
//-----------part 4---------
//output data from a constant function
function get()
{
var result = myContractInstance.myConstantNumber(function(error, transactionHash) { alert(transactionHash); });
}
</script>
</html>
Note: the "Interface ABI" must be in JSON format. so make sure to use "JSON.parse"
Note2: Make sure you deploy the Html file to a Web Server (IIS,Apache)
Click "Send Data" to call the "getNumber()" function of the contract to increment the integer.
Click "Get Data" to call the "myConstantNumber()" function which returns the incremented value
ive also included an example of how to pass data using the "myConstantMethod" where i am passing "Aresh".
Now we are ready to create an actual application. from Knowing how to write basic solidity contracts, deploy to a private blockchain and use Html and javascript to call the functions of the contract from User Interface (UI)
Comments
Post a Comment