如何Testnet Quicknode 在Avalanche FujiTestnet 建立 dAppQuicknode Quicknode

閱讀時間 10 分鐘

概覽

Avalanche 是一個採用 Snow 系列共識協議、具備智慧合約功能的開源權益證明（PoS）區塊鏈。Avalanche 3 條內建區塊鏈組成，這些區塊鏈均由主網進行驗證並確保其安全性：

Exchange Chain（X-Chain）—— 作為一個去中心化平台，用於創建和交易如 AVAX 般的數位智慧資產。這些資產代表現實世界中的資源，並有一套規範其行為的規則。X-Chain 是Avalanche 機器（AVM）的一個實例。
平台鏈（P-Chain）——作為Avalanche 上的元數據區塊鏈，負責協調驗證者、追蹤活躍子網，並支援建立新的子網。P-Chain 採用Snowman 共識協議。
合約鏈（C-Chain）—— 允許使用者透過C-Chain 的 API 建立智慧合約。

Avalanche 數個正競相爭取Ethereum 加入的新一代第一層區塊鏈之一。為了讓Ethereum 能更輕鬆地上手Avalanche智慧合約可使用 Solidity 語言編寫。Avalanche共識機制旨在開發出比競爭鏈更快、成本更低且更節能的應用程式。

avalanche

在本指南中，我們將逐步說明如何為Avalanche 設定錢包、部署智慧合約，以及將前端應用程式連接到該合約。完成後，您將擁有一個連接到Avalanche testnet dApp。

您將負責的工作內容

為Avalanche 設定您的 Coinbase 錢包
將以 Solidity 編寫的智慧合約部署至 FujiTestnet
建立一個能讀取及寫入合約的 React 前端應用程式

您需要準備的物品

Node v16與Yarn
Coinbase 錢包
具備 JavaScript、React 及Vite的相關知識
GitHub CLI

在Quicknode上設定Avalanche

若要在Avalanche 上進行開發，您需要一個endpoint 與其網路通訊endpoint APIendpoint 。如果您希望自行部署、託管及管理基礎架構，可以跳過本節。如果您希望將繁重的工作交由我們處理，可以Quicknode 填寫首頁上的表單，在Quicknode 上註冊一個帳戶。

建立一個Endpoint

建立帳戶後，您應會看到以下畫面。

quicknode建立端點

點擊「建立endpoint」按鈕，並選擇「Avalanche」鏈。

選擇區塊鏈與網路

本指南Testnet 使用 FujiTestnet 進行操作，因此請直接選擇「FujiTestnet」作為網路。

avalanche

接著，您將可選擇設定任何額外功能，包括「Mode 「Mode」。在本指南中，您可以跳過這些步驟，並透過提交付款資訊來完成設定。前七天不會從您的信用卡扣款。

quicknode

為Avalanche設定 Coinbase 錢包

您可以透過wallet.avax.network線上建立一個Avalanche ，或設定一個可連線至 RPC 端點的現有錢包。本教學將使用 Coinbase Wallet，您可由此處下載。

新增Avalanche

開啟您的 Coinbase 錢包，Mode 「設定」Mode 啟用「開發者Mode 。在同一分頁中，點選「預設網路」，然後在測試網下方選擇「Avalanche 」，即可查看可用的網路。

FujiTestnet

要與 Fuji 進行互動，您的錢包中必須持有 AVAX。就像Ethereum上的 Ropsten 水龍頭一樣，Avalanche FujiTestnet 。請輸入您的錢包地址，然後點擊「申請 2 AVAX」。

testnet

返回您的錢包。現在您的錢包裡應該有 2 AVAX。

建立新專案

Vite 是一款現代化的前端建置工具暨開源專案，可作為 Webpack 的替代方案。您可以使用它透過 Vite React 範本建立新專案，其結構與create-react-app 所建立的專案非常相似。我們將利用它來連線至本教學後續將部署的智慧合約。

開啟終端機視窗，並執行以下指令進行設定：

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檔案，用來儲存endpoint 、私密金鑰及合約地址等環境變數。

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)
  })

主函式會呼叫ethers函式庫中的getContractFactory方法，並將HelloWorld作為合約名稱傳入。HelloWorldFactory會帶著訊息「Hello fromQuicknode」進行部署，並將該訊息設定為helloMessage。接著，在下一行透過deployed方法呼叫此合約。最後，將合約的地址與簽署者記錄至控制台。

安全帽配置

