NFT教程：如何在Flow和IPFS上展示NFT系列

Bitget下载

注册下载Bitget下载，邀请好友，即有机会赢取 3,000 USDT

APP下载   官网注册

本文是NFT教程的第二部分，主要介绍区块链、NFT和IPFS的流程。请阅读教程的第一部分，创建NFT合同，用流量和IPFS铸造令牌。

本文，我们将构建一个简单的React应用程序，它与流智能契约进行交互，以验证和获取用户拥有的NFT。然后，我们将解析NFT的元数据。以获得NFT的基础资产(在这种情况下是视频)的IPFS位置。提醒一下，我们正在建设的NFT，就像NBATopShot一样，只是视频内容不同而已。

本教程中你需要运行流动模拟器。如果你不'；如果您不记得如何启动它，您可以阅读以前的文章或查看FlowCLI文档。应该注意的是，流动模拟器是对存储器中的流动区块链的模拟。所以，如果模拟器关闭了，你需要继续做好以下工作：

启动流量模拟器

部署项目

铸造你的NFT

在本教程的第一部分，NFT教程-使用流和IPFS创建NFT，详细介绍了每个步骤。

另外，您需要在您的机器上安装NodeJS。你可以在这里安装它。

和以前一样，您需要一个文本编辑器。

在本教程第一部分创建的pinata-party项目目录中创建React应用程序(您也可以在一个全新的目录中创建您的React应用程序)。

要创建我们的应用程序，请运行下面的命令：

当所有东西都安装好后，您将拥有一个名为pinata-party-frontend的新目录。切换到此目录并安装依赖项。

首先，，参考Flow文档，需要安装FlowJSSDK。我们只需要根据流程文档设置前端：

有些值需要存储为应用程序的全局变量，这里用的是环境变量。。在react中创建一个。env文件并设置一个键值对，其中键值前缀是REACT_APP。在流程文件中，设置为与流程测试网络连接。在本教程中，，我们将连接到流动模拟器。因此，需要一些改变。将以下内容添加到。env文件：

用上面提到的本地仿真器url替换REACT_APP_ACCESS_NODE的值。。用部署项目时获得的地址替换REACT_APP_CONTRACT_PROFILE的值。

您还需要创建一个配置文件来与流JSSDK进行交互。。在src目录中创建一个名为config.js的文件。添加以下内容：

该配置文件仅帮助JSSDK与流区块链(或本例中的模拟器)一起工作。。要使该文件在整个应用程序中可用，请打开index.js文件并添加以下行。

现在让'；让我们联系一些认证。如果你不'；我不想，你不想。没有必要强迫人们在认证后进入网站。在转移NFT资产时，身份验证非常重要。

我们需要创建一个身份验证组件。在您的src目录中，创建一个名为AuthCluster.js的文件，在这个文件中，添加以下内容：

代码非常简单。通过使用FlowJSSDK的功能，您可以使用登录和注册按钮来连接到钱包提供者。您可以注册一个帐户或使用现有帐户登录。

现在我们需要将这个组件放到我们的应用程序中。。让'；让我们先保持简单。用以下内容替换您的App.js文件。

如果您现在启动应用程序(npmstart)，您应该会看到一个带有登录和注册按钮的页面。其实两个按钮都有功能。试试看。

好了，现在React应用程序已经基本设置好了，让'；让我们开始建立NFT获得帐户，并显示它们。

展示我们在第一篇文章中铸造的硬币的NFT。，需要与区块链之流沟通。现在它正在与流动模拟器通信。当设置。env文件，应用程序被告知模拟器正在端口8080上运行。但是现在，如何使用JavaScript与Flow进行交互？

幸运的是，Flow在其JSSDK中内置了这一特性。如果你记得的话，我们之前写过一个剧本。，根据NFT令牌id找到它，并返回令牌的元数据。现在看起来是这样的：

checktokenmetadata.CDC

。我们只需要把它转换成一个JavaScript调用。让'；让我们创建一个可以获取数据并最终显示NFT数据的新组件。在src目录中，创建一个名为TokenData.js的文件。在该文件中，添加以下内容：

在该文件中，创建了一个组件，该组件带有一个获取令牌数据的按钮。当您单击get按钮时，它将调用我们创建的名为fetchTokenData的函数。。这个函数使用FlowJSSDK来执行与本教程第一部分中从命令行执行的脚本完全相同的脚本，但是在React中。我们将执行结果设置到一个名为nftInfo的状态变量中。。React根据nftInfo显示NFT元数据中的键值对。还有一个清除数据的按钮。

我还加了一点CSS，让它更漂亮。App.css的定义如下：

现在，，只需将新组件添加到App.js中，放在AuthCluster组件下：

运行应用程序，尝试获取令牌数据，应该是这样的：

。

这真是太酷了！我们查找指定帐户拥有的NFT，然后从令牌中获取元数据。和显示元数据，我们知道元数据中的值被解析为视频文件。让'；让我们看看。

您已经注册了一个Pinata帐户，并通过Pinata上传接口将您的视频文件添加到IPFS。这意味着你已经可以从IPFS获得内容。在Pin浏览器中当你点击一个哈希值，你将被带到皮纳塔IPFS网关，在那里你的IPFS内容被解析和显示。为了让教程更通用，我们还是从协议实验室网关获取。

回到TokenData.js文件，让'；让我们添加一个方法来显示从IPFS检索到的视频文件，并修改代码：

我们添加了一个视频标签，它指向IPFS上的文件。。您会注意到，uri值在这里被拆分以获得IPFS哈希值，这样就可以从IPFS网关获得相应的内容。让我先介绍一下URI。

我们用NFT创建的uri看起来像ipfs://Qm…我们这样创建它是因为IPFS桌面客户端默认允许你点击并打开这样一个链接。此外，勇敢浏览器还支持粘贴此类链接。。我们相信随着IPFS的发展，这种联系方式会得到越来越多的支持。

但是，在这个上下文中，我们需要使用散列从IPFS公共网关获取内容，并在页面上显示它。因此链接看起来像这样：

现在，如果您访问我们的应用程序来获取令牌数据，您将看到以下界面：

这是一个真正的活的数字资产！你的视频可能不一样，但希望你在应用中感受到同样的体验。这是一个非常简单的应用程序。你可以做很多事情让它变得更漂亮，变得更互动，甚至加入更多的流动元素。。FlowJSSDK的功能很强大，推荐你看文档。

在第二部分中，成功地使用Flow向应用程序添加了身份验证，并创建了一个接口来获取NFT信息。创建一个方法来显示原始元数据和相应的底层资产。这一切都由区块链和IPFS之流来保证。我们知道谁拥有NFT，也知道显示的内容是有效的，因为哈希值是在NFT中编码的。

在本教程的最后一篇文章中，我们将重点介绍如何创建一个迷你交易市场。让'；让我们转到NFT。

那个'；DaDaqq.comNFT的教程：如何在Flow和IPFS上展示NFT系列的细节。更多关于展示NFT收藏品的信息，请关注硬币大师的其他相关文章！

本站提醒投资有风险，入市需谨慎。此内容不作为投资理财建议。

标签：NFT流IPFS收藏品区块链工艺