NFT minter 教學：如何打造全端 dApp

在本教學中，你將建立一個 NFT minter，並學習如何透過 Metamask 和 Web3 工具將智能合約連接到 React 前端，打造一個全端 dApp。

此外，別忘了看看我們 NFT 教學系列的其他文章：

• 🌟 How to mint an NFT using Web3.js
• 🪄 How to mint an NFT with Ether.js
• 👛 How to view your NFT in your mobile wallet
• 💸 How to set a price on an NFT

對於來自 Web2 背景的開發者來說，最大的挑戰之一，就是搞清楚如何將智能合約連接到前端專案並與其互動。

透過建立一個 NFT minter——一個可以輸入數位資產連結、標題和描述的簡單 UI——你將學會如何：

• 透過前端專案連接到 Metamask
• 從前端呼叫智能合約方法
• 使用 Metamask 簽署交易

在本教學中，我們將使用 React 作為前端框架。由於本教學主要著重於 Web3 development，我們不會花太多時間講解 React 的基礎知識，而是專注於為我們的專案加上功能。

廢話不多說，開始吧！

第 0 步：製作 NFT 101

在開始看任何程式碼之前，先了解製作 NFT 的運作方式很重要。它包含兩個步驟：

1) 你在 Ethereum 區塊鏈上發布一個 NFT 智能合約，通常會是 ERC-721 或 ERC-1155 智能合約。

2) 你呼叫該 NFT 智能合約上的 mint 函式來鑄造 NFT。*Minting（鑄造）*就是在區塊鏈上發布你的非同質化代幣（non fungible token）的一個獨立實例。

通常，這個 mint 函式需要你傳入兩個變數作為參數：第一個是接收者（recipient），指定將收到你新鑄造 NFT 的地址；第二個是 NFT 的 tokenURI，一個指向描述 NFT 元資料的 JSON 文件的字串。

在本教學中，我們將專注於第二部分，也就是使用我們的 React UI 來呼叫既有 NFT 智能合約的 mint 函式。

這裡有一個連結是本教學中我們將會呼叫的 ERC-721 NFT 智能合約。如果你想了解我們是如何製作它的，強烈建議你參考另一篇教學「How to Create an NFT」。

好的，現在我們了解了製作 NFT 的運作方式，接下來把起始檔案 clone 下來吧！

第 1 步：clone 起始檔案

首先，前往 nft-minter-tutorial 的 github repository，取得本專案的起始檔案。將此 repository clone 到你的本機環境。

打開你 clone 的 nft-minter-tutorial repository 後，你會發現它包含兩個資料夾：minter-starter-files 和 nft-minter。

• minter-starter-files 包含本專案的起始檔案（基本上就是 React UI）。在本教學中，我們將在這個目錄下工作，學習如何透過連接到你的 Ethereum 錢包和 NFT 智能合約，讓這個 UI 動起來。
• nft-minter 包含整個完成版的教學內容，供你在卡關時作為參考。

接著，用你喜歡的程式碼編輯器打開你複製的 minter-starter-files（在 Alchemy，我們很喜歡用 VSCode），然後進入 src 資料夾：

我們將在 "src" 資料夾內工作

我們所寫的所有程式碼都會放在 src 資料夾下。我們會編輯 Minter.js component，並撰寫額外的 javascript 檔案，讓我們的專案具備 Web3 功能。

第 2 步：檢視起始檔案

在開始寫程式碼之前，先來看看起始檔案裡已經提供了什麼，這點很重要。

讓你的 react 專案跑起來

先從在瀏覽器中執行 React 專案開始。React 的優點在於，一旦我們的專案在瀏覽器中執行，我們儲存的任何變更都會即時更新在瀏覽器中。

要讓專案跑起來，先進入 minter-starter-files 資料夾的根目錄，然後在終端機執行 npm install 來安裝專案的依賴套件：

安裝完成後，在終端機執行 npm start：

這樣應該會在你的瀏覽器中開啟 http://localhost:3000/，你會看到我們專案的前端畫面。它應該包含 3 個欄位：輸入 NFT 資產連結的地方、輸入 NFT 名稱、以及提供描述。

如果你試著點擊「Connect Wallet」或「Mint NFT」按鈕，你會發現它們沒有作用——因為我們還沒有為它們寫上功能！:)

