前端工程师如何快速上手区块链DApp开发？

大家好，很高兴在QCon的领奖台上见到大家！

我的全名是“CSS Magic”。 两年前，我翻译了一本书，叫做《CSS Demystified》。 本书堪称前端领域的重量级著作，中文版销量已超过17000册。 我也很荣幸能为前端技术社区做出一点小小的贡献。

一个故事

总的来说，我是一个“CSS 人”。 不过，今天的话题是关于区块链的。 为什么“CSS 作者”会谈论区块链？ 我也不知道。 我不想说区块链，因为大家都不喜欢区块链，都说“凡是搞区块链的都是骗子”。 所以我今天在这里讲一个故事。

小明是一名前端工程师，也是一名足球迷。 他有一项惊人的本领：对足球有着深刻的理解，能够在每届世界杯开赛前准确预测出最终的获胜球队。 比如2010年世界杯，小明就预测正确了。 比赛结束了，小明难掩激动之情，想要在女友面前炫耀一下。 女朋友自然是质问了，可是小明没有证据证明自己，也就无语了。

小明痛定思痛，决定写一个网站，提前记录自己的预测。

小明自己设计了网页界面。

请了一个小伙伴帮我写了一个后端服务，提供两个接口。

基于这两个接口，小明写了一个纯前端渲染的网站。

最终的网站看起来像这样：

接下来，小明静静等待下一届世界杯的到来。

时间过得真快，转眼就到了2014年。 这一次，小明又一次正确预测到了冠军。

有一个网站可以帮我录预言，小明心想，这次他女朋友应该相信他了吧！

然而……

闺蜜也是技术高手，这次还是提出了合理的问题。 小明又无语了。 小明震惊到再也没有看过足球。

这是我听过的最悲伤的故事。 当然，我今天不是来讲述悲伤故事的。 这个故事实际上有一个完整的版本。

要说完整的故事，还得把时间倒回到2009年。因为这一年发生了一件影响深远的大事：比特币诞生了！

虽然前面说过“我不想谈区块链”，但比特币和区块链的出现确实是我们无法回避的事实。 小明也是如此，他在新闻报道中也听说过“比特币”。 当时给他印象最深的报道是：国外的一个哥们用一万个比特币买了两盒披萨。 小明觉得比特币是技术极客给世界开的一个笑话。 他并没有很认真地对待比特币，很快就忘记了它。

而当他再次听到“比特币”这个词时，已经是八年之后了。

2017年底，仿佛一夜之间，人人都在谈论比特币和区块链。

原来，此时一枚比特币的价格已经突破两万美元，震惊了世界。

小明显然错过了一个发财的好机会。 不过他并不难过，毕竟当年他并不了解比特币的价值，错过也是难免的。

真正让小明感动的是另一回事。 据媒体报道，有一款风靡全球的游戏名为“Crypto Kitties”，这款游戏运行在区块链上。

让小明震惊的不是这款游戏有多火，游戏内的交易量有多大，游戏开发团队获得了多少风险投资，而是这款游戏彻底颠覆了小明的“区块链”概念。 认识。

在小明的概念里，“区块链就是比特币，比特币就是区块链”。 没想到区块链也能跑游戏！

游戏也是应用，“区块链能跑游戏”就是“区块链能跑应用”； 而作为一名开发者，小明意识到：“我可以在区块链上开发应用”！

此外，媒体的狂轰滥炸也让小明注意到了区块链的另一个特点：不可篡改。

“不变”？ 听起来很棒。 小明回忆起自己需要“记录世界杯预测”，或许借助区块链可以很好地实现！

于是，小明下定决心：

说到这里，小明的故事终于迎来了重头戏。

小明关心的“区块链应用”其实还有一个更专业的名字，叫做“DApp”。

DApp的全称是“Decentralized Application”，字面意思是“去中心化应用”。 （“DApp”一词通常发音为“dee-app”或“dap”；如果您愿意，也可以发音为“DAPP”。）

DApp有一个核心概念叫做“智能合约”。 小明看了很多新闻报道，说智能合约很强大，可以做很多事情； 但这些报告对它是什么含糊不清。 小明觉得有必要在实战中深入体会。

智能合约初探

在动手之前，小明需要选择一条公链作为自己的开发平台。

公链

链选就是平台的选择，类似于开发手机应用时需要选择iOS平台还是Android平台。

公有链，又称“公有链”，是一种面向公众开放的区块链——个人开发者可以在公有链上开发应用，普通用户可以使用公有链上的应用。 与此对应的还有“私有链”、“联盟链”等概念。

