當(dāng)前位置：主頁(yè) > 區(qū)塊鏈 > NFT > 展示NFT收藏品教程

NFT教程:如何展示Flow和IPFS上的NFT收藏品

2021-03-18 12:01:19 | 來(lái)源：登鏈社區(qū) | 作者：佚名

這篇文章主要介紹了NFT教程:如何展示Flow和IPFS上的NFT收藏品，我們將構(gòu)建一個(gè)簡(jiǎn)單的React應(yīng)用程序，該應(yīng)用程序與Flow智能合約交互，以驗(yàn)證和獲取用戶擁有的NFT。我們將解析NFT的元數(shù)據(jù)，以獲得NFT的底層標(biāo)的資產(chǎn)（在本例中為視頻）的IPFS位置。需要的朋友可以參考下。

本文是NFT教程的的第二部分，本教程主要介紹Flow區(qū)塊鏈、NFT和IPFS。請(qǐng)先閱讀第一部分用Flow和IPFS創(chuàng)建NFT的合約和鑄造代幣操作教程。

在本文中，我們將構(gòu)建一個(gè)簡(jiǎn)單的React應(yīng)用程序，該應(yīng)用程序與Flow智能合約交互，以驗(yàn)證和獲取用戶擁有的 NFT。然后，我們將解析 NFT 的元數(shù)據(jù)，以獲得 NFT 的底層標(biāo)的資產(chǎn)（在本例中為視頻）的 IPFS 位置。提醒一下我們正在打造的 NFT，就像 NBA Top Shot 一樣，只不過(guò)是不同的視頻內(nèi)容。

項(xiàng)目設(shè)置

本教程中，你需要運(yùn)行 Flow 模擬器。如果你不記得如何啟動(dòng)，可以看看之前的文章或者查看 Flow CLI 文檔。需要注意的是，F(xiàn)low 模擬器是 Flow 區(qū)塊鏈在內(nèi)存的模擬。所以，如果關(guān)閉了模擬器，你需要繼續(xù)做以下工作：

啟動(dòng) Flow 模擬器
部署項(xiàng)目
鑄造你的 NFT
在本教程第一部分 NFT 教程 - 用 Flow 和 IPFS 創(chuàng)建 NFT 詳細(xì)介紹了其中的每一個(gè)步驟。

此外，還需要在你的機(jī)器上安裝 NodeJS。你可以在這里安裝。

和之前一樣，你需要一個(gè)文本編輯器。

初始化 React 和安裝依賴

在第一部分教程中創(chuàng)建的 pinata-party 項(xiàng)目目錄下創(chuàng)建 React 應(yīng)用（你也可以在一個(gè)全新的目錄中創(chuàng)建你的 React 應(yīng)用）。

要?jiǎng)?chuàng)建我們的應(yīng)用程序，運(yùn)行以下命令：

npx create-react-app pinata-party-frontend

當(dāng)一切安裝完成后，你會(huì)有一個(gè)新的目錄，叫做 pinata-party-frontend，切換到該目錄，安裝依賴。

首先，參考 Flow 文檔，需要安裝 Flow JS SDK。前端的設(shè)置我們只需要按照 Flow 的文檔進(jìn)行即可：

npm i @onflow/fcl @onflow/types

一些值需要作為應(yīng)用程序的全局變量來(lái)存儲(chǔ)，這里使用環(huán)境變量。在 react 中，創(chuàng)建一個(gè) .env 文件，并設(shè)置鍵值對(duì)，其中鍵值前綴為 REACT_APP。在 Flow 的文檔里，設(shè)置為與 Flow 的測(cè)試網(wǎng)連接。在本教程中，我們將連接到 Flow 模擬器。所以，需要做一些改變。在 .env 文件中添加以下內(nèi)容：

REACT_APP_ACCESS_NODE=http://localhost:8080

REACT_APP_WALLET_DISCOVERY=https://fcl-discovery.onflow.org/testnet/authn

