It’s time to build a UI for our DApp. We’re going to build an HTML/CSS/JavaScript page which will display the pixels that we have on the blockchain.
Keep this in mind: what we’re building is a visualization of the true data that exists on the blockchain. That is, our page isn’t the source of truth, it’s a visualization.
This means that this app could run locally on anyone’s computer without connecting to the broader Internet as long as they have our code and the Ethereum blockchain on their local machine.
Boilerplate
To build our boilerplate for this app, we’re going to use nwb like we did in the earlier course.
Again, in a real app I’d probably use a web framework like Angular or React, but for now, vanilla JavaScript will be fine.
npm install -g nwb
// we already have a million-ether-page so let's create our app in there
cd million-ether-page
ls
ls contracts
nwb init web-app million-ether-page
npm install
// now install web3, which gives us a connection to our ethereum node, and get-pixels, which we'll use to read image files later on
npm install web3 get-pixels
npm start
open http://localhost:3000/Now that we have our boilerplate, let’s draw on a canvas.