Day 27【Deploy NFT - Deploy on Testnet】Hey Listen, I QUIT!!

【前言】
在这之前我们已经在 Day 20 介绍过了 IPFS，今天我们要来介绍如何把我们的 NFT Image 以及 MetaData 储存在 IPFS 中！然後在测试网上成功的完成所有我们要呈现的东西！

【Pinata】
首先我们要到这个 Pinata 注册一个帐号，我们拥有免费的 1GB 空间可以上传我们的档案！

Pinata | Your Home for NFT Media

这里我们把之前产出的图片放到一个名为 IMAGE 的资料夹，并且整个资料夹上传到 Pinata。之後我们就可以看到一个名为 CID 的东西，这就会是我们的重点！我们把它复制然後回到合图的程序码。

先把刚刚的 CID 贴上我们之前一直跳过不讲的 baseImageUri！

// MY CID: Qmf6mnqZCyB8URJDF1xSJ6svjF1Vd61CAGepkQtL6rZJLA
const baseImageUri = "ipfs://Qmf6mnqZCyB8URJDF1xSJ6svjF1Vd61CAGepkQtL6rZJLA";

我们可以来到 Opensea 的官方开发文件看看我们需要什麽样子的 MetaData。这里我们在 Day 20 有查看过的 image URI 就特别重要啦。

Metadata Standards

接下来我们要使用 HashLips 大大提供的超神改 JSON 的方法，我一开始还以为是某个 JS 套件，结果居然是他自己写的！

好我们先创立一个名为 utils 的资料夹，在里面放上名为 updateBaseUri.js 的档案，然後打上以下的程序码。其实就是抓取路径还有把刚刚更新的 baseImageUri 拉进来使用。然後再根据我们的 MetaData List 来更新所有的 MetaData 里面的 image uri！

"use strict";

const fs = require("fs");
const path = require("path");
const isLocal = typeof process.pkg === "undefined";
const basePath = isLocal ? process.cwd() : path.dirname(process.execPath);

const { baseImageUri } = require("../input/DinoConfig.js");
const baseUri = baseImageUri;

// read json data
let rawdata = fs.readFileSync(`${basePath}/output/json/_metadata.json`);
let data = JSON.parse(rawdata);

data.forEach((item) => {
    item.image = `${baseUri}/${item.id}.png`;
    fs.writeFileSync(
        `${basePath}/output/json/${item.id}.json`,
        JSON.stringify(item, null, 2)
    );
});

fs.writeFileSync(
    `${basePath}/output/json/_metadata.json`,
    JSON.stringify(data, null, 2)
);

console.log(`Updated baseUri for images to ===> ${baseUri}`);

然後我们再到 command line 打上：再打开每一个 NFT 的 MetaData 就会变成是我们刚刚重新设定的 CID 了！

node utils/updateBaseUri.js

之後我们把这个存有更新过後 JSON 的资料夹整个上传到 Pinata。之後我们就可以得到一个新的 CID ，这就会是我们的第二个重点！把它复制起来然後回到我们奇幻的智能合约！

【Back to Smart Contract】

再次来到我们昨天设置好的智能合约，来到 Deploy 的地方，还记得我们输入了：_Name 以及 _Symbol 填入後却跳过的 _INTBASEURI 吗？把刚刚上传在 Pinata 的 JSON 资料夹的 CID 复制起来，用以下的格式贴上！

ipfs://QmXZtatG89AJSr6phMXpFiz5kRWXUPdLNsmWM35LtEdmuu/

请记得一定要！在最前面加上 ipfs://，以及最後面加上 /，这很重要！确认无误之後就可以 Deploy。

然後一样的步骤， SIGN 这份合约， Deploy 成功之後复制智能合约的地址然後到 Etherscan 检查是否跟我们预想中的一样。如果依切都正确无误的话，就可以到 Opensea Testnet 看看我们的重头戏啦！

成功！！！！测试成功了！

【小结】

今天的篇幅虽然比较少一点点，但前两天认真一看真的是写的超长的阿！今天就让我好好休息吧哈哈哈哈哈哈，明天要来实作 Minting dAPP，让顾客可以在我们的网站里面 MINT NFT，又要回到 web3.js 以及 ethers.js 怀抱了，希望这次可以顺利！

【参考资料 - File Upload】
Upload 10000 NFTs to IPFS

• nft.storage
  End-to-end experience
  ipfs-shipyard

• IPFS
  IPFS File Upload Tutorial - Web3 Programming, Moralis
  Upload Images to IPFS With React JS · #2 IPFS Image Storage DApp Tutorial