REACT_APP_CONTRACT_PROFILE=0xf8d6e0586b0a20c7

將 REACT_APP_ACCESS_NODE 的值替換為上述的本地模擬器url。用部署項(xiàng)目時(shí)獲得的地址替換 REACT_APP_CONTRACT_PROFILE 值。

還需要?jiǎng)?chuàng)建一個(gè)配置文件，用來(lái)與 Flow JS SDK 交互。在 src 目錄下創(chuàng)建一個(gè)名為 config.js 的文件。增加以下內(nèi)容：

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)

這個(gè)配置文件只是幫助 JS SDK 與 Flow 區(qū)塊鏈（或本例中的模擬器）一起工作。要使這個(gè)文件在整個(gè)應(yīng)用程序中可用，打開(kāi) index.js 文件并添加這一行。

import "./config"

現(xiàn)在，讓我們連接一些認(rèn)證。如果你不想的話，可以不必強(qiáng)迫人們認(rèn)證后進(jìn)入網(wǎng)站，教程的第三篇文章，在實(shí)現(xiàn) NFT 資產(chǎn)的轉(zhuǎn)移時(shí)，認(rèn)證將是很重要的。

我們需要?jiǎng)?chuàng)建一個(gè)認(rèn)證組件。在你的 src 目錄下，創(chuàng)建一個(gè)名為 AuthCluster.js 的文件。在該文件內(nèi)，添加以下內(nèi)容：

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

代碼很簡(jiǎn)單，使用一個(gè)登錄和注冊(cè)按鈕，利用 Flow JS SDK 的能力連接到錢包提供者，你可以注冊(cè)一個(gè)賬戶或用現(xiàn)有賬戶登錄。

現(xiàn)在需要把這個(gè)組件放到我們的應(yīng)用程序中。我們先簡(jiǎn)單點(diǎn)吧。將你的 App.js 文件替換為以下內(nèi)容。

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

export default App;

如果你現(xiàn)在啟動(dòng)應(yīng)用程序(npm start)，你應(yīng)該會(huì)看到一個(gè)有登錄和注冊(cè)按鈕的頁(yè)面。事實(shí)上，這兩個(gè)按鈕都是有功能的，試試吧。

好了，現(xiàn)在 React 應(yīng)用已經(jīng)基本設(shè)置好了，讓我們開(kāi)始構(gòu)建獲取賬戶的 NFT 并顯示它們。

從 Flow 中獲取 NFT

為了顯示我們?cè)诘谝黄恼轮需T幣的 NFT，需要與 Flow 區(qū)塊鏈進(jìn)行通信。現(xiàn)在是與 Flow 模擬器進(jìn)行通信。設(shè)置 .env 文件時(shí)，已經(jīng)告訴應(yīng)用程序，模擬器是在 8080 端口上運(yùn)行的。但現(xiàn)在，如何使用 JavaScript 與 Flow 交互？

幸運(yùn)的是，F(xiàn)low 在他們的 JS SDK 中內(nèi)置了這個(gè)功能。如果你還記得，我們之前寫了一個(gè)腳本，根據(jù)一個(gè) NFT 的 token id 來(lái)查找它，并返回 token 的元數(shù)據(jù)。它看起來(lái)像這樣：

import PinataPartyContract from 0xf8d6e0586b0a20c7

pub 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

現(xiàn)在，我們只需要將其轉(zhuǎn)換為 JavaScript 調(diào)用即可。讓我們創(chuàng)建一個(gè)新的組件，既能獲取數(shù)據(jù)，又能最終顯示 NFT 數(shù)據(jù)。在你的 src 目錄下，創(chuàng)建一個(gè)名為 TokenData.js 的文件。在該文件中，添加以下內(nèi)容：

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

