Block Explorer

In this chapter, let's build a block explorer that will allow us to interact with the blockchain. A block explorer is simply a user interface that will allow us to explore the data inside of the blockchain. It will allow us to search for a specific block, specific transaction, or specific address, and then display that particular information in a visually appealing format.

The first thing that we'll do to build the block explorer is to add some new methods and endpoints to the blockchain, in order to search for the data. Then, let's add a frontend to the block explorer, so we can use it in the browser.

In this chapter, we'll cover the following topics:

• What is a block explorer?
• Defining the block explorer endpoints
• Building the getBlock, getTransaction, and getAddressData methods
• Building and testing /block/:blockHash, /transaction/:transactionId...

What is a block explorer?

A block explorer is an online platform that allows you to navigate through the blockchain, searching for various things including addresses, blocks, transactions, and so on. For example, if you visit https://www.blockchain.com/explorer, you can see a block explorer utility for the Bitcoin and Ethereum blockchains, as follows:

Inside of this block explorer, you can search the entire blockchain for a specific block, hash, or transaction, or any other piece of data that is required. The utility also displays results on an interface that's easy to understand. For example, if we search for Block #549897 in the block explorer, you'll see all the details of that particular block, as seen in the following screenshot:

This is exactly what we're going to build for our blockchain in this chapter.

...

Defining the block explorer endpoints

In order for the block explorer to function correctly, we'll need to query the blockchain for addresses, block hashes, and transaction IDs so that we can search for a particular parameter and get that particular piece of data in return. Consequently, the first step that we'll need to carry out is to build a few more endpoints. To do this, lets proceed with the following steps:

1. Go to the dev/networkNode.js file and after the /consensus endpoint, let's define the first endpoint of our block explorer, /block/:blockHash, as follows:

app.get('/block/:blockHash', function(req, res) { 

});

A specific blockHash will be sent with this endpoint, which, as a result, will simply return to us the block that the input of blockHash corresponds to.

2. The next endpoint that we'll build will be /transaction/:transactionId....

Building the getBlock method

Let's build a new method called getBlock that will take the given blockHash and search the entire blockchain for the block associated with that particular hash. In order to build the getBlock method, follow these steps:

1. Go to the dev/blockchain.js file and after the chainIsValid method, define this new method as follows:

Blockchain.prototype.getBlock = function(blockHash) { 

};

2. Inside this method, we want to iterate through the entire blockchain and search for the block that has a particular blockHash value. Then, this method will return that specific block to us. We're going to do all this with the help of a for loop:

Blockchain.prototype.getBlock = function(blockHash) { 
    this.chain.forEach(block => {
    
    });
};

When defining the for loop, we cycle through every single block in the blockchain.

3. Next, inside the loop, mention...

Building the /block/:blockHash endpoint

Let's use the getBlock method inside of /block/:blockHash endpoint to retrieve a specific block by its blockHash. Let's follow these next steps to build the endpoint:

1. The first thing that we want to do in this endpoint is to use the blockHash value that is sent with the /block/:blockHash request. We can access this blockHash on the req.params object. Go to the dev/networkNode.js file and in the /block/:blockHash endpoint that we defined previously, add the following highlighted code:

app.get('/block/:blockHash', function(req, res) { 
        const blockHash = req.params.blockHash;
});

Essentially, when we hit the /block/:blockHash endpoint, we're accessing the hash value of a block present on a particular node in the network. We're also accessing the hash value using the req.params object, which will give...

Defining the getTransaction method

Let's add a new method on the blockchain data structure called getTransaction. This will allow us to get a specific transaction by passing transactionId. We'll use this new method inside of the /transaction/:transactionId endpoint. So, let's get started!

1. Go to the dev/blockchain.js file, and after the getBlock method, define the getTransaction as follows:

Blockchain.prototype.getTransaction = function(transactionId) { 

}):

This method is very similar to the getBlock method. Here, we'll iterate through the entire chain and will set a flag equal to the correct transaction that we are looking for.

2. The next step in building this method will be to iterate through the entire blockchain. For this, use the forEach loop as follows:

