Scribd
Upload
42 views

2.9.DeployingSoliditywithweb3 HTML ArithmeticOperations

1. The document describes the steps to create a simple web interface for a smart contract including: deploying a Solidity contract called Simple that contains arithmetic functions, connecting to it using Web3.js, and building an HTML/JavaScript frontend to interact with the contract. 2. Key steps are compiling the Solidity contract, deploying it to the Ethereum network, retrieving the contract address, defining the ABI in JavaScript, and creating HTML elements linked to JavaScript functions that call the smart contract methods. 3. When the user inputs numbers and clicks the arithmetic or multiply buttons, the corresponding smart contract function is called and the result is displayed on the page, demonstrating a basic DApp interface for the smart contract

Uploaded by

fintech
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
42 views

2.9.DeployingSoliditywithweb3 HTML ArithmeticOperations

1. The document describes the steps to create a simple web interface for a smart contract including: deploying a Solidity contract called Simple that contains arithmetic functions, connecting to it using Web3.js, and building an HTML/JavaScript frontend to interact with the contract. 2. Key steps are compiling the Solidity contract, deploying it to the Ethereum network, retrieving the contract address, defining the ABI in JavaScript, and creating HTML elements linked to JavaScript functions that call the smart contract methods. 3. When the user inputs numbers and clicks the arithmetic or multiply buttons, the corresponding smart contract function is called and the result is displayed on the page, demonstrating a basic DApp interface for the smart contract

Uploaded by

fintech
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Web interface for Dapp

1. Created a Directory Simple and moved into it


2. Created index.html file and index.js file in current directory
3. Created Simple.sol with
pragma solidity ^0.5.5;
contract Simple {
function arithmetics(uint _a, uint _b) public pure returns (uint o_sum, uint o_product) {
o_sum = _a + _b;
o_product = _a * _b;
}
function multiply(uint _a, uint _b) public pure returns (uint) {
return _a * _b;
}
}

4. npm install [email protected]

5. npm install solc

6. Complie Simple.sol file with


$ node_modules/.bin/solcjs --bin --abi Simple.sol

7. Start node with


$node

var Web3 = require('web3');


var solc = require('solc');
var web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
//Check you r connected or not
web3.eth.getAccounts(console.log)

//load the bytecode and abi from the file system


bytecode = fs.readFileSync('Simple_sol_Simple.bin').toString();
abi = JSON.parse(fs.readFileSync('Simple_sol_Simple.abi').toString());

//Deploying Contract
var SimpleObj=new web3.eth.Contract(abi);
var deployContractTx = SimpleObj.deploy({data: bytecode });

var accounts;
web3.eth.getAccounts().then((acc) => accounts = acc);
var contractInstance;
deployContractTx.send({from: accounts[0], gas: 1000000}).then((instance) => contractInstance =
instance);

contractInstance.methods.multiply(4,5).call().then((f) => console.log(f))

8. If you could able to get 20 as result it is sucessful. you can go for next step.
At Node Prompt copy this address and you can use this in javascript to communicate with this
contract
> contractInstance.address
'0x4cb24294f3Ac145ef1Ef6Ad3cbCCC1e5c3F6867F'

9. Building index.js in your Simple Directory

web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))


var account;
web3.eth.getAccounts().then((f) => {
account = f[0];
})

abi = JSON.parse('[{"constant":true,"inputs":[{"name":"_a","type":"uint256"},
{"name":"_b","type":"uint256"}],"name":"multiply","outputs":
[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"pure","type":"function"},
{"constant":true,"inputs":[{"name":"_a","type":"uint256"},
{"name":"_b","type":"uint256"}],"name":"arithmetics","outputs":
[{"name":"o_sum","type":"uint256"},
{"name":"o_product","type":"uint256"}],"payable":false,"stateMutability":"pure","type":"function"
}]')

contract = new web3.eth.Contract(abi);


contract.options.address = "0x0B27ACcd50e2121E97097a29C932e38cd1A63cBa";
// update this contract address with your contract address

function Arithmetics(){
var val1= document.getElementById("num1").value
var val2= document.getElementById("num2").value
//console.log(val1,val2);
contract.methods.arithmetics(val1,val2).call().then((f) => document.write(f[0],"<br>",f[1]))
}
function Multiply(){
var val1= document.getElementById("num1").value
var val2= document.getElementById("num2").value
contract.methods.multiply(val1,val2).call().then((f) => document.write(f));
}

10. Building index.html in your Simple Directory

<!DOCTYPE html>
<html>
<head>
<title>My First DApp</title>
<link href='https://fonts.googleapis.com/css?family=Open Sans:400,700' rel='stylesheet'
type='text/css'>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'
type='text/css'>
</head>
<body class="container">
<h1>A Simple Dapp</h1>
<form id="frm1">
First Number:<br>
<input type="number" id="num1" value="0"><br>
Second Number:<br>
<input type="number" id="num2" value="0"><br><br>
<a href="#" onclick="Arithmetics()" class="btn btn-primary">Arithmetic</a>
<a href="#" onclick="Multiply()" class="btn btn-primary">Multiply</a>

<p id="demo"></p>
</form>
</body>
<script src="https://cdn.jsdelivr.net/gh/ethereum/[email protected]
beta.37/dist/web3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="./index.js"></script>

11. Now open index.html in web browser

You might also like