在這個(gè)文件中，創(chuàng)建了一個(gè)組件，有一個(gè)按鈕來(lái)獲取代幣數(shù)據(jù)。當(dāng)點(diǎn)擊獲取按鈕時(shí)，它會(huì)調(diào)用我們創(chuàng)建的一個(gè)名為 fetchTokenData 的函數(shù)。該函數(shù)使用 Flow JS SDK 來(lái)執(zhí)行與在本教程第一部分中從命令行執(zhí)行的腳本完全相同的腳本，但在 React 中。我們把執(zhí)行的結(jié)果，設(shè)置到一個(gè)名為 nftInfo 的狀態(tài)變量中。React 會(huì)根據(jù) nftInfo 顯示 NFT 元數(shù)據(jù)中的鍵值對(duì)。另外還有一個(gè)讓清除數(shù)據(jù)的按鈕。

我還加了一點(diǎn) 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;
}

現(xiàn)在，只要將新組件添加到 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;

運(yùn)行應(yīng)用程序并嘗試獲取代幣數(shù)據(jù)，它應(yīng)該是這樣：

這真是太酷了！我們正在查找指定的賬戶所擁有的 NFT，然后從該代幣中獲取元數(shù)據(jù)。并顯示該元數(shù)據(jù)，我們知道該元數(shù)據(jù)中的一個(gè)值解析為一個(gè)視頻文件。讓我們把它顯示出來(lái)。

從IPFS獲取媒體文件

你已經(jīng)注冊(cè)了一個(gè) Pinata 賬戶，并通過(guò) Pinata 上傳界面將你的視頻文件添加到 IPFS。這意味著你已經(jīng)可以從 IPFS 中獲取內(nèi)容了。在 Pin Explorer 中，當(dāng)你點(diǎn)擊一個(gè)哈希值時(shí)，你會(huì)被帶到 Pinata IPFS 網(wǎng)關(guān)，在那里你的 IPFS 內(nèi)容被解析并顯示。為了教程更通用，我們還是從 Protocol Labs 網(wǎng)關(guān)中獲取它。

回到 TokenData.js 文件中，讓我們添加一個(gè)方法來(lái)顯示從 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

我們已經(jīng)添加了一個(gè) video 標(biāo)簽，它指向 IPFS 上的文件。你會(huì)注意到，這里拆分了 uri 值，以獲得 IPFS 哈希值，這樣就可以從 IPFS 網(wǎng)關(guān)獲取對(duì)應(yīng)內(nèi)容。先介紹下那個(gè) URI。

我們用 NFT 創(chuàng)建的 uri 看起來(lái)像 ipfs://Qm...。我們之所以這樣創(chuàng)建，是因?yàn)?IPFS 桌面客戶端默認(rèn)允許你點(diǎn)擊并打開(kāi)這樣的鏈接。另外，Brave 瀏覽器也支持粘貼這樣的鏈接。并且我們認(rèn)為這種鏈接形式會(huì)隨著 IPFS 的發(fā)展得到越來(lái)越多的支持。

然而，在這里下，我們需要在利用哈希來(lái)從 IPFS 公共網(wǎng)關(guān)獲取內(nèi)容，并在頁(yè)面上顯示。因此鏈接會(huì)是這樣：

https://ipfs.io/ipfs/QmRZdc3mAMXpv6Akz9Ekp1y4vDSjazTx2dCQRkxVy1yUj6

現(xiàn)在，如果你訪問(wèn)我們的應(yīng)用程序中獲取代幣數(shù)據(jù)，會(huì)看到如下界面：

NFT教程:如何展示Flow和IPFS上的NFT收藏品

這是一個(gè)真正的活的數(shù)字資產(chǎn)！你的視頻可能會(huì)有所不同，但希望你在應(yīng)用中感受到相同的體驗(yàn)。

最后

這是一個(gè)非常簡(jiǎn)單的應(yīng)用，你可以做很多事情讓它變得更漂亮，讓它的交互性更強(qiáng)，甚至可以為它添加更多的 Flow 元素。 Flow JS SDK 的功能很強(qiáng)大，所以我推薦大家閱讀一下文檔。

