如何使用 QuickNode 在 Avalanche 的 Fuji 测试网上创建 dApp

概述

Avalanche 是一个开源的、权益证明区块链，具有智能合约功能，并使用 Snow 系列共识协议。Avalanche 主网络由 3 个内置区块链 组成，这些区块链由主网络验证和保护：

• 交易链 (X-Chain) - 作为一个去中心化平台，用于创建和交易像 AVAX 这样的数字智能资产。这些资产代表具有一组规则来管理其行为的真实世界资源。X-Chain 是 Avalanche 虚拟机 (AVM) 的一个实例。

• 平台链 (P-Chain) - 协调验证者，跟踪活跃的子网，并支持创建新的子网作为 Avalanche 上的元数据区块链。P-Chain 实现了 Snowman 共识协议。

• 合约链 (C-Chain) - 允许使用 C-Chain 的 API 创建智能合约。

Avalanche 是几个新的 Layer 1 区块链之一，它们正在竞争吸引以太坊开发者。为了简化以太坊开发者的上手体验，Avalanche 的智能合约可以使用 Solidity 编写。Avalanche 的共识机制旨在实现比竞争链更快、更便宜、更节能的应用程序开发。

在本指南中，我们将逐步完成为 Avalanche 网络设置钱包、部署智能合约以及将前端应用程序连接到该合约的过程。最后，你将拥有一个连接到 Avalanche Fuji 测试网的 dApp。

你将做什么

• 为 Avalanche 网络配置你的 Coinbase 钱包
• 将用 Solidity 编写的智能合约部署到 Fuji 测试网
• 创建一个 React 前端应用程序，用于读取和写入合约

你需要的

• Node v16 和 Yarn
• Coinbase Wallet
• JavaScript、React 和 Vite 的知识
• GitHub CLI

在 QuickNode 上设置 Avalanche API

要在 Avalanche 上构建，你需要一个 API 端点才能与他们的网络通信。如果你想部署、托管和管理你自己的基础设施，你可以跳过本节。如果你想把繁重的工作留给我们，你可以通过填写主页上的表格在 QuickNode 上注册一个帐户。

创建一个端点

创建帐户后，你应该会看到以下屏幕。

单击“创建端点”按钮并选择“Avalanche”链。

在本指南中，我们将使用 Fuji 测试网，因此请继续为网络选择“Fuji 测试网”。

然后，你可以选择设置任何其他功能，包括存档模式或跟踪模式。你可以跳过本指南中的这些步骤，并通过提交你的付款信息来完成设置。你的卡在前七天不会被收费。

为 Avalanche 配置 Coinbase 钱包

你可以在 wallet.avax.network 上在线创建一个 Avalanche 钱包，或者配置一个允许连接到 RPC 端点的现有钱包。在本教程中，我们将使用 Coinbase 钱包，你可以在此处下载。

添加 Avalanche 网络

打开你的 Coinbase 钱包，并在“设置”选项卡中启用开发者模式。在同一选项卡中，通过选择“默认网络”并在测试网下选择“Avalanche Fuji”来检查可用网络。

Fuji 测试网水龙头

为了与 Fuji 交互，我们需要在你的钱包中有 AVAX。就像以太坊上的 Ropsten 水龙头一样，Avalanche 也有 Fuji 测试网水龙头。包括你的钱包地址，然后单击“Request 2 AVAX”。

返回你的钱包。你现在应该有 2 AVAX。

创建一个新项目

Vite 是一个现代化的前端构建工具和开源项目，它提供了 Webpack 的替代方案。你可以使用它创建一个新的项目，该项目具有与 create-react-app 创建的项目类型非常相似的 Vite React 模板。我们将使用它来连接到本教程后面部署的智能合约。

打开一个终端窗口并运行以下命令进行设置：

yarn create vite getting-started-with-avalanche --template react
cd getting-started-with-avalanche

生成样板应用程序后，安装 hardhat、ethers、@nomiclabs/hardhat-ethers 和 dotenv 的依赖项以管理环境变量：

yarn add -D dotenv hardhat ethers @nomiclabs/hardhat-ethers

为你的智能合约、Hardhat 部署脚本和 Hardhat 配置创建目录和文件：

mkdir contracts scripts
echo > contracts/HelloWorld.sol
echo > scripts/deploy.js
echo > hardhat.config.js

在项目的根目录中创建一个 .env 文件，以保存我们的端点 URL、私钥和合约地址的环境变量。

echo 'QUICKNODE_URL=\nPRIVATE_KEY=\nVITE_CONTRACT_ADDRESS=' > .env

