Solana NFT API 的使用——演示
在我们撸起袖子开始一起构建我们的示例 Solana NFT dapp 之前，我们想对我们的示例 dapp 做一个快速演示。这样，您就可以提前看到最终结果。因此，您将轻松决定是否要自己承担这个示例项目。
以下屏幕截图代表了我们的 Solana NFT dapp 的要点：
查看上图，您可以看到顶部的输入字段（“Solana” 正下方）。这是我们的 dapp 接受代币地址的地方。当我们单击“获取 NFT”按钮时，Solana NFT API 会收集与该地址相关的详细信息。最后，当用户执行搜索时，它会显示 NFT 的图像、其集合的名称及其代币 ID。我们可以根据需要多次重复搜索任意数量的 Solana NFT（一次一个）。以下是其他一些搜索结果：
“Okay Bear”系列：
“Solana Monkey Business”（SMB）系列：
Solana NFT API 的使用——示例项目
如果您正在阅读本文，我们假设您喜欢演示部分中看到的内容，并渴望亲自动手。幸运的是，这是一个简洁而简单的示例项目。因此，您可以在不到十分钟的时间内完成它。此外，我们将逐步指导您完成整个过程，以便即使是完全的初学者也可以跟上。尽管如此，您可以使用我们在GitHub上为您准备的代码来走一条额外的捷径。在那里，您还可以找到上一节中介绍的所有资产（徽标、背景等）。当然，您也可以从头开始这个项目。
如果您已经克隆了我们的代码，那么您现在正在查看我们项目的布局：
此时，您已准备好构建此 React 应用程序。尽管要访问 Moralis 的 Solana NFT API 的功能，您需要使用 Moralis 服务器的详细信息。本质上，您需要将您的应用程序 ID 和服务器 URL 粘贴到“index.js”文件中的指定位置：
注意：如果这不是您第一次使用 Moralis，您可能已经知道如何获取所需的服务器详细信息。因此，您可以跳过以下部分。
最初的道德设置
初始 Moralis 设置是一个快速而简单的过程，以下是您需要完成的步骤：
创建您的免费 Moralis 帐户；如果您已经拥有 Moralis 帐户，则使用您的凭据登录。
在您的 Moralis 管理区域内，导航到“服务器”选项卡并创建一个新服务器：
选择服务器类型。请注意，在处理示例项目和测试 dapp 时，最好使用“Testnet 服务器”选项：
输入您的服务器详细信息：名称、位置和链。然后，使用“添加实例”按钮启动您的服务器：
使用您的服务器的“查看详细信息”按钮并复制相关详细信息：
将复制的详细信息粘贴到“index.js”文件中。
创建一个简单的 React 应用程序
完成上述设置后，您就可以构建一个简单的 React 应用程序了。因此，打开“App.js”文件并首先定义一些状态变量：
如您所见，我们将使用这些变量来存储输入的地址、NFT 的名称和图像。接下来，我们需要添加适当的代码行来创建我们的用户界面 (UI)。我们从标题、地址输入字段和按钮开始，根据输入的地址执行搜索：
我们现在可以运行我们的 dapp 来确保上述代码行正常工作：
查看上面的截图，您可以看到我们已经准备好了“Solana NFT”标题、输入字段和“获取 NFT”按钮。当然，布局非常基础，因为我们还没有实现任何样式。我们还没有使用 Solana NFT API。因此，即使我们输入地址并单击“获取 NFT”按钮，事情也无法正常运行。因此，我们需要导入 Solana API。
导入 Solana NFT API
在“App.js”文件的顶部，我们需要添加以下代码行：
上面的代码行导入了 Solana NFT API。现在，我们需要使用“ npm i react-moralis ”或“ yarn add react-moralis ”命令安装“ react-moralis ”。您可以在 Visual Studio Code (VSC) 的终端中输入这些命令中的任何一个。完成后，我们可以使用以下命令调用“ useMoralisSolanaApi ”钩子：
接下来，我们需要编写“NFTsearch”函数的细节。我们首先定义一个网络和地址：
然后，我们需要确保我们的函数获取与搜索地址相对应的 NFT。这就是 Moralis 的 Solana NFT API 使事情变得非常简单的地方。因此，我们可以用一行代码来实现此功能：
为了记录结果，我们还添加了“ console.log(nftResults)；”，这将使我们能够使用浏览器的控制台查看结果。
有了上述功能后，让我们看看我们的 dapp 的实际效果。为此，我们首先进入 OpenSea，选择一个示例 NFT 并复制其代币 ID：
然后我们在 dapp 的搜索框中使用该代币的 ID：
如上图所示，点击“获取 NFT”按钮后，我们会获取一个对象。后者包含与搜索地址相关的所有详细信息：
此外，“metaplex”中还有其他详细信息，其中还包括所有者的历史记录：
然而，我们感兴趣的是元数据，它还包含 NFT 的图像 URL：
使用 Solana NFT API 实现图像和名称
上面的截图表明我们拥有填充 dapp 所需的所有详细信息。回想一下上面的演示，您知道我们将仅使用集合名称和 NFT 的 ID。但是，您可以轻松地做更多的事情。例如，您还可以显示所有者的历史记录等等。但现在让我们专注于在我们的示例 Solana NFT dapp 中实现图像和名称的显示。
至于 NFT 的名称，我们可以将“setName”设置为搜索结果：
当然，对于图像来说，事情稍微复杂一些。看完以上细节后，您已经知道我们需要从元数据（.JSON 文件）中提取图像的 URL，即 NFT 的 URI。以下是实现此目的的代码行：
如果我们现在再次运行我们的 dapp，它将返回搜索到的 NFT 的名称和图像：
显然，这适用于 Solana 上的所有 NFT：
此时，我们的示例 dapp 已经提供了与上面演示相同的功能。此外，就 Solana NFT API 实用程序而言，我们已经完成了所有工作。当然，我们也鼓励您调整样式并使 UI 看起来不错。不过，如果您克隆了我们的代码，样式已经应用。因此，上面的内容看起来更酷；但是，功能完全相同：