在第二部分成功地使用 Flow 為應(yīng)用添加了身份驗(yàn)證，創(chuàng)建了一個(gè)接口來(lái)獲取 NFT 的信息，創(chuàng)建了一種方法來(lái)顯示了原始元數(shù)據(jù)以及對(duì)應(yīng)的底層標(biāo)的資產(chǎn)。這一切都由 Flow 區(qū)塊鏈和 IPFS 來(lái)保障。我們知道 NFT 是由誰(shuí)擁有，也知道顯示的內(nèi)容是有效性，因?yàn)楣Ｖ当痪幋a到 NFT 中。

在本教程的最后一篇，我們將專注于創(chuàng)建一個(gè)迷你交易市場(chǎng)，讓我們轉(zhuǎn)移 NFT。

以上就是NFT教程:如何展示Flow和IPFS上的NFT收藏品的詳細(xì)內(nèi)容，更多關(guān)于展示NFT收藏品教程的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

聲明：文章內(nèi)容不代表本站觀點(diǎn)及立場(chǎng)，不構(gòu)成本平臺(tái)任何投資建議。本文內(nèi)容僅供參考，風(fēng)險(xiǎn)自擔(dān)！

Tag：NFT Flow IPFS 收藏品區(qū)塊鏈技術(shù)

你可能感興趣的文章

幣圈快訊

SonicLabs宣布已向HeyAnon投資40萬(wàn)枚S
2025-06-12 22:22
ChainCatcher消息，據(jù)官方消息，SonicLabs已向HeyAnon投資400,000枚S代幣。 HeyAnon是一個(gè)開(kāi)創(chuàng)性的鏈上AI協(xié)議，正在重新定義用戶在Sonic上與DeFi的交互方式，此次投資由Sonic創(chuàng)新者基金支持。
WLFI官網(wǎng)新增Swap、借貸及APP模塊，功能尚未開(kāi)放
2025-06-12 22:12
ChainCatcher消息，WLFI官網(wǎng)已更新，新增Swap、借貸和WLFIAPP模塊。目前上述功能仍處于預(yù)告狀態(tài)，尚未正式開(kāi)啟。
20倍杠桿巨鯨為X用戶AguilaTrades，其花費(fèi)2985萬(wàn)枚USDC做多BTC浮虧逾550萬(wàn)美元
2025-06-12 22:05
ChainCatcher消息，據(jù)Lookonchain監(jiān)測(cè)，神秘巨鯨地址0x1f25已被確認(rèn)身份為X用戶@AguilaTrades。在過(guò)去4天內(nèi)，其將2985萬(wàn)枚USDC從Bybit轉(zhuǎn)入Hyperliquid，用于20倍杠桿做多BTC。目前其已浮虧超過(guò)550萬(wàn)美元——但在比特幣價(jià)格再次下跌時(shí)，其選擇加倉(cāng)繼續(xù)做多。
香港海關(guān)聯(lián)合香港大學(xué)研發(fā)加密貨幣洗錢追蹤工具，已偵破39宗重大洗錢案
2025-06-12 22:00
ChainCatcher消息，據(jù)Cointelegraph報(bào)道，香港海關(guān)宣布與香港大學(xué)合作開(kāi)發(fā)加密貨幣交易追蹤工具，用于應(yīng)對(duì)數(shù)字資產(chǎn)洗錢犯罪。助理關(guān)長(zhǎng)黃浩然指出，2021年至2025年5月共查處39宗重大洗錢案，其中7宗涉及加密貨幣，最大案件涉資18億港元（約2.3億美元），逮捕3名通過(guò)加密平臺(tái)轉(zhuǎn)移7.6億港元的嫌疑人。該工具運(yùn)作細(xì)節(jié)因工作保密暫未公開(kāi)。本周海關(guān)聯(lián)合中國(guó)、新加坡等8個(gè)司法管轄區(qū)的執(zhí)法機(jī)構(gòu)舉行為期三天的反洗錢研討會(huì)，強(qiáng)化跨境數(shù)字金融犯罪協(xié)作。
Binance：已向申領(lǐng)SKATE用戶額外分發(fā)409枚SKATE代幣空投
2025-06-12 21:55
金色財(cái)經(jīng)報(bào)道，據(jù)官方消息，Binance宣布已向申領(lǐng)SKATE用戶額外分發(fā)409枚SKATE代幣空投。

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