经过一番研究，小明最终选择了“星云链”作为自己的入门级公链。 这种选择主要基于以下考虑：

在接下来的实践中，小明遇到了一个又一个问题，也找到了一个个问题的答案。

注：目前所有公链的运行原理基本相同，但在细节上还是有很多差异，因此以下内容均根据星云链的特点进行说明。

“智能合约”的概念听起来很神秘，但开发者很容易接受——因为合约的本质就是一段代码。

比如上图右边是一段最小化的合约代码（代码的具体内容这里不重要，为了防止观众盯着代码看，我把这段代码打了马赛克）。

智能合约是这样工作的：

看到这里，相信大家心里都有数了：智能合约是用图灵完备的语言编写的，而且还具备持久化存储的能力——这意味着我们几乎可以用智能合约来做任何事情。

DApp 的架构

智能合约在 DApp 中的作用是什么？ 回答这个问题就相当于回答另一个问题：“DApp 的结构是什么？”

让我们从了解传统 Web 应用程序的架构开始。 以小明做的这个网站为例：

传统的 Web 应用程序通常有一个服务器，它负责业务逻辑和数据存储，并提供接口。

同时，必须有网页作为用户界面，方便用户使用。 网页通常以Ajax的方式调用服务器提供的接口。

我们再来看看DApp的结构：

DApp也需要有网页作为用户界面（当然也可以是其他客户端形式，比如桌面应用或者移动应用等）。

它还需要一个组件来完成业务逻辑和数据存储的功能，并为网页提供接口。 该功能由 DApp 中的智能合约完成。

网页以“合约调用”的方式调用合约提供的接口。 具体实现方法后面会详细讨论。

这是星云官网推荐的DApp。 我们简单看一下，其中很大一部分是游戏，还有一些工具类应用（比如百科、词典）、社交类应用（比如论坛、抢红包）等等。 总的来说，DApp与传统应用在题材上没有明显区别。

DApp实例分析

那么DApp在使用上有什么区别吗？ 让我们看一个实际的例子。

这是Nebula官方提供的一个demo应用，叫做“超级词典”。

这是一个简单的demo，功能和界面都不复杂，我们可以用它来查单词。

比如我们输入一个词，查询一下，就可以得到词条的解释。

如果我们进入一个没有词条的词库，它会提示找不到任何解释，让我们将这个词条添加到词库中。

我们已经填写了这个词条的解释，准备提交了。

在使用传统的Web应用时，提交数据往往是调用后端接口，可以快速得到提交的结果（无论提交成功还是失败）。 但是在DApp中，提交数据的过程会有些不同。

例如这里，请注意当我们点击“提交”按钮时，会出现一个弹窗。

这个弹出窗口不是应用程序本身的一部分，它是钱包插件提供的一个界面。

我们可以发现当前的Chrome浏览器已经安装了星云官方提供的钱包插件：

浏览器插件我们都很熟悉，我们可以通过安装插件来扩展浏览器的功能。 那个“钱包”是什么？

钱包

钱包有两个主要功能：

又一个新概念，什么是“交易”？

贸易

区块链的老本行就是记账，就是处理各种交易。

在区块链上，转账显然是一笔交易； 另外，在智能合约时代，我们把合约部署在链上，调用合约的接口，都是以交易的形式。

OK，我们回到这个弹出界面。

提交数据其实就是调用合约的一个接口。 我们需要发起一个交易来完成这个调用，这个弹出界面显示的是当前交易的信息。 我们可以看到“Contract args”字段中有数据，说明本次交易是对合约的调用。

该界面中的所有信息都不需要我们手动填写，只需简单确认即可，然后点击“确认”。 当然，如果您想放弃本次操作，也可以点击“拒绝”中止。

确认后弹窗会再次提示我们：是否将这笔交易发送到区块链网络。 我们点击“提交”按钮发出交易。

然后，我们将进入等待界面。 我们可以看到当前交易状态为“Pending”，并且会有15秒的倒计时。

这是什么倒计时？

这就涉及到区块链的一个基本概念。 大家都知道，区块链采用的是链式数据结构，整条链都是由区块一个一个组成的。 无论是完成一次新的转账，还是让合约更新自己的数据，矿工都需要将这些操作打包成一个新的区块，附加到链上。

矿工

矿工是区块链网络中拥有“记账权”的节点，记账权也意味着产生新区块的权力。

