dApp开发入门教程：从零开始构建链上留言板

1. 什么是dApp？

dApp（去中心化应用）是基于区块链技术构建的应用程序，与传统应用的主要区别在于：

• 去中心化：数据存储在区块链上，不依赖单一服务器
• 透明公开：智能合约代码和数据对所有人可见
• 用户控制：用户完全控制自己的数据和资产
• 无需信任：通过智能合约自动执行，无需第三方中介

本教程将指导你从零开始构建一个完整的dApp——链上留言板，让你掌握dApp开发的核心流程。

2. 开发环境搭建

2.1 安装Node.js

dApp开发需要Node.js环境，推荐使用LTS版本：

1. 访问 Node.js官网
2. 下载并安装适合你操作系统的LTS版本
3. 验证安装：

   node -v
   npm -v

2.2 安装MetaMask

MetaMask是连接dApp和区块链的桥梁：

1. 访问 MetaMask官网
2. 下载并安装浏览器插件
3. 创建钱包并保存助记词
4. 添加Trustivon测试网络（参考MetaMask网络设置）

2.3 获取测试代币

在Trustivon测试网上开发需要测试代币：

1. 访问 Trustivon水龙头
2. 输入你的MetaMask地址
3. 领取测试代币

3. 智能合约开发

3.1 初始化Hardhat项目

Hardhat是以太坊智能合约开发的流行框架：

1. 创建项目目录：

   mkdir doomsday-dapp
   cd doomsday-dapp

2. 初始化npm项目：

   npm init -y

3. 安装Hardhat：

   npm install --save-dev hardhat

4. 初始化Hardhat项目：

   npx hardhat init

   • 选择"Create a TypeScript project"
   • 按默认选项完成初始化

5. 安装依赖：

   npm install --save-dev @nomicfoundation/hardhat-toolbox
   npm install dotenv

3.2 编写智能合约

创建一个简单的链上留言板合约：

1. 创建合约文件：

   mkdir -p contracts
   touch contracts/MessageBoard.sol

2. 编写合约代码：

   // SPDX-License-Identifier: MIT
   pragma solidity ^0.8.19;
   
   contract MessageBoard {
      struct Message {
          string content;
          address sender;
          uint256 bidAmount;
          uint256 timestamp;
          bytes32 messageId;
      }
   
      Message[] public messages;
      uint256 public constant MAX_MESSAGES = 100;
      uint256 public constant DECAY_INTERVAL = 24 hours; // 衰减间隔：24小时
      uint256 public constant DECAY_RATE = 50; // 衰减率：50%
   
      uint256 public lastMessageTimestamp; // 最后一条留言的时间戳
   
      event MessageAdded(
          bytes32 messageId,
          string content,
          address sender,
          uint256 bidAmount,
          uint256 timestamp
      );
   
      /**
       * @dev 获取当前能进入前100名的最低竞价
       * @return 最低竞价金额，如果留言数量不足100，则返回0
       */
      function getMinimumBidForTop100() public view returns (uint256) {
          if (messages.length < MAX_MESSAGES) {
              // 如果留言数量不足100，任何大于0的竞价都能进入前100
              return 0;
          }
   
          // 获取第100条留言的原始竞价
          uint256 originalBid = messages[MAX_MESSAGES - 1].bidAmount;
   
          // 如果最后一条留言时间为0，说明还没有留言，返回0
          if (lastMessageTimestamp == 0) {
              return originalBid;
          }
   
          // 计算自最后一条留言以来经过的时间
          uint256 timeElapsed = block.timestamp - lastMessageTimestamp;
   
          // 如果经过的时间小于衰减间隔，返回原始竞价
          if (timeElapsed < DECAY_INTERVAL) {
              return originalBid;
          }
   
          // 计算经过了多少个衰减周期
          uint256 decayPeriods = timeElapsed / DECAY_INTERVAL;
   
          // 计算衰减后的竞价
          uint256 decayedBid = originalBid;
          for (uint256 i = 0; i < decayPeriods; i++) {
              // 每次衰减50%
              decayedBid = decayedBid * (100 - DECAY_RATE) / 100;
   
              // 防止衰减到0以下
              if (decayedBid == 0) {
                  break;
              }
          }
   
          return decayedBid;
      }
   
      function addMessage(string calldata _content, bytes32 _messageId) external payable {
          require(msg.value > 0, "Bid amount must be greater than 0");
   
          // 检查当前竞价是否大于等于进入前100名的最低竞价
          uint256 minimumBid = getMinimumBidForTop100();
          require(msg.value > minimumBid, "Bid amount must be greater than the current minimum bid for top 100");
   
          Message memory newMessage = Message({
              content: _content,
              sender: msg.sender,
              bidAmount: msg.value,
              timestamp: block.timestamp,
              messageId: _messageId
          });
   
          // 插入排序，按竞价金额降序
          uint256 i = messages.length;
          messages.push(newMessage);
   
          while (i > 0 && messages[i - 1].bidAmount < newMessage.bidAmount) {
              messages[i] = messages[i - 1];
              i--;
          }
   
          if (i != messages.length - 1) {
              messages[i] = newMessage;
          }
   
          // 只保留前100条留言
          if (messages.length > MAX_MESSAGES) {
              messages.pop();
          }
   
          // 更新最后一条留言的时间戳
          lastMessageTimestamp = block.timestamp;
   
          emit MessageAdded(
              _messageId,
              _content,
              msg.sender,
              msg.value,
              block.timestamp
          );
      }
   
      function getMessages() external view returns (Message[] memory) {
          return messages;
      }
   
      /**
       * @dev 分页获取留言
       * @param _page 页码，从1开始
       * @param _pageSize 每页数量
       * @return 分页后的留言数组
       */
      function getMessagesPaginated(uint256 _page, uint256 _pageSize) external view returns (Message[] memory) {
          require(_page > 0, "Page must be greater than 0");
          require(_pageSize > 0, "Page size must be greater than 0");
   
          uint256 totalMessages = messages.length;
          uint256 startIndex = (_page - 1) * _pageSize;
   
          // 如果起始索引大于等于总留言数，返回空数组
          if (startIndex >= totalMessages) {
              return new Message[](0);
          }
   
          // 计算结束索引
          uint256 endIndex = startIndex + _pageSize;
          if (endIndex > totalMessages) {
              endIndex = totalMessages;
          }
   
          // 创建结果数组
          uint256 resultSize = endIndex - startIndex;
          Message[] memory result = new Message[](resultSize);
   
          // 填充结果数组
          for (uint256 i = 0; i < resultSize; i++) {
              result[i] = messages[startIndex + i];
          }
   
          return result;
      }
   
      function getMessageCount() external view returns (uint256) {
          return messages.length;
      }
   
      // 允许合约接收ETH
      receive() external payable {}
   
      // 允许合约接收ETH（当调用不存在的函数时）
      fallback() external payable {}
   }

