在本教程中，我們將學習如何使用 Ethers。js 庫構建一個帶有與 Solidity 智慧合約互動的前端的基本以太坊 dApp。

本教程是Solidity 教程系列的延續。如果您不熟悉編寫 Solidity 智慧合約，請在繼續閱讀本文之前檢視如何構建您的第一個智慧合約。

介紹

智慧合約是僅在滿足特定條件時才在區塊鏈上部署和執行的功能。我們可以透過多種方式與我們在區塊鏈上部署的智慧合約進行互動。

一種方法是使用 Ethers。js 庫將我們的 dApp 前端連線到作為後端的智慧合約。

在本文中，我們將編寫和部署一個接受寵物姓名、主人姓名和年齡的智慧合約。我們還將使用前端專案中的 getter 函式從智慧合約中檢索寵物的詳細資訊。

演示

這是我們將在本教程結束時構建的寵物 dApp 的演示影片：

先決條件

在繼續本教程之前，您應該具備：

• 對 HTML 和 CSS 有基本的瞭解，

• 瞭解 JavaScript 中的函式和 DOM，

•

您可以在此處［1］

找到對 Solidity 的基本瞭解。

本教程中使用的其他技術包括：Ethers。js 庫、Remix IDE 和 Metamask。

構建 dApp

我們的專案分為兩部分：

後端

，我們將在 Goerli 測試網上編寫和部署我們的 Solidity 智慧合約；

前端

，我們將在這裡使用 HTML 和 CSS 構建我們的 dApp 介面，並使用帶有 Ethers。js 的 JavaScript 與我們部署的智慧合約進行互動。

構建後端

在這一部分中，我們將使用 Remix IDE 和 Metamask 在 Goerli 測試網上編寫和部署我們的 Solidity 智慧合約。

第 1 步 - Solidity IDE（Remix）

Remix IDE 是一個基於 Web 的 Solidity 編譯器。它允許我們直接從瀏覽器編寫、測試和部署我們的 Solidity 智慧合約，無需任何配置或設定。

我們將使用 Remix IDE 來編寫和部署我們的寵物智慧合約。

單擊

此處［2］

在瀏覽器上啟動 Remix IDE：

第 2 步 - 編寫智慧合約

找到Remix 的“檔案資源管理器”下的

contracts

資料夾並建立一個名為

Pet_Contract。sol

的新檔案：

在

Pet_Contract。sol

檔案中複製並貼上下面的 Solidity 智慧合約：

// SPDX-License-Identifier： MITpragma solidity ^ 0。8。13；// 1。 Creating a new pet contractcontract Pet_Contract{ // 2。 Declaring our smart contract state variables string public petName； string public petOwner； string public petAge； // 3。 Creating a set pet function function setPet（ string memory newPetName， string memory newPetOwner， string memory newPetAge ） public { petName = newPetName； petOwner = newPetOwner； petAge = newPetAge； } // 4。 Creating a fetch pet function function getPet（） public view returns （ string memory， string memory， string memory ）{ return （petAge， petName， petOwner）； }}

上面的智慧合約是我們在

這裡［3］

編寫的第一個智慧合約的修改。我們正在建立一個

setPet

函式，該函式接受三個引數：

petName

、

petOwner

和

petAge

，並在呼叫

setPet

函式時將它們儲存在記憶體中。

getPet

函式將返回我們智慧合約記憶體中的

petAge

、

petName

和

petOwner

狀態的當前值。

可以在

此處［4］

找到智慧合約的完整細分說明。

第 3 步 - 編譯智慧合約

請按照以下步驟在 Remix IDE 上編譯您的 Solidity 智慧合約：

• 確保將原始檔儲存為

ctrl + s

。

• 然後，導航到“Solidity Compiler”部分：

• 選擇與我們的智慧合約中指定的編譯器版本相匹配的編譯器版本（如果您不這樣做，綠色檢查將變為紅色）：

• 接下來，確保儲存檔案並單擊“編譯”按鈕：

第 4 步 - 獲取 Goerli Testnet Token

現在，我們要在 Goerli 測試網路上部署我們的寵物智慧合約，我們需要一些假 ETH 來支付 gas 費。

請按照以下步驟為您的 Metamask 錢包獲取免費的 Goerli Testnet 代幣：

