上一篇

本文将详细介绍Web3 DApp开发的架构、技术，以及使用哪些工具，并给出完整示例。我们先介绍Web3用到的技术：区块链，以以太坊（Ethereum）为主流，也包括Solana、Aptos等其他非EVM链。区块链本身是软件，需要运行在一系列节点上，这些节点组成P2P网络或者半中心化网络。节点不仅负责接收新的输入并生成新的区块，还需要存储区块链运行时产生的所有数据，并负责同步、对外提供查询等RPC服务。钱包：帮助用户管理自己在区块链上资产的软件，加密存储用户的私钥。当用户需要和区块链交互时，就需要用到私钥签名；智能合约：运行在区块链上的一段托管程序，主要用来和外部账户交互；UI：这里特指前端页面，因为直接通过RPC调用合约仅限个别高级用户，普通用户仍需要一个前端页面，并通过JavaScript脚本配合钱包签名与合约交互。因为区块链上所有数据全透明，要查询任意区块的数据，可以通过EtherScan这个网站查。其他公链，无论是与Ethereum兼容的BSC、Polygon，还是不兼容的Solana、Aptos等，也提供类似XxxScan这样的查询网站。这些Scan能提供基本的读写合约的能力，有助于开发阶段的测试。区块链本身以及钱包、EtherScan等属于基础设施，如何基础设施不在本文讨论范围之内。本文仅限定如何开发DApp。一个完整的DApp需要开发以下部分：智能合约：将逻辑写入合约，并部署在链上；UI：为用户提供一个交互式UI，配合钱包完成特定功能。此外，对后端开发有经验的同学应该知道，通常来说，App数据会存储在数据库中，前端与后端交互，离不开后端对数据的查询和修改。在DApp中，同样需要一个查询的后端，但这个后端通常不是数据库。有的同学会认为，既然节点本身提供了查询链上全部数据的PRC接口，那么，前端直接查询节点是否可行？答案是不行。因为节点提供的数据，是用户产生的原始日志。举个例子，假设有个NFT合约，允许用户创建NFT，那么，一段时间内，节点产生的日志如下：用户A创建了NFT-1；用户B创建了NFT-2；用户B把NFT-2转移给了用户X；用户C创建了NFT-3；...这些未经聚合处理的数据没法生成一个不断更新的数据库表：OwnerNFT ID用户A1用户X2用户C3所以，一个DApp除了前端外，还需要一个后端服务，它主要功能是不断聚合链上产生的数据，并根据DApp的业务需求设计表结构以方便查询。一个直观的想法是用Java或者Go语言等编写一个后端服务，再配上一个数据库，就可以为前端提供REST API来实现查询。只不过自己维护后端服务比较麻烦，还需要租用云端服务器、数据库等资源，费时费力。我们推荐另一种后端服务：The Graph。它本身也可看作是一个基础设置。The Graph可以让我们部署一个Graph查询服务，如何定义表结构以及如何更新则由我们提供一个预编译的WASM。整个配置、WASM代码以及查询服务都托管在The Graph中，无需自己搭建服务器，非常方便。因此，一个完整的DApp架构如下：┌───────┐┌───────────│ DApp │───────────┐│ └───────┘ ││ read/write query ││ contract data │▼ ▼┌───────┐ ┌───────┐│Wallet │ │ Graph │└───────┘ └───────┘│ ▲│ sign index ││ broadcast data ││ ││ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ││ ┌────┐ ┌────┐ ┌────┐ │ │└──┼▶│Node│ │Node│ ... │Node│───┘└────┘ └────┘ └────┘ ││ Ethereum─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘我们看看开发各个组件所需的技能树需求。由于本文仅讨论ETH以及ETH兼容链的DApp开发，所以，以下技能树仅适用于ETH系：合约开发：使用Solidity语言；合约部署工具：可以选择Hardhat、Truffle或Foundry，建议使用Hardhat；数据聚合服务：选择The Graph提供的托管服务；数据聚合开发：The Graph给出的模板代码是TypeScript，因此这里使用TypeScript；前端页面：HTML+JavaScript/TypeScript，也可配合任意前端框架如Vue、React等；合约交互框架：虽然理论上使用JSON RPC就可以读写合约，但使用Ethers.js可以大大简化开发；钱包支持：如果仅支持MetaMask，则使用Ethers.js已足够，如果要支持多种钱包，尤其是需要连接手机钱包，则需要使用Web3Modal。综上所述，我们可以总结一个基本的Web3全栈开发技术需求：Solidity语言；JavaScript语言；TypeScript语言；HTML/CSS等前端技能。以及用到的服务：将所有源码托管在GitHub；使用The Graph提供的Hosted Service；使用GitHub Page实现静态页托管；可选：绑定一个域名。下面我们以一个具体的项目来演示Web3全栈开发的完整流程。该项目允许用户在Polygon上创建属于自己的NFT卡片，并可在页面查看链上铸造的所有NFT卡片：图片Polygon是兼容以太坊的PoS链，特点是Gas便宜，速度快，领测试币方便。编写合约创建Web3 DApp的第一步是编写合约。我们使用Hardhat工具，它是Node.js开发的，确保本机安装了Node.js和NPM，先安装Solidity编译器：$ npm install -g solc$ solc --versionsolc, the solidity compiler commandline interfaceVersion: 0.8.17然后创建目录web3stack并安装Hardhat：$ mkdir web3stack$ cd web3stack$ npm install --save-dev hardhat然后输入命令npx hardhat开始创建一个新的合约项目：$ npx hardhatHardhat提示选择项目类型：? What do you want to do? …❯ Create a JavaScript projectCreate a TypeScript projectCreate an empty hardhat.config.jsQuit这里选择JavaScript项目。后续接着提示项目根目录、是否添加.gitignore、是否安装相关依赖等：✔ What do you want to do? · Create a JavaScript project✔ Hardhat project root: · /path/to/web3stack✔ Do you want to add a .gitignore? (Y/n) · y✔ Do you want to install this sample projects dependencies with npm (@nomicfoundation/hardhat-toolbox)? (Y/n) · y全部按默认值来。完成后查看package.json应该有两个dev依赖：{"devDependencies": {"@nomicfoundation/hardhat-toolbox": "^2.0.1","hardhat": "^2.12.7"}}Hardhat默认创建了一个Lock合约，以及相关配置。我们可以自己再写一个Card合约：// SPDX-License-Identifier: GPL-v3pragma solidity =0.8.17;import "@openzeppelin/contracts/token/ERC721/ERC721.sol";contract Card is ERC721 {...}直接编译：$ npx hardhat compileError HH411: The library @openzeppelin/contracts, imported from contracts/Card.sol, is not installed. Try installing it using npm.编译提示找不到library报错，因为我们引用了OpenZeppelin的库，所以要先用NPM安装一下：npm install --save @openzeppelin/contracts这条命令会在package.json中添加一个新的依赖：{..." alt="Web3全栈开发指南">

Web3全栈开发指南

下一篇

iBox链盒全面升级：数字藏品平台开启Web3.0时代大众网2024-01-0411：05大众网2024-01-0411：05

自上线以来,iBox链盒一直秉持着用数字收藏美好生活的使命,积极探索数字藏品与产业的融合新模式。随着平台的不断壮大,为更好地赋能行业并提供优质服务,iBox链盒