4,467 reads

Create Your Own Ethereum Blockchain Explorer From Scratch

by Niharika SinghAugust 22nd, 2018

Too Long; Didn't Read

Blockchain’s beauty lies in its blockchain explorer. If you really own Ethers (Ethereum’s cryptocurrency), you’d know the importance of <a href="https://etherscan.io" target="_blank">etherscan.io</a>

Company Mentioned

featured image - Create Your Own Ethereum Blockchain Explorer From Scratch

Blockchain’s beauty lies in its blockchain explorer. If you really own Ethers (Ethereum’s cryptocurrency), you’d know the importance of etherscan.io

Source: https://etherscan.io/txs

If your organisation is operating on private ethereum network, then a blockchain explorer would be a treat. But seldom people get stuck on where to start.

In this tutorial, we will connect to Ethereum’s main network using Infura. If you get the essence of this article, then you will be able to develop a blockchain explorer for a ethereum private blockchain as well.

Technology stack I am going to use:

Web3.js (Ethereum’s JavaScript API)
Infura keys
HTML (You can alsouse React/Angular for the frontend)

<!DOCTYPE html><html lang="en"><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>Blockchain Explorer</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><style>body {padding-top: 20px;}h1 {margin: 20px 0px;}</style></head><body><div class="container"><div class="row"><div class="col-lg-12 text-center" ><img src="img/picture.png"><h1>Blockchain Explorer</h1><h3> Latest 20 blocks </h3><table class="table"><thead><tr><th scope="col">TxHash</th><th scope="col">Block</th><th scope="col">Timestamp</th><th scope="col">Gas Used</th></tr></thead><tbody></tbody></table></div></div></div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>

<script>  
  var provider = '[https://mainnet.infura.io/v3/'](https://mainnet.infura.io/v3/32d7425cd6b741f8a54653b6aa4c6b3c%27); //Your Infura Endpoint  
  var web3Provider = new Web3.providers.HttpProvider(provider);  
  var web3 = new Web3(web3Provider);

var latestBlock = web3.eth.blockNumber;

// List blocks in tablefor (var i = 0; i < 20; i++) {var block = web3.eth.getBlock(latestBlock - i);var number = block.number;var hash = block.hash;var time = block.timestamp;var gas = block.gasUsed;//var sender = web3.eth.getTransaction(hash.from);convertTimestamp(time);

function convertTimestamp(time) {var d = new Date(time * 1000), // Convert the passed timestamp to millisecondsyyyy = d.getFullYear(),mm = ('0' + (d.getMonth() + 1)).slice(-2), // Months are zero based. Add leading 0.dd = ('0' + d.getDate()).slice(-2), // Add leading 0.hh = d.getHours(),h = hh,min = ('0' + d.getMinutes()).slice(-2), // Add leading 0.ampm = 'AM',time;

if (hh > 12) {h = hh - 12;ampm = 'PM';} else if (hh === 12) {h = 12;ampm = 'PM';} else if (hh == 0) {h = 12;}

// ie: 2014-03-24, 3:00 PMtime1 = yyyy + '-' + mm + '-' + dd + ', ' + h + ':' + min + ' ' + ampm;return time1;}

    $('tbody').append("<tr><td>" + hash + "</td><td>" + number + "</td><td>" + time1 + "</td><td>" + gas + "</tr>");  
  }

</script>

</body></html>

If you want to access your private blockchain, replace the provider URL with your private blockchain metamask URL.

Practically, all we used is Infura keys to access the main ethereum network. Web3 to query the network. The JSON response received from Web3 is put into HTML. That’s all.