以太坊智能合约+DApp从入门到上线：来自前端工程师的实战指南

要做一个完整的区块链DApp，你需要掌握最起码的必要知识； 如何准备开发环境，开发环境的必要条件有哪些； 如何在我们熟悉的开发环境中集成智能合约； 如何做一个简单的DApp，让他上线供人们使用。最低要求的知识

相信大家都听说过账户、钱包、区块、区块链等等没有名词以太坊智能合约最广泛的应用，但是如何把这些东西串起来，真正去思考和研究的人可能并不多。 首先回顾一下霍华德先生分享的区块和区块链结构。 每个区块链平台都会有一个账户机制。 最成功的区块链应用应该是众所周知的。 它被称为比特币。 比特币可以被认为是一个去中心化的银行，不同账户之间会有转账交易。 ，一段时间内的所有转账交易汇集在一起​​形成一个区块。 block的数据结构上面也有介绍，就不展开了。

随着时间的推移，多个不同的区块以某种特定的方式连接起来，形成一条区块链。 区块链上的每一个区块都可以看作是一个数字，这个数字就是区块高度。 不同的链生成一个块所需的时间是不同的，这个时间就是块的生成时间。 现在比特币大约需要 10 分钟，而以太坊需要 10 多秒。

至于以太坊，它本质上是一个分布式网络。 转账、合约部署、合约接口调用等所有消息都必须经过一个节点。 节点接收消息并广播给网络中的所有节点，然后当交易被打包时，后续的区块也会广播给网络中的所有节点。

那么如何与以太坊网络进行交互呢？ 以我们现在比较熟悉的微信小程序为例。 开发者可以通过微信小程序提供的特定框架和小程序的管理后台来创建小程序。 普通用户可以使用微信APP中的小程序。 腾讯的服务器本身是中心化的，只有腾讯自己维护； 对应以太坊网络，社区为开发者提供了很多工具，如web3.js、web3j、web3.swift、etherscan等。 工具或语言包通过某个节点作为入口与以太坊网络进行交互，用户通过浏览 DApp 或钱包与网络进行交互。

以太坊账户和比特币账户最本质的结构非常相似，包括三个元素：私钥、公钥和地址。 除了主网，以太坊还有三个测试网。 我们可以把它的主网理解为传统软件开发环境中的线上环境。 Rinkeby、Kovan 和 Ropsten 是三个测试网络。 这是三个测试环境。 大家可以分享出来，后面在实战案例中会用到。

说完账户，还有一个大家比较熟悉的概念就是区块链钱包，比如imToken或者Bitpie，还有Metamask，后面会介绍。 钱包和账户是什么关系？ 我们用现在熟悉的金融系统中的钱包和账户来打个比方。 比如我在招商银行和建设银行开两三个账户，那我口袋里就有一个钱包。 事实上，我持有5张银行卡。 对于区块链，我安装了一个比特派钱包。 这个钱包里有以太坊账户和比特币账户。 我可以有很多以太坊账户和比特币账户。 也可以有很多。

智能合约本质上是一个由代码控制的账户。 该帐户本身与您在钱包中的帐户相同。 不同的是，你拥有的账户私钥在你手中，而智能合约是在合约部署者手中。 关于智能合约，我们可以用我们非常熟悉的面向对象的概念来打个比方：我写了一个类Class，然后我可以生成很多实例，然后我就有了区块链世界的智能合约源码，可以部署在上面介绍的几个以太坊网络上，每个部署生成的合约实例都不一样，是完全不同的账户。 这应该是很多做DApp开发的工程师比较困惑的地方，也是智能合约无法升级的原因。 . 还有一些比较“trick”的方法来完成合约的热更新。 刚好感兴趣的同学可以自行搜索。

大多数情况下，智能合约的源代码是用 Solidity 编写的。 合约账户与普通账户的关系如上图所示。 开发者通过向以太坊网络发送交易来创建合约实例，并获得合约实例地址，普通用户在拥有合约实例地址后就可以与合约进行交互。 比如EOS众筹的时候，其实是在以太坊上发布了一个智能合约，每天都有人参与。 参与时，当代币退出时，相应的合约进行了调整。 合约也可以相互交互。 合约账户称为内部账户，而普通用户账户通常称为外部账户。