minter.js component

讓我們回到編輯器中的 src 資料夾，打開 Minter.js 檔案。理解這個檔案的每個部分非常重要，因為它是我們接下來要處理的主要 React component。

在這個檔案的最上方，我們有一些 state 變數，會在特定事件發生後更新。

以下是每個變數所代表的意義：

• walletAddress - 儲存使用者錢包地址的字串
• status - 包含要顯示在 UI 底部訊息的字串
• name - 儲存 NFT 名稱的字串
• description - 儲存 NFT 描述的字串
• url - 指向 NFT 數位資產的連結字串

在這些 state 變數之後，你會看到三個尚未實作的函式：useEffect、connectWalletPressed、和 onMintPressed。你會注意到這些函式都是 async，因為我們將在其中發出非同步的 API 呼叫！它們的名稱就對應了各自的功能：

• useEffect- 這是一個 React hook，會在你的 component 渲染後被呼叫。因為它傳入了一個空陣列 [] 作為 prop（見第 3 行），所以它只會在 component_第一次_渲染時被呼叫。在這裡，我們會呼叫錢包監聽器以及另一個錢包函式，來更新 UI 以反映錢包是否已經連接。
• connectWalletPressed - 這個函式會被呼叫，用來將使用者的 Metamask 錢包連接到我們的 dApp。
• onMintPressed - 這個函式會被呼叫，用來鑄造使用者的 NFT。

在這個檔案的接近尾端，是我們 component 的 UI。如果你仔細看這段程式碼，會注意到當對應文字欄位中的輸入有變化時，我們會更新 url、name、和 description 這幾個 state 變數。

你也會看到，當 ID 分別為 mintButton 和 walletButton 的按鈕被點擊時，connectWalletPressed 和 onMintPressed 會分別被呼叫。

最後，來看看這個 Minter component 是在哪裡被加入的。

如果你打開 App.js 檔案，這是 React 中作為所有其他 component 容器的主要 component，你會看到我們的 Minter component 是在第 7 行被注入的。

在本教學中，我們只會編輯 Minter.js 檔案，並在 src 資料夾中新增檔案。

現在我們了解要處理的東西了，接下來設定我們的 Ethereum 錢包吧！

第 3 步：設定你的 Ethereum 錢包

為了讓使用者能夠與你的智能合約互動，他們需要將 Ethereum 錢包連接到你的 dApp。

下載 MetaMask

在本教學中，我們會使用 Metamask，這是一個瀏覽器中的虛擬錢包，用來管理你的 Ethereum 帳戶地址。如果你想更了解 Ethereum 上的交易是如何運作的，可以看看 Ethereum foundation 的這個頁面。

你可以在這裡免費下載並建立 Metamask 帳戶。建立帳戶時，或如果你已經有帳戶了，請確保切換到右上角的「Ropsten Test Network」（這樣我們就不會用到真實的錢）。

從水龍頭領取 ether

為了鑄造我們的 NFT（或簽署任何 Ethereum 區塊鏈上的交易），我們需要一些假的 Eth。要取得 Eth，你可以前往 Sepolia faucet，輸入你的 Ropsten 帳戶地址，然後點擊「Send Ropsten Eth」。不久後你就會在 Metamask 帳戶中看到 Eth！

檢查餘額

為了再次確認餘額有到帳，讓我們透過 Alchemy's composer tool 發出一個 eth_getBalance 請求。這會回傳我們錢包中的 Eth 數量。輸入你的 Metamask 帳戶地址並點擊「Send Request」後，你應該會看到類似這樣的回應：

呼！我們的假錢都到位了！🤑

第 4 步：將 MetaMask 連接到你的 UI

現在我們的 Metamask 錢包已經設定好了，接下來把我們的 dApp 連接到它吧！

因為我們想遵循 M-V-C 這個典範，我們會建立一個獨立的檔案，包含用來管理 dApp 邏輯、資料和規則的函式，然後把這些函式傳給我們的前端（也就是我們的 Minter.js component）。

connectWallet 函式

為此，讓我們在 src 目錄下建立一個名為 utils 的新資料夾，並在裡面加入一個名為 interact.js 的檔案，用來包含所有錢包和智能合約互動的函式。