Blockchain.prototype.getTransaction = function(transactionId) { 
       this.chain.forEach(block...

Building the /transaction/:transactionId endpoint

Let's build the /transaction/:transactionId endpoint by using the getTransaction method that we built in the previous section. Let's begin:

1. The first thing to do inside of this endpoint is to store the transaction ID sent as a request parameter. Let's store that in a transactionId variable, as follows:

app.get('/transaction/:transactionId', function(req, res) {
         const transactionId = req.params.transactionId;
});

2. The next thing to do is use the getTransaction method inside of the endpoint. To do this, add the following to the preceding code:

app.get('/transaction/:transactionId', function(req, res) {
         const transactionId = req.params.transactionId;
         bitcoin.getTransaction(transactionId);   
         
});

3. From the getTransaction method, we get an object returned to us that...

Building the getAddressData method

We'll build a new method on the blockchain prototype, called getAddressData, and we'll use this method inside of the /address/:address endpoint to fetch the data for a specific address that we are searching for:

1. Let's build this new method inside of the blockchain.js file. After the getTransaction method, define the getAddressData method as follows:

Blockchain.prototype.getAddressData = function(address) {

});

2. Now, the first thing that we want to do inside of this method is to get all of the transactions that are associated with the address and put them into a single array. Let's define that array now:

Blockchain.prototype.getAddressData = function(address) {
       const addressTransactions = [];
});

3. Then, we want to cycle through all of the transactions inside of the blockchain. If any of those blocks have the address...

Developing the /address/:address endpoint

Now, let's build the /address/:address endpoint and we'll use the getAddressData method inside of this endpoint. The /address/:address endpoint will be very similar to the /block/:blockHash and /transaction/:transactionId endpoints, so you shouldn't find it too challenging:

1. The first thing that we want to do inside of the endpoint is to store the address in a variable:

app.get('/address/:address', function(req, res) {
       const address = req.params.address;
});

2. The next thing that we want to do is use the getAddressData method to get all of the data for the given address. In order to do that, we will add the following highlighted code to the endpoint:

app.get('/address/:address', function(req, res) {
       const address = req.params.address;
       bitcoin.getAddressData(address);
});

3. From this method...

Adding the block explorer file

Let's understand how to set up the block explorer frontend. The block explorer will be a user interface with which we can interact with the blockchain from the browser. In order to build this user interface and make it functional, we need to use HTML, CSS, and JavaScript.

Now, instead of building all of the frontend by yourself, you can find an entire prebuilt frontend at the following link: https://github.com/PacktPublishing/Learn-Blockchain-Programming-with-JavaScript/blob/master/dev/block-explorer/index.html. We're not building the entire frontend in this section, because that's not the focus of this book.

To build the frontend, all you have to do is copy the file from the link provided and add that to the project's file structure. Now, go to the dev folder and create a new folder inside it, called block-explorer. Inside this...

Block explorer file explanation

In this section, we're simply going to walk through the index.html file that we created in the previous section. We'll do this to gain a better understanding of what is going on. So, let's get started.

Inside the index.html file, we have all of the HTML and JavaScript code to give the necessary functionality to the block explorer. This code also allows us to hit the API, and lastly, we just have some CSS and styles, which make everything look nice in the browser.

The code begins by importing a couple of libraries, such as angular.js, to hit the API, along with jQuery, Bootstrap, and some Bootstrap styles to make everything functional and aesthetically pleasing:

<head>
  <title>Block Explorer</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
...

Testing our block explorer

In this section, we're going to test the block explorer to make sure that it works correctly, and also to make sure that all endpoints and methods that we created in the previous chapter also work correctly. If the block explorer works, then we already know that the entire blockchain is also working correctly and is running on the decentralized blockchain network, so everything is wrapping up nicely now as we enter the final section of this chapter. Consequently, this is the last test that we will be doing. Let's follow these steps now to test the block explorer:

1. In order to test the block explorer, we should ensure that we have all five of the nodes running.
2. Next, head over to the browser and open up the block explorer by going to localhost:3003/block-explorer. You can actually go to a block explorer that's hosted on any of the nodes...

Summary

In this chapter, we built an amazing user interface to explore the blockchain that we have built in this book so far. We started by defining the necessary endpoints for querying the required data. Then we built methods such as getBlock, getTransaction, and getAddressData to help the endpoints to query the data. Furthermore, we developed the /block/:blockHash, /transaction/:transactionId, and /address/:address endpoints. After doing this, we added the block explorer's frontend code to our blockchain directory and then tested the block explorer and all the endpoints that we developed.

With this chapter, we have reached the end of this book. By this point, we have built our very own blockchain and added all the necessary functionalities to it. In addition to this, we have also built our decentralized network and an interface to explore the blockchain.

The next chapter...