去中心化投票系统开发教程 第二章：开发环境搭建

第二章：开发环境搭建

🛠️ 引言

在开始构建我们的去中心化投票系统之前，我们需要搭建一个完整的开发环境。就像建造房子需要先准备好工具和材料一样，开发区块链应用也需要先准备好相应的工具和框架。本章将指导你一步步搭建开发环境，为后续的开发工作打下坚实的基础。

🧰 必要工具和依赖

Node.js 和 npm

Node.js是一个JavaScript运行环境，而npm（Node Package Manager）是Node.js的包管理器。我们将使用它们来安装和管理项目依赖。

安装步骤

1. 访问Node.js官网
2. 下载并安装LTS（长期支持）版本
3. 安装完成后，打开终端或命令提示符，验证安装：

node -v
npm -v

如果显示版本号，说明安装成功。我们推荐使用Node.js 14.0.0或更高版本。

💡 提示：如果你需要在同一台机器上管理多个Node.js版本，可以考虑使用nvm（Node Version Manager）。

Git

Git是一个分布式版本控制系统，我们将使用它来管理代码。

安装步骤

1. 访问Git官网
2. 下载并安装适合你操作系统的版本
3. 安装完成后，验证安装：

git --version

代码编辑器

你需要一个好用的代码编辑器来编写和管理代码。我们推荐使用Visual Studio Code（VS Code）。

安装步骤

1. 访问VS Code官网
2. 下载并安装
3. 安装以下扩展以提升开发体验：
   • Solidity（以太坊智能合约语言支持）
   • ESLint（JavaScript代码检查）
   • Prettier（代码格式化）
   • GitLens（Git增强功能）

🎨 个性化：VS Code有丰富的主题和自定义选项。花几分钟时间配置一个你喜欢的开发环境，会让编码过程更加愉快！

MetaMask钱包

MetaMask是一个浏览器扩展钱包，它允许你与以太坊区块链交互。我们将使用它来测试我们的去中心化投票系统。

安装步骤

1. 访问MetaMask官网或直接在浏览器扩展商店中搜索
2. 添加扩展到你的浏览器（Chrome、Firefox、Brave等）
3. 按照指引创建一个新钱包
4. 重要：安全地保存你的助记词（12个单词），这是恢复钱包的唯一方式
5. 设置密码

⚠️ 安全警告：永远不要分享你的助记词或私钥。合法的项目或个人永远不会要求你提供这些信息。

🔧 区块链开发框架

Truffle vs Hardhat

对于以太坊开发，有两个主流的开发框架：Truffle和Hardhat。两者都很优秀，但有一些差异：

在本教程中，我们将使用Hardhat，因为它提供了更现代的开发体验和强大的调试功能。

安装Hardhat

# 创建项目目录
mkdir decentralized-voting
cd decentralized-voting

# 初始化npm项目
npm init -y

# 安装Hardhat
npm install --save-dev hardhat

初始化Hardhat项目

npx hardhat

运行上述命令后，你会看到以下选项：

888    888                      888 888               888
888    888                      888 888               888
888    888                      888 888               888
8888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
888    888 .d888888 888    888  888 888  888 .d888888 888
888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888

Welcome to Hardhat v2.9.3

? What do you want to do? …
❯ Create a basic sample project
  Create an advanced sample project
  Create an advanced sample project that uses TypeScript
  Create an empty hardhat.config.js
  Quit

选择"Create an advanced sample project that uses TypeScript"，因为TypeScript提供了更好的类型安全性和开发体验。

这将创建一个包含以下文件和目录的项目结构：

decentralized-voting/
├── contracts/         # 智能合约目录
├── scripts/           # 部署和交互脚本
├── test/              # 测试文件
├── .gitignore         # Git忽略文件
├── hardhat.config.ts  # Hardhat配置文件
├── package.json       # 项目依赖
├── README.md          # 项目说明
└── tsconfig.json      # TypeScript配置

安装其他依赖

# 安装以太坊开发相关依赖
npm install --save-dev @nomiclabs/hardhat-ethers ethers @nomiclabs/hardhat-waffle ethereum-waffle chai @types/chai @types/node @types/mocha ts-node typescript