在 interact.js 檔案中，我們會撰寫一個 connectWallet 函式，之後會在 Minter.js component 中 import 並呼叫它。

在你的 interact.js 檔案中，加入以下內容：

來拆解一下這段程式碼在做什麼：

首先，我們的函式會檢查你的瀏覽器中 window.ethereum 是否已啟用。

如果 window.ethereum _不_存在，就代表沒有安裝 Metamask。這會回傳一個 JSON 物件，其中 address 是一個空字串，status 這個 JSX 物件則會告知使用者必須安裝 Metamask。

現在，如果 window.ethereum 存在，事情就變得有趣了。

透過 try/catch 迴圈，我們會嘗試呼叫 window.ethereum.request\(\{ method: "eth\_requestAccounts" \}\); 來連接 Metamask。呼叫這個函式會在瀏覽器中開啟 Metamask，使用者會被提示將他們的錢包連接到你的 dApp。

• 如果使用者選擇連接，method: "eth_requestAccounts" 會回傳一個陣列，包含所有連接到該 dApp 的使用者帳戶地址。整體來說，我們的 connectWallet 函式會回傳一個 JSON 物件，其中包含這個陣列中的第一個 address（見第 9 行），以及一個提示使用者向智能合約寫入訊息的 status 訊息。
• 如果使用者拒絕連接，那麼這個 JSON 物件回傳的 address 會是空字串，而 status 訊息則會反映使用者拒絕了連接。

將 connectWallet 函式加入你的 minter.js UI component

現在我們已經寫好了這個 connectWallet 函式，讓我們把它連接到 Minter.js component。

首先，我們必須把這個函式 import 到我們的 Minter.js 檔案中，方法是在 Minter.js 檔案頂部加入

import \{ connectWallet \} from "./utils/interact.js";。現在你 Minter.js 檔案的前 11 行應該像這樣：

然後，在我們的 connectWalletPressed 函式內，我們會呼叫剛才 import 進來的 connectWallet 函式，像這樣：

注意到我們大部分的功能是如何從 Minter.js component 抽離到 interact.js 檔案中的嗎？這正是為了遵循 M-V-C 典範！

在 connectWalletPressed 中，我們只是對我們 import 的 connectWallet 函式做一個 await 呼叫，並用其回應，透過對應的 state hooks 更新 status 和 walletAddress 變數。

現在，讓我們儲存這兩個檔案（Minter.js 和 interact.js），並測試一下目前為止的 UI。

在瀏覽器中打開 http://localhost:3000/ 頁面，點擊頁面右上角的「Connect Wallet」按鈕。

如果你已經安裝了 Metamask，你應該會被提示將錢包連接到你的 dApp。接受連接邀請。

你應該會看到錢包按鈕現在反映出你的地址已經連接了！Yasssss 🔥

接下來，試著重新整理頁面……奇怪了。即使錢包已經連接，我們的錢包按鈕還是在提示我們連接 Metamask……

不過別擔心！我們只要實作一個名為 getCurrentWalletConnected 的函式，就能輕鬆解決這個問題，它會檢查是否已經有地址連接到我們的 dApp，並相應地更新我們的 UI！

getCurrentWalletConnected 函式

在你的 interact.js 檔案中，加入以下的 getCurrentWalletConnected 函式：

這段程式碼和我們剛才寫的 connectWallet 函式非常相似。

主要的差異在於，這裡我們呼叫的不是會開啟 Metamask 讓使用者連接錢包的 eth_requestAccounts 方法，而是呼叫 eth_accounts 方法，它只會回傳一個包含目前已連接到我們 dApp 的 Metamask 地址的陣列。

要看到這個函式的實際效果，讓我們在 Minter.js component 的 useEffect 函式中呼叫它。

就像我們對 connectWallet 所做的那樣，我們必須從 interact.js 檔案 import 這個函式到 Minter.js 檔案，像這樣：

現在，我們只需要在 useEffect 函式中呼叫它：

注意，我們使用呼叫 getCurrentWalletConnected 的回應來更新我們的 walletAddress 和 status 這兩個 state 變數。

加入這段程式碼後，試著重新整理瀏覽器視窗。按鈕應該會顯示你已連接，並顯示你所連接錢包地址的預覽——即使重新整理後也一樣！😅

實作 addWalletListener

