Interacting Web UI and Solidity Smart Contract

Install local blockchain

You need to install blockchain on your computer to run local testing. It is very expansive to run on Ethereum main-net, you need to spend real Ethereum to perform the transaction. Download Ganache to get free Ethereum to test on your local environment. Here is the link //truffleframework.com/ganache/.

Run Ganache

After install, open it on your computer, you will see the screen like below. Your localhost is HTTP://127.0.0.1:7545

Installing Web3.js

Web3.js is the official Ethereum Javascript API. Download this library to interact with smart contract on the Ethereum network. Before we install this library, we need to create a new folder call “webui_solidity”.

Open terminal and go to the folder.

Next, run the npm init command to create a package.json file, which will store project dependencies:

Hit enter to all of the prompt messages. Next, run the following command to install web3.js:

Create smart contract

Go to Remix Solidity IDE via //remix.ethereum.org/. In the “Run” tab, change the environment to Web3Provider and specific the blockchain node address. HTTP://127.0.0.1:7545

Press “Create” button and it will publish to the Ethereum network.

Create Web UI

Open the folder using your editor ( I am using Atom). Create a new html file called “index.html” and copy the following code.

Edit to your ABI and Contract Address

replace ? to your ABI eg “[ { “constant”: true, “inputs”: [], “name”: “getUser”, “outputs”: [ { “name”: “”, “type”: “string” }, { “name”: “”, “type”: “uint256” } ], “payable”: false, “stateMutability”: “view”, “type”: “function” }, { “anonymous”: false, “inputs”: [ { “indexed”: false, “name”: “name”, “type”: “string” }, { “indexed”: false, “name”: “age”, “type”: “uint256” } ], “name”: “CallbackUser”, “type”: “event” }, { “constant”: false, “inputs”: [ { “name”: “_fName”, “type”: “string” }, { “name”: “_age”, “type”: “uint256” } ], “name”: “setUser”, “outputs”: [], “payable”: false, “stateMutability”: “nonpayable”, “type”: “function” } ]”.

Compile > Detail > Copy ABI.

replace ? to your contract address eg “0xdda6327139485221633a1fcd65f4ac932e60a2e1”. In the run tab, bottom have a User contract adress and copy it.

Create a css file called “main.css”. Copy and paste the source code below.

Run Your Project

Now, you can run the html and try it !!!

Interacting Web UI and Solidity Smart Contract

Source Code

(Visited 328 times, 1 visits today)
Advertisements

Yong Loon Ng

Ng Yong Loon, better known as Kristofer is a software engineer and computer scientist who doubles up as an entrepreneur.

You may also like...

1 Response

  1. M. Aslam says:

    This was for remix ide, what about running nodes in Ethereum blockchain? would the steps will be same for that as well??

Leave a Reply

Your email address will not be published. Required fields are marked *