开发环境搭建

1. 安装Node.js和npm：Node.js是一个JavaScript运行时环境，npm是Node.js的包管理器，从Node.js官网下载并安装LTS版本。
2. 安装代码编辑器：推荐使用Visual Studio Code（VS Code），它拥有丰富的插件生态系统，如Solidity语言支持插件。
3. 安装Truffle Suite：
   • Truffle：是最流行的以太坊开发框架之一，提供了智能合约编译、测试、部署等一套完整的开发工具链。
   • 安装命令：npm install -g truffle
4. 安装Ganache：
   • Ganache是一个个人区块链,用于快速开发和测试以太坊应用，它会在本地创建一个模拟的以太坊网络，并提供预设的测试账户和资金。
   • 从Ganache官网下载桌面版，或通过npm安装命令行版本：npm install -g ganache-cli
5. 安装MetaMask：
   • MetaMask是一个浏览器扩展钱包,可以让你在浏览器中与以太坊网络（包括测试网和主网）进行交互，开发时用它来管理测试账户和签名交易。
   • 从MetaMask官网下载并安装浏览器插件。

智能合约开发（以Solidity为例）

Solidity是以太坊最主流的智能合约编程语言,语法类似JavaScript。

1. 创建Truffle项目：

   mkdir my-dapp
   cd my-dapp
   truffle init

   这会创建一个标准的Truffle项目结构,其中contracts目录用于存放智能合约代码。

2. 编写第一个智能合约： 在contracts目录下创建一个SimpleStorage.sol文件：

   // SPDX-License-Identifier: MIT
   pragma solidity ^0.8.0;
   contract SimpleStorage {
       uint256 private storedData;
       function set(uint256 x) public {
           storedData = x;
       }
       function get() public view returns (uint256) {
           return storedData;
       }
   }

3. 编译智能合约： 在项目根目录下运行：

   truffle compile

   编译成功后,合约的ABI（应用程序二进制接口）和字节码会生成在build/contracts目录下。

智能合约测试

Truffle内置了测试框架,支持使用JavaScript或Solidity编写测试用例。

1. 创建测试文件： 在test目录下创建一个simpleStorage.test.js文件：

   const SimpleStorage = artifacts.require("SimpleStorage");
   contract("SimpleStorage", (accounts) => {
       it("should store the value 89.", async () => {
           const simpleStorageInstance = await SimpleStorage.deployed();
           await simpleStorageInstance.set(89, { from: accounts[0] });
           const storedData = await simpleStorageInstance.get();
           assert.equal(storedData, 89, "The value 89 was not stored.");
       });
   });

2. 运行测试： 确保Ganache正在运行，然后执行：

   truffle test

智能合约部署

1. 配置网络： 在truffle-config.js中配置Ganache本地网络：

   module.exports = {
     networks: {
       development: {
         host: "127.0.0.1",     // Localhost (default: none)
         port: 7545,            // Standard Ethereum port (default: none)
         network_id: "*",       // Any network (default: none)
       },
     },
     compilers: {
       solc: {
         version: "0.8.0",    // Fetch exact version from solc-bin (default: truffle's version)
       }
     }
   };

2. 创建迁移脚本： 在migrations目录下创建一个2_deploy_contracts.js文件：

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

3. 部署合约： 运行：

   truffle migrate --network development

   这会将合约部署到Ganache模拟网络上,并生成合约地址。

前端开发与交互

前端通过Web3库与以太坊网络和智能合约进行交互。

1. 创建前端项目：

   npm init -y
   npm install react react-dom web3 ethers
   # 或者使用其他前端框架如Vue, Angular

2. 编写前端代码（以React为例）： 创建一个App.js文件：

   import React, { useState, useEffect } from 'react';
   import { ethers } from 'ethers';
   import SimpleStorage from './contracts/SimpleStorage.json'; // 将build/contracts/SimpleStorage.json复制到项目
   function App() {
     const [contract, setContract] = useState(null);
     const [provider, setProvider] = useState(null);
     const [account, setAccount] = useState(null);
     const [storedData, setStoredData] = useState(null);
     const [inputValue, setInputValue] = useState('');
     useEffect(() => {
       const loadBlockchainData = async () => {
         // 连接到MetaMask
         if (window.ethereum) {
           const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
           const account = accounts[0];
           setAccount(account);
           const provider = new ethers.providers.Web3Provider(window.ethereum);
           setProvider(provider);
           // 部署合约地址（从truffle migrate获取）
           const networkId = await provider.getNetwork();
           const deployedNetwork = SimpleStorage.networks[networkId.toString()];
           const contractInstance = new ethers.Contract(
             deployedNetwork.address,
             SimpleStorage.abi,
             provider.getSigner()
           );
           setContract(contractInstance);
           // 获取初始值
           const data = await contractInstance.get();
           setStoredData(data.toString());
         } else {
           alert('Please install MetaMask!');
         }
       };
       loadBlockchainData();
     }, []);
     const handleSetData = async () => {
       if (contract && inputValue) {
         try {
           const tx = await contract.set(inputValue);
           await tx.wait();
           const data = await contract.get();
           setStoredData(data.toString());
           setInputValue('');
         } catch (error) {
           console.error(error);
         }
       }
     };
     return (
       <div>
         <h1>SimpleStorage DApp</h1>
         <p>Account: {account}</p>
         <p>Stored Data: {storedData}</p>
         <div>
           <input
             type="number"
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
             placeholder="Enter a number"
           />
           <button onClick={handleSetData}>Set Data</button>
         </div>
       </div