用 Web3.js 构建第一个 Dapp

• 原文 [1] 作者：wissal haji[2]

• 译文出自：登链翻译计划 [3]

• 译者：翻译小组 [4]

• 校对：Tiny 熊 [5]

欢迎订阅《Solidity 智能合约专栏》[6] 系列文章。在上一篇 [7] 中，我们看到了如何实现工厂模式。如果你一直在跟着这个系列学习，那么你已经掌握了编写自己的智能合约。

因此，今天给大家介绍一下构建去中心化应用的全貌，并向大家介绍一下 web3.js[8]，这是构建 dapp 不可缺失部分。

在深入了解 web3.js 是什么以及它的工作原理之前，我想先回答一个简单的问题 - 为什么选择 web3.js? 来开启这个话题：

dapp 的结构

图片来源：GitHub 上的 ethereumbook[9]

去中心化应用有三个主要组成部分。

• 前端。从用户那里获取输入，并建立发送到智能合约的请求。

• 钱包。签署交易并将其发送到网络。

• 智能合约。这里编写 dapp 的业务逻辑的地方。

现在的问题是如何用 JavaScript 在前端与智能合约交互。

在 web3.js 出现之前，我们与智能合约交互的唯一方式是通过以太坊节点提供的 json-rpc API[10]， API 由节点提供，节点作为 json-rpc 服务器。使用 json-rpc 可不是一件容易的事。

但由于 web3.js，你不必再担心 JSON-RPC 调用的低层细节，因为它提供了以太坊 json-rpc 接口的抽象。因此，你可以使用纯 JavaScript 开始与以太坊节点进行交互。简单地说，web3.js 就是用 JavaScript 把 JSON-RPC API 封装了。

web3.js 是如何工作

正如我们之前所说的，为了与以太坊网络进行交互，我们需要向以太坊节点发送 json-rpc 调用，这就是 web3.js 的底层工作。那么它是如何做到的呢？

为了将 JavaScript 代码翻译成 json-rpc 请求，web3.js 使用了称之为_provider （提供者）_，它是一个符合 EIP 1193[11] 规范的 JavaScript 对象，负责实现以太坊 RPC 方法调用的 request 方法。Web3.js 对上述规范有自己的实现，并将其放在 web3.provider 下，你可以访问 web3 文档 [12] 中提到的以下三个 provider：HttpProvider、WebsocketProvider 和 IpcProvider。

其他项目也实现了这一规范，如 MetaMask[13]，它在浏览器中注入了 window.ethereum 下的提供者对象。

一旦我们有了一个提供者，我们就可以使用 new 关键字获得 web3 的实例。

    let web3 = new Web3(Web3.givenProvider || 'ws://some.local-or-remote.node:8546');  

在这里你应该记住的是，web3.js 需要一个 provider 对象，配置好钱包的信息，它将签署交易并将其发送到网络。如果你在前端使用 web3，这个提供者将被注入到浏览器中，或者你使用 websocketprovider 或 IpcProvider 自己建立一个提供者对象。

注：MetaMask 使用__Infura[14]作为节点提供者。这就是为什么你不需要在电脑上安装以太坊客户端就能与以太坊网络进行交互的原因。

快速查看 Web3 API

web3.js 不仅可以与以太坊节点进行通信，还可以与 Whisper 和 Swarm 节点进行通信。它有五个主要包 :

• web3.eth。允许与以太坊区块链和以太坊智能合约进行交互。

• web3.bzz: 允许与去中心化文件存储 Swarm 进行交互。

• web3.shh: 允许与 Whisper 协议进行互动广播。

• web3.utils。为以太坊 dapp 提供实用功能，比如将字符串转换为十六进制，将以太币转换为 Wei。

• web3.*.net: 允许与以太坊节点的网络属性进行交互，如网络 ID 或对连接节点数量。

用 web3.js 构建第一个 Dapp

现在我们已经把理论讲完了，让我们动手去构建我们的第一个 dapp。在这个例子中，我们将建立一个问候语 dapp，存储一个默认的问候语字符串，并允许用户更新它。对于钱包，我们将使用 MetaMask。你可以点击 MetaMask 官网 [15] 主页上的下载链接来添加扩展。

1. 创建合约并部署到网络上

首先在你的工作区创建一个名为 greeting 的空项目，并使用 truffle init 初始化它。

    > mkdir greeting      > cd greeting      > truffle init  

我假设你已经安装了 Truffle。如果你还没有，你可以用下面的命令来获得它。

    npm install -g truffle  

用你喜欢的代码编辑器打开项目（我用的是 VS Code）。接下来，编辑 truffle-config.js 文件，用你的以太坊网络的 IP 和端口更新网络（你可以用 Ganache 来实现）。你还需要配置编译器的版本，以使用你安装的版本。

如果你还没有 Solidity 编译器，你可以使用以下命令安装它。

    > npm install -g solc// check the installed version      > solc --version  

现在，是时候在你的项目目录下创建 greeting 合约了。输入以下命令。

    > truffle create contract Greeting  

复制粘贴以下代码。

    pragma solidity >=0.4.22 <0.8.0;      contract Greeting {          string public greeting = "hello";          function sayHello() external view returns (string memory) {              return greeting;          }          function updateGreeting(string calldata_greeting) external {              greeting =_greeting;          }      }  

我们快准备好了 , 我们只需要在 migrations 文件夹下添加一个 2_deploy_greeting.js 迁移文件。

    const Greeting = artifacts.require("Greeting");      module.exports = function (deployer) {            deployer.deploy(Greeting);      };  

现在你可以使用智能合约编译并部署到网络中。

    > truffle compile      > truffle migrate  

免责声明：作为区块链信息平台，本站所发布文章仅代表作者个人观点，与链闻 ChainNews 立场无关。文章内的信息、意见等均仅供参考，并非作为或被视为实际投资建议。