以太坊应用开发入门到实践,全面教程指南

// 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;
    }
}

truffle compile

智能合约测试

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