如何使用 web3.js 鑄造 NFT

本教學說明如何使用 Web 3 及我們在〈Part I: How to Create an NFT〉中建立的智能合約，在 Ethereum 區塊鏈上 mint 一個 NFT。

預估完成本指南所需時間：約 10 分鐘

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

• 🪄 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
• 💻 NFT minter tutorial: How to create a full stack dApp

「mint 一個 NFT」指的是在區塊鏈上發佈你的 ERC721 token 的一個獨特實例。既然我們已經在這個 NFT 教學系列的 Part I 中成功將智能合約部署到 Sepolia 網路，接下來就來實際運用一下 web3 技能，mint 一個 NFT 吧！

完成本教學後，你就能用這段程式碼 mint 任意數量的 NFT——開始吧！

步驟 1：安裝 Web3

如果你跟著第一篇教學建立了你的 NFT 智能合約，你應該已經用過 Ethers.js。Web3 和 Ethers 類似，都是用來簡化向 Ethereum 區塊鏈發送請求的函式庫。在本教學中，我們會使用 Alchemy Web3，這是一個強化版的 web3 函式庫，提供自動重試機制及穩固的 WebSocket 支援。

在你的專案根目錄執行：

步驟 2：建立 mint-nft.js 檔案

在你的 scripts 目錄下，建立一個 mint-nft.js 檔案，並加入以下程式碼：

步驟 3：取得你的合約 ABI

我們的合約 ABI（Application Binary Interface）是用來與智能合約互動的介面。Hardhat 會自動為我們產生 ABI，並將其儲存在 MyNFT.json 檔案中。為了使用它，我們需要在 mint-nft.js 檔案中加入以下程式碼來解析內容：

如果你想查看 ABI，可以將它印到 console：

若要執行 mint-nft.js 並在 console 中看到印出的 ABI，請到終端機執行

步驟 4：使用 IPFS 設定你的 NFT metadata

還記得 Part I 教學中提到的嗎？我們的 mintNFT 智能合約函式接受一個 tokenURI 參數，該參數應指向一個描述 NFT metadata 的 JSON 文件——這正是讓 NFT 真正「活起來」的關鍵，讓它能擁有可設定的屬性，例如名稱、描述、圖片，以及其他 attributes。

我們將使用 Pinata，一個便利的 IPFS API 與工具組，來儲存我們的 NFT 資產與 metadata，確保我們的 NFT 真正去中心化。如果你還沒有 Pinata 帳號，請到 pinata.cloud 註冊一個免費帳號，並完成電子郵件驗證的步驟。

建立帳號後：

• 點擊右上角的「Pinata Upload」按鈕
• 上傳一張圖片到 pinata——這會是你 NFT 的圖片資產。你可以自由為這個資產命名
• 上傳完成後，頁面頂端會出現一個綠色彈出視窗，讓你查看上傳內容的 hash —> 複製這個 hash code。你可以透過以下位置查看你的上傳內容：https://gateway.pinata.cloud/ipfs/<hash-code>

為了幫助偏好視覺學習的讀者，上述步驟整理如下：接下來，我們需要再上傳一份文件到 Pinata。但在那之前，我們得先建立它！

在你的根目錄下，新建一個叫做 nft-metadata.json 的檔案，並加入以下 json 程式碼：

​你可以自由修改 json 裡的資料。你可以移除或新增 attributes 區塊的內容。最重要的是，確保 image 欄位指向你 IPFS 圖片的位置——否則你的 NFT 就會變成一張（雖然很可愛的！）狗狗照片。

編輯完 json 檔案後，儲存它，並依照和上傳圖片相同的步驟，上傳到 Pinata。

步驟 5：建立合約的實例

現在，為了與我們的合約互動，我們需要在程式碼中建立它的一個實例。為此，我們需要合約地址，可以從部署結果或 Etherscan 中查詢你用來部署合約的地址取得。

在上面的範例中，我們的合約地址是 0x81c587EB0fE773404c42c1d2666b5f557C470eED。

接著我們會使用 web3 的 contract method，透過 ABI 與地址建立我們的合約。在你的 mint-nft.js 檔案中，加入以下內容：

步驟 6：更新 .env 檔案

現在，為了建立並向 Ethereum 鏈發送交易，我們會使用你的公開 ethereum 帳號地址來取得帳號的 nonce（下面會說明）。

把你的公鑰加入 .env 檔案——如果你完成了教學的第一部分，我們的 .env 檔案現在應該長這樣：

步驟 7：建立你的交易

首先，讓我們定義一個叫做 mintNFT(tokenData) 的函式，並依照以下方式建立我們的交易：

1. 從 .env 檔案中取得你的 PRIVATE_KEY 和 PUBLIC_KEY。
2. 接著，我們需要確認帳號的 nonce。nonce 規範是用來追蹤從你的地址發送出去的交易數量——這是出於安全考量，並防止重放攻擊所必需的。要取得從你地址發送的交易數量，我們使用 getTransactionCount。
3. 最後，我們會用以下資訊設定交易：
4. 'from': PUBLIC_KEY：我們交易的來源是我們的公開地址
5. 'to': contractAddress：我們想互動並發送交易的合約
6. 'nonce': nonce：帳號 nonce，代表從我們地址發出的交易數量
7. 'gas': estimatedGas：完成交易所需的預估 gas
8. 'maxPriorityFeePerGas': estimatedFee：每單位 gas 出價的預估費用
9. 'data': nftContract.methods.mintNFT(PUBLIC_KEY, md).encodeABI()：我們希望在這次交易中執行的運算——在這裡就是 mint 一個 NFT

你的 mint-nft.js 檔案現在應該長這樣：

步驟 8：簽署交易

現在我們已經建立好交易，接下來需要簽署它才能送出去。這裡就會用到我們的私鑰。

web3.eth.sendSignedTransaction 會回傳交易的 hash，我們可以用它來確認交易是否已被打包，還是被網路丟棄了。你會注意到在交易簽署的部分，我們加入了一些錯誤檢查，以便得知交易是否成功送出。‍

步驟 9：呼叫 mintNFT 並執行 node contract-interact.js

還記得你上傳到 Pinata 的 metadata.json 嗎？從 Pinata 取得它的 hash code，並將以下內容傳入對 mintNFT https://gateway.pinata.cloud/ipfs/ 的呼叫中​

以下是取得 hash code 的方法：

整體而言，你的程式碼應該會長得像這樣：

現在，執行 node scripts/mint-nft.js 來部署你的 NFT。幾秒鐘後，你應該會在終端機看到類似這樣的回應：

接著，前往你的 Alchemy mempool 查看交易的狀態（是待處理中、已被打包，還是被網路丟棄）。如果你的交易被丟棄了，查看 Sepolia Etherscan 並搜尋你的交易 hash 也會有幫助。

就是這樣！你現在已經在 Ethereum 區塊鏈上部署並 mint 了一個 NFT 🎉

利用 mint-nft.js，你可以隨心所欲（以及你的錢包所能負擔的程度）mint 任意數量的 NFT！只要記得每次都傳入描述該 NFT metadata 的新 tokenURI——否則你只會做出一堆 ID 不同、但內容一模一樣的 NFT。

想必你會想在你的錢包裡秀出你的 NFT 吧 😉——所以別忘了看看 Part III：How to View Your NFT in Your Wallet。