我們 dApp 錢包設定的最後一步，是實作錢包監聽器，這樣當錢包狀態改變時（例如使用者斷開連接或切換帳戶），我們的 UI 也會隨之更新。

在你的 Minter.js 檔案中，加入一個像這樣的 addWalletListener 函式：

快速拆解一下這裡發生了什麼事：

首先，我們的函式會檢查 window.ethereum 是否啟用（也就是 Metamask 是否已安裝）。

• 如果沒有，我們就把 status 這個 state 變數設為一個提示使用者安裝 Metamask 的 JSX 字串。
• 如果已啟用，我們就在第 3 行設定監聽器 window.ethereum.on("accountsChanged")，用來監聽 Metamask 錢包中的狀態變化，包括使用者連接額外帳戶到 dApp、切換帳戶、或斷開帳戶連接等情況。如果至少有一個帳戶已連接，walletAddress 這個 state 變數就會被更新為監聽器回傳的 accounts 陣列中的第一個帳戶。否則，walletAddress 就會被設為空字串。

最後，我們必須在 useEffect 函式中呼叫它：

就這樣！我們已經完成了所有錢包功能的程式撰寫！現在錢包已經設定好了，讓我們來搞清楚如何鑄造我們的 NFT！

第 5 步：NFT 元資料 101

還記得我們在本教學第 0 步提到的 NFT 元資料嗎——它賦予了 NFT 生命，讓它可以擁有數位資產、名稱、描述等屬性。

我們需要把這份元資料設定為一個 JSON 物件並儲存起來，這樣我們才能在呼叫智能合約的 mintNFT 函式時，把它當作 tokenURI 參數傳入。

「Link to Asset」、「Name」、「Description」這幾個欄位的文字，將構成我們 NFT 元資料的不同屬性。我們會把這份元資料格式化為一個 JSON 物件，但關於要把這個 JSON 物件儲存在哪裡，有幾個選項：

• 我們可以把它儲存在 Ethereum 區塊鏈上；不過由於 Ethereum 的特性，這麼做會非常昂貴（我們說的是動輒數百美元）。❌
• 我們可以把它儲存在像 AWS 或 Firebase 這樣的中心化伺服器上。但這樣就違背了我們去中心化的理念。❌
• 我們可以使用 IPFS，一個去中心化的協定和點對點網路，用於在分散式檔案系統中儲存和分享資料。由於這個協定是去中心化且免費的，這是我們最好的選擇！✅

為了把我們的元資料儲存到 IPFS，我們會使用 Pinata，一個方便的 IPFS API 和工具組。在下一步中，我們會詳細說明該怎麼做！

第 6 步：使用 Pinata 把你的元資料 pin 到 IPFS

如果你還沒有 Pinata 帳戶，在這裡註冊一個免費帳戶，並完成驗證你的電子郵件和帳戶的步驟。

建立你的 Pinata API key

前往 https://app.pinata.cloud/developers/api-keys 頁面，選擇最上方的「New Key」按鈕，將 Admin widget 設為啟用，並為你的 key 命名。

接著會出現一個彈出視窗，顯示你的 API 資訊。請務必把它妥善保存在安全的地方。

現在我們的 key 已經設定好了，讓我們把它加入專案中以便使用。

建立 .env 檔案

我們可以安全地把 Pinata 的 key 和 secret 儲存在環境檔案中。讓我們在你的專案目錄下安裝 dotenv package。

在終端機中開啟一個新分頁（和執行 local host 的那個分頁分開），確認你位於 minter-starter-files 資料夾中，然後在終端機執行以下指令：

接下來，在你的命令列輸入以下內容，在 minter-starter-files 的根目錄建立一個 .env 檔案：

這會在 vim（一種文字編輯器）中彈出你的 .env 檔案。要儲存它，依序在鍵盤上按下「esc」+「:」+「q」。

接著，在 VSCode 中，打開你的 .env 檔案，把你的 Pinata API key 和 API secret 加進去，像這樣：

儲存檔案，然後你就準備好開始撰寫將 JSON 元資料上傳到 IPFS 的函式了！

實作 pinJSONToIPFS

幸運的是，Pinata 提供了專門用於將 JSON 資料上傳到 IPFS 的 API，以及一個方便的 JavaScript with axios 範例，我們可以稍作修改後使用。

