Web3.0开发实战教程,从零开始构建去中心化应用(DApp)

第二部分：Web3.0开发环境搭建

工欲善其事，必先利其器，开始Web3.0开发前,我们需要搭建以下开发环境：

1. 代码编辑器：VS Code（推荐，配合Solidity插件）。
2. Node.js 和 npm/yarn：JavaScript运行时环境和包管理器。
3. Truffle Suite / Hardhat：智能合约开发框架，用于编译、测试、部署智能合约,Hardhat因其现代化的开发和调试体验越来越受欢迎。
4. Ganache：个人区块链，用于本地快速搭建和测试以太坊网络,可以即时看到交易结果和状态变化。
5. MetaMask：浏览器钱包插件,用于与本地测试网及主网交互。
6. IPFS客户端（如Brave浏览器、IPFS Desktop）：用于测试去中心化存储。

安装步骤简述：

• 安装Node.js (LTS版本)
• 通过npm安装Truffle (npm install -g truffle) 或 Hardhat (npm install --global hardhat)
• 安装并配置Ganache,创建本地测试网络。
• 在浏览器中安装MetaMask插件,并导入Ganache提供的测试账户。

第三部分：智能合约开发实战（以Solidity为例）

智能合约是DApp的灵魂，我们以一个简单的“投票DApp”为例：

1. 初始化项目：

   mkdir voting-dapp
   cd voting-dapp
   truffle init

2. 编写智能合约： 在 contracts/ 目录下创建 Voting.sol：

   // SPDX-License-Identifier: MIT
   pragma solidity ^0.8.0;
   contract Voting {
       struct Candidate {
           uint id;
           string name;
           uint voteCount;
       }
       mapping(uint => Candidate) public candidates;
       mapping(address => bool) public voters;
       uint public candidatesCount;
       constructor() {
           addCandidate("Candidate 1");
           addCandidate("Candidate 2");
       }
       function addCandidate(string memory _name) private {
           candidatesCount++;
           candidates[candidatesCount] = Candidate(candidatesCount, _name, 0);
       }
       function vote(uint _candidateId) public {
           require(!voters[msg.sender], "You have already voted.");
           require(_candidateId > 0 && _candidateId <= candidatesCount, "Invalid candidate ID.");
           voters[msg.sender] = true;
           candidates[_candidateId].voteCount++;
       }
       function getVoteCount(uint _candidateId) public view returns (uint) {
           return candidates[_candidateId].voteCount;
       }
   }

3. 编译合约：

   truffle compile

4. 编写测试用例： 在 test/ 目录下编写JavaScript/TypeScript测试文件,使用Chai和Truffle的断言库测试合约功能。

5. 部署合约： 配置 truffle-config.js，指定网络（如本地Ganache）。 编写迁移脚本 migrations/2_deploy_contracts.js：

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

   执行部署：

   truffle migrate --network development

第四部分：前端开发与交互

前端是用户与DApp交互的界面，我们将使用React（配合Ethers.js）来构建：

1. 初始化React项目：

   npx create-react-app frontend
   cd frontend
   npm install ethers

2. 连接钱包： 在React组件中，使用Ethers.js的BrowserProvider连接MetaMask钱包：

   import { ethers } from 'ethers';
   const connectWallet = async () => {
     if (window.ethereum) {
       try {
         const provider = new ethers.BrowserProvider(window.ethereum);
         await window.ethereum.request({ method: 'eth_requestAccounts' });
         const signer = await provider.getSigner();
         console.log("Connected account:", await signer.getAddress());
         // 设置provider和signer到状态或上下文
       } catch (error) {
         console.error("Error connecting wallet:", error);
       }
     } else {
       alert("Please install MetaMask!");
     }
   };

3. 读取合约数据： 使用已部署的合约地址和ABI（通过truffle compile生成）创建合约实例,并调用只读方法：

   const contractAddress = "YOUR_DEPLOYED_CONTRACT_ADDRESS";
   const contractABI = [ /* 从Voting.json中复制ABI */ ];
   const contract = new ethers.Contract(contractAddress, contractABI, provider);
   const getVoteCount = async (candidateId) => {
     const count = await contract.getVoteCount(candidateId);
     console.log("Vote count:", count.toString());
   };

4. 发送交易（调用合约写方法）： 使用signer发送交易,例如投票：

   const vote = async (candidateId) => {
     if (!signer) {
       alert("Please connect wallet first!");
       return;
     }
     const connectedContract = new ethers.Contract(contractAddress, contractABI, signer);
     const tx = await connectedContract.vote(candidateId);
     await tx.wait(); // 等待交易确认
     console.log("Voted successfully!");
   };

5. UI设计与交互： 使用React的状态管理（useState, useEffect）来更新界面，显示候选人列表、投票数,并处理投票按钮的点击事件。

第五部分：去中心化存储与数据交互

如果你的DApp需要存储图片、文本等数据,可以考虑使用IPFS：

1. 上传文件到IPFS： 使用 kubo（原IPFS客户端）的API或第三方服务如Pinata。

   // 示例：使用axios和ipfs-http-client（简化版）
   import { create } from 'ipfs-http-client';
   const ipfs = create({ url: 'https://ipfs.infura.io:5001/api/v0' });
   const uploadToIPFS = async (file) => {
     const added = await ipfs.add(file);
     return `https://ipfs.io/ipfs/${added.path}`;
   };

2. 从IPFS读取数据： 直接通过IPFS网关访问，如 https://ipfs.io/ipfs/QmYourHash...。

第六部分：测试、部署与优化

1. 全面测试：
   • 单元测试：针对智能合约的每个函数进行详细测试。