以太坊 - Scaffold-ETH 简介 🏗 - Quicknode

概述

开发应用程序需要处理多个组件，如前端、后端和数据库。然而，在区块链上开发去中心化应用程序 (dApp) 还增加了一些额外的层次，比如智能合约和与区块链进行通信（即读/写）所需的基础设施。

如果你是一名希望开发去中心化区块链应用程序的开发者，管理这些组件可能变得非常繁琐。Scaffold-ETH 提供了一个应用程序包，可以让你快速入门。在本指南中，我们将学习如何设置和使用最新版本的 Scaffold-ETH 2。

尽管 Scaffold-ETH 的新仓库名为 "Scaffold-ETH 2"，但为了避免混淆，本文将全程使用 Scaffold-ETH 的名称。

你将需要的

• 已安装的 Node.js (>= v18.17)
• Yarn (v1 或 v2+)
• Git
• 终端/CLI
• 一个免费的 QuickNode 账户

什么是 Scaffold-ETH

Scaffold-ETH Github 仓库可以看作理解 dApps 工作原理的基础框架。它附带了一些工具，使以太坊 (和 EVM) dApp 的构建过程更快、更容易。Scaffold-ETH 中使用的工具组合使你能够为智能合约提供前端。开发所需的工具堆栈如下：

• NextJS：一个 React 框架，使得在构建 web 应用程序时支持服务器端渲染等功能。
• RainbowKit：一个为 dApp 提供轻松连接钱包的 React 库。
• Hardhat：一个用于编译、部署、测试和调试智能合约的开发环境。
• Wagmi：一组用于以太坊的 React Hooks，简化区块链交互。
• TypeScript：JavaScript 的一个超集，增加了静态类型，增强了代码的可靠性和开发者体验。
• Viem：一个与区块链接口的 TypeScript 库。

设置 Scaffold-ETH 环境

首先，在开始使用 Scaffold-ETH 之前，你的机器需要安装 Yarn、Node.js 和 Git，具体要求见你将需要的部分。

信息

为了设置环境，我们需要三个不同的终端窗口。

• 终端 1：本地以太坊网络 - 必须保持运行
• 终端 2：智能合约部署
• 终端 3：NextJS 应用程序 - 必须保持运行

现在，打开你的第一个终端窗口，进入你希望克隆 Scaffold-ETH 仓库的目录，并按照以下说明进行操作。

第一步：克隆仓库

git clone https://github.com/scaffold-eth/scaffold-eth-2.git
cd scaffold-eth-2
yarn install

这些命令将克隆该仓库，使 scaffold-eth-2 成为你的工作目录，并安装所有必要的包。

点击此处了解更多关于文件夹结构的信息

顶级结构

• CONTRIBUTING.md：贡献指南，通常包括如何提交拉取请求、报告错误和参与开发的说明。
• LICENCE：项目的法律许可协议，规定了其使用或分发的方式。
• README.md：介绍性文件，提供有关该项目的信息、设置说明和其他重要细节。
• node_modules：所有项目包及其依赖项安装的目录。
• package.json：包含与项目相关的各种元数据的文件，包括脚本、依赖项和项目版本。
• packages：此目录包含项目的不同包或模块，每个模块都有其特定功能。
• yarn.lock：此文件锁定已安装包的版本，确保安装的一致性。

packages 目录中的内容

hardhat

• contracts：包含项目的 Solidity 智能合约。
• deploy：将合约部署到区块链的脚本。
• hardhat.config.ts：硬帽配置文件，用于自定义开发环境。
• node_modules：特定于 Hardhat 环境的依赖项。
• package.json：Hardhat 包的元数据和依赖项。
• scripts：用于编译合约或执行自定义任务的各种脚本。
• test：对智能合约进行测试，以确保其按预期工作。
• tsconfig.json：Hardhat 项目中 TypeScript 的配置。

nextjs

• app：Next.js 前端的主应用程序逻辑和页面。
• components：应用程序的可重用 UI 组件。
• contracts：可能包含 ABI 文件或合约交互逻辑的地方。
• hooks：自定义 React hook，可能用于与区块链数据交互或管理状态。
• next-env.d.ts：Next.js 类型的 TypeScript 声明文件。
• next.config.js：Next.js 的配置文件，以自定义其行为。
• node_modules：特定于 Next.js 环境的依赖项。
• package.json：Next.js 包的元数据和依赖项。
• postcss.config.js：PostCSS 的配置文件，一个用于转换 CSS 的工具。
• public：可以公开访问的静态资源，如图片和字体。
• scaffold.config.ts：特定于项目的搭建或配置自定义文件。
• services：外部 API 调用或业务逻辑的服务。
• styles：应用程序的 CSS 或样式文件。
• tailwind.config.js：Tailwind CSS 的配置，一个优先使用工具类的 CSS 框架。
• tsconfig.json：Next.js 项目中 TypeScript 的配置。
• types：特定于应用程序的 TypeScript 类型定义。
• utils：应用程序中使用的工具函数或助手。

第二步：运行本地网络

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。

当合约被部署时，你将看到如下消息。这将提供你新部署合约的地址和交易哈希。

第四步：启动 NextJS 应用程序

现在我们已经部署了合约，是时候启动前端应用程序了。为此，请打开指向 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

当你准备将智能合约部署到实时以太坊网络（如主网或测试网）时，将 QuickNode 以太坊端点与 Scaffold-ETH 集成是一个无缝的过程。在本指南中，我们将使用 Ethereum Sepolia 测试网。以下是入门的步骤：

第一步：创建一个免费的 QuickNode 账户

为了在实时网络上构建（无论是主网还是测试网），你需要一个 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 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～