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

當前位置:主頁 > 區(qū)塊鏈 > NFT > 展示NFT收藏品教程

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

2021-03-18 12:01:19 | 來源:登鏈社區(qū) | 作者:佚名
這篇文章主要介紹了NFT教程:如何展示Flow和IPFS上的NFT收藏品,我們將構(gòu)建一個簡單的React應用程序,該應用程序與Flow智能合約交互,以驗證和獲取用戶擁有的NFT。我們將解析NFT的元數(shù)據(jù),以獲得NFT的底層標的資產(chǎn)(在本例中為視頻)的IPFS位置。需要的朋友可以參考下。

本文是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)容。

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

項目設置

本教程中,你需要運行 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ù),會看到如下界面:

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

這是一個真正的活的數(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)文章!

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

你可能感興趣的文章

幣圈快訊

  • 約900萬BTC在3年多的時間里未移動

    2025-06-16 06:12
    金色財經(jīng)報道,據(jù)HODL15Capital數(shù)據(jù)顯示,約900萬BTC在3年多的時間里未移動,50%的比特幣在2年多的時間里未移動。
  • 倒閉的加密實體仍然控制著15億美元的鏈上財富

    2025-06-16 05:47
    金色財經(jīng)報道,過去幾年,一波數(shù)字資產(chǎn)公司因各種原因倒閉,其中一些是受到早期災難(例如FTX和TerraformLabs的慘?。┑耐侠邸R韵率桥c這些現(xiàn)已倒閉的公司相關(guān)的一些錢包的詳細介紹,以及目前仍在鏈上的錢包。FTX、Blockfi和Terraform等加密貨幣公司仍持有價值15億美元的數(shù)字資產(chǎn)。?Alameda錢包持有8.87億美元?FTX仍持有6.11億美元?TerraformLabs鏈上資產(chǎn)保有245萬美元。
  • 特朗普競選聯(lián)合經(jīng)理:加密貨幣問題充當了一座橋梁,讓共和黨能夠與歷史上左傾的人口群體的選民進行接觸

    2025-06-16 05:26
    金色財經(jīng)報道,美國總統(tǒng)唐納德·特朗普的競選聯(lián)合經(jīng)理克里斯·拉西維塔(ChrisLaCivita)表示,他的競選活動注重吸引選民關(guān)注加密貨幣相關(guān)問題,這有助于他成功連任。拉西維塔表示,加密貨幣問題充當了一座橋梁,讓共和黨能夠與歷史上左傾的人口群體的選民進行接觸。在國會山越來越認識到數(shù)字資產(chǎn)相關(guān)問題之際,特朗普對加密社區(qū)表示了歡迎。
  • 2024年AIDeepfakes導致40%的高價值加密貨幣欺詐

    2025-06-16 04:55
    金色財經(jīng)報道,Bitget的一份報告稱,2024年,針對名人、政府官員等的人工智能深度偽造占“高價值”加密欺詐的40%。2024年加密貨幣詐騙損失達到46億美元,比上一年增長24%。
  • 以總理:如伊朗放棄核計劃以色列愿停止行動

    2025-06-16 04:23
    金色財經(jīng)報道,當?shù)貢r間6月15日,以色列總理內(nèi)塔尼亞胡表示,如果伊朗接受美國提出的放棄其核計劃的要求,以色列愿意停止其行動。他還表示,“當我們消除這些能力時,這一切就會結(jié)束,我們一定會這樣做?!眱?nèi)塔尼亞胡稱,以色列與美國分享了伊朗正在研制核武器的情報:“很明顯,他們正在制定一項將鈾武器化的秘密計劃。他們的進展非常迅速。他們將在幾個月內(nèi),甚至不到一年的時間內(nèi),制造出一個測試裝置,甚至可能是一個初始裝置。這就是我們與美國分享的情報?!?金十)
  • 查看更多