DApp 開發入門指南 🔨

1. DApp 基礎概念

1.1 什么是 DApp？

去中心化應用（DApp）是基于區塊鏈的應用程序，特點是：

• 后端運行在區塊鏈網絡
• 前端可以是任何框架
• 使用智能合約處理業務邏輯
• 數據存儲在區塊鏈上

1.2 DApp 架構

前端 (Web/Mobile)??
Web3 接口層??
智能合約層??
區塊鏈網絡

2. 開發環境搭建

2.1 基礎工具安裝

# 安裝 Node.js 和 npm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install node# 安裝 Hardhat
npm install --save-dev hardhat# 安裝 Web3.js 或 Ethers.js
npm install web3
# 或
npm install ethers

2.2 項目初始化

# 創建新項目
mkdir my-dapp
cd my-dapp# 初始化項目
npm init -y
npx hardhat init# 安裝前端依賴
npm install react react-dom
npm install @web3-react/core @web3-react/injected-connector

3. 智能合約開發

3.1 合約示例

// contracts/TodoList.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;contract TodoList {struct Task {uint id;string content;bool completed;}mapping(uint => Task) public tasks;uint public taskCount;event TaskCreated(uint id, string content);event TaskCompleted(uint id, bool completed);function createTask(string memory _content) public {taskCount++;tasks[taskCount] = Task(taskCount, _content, false);emit TaskCreated(taskCount, _content);}function toggleCompleted(uint _id) public {Task memory _task = tasks[_id];_task.completed = !_task.completed;tasks[_id] = _task;emit TaskCompleted(_id, _task.completed);}
}

3.2 合約測試

// test/TodoList.test.js
const { expect } = require("chai");describe("TodoList", function() {let TodoList;let todoList;let owner;beforeEach(async function() {TodoList = await ethers.getContractFactory("TodoList");[owner] = await ethers.getSigners();todoList = await TodoList.deploy();await todoList.deployed();});it("Should create a new task", async function() {await todoList.createTask("Test task");const task = await todoList.tasks(1);expect(task.content).to.equal("Test task");});
});

4. 前端開發

4.1 React 組件示例

// src/components/TodoList.js
import { useState, useEffect } from 'react';
import { ethers } from 'ethers';
import TodoList from '../artifacts/contracts/TodoList.sol/TodoList.json';const TodoListComponent = () => {const [tasks, setTasks] = useState([]);const [newTask, setNewTask] = useState('');const [contract, setContract] = useState(null);useEffect(() => {const init = async () => {if (window.ethereum) {const provider = new ethers.providers.Web3Provider(window.ethereum);const signer = provider.getSigner();const contract = new ethers.Contract(CONTRACT_ADDRESS,TodoList.abi,signer);setContract(contract);loadTasks(contract);}};init();}, []);const loadTasks = async (contract) => {const taskCount = await contract.taskCount();const loadedTasks = [];for (let i = 1; i <= taskCount; i++) {const task = await contract.tasks(i);loadedTasks.push(task);}setTasks(loadedTasks);};const createTask = async () => {if (!newTask) return;try {const tx = await contract.createTask(newTask);await tx.wait();setNewTask('');loadTasks(contract);} catch (error) {console.error("Error creating task:", error);}};return (<div><h1>Todo List</h1><inputvalue={newTask}onChange={(e) => setNewTask(e.target.value)}placeholder="New task..."/><button onClick={createTask}>Add Task</button><ul>{tasks.map(task => (<li key={task.id.toString()}>{task.content}{task.completed ? " ?" : ""}</li>))}</ul></div>);
};export default TodoListComponent;

4.2 Web3 集成

// src/utils/web3.js
import { InjectedConnector } from '@web3-react/injected-connector';
import { Web3Provider } from '@ethersproject/providers';export const injected = new InjectedConnector({supportedChainIds: [1, 3, 4, 5, 42]
});export const getLibrary = (provider) => {const library = new Web3Provider(provider);library.pollingInterval = 12000;return library;
};

5. IPFS 集成

5.1 文件存儲

import { create } from 'ipfs-http-client';const ipfs = create({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' });async function uploadToIPFS(file) {try {const added = await ipfs.add(file);const url = `https://ipfs.infura.io/ipfs/${added.path}`;return url;} catch (error) {console.error('Error uploading file: ', error);}
}

5.2 元數據存儲

async function saveMetadata(data) {const metadata = JSON.stringify(data);try {const added = await ipfs.add(metadata);return added.path;} catch (error) {console.error('Error saving metadata: ', error);}
}

6. 部署和維護

6.1 部署腳本

// scripts/deploy.js
async function main() {const TodoList = await ethers.getContractFactory("TodoList");const todoList = await TodoList.deploy();await todoList.deployed();console.log("TodoList deployed to:", todoList.address);
}main().then(() => process.exit(0)).catch(error => {console.error(error);process.exit(1);});

6.2 監控和維護

// 事件監聽
contract.on("TaskCreated", (id, content) => {console.log(`New task created: ${content} (ID: ${id})`);updateUI();
});// 錯誤處理
function handleError(error) {if (error.code === 4001) {console.log('Transaction rejected by user');} else if (error.code === -32603) {console.log('Internal JSON-RPC error');}// 處理其他錯誤...
}

7. 最佳實踐

7.1 安全考慮

1. 輸入驗證
2. 權限控制
3. 重入攻擊防護
4. Gas 優化

7.2 用戶體驗

1. 交易等待提示
2. 錯誤友好提示
3. 離線功能支持
4. 響應式設計

8. 相關資源

• React 文檔
• Hardhat 文檔
• IPFS 文檔
• Web3.js 文檔
• Ethers.js 文檔