构建一个DApp - OpenZeppelin 文档

构建一个 dapp

去中心化应用程序（又名 dapps 或 ÐApps）是由以太坊智能合约支持的 Web 应用程序。 这些应用程序不使用中心化服务器或数据库，而是依赖区块链作为共识和协调层。 这导致了潜在的不可阻挡的应用程序：任何人都可以启动前端的副本，并自由地将其连接到公共以太坊网络。

在本指南中，我们将了解如何使用 OpenZeppelin 库（例如 Network JS 和 hot-loader）来构建你的 dapp，以及 Starter Kits 如何将 dapp 的所有部分绑定在一起：

• 连接到网络

• 热加载你的合约

• 使用 Starter Kits 快速启动 Dapp

如果你时间紧迫，只需跳到最后一节！

连接到网络

构建 dapp 时，第一步是连接到以太坊网络。 这通常涉及以下步骤：

1. 如果用户正在运行 Metamask，请使用注入的 web3 provider 访问网络，并监控网络或帐户更改

2. 如果没有，则回退到公共 Infura 节点

为了避免在每个 dapp 上编写此逻辑，我们构建了 OpenZeppelin Network JS 来处理它。 它提供了一个 useWeb3 React hook，用于获取基于上述逻辑的 web3Context。 此 web3Context 对象提供对已连接的 web3 实例、网络信息、用户帐户、请求帐户访问的函数等的访问。

以下代码段是一个小型 React 应用程序，它使用 Metamask 连接到网络（如果未找到，则回退到 Infura），提示用户访问帐户，并显示用户余额：

import React, { useCallback, useState, useEffect } from 'react';
import { useWeb3 } from '@openzeppelin/network/react';

function App() {
  // 通过 @openzeppelin/network/react hook 获取 web3 context
  const web3Context = useWeb3(`wss://mainnet.infura.io/ws/v3/${PROJECT_ID}`);
  const { lib: web3, networkId, accounts, providerName } = web3Context;

  // 请求帐户访问的方法
  const requestAuth = (web3Context) => web3Context.requestAuth();
  const requestAccess = useCallback(() => requestAuth(web3Context), []);

  // 查询帐户余额
  const [balance, setBalance] = useState(0);
  const getBalance = useCallback(async () => {
    setBalance(
      accounts && accounts.length > 0
      ? (await web3.eth.getBalance(accounts[0]))
      : 'Unknown')
  }, [accounts, web3.eth, web3.utils]);
  useEffect(() => {
    getBalance();
  }, [accounts, getBalance, networkId]);

  // 向用户显示所有信息
  return (
    <div>
      <div>Network: {networkId || 'No connection'}</div>
      <div>Your address: {accounts ? accounts[0] : 'Unknown'}</div>

      {accounts && accounts.length ? (
        <div>Accounts access granted</div>
      ) : !!networkId && providerName !== 'infura' ? (
        <button onClick={requestAccess}>Request Access</button>
      ) : (
        <div>No accounts access</div>
      )}
    </div>
  );
}

在上面的代码片段中，仅使用前两行，我们就可以通过 Metamask 访问以太坊网络，并回退到 Infura，以及有关网络、provider 甚至用户帐户的信息 - 所有这些都通过 Network JS 提供的 useWeb3 hook。

要了解更多信息，请访问我们关于使用 Networks 库构建 从头开始构建 Dapp 的分步教程。

热加载合约

现在我们已经建立了与以太坊网络的有效连接，我们可以开始与我们已编码并使用 OpenZeppelin CLI 部署的合约进行交互。

虽然我们可以 从 ABI 和地址 创建常规的 web3 合约实例，但我们将利用合约升级来热加载我们的合约。

这意味着一旦我们在运行的 React dapp 中部署和加载合约，该应用程序将自动获取对 Solidity 代码的任何更改并在开发过程中升级合约。 OpenZeppelin Hot Loader 将监视你的所有 Solidity 合约的更改，并自动重新编译和升级本地开发网络上的合约 - 保持相同的地址和状态，并且仅将代码更改为你编写的新版本。

要设置 hot-loader，你需要安装 @openzeppelin/solidity-loader 和 json-loader，并将以下 rule 添加到你的 webpack 配置中：

test: /\.sol$/,
use: [\
  { loader: 'json-loader' },\
  {\
    loader: '@openzeppelin/solidity-loader',\
    options: {\
      network: 'development',\
      disabled: false\
    },\
  },\
],

然后，只需从你的客户端代码加载合约 Solidity 文件，该文件将通过 Hot Loader。 无论何时修改合约源代码，加载器都会自动将实例升级到最新的代码。

// 使用 @openzeppelin/network 加载 web3 context
const { networkId, lib: web3 } = useWeb3Network('http://127.0.0.1:8545');

// 加载合约 artifact
const Box = require('../../contracts/Box.sol');

// 加载已部署的实例
const [box, setBox] = useState(undefined);
if (!box && Box && Box.networks && networkId) {
  const deployedNetwork = Box.networks[networkId.toString()];
  if (deployedNetwork) {
    setBox(new web3.eth.Contract(Box.abi, deployedNetwork.address));
  }
}

有关详细的设置说明，请按照我们关于在 React Web 应用程序中启用 Hot Loader 的分步教程进行操作。

快速启动你的 Dapp

正如你到目前为止所见，设置 dapp 涉及相当多的样板文件和配置，包括创建 OpenZeppelin CLI 项目、初始化新的 webpack 客户端应用程序、配置网络访问和加载你的合约。

为了快速启动此过程，我们构建了 OpenZeppelin Starter Kits。 Starter Kits 是预配置的 dapps，具有多个 OpenZeppelin 库、Infura 连接和 Rimble UI 组件，可以立即开始开发。

你可以使用 oz unpack CLI 命令从 starter kit 启动一个新项目：

$ oz unpack starter
✓ Kit 下载并解压
该工具包已可使用。

快速开始
运行你的本地区块链：
> ganache-cli --deterministic
初始化 OpenZeppelin 项目：
> openzeppelin init app
转到客户端目录：
> cd client
运行 React 应用程序：
> npm run start
继续在你的浏览器中！
更多信息请访问 https://github.com/OpenZeppelin/starter-kit/tree/stable

这将解压缩一个预配置的 React dapp，并设置与 Metamask 和本地节点的网络连接。 dapp 中的每个框都显示来自每个连接的信息，每个连接都从不同的 web3Context 获得：网络 ID、provider、帐户和余额。 在 Metamask 端，你需要先请求访问用户帐户，然后才能从插件中获取它们。

有了这个初始设置，你现在可以修改它以开始在你自己的应用程序之上构建它 - 就像你在普通的 create-react-app 设置 中所做的那样。

如果你想了解更多关于使用 Starter Kits 的信息，unpack tutorial kit 而不是 starter：它将指导你完成从 dapp 部署合约并与之交互的过程。 你还可以查看可解压的所有 starter kits 的列表。

下一步

你已经朝着为你的智能合约构建去中心化的基于 Web 的前端迈出了第一步。 你的下一个任务应该是：

• 编写自动化测试

• 连接到 Public Test Networks

• 原文链接： docs.openzeppelin.com/le...
• 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～