从全栈开发者迈向Web3弄潮儿-全栈开发者jser

近年来大热的美剧《创业公司(StartUp)》虚构了一种被称为 GenCoin 的数字货币，可用于各种创新式的金融交易场景中。而在我看来，它可以被理解为一种具有 Web3 核心属性的区块链分布式设计产品。如果您对 Web3 还不甚了解的话，让我们先回顾一下 Web 的三个主要时代：

Web1 - 静态网页(1991 年–2004 年)，请参见 --https://en.wikipedia.org/wiki/Web_2.0#Web_1.0
Web2 - Web 作为一个平台(自 2004 年起)，请参见 --https://en.wikipedia.org/wiki/Web_2.0#Web_2.0
Web3- 去中心化的设计，包含了区块链技术(自 2009 年起，且近年来发展势头迅猛、前景广阔)，请参见 --https://en.wikipedia.org/wiki/Web3

在 Web2 时代，Web 服务主要集中和被控制在诸如：谷歌、苹果和亚马逊等少数技术提供商的手里。而作为 Web2 的替代方案(https://consensys.net/blog/blockchain-explained/what-is-web3-here-are-some-ways-to-explain-it-to-a-friend/)，Web3 创建了一个无需准入的数据存储方式。其中不存在任何个人或公司控制或拥有着数据，而且数据的真实性也得到了充分保证。这些数据会被存储在区块链网络中的公共分类账本(public ledger)上。因此，不再是由一个实体拥有数据，而是由多个节点(即：运行着区块链的计算机)存储着数据，并就数据是否有效达成了共识。

从比特币(https://bitcoin.org/en/)到以太坊等协议的应用，Web3 以此类数据存储协议为基础，开启了各种全新的用例。例如：

由用户而非公司控制着个人身份
未经许可的金融系统(如：比特币)可开展贷款、货币、投资等的数字化货币业务
由 NFT(https://en.wikipedia.org/wiki/Non-fungible_token)去证明诸如音乐(https://royal.io/)、艺术(https://www.artblocks.io/)等数字项目的数字所有权
通过去中心化的自治组织(decentralized autonomous organizations，DAO)临时组建具有相同目的的团体，例如：Constitution DAO(https://www.constitutiondao.com/)和 social DAO(https://www.fwb.help/)
通过边玩边赚(Play-to-earn，p2e)的游戏，用户可以在玩游戏的同时，用来谋生(例如 Axie Infinity，https://axieinfinity.com/)

当然，上述应用的关键在于，数字货币的所有权(如：DAO 会员资格、或音乐版权等)都被掌控在用户的手中。在世界上任何地方，只要有互联网连接，任何人都可以自由地交易、销售和构建这些物品，而完全脱离了某个公司或政府的规则控制。对于这样的 Web3 理想主义，我在此不做评判，只是单纯从开发者的角度和您探讨，一个全栈开发者将如何具备 Web3 的技术能力。

从全栈说起✦

源于 2015 年的“全栈开发者”一词是指：一个软件工程师可以为任何级别的软件技术栈做出贡献。例如，面对某个与服务层相关的功能性缺陷，刚刚完成了客户端相关任务的同一开发者，可以无缝“接单”，去高效地抓 bug。您可以通过链接 --https://dzone.com/articles/do-not-publishfull-stack-development-truly-possibl，了解更多有关全栈开发的概念。

Web3 基础✦

为了深入研究 Web3，我依次创建了一个智能合约，以及一个 Dapp 与之进行交互。其中，

智能合约(https://www.coinbase.com/learn/crypto-basics/what-is-a-smart-contract)是部署在区块链上的一段代码(我下面会以以太坊(https://ethereum.org/en/what-is-ethereum/)为例)。该合约一旦被部署到区块链上，就不可改变、也无需许可(permissionless)，但是任何人都可以检索到它。
Dapp(decentralized application，去中心化应用)是我们通过 UI(通常来自网页或应用)与智能合约交互的方式。Dapp 会在后端利用智能合约的开放性，采用诸如 IPFS(InterPlanetary File Storage，星际文件存储)的方式，实现文件的分散存储，且不会出现停机。毕竟 DDoS 攻击无法攻击负责存储的每个节点。当然，在考虑部署之前，我们需要针对其安全性，开展全面测试，并处置好代码中的潜在缺陷与漏洞。

Web3 技术栈✦

目前，针对 Web3 的成熟技术栈组合，通常包括以下组件：

NPM - 备受 Web2 开发人员欢迎的节点包管理器，请参见 --https://nodejs.org/en/
Truffle 框架 - 专注于 Web3 的开发工具，请参见 --https://www.trufflesuite.com/
Ganache – 可以在本地主机上启动私有区块链，请参见 --https://www.trufflesuite.com/ganache
MetaMask - 以太坊的区块链用户界面与网关，属于开源且去中心化的区块链类型，请参见 --https://metamask.io/
Solidity – 先进的智能合约编程语言，请参见 --https://solidity.readthedocs.io/en/v0.7.1/
HTML/CSS/JavaScript - 客户端的层面，请参见 --https://www.w3.org/standards/webdesign/htmlcss
Web3.js – 通过以太坊网络交互的以太坊 API 库，请参见 --https://web3js.readthedocs.io/en/v1.3.0/
Infura - 授予以太坊网络访问权限的以太坊 API 服务，请参见 --https://infura.io/

以太坊 Dapp 的需求✦

假设有一个居委会即将举办定期选举，附近的居民将对一系列的决议进行投票。那么，我们就可以将该选举构建成为一个以太坊 Dapp。由于数据被存储在公开的区块链上，而不是单个公司的私有服务器上，因此任何人都可以通过与智能合约的交互，以无需许可的方式，检索投票结果。据此，投票结果就不存在被篡改或伪造的情况，进而避免了争议的发生。

创建智能合约✦

首先，我们需要利用前文提到的：Infura、NPM、Truffle 框架、Ganache、以及 Solidity 等 Web3 技术栈组件，来创建一个能与应用协同的智能合约。其创建的流程如下图所示：

我们可以根据该流程，去招募以太坊的开发者，具体内容请参见链接 --https://consensys.net/developers/onboarding-step-2/。

使用 React 创建 Dapp✦

有了智能合约，Web3 工程师便可以使用 NPM、MetaMask、HTML/CSS/JavaScript/React、以及 Web3.js 等 Web3 技术栈组件，构建居委会选举的应用。在本例中，我们将采用 React(https://reactjs.org/) 框架和如下流程：

首个以太坊 Dapp✦

我会通过 Infura 的注册页面(https://infura.io/register)创建一个免费帐户，并创建一个名为 jvc-homeowners-ballot 的项目：

下图中有关该项目的细节，我会在下文中详细讨论：

Truffle 入门在本地主机上，我创建了一个名为 jvc-homeowners-ballot 的文件夹，并使用 CLI 命令 --truffle init，来初始化 Truffle。初始化完成后的目录结构为：

├── contracts
│   └── Migrations.sol
├── migrations
│   └── 1_initial_migration.js
├── test
└── truffle-config.js

接着，我用如下命令为基于 Truffle 的钱包 provider，添加了对应的依赖项：

npm install --save @truffle/hdwallet-provider

为了创建本地开发网络，我通过命令 ganache 启动 Ganache CLI。

根据 CLI 的如下响应信息，我们可以看到 Ganache 已在本地主机的 8545 端口上运行：

ganache v7.0.1 (@ganache/cli: 0.1.2, @ganache/core: 0.1.2)
Starting RPC server
Available Accounts
==================
(0) 0x2B475e4fd7F600fF1eBC7B9457a5b58469b9EDDb (1000 ETH)
(1) 0x5D4BB40f6fAc40371eF1C9B90E78F82F6df33977 (1000 ETH)
(2) 0xFaab2689Dbf8b7354DaA7A4239bF7dE2D97e3A22 (1000 ETH)
(3) 0x8940fcaa55D5580Ac82b790F08500741326836e0 (1000 ETH)
(4) 0x4c7a1b7EB717F98Fb0c430eB763c3BB9212F49ad (1000 ETH)
(5) 0x22dFCd5df8d4B19a42cB14E87219fea7bcA7C92D (1000 ETH)
(6) 0x56882f79ecBc2D68947C6936D4571f547890D07c (1000 ETH)
(7) 0xD257AFd8958c6616bf1e61f99B2c65dfd9fEE95A (1000 ETH)
(8) 0x4Bb2EE0866578465E3a2d3eCCC41Ea2313372B20 (1000 ETH)
(9) 0xdf267AeFeAfE4b7053ca10c3d661a8CB24E98236 (1000 ETH)
Private Keys
==================
(0) 0x5d58d27b0f294e3222bbd99a3a1f07a441ea4873de6c3a2b7c40b73186eb616d
(1) 0xb9e52d6cfb2c074fa6a6578b946e3d00ea2a332bb356d0b3198ccf909a97fdc8
(2) 0xc52292ce17633fe2724771e81b3b4015374d2a2ea478891dab74f2028184edeb
(3) 0xbc7b0b4581592e48ffb4f6420228fd6b3f954ac8cfef778c2a81188415274275
(4) 0xc63310ccdd9b8c2da6d80c886bef4077359bb97e435fb4fe83fcbec529a536fc
(5) 0x90bc16b1520b66a02835530020e43048198195239ac9880b940d7b2a48b0b32c
(6) 0x4fb227297dafb879e148d44cf4872611819412cdd1620ad028ec7c189a53e973
(7) 0xf0d4dbe2f9970991ccc94a137cfa7cf284c09d0838db0ce25e76c9ab9f4316d9
(8) 0x495fbc6a16ade5647d82c6ad12821667f95d8b3c376dc290ef86c0d926f50fea
(9) 0x434f5618a3343c5e3b0b4dbeaf3f41c62777d91c3314b83f74e194be6c09416b
HD Wallet
==================
Mnemonic:      immense salmon nominee toy jungle main lion universe seminar output oppose hungry
Base HD Path:  m/44'/60'/0'/0/{account_index}
Default Gas Price
==================
2000000000
BlockGas Limit
==================
30000000
Call Gas Limit
==================
50000000
Chain Id
==================
1337
RPC Listening on 127.0.0.1:8545

项目文件夹中的 truffle-config.js 文件，会被激活并更新如下代码行：

JSON
    development: {
      host: "127.0.0.1",     // Localhost (default: none)
      port: 8545,            // Standard Ethereum port (default: none)
      network_id: "*",       // Any network (default: none)
    },

现在，我们可以在新的终端中通过命令 --truffle console，来启动 Truffle 控制台，能显示如下提示：

truffle(development)>

我们可以在控制台中，通过命令 --const HDWalletProvider = require('@truffle/hdwallet-provider'); 来创建钱包。当然，它可能会导致未定义的响应。

接下来，我需要通过 Mnemonic Code Converter(https://iancoleman.io/bip39/)网站，生成一个 12 字的助记词(12-word mnemonic phrase，类似私钥)，并将其通过如下命令，更新到 Truffle 控制台处：

const mnemonic = '12 words here';
const wallet = new HDWalletProvider(mnemonic, "http://localhost:8545");

上述两条命令虽然也会导致未定义的响应，但是钱包的控制台最终会显示如下运行结果：

truffle(development)> wallet
HDWalletProvider {
  walletHdpath: "m/44'/60'/0'/0/",
  wallets: {
...
 },
  addresses: [
    '0xa54b012b406c01dd99a6b18ef8b55a15681449af',
    '0x6d507a70924ea3393ae1667fa88801650b9964ad',
    '0x1237e0a8522a17e29044cde69b7b10b112544b0b',
    '0x80b4adb18698cd47257be881684fff1e14836b4b',
    '0x09867536371e43317081bed18203df4ca5f0490d',
    '0x89f1eeb95b7a659d4748621c8bdbabc33ac47bbb',
    '0x54ceb6f0d722dcb33152c953d5758a08045f254d',
    '0x25d2a8716792b98bf9cce5781b712f00cf33227e',
    '0x37b6364fb97028830bfeb0cb8d2b14e95e2efa05',
    '0xe9f56031cb6208ddefcd3cdd5a1a41f7f3400af5'
  ],
...

添加以太坊资金进行测试✦

现在我们需要为 Dapp 获取一些测试资金，并使用 Ropsten Ethereum Faucet(https://faucet.ropsten.be/)将资金添加到现有的、由ConsenSys(https://consensys.net/)创建的MetaMask(https://metamask.io/index.html)钱包中。当然，为了降低意外情况所导致的真实资金损失的风险，您可以在 MetaMask 中创建多个帐户，其中至少有一个帐户可专用于开发和测试。请记住：永远不要与任何人分享您的助记词，也不要在任何地方上传您的私钥!

如下图所示，为了添加测试资金，我需要输入自己的帐户地址：

如下图所示，通过 Ropsten Etherscan 站点，我们可以验证交易是否能够成功完成：

最终准备步骤✦

请使用如下命令将 dotenv 依赖项添加到该项目中：

npm install --save dotenv

接着，请在项目的根目录下创建一个.env 的新文件，并在其中包含如下两行：

INFURA_API_KEY=INSERT YOUR API KEY HERE (no quotations)
MNEMONIC="12 words here"

其中，INFURA_API_KEY 是在创建 jvc-homeowners-ballot 项目时给定的项目 ID。注意：请确保.env 文件被包含在.gitignore 文件中，以避免其他有权访问该存储库的人，擅自使用此机密信息。

最后一项准备步骤是更新 truffle-config.js 文件。我们首先需要在文件的顶部添加如下三行：

JavaScript
require("dotenv").config();
const HDWalletProvider = require("@truffle/hdwallet-provider");

接着，我们利用 dotenv 将如下网络信息，添加至上述依赖项：

JavaScript
   ropsten: {
     provider: () =>
       new HDWalletProvider(
         process.env.MNEMONIC,
         `https://ropsten.infura.io/v3/${process.env.INFURA_API_KEY}`
       ),
     network_id: 3, // Ropsten's id
     gas: 5500000, // Ropsten has a lower block limit than mainnet
     confirmations: 2, // # of confs to wait between deployments. (default: 0)
     timeoutBlocks: 200, // # of blocks before a deployment times out  (minimum/default: 50)
     skipDryRun: true // Skip dry run before migrations? (default: false for public nets )
    },

设置智能合约✦

准备好了 Infura、Truffle、以及测试资金后，让我们开始设置智能合约。针对前面的居委会选举示例，我们将使用位于本项目 contracts 文件夹中的 JvcHomeownerBallot.sol 合约：

JavaScript
// SPDX-License-Identifier: UNLICENSED  (it is common practice to include an open source license or declare it unlicensed)
pragma solidity ^0.8.7;  // tells the compiler which version to use

contract Homeowners {

    // store the addresses of voters on the blockchain in these 2 arrays
    address[] votedYes;
    address[] votedNo;

    function voteYes() public {
        votedYes.push(msg.sender);
    }

    function voteNo() public {
        votedNo.push(msg.sender);
    }

    function getYesVotes() public view returns (uint) {
        return votedYes.length;
    }

    function getNoVotes() public view returns (uint) {
        return votedNo.length;
    }
}

正如上面的代码所示，该合同将非常简单，参选居民只需选择是或否即可。其对应的 contracts 文件夹结构如下图所示：

.
├── JvcHomeownersBallot.sol
└── Migrations.sol

有了合约，我们就需要建立部署合约的方法。下面让我们转移到 migrations 文件夹，将如下内容添加到该文件夹下的 2_deploy_contracts.js 文件中：

JavaScript
const JvcHomeownersBallot = artifacts.require("JvcHomeownersBallot.sol");

module.exports = function(deployer) {
 deployer.deploy(JvcHomeownersBallot);
};

然后，我们可以使用如下命令执行合约的迁移：

truffle migrate --network ropsten

迁移的响应结果为：

Compiling your contracts...
===========================
> Compiling ./contracts/JvcHomeownersBallot.sol
> Artifacts written to /Users/john.vester/projects/jvc/consensys/jvc-homeowners-ballot/build/contracts
> Compiled successfully using:
   - solc: 0.8.11+commit.d7f03943.Emscripten.clang
Network up to date.
truffle(development)> truffle migrate --network ropsten
Compiling your contracts...
===========================
> Compiling ./contracts/JvcHomeownersBallot.sol
> Compiling ./contracts/Migrations.sol
> Artifacts written to /Users/john.vester/projects/jvc/consensys/jvc-homeowners-ballot/build/contracts
> Compiled successfully using:
   - solc: 0.8.11+commit.d7f03943.Emscripten.clang

Starting migrations...
======================
> Network name:    'ropsten'
> Network id:      3
> Block gas limit: 8000000 (0x7a1200)

1_initial_migration.js
======================
   Deploying 'Migrations'
   ----------------------
   > transaction hash:    0x5f227f26a31a3667a689be2d7fa6121a21153eb219873f6fc9aecede221b3b82
   > Blocks: 5            Seconds: 168
   > contract address:    0x9e6008B354ba4b9f91ce7b8D95DBC6130324024f
   > block number:        11879583
   > block timestamp:     1643257600
   > account:             0xa54b012B406C01dd99A6B18eF8b55A15681449Af
   > balance:             1.573649230299520359
   > gas used:            250142 (0x3d11e)
   > gas price:           2.506517682 gwei
   > value sent:          0 ETH
   > total cost:          0.000626985346010844 ETH
   Pausing for 2 confirmations...
   ------------------------------
   > confirmation number: 1 (block: 11879584)
   > confirmation number: 2 (block: 11879585)
   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:     0.000626985346010844 ETH

2_deploy_contracts.js
=====================
   Deploying 'JvcHomeownersBallot'
   -------------------------------
   > transaction hash:    0x1bf86b0eddf625366f65a996e633db589cfcef1a4d6a4d6c92a5c1f4e63c767f
   > Blocks: 0            Seconds: 16
   > contract address:    0xdeCef6474c95E5ef3EFD313f617Ccb126236910e
   > block number:        11879590
   > block timestamp:     1643257803
   > account:             0xa54b012B406C01dd99A6B18eF8b55A15681449Af
   > balance:             1.573133154908720216
   > gas used:            159895 (0x27097)
   > gas price:           2.507502486 gwei
   > value sent:          0 ETH
   > total cost:          0.00040093710999897 ETH
   Pausing for 2 confirmations...
   ------------------------------
   > confirmation number: 1 (block: 11879591)
   > confirmation number: 2 (block: 11879592)
   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:     0.00040093710999897 ETH

Summary
=======
> Total deployments:   2
> Final cost:          0.001027922456009814 ETH

- Blocks: 0            Seconds: 0
- Saving migration to chain.
- Blocks: 0            Seconds: 0
- Saving migration to chain.

至此，我们已将 JvcHomeownersBallot 智能合约部署到了 Ropsten 网络中。我们可以进一步使用如下 URL，来验证智能合约，并在“Deploying JvcHomeownersBallot”日志中提供合约的地址：

https://ropsten.etherscan.io/

或是：

https://ropsten.etherscan.io/address/0xdeCef6474c95E5ef3EFD313f617Ccb126236910e

使用 React 创建 Dapp✦

在上述提到的 jvc-homeowners-ballot 文件夹的同级目录，我将创建一个名为 jvc-homeowners-ballot-client 的目录，通过调用 React CLI 和如下命令，来创建同名的 React 应用：

npx create-react-app jvc-homeowners-ballot-client

接着，我通过如下命令，将 Web3 的依赖项安装到 React 应用中：

cd jvc-homeowners-ballot-client
npm installWeb3

核心的 React 应用一旦就绪，我们就需要建立合约应用的二进制接口(application binary interface，ABI)，以便 Dapp 与以太坊生态系统上的各种合约进行通信。

根据 JvcHomeownerBallot.sol 智能合约文件的内容，我们在 build/contracts 文件夹下打开 JvcHomeownersBallet.json 文件，并使用 abi.js 文件的 jvcHomeOwnersBallot 常量的“abi”属性值。具体内容如下：

JavaScript
export const jvcHomeownersBallot = [
  {
    "inputs": [],
    "name": "voteYes",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "voteNo",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "getYesVotes",
    "outputs": [
      {
        "internalType": "uint256",
        "name": "",
        "type": "uint256"
      }
    ],
    "stateMutability": "view",
    "type": "function",
    "constant": true
  },
  {
    "inputs": [],
    "name": "getNoVotes",
    "outputs": [
      {
        "internalType": "uint256",
        "name": "",
        "type": "uint256"
      }
    ],
    "stateMutability": "view",
    "type": "function",
    "constant": true
  }
];

该文件应当被放置在 React 应用目录 src 的新建子文件夹 abi 内。

下面，我们根据如下配置，从头开始更新 Apps.js：

JavaScript
import React, { useState } from "react";
import { jvcHomeownersBallot } from "./abi/abi";
importWeb3from "web3";
import "./App.css";

constWeb3= newWeb3(Web3.givenProvider);
const contractAddress = "0xdeCef6474c95E5ef3EFD313f617Ccb126236910e";
const storageContract = newWeb3.eth.Contract(jvcHomeownersBallot, contractAddress);

我们可以通过多种方式找到上面提到的 contactAddress。除了我在此使用的 truffle 的 migrate CLI 命令之外，您还可以使用 Etherscan 站点(https://ropsten.etherscan.io/)。

标准的 React 开发✦

在开始标准的 React 开发之前，让我们先来看看完整的 App.js 文件 (如下所示)：

JavaScript
import React, { useState } from "react";
import { jvcHomeownersBallot } from "./abi/abi";
importWeb3from "web3";
import Nav from "./components/Nav.js";
import "./App.css";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import {CircularProgress, Grid, Typography} from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
 root: {
   "& > *": {
     margin: theme.spacing(1),
   },
 },
}));

constWeb3= newWeb3(Web3.givenProvider);
const contractAddress = "0xdeCef6474c95E5ef3EFD313f617Ccb126236910e";
const storageContract = newWeb3.eth.Contract(jvcHomeownersBallot, contractAddress);

function App() {
 const classes = useStyles();
 const [voteSubmitted, setVoteSubmitted] = useState("");
 const [yesVotes, setYesVotes] = useState(0);
 const [noVotes, setNoVotes] = useState(0);
 const [waiting, setWaiting] = useState(false);

 const getVotes = async () => {
     const postYes = await storageContract.methods.getYesVotes().call();
     setYesVotes(postYes);

     const postNo = await storageContract.methods.getNoVotes().call();
     setNoVotes(postNo);
 };

 const voteYes = async () => {
     setWaiting(true);

     const accounts = await window.ethereum.enable();
     const account = accounts[0];
     const gas = (await storageContract.methods.voteYes().estimateGas()) * 1.5;
     const post = await storageContract.methods.voteYes().send({
         from: account,
         gas,
     });

     setVoteSubmitted(post.from);
     setWaiting(false);
 };

 const voteNo = async () => {
     setWaiting(true);

     const accounts = await window.ethereum.enable();
     const account = accounts[0];
     const gas = (await storageContract.methods.voteNo().estimateGas() * 1.5);
     const post = await storageContract.methods.voteNo().send({
         from: account,
         gas,
     });

     setVoteSubmitted(post.from);
     setWaiting(false);
 };

 return (
   <div className={classes.root}>
     <Nav />
     <div className="main">
       <div className="card">
         <Typography variant="h3" gutterBottom>
             JVC Homeowners Ballot
         </Typography>

         <Typography gutterBottom>
             How do you wish to vote?
         </Typography>

         <span className="buttonSpan">
           <Button
             id="yesButton"
             className="button"
             variant="contained"
             color="primary"
             type="button"
             onClick={voteYes}>Vote Yes</Button>
           <div className="divider"/>
           <Button
             id="noButton"
             className="button"
             color="secondary"
             variant="contained"
             type="button"
             onClick={voteNo}>Vote No</Button>
           <div className="divider"/>
         </span>

         {waiting && (
           <div>
               <CircularProgress />
               <Typography gutterBottom>
                   Submitting Vote ... please wait
               </Typography>
           </div>
         )}

         {!waiting && voteSubmitted && (
           <Typography gutterBottom>
               Vote Submitted: {voteSubmitted}
           </Typography>
         )}

         <span className="buttonSpan">
            <Button
                id="getVotesButton"
                className="button"
                color="default"
                variant="contained"
                type="button"
                onClick={getVotes}>Get Votes</Button>
         </span>

         {(yesVotes > 0 || noVotes > 0) && (
           <div>
           <Typography variant="h5" gutterBottom>
               Current Results
           </Typography>

           <Grid container spacing={1}>
               <Grid item xs={6}>
                   <div className="resultsAnswer resultsHeader">Vote</div>
               </Grid>
               <Grid item xs={6}>
                   <div className="resultsValue resultsHeader"># of Votes</div>
               </Grid>
               <Grid item xs={6}>
                   <div className="resultsAnswer">Yes</div>
               </Grid>
               <Grid item xs={6}>
                   <div className="resultsValue">{yesVotes}</div>
               </Grid>
               <Grid item xs={6}>
                   <div className="resultsAnswer">No</div>
               </Grid>
               <Grid item xs={6}>
                   <div className="resultsValue">{noVotes}</div>
               </Grid>
             </Grid>
           </div>
         )}
       </div>
     </div>
   </div>
 );
}

export default App;

运行 Dapp✦

我们可以使用 Yarn CLI 的如下命令，来启动基于 React 的 Dapp：

yarn start

在完成编译和验证之后，您会看到如下应用界面：

它拥有三个选项：

VOTE YES - 提交赞成票
VOTE NO - 提交反对票
GET VOTES – 在 Dapp 的下部显示投赞成与反对票的总数

小结✦

综上所述，一旦建立了智能合约，从客户端的角度来看，我们将能够沿用 Web2 的如下方面到 Web3 上：

目前在 Web2 项目中常用的 JavaScript 客户端框架，可以被继续使用。
NPM 可以被用来包含依赖项，以促进 Web3 的开发。
类似于 Web2 应用程序与传统数据存储的交互方式，Web3 的 Truffle 和 MetaMask 库也允许应用程序与数据进行交互。
现有的业务规则和 UI/UX 设计，将继续满足产品所有者对于 Web3 特性和功能上的要求。

而 Web3 的独特之处主要体现在：

在区块链上构建的 Dapps，都采用同一个事实源向各个信息消费者的请求，提供可靠的数据。
我们不再需要知道“谁”参与了交易、或查询存储在区块链智能合约中的信息(哪怕是别的 Dapp 去访问存储的数据)。由于结果总是固定不变的，因此 Dapp 只需关注应用程序的业务规则。正如上述居委会选举的简单示例那样，无论选票被查询多少次，即便是有另一个 Dapp，其结果总是完全相同的。
由于其分布式的特性，因此控制权被返回给了消费者，而非停留在少数人的手中。

可见，从全栈开发者迈向 Web3 的学习曲线并不陡峭，而且我们可以寻求各种工具、框架和库的帮助。如果您对上述项目所涉及到的源代码感兴趣的话，可以通过如下链接，访问到它在 GitLab 上两个存储库：

https://gitlab.com/johnjvester/jvc-homeowners-ballot
https://gitlab.com/johnjvester/jvc-homeowners-ballot-client

译者介绍✦

陈峻 (Julian Chen)，51CTO 社区编辑，具有十多年的 IT 项目实施经验，善于对内外部资源与风险实施管控，专注传播网络与信息安全知识与经验;持续以博文、专题和译文等形式，分享前沿技术与新知;经常以线上、线下等方式，开展信息安全类培训与授课。