既然我們已經有了合約以及用於部署它的腳本，最後一步就是撰寫 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 Wallet 擴充功能，並點擊「顯示恢復短語」。複製您的私鑰，並將其設定為PRIVATE_KEY變數。

接著，請前往Quicknode 並複製endpoint HTTP 提供者 URL。將該 URL 貼入您的 .env檔案中，並在 URL 末尾加上/ext/bc/C/rpc，以指定您要連線至 C-Chain。此鏈Ethereum （Ethereum Machine）的一個實例，可讓您透過 C-Chain 的 API 建立智慧合約。

將合約部署至富士

在部署合約之前，我們需要先編譯該合約。請執行以下指令：

yarn hardhat compile

接著，部署合約，並加入--network參數以指定 Fuji 測試網路。

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

如果您的專案中所有設定都正確無誤，執行此腳本後，終端機將顯示以下訊息，但其中會顯示您自己的位址：

前往SnowtraceTestnet，並搜尋您的合約地址。

snowtrace 合約

請將合約地址加入.env 檔案中，以便在下一節中，我們的前端客戶端能夠存取該地址。

建立一個 React 應用程式

現在可以使用我們的合約地址，透過 React 建立一個能與合約方法互動的前端客戶端。請將以下 React 程式碼新增至src/App.jsx，以設定您的應用程式：

// src/App.jsx

import { useState } from 'react'
import { ethers } from 'ethers'
import HelloWorld from './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 的標籤中加入以下樣式表：

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

這會透過Water.css 提供預設樣式。

啟動開發伺服器

執行以下指令，以 Vite 啟動開發伺服器：

yarn dev

請輸入localhost:3000以檢視該應用程式：

avalanche

來試試看吧！請連接您的錢包，並點擊下方「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>

現在，當您輸入新的問候訊息並點擊「設定問候訊息」按鈕時，系統會要求您透過 Coinbase 錢包確認該筆交易。確認交易後，該交易會處於待處理狀態數秒鐘。一旦交易完成，新訊息便會記錄至控制台。

新問候語顯示於控制台

設定 Netlify 部署

我們的「Hello World」應用程式已經完成，現在可以透過Netlify或Vercel 等服務將其部署到網路上。請建立一個名為 netlify.toml 的檔案，用來進行 Netlify 的設定。

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 控制台，點擊「新增網站」，然後選取剛建立的儲存庫。

從 Netlify 上的 Git 儲存庫匯入專案

您的建置設定已從netlify.toml檔案匯入。您只需在「進階建置設定」中填入合約地址即可。最後，請點擊「部署網站」。

在 Netlify 上為合約地址包含環境變數

請前往「網域設定」為您的網站設定自訂網域。您可以在avalanche.netlify.app 上查看此範例。

恭喜！您應該可以在您的自訂網域上看到網站已上線，效果類似如下：

在 Netlify 上部署網站

結論

大功告成！在本指南中，您已學會如何為Avalanche 設定 Coinbase Wallet、將以 Solidity 編寫的智慧合約部署至Avalanche FujiTestnet，以及建立一個用於讀取和寫入該合約的 React 前端應用程式。

訂閱我們的電子報，獲取更多文章和指南。如有任何意見回饋，歡迎透過Twitter聯絡我們。您隨時都可以在我們的Discord社群伺服器上與我們聊天，那裡聚集了您這輩子見過最酷的開發者們 :)

如何Testnet Quicknode在Avalanche FujiTestnet 建立 dApp

概覽​

您將負責的工作內容​

您需要準備的物品​

在Quicknode上設定Avalanche​

建立一個Endpoint​

為Avalanche設定 Coinbase 錢包​

新增Avalanche​

FujiTestnet​

建立新專案​

建立一個「Hello World」Solidity 合約​

撰寫部署腳本​

安全帽配置​

將合約部署至富士​

建立一個 React 應用程式​

啟動開發伺服器​

設定 Netlify 部署​

建立 GitHub 儲存庫​

部署至 Netlify​

結論​

資源​

概覽

您將負責的工作內容

您需要準備的物品

在Quicknode上設定Avalanche

建立一個Endpoint

為Avalanche設定 Coinbase 錢包

新增Avalanche

FujiTestnet

建立新專案

建立一個「Hello World」Solidity 合約

撰寫部署腳本

安全帽配置

將合約部署至富士

建立一個 React 應用程式

啟動開發伺服器

設定 Netlify 部署

建立 GitHub 儲存庫

部署至 Netlify

結論

資源