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. On Ethereum, a DApp is a web application that will interact with smart contracts deployed on the blockchain. You can do it using python or other programming languages, but these will not be covered in this tutorial. We will focus only on . JavaScript We saw how to make a smart contract, in the , and how to deploy it in the . And in this tutorial, I assumed that you have a JavaScript background, it doesn’t matter how advanced you are, or which frameworks you use, we will use vanilla JavaScript, and a bit of JQuery to make our life easier. first part second 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 We have seen Web3.js, both on the in part 2, and when we performed a test on our contract in . Truffle console part 3 Let’s start Create a new folder for the project, and run the command. truffle init 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: touch jquery.min.jstouch truffle-contract.jstouch web3.min.js You can find their content in the . source code for this tutorial on Github Now, back to the “src” folder, create a new file named “app.js”. “app.js” will hold our JS logic, we will use a bit of JQuery with vanilla JavaScript to keep it simple, but of course in a real DApp, you can use the frameworks you like, for example React, Angular, Vue etc. 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 , so we are expecting Metamask to inject an instance of web3 in the page, if not, we ask the users to install it. blockchain 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. Installations 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 -ynpm 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: "dev": "lite-server", To ‘package.json’ inside the “scripts” node like the following: ..."scripts": {"dev": "lite-server","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 on your browser. Metamask The smart contract Don’t forget to deploy a smart contract to your test network. You can find the in part 1 of this tutorial, and use one of the methods shown in the of this tutorial series. Wrestling contract second part For this part, I’ll use , the UI version, but you can use ganache-cli to simulate the ethereum blockchain. Ganache To deploy the smart contract, use truffle migration command: truffle migrate --network development Don’t forget to check that your “truffle-config.js” file is set . And that you added the necessary to deploy it. correctly migration script Configuring Metamask 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 the link where lite-server is serving our web app, you’ll see the interface of the web app: http://localhost:3000/, The amazing and cutting-edge UI of our DApp 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 on NodeJS by installing it with NPM, and using Geth, or as the provider. Here is a that will walk you through that process. Web3.js infura.io good tutorial 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 devzl/ethereum-walkthrough-5 Here are an if you had a hard time following this one. And an other one . alternative tutorial over here Going forward 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 over Reddit, good tidbits are posted there regularly. You can of what’s going on in the Ethereum world on the . The are interesting too, and there are pretty on the gitter of Ethereum. developer community read weekly news WeekInEthereum website ethereum forums active chats 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

Ethereum

Dapp

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Ethereum Development Walkthrough (Part 5: Making a DApp)

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

dev_zl

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Ethereum Development Walkthrough (Part 5: Making a DApp)

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

dev_zl

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES