NFT教程:如何展示Flow和IPFS上的NFT收藏品
本文是NFT教程的的第二部分，本教程主要介紹Flow區(qū)塊鏈、NFT和IPFS。請先閱讀第一部分用Flow和IPFS創(chuàng)建NFT的合約和鑄造代幣操作教程。
在本文中，我們將構建一個簡單的React應用程序，該應用程序與Flow智能合約交互，以驗證和獲取用戶擁有的 NFT。然后，我們將解析 NFT 的元數(shù)據(jù)，以獲得 NFT 的底層標的資產(chǎn)（在本例中為視頻）的 IPFS 位置。 提醒一下我們正在打造的 NFT，就像 NBA Top Shot 一樣，只不過是不同的視頻內(nèi)容。
項目設置
本教程中，你需要運行 Flow 模擬器。 如果你不記得如何啟動，可以看看之前的文章或者查看 Flow CLI 文檔。需要注意的是，F(xiàn)low 模擬器是 Flow 區(qū)塊鏈在內(nèi)存的模擬。所以，如果關閉了模擬器，你需要繼續(xù)做以下工作：
啟動 Flow 模擬器
部署項目
鑄造你的 NFT
在本教程第一部分 NFT 教程 - 用 Flow 和 IPFS 創(chuàng)建 NFT 詳細介紹了其中的每一個步驟。
此外，還需要在你的機器上安裝 NodeJS。 你可以在這里安裝。
和之前一樣，你需要一個文本編輯器。
初始化 React 和安裝依賴
在第一部分教程中創(chuàng)建的 pinata-party 項目目錄下創(chuàng)建 React 應用（你也可以在一個全新的目錄中創(chuàng)建你的 React 應用）。
要創(chuàng)建我們的應用程序，運行以下命令：
npx create-react-app pinata-party-frontend
當一切安裝完成后，你會有一個新的目錄，叫做 pinata-party-frontend， 切換到該目錄，安裝依賴。
首先，參考 Flow 文檔，需要安裝 Flow JS SDK。 前端的設置我們只需要按照 Flow 的文檔進行即可：
npm i @onflow/fcl @onflow/types
一些值需要作為應用程序的全局變量來存儲，這里使用環(huán)境變量。 在 react 中，創(chuàng)建一個 .env 文件，并設置鍵值對，其中鍵值前綴為 REACT_APP。 在 Flow 的文檔里，設置為與 Flow 的測試網(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。用部署項目時獲得的地址替換 REACT_APP_CONTRACT_PROFILE 值。
還需要創(chuàng)建一個配置文件，用來與 Flow JS SDK 交互。在 src 目錄下創(chuàng)建一個名為 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)
這個配置文件只是幫助 JS SDK 與 Flow 區(qū)塊鏈（或本例中的模擬器）一起工作。 要使這個文件在整個應用程序中可用，打開 index.js 文件并添加這一行。
import "./config"
現(xiàn)在，讓我們連接一些認證。如果你不想的話，可以不必強迫人們認證后進入網(wǎng)站，教程的第三篇文章，在實現(xiàn) NFT 資產(chǎn)的轉(zhuǎn)移時，認證將是很重要的。
我們需要創(chuàng)建一個認證組件。在你的 src 目錄下，創(chuàng)建一個名為 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
代碼很簡單，使用一個登錄和注冊按鈕，利用 Flow JS SDK 的能力連接到錢包提供者， 你可以注冊一個賬戶或用現(xiàn)有賬戶登錄。
現(xià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)在啟動應用程序(npm start)，你應該會看到一個有登錄和注冊按鈕的頁面。 事實上，這兩個按鈕都是有功能的， 試試吧。
好了，現(xiàn)在 React 應用已經(jīng)基本設置好了，讓我們開始構建獲取賬戶的 NFT 并顯示它們。
從 Flow 中獲取 NFT
為了顯示我們在第一篇文章中鑄幣的 NFT，需要與 Flow 區(qū)塊鏈進行通信。 現(xiàn)在是與 Flow 模擬器進行通信。 設置 .env 文件時，已經(jīng)告訴應用程序，模擬器是在 8080 端口上運行的。 但現(xiàn)在，如何使用 JavaScript 與 Flow 交互？
幸運的是，F(xiàn)low 在他們的 JS SDK 中內(nèi)置了這個功能。 如果你還記得，我們之前寫了一個腳本，根據(jù)一個 NFT 的 token id 來查找它，并返回 token 的元數(shù)據(jù)。 它看起來像這樣：
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)建一個新的組件，既能獲取數(shù)據(jù)，又能最終顯示 NFT 數(shù)據(jù)。 在你的 src 目錄下，創(chuàng)建一個名為 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
在這個文件中，創(chuàng)建了一個組件，有一個按鈕來獲取代幣數(shù)據(jù)。 當點擊獲取按鈕時，它會調(diào)用我們創(chuàng)建的一個名為 fetchTokenData 的函數(shù)。 該函數(shù)使用 Flow JS SDK 來執(zhí)行與在本教程第一部分中從命令行執(zhí)行的腳本完全相同的腳本，但在 React 中。 我們把執(zhí)行的結果，設置到一個名為 nftInfo 的狀態(tài)變量中。React 會根據(jù) nftInfo 顯示 NFT 元數(shù)據(jù)中的鍵值對。另外還有一個讓清除數(shù)據(jù)的按鈕。
我還加了一點 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;
運行應用程序并嘗試獲取代幣數(shù)據(jù)，它應該是這樣：
這真是太酷了！ 我們正在查找指定的賬戶所擁有的 NFT，然后從該代幣中獲取元數(shù)據(jù)。 并顯示該元數(shù)據(jù)，我們知道該元數(shù)據(jù)中的一個值解析為一個視頻文件。 讓我們把它顯示出來。
從IPFS獲取媒體文件
你已經(jīng)注冊了一個 Pinata 賬戶，并通過 Pinata 上傳界面將你的視頻文件添加到 IPFS。 這意味著你已經(jīng)可以從 IPFS 中獲取內(nèi)容了。 在 Pin Explorer 中，當你點擊一個哈希值時，你會被帶到 Pinata IPFS 網(wǎng)關，在那里你的 IPFS 內(nèi)容被解析并顯示。 為了教程更通用，我們還是從 Protocol Labs 網(wǎng)關中獲取它。
回到 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
我們已經(jīng)添加了一個 video 標簽，它指向 IPFS 上的文件。 你會注意到，這里拆分了 uri 值，以獲得 IPFS 哈希值，這樣就可以從 IPFS 網(wǎng)關獲取對應內(nèi)容。 先介紹下那個 URI。
我們用 NFT 創(chuàng)建的 uri 看起來像 ipfs://Qm...。 我們之所以這樣創(chuàng)建，是因為 IPFS 桌面客戶端默認允許你點擊并打開這樣的鏈接。 另外，Brave 瀏覽器也支持粘貼這樣的鏈接。 并且我們認為這種鏈接形式會隨著 IPFS 的發(fā)展得到越來越多的支持。
然而，在這里下，我們需要在利用哈希來從 IPFS 公共網(wǎng)關獲取內(nèi)容，并在頁面上顯示。因此鏈接會是這樣：
https://ipfs.io/ipfs/QmRZdc3mAMXpv6Akz9Ekp1y4vDSjazTx2dCQRkxVy1yUj6
現(xiàn)在，如果你訪問我們的應用程序中獲取代幣數(shù)據(jù)，會看到如下界面：
這是一個真正的活的數(shù)字資產(chǎn)！ 你的視頻可能會有所不同，但希望你在應用中感受到相同的體驗。
最后
這是一個非常簡單的應用，你可以做很多事情讓它變得更漂亮，讓它的交互性更強，甚至可以為它添加更多的 Flow 元素。 Flow JS SDK 的功能很強大，所以我推薦大家閱讀一下文檔。
在第二部分成功地使用 Flow 為應用添加了身份驗證，創(chuàng)建了一個接口來獲取 NFT 的信息，創(chuàng)建了一種方法來顯示了原始元數(shù)據(jù)以及對應的底層標的資產(chǎn)。 這一切都由 Flow 區(qū)塊鏈和 IPFS 來保障。 我們知道 NFT 是由誰擁有，也知道顯示的內(nèi)容是有效性，因為哈希值被編碼到 NFT 中。
在本教程的最后一篇，我們將專注于創(chuàng)建一個迷你交易市場，讓我們轉(zhuǎn)移 NFT。
以上就是NFT教程:如何展示Flow和IPFS上的NFT收藏品的詳細內(nèi)容，更多關于展示NFT收藏品教程的資料請關注腳本之家其它相關文章！
你可能感興趣的文章
-
市值翻倍 地板價和交易量狂飆：NFT煥發(fā)又一春？
NFT 市場正顯示出強勁的復蘇跡象,自本月初以來，市值上漲了 94%，達到 66 億美元，創(chuàng)下了 2025 年初以來的最高水平,周交易量躍升 51%，達到 1.36 億美元，有望使 7 月成為…
2025-07-27 -
Ozzy Osbourne去世引發(fā)CryptoBatz NFT價格暴漲400%
根據(jù)DappRadar的數(shù)據(jù)，CryptoBatz的交易量在短短24小時內(nèi)飆升了100,000%，達到281,200美元,24小時交易量占CryptoBatz總市值的近80%，總市值估計為355,000美元，當前底價為3…
2025-07-23 -
什么是NFT？2025 年替代幣季中值得關注的7 大NFT 項目介紹
什么是NFT？2025年，隨著吸引了資深投資者和好奇的新手的NFT市場正在強勢復蘇，這一切都得益于正在進行的替代幣季,僅僅24小時內(nèi)，整體NFT市場價值突破了64億美元，交易量超…
2025-07-23 -
以太坊 NFT 蓬勃發(fā)展，2025 年最值得關注的 NFT有哪些？
NFT，即非同質(zhì)化代幣，是一種獨特的區(qū)塊鏈資產(chǎn)，它徹底改變了藝術品、游戲和收藏品的數(shù)字所有權,作為全球領先的智能合約平臺，以太坊已成為眾多優(yōu)秀 NFT 項目的主要聚集地,…
2025-07-23 -
Pudgy Party是什么？怎么玩？游戲特色、玩法與NFT獎勵詳解
《Pudgy Party》是由PudgyPenguins 和《NFL Rivals》開發(fā)商Mythical Games 合作開發(fā)的競技手機游戲,那么，Pudgy Party 怎么玩？它將如何影響Pudgy Penguins 生態(tài)發(fā)展呢？下…
2025-07-17 -
Snoop Dogg引爆TON鏈NFT熱潮 Telegram創(chuàng)始人：這可能是下一個加密風口
美國嘻哈大佬Snoop Dogg在TON鏈上推出一系列NFT，短短30分鐘就賣出將近百萬個，為低迷已久的NFT市場投下一顆震撼彈,這波合作也被部分業(yè)界人士解讀為「NFT新敘事的起點」,更…
2025-07-10 -
一文了解以太坊NFT日交易者逼近4萬人、創(chuàng)近三年新高！受惠OpenSea整合O
以太坊NFT日交易者逼近4萬人，創(chuàng)近三年新高；OpenSea OS2上線與游戲整合帶動市場走出低迷,更多詳細資訊請看下面正文…
2025-06-12 -
貨幣貶值時代擁有的加密貨幣和NFT要越多
根據(jù)Raoul Pal的觀點，加密貨幣和藝術類非同質(zhì)化代幣（NFTs）可以幫助投資者保護其購買力，抵御持續(xù)的法定貨幣貶值,更多詳細資訊請看下面正文 …
2025-05-22 -
NFT 在 2025 年還會流行嗎？一文詳解
NFT（非同質(zhì)化代幣）曾風靡數(shù)字世界,價值數(shù)百萬美元的 JPEG 圖片和明星效應帶來的紅利隨處可見,但在 2025 年的今天，每個人都在思考：NFT 還存在嗎？NFT 的炒作最終走向了…
2025-05-15 -
NFT 平臺有哪些？2025 最新NFT 平臺介紹
NFT，作為Collins English Dictionary 的2021 年度代表詞，是Non-fungible token（非同質(zhì)化代幣）的縮寫,NFT 是在區(qū)塊鏈上注冊的獨特數(shù)位證書，用以紀錄藝術品或收藏品等資…
2025-04-28