开发环境准备

接着是第二个话题——开发环境的准备。 需要在以太坊区块链上做开发，需要什么条件才能开始？ 关键只有两点：因为是P2P网络，交易和合约部署都需要节点，也就是说你要有一个节点，然后你做任何活动都需要一个账户，即使你调用一个不花钱的契约法，你还是需要一个帐号的。

具体来说，第一个前提是测试网络节点。 有很多方法。 第一个是自己跑一个节点。 称其为私有链可能不够准确。 对于不在底层工作的同学来说，实现或理解这种方法的成本略高。 不推荐工作在应用层的同学； 如果你想把控制权掌握在自己手中，还是强烈建议这样做。

本地开发调试可以使用Ganache，方便在本地搭建节点处理交易，也可以使用Remix，在浏览器内部提供JavaScript测试网络。 成本很低，开封即用。 本地测试非常方便。 Ganache 和 Remix Javascript VM 内置了解锁账户，所以你不需要关心账户的私钥或助记词。

也可以使用共享测试网络，就是上面提到的Rinkeby、Ropsten和Kovan。 使用这些节点作为网络入口，我们不需要自己运行节点。 infura.io为开发者提供区块链接入服务，但使用它需要我们自己注册和管理钱包和账户。

两个必要条件是账户和余额，因为以太坊上的任何操作都需要账户才能发起，所以我们需要创建钱包和账户。 我们开发的 DApp 运行在浏览器中。 对于PC端，钱包最好能和浏览器无缝集成。 目前社区有个不错的选择是Metamask，其实就是一个浏览器插件，但是Metamask历史上发生过一次安全事件，有人发了一个假的Metamask，有的用户上当了，所以大家安装了始终寻找狐狸图标。

还有一点，以太坊上的很多交易都是收费的。 这也是它最大的痛点。 一些区块链项目正在解决这个问题。 目前我们在开发中没有办法绕过它。 在做 DApp 测试的时候，我们不需要花真金白银。 我们可以使用不同测试网提供的水龙头给测试网的账户充值，也就是给Metamask钱包充值ETH。 以上就是准备开发环境的两个必要条件。 需要做的就是Metamask，充值注册infura.io。

智能合约工作流程

接下来是如何制作一个完整的应用程序。 对应传统应用开发，先有后台，后有前端。 先介绍一下后端吧。 后端可以大致用以太坊上的智能合约代替。 复杂应用程序中的所有数据不应存储在以太坊区块链上。 一些数据存储在传统数据库中。 这里我们简化了所有数据的设置。 存在于链上。

有两种方法可以开发智能合约。 第一种是通过 Remix 在线 IDE，它非常易于使用。 另一种方式，对于前端来说，就是用你熟悉的编辑器和你熟悉的语言来做。

Remix适合我们快速验证概念和原型。 在 Remix 中，我们可以快速编写合约代码，然后调用它的合约接口来测试它的行为。 此外，我们还可以测试现有的合约实例。 环境和测试环境 将合约实例加载到 Remix 中，然后进行测试。 您还可以通过 Remix 将合约部署到任何以太坊网络。 Remix 也可用于单步调试。 当您发现合约的某些接口有奇怪的问题时，您可以使用 Remix 进行单步调试。 但是 Remix 有一个明显的缺点。 在传统的软件开发工作流程中，通常会有版本管理，这在Remix中做不到，但是在我们自己的工作流程中是可以的。 我们可以使用Git进行版本管理，然后保存合约编译部署的结果。 最重要的一点就是把能自动化的都自动化，因为自动化之后出错的可能性会小很多。 通常在实际工作或者学习过程中，Remix和自动化工作流会结合使用，来回切换。