• 如果您還沒有安裝

Metamask 。［5］

• 接下來，導航到

faucets。chain。link［6］

。

• 連線您的 Metamask 錢包：

• 確保在您的 Metamask 上切換到 Goerli 測試網路：

• 解決驗證碼，然後點選“傳送 0。1 測試 ETH”按鈕：

• 等待交易確認：

• 檢查您的 Metamask 是否有新餘額：

你可以在這裡［7］

檢視其他地方以獲得免費的 ETH 用於 dApp 開發。

第 5 步 - 部署智慧合約

現在我們已經成功編譯了我們的智慧合約

（參見步驟 3）

，並且我們的 Metamask 錢包中有一些 Goerli Testnet 代幣，我們將在 Goerli 測試網路上部署我們的智慧合約。

• 導航到“部署和執行事務”部分：

• 選擇“Injected Web3”作為環境：

• 點選“部署”按鈕，在 Goerli 測試網上部署我們的智慧合約：

• 系統將提示您確認合約部署 gas 費用：

• 如果部署成功，您將在“已部署的合約”部分下看到我們的智慧合約名稱，如下所示：

第 6 步 - 測試智慧合約

在這一步中，我們將在 Remix IDE 上測試我們的智慧合約並與之互動。

• 點選

setPet

函式中的下拉箭頭，展開輸入框：

• 在輸入框中填寫您寵物的詳細資訊，然後單擊“交易”按鈕：

• 確認交易gas費用：

• 等待交易確認：

• 點選

getPet

函式：

• 如上所示，該

getPet

函式應該返回一個包含寵物姓名、主人姓名和年齡的陣列。

• 接下來，單擊所有“getter”按鈕。每個 getter 函式都應該從它們各自的狀態變數中返回值，如下所示：

我們的 Solidity 智慧合約按預期執行。您可以繼續使用不同的寵物名稱、所有者姓名和年齡來測試智慧合約。

構建前端

在這一部分中，我們將構建 dApp 的前端，它使用 Ethers。js 與我們的智慧合約進行互動。

什麼是 Ethers。js

Ethers。js［8］

是

web3。js［9］

庫的替代品。它是一個 JavaScript 庫，允許開發人員與以太坊區塊鏈進行互動。

第 1 步 - 安裝 Ethers。js

在我們的專案中使用 Ethers。js 的最快方法是透過

Ethers。js CDN［10］

。

•

index。html

使用以下內容建立一個新檔案：

<！DOCTYPE html> <！—— Importing css styles ——> <！—— Importing Ethers。js script ——> <！—— Importing javascript file ——>

在上面的程式碼中，我們匯入了 Ethers。js CDN 指令碼、我們的 CSS 以及我們稍後將建立的 JavaScript 檔案。

您的 JavaScript 檔案應在 Ethers。js CDN 指令碼

之後匯入。

第 2 步 - 構建寵物表格

在這一步中，我們將建立一個表單，該表單將接受寵物的姓名、主人的姓名和年齡，以及一個“提交”按鈕，以將詳細資訊傳送到我們部署的智慧合約。

在

index。html

檔案的 body 標記中新增以下程式碼行：

接下來，建立一個新

index。css

檔案，並新增以下程式碼：