在你的 utils 資料夾中，建立另一個名為 pinata.js 的檔案，然後像這樣從 .env 檔案 import 我們的 Pinata secret 和 key：

接下來，把下方的額外程式碼貼進你的 pinata.js 檔案中。別擔心，我們會拆解說明每一部分的意思！

那這段程式碼到底做了什麼呢？

首先，它 import 了 axios，一個基於 promise 的 HTTP client，可在瀏覽器和 node.js 中使用，我們會用它來向 Pinata 發出請求。

然後我們有一個非同步函式 pinJSONToIPFS，它接受一個 JSONBody 作為輸入，並在 header 中帶上 Pinata api key 和 secret，全部都是為了向他們的 pinJSONToIPFS API 發出 POST 請求。

• 如果這個 POST 請求成功，那麼我們的函式會回傳一個 JSON 物件，其中 success boolean 為 true，以及我們元資料被 pin 上去的 pinataUrl。我們會把這個回傳的 pinataUrl 用作智能合約 mint 函式的 tokenURI 輸入。
• 如果這個 POST 請求失敗，那麼我們的函式會回傳一個 JSON 物件，其中 success boolean 為 false，以及一個反映我們錯誤的 message 字串。

和我們 connectWallet 函式的回傳型別一樣，我們回傳 JSON 物件，這樣我們就能用它們的參數來更新 state 變數和 UI。

第 7 步：載入你的智能合約

現在我們已經有辦法透過 pinJSONToIPFS 函式把 NFT 元資料上傳到 IPFS 了，接下來我們需要一個方法來載入智能合約的實例，這樣才能呼叫它的 mintNFT 函式。

合約 ABI

如果你仔細檢視過我們的檔案，你會注意到在 src 目錄下有一個 contract-abi.json 檔案。ABI 是必要的，用來指定合約會呼叫哪個函式，並確保該函式會以你所預期的格式回傳資料。

我們還需要一個 Alchemy API key 和 Alchemy Web3 API，來連接 Ethereum 區塊鏈並載入我們的智能合約。

建立你的 Alchemy API key

如果你還沒有 Alchemy 帳戶，在這裡免費註冊。

建立 Alchemy 帳戶後，你可以透過建立一個 app 來產生一組 API key。這樣我們就能向 Ropsten test network 發出請求。

在 Alchemy Dashboard 中，把滑鼠移到導覽列的「Apps」上，點擊「Create App」，前往「Create App」頁面

為你的 app 命名（我們選擇「My First NFT!」），提供簡短的描述，Environment 選擇「Staging」（用於你的 app 記錄管理），network 選擇「Ropsten」。

點擊「Create app」，就完成了！你的 app 應該會出現在下方的表格中。

太棒了，現在我們已經建立了 HTTP Alchemy API URL，把它複製到剪貼簿上，像這樣……

……然後把它加入我們的 .env 檔案。整體來說，你的 .env 檔案應該長這樣：

現在我們有了合約 ABI 和 Alchemy API key，可以準備使用 Alchemy Web3 來載入我們的智能合約了。

設定你的 Alchemy Web3 endpoint 和合約

首先，如果你還沒有安裝，你需要在終端機中進到 nft-minter-tutorial 這個 home directory 安裝 Alchemy Web3：

接下來，回到我們的 interact.js 檔案。在檔案最上方，加入以下程式碼，從 .env 檔案 import 你的 Alchemy key 並設定你的 Alchemy Web3 endpoint：

接下來，讓我們把合約 ABI 和合約地址加到檔案中。

一旦我們有了這兩者，就可以開始撰寫我們的 mint 函式了！

第 8 步：實作 mintNFT 函式

在你的 interact.js 檔案中，讓我們定義我們的函式 mintNFT，正如其名，它會鑄造我們的 NFT。

因為我們會發出多次非同步呼叫（向 Pinata 把元資料 pin 到 IPFS、透過 Alchemy Web3 載入智能合約、透過 Metamask 簽署交易），我們的函式也會是非同步的。

這個函式的三個輸入會是我們數位資產的 url、name、和 description。在 connectWallet 函式下方加入以下函式簽章：

輸入錯誤處理

自然地，在函式一開始加入某種輸入錯誤處理是合理的，這樣如果輸入參數不正確，我們就可以直接離開這個函式。在我們的函式中，加入以下程式碼：