接下来是实际DApp中使用的非常简单的智能合约。 可以认为是一个赌博的原型，代码很简单，合约有两个属性，合约的管理员，谁参与了赌博活动。 构造函数的作用是设置合约管理员，然后参与抽奖/投注界面，然后是随机数功能。 以太坊区块链中没有很好的随机数方法。 合约部署到以太坊上后，随机数代码是可以被其他人看到的，它可以知道你的种子是怎么来的，并且可以很容易地被操纵。 pickWinner是抽奖接口，调用随机数函数，然后将整个奖池中的钱转给中奖者。 合约本身不收取任何手续费，仅在调用接口时收取。 修改器是安全限制，抽奖接口只能由合约管理员调用。 安全和权限也是智能合约的重要考虑因素。 近两个月来，合约出现了很多漏洞，有的是安全限制，有的是溢出，值得大家关注。

简单演示Remix中合约的工作流程。 在 Remix 中选择 JavaScript VM。 它是 Remix 提供的一个运行在浏览器内存中的测试网络。 它的响应速度非常快。 选择JavaScript VM后，这是默认的 有几个账户，其中余额为100 ETH，点击Deploy部署合约，可以看到很快就会出现合约实例，实例界面中红色的就是合约界面，蓝色为契约属性。 那我们怎么下注呢？

可见下注不需要提供参数。 投注金额需要在发起交易的地方填写。 使用合约管理员进行一次投注。 现在玩家已经有一个人了，换到另一个账户，再次下注，就是模拟两个人。 这里有两个人。 使用二号账号调整抽奖界面时以太坊智能合约最广泛的应用，直接报错。 那是因为我们的合约代码要求管理员可以调用它。 失败的例子是没有人拿到奖池里的钱。 切换回账号重启 调用抽奖界面，可以看到第一个人拿到了所有奖池的钱，这是一个非常简单的Remix合约工作流程演示。

那么在这个Remix中如何将完成的事情自动化呢？ 接下来介绍如何在Node.js中实现智能合约的工作流程。 先介绍两个工具。 第一个是编译智能合约的源代码。 编译会生成字节码ByteCode，部署到测试网时使用； 以及接口声明ABI，通过ABI的实际业务代码可以知道这个合约暴露了哪些接口，以及每个接口接收的参数类型和数量。

工作流中接下来要做的是围绕这个图展开。 可以看到这里使用了web3.js，web3.js可以理解为应用层代码到以太坊网络的桥梁。 它起到桥梁作用的方式是你可以使用很多不同的插件，在web3中叫做Provider。 当我在浏览器中运行它时，Metamask 还提供了一个插件； 在本地，Ganache-cli 提供了一个插件； 如果你只是想调用infura.io提供的入口节点，可以通过HTTP Provider。

我们要做的第一步是将智能合约的源代码变成可以部署在以太坊网络上的ByteCode和我们应用层代码可以使用的ABI。 编译脚本的代码也很简单。 我们可以读取文件，准备一个存放结果的目录，然后调用solc的compile，然后处理编译结构中的错误，最后将编译结果写入文件系统。

合约构建完成后，如何通过web3进行测试呢？ 直接使用 Ganache-cli 即可。 在测试合约代码之前，我们需要初始化web3的实例，直接使用Ganache的Provider插件。 在测试中，我们会先创建一个隔离的测试环境，即每次运行测试时，我们都会重新部署合约，然后调用这个新合约上的方法，或者尝试修改它的状态，最后对其进行断言状态。

接下来是部署合同。 在创建合约的时候，我们需要传入ABI，在Deploy中传入它的ByteCode。 你可以看到我们需要有一个帐户才能做任何事情。 Gas 是我们愿意为此操作支付的费用。 手续费。 关于gas，有两个参数调整，一个是gas limited，一个是gas pressed。 感兴趣的同学可以自行研究。

我们来看一个彩票合约的完整流程测试。 首先调用下注接口，用它来解锁账户中的第一个，然后取出合约玩家，确认这个玩家就是我们下注的那个。 接下来查看账户initialBalance和开奖完成后账户的余额情况。 这个地方调用了抽奖接口。 抽签后，对部署合约的账户余额进行断言。 最后，在我们的断言中，每次抽签后都会清除此合同中的球员。