# 安装OpenZeppelin合约库（提供安全的智能合约实现）
npm install @openzeppelin/contracts

🌐 配置本地区块链网络

Hardhat内置了一个本地以太坊网络，非常适合开发和测试。我们需要配置hardhat.config.ts文件：

import { HardhatUserConfig } from "hardhat/config";
import "@nomiclabs/hardhat-waffle";
import "@nomiclabs/hardhat-ethers";

const config: HardhatUserConfig = {
  solidity: "0.8.4",
  networks: {
    hardhat: {
      chainId: 1337 // 使用与MetaMask兼容的链ID
    }
  },
  paths: {
    artifacts: './src/artifacts', // 将编译后的合约放在前端可以访问的位置
  },
};

export default config;

📁 创建项目结构

现在，让我们创建一个更完整的项目结构，包括前端部分：

# 在项目根目录下创建前端目录
mkdir -p src/components src/pages src/utils

# 创建前端入口文件
touch src/index.tsx src/App.tsx

# 创建样式文件目录
mkdir src/styles
touch src/styles/globals.css

安装前端依赖

我们将使用React作为前端框架，使用Web3.js或ethers.js与区块链交互：

# 安装React及相关依赖
npm install react react-dom react-scripts web-vitals

# 安装Web3相关依赖
npm install web3 @web3-react/core @web3-react/injected-connector

# 安装UI组件库
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

# 安装TypeScript类型定义
npm install --save-dev @types/react @types/react-dom

⚙️ 配置前端

创建一个基本的前端配置文件：

# 创建TypeScript配置文件
touch tsconfig.json

将以下内容添加到tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

🧪 验证开发环境

让我们确保一切都设置正确：

# 启动Hardhat本地网络
npx hardhat node

# 在新的终端窗口，编译智能合约
npx hardhat compile

如果一切正常，你应该会看到编译成功的消息。

🔄 工作流程概述

现在我们的开发环境已经搭建完成，让我们回顾一下典型的开发工作流程：

1. 编写智能合约：在contracts/目录中创建和编辑Solidity合约
2. 编译合约：使用npx hardhat compile编译合约
3. 测试合约：在test/目录中编写测试，并使用npx hardhat test运行测试
4. 部署合约：使用scripts/目录中的脚本部署合约到本地网络或测试网
5. 开发前端：在src/目录中创建React组件和页面
6. 连接前端与合约：使用Web3.js或ethers.js将前端与智能合约连接
7. 本地测试：使用MetaMask连接到本地网络进行测试
8. 部署到测试网：准备好后，将应用部署到以太坊测试网（如Rinkeby、Ropsten）

📝 小结

在本章中，我们：

• 安装了必要的开发工具（Node.js、Git、VS Code、MetaMask）
• 设置了Hardhat开发框架
• 创建了项目结构，包括智能合约和前端部分
• 安装了必要的依赖
• 配置了本地区块链网络
• 了解了开发工作流程

现在我们已经搭建好了开发环境，下一章将开始设计和实现我们的投票智能合约！

🔍 故障排除

常见问题

1. Node.js版本不兼容

   • 错误：Error: Cannot find module 'hardhat/config'
   • 解决方案：确保使用Node.js 14.0.0或更高版本

2. MetaMask无法连接到本地网络

   • 错误：MetaMask - RPC Error: Invalid JSON RPC response: ""
   • 解决方案：确保Hardhat网络正在运行，并且在MetaMask中配置了正确的RPC URL（http://localhost:8545）和链ID（1337）

3. 合约编译错误

   • 解决方案：仔细检查Solidity代码中的语法错误，确保使用兼容的Solidity版本

4. npm依赖冲突

   • 解决方案：尝试删除node_modules目录和package-lock.json文件，然后重新运行npm install

获取帮助

如果你遇到本教程中未涵盖的问题，可以尝试以下资源：

• Hardhat文档
• 以太坊StackExchange
• Solidity论坛
• 以太坊开发者Discord

准备好了吗？让我们继续第三章：智能合约设计与开发！