什么是 Solana NFT 元数据?
除非你一直生活在与世隔绝的地方,否则你一定知道 NFT 是区块链上最受欢迎的用例之一。当然,在很多情况下,NFT 只不过是保存在区块链上的毫无意义的图像。然而,也有很多著名的 NFT 项目,包括 Solana 链。这些项目中的大多数都提供了某种平台,NFT 所有者可以在其中使用他们独特的代币。此外,这也是 NFT 元数据发挥重要作用的地方。毕竟,NFT 和元数据密不可分。尽管如此,如果没有元数据(提供有关其他数据的信息的数据),你就无法创建 NFT。
此外,元数据通常以“ .JSON”文件的形式出现,其中包含有关 NFT 的所有详细信息。这还包括作为 NFT 最常见视觉表示的图像的 URI。话虽如此,Solana NFT 元数据是指在 Solana 链上创建的 NFT 的元数据。
存储和访问 NFT 元数据
您必须注意,为了创建 NFT,您需要将其详细信息(元数据)及其文件(图像、视频、GIF、PDF 等)存储在某个地方。但许多项目正是通过中心化存储解决方案“作弊”的。遗憾的是,这损害了整个去中心化的目标。
因此,重点关注以去中心化方式存储 NFT 文件和元数据的项目非常重要。对于 Moralis,我们使用 IPFS。因此,您的文件和元数据可以轻松上传到 IPFS,而无需费力。您甚至可以将文件夹上传到 IPFS ,这在批量铸造 NFT时非常有用。这样,您的项目就可以达到适当的去中心化水平。
另一方面,适当的 Solana NFT API 还使您能够访问和使用现有的 Solana NFT。这就是本文要介绍的内容。为此,我们需要获取 Solana NFT 元数据。一旦您知道如何做到这一点,您就可以创建各种围绕 Solana NFT 的 dapp。例如,您可以整齐地显示 Solana NFT,创建高级 Solana NFT 搜索引擎,甚至启动 NFT 市场。最后,以下部分将向您展示如何开始使用 Solana NFT 编程。还值得一提的是,Moralis NFT API是跨链兼容的,因此它也是最好的以太坊 NFT API、币安 NFT API 等等!
获取 Solana NFT 元数据 – 我们的 Solana NFT Dapp 演示
如上所述,让我们看一下我们的示例 Solana NFT dapp 的演示,您将学习如何继续创建它。如您在以下屏幕截图中看到的,我们保持了简单性:
上图展示了我们示例 dapp 的要点。在顶部,就在 Solana 徽标下方,有一个输入字段。用户可以在这里输入任何 Solana NFT 地址。要对输入的代币地址进行实际操作,用户需要单击“获取 NFT”。通过这样做,我们的代码行会获取 Solana NFT 元数据。因此,我们的 dapp 可以访问与搜索地址相关的详细信息。
由于我们决定保持简单,我们的 Solana dapp 仅显示基本信息。这些包括相关 NFT 的图像、集合的名称和代币 ID。但是,我们可以使用大量其他数据。当然,用户可以重复搜索其他 Solana NFT。以下是我们 dapp 实际运行的另外两个示例:
“Okay Bear” NFT 之一的搜索结果:
“Solana Monkey Business (SMB)” NFT 之一的搜索结果:
如何使用 React 和 Moralis 获取 Solana NFT 元数据
现在是时候撸起袖子,跟随我们的脚步了。你有两个选择:你可以从头开始构建自己的 Solana NFT dapp 实例,也可以使用我们的代码。我们的代码在这个GitHub存储库中随时可用。该文件夹包含您在上面的演示中看到的所有资产(徽标、背景等)。不过,正如你所想象的那样,如果你按照我们的指引自己实现代码,你将从本教程中获得最大的收益。
首先我们来看一下我们的“NFT-SOLANA”项目的结构:
如上图所示,我们从一个基本的 React 应用模板开始。目前,我们的应用程序与 Web3 还没有任何关系。要进行这种转换,您必须将代码与Moralis SDK(包括 Solana API)连接起来。因此,您需要完成一些初始的 Moralis 设置步骤,以便您创建 Moralis dapp。然后,您将能够获取该服务器的详细信息并将其粘贴到“index.js”文件中:
开始使用 Moralis
要获取 Solana NFT 元数据,您需要完成初始 Moralis 设置。幸运的是,开始使用 Moralis 非常简单。它包括以下六个步骤:
使用本文开头提到的“创建您的免费 Moralis 帐户”链接。但是,如果您已经有一个活跃帐户,请确保登录:
进入 Moralis 管理区域后,单击“创建新服务器”按钮(位于“服务器”选项卡内):
选择适当的服务器类型:
输入您的服务器名称并选择离您所在位置最近的城市。另外,选择您感兴趣的链。使用 Solana API 获取元数据时,您可以使用任何链。最后,单击“添加实例”运行您的服务器:
点击“查看详细信息”以访问您的服务器 URL 和应用程序 ID 并复制它们:
将上面复制的详细信息粘贴到“index.js”文件的指定区域。参见上一节的最后一张图片。
从简单的 React 应用开始
完成 Moralis 设置后,您可以开始构建 Solana NFT dapp,它将获取 Solana NFT 元数据。您应该从一个简单的 React 应用程序开始。因此,打开“App.js”并在“const App”中定义一些状态变量:
上面的截图显示了这些变量将用于存储我们 dapp 的关键参数。这些包括输入的地址和 NFT 的名称和图像。有了这些变量,你就可以专注于添加构成用户界面 (UI) 的代码行。你可以从标题开始,然后是地址输入字段。此外,请确保添加将触发 NFT 搜索的按钮:
接下来,我们建议您运行 dapp 来检查一切是否顺利运行:
上面的屏幕截图显示了您在此阶段应该看到的内容。因此,您应该拥有 Solana NFT dapp 的“裸”版本。后者包括标题(“Solana NFT”)、输入字段和“获取 NFT”按钮。我们不希望您担心样式。到目前为止,我们还没有实现任何 Web3 功能;因此,我们的 dapp 还无法运行。为了使其工作,我们需要导入 Moralis 提供的 Solana API。
使用 Solana NFT API 获取代币的元数据
在“App.js”文件(顶部)中,添加:
上面的代码行将导入 Solana API。但是,您还需要安装“react-moralis”才能使其工作。您可以使用“ npm i react-moralis ”或“ yarn add react-moralis ”命令执行此操作。然后,您可以调用上面导入的“useMoralisSolanaApi”钩子:
然后,重点编写“NFTsearch”函数:
注意:如上所示,对于“mainnet”,我们关注的是位于 Solana 主网上的 NFT。但是,如果您要关注 Solana 测试网,则可以输入“devnet”。
定义网络后,您需要确保“NFT 搜索”获取与搜索地址匹配的 NFT。借助 Moralis Solana API,您可以使用“getNFTMetadata”的强大功能。因此,一行代码即可完成工作:
是的,“getNFTMetadata” 是让您获取 Solana NFT 元数据的关键。此外,请确保通过添加“ console.log(nftResults) ;”记录结果。后者将允许您使用浏览器的控制台(“inspect”选项)查看结果。
通过添加上述代码行,您的 dapp 应该已经在后端执行繁重的工作。您可以通过运行它并输入 Solana NFT 的代币 ID 来检查。此外,您可以使用 OpenSea 获取代币 ID:
只需复制代币 ID 并将其粘贴到 dapp 的输入字段中。另外,请确保打开浏览器的控制台:
上面的截图显示,当你点击“获取 NFT”按钮时,你的 dapp 已经获取了一个对象。此外,该对象包含与搜索到的代币 ID 相关的所有详细信息:
搜索到的 NFT 图像的路径(以及其他详细信息)位于元数据内:
获取 Solana NFT 元数据 – 图像 URI 和集合名称
您可以在上面的屏幕截图中看到,现在您可以获取 Solana NFT 元数据和其他详细信息。因此,您已经拥有填充 Solana NFT dapp 所需的一切。这样,您就可以实现显示任何 Solana NFT 的图像、集合名称和代币 ID 的功能:
对于集合名称和令牌 ID,“setName”可以起到以下作用:
另一方面,显示图像有点棘手。毕竟,它们的 URL 被打包在 NFT 的元数据中。因此,你需要使用能够正确提取这些详细信息的代码:
您现在可以再次运行 dapp。如果您正确遵循我们的指导,它应该可以按照演示中演示的那样运行:
如果您了解 CSS 基础知识,您可以轻松添加所需的样式将上述内容转换为以下内容:
注意:我们的代码(上面的“GitHub”链接)包含所有样式代码/文件。