当我们向区块链网络发送交易时，它会传播到矿工节点； 矿工节点一项一项地执行所有未决交易以生成新区块。 产生新区块的过程俗称“打包”，也称为“出块”。

这个倒计时的15秒正好是星云出块的时间间隔。 在此期间，矿工需要生成区块并向网络广播新区块，其他节点收到新区块后需要完成验证、同步等操作。

这个区块生成周期有点像预定的出发时间。 如果你的交易赶上这趟列车，它会被打包上传到链上； 如果你错过了这趟车，或者这趟车满了，你就得等下一趟车。

钱包插件会每 15 秒检查一次当前交易是否已经完成。 通常在等待15之后，我们可以看到交易的状态变为“成功”：

至此比特币预言帝，我们就可以放心的关闭这个弹窗了。

回到页面，页面也提示我们刚才的提交操作已经成功：

然后，我们再次尝试查询这个词：

上图可以看到，刚刚提交的词条的解释是可以查询的。

通过这个demo，我们可以总结出DApp在交互方面的两大特点：

作为DApp开发者，至少要做好以下准备：

小明整理完这些基础知识，终于可以上实战了！

在开发传统的Web应用时，我们一般会先确定后端接口。 同样，在开发DApp时，我们通常会先准备好合约端的接口。

首先，我们需要了解合约代码的编写方式。

说到这里，终于可以给大家看一下之前“编码”的代码了。 这是一个最小化的星云智能合约代码。 让我们来看看它有哪些元素：

只要满足以上条件，就是合法的智能合约。 也就是说，你可以根据自己的开发习惯来组织合约代码，只要满足以上条件即可。

其次，另一个重要的基础知识就是“合约存储区”。

如前所述，每个合约都有自己独立的存储区，因此智能合约自然而然地提供了操作存储区的API。 星云合约存储区提供多种操作方式。 为了说明方便，本文只介绍最基本的用法。

在智能合约的运行环境中，有一个LocalContractStorage全局对象，它提供了最基本的三个API（见上图）。

前端工程师看到这里应该会心一笑，因为这和浏览器中的本地存储API差不多。 我们要在浏览器端实现持久化存储，最常用的是本地存储（localStorage）； 而在智能合约中，持久化存储的实现也是通过类似的API和类似的思路来实现的。

值得一提的是，.set()方法接受的value参数可以是一个复合结构，比如数组或者对象。 也就是说，与浏览器端的localStorage.setItem() API相比，合约存储区的.set()方法更加方便，不需要手动处理value的序列化和反序列化。

实现合约接口

接下来，我们将开始实现合约接口。

由于智能合约需要提供等同于传统后台功能的接口，我们先来看看盾牌，传统的后台接口是什么样的。

在小明的网站中，后台至少要提供两个接口，分别对应以下两个功能：

如何在合约端实现这两个接口的功能呢？ 慢慢来，慢慢来。 小明先记下合约的大致结构：

这个契约好像不需要在constructor里做什么，留空就行了。

然后需要做一些初始化工作。 小明需要做的就是在合约存储区创建一个key，命名为‘items’，用来保存所有的预言。 在初始化阶段，显然没有预测，所以里面存了一个空数组。

那么就要进入重点了，小明开始写两个合约接口。

第一个接口是“获取oracle列表”，即getAllItems()方法。

实现这个方法其实很简单——从存储区中读取关键‘items’的值并返回。 写的代码也是一目了然。

请注意：该方法中只有读操作，没有写操作。

第二个接口是“release oracle”，也就是create()方法。

这个界面稍微复杂一点，我们一步步来。

我们先准备好这个新预言的数据，存放在newItem变量中，以备后用。

接下来更新store：我们首先获取所有oracles的列表，然后将新的oracle推入其中，最后将oracles列表写回store。

在这个方法的最后，我们将这个新预言的数据作为函数返回值，这样客户端在得到调用结果后就可以立即渲染这个新预言——这与传统后端接口的设计是一致的/API/创建。

请注意：该方法需要更新存储区，即有写操作。

好了，两个接口已经全部实现，合约代码也写好了。

合约需要部署在链上才能真正发挥作用。 请使用“星云网页版钱包”完成合约的部署和测试。

部署合约的操作比较简单，这里不再赘述。

部署成功后，您还可以测试合约行为是否符合预期。 （如果发现合约代码有bug，需要重新部署。）

准备完contract端之后，小明开始着手实现client端。

DApp客户端开发

网页形式的客户端开发大家都很熟悉，这里不再赘述，只关注DApp客户端特有的行为——合约调用。

有两种情况，或者说两种调用合约的方式：