3.3 编译和测试合约

1. 编译合约：

   npx hardhat compile

2. 编写测试文件：

   mkdir -p test
   touch test/MessageBoard.test.js

3. 编写测试代码：

   const { expect } = require("chai");
   const { ethers } = require("hardhat");
   
   describe("MessageBoard", function () {
    let MessageBoard;
    let messageBoard;
    let owner;
    let addr1;
   
    beforeEach(async function () {
      [owner, addr1] = await ethers.getSigners();
      MessageBoard = await ethers.getContractFactory("MessageBoard");
      messageBoard = await MessageBoard.deploy();
      await messageBoard.deployed();
    });
   
    it("Should add a message", async function () {
      const content = "Hello, Trustivon!";
      const messageId = ethers.utils.formatBytes32String("test-1");
      const bidAmount = ethers.utils.parseEther("0.1");
   
      await expect(
        messageBoard.addMessage(content, messageId, { value: bidAmount })
      )
        .to.emit(messageBoard, "MessageAdded")
        .withArgs(messageId, content, owner.address, bidAmount, expect.any(BigInt));
   
      const messages = await messageBoard.getMessages();
      expect(messages.length).to.equal(1);
      expect(messages[0].content).to.equal(content);
      expect(messages[0].sender).to.equal(owner.address);
    });
   });

4. 运行测试：

   npx hardhat test

3.4 部署合约

1. 创建部署脚本：

   mkdir -p scripts
   touch scripts/deploy.js

2. 编写部署代码：

   const { ethers } = require("hardhat");
   
   async function main() {
    const [deployer] = await ethers.getSigners();
   
    console.log("Deploying contracts with the account:", deployer.address);
    console.log("Account balance:", (await deployer.getBalance()).toString());
   
    const MessageBoard = await ethers.getContractFactory("MessageBoard");
    const messageBoard = await MessageBoard.deploy();
   
    await messageBoard.deployed();
   
    console.log("MessageBoard contract deployed to:", messageBoard.address);
   }
   
   main()
    .then(() => process.exit(0))
    .catch((error) => {
      console.error(error);
      process.exit(1);
    });

