区块|如何设计一个完备的区块链浏览器设计|区块|布比|hyperledger|区块

编辑导语：区块链浏览器，是一种搜索工具，也是一个网站，专门为用户提供浏览和查询区块链上信息。因为区块链公开透明的特质，它需要一个媒介让用户看到链上的情况，区块链浏览器就是这个媒介。在区块链浏览器中，只需要输入某笔交易的ID等等，即可查询它们的详细信息。今天，本文作者就分享了如何设计一个完备的区块链浏览器。

文章插图
最近在跟进一个区块链项目，其中涉及到了区块链浏览器的部分，就调研整理了一下应该如何设计一个区块链浏览器。
一、什么是区块链浏览器在聊到这个项目需要做一个「区块链浏览器」的时候，一个小哥很严肃的对我说：要搞一个浏览器？
其实，区块链浏览器和传统的 IE、Firefox、Chrome、Safari 还是有点不同的，我更愿意将其定义为区块链网络上的数据可视化工具。
区块链作为一种数据的存储和处理方式，本身并不是以可视化的形式存在，通过可视化的方式来为方便用户获取区块链上数据信息的一种工具，目前大多是以 web 形式存在。
用户不需要了解区块链的底层技术，通过web页面，直接在区块链浏览器上查看该区块链上的节点、区块和交易信息，不需要通过接口查看日志的方式去查询数据。
目前看来，区块链浏览器是一个区块链项目必不可少的基础设施，一个产品经理在设计完整的区块链产品时必然不能绕过区块链浏览器这一环。
二、区块链浏览器都应该包括什么在这里，我们要首先明确一点，不同区块链项目的区块链浏览器都不是完全一致的，一般都会根据区块链底层技术选项和项目需求进行调整，不过抛弃繁杂的表面，我们还是可以总结出一些核心要素的。
我主要调研了以下几个区块链浏览器：

以太坊上的Etherscan[1]
HyperLedger Fabric Blockchain-Explorer (超级账本的区块链浏览器项目)[2]
FISCO-BCOS[3]
蚂蚁区块链[4]
布比区块链浏览器[5]

认真分析下，它们都包含了以下元素：
1. 链概览（Chain）信息一般是这条区块链的总体性概述，用以描述该区块链的整体运行结构，一般包括当前的当前区块高度、交易总量、节点概况、最新（若干条）的出块信息、最新（若干条）的交易信息等。
一般都在首页展示，放上几个比较有代表性区块链浏览器首页截图：
以太坊上的 Etherscan：

文章插图
HyperLedger Fabric Blockchain-Explorer：

文章插图
FISCO-BCOS 浏览器：

文章插图
布比区块链浏览器：

文章插图
2. 区块（Block）信息区块链是由一个个区块组成的，区块类似于 MySQL 中的记录，每次向链上写入数据，就是在创建一个区块。
区块信息的展示是根据区块链的数据结构决定的，不同的区块链的数据结构都是不同的，不过一般都可以分为区块头（Head）以及区块体(Body)。

区块头一般包含当前区块的特征值，比如生成时间、实际数据（即区块体）的哈希、上一个区块的哈希等等；
区块体一般包含本区块所包含的实际交易信息。这里要注意的是受限制与区块链处理能力，一般交易会定期打包上链，而不是每一条交易都上链。

在区块链浏览器中，区块信息展示一般包括区块列表和单一区块的详情。

文章插图
via：布比区块链浏览器的区块信息

文章插图
via：Etherscan 浏览器的区块信息

文章插图
via：阿里云 Baas 平台 HyperLedger Fabric 浏览器的区块信息
3. 交易（Transaction）信息在区块链里，Transaction 代表的交易，单指的是转账交易。主要包含交易时间、所属区块、交易状态、交易费用、发起账户、目标账户等信息，还有的会包括背书信息、链码等。

文章插图
via：布比区块链浏览器的区块信息

文章插图
【 区块|如何设计一个完备的区块链浏览器】via：阿里云 Baas 平台 HyperLedger Fabric 浏览器的区块信息