如何使用IPFS和Filecoin建立NFT

挑戰1 - 部署一個 NFT 合約

工具使用

- Node.js, version 16- NPM, version 7- HardHat - ethereum development framework & blockchain simulator
    - 
- OpenZeppelin Contracts - base Solidity contracts
    - 

步驟
1. 為專案新建一個目錄並輸入

mkdir nft-challengecd nft-challenge

2. 使用預設設定開啟一個新的NPM專案

npm init -y

3. 安裝 HardHat and OpenZeppelin 合約作為開發依賴項

npm install --save-dev hardhat @openzeppelin/contracts

4. 使用HardHat生成專案scaffold

npx hardhat

當提示安裝依賴項時，接受預設值。最後你會看到如下資訊:

✨ Project created ✨
Try running some of the following tasks:
  npx hardhat accounts
  npx hardhat compile
  npx hardhat test
  npx hardhat node
  node scripts/sample-script.js
  npx hardhat help

並且目錄下會建立一些新檔案

ls
contracts         node_modules      package.json      test
hardhat.config.js package-lock.json scripts

5. （可選）使用Git來管理你的程式碼

git init .
git add .
git commit -m 'solidity boilerplate'

6. 用你最擅長的IDE並開啟專案目錄

code .

點選  contracts 目錄，然後開啟  Greeter.sol，你將看到一個 “hello world” 合約。

7. 在合約檔案中建立一個名為 ‘GameItem.sol’ 的新檔案，把這個貼上進：
Source: 

// contracts/GameItem.sol// SPDX-License-Identifier: MITpragma solidity ^0.8.0;
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
contract GameItem is ERC721URIStorage {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;
    constructor() ERC721("GameItem", "ITM") {}    function awardItem(address player, string memory tokenURI)
        public
        returns (uint256)
    {        _tokenIds.increment();
        uint256 newItemId = _tokenIds.current();        _mint(player, newItemId);        _setTokenURI(newItemId, tokenURI);
        return newItemId;
    }
}

8. 編譯智慧合約

npx hardhat compile

9. 從HardHat框架中開啟示例指令碼
在你的編輯器中開啟 scripts/sample-script.js 。
將  Greeter 重新命名為  GameItem ，  greeter重新命名為  gameItem。 移除該引數 到  GameItem.deploy()。

最終結果中的  main 函式應該是這樣的:

async function main() {  // Hardhat always runs the compile task when running scripts with its command
  // line interface.
  //
  // If this script is run directly using `node` you may want to call compile
  // manually to make sure everything is compiled
  // await hre.run('compile');
  // We get the contract to deploy
  const GameItem = await hre.ethers.getContractFactory("GameItem");  const gameItem = await GameItem.deploy();  await gameItem.deployed();  console.log("GameItem deployed to:", gameItem.address);
}

10. 使用 hardhat 命令執行該指令碼：

npx hardhat run scripts/sample-script.js
GameItem deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

提示說它已經部署在這個地址上了！是不是看上去我們已經完成了？
不，還沒完。預設情況下，HardHat使用ephermeral blockhain模擬器作為它的目標環境，這對於外匯返傭 abitpart.com編寫自動化測試很有用，但是對互動式程式設計不太友好。

接下來我們將啟動一個本地節點，並且告訴HardHat使用它。

11. 在專案目錄中開啟一個新的終端，並且執行hardhat節點

npx hardhat node

12. 返回原始終端，將HARDHAT_NETWORK環境變數設定為localhost，並且重新執行該指令碼

export HARDHAT_NETWORK=localhost
npx hardhat run scripts/sample-script.js

指令碼輸出的結果大致是相同的，但是如果你檢視其他的終端，你將在hardhat的輸出中看到一些交易資訊。

挑戰 2

1. 在你的編輯器裡再次開啟 scripts/sample-script.js 
在合約部署完成後，嘗試呼叫一下 awardItem 函式

const accounts = await hre.ethers.getSigners()const player = accounts[0].addressconst cid = 'a-fake-cid'const tx = await gameItem.awardItem(player, `ipfs://${cid}`)const receipt = await tx.wait()for (const event of receipt.events) {  if (event.event !== 'Transfer') {    continue
  }
  console.log('token id: ', event.args.tokenId.toString())
  console.log('owner: ', event.args.to)
}const uri = await gameItem.tokenURI(1)
console.log('token uri:', uri)

2. 執行指令碼

npx hardhat run scripts/sample-script.js

挑戰 3

1. 安裝nft.storage客戶端

npm install nft.storage

2. 在你的編輯器中再次開啟 scripts/sample-script.js 
匯入client package和File constructor，引用node.js內建的 readFile

const { readFile } = require('fs/promises')const { NFTStorage, File } = require('nft.storage')

3. 建立一個新的函式來載入一張圖片並儲存它

async function storeNFTData() {  const apiKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJnaXRodWJ8Njc4NzE1IiwiaXNzIjoibmZ0LXN0b3JhZ2UiLCJpYXQiOjE2MTYwNzM2MjMxMTksIm5hbWUiOiJkZWZhdWx0In0.RJj_mR2zwTJ1_4gpAapGdkQcw3gSUz1SMmIHgr10Xng'
  const client = new NFTStorage({ token: apiKey })  const filename = '../files/nft.jpg'
  const data = await readFile(filename)  const file = new File([data], 'nft.jpg', { type: 'image/jpeg' })  console.log('sending data to nft.storage...')  const metadata = await client.store({    name: 'Encode Club Demo NFT',    description: 'Hello Encode Club!',    image: file
  })  console.log('stored NFT data! metadata URL:', metadata.url)  return metadata.url}

4. 使用storeNFTData方法獲得 metadata URL，然後建立該token，例如下面所示：
在  main函式中：

const metadataURI = await storeNFTData()const tx = await gameItem.awardItem(player, metadataURI)