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

當(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)容。

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

項(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)楣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)文章!

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

你可能感興趣的文章

幣圈快訊

  • 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代幣空投。
  • 查看更多