3. 配置Trustivon网络：

   • 创建.env文件：

     touch .env

   • 添加配置：

     PRIVATE_KEY=your-private-key
     TRUSTIVON_RPC_URL=https://rpc.trustivon.com

   • 修改hardhat.config.js，添加Trustivon网络配置

4. 部署合约到Trustivon测试网：

   npx hardhat run scripts/deploy.js --network trustivon

4. 前端开发

4.1 初始化React项目

1. 创建前端目录：

   npx create-react-app frontend
   cd frontend
   npm install web3 @web3-react/core @web3-react/injected-connector

2. 创建合约ABI目录：

   mkdir -p src/contracts

3. 复制合约ABI：

   cp ../artifacts/contracts/MessageBoard.sol/MessageBoard.json src/contracts/

4.2 编写前端代码

1. 创建Web3连接组件：

   mkdir -p src/components
   touch src/components/Web3Provider.js

2. 编写Web3连接代码：

   import React, { createContext, useContext, useEffect, useState } from 'react';
   import { InjectedConnector } from '@web3-react/injected-connector';
   import Web3 from 'web3';
   
   const Web3Context = createContext();
   
   export const useWeb3 = () => useContext(Web3Context);
   
   export const Web3Provider = ({ children }) => {
    const [web3, setWeb3] = useState(null);
    const [account, setAccount] = useState(null);
    const [networkId, setNetworkId] = useState(null);
    const [loading, setLoading] = useState(true);
   
    const connector = new InjectedConnector({
      supportedChainIds: [19478], // Trustivon测试网链ID
    });
   
    const connectWallet = async () => {
      try {
        const accounts = await connector.activate();
        setAccount(accounts[0]);
      } catch (error) {
        console.error('Failed to connect wallet:', error);
      }
    };
   
    useEffect(() => {
      const initWeb3 = async () => {
        try {
          if (window.ethereum) {
            const web3Instance = new Web3(window.ethereum);
            setWeb3(web3Instance);
   
            const network = await web3Instance.eth.net.getId();
            setNetworkId(network);
   
            const accounts = await web3Instance.eth.getAccounts();
            if (accounts.length > 0) {
              setAccount(accounts[0]);
            }
          }
        } catch (error) {
          console.error('Failed to initialize Web3:', error);
        } finally {
          setLoading(false);
        }
      };
   
      initWeb3();
   
      // 监听账户变化
      window.ethereum?.on('accountsChanged', (accounts) => {
        setAccount(accounts[0]);
      });
   
      // 监听网络变化
      window.ethereum?.on('chainChanged', (chainId) => {
        setNetworkId(parseInt(chainId, 16));
      });
    }, []);
   
    const value = {
      web3,
      account,
      networkId,
      loading,
      connectWallet,
    };
   
    return <Web3Context.Provider value={value}>{children}</Web3Context.Provider>;
   };

3. 创建留言板组件：

   touch src/components/MessageBoard.js

