由于 Moralis 专注于跨平台互操作性，因此您可以将其与流行的 Web2 开发平台一起使用。例如，您可以使用 Firebase、Supabase 或 Unity 加入 Web3 革命。此外，使用 Moralis 时，您永远不会局限于特定的区块链。虽然我们在此构建了一个 Solana NFT 浏览器，但我们本可以专注于任何其他领先的网络。毕竟，Moralis 也是跨链互操作的。
构建像我们这样的 Solana NFT 浏览器 – 演示
在向您展示如何构建 Solana NFT 浏览器之前，让我们先看一下我们的示例 dapp。这样，您将了解今天的教程将介绍哪些内容。您还可以决定是否要撸起袖子，构建您自己的 Solana NFT 浏览器实例。
以下截图代表了我们的 Solana NFT 浏览器 dapp 的要点。最初，我们的示例 dapp 是空的：
此外，查看上图，您可以看到我们的 dapp 的标题、Moralis 徽标、输入字段和“搜索”按钮。此外，您还可以看到它已经用示例 NFT 收集地址填充了输入字段。此外，我们只需单击“搜索”按钮即可获得结果：
结果整齐地显示在两行中。此外，对于每个 NFT，您可以在顶部看到图像、其名称，我们可以在底部看到其符号。此外，您可以看到，在显示结果时，会出现两个附加选项。在我们的 dapp 顶部，“Solana NFT Explorer”标题的右侧，我们现在有一个页面导航器和一个过滤器输入字段。使用前者，我们可以使用箭头移动到下一页或上一页。或者，我们也可以输入我们要访问的页码：
至于过滤器，我们需要点击输入字段，然后就可以按符号搜索 NFT：
现在，您知道接下来会发生什么。假设您想了解如何构建上面介绍的 Solana NFT 浏览器，请继续学习下一部分。在那里，您将首先学习如何获取 Moralis Web3 API 密钥。
如何使用 NextJS 和 Moralis 构建 Solana NFT 浏览器
正如标题所示，构建上述 dapp 的主要工具是 Moralis 和 NextJS。我们还使用了终极以太坊样板作为起点，这使得事情变得简单得多。但是，您只需克隆我们完成的代码（在GitHub上等着您） 即可节省更多时间：
因此，克隆我们的代码后，您将看到以下布局：
我们将立即引导您完成代码，但正如您在上图中所看到的，您首先需要获取您的 Moralis Web3 API 密钥。
获取您的 Moralis Web3 API 密钥
如果您尚未创建 Moralis 帐户，请点击此处创建您的免费 Moralis 帐户。或者，您可以访问 Moralis 官方网站并点击“免费开始”或“免费试用”按钮：
以下任何选项都会带您进入注册页面：
如上图所示，在注册页面上，您需要输入您的电子邮件地址并创建密码。您还可以使用您的 Google 帐户来加快注册过程。如果您使用电子邮件和密码，请不要忘记确认您的帐户。为此，您需要单击将到达您的电子邮件收件箱的确认链接。
成功设置 Moralis 帐户后（这应该不会超过一分钟），您可以访问 Moralis 仪表板。在这里，您会在侧面菜单中看到“Web3 API”选项卡：
在“Web3 API”页面上，您可以使用“复制”图标复制您的 Moralis Web3 API 密钥：
此外，您可以在帐户设置中访问所有 Moralis 密钥，包括 Web3 API 密钥。为此，您需要单击侧面菜单中的“帐户”选项。进入“帐户设置”页面后，选择“密钥”选项卡，然后复制您的 Web3 API 密钥：
最后，您可以返回“.env copy.example”文件并用您的密钥替换“ xxx ”。然后，将该文件重命名为“.env.local”。这就完成了初始设置！
使用终极 Solana API 构建 Solana NFT 浏览器
得益于企业级 Web3 API和 SDK 提供商 Moralis，我们将轻松实现与区块链相关的后端功能。实际上，我们只需要两个特定端点即可创建上面介绍的 dapp。因此，要构建 Solana NFT 浏览器，“ account/{network}/{address}/nft ”和“ nft/{network}/{address}/metadata ”就可以了。因此，让我们快速概述一下这两个端点。但是，您可以使用Moralis 文档更详细地探索它们。
首先，我们使用“ account/{network}/{address}/nft ”来获取给定网络和地址拥有的 NFT。此 API 接受“ network ”和“ address ”参数：
对于“ network ”参数，我们可以在“ mainnet ”和“ devnet ”选项之间进行选择。有了这两个参数，我们就可以尝试代码并获取响应。在这里我们可以看到“ mint ”值。这些值就是 NFT 代币地址。因此，我们可以在“ nft/{network}/{address}/metadata ” 中使用这些值：
如果我们现在将上面复制的“ mint ”地址粘贴到“ path params ”的“ address ”输入字段中，并再次进入主网，代码将返回所有 NFT 的元数据：
此外，这就是我们构建 Solana NFT 浏览器所需的全部后端。
构建 Solana NFT 浏览器 – 代码演练
要了解我们如何使用上面介绍的 API，请访问“getNFTs.js”和“getNFTMetadata.js”文件。这两个 JavaScript (JS) 文件都位于“api/SolAPI”文件夹中：
因此，如果我们首先查看“getNFTs.js”文件，它包含以下代码行：
在顶部，我们首先导入 Moralis，这是使您能够构建 Solana NFT 浏览器 dapp 的关键之一。接下来，我们使用“ handler ”异步函数，其中包含获取 NFT 地址所需的所有内容。如您所见，我们还使用“.env.local”文件中的“ MORALIS_API_KEY ”变量启动 Moralis SDK 。尽管如此，所有繁重的工作都是由“ account ”类型端点 中的“ getNFTs ”Solana API 端点执行的。
另一方面，“getNFTMetadata.js”文件使用类似的代码行：
本质上，唯一的区别是我们利用了“ getNFTMetadata ”端点。而且，后者是“ NFT ”类型端点的一部分。
前端组件
您可能有一些前端开发经验；但是，我们仍然需要仔细看看 dapp 的 UI 组件背后的代码。让我们从“ NFTCard.jsx ”脚本开始：
“ NFTCard ”组件接收“ nftAddress ”和“ filterQuery ”。前者是“ mint ”地址，后者是用户在过滤器的输入字段中输入的内容。此外，“ nftAddress ”用于获取 NFT 的元数据。此外，这也是我们使用“ getNFTMetadata ”的地方。
此外，值得指出的是，通过使用“ axios.get ”，我们可以从元数据 URI 中提取图像的 URL。以下是示例元数据 URI 及其中的图像 URL：
接下来，我们使用“ setNftData ”将所有获取的 NFT 数据设置到“ nftData ”状态变量中。后者包括合约类型、名称、符号和元数据。此外，渲染 NFT 图像的是“ src={resolveIPFS(nftData?.metadata?.image) ”这行代码。它对其他 NFT 数据使用相同的原理（见下面视频 7:49）。
“ NFTCard ”组件的另一个重要部分是“ apiPost ”函数（8:01）。通过使用这个函数，我们只需要给它提供端点和我们感兴趣的参数来调用特定的API。
另一方面，我们的示例 dapp 的逻辑包含在“index.jsx”文件中。因此，让我们仔细看看该脚本。
UI 逻辑 — “ index.jsx ”
因此，“index.jsx”负责 UI 逻辑。此外，此文件确保所有组件都显示如上演示中所示，包括 Moralis 徽标、“Solana NFT Explorer”标题和地址搜索栏。显然，后者是为我们的 dapp 提供所需处理数据的关键。此外，我们的示例 dapp 接收一个地址，然后利用 Moralis 的 Solana API 发挥其魔力。为此，“ index.jsx ”使用“ inputHandler ”，它更新“ searchInput ”状态变量。
我们的 UI 逻辑还包括“ nftSearch ”按钮。因此，每次用户单击此按钮时，“ nftSearch ”函数都会激活，重置“搜索”输入，然后显示第一页结果。此外，它还使用“ solApi/account/getNFTs ”端点调用“ apiPost ”函数。最后但并非最不重要的是，“ nftSearch ”函数还在“ searchResults ”状态变量中设置搜索结果。
接下来，UI 逻辑使用“ loadPage ”函数设置页面结果，以便每页显示 10 个 NFT。这还会触发“ setPageResult ”，从而更新“ pageResult ”状态变量。此外，每次更新“ pageResult ”时，都会呈现上面显示的“ NFTCard ”组件。
“ prevPage ”和“ nextPage ”函数由“arrow”按钮激活，负责页面导航。最后，我们还使用“ queryHandler ”，确保用户在过滤器的输入字段中输入的任何内容都用于呈现相关结果。
