學習如何在Flow和IPFS上展示NFT收藏品：一個NFT教學-網路3.0-PHP中文網

首頁

網路3.0

學習如何在Flow和IPFS上展示NFT收藏品：一個NFT教學

王林

Jan 26, 2024 pm 07:54 PM

nft區塊鏈技術收藏品ipfsflow

php小編子墨為您帶來一篇關於展示Flow和IPFS上的NFT收藏品的教學。作為近年來備受熱議的數位資產，NFT在藝術、音樂、遊戲等領域逐漸流行起來。本教學將教您如何使用Flow和IPFS平台展示和分享您的NFT收藏品，讓您能夠更好地展示和推廣您的數位藝術作品。無論您是初學者還是有一定經驗的NFT收藏者，本教學都將為您提供全面的指導和技巧，讓您能夠輕鬆展示自己的創作成果。讓我們一起進入這個令人興奮的數位收藏品世界吧！

在本文中，我們將建立一個簡單的React應用程序，該應用程式與Flow智能合約交互，以驗證和獲取用戶擁有的 NFT。我們還將解析 NFT 的元數據，以獲取 NFT 的底層標的資產（在本例中為視訊）的 IPFS 位置。這個應用程式類似於 NBA Top Shot，但它展示的是不同的影片內容。

學習如何在Flow和IPFS上展示NFT收藏品：一個NFT教學

專案設定

在本教學中，需要使用Flow模擬器。如果忘記如何啟動模擬器，可以查看先前的文章或Flow CLI文件。要注意的是，Flow模擬器是記憶體中模擬Flow區塊鏈的工具。如果關閉了模擬器，則需要繼續執行以下步驟：

啟動Flow 模擬器
部署專案
鑄造你的NFT
在本教學第一部分NFT 教學- 用Flow 和IPFS創建NFT 詳細介紹了其中的每一個步驟。

此外，還需要在你的機器上安裝 NodeJS。你可以在這裡安裝。

和之前一樣，你需要一個文字編輯器。

初始化 React 和安裝依賴

在第一部分教學中建立的 pinata-party 專案目錄下建立 React 應用程式（你也可以在一個全新的目錄中建立你的 React 應用程式）。

要創建我們的應用程序，運行以下命令：

npx create-react-app pinata-party-frontend

當一切安裝完成後，你會有一個新的目錄，叫做pinata-party-frontend，切換到該目錄，安裝依賴。

首先，參考 Flow 文檔，需要安裝 Flow JS SDK。前端的設定我們只需要按照 Flow 的文檔進行即可：

npm i @onflow/fcl @onflow/types

一些值需要作為應用程式的全域變數來存儲，這裡使用環境變數。在 react 中，建立一個 .env 文件，並設定鍵值對，其中鍵值前綴為 REACT_APP。在 Flow 的文檔裡，設定為與 Flow 的測試網連接。在本教學中，我們將連接到 Flow 模擬器。所以，需要做一些改變。在 .env 檔案中加入以下內容：

REACT_APP_ACCESS_NODE=http://localhost:8080REACT_APP_WALLET_DISCOVERY=https://fcl-discovery.onflow.org/testnet/authnREACT_APP_CONTRACT_PROFILE=0xf8d6e0586b0a20c7

將 REACT_APP_ACCESS_NODE 的值替換為上述的本機模擬器url。以部署專案時獲得的位址取代 REACT_APP_CONTRACT_PROFILE 值。

還需要建立一個設定文件，用來與 Flow JS SDK 互動。在 src 目錄下建立一個名為 config.js 的檔案。增加以下內容：

import {config} from "@onflow/fcl"config().put("accessNode.api", process.env.REACT_APP_ACCESS_NODE) .put("challenge.handshake", process.env.REACT_APP_WALLET_DISCOVERY) .put("0xProfile", process.env.REACT_APP_CONTRACT_PROFILE)

這個設定檔只是幫助 JS SDK 與 Flow 區塊鏈（或本例中的模擬器）一起工作。要使這個檔案在整個應用程式中可用，請打開 index.js 檔案並添加這一行。

import "./config"

現在，讓我們連接一些認證。如果你不想的話，可以不必強迫人們認證後進入網站，教程的第三篇文章，在實現 NFT 資產的轉移時，認證將是很重要的。

我們需要建立一個認證元件。在你的 src 目錄下，建立一個名為 AuthCluster.js 的檔案。在該文件內，加入以下內容：

