Smart Contract and Web3! All that you need to know.

A Glorious guide on creating your smart contracts and interact with smart contracts using web3

1. A system to store data on the blockchain and retrieve the stored data from the blockchain

Pre-requisite:

To follow this tutorial, you need to have a basic knowledge of the following programming languages:

1. HTML: HTML is used to design the structure of the website
2. JavaScript: Javascript is used for interacting with the deployed smart contracts to store, retrieve, and manipulate information
3. Solidity: solidity is used for writing down smart contracts

Tools Requirement:

1. ChainIDE [an online cloud-based, multi-chain IDE] available at: https://chainide.com/

ChainIDE

1. MetaMask [a wallet for web3], available at: https://metamask.io/

MetaMask Legacy Web3

!Note: For this tutorial, you don’t need to download any tools or libraries except MetaMask and web3.js.

Libraries:

1. web3.js [web3.js is a collection of libraries that allow you to interact with a local or remote ethereum node using HTTP, IPC, or WebSocket], available at: https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js

Experiment Setup:

Once you have access to ChainIDE and MetaMask, connect MetaMask to ChainIDE and buy some ethers from a faucet for any of the following test networks:

1. Ropsten Test Network (suggested)
2. Kovan Test Network
3. Rinkbey Test Network
4. Goreli Test Network

To get test ethers from a faucet, simply click choose any of the above-mentioned networks and click on Buy →Test Faucet → Get Ether, and you will be redirected to the selected faucet network. This method varies a little from network to network but all are quite easy.

2. MetaMask

After adding the extension of MetaMask to your browser, make sure you have selected the faucet network.

Method

First of all, we will write down a smart contract that can store the employee’s information such as id, first name, last name, address, mobile number, etc.,

!Note: We’ll use ChainIDE for the whole tutorial, ChainIDE supports all the programming languages that are needed to complete this tutorial.

Following code is a smart contract written in solidity that is used to store the employee’s information on the blockchain. To make use of this smart contract, we need to deploy it on the blockchain, and before, we can deploy it, we need to compile it.

The pragma keyword defines the compiler version that we will use to compile the solidity code. Once you have completed writing down your smart contract, simply compile it from the compile panel, and you will get the ABI code for the following solidity code.

3. Contract Compilation

The ABI which is known as the application binary interface is needed when you want to interact with the smart contract using web3.

Now, the next step is to deploy the complied smart contract.

4. Contract Deployment

To deploy a smart contract, you must need to have some faucet ethers in your wallets to pay a gas fee to deploy for the smart contract. In fig.4, we can see we paid 25 gwei to deploy our “Employee_Records.sol” smart contract.

Once a smart contract is deployed, it will be assigned a contract address, as we can see in fig.4, highlighted pint 3, and from the interaction panel, we can copy our smart contract address and can check our deployed smart contract on the faucet network also.

5. EtherScan for the Ropsten Test Network

We can see all the information about the contract such as all the transactions information that is made to a smart contract, gas fee used for each transaction, etc., from the EtherScan.

Until this, we have successfully deployed smart contract on the blockchain and we can interact with the deployed smart contract using the “INTERACT” panel of ChainIDE.

6. Interaction Panel of ChainIDE

But we want to create a custom interface to interact with the deployed smart contract, so for that, we will first create the webpage structure using simple HTML tags and a little CSS to make it good-looking.

CSS for the Webpage is following:

Until this, our webpage would be like this,

7. A webpage using HTML and CSS

This is just a structure for the webpage, but still not integrated with our deployed smart contract and it can not be used to store value on the blockchain and retrieve the stored values from the blockchain, for that we would need Web3.js, and JavaScript language. The below code needs to be pasted between the

<script type=”text/javascript”>

</script> tags.

That’s all, now, you can use your webpage to store and load your employee’s information to/from the blockchain.

The final look should be like the given image below.

8. Employee Record Management System

If you face any problems while implementing this tutorial, please ask in the comments, and if you like this post, please clap. Thanks

If you want to learn more about blockchain and discuss some ideas with members from academia and industry, you are welcome to join our Telegram group.

Telegram group: https://t.me/joinchat/Q48BNwB-f8RlZTJl.

Code Availability:

All the code used in this tutorial is available at: https://github.com/AliArshadswl/Employee_RMS_Blockchain

References:

web3.js — Ethereum JavaScript API — web3.js 1.0.0 documentation

Solidity — Solidity 0.8.6 documentation