[Day 28] 建造鐵人賽專屬NFT！（五）設定圖片/名稱Metadata並上傳至IPFS！

2022 iThome 鐵人賽

DAY 28

Web 3

NFT、區塊鏈、比特幣，這些到底是什麼？？讓我們從頭認識這些酷東西吧！發出屬於自己的NFT！系列第 28 篇

14th鐵人賽比特幣區塊鏈 nft 智能合約

樂弟

2022-10-11 21:42:30

2527 瀏覽

分享至

上篇回顧

昨天我們正式設定完所有智能合約程式碼的部分了，今天我們要把Metadata上傳到IPFS上面，完成最後圖片/資訊等等的設定，讓我們開始吧！

需要的東西

分析

首先，如果你還不知道Metadata或IPFS是什麼的話請先看這篇文章，不然接下來會看不懂喔!
先幫大家回顧一下BAYC的Metadata長什麼樣子，他是一個JSON檔案，並透過baseURI更換末端後綴的方式實現每個NFT不同JSON檔案。這是編號0#BAYC的Metadata:
ipfs://QmeSjSinHpPnmXmspMjwiXyN6zS4E9zccariGR3jxcaWtq/0
而打開之後長這樣

其中image為此NFT的圖片並存於另一串IPFS地址中，而下面則是NFT的屬性等其他資訊...
所以待會時做的時候為了不要讓JSON檔案中的image留空
我們會先從圖片開始做起

圖片

首先我們總共會需要30張圖片，並且希望長的不要完全一樣
以下是我用Canva快速/人工做出來的30天鐵人賽NFT代表圖
其下面每天各自寫著Day幾

而檔案命名為了等一下方便起見，要從0開始往上數著命名
0.png,1.png,2.png.....29.png
並且統一放在一個資料夾裡面

JSON檔案

現在我們有圖片可以開始建立JSON檔案了！
而這個JSON檔案其實可以填入不只圖片跟屬性...，讓我們先來看看OpenSea對Metadata的顯示方式

了解完之後我們建立一個新資料夾存放JSON檔案，並新增第一個0.json
(如果你沒有Json的編輯器，建議可以使用Notepad++)
顯示名稱name填入Ironman2022 NFT Day1
圖片image先留空，因為我們還沒上傳到IPFS上
詳細資訊description填入簡易的說明
外部連結external_url填入此次主題鐵人賽的網址
屬性attributes分別有day的分類(填入第幾天)以及creator作者(統一填入LD)
注意, 屬性的字母必須小寫否則會有問題
最後完成應該會長這樣

{
  "name": "Ironman2022NFT Day1",
  "image": "ipfs://????",
  "description": "This NFT collection is created by LD, to commemorate 2022 iThome Ironman Event",
  "external_url": "https://ithelp.ithome.com.tw/users/20152537/ironman/5764",
  "attributes": [
    {
      "trait_type": "day",
      "value": "1"
    },
    {
      "trait_type": "creator",
      "value": "LD"
    }
  ]
}

一樣總共需要建立30個檔案並且從0.json開始命名
所以做完之後應該會長這樣

實作

上傳圖片至IPFS系統

以上步驟都做完了之後我們就準備好了！
現在我們要開始把檔案上傳至IPFS系統，而這裡我們要使用一個免費的集成服務Pinata
因為如果要自己上傳檔案至IPFS的話相對麻煩一些，就跟挖礦一樣需要下載一些軟體等等
這裡我們透過Pinata提供的服務，其免費方案可以讓我們上傳1G/100個內的檔案

首先我們先進入官網註冊帳號
登入之後開始上傳檔案, 這邊要先上傳圖片
點擊上傳 > 資料夾 > 選擇剛剛存放圖片的資料夾並命名
接著複製這串CID碼我們就可以擁有整組圖片系列囉
我們透過https://ipfs.io/ipfs的閘道觀看資料, 貼上剛剛的CID編碼, 結尾加上0~29.png, 成功！
(因為我們沒有下載IPFS程式所以只能透過他人的服務讀取內容, 有時候ipfs.io不會這麼即時的更新)

填入IPFS圖片位置至JSON檔案

我們在JSON檔案中image: 的欄位填入ipfs://CID編碼/天.png
一樣用0.json做示範的話應該會長這樣

{
  "name": "Ironman2022NFT Day1",
  "image": "ipfs://QmR8zPhsPJftDkhgHEGhMkKE7YuN9hJ12hqGfjHbJvxpG9/0.png",
  "description": "This NFT collection is created by LD, to commemorate 2022 iThome Ironman Event",
  "external_url": "https://ithelp.ithome.com.tw/users/20152537/ironman/5764",
  "attributes": [
    {
      "trait_type": "day",
      "value": "1"
    },
    {
      "trait_type": "creator",
      "value": "LD"
    }
  ]
}

接著確認每個JSON檔案都完成修改並儲存

上傳JSON至IPFS系統

一樣回到Pinata的頁面點擊
上傳 > 資料夾 > 選擇剛剛存放JSON的資料夾並命名

這次帶大家使用Pinata提供的閘道https://gateway.pinata.cloud/ipfs/進行資料查閱
(因為我們資料是從Pinata上傳, 所以從這邊可以最直接快速的讀取到資料)
貼上JSON資料的CID編碼，並一樣於結尾處加上0~29.json，完成之後長這樣

回到Remix填入JSON的IPFS地址

複製好JSON資料的IPFS地址後回到Remix頁面
這邊有個小變動，我們先把原本的baseURI()函式整個移除，取而代之我們將要直接覆蓋原先ERC721的tokenURI()函式，個別設定每一個代幣的Metadata URI，並供使用者查詢。
我們先在上面分別建立baseURI以及baseExtension的變數，其前者填上IPFS的地址並加上反斜線/；後者填入.json，並開始設定tokenURI函式。

以上我們就設定完所有NFT代幣編號的Metadata了！趕快進測試