import React, {useState, useEffect} from 'react'import * as fcl from "@onflow/fcl"const AuthCluster = () => {  const [user, setUser] = useState({loggedIn: null})  useEffect(() => fcl.currentUser().subscribe(setUser), [])  if (user.loggedIn) {    return (      <div>        <span>{user?.addr ?? "No Address"}</span>        <button className="btn-primary" onClick={fcl.unauthenticate}>Log Out</button>      </div>    )  } else {    return (      <div>        <button className="btn-primary" onClick={fcl.logIn}>Log In</button>        <button className="btn-secondary" onClick={fcl.signUp}>Sign Up</button>      </div>    )  }}export default AuthCluster//  rawAuthCluster.js

程式碼很簡單，使用一個登入和註冊按鈕，利用Flow JS SDK 的能力連接到錢包提供者，你可以註冊一個帳戶或用現有帳戶登錄。

現在需要把這個元件放到我們的應用程式中。我們先簡單點吧。將你的 App.js 檔案替換為以下內容。

import './App.css';import AuthCluster from './AuthCluster';function App() {  return (    <div className="App">      <AuthCluster />    </div>  );}export default App;

如果你現在啟動應用程式(npm start)，你應該會看到一個有登入和註冊按鈕的頁面。事實上，這兩個按鈕都是有功能的，試試看。

好了，現在 React 應用程式已經基本設定好了，讓我們開始建立獲取帳戶的 NFT 並顯示它們。

從 Flow 取得 NFT

為了顯示我們在第一篇文章中鑄幣的 NFT，需要與 Flow 區塊鏈進行通訊。現在是與 Flow 模擬器進行通訊。設定 .env 檔案時，已經告訴應用程序，模擬器是在 8080 連接埠上運行的。但現在，如何使用 JavaScript 與 Flow 互動？

幸運的是，Flow 在他們的 JS SDK 中內建了這個功能。如果你還記得，我們之前寫了一個腳本，根據一個 NFT 的 token id 來查找它，並傳回 token 的元資料。它看起來像這樣：

