从零开始,区块链应用软件搭建全教程

• 操作系统：Windows, macOS, Linux 均可，推荐Linux或macOS,开发体验更佳。
• Node.js：JavaScript运行时环境，建议LTS版本（如v16, v18）,用于运行前端框架和开发工具。
• 代码编辑器/IDE：Visual Studio Code（推荐，配合Solidity插件）、WebStorm、Remix IDE（在线，适合智能合约初学者）。
• Git：版本控制工具,用于管理代码。

区块链应用软件搭建步骤（以太坊为例）

以下步骤将以以太坊生态和Hardhat + React + Ethers.js为例进行讲解：

项目初始化与框架搭建

1. 创建项目目录：

   my-blockchain-app
   cd my-blockchain-app

2. 初始化Node.js项目：

   npm init -y

3. 安装Hardhat：

   npm install --save-dev hardhat

4. 初始化Hardhat项目：

   npx hardhat

   按照提示选择"Create a JavaScript project"（或TypeScript），并回答相关问题，Hardhat会创建基本的项目结构，包括contracts/, scripts/, test/等目录。

5. 创建前端应用： 我们可以使用Create React App来快速搭建前端：

   npx create-react-app frontend
   cd frontend
   npm install ethers
   cd ..

编写智能合约

1. 打开contracts/目录，Hardhat默认会创建一个Lock.sol合约，你可以基于此修改或创建新的合约文件，例如MyToken.sol或Voting.sol。

2. 编写合约代码：使用Solidity语言编写合约逻辑,一个简单的存储合约：

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

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

   npx hardhat compile

   Hardhat会编译合约，并在artifacts/目录下生成ABI（应用二进制接口）和字节码文件。

测试智能合约

1. 在test/目录下编写测试脚本（使用JavaScript/TypeScript和Mocha/Chai等框架）。
2. 运行测试：

   npx hardhat test

   测试是确保合约逻辑正确性的关键步骤。

部署智能合约

1. 编写部署脚本：在scripts/目录下创建部署脚本，如deploy.js：

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

2. 配置网络：在hardhat.config.js中配置测试网络或本地网络的RPC URL和账户信息,连接到本地Ganache：

   require("@nomicfoundation/hardhat-toolbox");
   require('dotenv').config();
   /** @type import('hardhat/config').HardhatUserConfig */
   module.exports = {
     solidity: "0.8.9",
     networks: {
       ganache: {
         url: "http://127.0.0.1:7545", // Ganache默认RPC地址
         accounts: ['0x...'] // 你的Ganache账户私钥，或从.env文件读取
       }
     }
   };

3. 运行部署脚本：

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

   部署成功后，会输出合约地址，记下这个地址,前端需要用到。

开发前端界面与交互

1. 打开frontend/目录。

2. 修改src/App.js或其他组件,创建用户界面。

3. 集成Ethers.js：在组件中引入Ethers.js，连接到区块链网络,读取合约数据或调用合约方法。

   import { useState, useEffect } from 'react';
   import { ethers } from 'ethers';
   import SimpleStorageAbi from '../contracts/artifacts/contracts/SimpleStorage.sol/SimpleStorage.json'; // 导入ABI
   function App() {
     const [contract, setContract] = useState(null);
     const [storedData, setStoredData] = useState(null);
     const [inputValue, setInputValue] = useState('');
     useEffect(() => {
       const connectToBlockchain = async () => {
         if (window.ethereum) {
           try {
             await window.ethereum.request({ method: 'eth_requestAccounts' });
             const provider = new ethers.providers.Web3Provider(window.ethereum);
             const signer = provider.getSigner();
             const contractAddress = "0x..."; // 替换为你的合约地址
             const contractInstance = new ethers.Contract(contractAddress, SimpleStorageAbi.abi, signer);
             setContract(contractInstance);
             const data = await contractInstance.get();
             setStoredData(data.toString());
           } catch (error) {
             console.error("Error connecting to blockchain:", error);
           }
         } else {
           alert("Please install MetaMask!");
         }
       };
       connectToBlockchain();
     }, []);
     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 setting data:", error);
         }
       }
     };
     return (
       <div>
         <h1>Simple Storage DApp</h1>
         <p>Stored Data: {storedData}</p>
         <input
           type="number"
           value={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
           placeholder="Enter a number"
         />
         <button onClick={handleSetData}>