在实现这两种合约调用时，都需要客户端SDK。 它的作用是帮助我们与链进行交互。 我们无需关心区块链网络的具体地址、接口、参数等细节。 我们可以直接使用SDK提供的接口完成调用合约、转账、查询网络状态等操作。

官方提供的星云客户端SDK，功能齐全，但设计风格偏底层，实际开发中有些繁琐。 所以这里推荐第三方SDK-Nasa.js。

Nasa.js的安装方法很简单，直接使用npm即可。

加载方式也很简单，将nasa.js文件导入到页面中，然后就可以使用它提供的各种API了。

Nasa.js 提供了近 30 个 API。 在日常开发中，最常用的有以下三种：

这三个都与合约调用有关。 第一项用于“不需要写入数据”类型的合约调用，后两项涉及“需要写入数据”的情况。 具体的用法会在后面的代码中详细说明。

小明开始写网页代码了！ 他首先实现了“显示预言列表”的功能。

第一行很简单，就是保存合约地址。

接下来小明需要调用合约的getAllItems接口获取所有的预测数据并渲染到页面上。 该接口不需要写数据，所以使用Nasa.query()接口调用。

该API接受三个参数，分别是合约地址、合约接口的函数名和传递给函数的参数。

提示：关于第三个参数“parameters passed to the function”，如果合约接口不需要参数，这里传一个空数组； 如果合约接口需要参数，就把几个参数放在一个数组中传入。由于合约的getAllItems接口不需要参数，所以小明传入一个空数组。

通过Nasa.query()调用合约可以快速得到调用结果。 这个过程就像调用 Ajax 接口一样。 Nasa.query() 的返回值是一个 Promise，Promise 中包裹的值是合约调用的结果——这种设计与常见的 Ajax 库非常相似。

小明在Promise的.then()回调中获取到合约接口的调用结果。 调用结果有一个execResult字段，用于保存合约接口函数的返回值。 通过它，小明可以得到一个包含所有预言数据的数组，然后在网页上渲染一个预言列表。

小明接着实现第二个功能——“发布预言”。

发布页面有一个表单。 小明需要给表单的提交事件绑定一个事件处理程序（代码省略），在事件处理程序中实现发布预言的操作（以下代码都写在事件处理程序中）。

前两行是准备工作，保存合约地址和输入的文本。

接下来，小明需要调用合约的create接口，完成新预言的发布。 该接口需要通过发起交易来完成上链，所以小明使用了Nasa.call()接口来调用。

这个API同样接受三个参数，参数的含义和Nasa.query()的三个参数完全一样。 小明依次传入合适的值。

此 API 调用钱包插件并引导用户完成交易。

该 API 也返回一个 Promise，但是 Promise 中包裹的值与 Nasa.query() 不同。 因为合约是通过交易来调用的，所以不能直接获取调用结果。 只有当交易被矿工处理并打包上链后，我们才能得到合约调用的结果。 所以这个Promise只能给我们一个交易流水号，然后我们可以通过这个流水号从链上查询交易状态和调用结果。

钱包插件发送交易后，小明可以在.then()回调中获取到交易流水号（payId）。 然后是 Nasa.getTxResult() API。

该API接受一个参数，即交易流水号； 返回一个Promise，Promise中包裹的值就是交易的状态和调用的结果。 （查询交易结果是一个轮询的过程，但是我们不需要关心这些细节，Nasa.js会自动完成这个过程，我们只需要关心这个Promise即可。）

在.then()回调中，小明将交易流水号传递给Nasa.getTxResult()。 由于这个API也返回一个Promise，小明可以返回，让Promise链继续往下走。

当查询发现交易已经被矿工处理后，可以在接下来的.then()回调中获取交易的状态和本次调用的结果。 同样在execResult字段中，我们可以获得合约接口函数的返回值。

当然，为了保险起见，我们最好先判断交易是否成功。 如果status字段的值为1，则表示交易已经正常处理。

这里小明获取合约接口函数create的返回值（即发布成功的新预言的数据），进行渲染并添加到页面中。

提示：以上代码只是演示了核心逻辑。 对于一个体验好的DApp，还需要处理各种交互反馈和错误提示。

至此，整个DApp从合约端到客户端已经完全开发完成。 小明运行这两个端的功能，网站顺利上线。

对了，对于DApp来说，可能连“上线”的环节都没有。 因为整个应用的业务逻辑已经以智能合约的形式部署在链上，如果小明只打算自己用比特币预言帝，客户端代码保存为HTML页面，本地仍然可以使用。