import PinataPartyContract from 0xf8d6e0586b0a20c7pub fun main() : {String : String} {    let nftOwner = getAccount(0xf8d6e0586b0a20c7)    // log("NFT Owner")        let capability = nftOwner.getCapability<&{PinataPartyContract.NFTReceiver}>(/public/NFTReceiver)    let receiverRef = capability.borrow()        ?? panic("Could not borrow the receiver reference")    return receiverRef.getMetadata(id: 1)}

CheckTokenMetadata.cdc

现在，我们只需要将其转换为 JavaScript 调用即可。让我们创建一个新的组件，既能获取数据，又能最终显示 NFT 数据。在你的 src 目录下，创建一个名为 TokenData.js 的文件。在该文件中，添加以下内容：

import React, { useState } from "react";import * as fcl from "@onflow/fcl";const TokenData = () => {  const [nftInfo, setNftInfo] = useState(null)  const fetchTokenData = async () => {    const encoded = await fcl      .send([        fcl.script`        import PinataPartyContract from 0xf8d6e0586b0a20c7        pub fun main() : {String : String} {          let nftOwner = getAccount(0xf8d6e0586b0a20c7)            let capability = nftOwner.getCapability<&{PinataPartyContract.NFTReceiver}>(/public/NFTReceiver)                let receiverRef = capability.borrow()              ?? panic("Could not borrow the receiver reference")                return receiverRef.getMetadata(id: 1)        }      `      ])        const decoded = await fcl.decode(encoded)    setNftInfo(decoded)  };  return (    <div className="token-data">      <div className="center">        <button className="btn-primary" onClick={fetchTokenData}>Fetch Token Data</button>              </div>      {        nftInfo &&        <div>          {            Object.keys(nftInfo).map(k => {              return (                <p>{k}: {nftInfo[k]}</p>              )            })          }          <button onClick={() => setNftInfo(null)} className="btn-secondary">Clear Token Info</button>        </div>      }    </div>  );};export default TokenData;//rawTokenData.js

在这个文件中，创建了一个组件，有一个按钮来获取代币数据。当点击获取按钮时，它会调用我们创建的一个名为 fetchTokenData 的函数。该函数使用 Flow JS SDK 来执行与在本教程第一部分中从命令行执行的脚本完全相同的脚本，但在 React 中。我们把执行的结果，设置到一个名为 nftInfo 的状态变量中。React 会根据 nftInfo 显示 NFT 元数据中的键值对。另外还有一个让清除数据的按钮。

我还加了一点 CSS，让他漂亮一些，App.css 定义如下：

.App {  display: flex;  flex-direction: column;  min-height: 500px;  justify-content: center;  align-items: center;}button {  padding: 10;  height: 30px;  min-width: 100px;  cursor: pointer;}.btn-primary {  border: none;  background: rgb(255, 224, 0);  color: #282828;}.btn-secondary {  border: none;  background: rgb(0, 190, 221);  color: #282828;}.center {  text-align: center;}.token-data {  margin-top: 100px;}

现在，只要将新组件添加到 App.js 中，放在 AuthCluster 组件下面：

import './App.css';import AuthCluster from './AuthCluster';import TokenData from './TokenData';function App() {  return (    <div className="App">      <AuthCluster />      <TokenData />    </div>  );}export default App;

运行应用程序并尝试获取代币数据，它应该是这样：

學習如何在Flow和IPFS上展示NFT收藏品：一個NFT教學

这真是太酷了！我们正在查找指定的账户所拥有的 NFT，然后从该代币中获取元数据。并显示该元数据，我们知道该元数据中的一个值解析为一个视频文件。让我们把它显示出来。

从IPFS获取媒体文件

你已经注册了一个 Pinata 账户，并通过 Pinata 上传界面将你的视频文件添加到 IPFS。这意味着你已经可以从 IPFS 中获取内容了。在 Pin Explorer 中，当你点击一个哈希值时，你会被带到 Pinata IPFS 网关，在那里你的 IPFS 内容被解析并显示。为了教程更通用，我们还是从 Protocol Labs 网关中获取它。

回到 TokenData.js 文件中，让我们添加一个方法来显示从 IPFS 中检索到的视频文件，修改代码：

import React, { useState } from "react";import * as fcl from "@onflow/fcl";const TokenData = () => {  const [nftInfo, setNftInfo] = useState(null)  const fetchTokenData = async () => {    const encoded = await fcl      .send([        fcl.script`        import PinataPartyContract from 0xf8d6e0586b0a20c7        pub fun main() : {String : String} {          let nftOwner = getAccount(0xf8d6e0586b0a20c7)            let capability = nftOwner.getCapability<&{PinataPartyContract.NFTReceiver}>(/public/NFTReceiver)                let receiverRef = capability.borrow()              ?? panic("Could not borrow the receiver reference")                return receiverRef.getMetadata(id: 1)        }      `      ])        const decoded = await fcl.decode(encoded)    setNftInfo(decoded)  };  return (    <div className="token-data">      <div className="center">        <button className="btn-primary" onClick={fetchTokenData}>Fetch Token Data</button>              </div>      {        nftInfo &&        <div>          {            Object.keys(nftInfo).map(k => {              return (                <p>{k}: {nftInfo[k]}</p>              )            })          }          <div className="center video">            <video id="nft-video" canplaythrough controls width="85%">              <source src={`https://ipfs.io/ipfs/${nftInfo["uri"].split("://")[1]}`}                    type="video/mp4" />            </video>            <div>              <button onClick={() => setNftInfo(null)} className="btn-secondary">Clear Token Info</button>            </div>          </div>                  </div>      }    </div>  );};export default TokenData;//  rawTokenData.js

我们已经添加了一个 video 标签，它指向 IPFS 上的文件。你会注意到，这里拆分了 uri 值，以获得 IPFS 哈希值，这样就可以从 IPFS 网关获取对应内容。先介绍下那个 URI。

我们用 NFT 创建的 uri 看起来像 ipfs://Qm...。我们之所以这样创建，是因为 IPFS 桌面客户端默认允许你点击并打开这样的链接。另外，Brave 浏览器也支持粘贴这样的链接。并且我们认为这种链接形式会随着 IPFS 的发展得到越来越多的支持。

然而，在这里下，我们需要在利用哈希来从 IPFS 公共网关获取内容，并在页面上显示。因此链接会是这样：

https://ipfs.io/ipfs/QmRZdc3mAMXpv6Akz9Ekp1y4vDSjazTx2dCQRkxVy1yUj6

现在，如果你访问我们的应用程序中获取代币数据，会看到如下界面：

學習如何在Flow和IPFS上展示NFT收藏品：一個NFT教學