HomeWikiHow to create an Ethereum dApp: the front-end part

How to create an Ethereum dApp: the front-end part

The first part of the guide “How to create an Ethereum dApp” covered the back-end part. In this second part, we will see in detail how to create the front end of an Ethereum dApp.

Before starting, as stated in the previous article, it is possible to find all the code on this GitLab profile.

The dApp in question will be a web app and as such will need web technologies to work properly.

As can be seen from the diagram above, the front-end development part is required to be able to interact and view data on the blockchain through a browser.

How to create an Ethereum dApp

Technologies used in this project:

Some of the above-mentioned technologies are not necessary, and for some of them it is possible to find various alternatives (for example with bootstrap or Jquery), but they simplify the work and make the interface more .responsive, functional and more aesthetic

The skeleton of the front-end part was taken from the following completely free Bootstrap template, although it has been modelled and expanded over time with various modifications.

The implementation

The connection between the Ethereum blockchain and the front-end part is guaranteed by the Web3.js library, which, as with the other libraries used for this project, must be invoked in the code before it is actually used.

Usually, it is good practice to call them inside the <head> tag, as can be seen from the next image.

In this case, the light versions of the libraries Jquery and Web3 have been downloaded and placed in a new folder called ‘vendor’.

The second necessary step is to define the instance of the object Web3 in which the local address of the Ethereum blockchain will be specified, in the following way:

In order to call up the smart contract previously developed it is necessary to declare it as var name_smart_contract = web3.eth.contract (ABI smart contract);

ABI and the creation of a Smart Contract

ABI stands for Application Binary Interface and is nothing more than the interface used to bridge the gap between the smart contract written in Solidity and the javascript code.

In essence, it is a json file, of variable length depending on the implementation of the smart contract, which must be copied and pasted within round brackets.

To easily access the ABI, the following steps are required:

  • From the PowerShell type: npm install -g truffle-export-abi
  • Next type: truffle-export-abi
  • The ABI file will be created in the build directory

Open the file with a text editor and copy and paste everything within the function.

Another fundamental step will be to specify the Ethereum address of the smart contract created.

To do this, simply write var contract= name_smart_contract.at (“address_smart_contract“).

The address can be easily found on Ganache in the first transactions carried out.

Following the exact order indicated in this guide, it should be located at the third transaction, under the heading “contract creation”. Now it is necessary to copy the address that is indicated as “created contract address” and to insert it in quotations in the previous function.

At this point, it is possible to interact correctly with the smart contract by calling up the functions previously written and any public attributes.

The operation of the Smart Contract

The main function of this Ethereum dApp is purchasing and it has been defined in the smart contract as follows:

Here is a brief explanation of the task.

It takes as input the ID of the artwork and its cost. Then the address of the buyer and seller is entered. The buyer’s balance is checked to see if it is sufficient to afford the item and if so, the smart contract is called up to certify the purchase on the blockchain. In addition, the transaction is carried out in which the ether necessary for the purchase are moved from the address of the buyer to that of the seller.

Secondly, a pop-up appears on the screen to warn the user of the success or failure of the operation. After that, the page is reloaded to allow the homepage to be updated so that the artworks already purchased are classified as sold and it is not possible to make a second purchase of the same product. This possibility is denied through the graphical interface but in any case, it would not be possible to buy twice the same element because of the check inserted in the smart contract.

The purchase function is then called up inside the onclick function of each card that represents the artwork offered for sale, as shown in the image below.

The Owners table

A second page called “Owners.html” has been created in which a table has been dynamically built which, each time the page is reloaded, calls up the getBuyers() function. It returns the current list of addresses of buyers of artworks. This data is used to fill in the table.

Everything is done in the following way:

If an address starts with “0x00” it means that it is an empty Ethereum address and that consequently there was no certified buyer for the given artwork.

A table with an appropriate ID must be defined within the body so that it can be easily accessed thanks to the document.getElementById function provided by jQuery.

At this point, the whole infrastructure has been created and everything should work perfectly.

The table in the Owners page will dynamically update with the address of the buyer of the artwork and, by using Ganache, it will be possible to see every single call to the smart contract that certifies the ownership by an address of a given artwork.

The property is guaranteed by the fact that only the actual owner of that Ethereum address can access the corresponding wallet through their private key.

The entire project code, containing both the back-end and the front-end, can be found on this GitLab profile.