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

最近在跟进一个区块链项目，其中涉及到了区块链浏览器的部分，就调研整理了一下应该如何设计一个区块链浏览器。

一、什么是区块链浏览器

在聊到这个项目需要做一个「区块链浏览器」的时候，一个小哥很严肃的对我说：要搞一个浏览器？

其实，区块链浏览器和传统的 IE、Firefox、Chrome、Safari 还是有点不同的，我更愿意将其定义为区块链网络上的数据可视化工具。

区块链作为一种数据的存储和处理方式，本身并不是以可视化的形式存在，通过可视化的方式来为方便用户获取区块链上数据信息的一种工具，目前大多是以 web 形式存在。

用户不需要了解区块链的底层技术，通过web页面，直接在区块链浏览器上查看该区块链上的节点、区块和交易信息，不需要通过接口查看日志的方式去查询数据。

目前看来，区块链浏览器是一个区块链项目必不可少的基础设施，一个产品经理在设计完整的区块链产品时必然不能绕过区块链浏览器这一环。

二、区块链浏览器都应该包括什么

在这里，我们要首先明确一点，不同区块链项目的区块链浏览器都不是完全一致的，一般都会根据区块链底层技术选项和项目需求进行调整，不过抛弃繁杂的表面，我们还是可以总结出一些核心要素的。

我主要调研了以下几个区块链浏览器：

1. 以太坊上的Etherscan[1]
2. HyperLedger Fabric Blockchain-Explorer (超级账本的区块链浏览器项目)[2]
3. FISCO-BCOS[3]
4. 蚂蚁区块链[4]
5. 布比区块链浏览器[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 浏览器的区块信息

via：FISCO-BCOS 浏览器

4. 智能合约（Contract）信息

在具备图灵完备的区块链上，还有一种交易——基于智能合约（Contract）的交易，本质上是一种特殊的交易，但是其内容要比交易（Transaction）复杂的多。

合约信息的展示主要包括合约的名字、合约所用语言的版本以及代码内容等。不过就我调研的结果来看，这几个区块链浏览器上除了 Etherscan 外都没有公开该信息。

以 Etherscan 上的稳定币 USDT（炒过币的小伙伴一定都知道这个号称「和美元挂钩」的稳定币项目，它就是运行在以太坊上基于智能合约实现的 ERC20 Token 之一，还有当年的 EOS ，别说了都是泪……）

我们进入 USDT 项目的页面，会看到 Profile Summary 下有一个 Contract。

点击进入，就能看到本 Contract 的一些信息，其中还包括了 USDT 项目使用 Solidity 语言编写的智能合约版本、源码、该合约的 ABI[6]等信息。

5. 地址（Address）信息

Address 的存在主要是给用户和普通互联网产品类似的「账户」体验，通过汇集该地址/账户项下的所有交易进行展示，一般包括基本信息和交易信息。

via：布比区块链浏览器的区块信息

via：Etherscan 浏览器的区块信息

区块链浏览器的基本架构基本就介绍完了，不过在实际设计中还需要我们根据自身需求做出取舍、或根据区块链数据进行衍生加工和挖掘。

浏览器是给人来用的，不是把所有的数据无规则的堆积上去、内容越多越好，而是能够最快且尽量完整的给到使用者想找的信息才是产品设计的目标。

References：

[1]以太坊上的Etherscan: https://etherscan.io/

[2]HyperLedger Fabric Blockchain-Explorer (超级账本的区块链浏览器项目): https://github.com/hyperledger/blockchain-explorer

[3]FISCO-BCOS: https://fisco-bcos-documentation.readthedocs.io/zh_CN/latest/docs/browser/browser.html

[4]蚂蚁区块链: https://antchain.antgroup.com/

[5]布比区块链浏览器: https://explorer.bubi.cn/

[6]ABI: 全称 Application Binary Interface，字面意思是应用程序二进制接口，可以通俗的理解为合约的接口说明，当合约被编译后，它对应的abi也就确定了。ABI有点类似于程序中的接口文档，描述了字段名称、字段类型、方法名称、参数名称、参数类型、方法返回值类型等

#专栏作家#

张小璋，公众号：张小璋碎碎念（ID：SylvainZhang），人人都是产品经理专栏作家。野蛮生长的产品经理，专注于互联网金融领域。

本文原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议