该网站看似同一个网站，但其本质已经升级为基于区块链的DApp。

一切就绪，小明静静等待下一届世界杯的到来。

2018年世界杯，小明又一次正确预测到了冠军。

小明终于在女友面前炫耀成功了。 从此以后，他们幸福地生活...

故事到此结束。 但是，在听故事的过程中，你的脑海中可能会出现一些疑问。

其他问题

首先，这个实战案例是不是太简单了？

由于时间关系，我们无法在一次演讲中实现更多的功能。 但是，互联网产品都是迭代开发的。 小明真的打算升级这个DApp。 他设想的新功能包括：

先说“喜欢”。 这个功能比较容易实现。 在合约端添加一个点赞接口，然后在预测数据中添加一个点赞数的字段，就差不多完成了。

再看“多用户”和“打赏”功能，乍一看似乎很复杂，但在区块链上实现起来其实非常容易。

在开发传统Web App时，如果要识别不同的用户，往往需要建立自己的账号体系，或者对接第三方社交账号。 在区块链上，就没有这样的麻烦，因为链上的每个用户都有自己独一无二的身份——“地址”。 DApp 可以通过地址区分每个用户。

另外，如果要在传统应用中实现打赏功能，需要接入支付平台，如银联、支付宝或微信支付。 但是这对于个人开发者来说是极其困难的。 别着急，DApp的优势在这里又体现出来了——区块链的老本行是记账，每条公链通常都有自己的原生货币体系，DApp可以直接使用链的支付功能。

区块链的“原生账户体系”和“原生支付体系”堪称DApp的两大天然力量！

这样一个DApp终于做出来了，叫做“我是先知”。 这其实是魔哥学会自己开发DApp的第一部作品。

另一个经常被问到的问题是：人们常说区块链是“不可篡改”的，到底是什么意思？ 为什么小明的女朋友会相信他？

看完以上实战案例，你可能会有疑问：我可以通过调用合约来更新合约存储区，这算不算“篡改”？

简单说明一下，区块链的“不可篡改”特性主要包括以下两个层面：

说到这里，我们来回顾一下“修改合约存储区”的过程：调用合约更新存储区本质上是一笔交易，需要打包上传到链上才能生效。 因此，“修改合约存储区”操作并不是直接修改链上已有的历史记录，而是通过新记录对旧记录进行修补。 我们任何时候得到的数据，其实都是所有修改过的记录叠加的结果。

因此，对于DApp来说，“不可篡改”并不是说我们不能修改合约的存储区域，而是任何人都不能“偷偷修改”，因为每一条修改记录都会清楚地记录在链上。

After explaining this principle, we can add the end of the story. If Xiao Ming's girlfriend wants to verify whether the prophecy displayed on this DApp is true and reliable, she needs to do two more things:

The third question is that developers are particularly concerned about the application scenarios of DApps. The currently clear application scenarios are as follows:

In fact, blockchain applications are still in their early stages, and more landing scenarios are yet to be explored and discovered by us.

The fourth question, students who are interested in trying DApp development must want to obtain the various tools and resources mentioned in the speech.

Since there are a lot of materials that need to be mastered and learned for DApp development, Brother Magic has specially compiled a database, which has been open sourced on GitHub:

The third-party SDK Nasa.js mentioned in this article is actually developed by the magic brother team, and it is also open source on GitHub. You are welcome to polish it together:

写在最后

Blockchain technology and the blockchain industry have been widely misunderstood for a few reasons. On the one hand, it has been exaggerated as a universal silver bullet, on the other hand, its infrastructure is still extremely simple, which makes many people stay away, and even "turn black". Although the blockchain has been born for nearly ten years, it is still very early at the application level. It still has great uncertainty and countless unknowns waiting for us to explore.

Just like this picture, it is barren. The explorers travel alone, yet they believe in a bright future.

Some people say, "Blockchain is the outlet and the trend." And what I want to say is, "We don't follow trends, we drive trends - because we are developers". What a blockchain is and what it can do will be defined by us developers. Looking forward to more developers joining this new world, I am waiting for you here!

活动推荐

Recommend an offline technology conference that cannot be missed at the end of the year, and learn the dry summary of 40+ AI landing cases from Google, Microsoft, Amazon, BAT, JD.com, Meituan, Huawei, etc. The conference schedule has been freshly released, click "Read the original text" Check. Welcome to scan the QR code below to learn more about the conference details, or consult the ticketing lady Amy at 18514549229 (same number on WeChat).