This tutorial is part of the series ToDo List Ethereum Dapp. It is the Step 4. Tutorials already published:
- Intro
- Step 1: Writing The ToDo Smart contracts- beginning
- Step 2: Writing The ToDo Smart contracts – end
- Step 3: Writing The Nodejs Backend
- Step 4: Setup the frontend and read account data (This tutorial)
- Step 5: Build a smart contract client with Truffle Contract
- Step 6: Refactor With Webpack, ES6 and truffle-solidity-loader
- Step 7: Read Contract data from Frontend
- Step 8: Create smart contract data from frontend
- Step 9: Toggle task done & keep frontend updated
In the last episode of this series we setup a nodejs server so we can serve our static frontend. We can currently load the frontend in a browser, but there isn’t much in it.
In this episode we will setup the basic infrastructure to communicate with the blockchain from the frontend. For this episode we will use web3, the most popular client library for ethereum. By the way, I have done some videos about web3, check them out if you want to have more in depth knowledge about this library:
Setup project
We will start from the code of the last video of this series. Clone the GitHub repo of this screencast with
git clone https://github.com/jklepatch/eattheblocks.git
If you already have the repo, first update it with running git pull at the root of the repo. Then copy and paste the code of the last video in a new folder called step4, enter that folder and install the npm dependencies:
cp step3 step4
cd step4
npm install
Setup javascript files
Next, we will setup a folder for our frontend javascript code. In the previous video we created a folder called app to host our frontend, so we will create this javascript folder inside:
mkdir app/js
Let’s create a javascript file inside:
touch app/js/index.js
In this file, let’s just put a dummy console.log statement for now:
console.log('loaded');
We need to load this javascript file from index.html. We will also load jQuery just before, because we will use it in the next episode:
<body>
...
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
Now let’s make sure it works on the browser. In the previous video of this series we setup a command to start our server, so lets use it:
npm start
Now open your browser at http://localhost:3000. Open the developer console:
- You should the
loadedmessage of theconsole.logstatement – this prove theindex.jsis properly loaded - If you type
jQueryyou should seeƒ (a,b){return new n.fn.init(a,b)}– this proves jQuery is properly loaded
Install web3
Next we need to install web3, the library we will use on the frontend to interact with the smart contract on the backend.
It’s possible to install web3 with npm and then use tools like webpack to load it on the frontend, but for this video we will do something more simple and directly load web3 by referencing it directly from the html file.
For this, we can’t just take the source code of web3, because in its original form its not runnable browser side. What we want is a version of web3 that has been packaged for the frontend.
SHORT VERSION: just copy and paste the content of this link to this newly created file: vendor/web3.min.js
LONG VERSION: (if you want to understand whats going on)
Let’s go to the official Github repository of web3. By default, you are on thedevelop branch, which is the cutting edge of the development. But in order to avoid compatibility issues, we will pick a specific version of web3. At the time of this recording the latest version of web3 was v1.0.0-beta.35, so we will pick that one.
Click on the dropdown menu that say “Branch: develop”, click on the “Tags” submenu, and click on the v1.0.0-beta.35 entry. If you don’t see it in the first few entries you can search for it in the search box. After you click on the correct tag entry, the page will reload and display the code of this specific tag.
Go to the dist directory and open the web3.min.js file. This is a minified version of web3, already packaged for the frontend. Click on “raw” to see all the code clearly, and copy everything with ctrl + a and ctrl + c
Now, back on your command line create a folder called vendor in the app folder. This will host third-party code:
mkdir app/vendor
Create a file called web3.min.js:
touch app/vendor/web3.min.js
Now, let’s load this code from the index.html file. We will load web3 just before index.js, so that we can use it from index.js:
<body>
...
<script src="vendor/web3.min.js"></script>
<script src="js/index.js"></script>
</body>
Now lets fire up our server and check that web3 is loading properly. In your browser, in the dev console try to reference the Web3 object, with an uppercase W. If you see Uncaught ReferenceError: Web3 is not defined, it means it doesn’t load properly. Otherwise, you will see something like this:
Start a local blockchain
Before we connect web3 to our local blockchain, we need to start the blockchain first. And for this we will use ganache-cli, an Ethereum client for development.
ganache-cli is available as a npm package. Install it with this command:
npm i -g ganache-cli
Next, to start ganache, run:
ganache-cli
By the way, Ganache also has a GUI called Ganache GUI. If you want to know more, you can watch the 2 videos I made about it:
Read accounts with web3
Now, let’s verify that we are able to connect web3 to our development blockchain by reading the blockchain accounts from the frontend, with web3.
Let’s switch to the index.js file. We will first write some code to instantiate web3:
web3 = new Web3('http://localhost:8545');
Web3 can be instantiated in different ways, but in our case we will communicate with the blockchain using http. That is the most standard way of using web3.
There are 2 caveats when instantiating web3:
- First caveat is to not get mixed up between the uppercase
Wand lowercasewwhen you referenceweb3. Ourweb3instance is lowercasew, but when we reference theWeb3object from the library, we use an uppercaseW. - Second caveat is to not pass wrong parameters to the
Web3.providers.HttpProvider. If you pass parameters that do not match your local blockchain (ex: wrong port),web3will not be able to connect.
This being said, lets read the accounts that were created on our local blockchain. For this we are going to use the getAccounts() method of web3:
web3.eth.getAccounts(console.log);
Now reload the page in your browser, and in the dev console you should see an output like this:
0: "0x22874b4bD0f9f2e420ff5721CE1b46071aEB6680"
1: "0xe1a9f55650bA021C3d10B5dA3596fE56E311f55f"
2: "0xF3C6A7e0844E9b07E89aDde164878CeE8bCF2F5e"
...
...
9: "0x4513c5eF24C69a944Da6b7CEe37b27847D8C0C13"
These are the addresses of the accounts read from your local blockchain. You can check that these values are correct by checking the output following the ganache-cli command. In my case I have the following output:
Ganache CLI v6.1.0 (ganache-core: 2.1.0)
Available Accounts
==================
(0) 0x22874b4bd0f9f2e420ff5721ce1b46071aeb6680
(1) 0xe1a9f55650ba021c3d10b5da3596fe56e311f55f
(2) 0xf3c6a7e0844e9b07e89adde164878cee8bcf2f5e
(3) 0xee59e73c62fec25c35698a98a58d565d4780e999
(4) 0x1474dc9d03877a1486e4d4c118d330e1ec3680bd
(5) 0xdc012c70b9a311c0bebb6331677f26d85d4c1a7f
(6) 0xdd64482643bca0a29abbc2485fbe1b93cd6be6d6
(7) 0xf76169ded18f4489753933613c80bb1afb620d33
(8) 0xe3fdf00930e6a3689764adea4a1ff57ffe684ad1
(9) 0x4513c5ef24c69a944da6b7cee37b27847d8c0c13
We can see that the account addresses match. This proves that everything is working fine.
Setup the css
So far we haven’t wrote any html, but we will in the next videos. Let’s get prepared and setup the css.
First we will create a css folder and a css stylesheet:
mkdir app/css
touch app/css/style.css
Copy this css stylesheet from the Eat the blocks repo and paste it into the style.css file that you just created (I am not going to explain this, because this is not the most interesting):
/**
* CSS of ToDo App
*
* Blue: #29b6f6
* Orange: #ff9800
*/
...
...
In index.html let’s add a <head> block and load our css:
<head>
<!-- custom css -->
<link href="css/style.css" rel="stylesheet">
</head>
We will also add Bootstrap, by loading directly from its public cdn:
<head>
<!-- Bootstrap (loaded via CDN) -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
...
</head>
If you are not familiar with Bootstrap, this is a very popular css framework. In simple words, it will allow us to have a decent looking app without too much effort.
Let’s also finalize the <head> block by adding the below tags. I am not going to explain everything but the most important is the <meta name="viewport" ... that will make Bootstrap work on mobile too.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ETB Ethereum ToDo List App</title>
..
</head>
Setup basic html
The last thing we will do in preparation of the next video is to setup some very basic html. The classes you see are from Bootstrap:
<body>
<!-- page header -->
<div id="page-header" class="row">
<div class="col-sm-12">
<h1 class="text-center">ETB Ethereum ToDo List App</h1>
</div><!--./col-sm-12-->
</div><!--./row-->
<div class="container">
</div>
<footer>
<p class="text-center">Copyright 2018 <a href="https://www.eattheblocks.com" title="Eat The Blocks, #1 Screencast for Ethereum & Blockchain Developers">Eat The Blocks</a>, #1 Screencast for Ethereum and Blockchain developers.</p>
</footer>
...
</body>
Now visit your browser at http://localhost:3000 and you should see something like this:
Congratulations for following up to here!. It is still very basic, but we are making progress!
In the next video of this series, we will use the truffle-contract package to be able to interact easily with the smart contract. Stay tuned!
Leave a Reply