How To Design A Complete Blockchain Browser

Recently I am following up on a blockchain project involving a blockchain browser. I researched and compiled how to design a blockchain explorer.

What is a blockchain explorer

When it came to the need to build a "blockchain browser" for this project, one guy said to me seriously: Do you want to build a browser?

In fact, Blockchain Browser is a bit different from traditional IE. I prefer to define it as a data visualization tool on a blockchain network. As a way of storing and processing data, blockchain itself does not exist in a visual form. It is a tool that facilitates users to obtain data information on the blockchain in a visual way. Currently, most of them exist online. Users do not need to understand the underlying technology of blockchain. They can view the node, block and transaction information on the blockchain directly on the blockchain browser through the web page. There is no need to view logs through the interface to query data.

At present, it seems that the blockchain browser is an essential infrastructure for a blockchain project. Product managers must not bypass the blockchain browser when designing a complete blockchain product.

What should a blockchain explorer include?

Here, the first thing we need to make clear is that the blockchain browsers of different blockchain projects are not completely consistent. They are generally adapted based on the blockchain’s underlying technology options and project needs. However, despite the complex surface, we can still summarize some core elements.

I mainly researched the following blockchain explorers:

[1] Ethereum

- (Blockchain Explorer Project)[2]

FISCO-BCOS[3]

Ant Blockchain[4]

Bubi Blockchain Explorer[5]

After careful analysis, they all contain the following elements:

Chain overview (Chain) information

Generally speaking, it is the overall overview of this blockchain, used to describe the overall operating structure of the blockchain, generally including the current block height, total transaction volume, node overview, the latest (several) block information, the latest (several) block information) transaction information, etc.

Usually displayed on the home page.Below are several representative screenshots of the homepage of blockchain browsers

On Ethereum:

-:

FISCO-BCOS Browser:

Bubi Blockchain Explorer:

Block information

Blockchain is made up of blocks. Blocks are similar to records in MySQL. Every time data is written to the chain, a block is created. The display of block information is determined based on the data structure of the blockchain, and the data structures of different blockchains are different. However, it can generally be divided into block header (Head) and block body (Body).

•The block header generally contains the characteristic values ​​of the current block, such as the generation time, the hash value of the actual data (i.e., the block body), the hash value of the previous block, etc. •The block body typically contains the actual data contained in the block. Trading Information. It should be noted here that due to limitations and blockchain processing capabilities, generally transactions are packaged and uploaded to the chain regularly, rather than every transaction.

In the blockchain browser, block information display generally includes a block list and detailed information of a single block.

(From: Bubi Blockchain Browser Block Information)

(From: browser blocking information)

(From: Alibaba Cloud Baas platform browser block information)

Trading Information

In the blockchain, the transactions represented are only transfer transactions. It mainly includes information such as transaction time, block to which it belongs, transaction status, transaction fees, initiating account, target account, etc. Some may also include endorsement information, chain code, etc.

(From: Bubi Blockchain Browser Block Information)

(From: Alibaba Cloud Baas platform browser block information)

(via: FISCO-BCOS Browser)

Smart contract () information

On a Turing-complete blockchain, there is another type of transaction - a smart contract-based transaction (), which is essentially a special transaction, but its content is much more complex than a transaction ().

The display of contract information mainly includes the contract name, language version used by the contract, code content, etc. However, based on my research, none of these blockchain explorers disclose this information.

The above stable currency USDT (Friends who speculate in currency must know that this stable currency project known as "pegged to the US dollar" is one of the ERC20 Tokens implemented based on smart contracts running on Ethereum, as well as EOS at that time). Don't tell me this Just tears...)

When we enter the USDT project page, we will see the next one.

Click to enter and you can see some information about this book, which also includes smart contract version, source code, ABI[6] and other information of the contract written in the language used by the USDT project.

Address information

The main purpose of existence is to provide users with an "account" experience similar to ordinary Internet products. Displays all transactions under this address/account, generally including basic information and transaction information.

(From: Bubi Blockchain Browser Block Information)

(From: browser blocking information)

The basic architecture of the blockchain browser has been basically introduced. But in actual design, we still need to choose according to our own needs, or perform derivative processing and mining based on blockchain data. Browsers are for people to use, and not all data is accumulated irregularly. The more content, the better. The goal of product design is to provide users with the information they are looking for as quickly and completely as possible.

[1] On Ethereum:

[2] - (Blockchain Explorer project):

[3] FISCO-BCOS:

[4] Ant Blockchain:

[5]Bubi Blockchain Explorer:

[6] ABI: Full name, literally means Application Binary Interface. It can be generally understood as the interface description of the contract. When a contract is compiled, its corresponding ABI is determined. ABI is somewhat similar to the interface document in a program, describing field names, field types, method names, parameter names, parameter types, method return value types, etc.

标签： #Block #Browse #Contract #Actual #Bottom