当前位置：首页 >> solana教程 >> Solana JavaScript 开发 — 在 Vanilla JavaScript 中使用 Solana API

Solana JavaScript 开发 — 在 Vanilla JavaScript 中使用 Solana API

admin 2025-02-20 14:41:05 solana教程 83

什么是 Solana API？

在开始 Solana JavaScript 开发之前，我们将仔细了解一下 Solana API 是什么。为了全面理解这个概念，我们将从深入研究 API 及其含义开始本节。那么，什么是 API？

API 是“应用程序编程接口”的缩写，每当您浏览网页或使用手机上的应用程序时，您通常都会接触到 API。使用任何设备时，您的软件都会连接到互联网以将数据发送到服务器。服务器接收信息，执行特定操作，然后发回响应。然后，您的设备会解释响应并以可读的方式呈现给您。整个过程通常由 API 加速。因此，API 本质上允许两个软件相互通信。

为了更好地理解 API，我们可以用餐厅类比来使这个概念更容易理解。在这个比喻中，厨房是处理您订单的底层“系统”。然而，在餐厅就餐期间，您通常不会直接与厨房沟通，而是使用服务员作为中介。在这个例子中，服务员是处理您与厨房厨师之间沟通的 API。这意味着服务员会送达您的订单（请求），然后为您提供食物（响应）。

因此，总而言之，API 通过在查询时一致地提供函数来传输/翻译指令，以便相互理解，从而允许在安全的开发环境中进行兼容编码。现在，对这个概念有了更好的理解，那么它在 Solana 的背景下意味着什么呢？其实很简单；Solana API 本质上为 Solana 网络提供了上述功能。

为什么要使用 Solana API 进行 Solana JavaScript 开发？

在更好地了解 Solana API 是什么之后，让我们进一步了解为什么您可能需要 API。两款软件之间能够进行通信的能力的重要性不容小觑。由于 API 促进了软件之间的通信，因此它们可以极大地帮助所有开发过程。

每当开发人员创建新程序或 dapp 时，API 都可让开发人员避免从头开始创建所有内容。相反，开发人员可以“外包”职责，例如，利用已经开发的代码片段来更好地完成工作。

此外，这正是 Moralis 发挥作用的地方，因为该平台提供了 Solana JavaScript 开发的最佳 API 之一。因此，只需几行代码就可以使用 Moralis 的 Solana API 获取各种后端和链上数据。例如，您可以轻松查询从代币余额到验证用户的所有内容。

因此，如果您想成为区块链开发人员并希望使用 Solana，您应该查看 Moralis 的 Solana API。借助该 API，您将能够显著缩短开发时间并更高效地创建 Solana dapp。

但是，在我们仔细研究 Moralis Solana API 的工作原理之前，我们将仔细研究 JavaScript 开发。这将为我们提供一个良好的基础，然后我们可以通过一个实际示例来说明使用 Moralis 的 Solana API 后 Solana JavaScript 开发变得多么容易！

什么是 JavaScript 开发？

JavaScript 最早出现于 20 世纪 90 年代，如今已成为最重要的编程语言之一。开发人员主要（但并非唯一）使用 JavaScript 进行 Web 开发，更具体地说，是为了使网站更具交互性。该编程语言具有更改和更新 HTML 和 CSS 代码的功能，而 HTML 和 CSS 代码是 Web2 网页的基础。此外，由于 JavaScript 在 HTML 和 CSS 之上运行，开发人员通常将其称为 Web2 的第三层。因此，每当您与动态网站交互时，JavaScript 参与的可能性就很高。

此外，JavaScript 是一种所谓的基于文本的语言，因此学习 JavaScript 非常直观。因此，通过使用这种语言，您可以创建动态更新的内容，并为所有客户提供更复杂的 UX（用户体验）。这意味着您在使用 JavaScript 时可以完全控制图像、多媒体元素等。

正如我们之前提到的，JavaScript 主要用于开发网页；然而，这并不是全部。JavaScript 还用于其他开发领域，如软件、服务器、嵌入式硬件控制等。因此，开发人员可以利用 JavaScript 来设置简单的 Web 服务器、开发 Web 和移动应用程序，甚至创建游戏。

这表明 JavaScript 是通往许多不同领域的大门。这也是 JavaScript 被广泛采用并成为最流行语言之一的众多原因之一。

如果您想了解有关 JavaScript 的更多信息，请考虑Moralis Academy。该学院提供一系列课程，帮助您成为更熟练的 Web3 开发人员。在区块链课程中，您会发现“学习 JavaScript 编程”课程，它可以让您将 JavaScript 技能提升到一个新的水平！

