Ethereum Development Walkthrough (Part 5: Making a DApp)
If you have read every part of this tutorial series, you already know how to make a decentralized application on Ethereum, and in this tutorial, I’ll just guide you to use that knowledge together.
One thing that we will need, is, a tool that let us interact with the deployed smart contract, for that, we have a great API named Web3.js.
Create a new folder for the project, and run the
truffle init command.
Next, create a folder named “src” where we will store our web application files. Inside the folder “src”, create an “index.html” file. Paste the following code inside:
Create a folder named “JShelpers”, and create the following three files inside:
You can find their content in the source code for this tutorial on Github.
Now, open “app.js”, and add the following code:
We start by creating some necessary variables, and initializing our Web3 provider variable. We will expect the users to have a web3 provider running. Most users at the moment use Chrome or Firefox, with an extension called “Metamask” to interact with an Ethereum blockchain, so we are expecting Metamask to inject an instance of web3 in the page, if not, we ask the users to install it.
Now, let’s implement the necessary functions to interact with our contract, we will start by initializing a reference to the deployed smart contract, creating the function ‘initWrestlingContract ()’:
Then we will create the body of the other functions that will retrieve the informations for us:
The ‘init()’ that launches the execution of all these functions will of course not be executed automatically, so we need to trigger it:
Now we will need to complete our html page, modify it so it will look like this:
Back to our “app.js” script, we need to add ‘registerAsSecondWrestler’, the function that will let a user register as a second wrestler :
That’s it for our web app! We just need to configure a few things and we are set to go.
While an html document could be opened directly on your browser, the Metamask extension wouldn’t be able to interact with it due to your browser security measure, so we will use a little local http server to serve our files. For that, we will use lite-server:
npm init -y
npm install lite-server --save-dev
Create file a config file for lite-server named ‘bs-config.json’ in your project root folder, and paste the following inside:
This instructs lite-server to take files from the folder “src”, where our web app is, and “./build/contracts” where the json files that describe the smart contracts deployed by truffle.
Next, add this line:
To ‘package.json’ inside the “scripts” node like the following:
"test": "echo \"Error: no test specified\" && exit 1"
Then run the following command inside your console, it should open a page on your browser at “http://localhost:3000/”:
npm run dev
Now, search for and install Metamask on your browser.
The smart contract
Don’t forget to deploy a smart contract to your test network. You can find the Wrestling contract in part 1 of this tutorial, and use one of the methods shown in the second part of this tutorial series.
For this part, I’ll use Ganache, the UI version, but you can use ganache-cli to simulate the ethereum blockchain.
To deploy the smart contract, use truffle migration command:
truffle migrate --network development
After installing Metamask, click on its icon, then click on the top left of the pop-up, you’ll see a list of different networks, choose the “http://127.0.0.1:7545” one. If there is no such option, click on the “Custom RPC” option, and add that url, so Metamask can connect with Ganache.
Now click on the “restore from seed phrase” option shown in the pop up of Metamask, add copy-past the 12 words of the mnemonic on ganache, and write a password you like.
This process will unlock the first account, the one with which we deployed the contract, but for a good simulation, we will use the second account that Ganache generated, so we will have to add it manually to Metamask, click on the user icon on the top right of Metamask, and choose “import account”, paste the private key that you can copy from the ganache-cli, or click on the key icon on Ganache if you are using the GUI version.
Testing the DApp
Now that the smart contract is deployed on our test network, that we have our web app set up, and that Metamask is configured, we can test the DApp.
Start by going to http://localhost:3000/, the link where lite-server is serving our web app, you’ll see the interface of the web app:
Making sure that the Account 2 is still selected on Metamask, press the “Register to fight” button, and normally a pop up from Metamask will appear, asking you to confirm the transaction (You can see it also by clicking on the icon of Metamask if it doesn’t pop up).
Upon clicking on the submit button, the address of the second wrestler should be replaced by the address of the account that triggered the call (If it doesn’t automatically, refresh the page. If it seems that the transaction fails, check that you followed this tutorial correctly, or that Metamask doesn’t bug, because it did for me when I was writing this tutorial. Most tools around Ethereum are still under development, and we can only thank the developers behind them for the huge effort they put on them).
That’s really what a DApp on Ethereum is, there is nothing more to it. For the ones who want to interact with a smart contract in the backend of their DApp, you can of course use Web3.js on NodeJS by installing it with NPM, and using Geth, or infura.io as the provider. Here is a good tutorial that will walk you through that process.
Here is the link for the source code for this tutorial:
ethereum-walkthrough-5 - Repository for the 5th part of the tutorial series on Ethereum, "Ethereum development…github.com
Now, you have all the cards in hands to develop your Ethereum contracts and DApps, read other tutorials on the points that you didn’t understand well, read the documentations of the tools we saw in this project, and of course, practice, a good exercise for you will be to complete the web app of this tutorial, by adding the others functions of the smart contract.
You could join the developer community over Reddit, good tidbits are posted there regularly. You can read weekly news of what’s going on in the Ethereum world on the WeekInEthereum website. The ethereum forums are interesting too, and there are pretty active chats on the gitter of Ethereum.
This tutorial series ends here, but I’m already pen and paper, preparing another tutorial. Don’t hesitate to follow me so you’ll be notified when it’s out!
You can also find me on twitter @dev_zl.