Building dapps on Ethereum - part 3: user interface
Before we begin
If you haven’t already, I would recommend you to read the previous posts in this series:
Throughout this blog post series we will use sample code from the Iron Doers project which is a quite simple concept briefly described in a practical example of using blockchains and the project’s whitepaper.
As already mentioned, the UI is a seemingly regular HTML5 and JS app. But the key difference is the connection to the third web – the decentralised web! There are two vital components to this (1) the
web3.js library and (2) a browser that knows how to use the connection and can associate an account (wallet) key-pair with the browser session.
Oh goodness, front-end tooling is moving fast!There are numerous nice UI frameworks out there like React, Angular or Ember that often are used with a layout systems like Bootstrap and pre-processed with Less or Sass. Further, we have automation, packaging and task runners like [npm][npm], Grunt, Gulp, Browserify and Webpack (or all of them together). Since the focus of this series is the creation of a decentralised application we will only cover the bare minimum for creating a UI. We’ll keep it short and simple with just npm, webpack and straight-up Bootstrap (no pre-processing).
We’ll start by defining our UI dependencies in
package.json (in the repo root). The main packages are (1)
web3 used for connecting to the decentralised web (2)
truffle-contract to create JS abstractions of our contract binaries on the blockchain (3)
webpack for bundling all assets into a single app and (4)
bootstrap for making things look pretty.
Before we can bundle our dependencies into a single JS application we must define
webpack.config.js (in the repo root). The three main things going on here is (1) the app will be output to
./www/bundle.js (2) jQuery will be provided to any library that needs it, primarily Bootstrap in our case and (3) our development server will use
./www as the document root.
The HTML5 portion of our dapp is placed at
./www/index.html and the full source code of this file can be found in the example repo. It’s a basic Bootstrap structure and won’t need much explanation.
The JS portion of our dapp is placed at
./src/dapp.js and the full source code can be found in the example repo. Below I’ll explain fragments of the more important parts.
At the bottom on the dapp source code we (1) prepare the connection to the provided blockchain (with fallback on our local blockchain) (2) check that the user have connected an account with the browser and (3) connecting our contract abstraction to the blockchain as well.
For all this to work, you need to use a browser that can browse the decentralised web like Mist or the Status mobile app.
addDoer are the UI to the equivalent call and transaction functions in our smart contract that we developed in part 2 of this series. As you can see the interaction with the contract’s JS abstraction is identical to those in the Mocha tests, so we can already be sure that these will work!
Installing and testing locally
- Install the Mist browser.
- Start a blockchain with
gethaccording to the bonus instructions at the bottom of the part 2 post (don’t forget to start a miner).
- Compile and migrate the contracts to your new blockchain (again see part 2)
Now we need to install all dependencies and start a local web server to host our dapp. The local web server is provided by the
webpack-dev-server package that we defined in
$ npm install $ npm run dev
In a new terminal window, launch the Mist browser with a special parameter to connect to the local blockchain:
$ /Applications/Mist.app/Contents/MacOS/Mist --rpc http://127.0.0.1:8545
And now you can start interacting with your new decentralised application!