:2026-02-25 7:48 点击:1
区块链技术作为分布式账本技术的代表,凭借其去中心化、不可篡改、透明可追溯等特性,正逐渐渗透到金融、供应链、医疗、版权等众多领域,许多开发者和企业都希望能搭建自己的区块链应用软件(DApp - Decentralized Application),本文将提供一个从零开始的区块链应用软件搭建教程,帮助您理解核心概念并掌握基本实践步骤。
核心理解:区块链应用软件是什么?
在开始搭建之前,我们首先要明确区块链应用软件(DApp)的基本构成:
搭建前准备:环境与工具
开发环境:
区块链环境选择:
核心工具库:
区块链应用软件搭建步骤(以太坊为例)
以下步骤将以以太坊生态和Hardhat + React + Ethers.js为例进行讲解:
项目初始化与框架搭建
创建项目目录:
my-blockchain-app cd my-blockchain-app
初始化Node.js项目:
npm init -y
安装Hardhat:
npm install --save-dev hardhat
初始化Hardhat项目:
npx hardhat
按照提示选择"Create a JavaScript project"(或TypeScript),并回答相关问题,Hardhat会创建基本的项目结构,包括contracts/, scripts/, test/等目录。
创建前端应用: 我们可以使用Create React App来快速搭建前端:
npx create-react-app frontend cd frontend npm install ethers cd ..
编写智能合约
打开contracts/目录,Hardhat默认会创建一个Lock.sol合约,你可以基于此修改或创建新的合约文件,例如MyToken.sol或Voting.sol。
编写合约代码:使用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;
}
}
编译合约: 在项目根目录运行:
npx hardhat compile
Hardhat会编译合约,并在artifacts/目录下生成ABI(应用二进制接口)和字节码文件。
测试智能合约
test/目录下编写测试脚本(使用JavaScript/TypeScript和Mocha/Chai等框架)。npx hardhat test
测试是确保合约逻辑正确性的关键步骤。
部署智能合约
编写部署脚本:在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);
});
配置网络:在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文件读取
}
}
};
运行部署脚本:
npx hardhat run scripts/deploy.js --network ganache
部署成功后,会输出合约地址,记下这个地址,前端需要用到。
开发前端界面与交互
打开frontend/目录。
修改src/App.js或其他组件,创建用户界面。
集成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}>
本文由用户投稿上传,若侵权请提供版权资料并联系删除!