NFT教程:如何展示Flow和IPFS上的NFT收藏品
本文是NFT教程的的第二部分,本教程主要介紹Flow區(qū)塊鏈、NFT和IPFS。請先閱讀第一部分用Flow和IPFS創(chuàng)建NFT的合約和鑄造代幣操作教程。
在本文中,我們將構(gòu)建一個簡單的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)存的模擬。所以,如果關(guān)閉了模擬器,你需要繼續(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)基本設置好了,讓我們開始構(gòu)建獲取賬戶的 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í)行的結(jié)果,設置到一個名為 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)關(guān),在那里你的 IPFS 內(nèi)容被解析并顯示。 為了教程更通用,我們還是從 Protocol Labs 網(wǎng)關(guān)中獲取它。
回到 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)關(guān)獲取對應內(nèi)容。 先介紹下那個 URI。
我們用 NFT 創(chuàng)建的 uri 看起來像 ipfs://Qm...。 我們之所以這樣創(chuàng)建,是因為 IPFS 桌面客戶端默認允許你點擊并打開這樣的鏈接。 另外,Brave 瀏覽器也支持粘貼這樣的鏈接。 并且我們認為這種鏈接形式會隨著 IPFS 的發(fā)展得到越來越多的支持。
然而,在這里下,我們需要在利用哈希來從 IPFS 公共網(wǎng)關(guān)獲取內(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)容,更多關(guān)于展示NFT收藏品教程的資料請關(guān)注腳本之家其它相關(guān)文章!
你可能感興趣的文章
-
貨幣貶值時代擁有的加密貨幣和NFT要越多
根據(jù)Raoul Pal的觀點,加密貨幣和藝術(shù)類非同質(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ù)位證書,用以紀錄藝術(shù)品或收藏品等資…
2025-04-28 -
Magic Eden收購Slingshot Finance詳解!進軍DeFi市場
Slingshot為支持多鏈行動交易的應用程序,可以使用Slingshot的鏈抽象協(xié)定(Abstraction Protocol)在每條鏈上無縫交易800萬個以上的代幣而無需橋接,更多詳細資訊請看下面正文…
2025-04-12 -
OpenSea要求美國SEC厘清:NFT市場不是交易所或經(jīng)紀商
美國NFT龍頭平臺OpenSea正式向監(jiān)管機關(guān)喊話,要求美國證管會(SEC)明確表態(tài):NFT市場不應被納入 聯(lián)邦證券法中的「交易所」或「經(jīng)紀商」定義范疇, 更多詳細資訊請看下面正文…
2025-04-10 -
盤點十大頂級的NFT數(shù)據(jù)平臺
本報告中探討的NFT數(shù)據(jù)平臺是數(shù)字資產(chǎn)領域的關(guān)鍵組成部分,提供了大量工具和見解,使用戶能夠有效地駕馭復雜的NFT世界,從分析和估值工具到社區(qū)驅(qū)動的市場,平臺種類繁多,…
2025-04-28 -
一文了解Ubisoft搞NFT、鏈游失敗?分割旗下刺客信條三大IP設子公司 騰
股價跌到谷底的Ubisoft宣布成立負責《刺客信條》、《極地戰(zhàn)嚎》、《虹彩六號》三大游戲IP的子公司,并將25%股權(quán)轉(zhuǎn)讓給騰訊,并獲得12.5億美元的融資,專家認為Ubisoft股價下…
2025-03-28 -
一文了解Abyss卡牌游戲單日鑄造高達7000張NFT!能成Sonic生態(tài)GameFi龍
Sonic生態(tài)集換式卡牌游戲Abyss在昨日開放第一階段「卡片鑄造」后,吸引市場眾多用戶關(guān)注參與,據(jù)官方數(shù)據(jù),昨日Abyss卡牌鑄造量超過7000張,官方一度緊急喊卡,并制定應對…
2025-03-27 -
春季沖刺邁向加密貨幣清晰化Hester Peirce表示:NFT將是下一個監(jiān)管方向
美國SEC日前首次舉辦以加密貨幣為主題的圓桌論壇,監(jiān)管態(tài)度顯現(xiàn)轉(zhuǎn)向,SEC委員Hester Peirce表示,該機構(gòu)已準備好與產(chǎn)業(yè)合作,建立數(shù)字資產(chǎn)的可行監(jiān)管框架,她指出,「我們已…
2025-03-23 -
SEGA將在Sui鏈上推出全新NFT卡牌游戲:《 Code of Joker:Evolutions》
SEGA的Code Of Joker游戲系列將登陸以游戲為中心的Sui L1區(qū)塊鏈,世嘉已將知識產(chǎn)權(quán)授權(quán)給第三方公司Jokers,Inc,該公司正在開發(fā)即將推出的游戲, 更多詳細資訊請看下面正文…
2025-03-17