Solana JavaScript 开发 — 使用 Moralis 的 Solana API

在以下部分中，我们将深入研究 Solana JavaScript 开发和 Moralis 的 Solana API。为了说明在 Vanilla JavaScript 中使用 Moralis 的 Solana API 有多么容易，我们将创建一个简单的 dapp，用户可以通过输入钱包地址并单击按钮来查询钱包组合。因此，为了向您展示我们正在努力的目标，以下是最终产品的屏幕截图：

使用此 dapp，用户可以输入 Solana 钱包地址，选择所需的网络，然后单击“获取投资组合”按钮即可查询该特定地址的投资组合。这将提供三部分信息：原生 SOL 代币、其他代币和NFT余额。此外，要获取这三个元素，我们只需要一行代码；不过，稍后会详细介绍。

为了使该过程更容易理解，我们将该过程分为以下三个步骤：

创建 Moralis Dapp
设置 HTML 文件
添加 JavaScript 逻辑

那么，让我们开始仔细看看如何创建自己的 Moralis dapp！

步骤 1：Solana JavaScript 开发 — 创建 Moralis Dapp

如果您还没有，您需要先创建一个 Moralis 帐户。这完全免费，只需几秒钟即可完成。有了帐户后，您可以通过导航到 Moralis 管理面板并点击“创建新 Dapp”按钮来启动该过程。

单击此按钮后，您需要选择的第一件事就是环境。由于这只是一个教程，我们将选择“Testnet”选项。但是，您很快就会注意到，没有任何测试网选项与 Solana 相关。不过，不用担心；您可以简单地选择其中任何一种替代方案，因为在使用 Solana API 时，这不会影响我们的 dapp。因此，在我们的例子中，我们选择了 Polygon 的孟买测试网。从那里，剩下的就是选择一个区域，命名您的项目，然后点击“创建您的 dapp”。

有了服务器后，点击“设置”按钮，您可以探索一些选项。例如，您可以在“Dapp 凭证”标题下找到有关您的 dapp 的详细信息。在那里，您会找到我们在以下步骤中需要的 dapp URL 和应用程序 ID！

第 2 步：Solana JavaScript 开发 — 设置 HTML 文件

dapp 全部设置好后，我们就可以开始实际的开发过程了。不过，在深入研究代码之前，请从我们最初在文章中链接的 GitHub 存储库中克隆该项目。

当您在本地存储库中拥有“index.html”和“index.js”后，我们将开始仔细查看 HTML 文件。“ index.html ”相对简单，这是全部代码：

<html>
  <头部>
    <title>Solana API 演示</title>
    <script src= "https://unpkg.com/moralis/dist/moralis.js" ></script>
  </head>
  <主体>
    <h2>Solana API 演示</h2>
    <输入类型= “文本” id= “地址”名称= “地址”占位符= “地址” >
    <select id= "网络" name= "网络" aria-placeholder= "网络" >
      <option value= "mainnet" >主网</option>
      <option value= "devnet" >Devnet</option>
    </选择>
    <button id= “get-portfolio” >获取投资组合</button>
    <script type= "text/javascript" src= "./index.js" ></script>
  </body>
</html>

如您所见，有一个标题、一个标题以及一些输入字段和按钮。这相对简单，我们不会深入研究这些元素。原因是 dapp 内容的结构并不重要。因此，您可以根据作为开发人员的需求以及您希望最终产品的外观来更改它。

然而，HTML 代码中至关重要的部分是第四行：

<script src= "https://unpkg.com/moralis/dist/moralis.js" ></script>

这是我们导入Moralis SDK 的地方，它允许您使用 Moralis 的高级开发工具包。因此，这允许您使用我们将在下一步中仔细研究的代码片段！

步骤 3：Solana JavaScript 开发 — 添加 JavaScript 逻辑

在本 Solana JavaScript 开发指南的最后一步中，我们将添加应用程序的逻辑。但是，在此之前，我们需要初始化 Moralis 以将我们的代码连接到我们最初创建的 dapp。如果您仔细查看“ index.js ”文件，只需在代码的以下部分插入 dapp URL 和应用程序 ID 即可初始化 Moralis：

复制代码
常量应用程序ID = “” ;
道德。开始（{ serverUrl，appId } ）；

初始化 Moralis 后，我们将重点关注 ”getSolanaPortfolio()” 函数。该函数如下所示：

const getSolanaPortfolio = async ( ) => {   
  const选项 = {
    网络：document.getElementById ( “网络” ) .值，
    地址：document.getElementById ( “地址” ) .值，
  } ；
  const portfolio = await Moralis. SolanaAPI . account . getPortfolio ( options ) ;
  控制台. log （投资组合）；
} ；