4. 编写留言板代码：

   import React, { useState, useEffect } from 'react';
   import { useWeb3 } from './Web3Provider';
   import contractABI from '../contracts/MessageBoard.json';
   
   const CONTRACT_ADDRESS = 'your-contract-address'; // 替换为你的合约地址
   
   const MessageBoard = () => {
    const { web3, account, connectWallet } = useWeb3();
    const [messages, setMessages] = useState([]);
    const [content, setContent] = useState('');
    const [bidAmount, setBidAmount] = useState('0.1');
    const [loading, setLoading] = useState(false);
   
    const contract = web3 && new web3.eth.Contract(contractABI.abi, CONTRACT_ADDRESS);
   
    const fetchMessages = async () => {
      if (!contract) return;
      try {
        const result = await contract.methods.getMessages().call();
        setMessages(result);
      } catch (error) {
        console.error('Failed to fetch messages:', error);
      }
    };
   
    useEffect(() => {
      fetchMessages();
    }, [contract]);
   
    const addMessage = async (e) => {
      e.preventDefault();
      if (!contract || !account) return;
   
      setLoading(true);
      try {
        const messageId = web3.utils.sha3(Date.now().toString());
        const value = web3.utils.toWei(bidAmount, 'ether');
   
        await contract.methods
          .addMessage(content, messageId)
          .send({ from: account, value });
   
        setContent('');
        setBidAmount('0.1');
        fetchMessages();
      } catch (error) {
        console.error('Failed to add message:', error);
      } finally {
        setLoading(false);
      }
    };
   
    if (!account) {
      return (
        <div className="flex justify-center items-center h-screen">
          <button
            onClick={connectWallet}
            className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
          >
            Connect Wallet
          </button>
        </div>
      );
    }
   
    return (
      <div className="container mx-auto p-4">
        <h1 className="text-3xl font-bold mb-6 text-center">链上留言板</h1>
   
        <form onSubmit={addMessage} className="mb-8">
          <div className="mb-4">
            <label className="block text-sm font-medium mb-2">留言内容</label>
            <textarea
              value={content}
              onChange={(e) => setContent(e.target.value)}
              className="w-full p-2 border border-gray-300 rounded"
              rows="3"
              required
            />
          </div>
          <div className="mb-4">
            <label className="block text-sm font-medium mb-2">竞价金额 (TC)</label>
            <input
              type="number"
              value={bidAmount}
              onChange={(e) => setBidAmount(e.target.value)}
              className="w-full p-2 border border-gray-300 rounded"
              step="0.1"
              min="0.1"
              required
            />
          </div>
          <button
            type="submit"
            className="w-full py-2 bg-green-500 text-white rounded hover:bg-green-600"
            disabled={loading}
          >
            {loading ? '提交中...' : '提交留言'}
          </button>
        </form>
   
        <div className="space-y-4">
          <h2 className="text-2xl font-bold mb-4">留言列表</h2>
          {messages.length === 0 ? (
            <p className="text-center text-gray-500">暂无留言</p>
          ) : (
            messages.map((msg, index) => (
              <div key={index} className="border border-gray-300 rounded p-4">
                <div className="flex justify-between items-center mb-2">
                  <span className="font-bold">{msg.sender}</span>
                  <span className="text-sm text-gray-500">
                    {new Date(msg.timestamp * 1000).toLocaleString()}
                  </span>
                </div>
                <p className="mb-2">{msg.content}</p>
                <div className="text-right text-sm text-blue-600">
                  竞价: {web3.utils.fromWei(msg.bidAmount, 'ether')} TC
                </div>
              </div>
            ))
          )}
        </div>
      </div>
    );
   };
   
   export default MessageBoard;

5. 更新App.js：

   import React from 'react';
   import './App.css';
   import { Web3Provider } from './components/Web3Provider';
   import MessageBoard from './components/MessageBoard';
   
   function App() {
    return (
      <Web3Provider>
        <div className="App">
          <MessageBoard />
        </div>
      </Web3Provider>
    );
   }
   
   export default App;

4.3 运行前端应用

1. 启动前端开发服务器：

   npm start

2. 在浏览器中访问 http://localhost:3000

3. 连接MetaMask钱包

4. 测试留言功能：

   • 输入留言内容
   • 设置竞价金额
   • 提交留言
   • 查看留言列表

5. 部署和上线

5.1 构建前端应用

1. 构建生产版本：

   npm run build

2. 部署到静态网站托管服务（如Vercel、Netlify等）

5.2 验证和测试

1. 在浏览器中访问部署后的网站
2. 测试所有功能
3. 确保与MetaMask正常交互
4. 检查交易是否正确上链

6. 总结和扩展

6.1 开发总结

通过本教程，你已经学会了：

• 搭建dApp开发环境
• 编写和部署智能合约
• 开发React前端应用
• 连接Web3和MetaMask
• 与智能合约交互

6.2 扩展建议

你可以进一步扩展这个dApp：

• 添加用户认证和个人中心
• 实现留言编辑和删除功能
• 添加留言点赞和评论功能
• 实现留言搜索和筛选
• 添加链上身份验证
• 优化前端UI/UX设计

6.3 学习资源

• Solidity官方文档
• Hardhat文档
• Web3.js文档
• React官方文档
• MetaMask文档

7. 常见问题

7.1 无法连接MetaMask

• 确保MetaMask已安装并解锁
• 确保已添加Trustivon测试网络
• 刷新页面后重试

7.2 交易失败

• 确保钱包中有足够的测试代币
• 检查Gas费用设置
• 查看MetaMask交易记录中的错误信息

7.3 留言不显示

• 检查合约地址是否正确
• 确保网络连接正常
• 刷新页面后重试

8. 社区支持

• Trustivon GitHub
• Trustivon官方网站
• Trustivon开发者文档
• Telegram技术支持

恭喜你完成了第一个dApp的开发！继续学习和探索，你将能够构建更复杂和强大的去中心化应用。

线上预览：https://eternal.trustivon.com/ GitHub开源：https://github.com/Trustivon/eternal-message-dapp