Building decentralized applications (Dapp)

Tram Ho

Introduce

After the theory of public blockchain access roadmap, I will introduce how to build a decentralized application (DApp) as well as build a prototype combining Contract and Frontend . The first article will build a based code for the DApp based on the Reactjs framework .

Initialize project

First, you need to prepare the necessary packages, basically, you only focus on 2 parts including the contract and the frontend

Contract

As mentioned in the previous section, the Truffle framework has also been mentioned in order to easily test units for smart contracts, in case the truffle has not been installed, use this command to install:

Then unbox the basic package of truffle : webpack. First, create a folder for the entire DApp:

Next is the unpack webpack package:

Next init npm:

Add the dependencies, then package.json will look like:

Finally use yarn to install the packages:

After running the complete command and removing some unnecessary files, the folder structure will look like this:

The webpack box has a default MetaCoin contract, and this will be the contract for us to do a basic demo. This contract will basically be a super shortened version of ERC20 . This contract will issue 10,000 coins , each of which will correspond to a price of 2 ETH

Having woken up to the Smart contract , continuing will be the second way to deploy this code. To deploy we will use the ropsten network, so we will need to reconfigure the truffle-config.js file:

Will need 2 things are Mnemonic and Infura key :

  • Mnemonic: Taken from Metamask itself, 12 characters seed words , remember to take it at an account with ETH because later you will use this account to deploy
  • Infura key: Taken simply by creating a project on https://infura.io/dashboard that will automatically generate a PROJECT ID . Infura can be understood as a fullnode

Having all the above, just call the command to deploy to ropsten network:

and success will be as follows:

After deploying, there will be a new folder to save the compiled file of contract:

The Metacoin file will contain two important parts: ABI and Address :

  • ABI can understand that it contains a description of the functions and variables of the newly deployed smart contract
  • The address of the contract has just been deployed , searching in the Metacoin file with the keywords networks will see the object with the key 3 – corresponding to the chainID of ropsten (each network will have a unique chainID , the mainnet of ETH has a chainID of 1 )

So basically the contract part, the important thing to achieve in this part is the ABI and Address of smart cotnract. In addition to using Truffle , you can also use Remix (Using remix will save less gas than truffle because there is no additional gas to deploy contract Migration )

Tips: There is a tip to optimize that is compile contract by truffle and deploy by remix to get Address and then it will have a perfect file with minimum cost.

Share the news now

Source : Viblo