How to Build an Ethereum Blockchain Explorer Dapp

How to Build an Ethereum Blockchain Explorer Dapp


– In this lesson, we’re going to build
a very simple dapp using
the Ethereum blockchain
as our backend.
We’re going to build a blockchain explorer
kind of like Etherscan, but
we’re only going to display
the last 10 blocks on the chain.
To do this, we’ll use
an opensource framework
called ethers.io to quickly
develop and deploy our dapp.
Ethers comes with command line tools,
which are available as a node module
and can be installed using
npm install ethers-cli.
Let’s install to our global con-tax,
since we’ll probably use this
across multiple projects.
You can read more about ethers
by checking out their
awesome documentation online.
Ethers.io makes it easy to create dapps
by allowing you to
quickly run them locally
during development.
One of the things I really like is
that it removes the need to
have a copy of the blockchain,
so we don’t need to run a
local geth node for example
in order to build dapps.
Another thing I really
like is that it comes
with a free hosting
service called ether space
where we can store some of
our static files for free.
We’ll see how to use this later,
but for now, we’ll just
keep everything local.
The first step is to
create a new project folder
for our dapp and navigate into it.
We’ll call our project explorer.
To use the ether’s space hosting,
we need to have an Ethereum account,
and we can create one by
calling ethers-build init,
which generates a key file
for us called account.json.
Make sure you use a strong password
when encrypting your private key.
Your key files never leave your
web browser’s local storage
when using ethers.
Now let’s start by
building our front end UI.
We can create a new html
file called index.html
and define a head and
body for our document.
Let’s put hello world in the body,
and we’ll also give our page a title.
We can quickly spin up a local web server
to serve this index.html
by using the command ethers-build serve.
By default, ethers will
point to the main net,
but we can also pass the testnet option
to point to robs-ton.
This prints out a local http address
where we can see our UI.
Let’s place this URL into a browser.
We get some sort of view rendered,
but this isn’t like anything
we wrote in our html.
We keep seeing this loading
applications spinner
because we haven’t included
the ethers app JavaScript
in our document.
Let’s add a script tag
to the end of our body
and link it to the minified
ethers app JavaScript.
Now when we reload the
page in the browser,
we’re at least able to see
our hello world message,
meaning our application is loading.
There’s also a dashboard
across the top of the page,
but we didn’t actually write
any of this in our index.html.
This view is inserted by
the ethers.io container
running locally.
Through the ethers.io container,
we can serve multiple apps by
passing the application URL
at the end of the fragment.
The part after the hashtag
tells the ethers.io container
which application to load.
Typically, we would have to
run the ethers.io container
over https, but it allows for running
over http for development.
The ethers.io container provides a bunch
of other tools for us like a messenger,
a testnet faucet, and even
its own blockchain explorer.
But we won’t get into
these features right now.
Let’s try to displaying the last 10 blocks
from the blockchain in our UI.
We can replace our hello world text
with an html table element
that defines three column headers.
We’ll print out each block’s number,
hash, and timestamp of creation.
Let’s give our table an ID
so we can reference it
later in JavaScript,
and we’ll also set the width to 100%.
We can define a new script element
where we’ll write some inline JavaScript.
Using the ethers variable,
we can interact with the ethers API.
Let’s start by setting a callback function
for when ethers has
loaded this application.
We’ll print a simple
message to the console.
Running this in the browser
with developer tools
will demonstrate that
it is indeed working.
Now let’s populate our
table with information
once our ethers app is ready.
We can define an update blocks function,
which will fetch the data for us.
Using the ethers variable again,
we call the
ethers.blockchain.getBlockNumber method
which will return a JavaScript promise,
meaning the results will
be returned asynchronously.
To handle the response,
we use the then-function
on the promise to pass
a callback function.
Let’s simply print out the
block number to the console
and verify that it’s
working in our browser.
We can verify the block number returned
by cross-referencing it
with the latest blocks
listed on Etherscan.
We can see the last block
number on the front page
and verify that it’s close to our value.
The next step is to fetch the data
for the last 10 blocks that came
before this latest block number.
We’ll do this using a simple four loop
inside our callback function
and then requesting the data
for each block using
ethers.blockchain.getblock
and passing in the block number.
This method also returns a promise,
so we use then to provide a callback to it
and handle the block data.
For now, we’ll just pass the block
to a method called print block,
which will display it for us.
The print block method gets a reference
to the table using document.getElementById
and then adds a row to the
end using table.insertRow.
We insert three cells
into this row for our data
and then populate the
cells using the block.
Let’s try this out in our browser.
If we refresh the page,
we see a list of 10
blocks being printed out.
They’re not in any particular order,
since they’re fetched and
printed asynchronously.
Again, we can cross-reference the data
on Etherscan to make sure it’s correct.
And there we have our very first dapp.
Within a few minutes,
we were able to create
a very basic blockchain
explorer using ethers.io.
We used only html and JavaScript
to create our front end,
and displayed data from the
main net Ethereum blockchain.
Ethers.io allows for
creating your front end
using any web technology,
so you can still use your
favorite front-end frameworks.
In this example, the front
end files were stored locally,
and serve through a locally
running instance of ethers.io.
In the real world, we would need to host
these static front end files somewhere.
The most convenient choice
is to use Amazon S3,
but centralized storage solutions
aren’t necessarily what we want.
We can also host our static files
using decentralized storage
services like IPFS or Swarm,
which are essentially
peer-to-peer data sharing networks
kind of like BitTorrent.
To learn more about building
Blockchain applications
check out our online guides
and courses
available at blockgeeks.com

6 comments

  1. One comment, for anyone else really starting from scratch on a pretty bare Windows 10 machine, npm install ethers-cli will fail, with: "MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe". To fix this, 1) install the .NET Framework 2.0 SDK, 2) install Microsoft Visual Studio 2005 or 3) add the location of the component to the system path if it is installed elsewhere." To actually fix this, see the instructions here: https://github.com/nodejs/node-gyp

  2. Great job Blockgeeks and many thanks for keeping us updated! Happy to have subscribed to your newsletter. Informative, infectiously enthusiastic and a fun to read beside. THANKS!

Add a Comment

Your email address will not be published. Required fields are marked *