合约部署和合约自动化测试之间有很多相似之处。 但是部署的网络并不是Ganache-cli提供的本地网络，而是Rinkaby测试网络。 这里使用了一个插件，我们可以提供一个钱包的助记词，以及一个网络入口的节点，通过HTTP向节点发送消息进行交易。 接下来要做的和每个隔离测试环境类似，先解锁账户，再部署合约。 因为我们是部署在真实的测试网络上，所以这个过程通常需要很长时间。 每次部署后，我们都会有一个合约账户的地址，我们可以通过这个地址与合约进行交互。

最后就是把整个过程串起来的过程。 在部署之前，必须重新编译并确保所有单元测试都能在最新的合约上完全通过。

DAPP构建与部署

部署合约后，我们已经在以太坊区块链上有了一个后端，我们可以直接与之交互。 接下来我们要写的就是做应用层代码和后台的交互，提供DApp Plus的接口。

从技术的角度来看这个DApp的本质，我们没有讨论业务等方面，即DApp可以理解为一个接口，可以让初学者使用，可以和前端数据进行交互和读取。 它可以有多种形式，例如Web、App或桌面软件。 如果是一个非常简单的DApp，你可以做一个以区块链为后台的单页应用。

接下来我们会做一个非常简单的彩票或者赌博类的DApp，可以使用create-react-app让我们的技术栈变得非常简单。 还有就是web3.js，在合约工作流程中用的比较多，在DApp中使用web3.js来处理ABI。 如果开发完成，整个合约加上DApp的目录结构如上图所示，编译部署脚本和测试脚本分别放在对应的目录下。

彩票Dapp可以说是相当简单，甚至是相当简陋。 我们可以将接口映射到合约的源代码。 现在奖池数量为1 ETH，1人参与，但是之前的合约代码中没有提到这个Balance属性。 其实合约实例就是一个账户，所以任何一个账户都有余额，一共1个人参与抽奖，有两个按钮，一个是下注，调用的合约接口是参与； 对于抽奖，对应的接口是pickWinner。

下面看一下大概的关键代码实现。 第一个是使用 web3 来构建我们的桥梁。 这里我们假设使用这个 DApp 的用户已经安装了 Metamask。 第二个关键点，我们创建这个合约的时候，不像部署编译脚本，我们传入一个Address，这不是一个全新的合约实例，而是从这个地址加载合约。

DApp与智能合约的交互关键有两点，一是读取合约数据，二是提交数据。 然后可以看到我们在界面上显示了三个属性，一个是管理员，一个是玩家人数，还有一个是合约中奖池的数量，也就是合约实例的账户余额。 这里调整的三个接口都是异步的。

由于 React 语法，渲染合约数据相对简单。 开发DApps的同学一定要注意单位之间的转换。 我们向用户展示的是 ETH。

修改合约数据的触发点之一在底部。 将 onClick 绑定到此按钮。 里面所做的其实就是调用合约的方法，然后对组件状态进行一些改变。 提交事务时，我们在组件上设置加载状态。 loading状态下不能再次点击按钮，然后调用participate。 如果安装了Metamask，传递给合约的值必须填写。我们操作完成后，我们会刷新这个页面，重新加载合约数据状态。

真正要做一个好用的DApp，需要在这个基础上做很多事情。 例如，点击按钮并安装Metamask后，用户屏幕上会立即弹出一个Metamask交易确认界面，这会让用户感到困惑。 我明明在使用你们的网站，却出现了我以前从未见过的东西。 在弹出 Metamask 交易确认框的过程中，需要给用户一些提示，以免用户感到意外。

彩票DAPP DEMO

我已经将彩票DApp进程部署到阿里云的一台机器上。 部署过程类似于传统WEB应用的部署。 在部署之前，需要构建代码。 要构建，请使用 create-react-app 的内置构建脚本。 没关系，构建生成纯静态文件，然后我们使用express启动极简http服务，管理服务进程使用pm2，部署构建过程也可以使用npm脚本连接。

结论

我要分享的内容到此结束。 区块链领域虽然已经存在了9年，但是近两年大量的开发者涌入。 这个领域有很多概念，但是也有比较好的实践，欢迎大家在微信群里和我交流，谢谢。