NFT教程:如何展示Flow和IPFS上的NFT收藏品
本文是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ì)看到如下界面:
這是一個(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)楣V当痪幋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)文章!
你可能感興趣的文章
-
貨幣貶值時(shí)代擁有的加密貨幣和NFT要越多
根據(jù)Raoul Pal的觀點(diǎn),加密貨幣和藝術(shù)類非同質(zhì)化代幣(NFTs)可以幫助投資者保護(hù)其購(gòu)買力,抵御持續(xù)的法定貨幣貶值,更多詳細(xì)資訊請(qǐng)看下面正文 …
2025-05-22 -
NFT 在 2025 年還會(huì)流行嗎?一文詳解
NFT(非同質(zhì)化代幣)曾風(fēng)靡數(shù)字世界,價(jià)值數(shù)百萬(wàn)美元的 JPEG 圖片和明星效應(yīng)帶來(lái)的紅利隨處可見(jiàn),但在 2025 年的今天,每個(gè)人都在思考:NFT 還存在嗎?NFT 的炒作最終走向了…
2025-05-15 -
NFT 平臺(tái)有哪些?2025 最新NFT 平臺(tái)介紹
NFT,作為Collins English Dictionary 的2021 年度代表詞,是Non-fungible token(非同質(zhì)化代幣)的縮寫,NFT 是在區(qū)塊鏈上注冊(cè)的獨(dú)特?cái)?shù)位證書,用以紀(jì)錄藝術(shù)品或收藏品等資…
2025-04-28 -
Magic Eden收購(gòu)Slingshot Finance詳解!進(jìn)軍DeFi市場(chǎng)
Slingshot為支持多鏈行動(dòng)交易的應(yīng)用程序,可以使用Slingshot的鏈抽象協(xié)定(Abstraction Protocol)在每條鏈上無(wú)縫交易800萬(wàn)個(gè)以上的代幣而無(wú)需橋接,更多詳細(xì)資訊請(qǐng)看下面正文…
2025-04-12 -
OpenSea要求美國(guó)SEC厘清:NFT市場(chǎng)不是交易所或經(jīng)紀(jì)商
美國(guó)NFT龍頭平臺(tái)OpenSea正式向監(jiān)管機(jī)關(guān)喊話,要求美國(guó)證管會(huì)(SEC)明確表態(tài):NFT市場(chǎng)不應(yīng)被納入 聯(lián)邦證券法中的「交易所」或「經(jīng)紀(jì)商」定義范疇, 更多詳細(xì)資訊請(qǐng)看下面正文…
2025-04-10 -
盤點(diǎn)十大頂級(jí)的NFT數(shù)據(jù)平臺(tái)
本報(bào)告中探討的NFT數(shù)據(jù)平臺(tái)是數(shù)字資產(chǎn)領(lǐng)域的關(guān)鍵組成部分,提供了大量工具和見(jiàn)解,使用戶能夠有效地駕馭復(fù)雜的NFT世界,從分析和估值工具到社區(qū)驅(qū)動(dòng)的市場(chǎng),平臺(tái)種類繁多,…
2025-04-28 -
一文了解Ubisoft搞NFT、鏈游失敗?分割旗下刺客信條三大IP設(shè)子公司 騰
股價(jià)跌到谷底的Ubisoft宣布成立負(fù)責(zé)《刺客信條》、《極地戰(zhàn)嚎》、《虹彩六號(hào)》三大游戲IP的子公司,并將25%股權(quán)轉(zhuǎn)讓給騰訊,并獲得12.5億美元的融資,專家認(rèn)為Ubisoft股價(jià)下…
2025-03-28 -
一文了解Abyss卡牌游戲單日鑄造高達(dá)7000張NFT!能成Sonic生態(tài)GameFi龍
Sonic生態(tài)集換式卡牌游戲Abyss在昨日開(kāi)放第一階段「卡片鑄造」后,吸引市場(chǎng)眾多用戶關(guān)注參與,據(jù)官方數(shù)據(jù),昨日Abyss卡牌鑄造量超過(guò)7000張,官方一度緊急喊卡,并制定應(yīng)對(duì)…
2025-03-27 -
春季沖刺邁向加密貨幣清晰化Hester Peirce表示:NFT將是下一個(gè)監(jiān)管方向
美國(guó)SEC日前首次舉辦以加密貨幣為主題的圓桌論壇,監(jiān)管態(tài)度顯現(xiàn)轉(zhuǎn)向,SEC委員Hester Peirce表示,該機(jī)構(gòu)已準(zhǔn)備好與產(chǎn)業(yè)合作,建立數(shù)字資產(chǎn)的可行監(jiān)管框架,她指出,「我們已…
2025-03-23 -
SEGA將在Sui鏈上推出全新NFT卡牌游戲:《 Code of Joker:Evolutions》
SEGA的Code Of Joker游戲系列將登陸以游戲?yàn)橹行牡腟ui L1區(qū)塊鏈,世嘉已將知識(shí)產(chǎn)權(quán)授權(quán)給第三方公司Jokers,Inc,該公司正在開(kāi)發(fā)即將推出的游戲, 更多詳細(xì)資訊請(qǐng)看下面正文…
2025-03-17