11. 建立你的第一个Web3项目

ops/2024/9/18 6:20:58/ 标签: web3

11. 建立你的第一个Web3项目

在这一部分，我们将带你一步步地建立一个简单的Web3项目，从环境搭建到智能合约的创建与部署，再到开发一个去中心化应用（dApp）并与智能合约交互。这是你迈向Web3开发的第一步。

1. 环境搭建与工具准备

在开始Web3开发之前，需要搭建适合的开发环境，并安装一些常用的开发工具。

1.1 安装Node.js和npm

Node.js是一个基于JavaScript的运行时环境，npm是其默认的包管理器。在Web3开发中，Node.js和npm是必不可少的工具。

安装Node.js：
- 访问Node.js官网并下载最新的LTS版本。
- 安装后，通过命令行检查安装是否成功：
```
node -v
npm -v
```

1.2 安装Truffle和Ganache

Truffle是一个开发、测试和部署智能合约的框架，Ganache是一个本地的以太坊区块链模拟器，用于在本地测试智能合约。

安装Truffle：
```
npm install -g truffle
```
安装Ganache：
- 你可以通过Ganache官网下载桌面版，或通过命令行安装CLI版：
```
npm install -g ganache-cli
```

1.3 安装MetaMask

MetaMask是一个以太坊钱包，允许你在浏览器中与dApp交互。它充当你的数字钱包，并能连接到本地或远程的以太坊网络。

安装MetaMask：
- 访问MetaMask官网，下载并安装适用于你浏览器的扩展插件。
- 安装后，创建一个新钱包并保存助记词。

2. 创建和部署一个简单的智能合约

接下来，我们将编写一个简单的智能合约，并将其部署到本地的以太坊区块链（Ganache）上。

2.1 初始化Truffle项目

首先，我们需要创建一个新的Truffle项目。

创建项目文件夹：

mkdir my-first-web3-project
cd my-first-web3-project

初始化Truffle项目：
```
truffle init
```

2.2 编写智能合约

我们将编写一个简单的智能合约，用于存储和检索一条消息。

创建智能合约文件：

在contracts文件夹下创建一个名为SimpleStorage.sol的文件，内容如下：

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;contract SimpleStorage {string private message;// 设置消息function setMessage(string memory newMessage) public {message = newMessage;}// 获取消息function getMessage() public view returns (string memory) {return message;}
}

编译智能合约：
- 在项目根目录下运行以下命令来编译合约：
```
truffle compile
```

2.3 部署智能合约

将智能合约部署到本地的以太坊区块链（Ganache）上。

配置网络：

在truffle-config.js文件中，配置本地的Ganache网络：

module.exports = {networks: {development: {host: "127.0.0.1",     // 本地主机地址port: 7545,            // Ganache默认端口network_id: "*",       // 匹配任何网络ID},},// 其他配置...
};

编写部署脚本：

在migrations文件夹中创建一个名为2_deploy_contracts.js的文件，内容如下：

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

启动Ganache：
- 打开Ganache应用或通过命令行启动：
```
ganache-cli
```
部署智能合约：
- 在项目根目录下运行以下命令，将合约部署到Ganache：
```
truffle migrate
```
- 成功部署后，Truffle会显示智能合约的部署地址。

3. 开发一个dApp并与智能合约交互

现在，我们将开发一个简单的dApp，用户可以通过该应用与部署的智能合约进行交互。

3.1 设置前端开发环境

在项目中创建一个client文件夹，用于存放前端代码。

初始化前端项目：
```
mkdir client
cd client
npm init -y
```

安装依赖：

安装Web3.js库和其他前端依赖：

npm install web3
npm install lite-server --save-dev

创建前端文件：

在client文件夹中创建一个index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My First Web3 dApp</title>
</head>
<body><h1>Simple Storage dApp</h1><input type="text" id="messageInput" placeholder="Enter a message" /><button id="setMessageButton">Set Message</button><p>Stored Message: <span id="storedMessage"></span></p><script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script><script src="app.js"></script>
</body>
</html>

创建app.js文件，用于与智能合约进行交互，内容如下：

const web3 = new Web3(Web3.givenProvider || "http://localhost:7545");const contractAddress = "YOUR_CONTRACT_ADDRESS";  // 部署的合约地址
const contractABI = [// ABI goes here...
];const contract = new web3.eth.Contract(contractABI, contractAddress);document.getElementById('setMessageButton').onclick = async () => {const message = document.getElementById('messageInput').value;const accounts = await web3.eth.getAccounts();await contract.methods.setMessage(message).send({ from: accounts[0] });alert('Message stored successfully');
};const loadMessage = async () => {const message = await contract.methods.getMessage().call();document.getElementById('storedMessage').innerText = message;
};loadMessage();

将部署时生成的智能合约ABI复制到app.js中的contractABI变量中，并替换contractAddress为实际的合约地址。

3.2 运行dApp

启动开发服务器：
- 在client文件夹中，运行以下命令启动轻量级开发服务器：
```
npx lite-server
```
在浏览器中访问dApp：
- 浏览器将自动打开并显示你的dApp。你可以在输入框中输入消息并点击“Set Message”按钮，将消息存储到智能合约中。
与智能合约交互：
- 输入消息并提交后，dApp会与智能合约进行交互，将消息存储到区块链中。页面将自动显示存储的消息。