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 140 times, 1 visits today)
Advertisements

Kristofer Ng

A crazy android and web developer. Passion on developing android application and exploring new technology as a hobby.

You may also like...

Leave a Reply

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

GET YOUR EBOOK FOR FREE

Unlock free ebook "Beginning Programming ALL-IN-ONE Desk Reference for DUMMIES" now!

We will send a copy to your email