译文出自：登链翻译计划
译者：翻译小组
校对：Tiny熊
本文是NFT教程的的第二部分，本教程主要介绍Flow区块链、NFT和IPFS。请先阅读第一部分NFT教程-用Flow和IPFS创建NFT。
在本文中，我们将构建一个简单的React应用程序，该应用程序与Flow智能合约交互，以验证和获取用户拥有的NFT。然后，我们将解析NFT的元数据，以获得NFT的底层标的资产的IPFS位置。提醒一下我们正在打造的NFT，就像NBATopShot一样，只不过是不同的视频内容。
项目设置
本教程中，你需要运行Flow模拟器。如果你不记得如何启动，可以看看之前的文章或者查看FlowCLI文档。需要注意的是，Flow模拟器是Flow区块链在内存的模拟。所以，如果关闭了模拟器，你需要继续做以下工作：
启动Flow模拟器
部署项目
NFT聚合平台Dew宣布向社区发放代币空投:8月8日消息，NFT聚合平台Dew宣布向社区发放空投。NFT交易者、Dew域名持有者以及Galxe活动获胜者有机会获取代币。[2023/8/9 21:32:57]
铸造你的NFT
在本教程第一部分NFT教程-用Flow和IPFS创建NFT详细介绍了其中的每一个步骤。
此外，还需要在你的机器上安装NodeJS。你可以在这里安装。
和之前一样，你需要一个文本编辑器。
初始化React和安装依赖
在第一部分教程中创建的pinata-party项目目录下创建React应用。
要创建我们的应用程序，运行以下命令：
npxcreate-react-apppinata-party-frontend
当一切安装完成后，你会有一个新的目录，叫做pinata-party-frontend，切换到该目录，安装依赖。
HTC发布元宇宙应用VIVERSE，支持NFT和数字资产存储和管理:3月1日消息，HTC 于 2022 世界移动通信大会（MWC）上首次揭示最新元宇宙应用－VIVERSE，并展示全新元宇宙产品、平台和体验。
HTC 董事长暨执行长王雪红表示，将元宇宙世界取名为 VIVERSE，是因为这是一个让人沉浸其中、充满奇妙新体验的无边际宇宙，同时也是通往合作伙伴创造其他宇宙的快速传送门。
HTC 还公布了合作伙伴信息，包括 Beatday、Engage、VRchat 和 VIVE Sync。用户可以通过 Vive Connect 进入 Viverse 元宇宙，同时 Viverse 还获得了 VIVE Arts NFT 市场的支持，HTC 声称连接 Viverse 元宇宙的 Vive Flow VR 头显将是第一款支持加密钱包的 VR 设备，用户可以通过智能手机配套应用程序使用 WalletConnect 安全地存储和管理 NFT 和数字资产。(VentureBeat)[2022/3/1 13:29:26]
首先，参考Flow文档，需要安装FlowJSSDK。前端的设置我们只需要按照Flow的文档进行即可：
Etherscan新增“查看NFT”和“联系持有者”功能:2月17日消息，以太坊区块浏览器及数据分析平台Etherscan新增“View NFT”和“Chat with Owner”功能。Etherscan针对所有NFT交易添加“View NFT”新按钮，用户可以点击查看NFT详细信息。此外，NFT详细信息页面支持“Chat with Owner”功能，可以点击按钮通过Blockscan Chat联系NFT持有者进行沟通。上月消息，创建Etherscan区块链浏览器的团队Blockscan发布“Blockscan Chat”测试版。该网站主页披露的信息显示，Blockscan Chat是一个消息传递平台，用户可以通过钱包到钱包轻松、即时地相互发送消息。[2022/2/17 9:57:15]
npmi;exportdefaultTokenData;//rawTokenData
button{padding:10;height:30px;min-width:100px;cursor:pointer;}
Alethea AI获BSC增长基金投资，将在元宇宙、NFT生态系统等领域合作:12月30日，Alethea AI宣布获得币安智能链（BSC）近期推出的10亿美元增长基金的投资，具体金额未披露。BSC将与Alethea AI在元宇宙合作伙伴关系、战略NFT生态系统支持以及人工智能和NFT的联合营销和教育方面开展合作。
此前8月，Alethea AI获得1600万美元资金，旨在构建一个由其机器人居住的元宇宙。主要投资者包括NFT基金Metapurse、Crypto.com Capital、亿万富翁投资者马克·库班（Mark Cuban）、Dapper Labs、BITKRAFT、Galaxy Interactive、Sfermion、Multicoin Capital、LD Capital、Alameda Research、CMS Holdings、Gemini Frontier Fund等。[2021/12/30 8:14:32]
现在，只要将新组件添加到App
网贷公司玖富宣布将专注NFT、元宇宙和区块链技术的研发:8月31日消息，玖富子公司以太证券香港首席执行官Raymond Chan表示：“我们注意到区块链技术正在颠覆和改变传统的经纪服务，包括高盛、摩根大通、Robinhood在内的许多机构都在其服务中加入了数字资产服务。因此，我们认为在可预见的未来，这一领域的需求会越来越大，因此我们在新加坡的研发团队增加了资源，专注于NFTs、METAVERSE和其他区块链技术和服务的研发。”
金色财经此前报道，玖富宣布将转变为一家以股权证券经纪服务和数字资产技术服务为核心的数字和区块链证券经纪公司。（新浪财经）[2021/8/31 22:49:51]
exportdefaultApp;
运行应用程序并尝试获取代币数据，它应该是这样：
这真是太酷了！我们正在查找指定的账户所拥有的NFT，然后从该代币中获取元数据。并显示该元数据，我们知道该元数据中的一个值解析为一个视频文件。让我们把它显示出来。
从IPFS获取媒体文件
你已经注册了一个Pinata账户，并通过Pinata上传界面将你的视频文件添加到IPFS。这意味着你已经可以从IPFS中获取内容了。在PinExplorer中，当你点击一个哈希值时，你会被带到PinataIPFS网关，在那里你的IPFS内容被解析并显示。为了教程更通用，我们还是从ProtocolLabs网关中获取它。
回到TokenData
p>);};exportdefaultTokenData;//rawTokenData.js
我们已经添加了一个video标签，它指向IPFS上的文件。你会注意到，这里拆分了uri值，以获得IPFS哈希值，这样就可以从IPFS网关获取对应内容。先介绍下那个URI。
我们用NFT创建的uri看起来像ipfs://Qm...。我们之所以这样创建，是因为IPFS桌面客户端默认允许你点击并打开这样的链接。另外，Brave浏览器也支持粘贴这样的链接。并且我们认为这种链接形式会随着IPFS的发展得到越来越多的支持。
然而，在这里下，我们需要在利用哈希来从IPFS公共网关获取内容，并在页面上显示。因此链接会是这样：
https://ipfs.io/ipfs/QmRZdc3mAMXpv6Akz9Ekp1y4vDSjazTx2dCQRkxVy1yUj6
现在，如果你访问我们的应用程序中获取代币数据，会看到如下界面：
这是一个真正的活的数字资产!你的视频可能会有所不同，但希望你在应用中感受到相同的体验。
最后
这是一个非常简单的应用，你可以做很多事情让它变得更漂亮，让它的交互性更强，甚至可以为它添加更多的Flow元素。FlowJSSDK的功能很强大，所以我推荐大家阅读一下文档。
在第二部分成功地使用Flow为应用添加了身份验证，创建了一个接口来获取NFT的信息，创建了一种方法来显示了原始元数据以及对应的底层标的资产。这一切都由Flow区块链和IPFS来保障。我们知道NFT是由谁拥有，也知道显示的内容是有效性，因为哈希值被编码到NFT中。
在本教程的最后一篇，我们将专注于创建一个迷你交易市场，让我们转移NFT。
本翻译由CellNetwork赞助支持。
来源：https://medium.com/pinata/how-to-display-your-nft-collection-like-nba-top-shot-with-flow-and-ipfs-6ba75048bf8a
参考资料
登链翻译计划:https://github.com/lbc-team/Pioneer
翻译小组:https://learnblockchain.cn/people/412
Tiny熊:https://learnblockchain.cn/people/15
NFT教程-用Flow和IPFS创建NFT:https://learnblockchain.cn/article/2271
NFT教程-用Flow和IPFS创建NFT:https://learnblockchain.cn/article/2271
这里安装:https://nodejs.org/en/
Flow文档:https://docs.onflow.org/flow-js-sdk/flow-app-quickstart
第一篇文章:https://learnblockchain.cn/article/2271
Pinata:https://pinata.cloud/
PinExplorer:https://pinata.cloud/pinexplorer
CellNetwork:https://www.cellnetwork.io/?utm_souce=learnblockchain
免责声明：作为区块链信息平台，本站所发布文章仅代表作者个人观点，与链闻ChainNews立场无关。文章内的信息、意见等均仅供参考，并非作为或被视为实际投资建议。
本文来源于非小号媒体平台：
登链社区
现已在非小号资讯平台发布105篇作品，
非小号开放平台欢迎币圈作者入驻
入驻指南：
/apply_guide/
本文网址：
/news/9781311.html
免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表非小号的观点或立场
上一篇：
盘点零知识证明代表性项目：如何影响和塑造区块链生态系统？
郑重声明： 本文版权归原作者所有， 转载文章仅为传播更多信息之目的， 如作者信息标记有误， 请第一时间联系我们修改或删除， 多谢。