---
title: "如何使用 web3.js 鑄造 NFT"
description: "了解如何使用 Web3.js 鑄造 NFT 的步驟教學，輕鬆掌握數位資產，發揮你的創造力。"
---

# 如何使用 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](https://www.alchemy.com/blog/how-to-mint-an-nft-with-ethers-js)
- 👛  [How to view your NFT in your mobile wallet](https://www.alchemy.com/blog/how-to-view-your-nft-in-your-mobile-wallet)
- 💸  [How to set a price on an NFT](https://www.alchemy.com/blog/how-to-set-a-price-on-an-nft)
- 💻  [NFT minter tutorial: How to create a full stack dApp](https://www.alchemy.com/blog/nft-minter-tutorial-how-to-create-a-full-stack-dapp)

「mint 一個 NFT」指的是在區塊鏈上發佈你的 ERC721 token 的一個獨特實例。既然我們已經在這個 NFT 教學系列的 Part I 中成功[將智能合約部署到 Sepolia 網路](https://www.alchemy.com/blog/how-to-create-an-nft)，接下來就來實際運用一下 web3 技能，mint 一個 NFT 吧！

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

## 步驟 1：安裝 Web3

如果你跟著第一篇教學[建立了你的 NFT 智能合約](https://www.alchemy.com/docs#create-and-deploy-your-smart-contract-using-hardhat)，你應該已經用過 Ethers.js。Web3 和 Ethers 類似，都是用來簡化向 Ethereum 區塊鏈發送請求的函式庫。在本教學中，我們會使用 [Alchemy Web3](https://www.alchemy.com/docs)，這是一個強化版的 web3 函式庫，提供自動重試機制及穩固的 WebSocket 支援。

在你的專案根目錄執行：

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

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

## 步驟 3：取得你的合約 ABI

我們的合約 ABI（Application Binary Interface）是用來與智能合約互動的介面。[Hardhat](https://www.alchemy.com/dapps/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。

<CalloutBlock>

Interplanetary File System（IPFS）是一個去中心化協定，以及用於在分散式檔案系統中儲存和共享資料的點對點網路。

</CalloutBlock>

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

建立帳號後：

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

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

<ImageBlock
  src="https://media.alchemy.com/1704625396-pinata-upload.gif"
  alt="Pinata 儀表板：將 NFT 圖片資產上傳至 IPFS"
  width={844}
  height={480}
  caption="將檔案上傳至 Pinata"
/>

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

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

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

<ImageBlock
  src="https://media.alchemy.com/1704625535-upload-json-file-to-pinata.gif"
  alt="Pinata 儀表板：上傳 NFT metadata JSON 檔案"
  width={844}
  height={480}
  caption="將 json 檔案上傳至 Pinata"
/>

## 步驟 5：建立合約的實例

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

<ImageBlock
  src="https://media.alchemy.com/1704625679-create-an-instance-of-contract.png"
  alt="Etherscan：尋找已部署的 NFT 合約地址"
  width={2880}
  height={1510}
  caption="建立你的合約實例"
/>

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

接著我們會使用 web3 的 [contract method](https://web3js.readthedocs.io/en/v1.2.0/web3-eth-contract.html?highlight=constructor#web3-eth-contract)，透過 ABI 與地址建立我們的合約。在你的 **mint-nft.js** 檔案中，加入以下內容：

## 步驟 6：更新 .env 檔案

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

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

## 步驟 7：建立你的交易

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

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

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

<CalloutBlock>

**如何 mint 多個 NFT：** 要在單一指令中 mint x 個 NFT，我們可以在包裝 minting 流程的函式內，使用一個從 0 跑到 x-1 的簡單 for 迴圈。這樣一來，每次呼叫這個包裝 mint 函式時，就能有效地 mint x 個 NFT。

</CalloutBlock>

## 步驟 8：簽署交易

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

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

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

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

以下是取得 hash code 的方法：

<ImageBlock
  src="https://media.alchemy.com/1704625935-get-the-hashcode-on-pinata.gif"
  alt="Pinata 儀表板：複製已上傳 metadata 的 IPFS hash"
  width={844}
  height={480}
  caption="在 Pinata 上取得你的 hashcode"
/>

<CalloutBlock>

在另一個視窗中載入 [https://gateway.pinata.cloud/ipfs/](https://gateway.pinata.cloud/ipfs/%3Chash-code%3E)，再次確認你複製的 hash code 連結到的是你的 `metadata.json`。該頁面看起來應該類似下方截圖：

</CalloutBlock>

<ImageBlock
  src="https://media.alchemy.com/1704626043-returned-hashcode-on-pinata.png"
  alt="從 Pinata IPFS gateway 回傳的 NFT metadata JSON"
  width={2878}
  height={1714}
  caption="Pinata 回傳的 hashcode"
/>

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

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

接著，前往你的 [Alchemy mempool](https://dashboard.alchemy.com/mempool) 查看交易的狀態（是待處理中、已被打包，還是被網路丟棄）。如果你的交易被丟棄了，查看 [Sepolia Etherscan](https://sepolia.etherscan.io/) 並搜尋你的交易 hash 也會有幫助。

<ImageBlock
  src="https://media.alchemy.com/1704626257-search-for-transaction-hash.png"
  alt="在區塊瀏覽器搜尋 NFT mint 交易的 hash"
  width={2846}
  height={1586}
  caption="搜尋你的交易 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](/blog/how-to-view-your-nft-in-your-mobile-wallet)。