Truffle Suite 是一个用于构建以太坊 DApps 的开发框架。它包括 Truffle、Ganache、Drizzle 等工具,可以帮助开发者轻松地编写、测试和部署智能合约。
在本文中,我们将介绍如何使用 Truffle Suite 构建一个简单的 DApp,并演示如何使用 Metamask 浏览器插件与 DApp 进行交互。我们将假设你已经熟悉 Solidity 语言和 Truffle 开发框架。
1.创建智能合约
首先,我们需要创建一个智能合约。在这里,我们将创建一个名为 SimpleStorage 的合约,该合约允许用户设置和获取一个整数值。
打开命令行窗口,进入你想要创建项目的目录,运行以下命令:
truffle init
然后,创建一个名为 SimpleStorage.sol 的文件,并复制以下代码:
pragma solidity ^0.8.0;
contract SimpleStorage {
uint256 private _value;
function setValue(uint256 value) public {
_value = value;
}
function getValue() public view returns (uint256) {
return _value;
}
}
该合约定义了一个名为 SimpleStorage 的合约,其中包含一个私有变量 _value 和两个公共函数 setValue 和 getValue。setValue 函数接受一个 uint256 类型的值,并将其存储在 _value 变量中。getValue 函数返回当前 _value 变量的值。
2.部署智能合约
接下来,我们需要部署我们的智能合约。在命令行窗口中,运行以下命令:
truffle migrate
这将使用默认的本地以太坊节点部署我们的智能合约。
3.创建前端应用程序
现在,我们可以创建我们的前端应用程序。在命令行窗口中,运行以下命令:
npm init -y
npm install --save web3@1.0.0-beta.34
然后,创建一个名为 index.html 的文件,并复制以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SimpleStorage DApp</title>
</head>
<body>
<h1>SimpleStorage DApp</h1>
<form id="setForm">
<label for="value">Value:</label>
<input type="number" id="value" name="value" />
<button type="submit">Set Value</button>
</form>
<p id="getValue"></p>
<script src="./index.js"></script>
</body>
</html>
该代码定义了一个简单的 HTML 页面,其中包含一个表单和一个段落元素。表单用于设置新的值,段落元素用于显示当前值。
4.创建 JavaScript 文件
接下来,我们需要创建一个名为 index.js 的 JavaScript 文件,并复制以下代码:
const Web3 = require('web3');
window.addEventListener('load', async () => {
if (typeof web3 !== 'undefined') {
window.web3 = new Web3(web3.currentProvider);
} else {
window.web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
}
const contractAddress = '0x...'; // 这里填写部署后的智能合约地址
const abi = [
{
constant: false,
inputs: [{ name: 'value', type: 'uint256' }],
name: 'setValue',
outputs: [],
payable: false,
stateMutability: 'nonpayable',
type: 'function',
},
{
constant: true,
inputs: [],
name: 'getValue',
outputs: [{ name: '', type: 'uint256' }],
payable: false,
stateMutability: 'view',
type: 'function',
},
];
const simpleStorage = new web3.eth.Contract(abi, contractAddress);
const setForm = document.getElementById('setForm');
setForm.addEventListener('submit', async (event) => {
event.preventDefault();
const value = document.getElementById('value').value;
await simpleStorage.methods.setValue(value).send({ from: web3.eth.defaultAccount });
alert('Value set successfully!');
});
const getValueElement = document.getElementById('getValue');
setInterval(async () => {
const value = await simpleStorage.methods.getValue().call();
getValueElement.textContent = `Current value: ${value}`;
}, 1000);
});
该代码使用 Web3 库连接到以太坊网络,并获取我们部署的智能合约的实例。它还定义了一个表单事件监听器,用于设置新值,并在成功时显示警报消息。最后,它还定期检索当前值,并将其显示在段落元素中。
5.在浏览器中运行 DApp
现在,我们可以在浏览器中运行我们的 DApp。在命令行窗口中,运行以下命令:
npm install -g http-server
http-server
这将启动一个本地 HTTP 服务器,并在浏览器中打开 http://localhost:8080/。你应该能够看到一个简单的表单和一个段落元素,用于设置和显示当前值。
6.使用 Metamask 浏览器插件与 DApp 进行交互
最后,我们可以使用 Metamask 浏览器插件与我们的 DApp 进行交互。确保你已经安装了 Metamask,并创建了一个 Rinkeby 测试网络账户。
————————————————————本初子午线——————————————————
下面,我们将介绍如何使用 Truffle Suite 来构建一个简单的投票应用程序。该应用程序允许用户创建新的投票,并为每个投票添加选项。其他用户可以投票并查看当前投票结果。
1. 安装 Truffle Suite
首先,我们需要安装 Truffle Suite。打开命令行窗口,运行以下命令:
npm install -g truffle
2. 创建 Truffle 项目
接下来,我们将使用 Truffle 来创建一个新的项目。在命令行窗口中,进入你想要创建项目的目录,然后运行以下命令:
truffle init
这将创建一个新的 Truffle 项目,并生成一些默认文件和目录。
3. 编写智能合约
在 Truffle 项目中,我们可以在 contracts 目录中编写智能合约。为了创建投票应用程序,我们将编写一个名为 Voting 的合约。打开 contracts/Voting.sol 文件,复制以下代码:
solidity
pragma solidity ^0.5.0;
contract Voting {
mapping (bytes32 => uint256) public votes;
function vote(bytes32 option) public {
votes[option] += 1;
}
}
该合约定义了一个名为 Voting 的合约,其中包含一个名为 votes 的映射。该映射将选项名称映射到投票数。
合约还定义了一个名为 vote 的公共函数,该函数接受一个名为 option 的字节数组,并将该选项的投票数加一。
4. 编写部署脚本
在 Truffle 项目中,我们可以使用 JavaScript 脚本来部署智能合约。打开 migrations/2_deploy_contracts.js 文件,复制以下代码:
const Voting = artifacts.require("Voting");
module.exports = function(deployer) {
deployer.deploy(Voting);
};
该脚本定义了一个名为 Voting 的合约,并在部署时创建该合约的实例。
5. 编译和部署智能合约
现在,我们可以使用 Truffle 来编译和部署智能合约。在命令行窗口中,运行以下命令:
truffle compile
这将编译我们的智能合约,并生成一些 ABI 和字节码文件。
接下来,运行以下命令来部署智能合约:
truffle migrate
这将部署我们的智能合约,并将其保存在本地的以太坊网络中。
6. 创建投票 DApp
现在,我们可以使用 Truffle 来创建一个简单的投票 DApp。在命令行窗口中,运行以下命令:
truffle unbox react
这将为我们创建一个使用 React 和 Web3.js 的基本 DApp。
接下来,打开 src/App.js 文件,复制以下代码:
import React, { Component } from 'react';
import VotingContract from './contracts/Voting.json';
import getWeb3 from './getWeb3';
class App extends Component {
state = {
web3: null,
accounts: null,
contract: null,
options: [],
selectedOption: null,
voted: false,
loading: true,
};
componentDidMount = async () => {
try {
const web3 = await getWeb3();
const accounts = await web3.eth.getAccounts();
const networkId = await web3.eth.net.getId();
const deployedNetwork = VotingContract.networks[networkId];
const contract = new web3.eth.Contract(
VotingContract.abi,
deployedNetwork && deployedNetwork.address,
);
const options = ['Option 1', 'Option 2', 'Option 3'];
this.setState({ web3, accounts, contract, options }, this.listenToEvents);
} catch (error) {
console.error(error);
} finally {
this.setState({ loading: false });
}
};
vote = async (option) => {
const { accounts, contract } = this.state;
await contract.methods.vote(option).send({ from: accounts[0] });
this.setState({ voted: true });
};
listenToEvents = () => {
const { contract } = this.state;
contract.events.Vote({}, (error, event) => {
console.log(event);
});
};
render() {
const { web3, accounts, contract, options, selectedOption, voted, loading } = this.state;
if (loading) {
return <div>Loading...</div>;
}
return (
<div>
<h1>Voting DApp</h1>
<p>Connected to Ethereum network with address: {accounts[0]}</p>
<h2>Options:</h2>
<ul>
{options.map((option) => (
<li key={option}>
{option}{' '}
{!voted && (
<button onClick={() => this.vote(option)}>Vote</button>
)}
</li>
))}
</ul>
{voted && (
<p>You have voted for {selectedOption}.</p>
)}
</div>
);
}
}
export default App;
该代码将创建一个名为 Voting 的 DApp,其中包含一个选项列表和一个投票按钮。当用户点击投票按钮时,DApp 将调用智能合约的 vote 函数,并将选项名称作为参数传递。
此外,该代码还监听了智能合约的 Vote 事件,并在控制台中打印出事件数据。
7. 运行投票 DApp
最后,我们可以使用 Truffle 来运行我们的投票 DApp。在命令行窗口中,运行以下命令:
npm run start
这将启动我们的 DApp,并在浏览器中打开它。现在,我们可以尝试创建新的投票并进行投票。
总之,Truffle Suite 是一个非常有用的开发框架,可以帮助我们轻松地构建以太坊 DApps。在本文中,我们使用 Truffle 和 React 来创建了一个简单的投票应用程序,并演示了如何编译、部署和运行智能合约。如果你正在进行以太坊 DApp 开发,那么 Truffle Suite 绝对是一个值得尝试的工具。