NFT教程:如何展示Flow和IPFS上的NFT收藏品

項(xiàng)目設(shè)置

初始化 React 和安裝依賴

從 Flow 中獲取 NFT

從IPFS獲取媒體文件

最后

你可能感興趣的文章

貨幣貶值時(shí)代擁有的加密貨幣和NFT要越多

NFT 在 2025 年還會(huì)流行嗎？一文詳解

NFT 平臺(tái)有哪些？2025 最新NFT 平臺(tái)介紹

Magic Eden收購(gòu)Slingshot Finance詳解！進(jìn)軍DeFi市場(chǎng)

OpenSea要求美國(guó)SEC厘清：NFT市場(chǎng)不是交易所或經(jīng)紀(jì)商

盤點(diǎn)十大頂級(jí)的NFT數(shù)據(jù)平臺(tái)

一文了解Ubisoft搞NFT、鏈游失敗？分割旗下刺客信條三大IP設(shè)子公司騰

一文了解Abyss卡牌游戲單日鑄造高達(dá)7000張NFT！能成Sonic生態(tài)GameFi龍

春季沖刺邁向加密貨幣清晰化Hester Peirce表示：NFT將是下一個(gè)監(jiān)管方向

SEGA將在Sui鏈上推出全新NFT卡牌游戲：《 Code of Joker：Evolutions》

幣圈快訊

最新資訊

區(qū)塊鏈百科

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

NFT教程:如何展示Flow和IPFS上的NFT收藏品

項(xiàng)目設(shè)置

初始化 React 和安裝依賴

從 Flow 中獲取 NFT

從IPFS獲取媒體文件

最后

你可能感興趣的文章

貨幣貶值時(shí)代擁有的加密貨幣和NFT要越多

NFT 在 2025 年還會(huì)流行嗎？一文詳解

NFT 平臺(tái)有哪些？2025 最新NFT 平臺(tái)介紹

Magic Eden收購(gòu)Slingshot Finance詳解！進(jìn)軍DeFi市場(chǎng)

OpenSea要求美國(guó)SEC厘清：NFT市場(chǎng)不是交易所或經(jīng)紀(jì)商

盤點(diǎn)十大頂級(jí)的NFT數(shù)據(jù)平臺(tái)

一文了解Ubisoft搞NFT、鏈游失敗？分割旗下刺客信條三大IP設(shè)子公司 騰

一文了解Abyss卡牌游戲單日鑄造高達(dá)7000張NFT！能成Sonic生態(tài)GameFi龍

春季沖刺邁向加密貨幣清晰化Hester Peirce表示：NFT將是下一個(gè)監(jiān)管方向

SEGA將在Sui鏈上推出全新NFT卡牌游戲：《 Code of Joker：Evolutions》

幣圈快訊

最新資訊

區(qū)塊鏈百科

NFT 在 2025 年還會(huì)流行嗎？一文詳解

NFT 平臺(tái)有哪些？2025 最新NFT 平臺(tái)介紹

Magic Eden收購(gòu)Slingshot Finance詳解！進(jìn)軍DeFi市場(chǎng)

一文了解Ubisoft搞NFT、鏈游失敗？分割旗下刺客信條三大IP設(shè)子公司騰

一文了解Abyss卡牌游戲單日鑄造高達(dá)7000張NFT！能成Sonic生態(tài)GameFi龍