将 .env 添加到 .gitignore，这样你就不会提交任何私人信息。

echo '.env' >> .gitignore

创建一个 Hello World Solidity 合约

接下来，我们将添加一个样板智能合约 HelloWorld，以部署到 Avalanche。打开一个你选择的代码编辑器，并将此代码粘贴到 contracts/HelloWorld.sol 中：

// contracts/HelloWorld.sol

// SPDX-License-Identifier: GPL-3.0
pragma solidity ^0.8.6;

import "hardhat/console.sol";

contract HelloWorld {
  string private helloMessage;

  constructor(string memory _helloMessage) {
    console.log(_helloMessage);
    helloMessage = _helloMessage;
  }

  function hello() public view returns (string memory) {
    return helloMessage;
  }

  function setHello(string memory _helloMessage) public {
    console.log("Changing helloMessage from '%s' to '%s'", helloMessage, _helloMessage);
    helloMessage = _helloMessage;
  }
}

该合约有一个名为 helloMessage 的字符串变量。它包含一个 hello 函数，该函数返回设置为 helloMessage 的值。另一个函数 setHello 将 helloMessage 的值更改为传递给该函数的任何参数。

现在我们已经创建了我们的智能合约，让我们将其部署到 Avalanche！

编写部署脚本

将以下部署脚本添加到 scripts/deploy.js：

// scripts/deploy.js

async function main() {
  const HelloWorldFactory = await ethers.getContractFactory("HelloWorld")
  const helloMessage = await HelloWorldFactory.deploy("Hello from QuickNode")
  await helloMessage.deployed()

  console.log("Contract deployed to:", helloMessage.address)
  console.log("Contract deployed by " + JSON.stringify(helloMessage.signer) + " signer")
  process.exit(0)
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error)
    process.exit(1)
  })

main 函数调用 ethers 库上的 getContractFactory 方法，并将 HelloWorld 作为合约的名称传入。HelloWorldFactory 使用消息 "Hello from QuickNode" 部署并设置为 helloMessage。然后在下一行使用 deployed 方法调用它。最后，合约的地址和签名者记录到控制台。

Hardhat 配置

现在我们有了我们的合约和一个部署它的脚本，最后一步是编写我们的 Hardhat 配置。该配置指定合约工件在项目中的放置位置以及合约部署到的网络。

它的代码如下所示：

// hardhat.config.js

require("dotenv").config()
require("@nomiclabs/hardhat-ethers")

module.exports = {
  solidity: "0.8.6",
  paths: {
    artifacts: './src/artifacts',
  },
  networks: {
    fuji: {
      url: process.env.QUICKNODE_URL,
      accounts: [`0x` + process.env.PRIVATE_KEY],
      chainId: 43113,
    },
  },
}

在这里，我们指定 Solidity 版本、合约工件的路径以及 Fuji 的网络信息。将此代码添加到 hardhat.config.js 文件中。

在我们部署此合约之前，我们需要在 .env 中包含两个环境变量。导航到 Coinbase 钱包扩展程序，然后单击“Show Recovery Phrase”。复制你的私钥并将其设置为 PRIVATE_KEY 变量。

接下来，访问 QuickNode 仪表板并复制你的端点的 HTTP 提供程序 URL。将 URL 粘贴到你的 .env 文件中，并在 URL 的末尾添加 /ext/bc/C/rpc，以指定你要连接到 C-Chain。此链是以太坊虚拟机的一个实例，允许使用 C-Chain 的 API 创建智能合约。

将合约部署到 Fuji

在部署合约之前，我们需要先编译合约。运行以下命令：

yarn hardhat compile

然后，部署合约并包含 --network 标志以指定 Fuji 测试网络。

yarn hardhat run scripts/deploy.js --network fuji

如果你的项目中的所有内容都设置正确，则在运行此脚本后，你的终端会输出以下消息，但带有你自己的地址：

转到 Snowtrace 测试网 并搜索你的合约地址。

将合约地址包含在 .env 中，以便可以在下一节中从我们的前端客户端访问它。

创建一个 React 应用程序

我们的合约地址现在可以用于创建一个带有 React 的前端客户端，该客户端与合约的方法交互。将以下 React 代码添加到 src/App.jsx 以设置你的应用程序：

// src/App.jsx

import { useState } from 'react'
import { ethers } from 'ethers'
import HelloWorld from './src/artifacts/contracts/HelloWorld.sol/HelloWorld.json'

const contractAddress = import.meta.env.VITE_CONTRACT_ADDRESS