基本上，如果任何一個輸入參數是空字串，我們就回傳一個 JSON 物件，其中 success boolean 為 false，status 字串會反映 UI 中的所有欄位都必須填寫完整。

將元資料上傳到 IPFS

一旦我們確定元資料格式正確，下一步就是把它包裝成一個 JSON 物件，並透過我們寫好的 pinJSONToIPFS 把它上傳到 IPFS！

為此，我們首先需要把 pinJSONToIPFS 函式 import 到我們的 interact.js 檔案中。在 interact.js 的最上方，加入：

回想一下，pinJSONToIPFS 接受一個 JSON body 作為輸入。所以在我們呼叫它之前，需要先把 url、name、和 description 這幾個參數格式化成一個 JSON 物件。

讓我們更新程式碼，建立一個名為 metadata 的 JSON 物件，然後用這個 metadata 參數呼叫 pinJSONToIPFS：

注意，我們把呼叫 pinJSONToIPFS(metadata) 的回應儲存在 pinataResponse 這個物件中。然後，我們解析這個物件是否有任何錯誤。

如果有錯誤，我們就回傳一個 JSON 物件，其中 success boolean 為 false，status 字串會反映我們的呼叫失敗了。否則，我們從 pinataResponse 中取出 pinataURL，並把它儲存為我們的 tokenURIvariable。

現在是時候用我們在檔案最上方初始化的 Alchemy Web3 API 來載入我們的智能合約了。在 mintNFT 函式的最底部加入以下這行程式碼，把合約設定在 window.contract 這個全域變數中：

我們在 mintNFT 函式中最後要加入的，是我們的 Ethereum 交易：

如果你已經熟悉 Ethereum 交易，你會注意到這個結構和你之前看過的頗為相似。

首先，我們設定交易的參數。

• to 指定接收者地址（我們的智能合約）
• from 指定交易的簽署者（使用者連接到 Metamask 的地址：window.ethereum.selectedAddress``\)
• data 包含了對我們智能合約 mintNFT 方法的呼叫，它接收我們的 tokenURI 和使用者的錢包地址 window.ethereum.selectedAddress 作為輸入

然後，我們發出一個 await 呼叫 window.ethereum.request，請 Metamask 簽署這筆交易。注意，在這個請求中，我們指定了我們的 eth 方法（eth\_SentTransaction），並傳入我們的 transactionParameters。此時，Metamask 會在瀏覽器中開啟，提示使用者簽署或拒絕這筆交易。

• 如果交易成功，這個函式會回傳一個 JSON 物件，其中 boolean success 設為 true，status 字串會提示使用者到 Etherscan 查看有關這筆交易的更多資訊。
• 如果交易失敗，這個函式會回傳一個 JSON 物件，其中 success boolean 設為 false，status 字串則會反映錯誤訊息。

整體來說，我們的 mintNFT 函式應該長這樣：

好大一個函式！現在，我們只需要把 mintNFT 函式連接到我們的 Minter.js component……

第 9 步：把 mintNFT 連接到我們的 minter.js 前端

打開你的 Minter.js 檔案，把最上方的 import \{ connectWallet \} from "./utils/interact.js"; 這一行更新為：

最後，實作 onMintPressed 函式，對你 import 的 mintNFT 函式發出 await 呼叫，並更新 status 這個 state 變數，以反映我們的交易是成功還是失敗：

第 10 步：把你的 NFT 部署到一個上線的網站

準備好讓你的專案上線，供使用者互動了嗎？看看這篇教學，了解如何把你的 Minter 部署到一個上線的網站：

第 11 步：席捲整個區塊鏈世界 🚀

開玩笑的，你已經完成整篇教學了！回顧一下，透過建立一個 NFT minter，你成功學會了如何：

• 透過前端專案連接到 Metamask
• 從前端呼叫智能合約方法
• 使用 Metamask 簽署交易

你大概會想在錢包中展示透過你的 dApp 鑄造的 NFT——所以別忘了看看我們的簡短教學 How to View Your NFT in Your Wallet！

還有，一如既往，如果你有任何問題，歡迎造訪 Alchemy support center。我們很期待看到你把這篇教學中的概念，應用到你未來的專案中！🧙‍♂️