/* Reset browser styles */* { margin： 0； box-sizing： border-box；}body { font-family： Arial； line-height： 1。5； color： #333333； display： flex； justify-content： center； flex-direction： column； min-height： 100vh； max-width： 500px； margin： 0 auto； padding： 0 20px；}/* Header */。section-header{ font-size： 1。5rem； font-weight： bold； margin-bottom： 1rem； background-color： #333333； color： #ffffff； padding： 0。5rem 1rem； border-radius： 0。25rem； text-align： center；}/* Pet Form Section */form { padding： 20px； border-radius： 5px； box-shadow： 0 0 10px rgba（0， 0， 0， 0。2）；}label { font-size： 14px； display： block； margin-bottom： 5px；}input { width： 100%； border： 1px solid #cccccc； border-radius： 5px； padding： 10px； margin-bottom： 10px；}input［type=button］{ border： 1px solid #333333； background-color： #333333； color： #fff； cursor： pointer；}

我們的寵物表單在瀏覽器中應該是這樣的：

第 3 步 - 構建寵物詳細資訊部分

在這一步中，我們將建立

寵物詳細資訊

部分，該部分將顯示儲存在我們的智慧合約記憶體中的當前寵物資訊。

在

寵物表格

部分之後，在您的

index。html

檔案中新增以下程式碼：

<！—— Pet details section ——>

接下來，使用以下程式碼更新您的

index。css

檔案：

/* Pet details section */。pet-detail-section{ display： none； /* hidden by default */}。pet-details { margin-bottom： 10px； padding： 20px； border-radius： 5px； box-shadow： 0 0 10px rgba（0， 0， 0， 0。2）；}。pet-detail-heading { font-size： 16px； margin-bottom： 10px； font-weight： 500； letter-spacing： 0。5px；}。section-footer{ display： flex； gap： 12px；}。show-pet-form-btn， 。refresh-pet-details-btn{ width： 50%； padding： 10px； border： none； border-radius： 5px； color： #fff； cursor： pointer；}。show-pet-form-btn{ background-color： #4CAF50；}。refresh-pet-details-btn{ background-color： #00a8ff；}

在上面的程式碼中，

寵物詳細資訊

部分將預設為

hidden

；只有在我們的智慧合約上設定了寵物詳細資訊時，它才會可見。我們將在下一步中實現邏輯。

我們的

寵物詳細資訊

部分將如下所示：

• “設定新寵物”按鈕將使使用者返回到我們之前構建的

寵物表單部分。

• Goerli 交易確認可能需要幾秒鐘的時間。我們可以透過點選“重新整理”按鈕來重新整理寵物的詳細資訊。

第 4 步 - 建立簽名者邏輯

在這一步中，我們將提示使用者將他們的 Metamask 錢包地址與我們的 dApp 連線，然後他們才能與我們的智慧合約進行互動。然後，使用者將被識別為簽名者，使用他們的錢包地址。

• 使用以下內容建立一個

index。js

新檔案：

// 1。 Declare global variable to store the web3 instancelet PetContract；// 2。 Set contract address and ABIconst Pet_Contract_Address = “”；const Pet_Contract_ABI = ［］；/* 3。 Prompt user to sign in to MetaMask */const provider = new ethers。providers。Web3Provider（window。ethereum， “goerli”）；provider。send（“eth_requestAccounts”， ［］）。then（（） => { provider。listAccounts（）。then（（accounts） => { const signer = provider。getSigner（accounts［0］）； /* 3。1 Create instance of pet smart contract */ PetContract = new ethers。Contract（ Pet_Contract_Address， Pet_Contract_ABI， signer ）； }）；}）；

在上面的程式碼中：

1。 我們將PetContract變數設為全域性變數，因為我們將在其他函式中重用它。

2。 在Pet_Contract_Address和Pet_Contract_ABI中提供你的智慧合約地址和ABI。

• 您可以從 Remix “Solidity Compiler”部分獲取您的智慧合約 ABI 程式碼：

• 導航到 Remix “部署和執行交易”部分以複製您的智慧合約地址：

3。 我們提示使用者在他們的 MetaMask 錢包上連線到 Goerli 網路，我們的智慧合約在該錢包中部署（參見後端 - 步驟 5）。

當用戶訪問我們的

寵物表單

頁面時，他們將看到以下螢幕：

連線錢包地址後，我們現在可以透過

PetContract

變數訪問智慧合約中的

setPet

和

getPet

函式。

第 5 步 - 建立SetNewPet函式

在這一步中，我們將建立一個

setNewPet

函式，使用我們智慧合約中的

PetContract。setPet（）

函式將寵物的詳細資訊從

寵物表單

傳送到我們的智慧合約（

請參閱後端 - 步驟 2

）。

使用以下程式碼更新您的

index。js

檔案：

// 4。 Creating variables for reusable dom elementsconst petFormSection = document。querySelector（“。pet-form-section”）；const showPetFormBtn = document。querySelector（“。show-pet-form-btn”）；const petSection = document。querySelector（“。pet-detail-section”）；const setPetButton = document。querySelector（“#set-new-pet”）；const refreshBtn = document。querySelector（“。refresh-pet-details-btn”）；/* 5。 Function to set pet details */const setNewPet = （） => { // update button value setPetButton。value = “Setting Pet。。。”； /* 5。1 Get inputs from pet form */ const petNameInput = document。querySelector（“#pet-name”）； const petOwnerInput = document。querySelector（“#pet-owner”）； const petAgeInput = document。querySelector（“#pet-age”）； // 5。2 Getting values from the inputs petName = petNameInput。value； petOwner = petOwnerInput。value； petAge = petAgeInput。value； /* 5。3 Set pet details in smart contract */ PetContract。setPet（petName， petOwner， petAge） 。then（（） => { // update button value setPetButton。value = “Pet Set。。。”； /* 5。4 Reset form */ petNameInput。value = “”； petOwnerInput。value = “”； petAgeInput。value = “”； // update button value setPetButton。value = “Set Pet”； /* 5。5 Get pet details from smart contract */ getCurrentPet（）； }） 。catch（（err） => { // If error occurs， display error message setPetButton。value = “Set Pet”； alert（“Error setting pet details” + err。message）； }）；}；/* Function to set pet details on click of button */setPetButton。addEventListener（“click”， setNewPet）；

第6步 - 建立getCurrentPet函式

在這一步，我們將建立getCurrentPet函式，使用智慧合約中的PetContract。getPet（）函式，獲取智慧合約記憶體中最後一個寵物的詳細資訊（見後臺——第2步）。

用下面的程式碼更新你的index。js檔案。

/* 6。 Function to get pet details */const getCurrentPet = async （） => { setPetButton。value = “Getting Pet。。。”； /* 6。1 Get pet details from smart contract */ const pet = await PetContract。getPet（）； /* 6。2 Display the pet details section 6。2。1 Hide the pet form in DOM */ petSection。style。display = “block”； petFormSection。style。display = “none”； /* 6。3 Pet is an array of 3 strings ［petName， petOwner， petAge］ */ const petName = pet［0］； const petOwner = pet［1］； const petAge = pet［2］； /* 6。4 Display pet details in DOM */ document。querySelector（“。pet-detail-name”）。innerText = petName； document。querySelector（“。pet-detail-owner”）。innerText = petOwner； document。querySelector（“。pet-detail-age”）。innerText = petAge；}；

最後，我們將新增一個函式，讓使用者返回到寵物表格，並新增另一個函式來重新整理寵物的詳細資訊。

在你的index。js檔案中新增以下幾行程式碼。

/* 7。 Function to show the pet form on click of button */showPetFormBtn。addEventListener（“click”， （） => { petSection。style。display = “none”； petFormSection。style。display = “block”； setPetButton。value = “Submit”；}）；/* 8。 Function to refresh pet details */refreshBtn。addEventListener（“click”， （e） => { e。target。innerText = “Refreshing。。。”； getCurrentPet（）。then（（） => { e。target。innerText = “Refreshed”； setTimeout（（） => { e。target。innerText = “Refresh”； }， 2000）； }）；}）；

測試我們的dApp

現在我們的dApp的程式碼已經準備好了，我們可以繼續測試我們的實現，如下所示。

這個專案的完整原始碼可以在這個資源庫中找到。

總結

在本教程中，我們學習瞭如何使用 Ether。js 從前端應用程式中與 Solidity 智慧合約進行互動。

引用連結

［1］ 您可以在此處：

https：//web3。hashnode。com/solidity-tutorial-how-to-build-your-first-smart-contract

［2］ 此處：

https：//remix。ethereum。org/

［3］ 這裡：

https：//web3。hashnode。com/solidity-tutorial-how-to-build-your-first-smart-contract

［4］ 此處：

https：//web3。hashnode。com/solidity-tutorial-how-to-build-your-first-smart-contract

［5］ Metamask 。：

https：//metamask。io/

［6］ faucets。chain。link：

https：//faucets。chain。link/

［7］ 你可以在這裡：

https：//web3。hashnode。com/link-to-5-places-to-get-testnet-tokens

［8］ Ethers。js：

https：//docs。ethers。io/v5/getting-started/

［9］ web3。js：

https：//web3js。readthedocs。io/en/v1。7。3/getting-started。html

［10］ Ethers。js CDN：

https：//docs。ethers。io/v5/getting-started/#importing