function App() {
  const [hello, setHelloValue] = useState()

  async function requestAccount() {
    await window.ethereum.request({ method: 'eth_requestAccounts' })
  }

  async function fetchHello() {
    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()
      const provider = new ethers.providers.Web3Provider(window.ethereum)
      const contract = new ethers.Contract(contractAddress, HelloWorld.abi, provider)
      try {
        const data = await contract.hello()
        setHelloValue(data)
        console.log('Greeting: ', data)
        console.log('Contract Address: ', contract.address)
      } catch (err) {
        console.log("Error: ", err)
      }
    }
  }

  return (
    <div>
      <header>
        <h1>Avalanche</h1>
      </header>

      <main>
        <h3>Hello World</h3>

        <button onClick={fetchHello}>
          Click me, you know you want to
        </button>

        <div>{hello}</div>
      </main>
    </div>
  )
}

export default App

接下来，导航到 index.html 并在 html 的 head 中包含以下样式表：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">

这提供了带有 Water.css 的默认样式。

启动开发服务器

运行以下命令以使用 Vite 启动开发服务器：

yarn dev

输入 localhost:3000 以查看应用程序：

让我们测试一下！连接你的钱包并单击“Hello World”下方的按钮。

你应该看到一条问候消息显示在按钮下方并记录到控制台。

现在，让我们用一个额外的功能更新我们的代码。返回到 src/App.jsx 并在 fetchHello 之后但在 return 语句之前添加以下 setHello 函数：

// src/App.jsx

async function setHello() {
  if (!hello) return
  if (typeof window.ethereum !== 'undefined') {
    await requestAccount()
    const provider = new ethers.providers.Web3Provider(window.ethereum)
    const signer = provider.getSigner()
    const contract = new ethers.Contract(contractAddress, HelloWorld.abi, signer)
    const transaction = await contract.setHello(hello)
    await transaction.wait()
    fetchHello()
  }
}

在 fetchHello 按钮下方的 return 语句中包含以下代码：

// src/App.jsx

<input
  onChange={e => setHelloValue(e.target.value)}
  placeholder="Set hello message"
/>
<button onClick={setHello}>
  Set hello message
</button>

现在，当你输入一条新的问候消息并单击“Set hello message”按钮时，系统会要求你从 Coinbase 钱包确认交易。确认交易后，它将挂起几秒钟。交易完成后，新消息将记录到控制台。

配置 Netlify 部署

我们的 hello world 应用程序已完成，我们可以使用 Netlify 或 Vercel 之类的服务将其部署到互联网。为我们的 Netlify 配置创建一个 netlify.toml 文件。

echo > netlify.toml

将以下说明添加到 netlify.toml 文件中：

## netlify.toml

[build]
  publish = "dist"
  command = "yarn build"

构建命令设置为 yarn build，发布目录设置为 dist。

创建 GitHub 仓库

初始化一个 Git 存储库并将项目推送到 GitHub 存储库。

git init
git add .
git commit -m "add initial commit message here"
gh repo create getting-started-with-avalanche --public --pu \
  --source=. \
  --description="Deploy a smart contract to Avalanche's Fuji Testnet with Hardhat, Ethers, and QuickNode" \
  --remote=upstream

我们使用了 GitHub CLI，但你也可以访问 repo.new 并按照那里提供的说明进行操作。

部署到 Netlify

转到你的 Netlify 仪表板，单击“Add new site”，然后选择新创建的存储库。

你的构建设置是从 netlify.toml 文件导入的。你需要包含的唯一其他信息是“Advanced build settings”下的合约地址。最后，单击“Deploy site”。

转到“Domain settings”以使你的站点具有自定义域名。你可以在 ajcwebdev-avalanche.netlify.app 上看到此示例。

恭喜！你应该在你的自定义域名上看到你的站点，类似于这样：

结论

这是一个总结！在本指南中，你学习了如何为 Avalanche 网络配置 Coinbase 钱包、将用 Solidity 编写的智能合约部署到 Avalanche 的 Fuji 测试网以及创建一个 React 前端应用程序来读取和写入合约。

订阅我们的 newsletter，以获取更多文章和指南。如果你有任何反馈，请随时通过 Twitter 与我们联系。你始终可以在我们的 Discord 社区服务器上与我们聊天，该服务器汇集了一些你将遇到的最酷的开发人员 :)

资源

• Avalanche 文档
• Avalanche 博客
• Avalanche 区块浏览器
• Avalanche Bridge
• Twitter
• Ecosystem
• Community
• Foundation
• Ava Labs
• Ava Labs GitHub
• Coinbase Wallet

• 原文链接： quicknode.com/guides/ava...
• 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～