本文介绍了如何使用Scaffold-ETH 2框架快速搭建去中心化应用(dApp)。详细步骤涵盖了环境设置、智能合约的部署、前端应用的启动以及如何与智能合约进行交互。此外,作者还提到如何将Scaffold-ETH与QuickNode集成以在主网或测试网部署合约,提供了具体的操作指导和相关命令。
开发应用程序需要处理多个组件,如前端、后端和数据库。然而,在区块链上开发去中心化应用程序 (dApp) 还增加了一些额外的层次,比如智能合约和与区块链进行通信(即读/写)所需的基础设施。
如果你是一名希望开发去中心化区块链应用程序的开发者,管理这些组件可能变得非常繁琐。Scaffold-ETH 提供了一个应用程序包,可以让你快速入门。在本指南中,我们将学习如何设置和使用最新版本的 Scaffold-ETH 2。
尽管 Scaffold-ETH 的新仓库名为 "Scaffold-ETH 2",但为了避免混淆,本文将全程使用 Scaffold-ETH 的名称。
Scaffold-ETH Github 仓库可以看作理解 dApps 工作原理的基础框架。它附带了一些工具,使以太坊 (和 EVM) dApp 的构建过程更快、更容易。Scaffold-ETH 中使用的工具组合使你能够为智能合约提供前端。开发所需的工具堆栈如下:
首先,在开始使用 Scaffold-ETH 之前,你的机器需要安装 Yarn、Node.js 和 Git,具体要求见你将需要的部分。
信息
为了设置环境,我们需要三个不同的终端窗口。
现在,打开你的第一个终端窗口,进入你希望克隆 Scaffold-ETH 仓库的目录,并按照以下说明进行操作。
git clone https://github.com/scaffold-eth/scaffold-eth-2.git
cd scaffold-eth-2
yarn install
这些命令将克隆该仓库,使 scaffold-eth-2 成为你的工作目录,并安装所有必要的包。
点击此处了解更多关于文件夹结构的信息
顶级结构
packages
目录中的内容
hardhat
nextjs
Scaffold-ETH 附带一个演示合约和前端。让我们尝试运行这个合约并了解它在底层是如何工作的。
在你的终端/命令提示符窗口中输入以下命令:
yarn chain
此命令启动一个 Hardhat 网络,这是一个用于开发和测试目的的本地以太坊网络。与公共测试网或主网不同,本地网络提供了一个受控环境,将所有交互限制在本地机器。这种设置消除了等待实时网络交易确认的需要,并且不需要获得测试网代币进行部署或测试。通过 Hardhat,开发人员可以快速高效地模拟网络条件、执行交易和与智能合约交互,非常适合快速开发周期。
一旦该过程完成,你将看到类似的信息。请保持此终端窗口运行。
现在,让我们尝试部署合约。YourContract.sol 是一个基本智能合约,在部署时赋予一个拥有者,允许任何人更新存储的消息,无论是否发送以太,并跟踪总共多少次消息被更改以及每个用户的更改次数。如果你想查看或更改它,可以在 /packages/hardhat/contracts 目录中找到演示合约。
在 scaffold-eth-2 目录中打开你的第二个终端窗口,并运行以下命令。
yarn deploy
在这里,我们告诉 Hardhat 将智能合约部署到我们在上一步启动的 Hardhat 本地网络。部署脚本可以在这里找到:_/packages/hardhat/deploy/00_deploy_yourcontract.ts。
当合约被部署时,你将看到如下消息。这将提供你新部署合约的地址和交易哈希。
现在我们已经部署了合约,是时候启动前端应用程序了。为此,请打开指向 scaffold-eth-2 目录的第三个终端窗口,并运行以下命令。
yarn start
这将启动 Next.js 应用程序,该应用程序使用本地网络和已部署的合约。一旦服务器启动,应用程序将在 https://localhost:3000 上运行。
它看起来应如下所示。
恭喜你!你刚刚在本地运行了以太坊区块链,然后将智能合约部署到本地网络,并启动了允许你与已部署智能合约互动的前端。现在,让我们更进一步,检查智能合约的函数并通过前端与这些函数进行交互。
现在我们可以了解一下在应用程序背后工作的演示合约 YourContract.sol。
这个名为 YourContract.sol 的智能合约是一个基本合约,用于演示如何与以太坊区块链交互以改变数据和管理以太。尽管合约中的注释帮助我们了解其功能,但让我们深入探讨 YourContract.sol 以理解其功能。
所有权设置:在合约的 constructor
开头分配一个所有者。这意味着合约创建后,被部署的人或实体会被记录为所有者。这对于确保只有该所有者可以从合约中提取以太至关重要。
存储和更改消息:合约在 greeting
变量中存储一条消息。任何人可以通过调用 setGreeting
函数来更新此消息。如果你希望你的消息被视为“优质”,你可以与消息一起发送一些以太。这演示了如何更新存储在区块链上的数据并与财务交易进行交互。
跟踪交互:合约在每次有人更改 greeting
时进行计数。它有两种方式来实现:
totalCounter
记录任何人更改问候语的总次数。userGreetingCounter
更具体地跟踪每个用户更改问候语的次数。提取以太:由于 withdraw
函数,只有所有者可以从合约中提取以太。该函数使用安全检查 (isOwner
修饰符) 以确保尝试提取以太的人确实是所有者。限制敏感操作仅限授权用户是一个良好的实践。
接收以太:合约还可以直接接收以太,因为它有 receive()
函数。这是一个特殊函数,允许合约直接从交易中接收的以太。
监测事件:每当有人更改 greeting
时,合约会发出 GreetingChange
事件。这对于想要实时跟踪更改的应用程序或服务很有用。它是区块链向外界传达重要更改或发生的操作的一种方式。
使用控制台日志进行调试:在 setGreeting
函数中,有一行将新问候语记录到 Hardhat 控制台。这对于开发人员在测试期间非常有用,但在生产环境中应删除。
packages/hardhat/contracts/YourContract.sol
//SPDX-License-Identifier: MIT
pragma solidity >=0.8.0 <0.9.0;
// 对于调试非常有用。部署到实时网络时请移除。
import "hardhat/console.sol";
// 使用 openzeppelin 继承经过验证的实现(ERC20、ERC721 等)
// import "@openzeppelin/contracts/access/Ownable.sol";
/**
* 一个智能合约,允许更改合约的状态变量并跟踪更改
* 它还允许所有者提取合约中的以太
* @author BuidlGuidl
*/
contract YourContract {
// 状态变量
address public immutable owner;
string public greeting = "Building Unstoppable Apps!!!";
bool public premium = false;
uint256 public totalCounter = 0;
mapping(address => uint) public userGreetingCounter;
// 事件:从智能合约中发出日志的方式,外部方可以监听
event GreetingChange(
address indexed greetingSetter,
string newGreeting,
bool premium,
uint256 value
);
// 构造函数:合约部署时调用一次
// 检查 packages/hardhat/deploy/00_deploy_your_contract.ts
constructor(address _owner) {
owner = _owner;
}
// 修饰符:用于定义在执行函数之前或之后必须满足的一组规则
// 检查 withdraw() 函数
modifier isOwner() {
// msg.sender:预定义变量,表示调用当前函数的账户地址
require(msg.sender == owner, "Not the Owner");
_;
}
/**
* 允许任何人更改合约的状态变量 "greeting" 并增加计数器的函数
*
* @param _newGreeting (string memory) - 新的要保存的问候语
*/
function setGreeting(string memory _newGreeting) public payable {
// 将数据打印到 Hardhat 链控制台。在部署到实时网络时请移除。
console.log(
"Setting new greeting '%s' from %s",
_newGreeting,
msg.sender
);
// 更改状态变量
greeting = _newGreeting;
totalCounter += 1;
userGreetingCounter[msg.sender] += 1;
// msg.value:表示与交易一起发送的以太的数量的内置全局变量
if (msg.value > 0) {
premium = true;
} else {
premium = false;
}
// emit:关键字用于触发事件
emit GreetingChange(msg.sender, _newGreeting, msg.value > 0, 0);
}
/**
* 允许所有者提取合约中所有以太的函数
* 该函数只能由合约的所有者调用,由 isOwner 修饰符定义
*/
function withdraw() public isOwner {
(bool success, ) = owner.call{ value: address(this).balance }("");
require(success, "Failed to send Ether");
}
/**
* 允许合约接收 ETH 的函数
*/
receive() external payable {}
}
现在,是时候看看合约的实际操作了。
在打开应用程序时,你会看到一个钱包部分,提供使用 Burner 钱包进行交易的选项,或连接到你选择的其他外部钱包。重要的是要注意,应用程序使用 Burner 钱包进行用户交互,这与本地 Hardhat 网络生成的账户不同,后者主要用于部署合约。在本地主机上开发和测试时,应用程序提供一个水龙头功能来请求 ETH,确保你有足够的资金与本地 Hardhat 网络上的智能合约进行交互。
首先,将你的钱包连接到应用程序。如果你在本地 Hardhat 环境中,你的地址应该会自动检测并显示出来。
如果你需要测试用的 ETH,可以使用 Grab funds from faucet 文本旁边的金钱图标来为本地 Hardhat 网络的余额充值。
导航到 Debug Contracts 部分,在这里你可以与部署到本地网络上的智能合约进行交互。在这里,你可以执行读取和写入操作:
读取操作:这些是读取智能合约状态的函数。你可以在不进行交易的情况下调用它们。例如,检查合约的余额或问候语就是一个读取操作。
写入操作:这些函数更改区块链的状态,并且需要分配一笔交易。例如,使用 setGreeting
函数更改合约中的问候信息就是一个写入操作。当你输入新的问候语并发送时,这将是一次区块链事务。
在任何交易后,调试页面上的信息将相应更新。例如,如果你使用 setGreeting
更改问候语,新的问候语将在交易确认后显示。
此外,在应用程序与智能合约交互后,可以在第一个终端窗口中查看到本地 Hardhat 网络的变化。
现在,看看我们可以多快在 Scaffold-ETH 设置中配置 QuickNode 以将智能合约部署到真实网络,无论是主网还是测试网。
当你准备将智能合约部署到实时以太坊网络(如主网或测试网)时,将 QuickNode 以太坊端点与 Scaffold-ETH 集成是一个无缝的过程。在本指南中,我们将使用 Ethereum Sepolia 测试网。以下是入门的步骤:
为了在实时网络上构建(无论是主网还是测试网),你需要一个 API 端点来连接网络。你可以使用公共节点,也可以部署和管理自己的基础设施;然而,如果你希望拥有更快的响应时间,可以让我们来处理繁重的工作。请在这里注册一个免费账户。
登录后,点击 Create an endpoint,然后选择 Ethereum Sepolia 区块链。
创建你的端点后,复制 HTTP Provider 链接并保持备用,因为你稍后需要它。
你需要使用自己的钱包并拥有一些 ETH 来部署合约并向区块链发送交易。
导航到 QuickNode Multi-Chain Faucet,连接你的钱包或粘贴你的钱包地址。然后,选择 Ethereum 链和 Sepolia 网络,并请求资金。
在 packages/hardhat 目录中找到 .env.example 文件,并将其重命名为 .env。然后,按如下所示修改文件。
将 YOUR_PRIVATE_KEY 和 YOUR_QUICKNODE_HTTP_PROVIDER_URL 占位符替换为实际的私钥和 QuickNode HTTP 提供程序 URL。
packages/hardhat/.env
DEPLOYER_PRIVATE_KEY="YOUR_PRIVATE_KEY"
QUICKNODE_ENDPOINT="YOUR_QUICKNODE_HTTP_PROVIDER_URL"
前往位于 /packages/hardhat 目录下的 hardhat.config.ts 文件。然后,在 networks 属性下找到 Sepolia 网络并按如下所示进行修改。
packages/hardhat/hardhat.config.ts
sepolia: {
url: process.env.QUICKNODE_ENDPOINT,
accounts: [deployerPrivateKey],
}
配置好 QuickNode 端点后,你现在准备好部署合约了。使用以下命令将合约发送到指定的网络。
yarn deploy --network sepolia
你还可以参考这篇如何使用 Hardhat 创建和部署智能合约的指南,了解更多有关 Hardhat 的信息以及如何将 QuickNode 与 Hardhat 配置在一起。
恭喜你达到这一阶段,感谢你耐心阅读!你已经了解了 Scaffold-ETH,如何设置它,以及如何开始使用它进行构建。特别感谢 Austin Griffith 创建 Scaffold-ETH,这个工具帮助我们轻松进入 dApp 开发。有关使用 Scaffold-ETH 的更多详细信息和提示,请查看他们的官方文档。继续构建和探索!
如果你有任何问题或需要进一步的帮助,请随时加入我们的 Discord 服务器,或使用以下表格提供反馈。关注我们在 Twitter (@QuickNode) 和 Telegram 公告频道 的最新动态。
告诉我们 你是否有任何反馈或新主题的请求。我们很乐意听到你的声音。
- 原文链接: quicknode.com/guides/eth...
- 登链社区 AI 助手,为大家转译优秀英文文章,如有翻译不通的地方,还请包涵~
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!