MenuToggle Menu

API 插件

API 插件支持通过连接到 API 和数据库，将真实数据便捷地呈现到原型中。该功能不同于原有的自定义插件，使用时不再需要拥有编程技能。这一插件将自动处理与 API 之间的数据收发事务，并以 JSON 格式将数据无缝整合到原型中。

什么是 API？

API 是应用程序接口（Application Programming Interface）的缩写，实际上是一组规则，这组规则界定了不同的计算机程序之间进行通信的方式、方法，从而实现不同程序间的协同工作。这就像一座桥梁，在不同的程序间共享信息并执行任务，同时又不需要明确规定每个程序内部的所有工作细节。简而言之，API 使软件之间更容易实现相互通信与协作。

支持的 API 类型

通过 API 插件可以便捷地发送 GET 或 POST API 请求，并且这一功能支持多种 API 类型：

  • 公共 API：涵盖了各类主流服务，包括 Spotify、OpenWeatherMap、YouTube 以及 ChatGPT、 竞技实时比分等等。
  • 内部 API：与所在组织的内部系统和服务实现无缝连接。

如何发送 API 请求

在 ProtoPie Connect 中按照以下步骤操作 API 插件即可从原型中发送 API 请求：

步骤1：在 ProtoPie Studio 中创建发送反应

  • 在 ProtoPie Studio 中，添加一个**发送反应动作**到所选的（即需要访问API的）触发动作下。
  • 在通道一栏留意要选择 ProtoPie Studio ，就像平常在 ProtoPie Studio 和 ProtoPie Connect 之间处理消息收发一样。
  • 保存原型

在这个原型范例中， 我们希望用户点击切换按钮选择 "Random Fact"时，从 Useless Facts API 上获取数据。为了达到这一目的，我们需要创建一个以 ProtoPie Studio 为通道的发送反应动作，并为其设置一个与原型中其他消息均不重名的的专有消息名。

[object Object]

可在 ProtoPie B站账号中查看这一免费课程，掌握在 ProtoPie Studio 和 ProtoPie Connect 之间收发消息的方法。

步骤2：在 API 插件中进行 API 配置设置

  • 在 ProtoPie Connect 中打开你的原型。
  • 点击 “插件”，然后在列表中选择 API 插件。
  • 在 GET 和 POST 这两个 HTTP 请求方式中选择其中一个适用的方式。 在发送 API 请求时，通常使用 GET 方式来从 API 提供方获取数据， 使用 POST 来将数据发送给 API 提供方以进行数据处理。
  • 输入拟访问的 API 所对应的 API 地址（URL）。这一步应确保已经参阅了 API 的在线文档，拿到了正确的URL。在我们这个范例中，可以在这个页面查看到我们所需要的 URL 是https://uselessfacts.jsph.pl/api/v2/facts/random
  • 如果 API 的访问要求上需要包含 Header 和 Body。务必确保仔细阅读了拟访问的 API 所关联的文档，以了解需要跟随 API URL 进行附带传输的其他参数。
  • 点击 Test Request 按钮以验证该 API 连接是否能正常工作。如果报错，应检查前序步骤是否操作正确。
[object Object]

步骤3：从原型连接到 API 上

  • 点击 Message From Pie 栏的文本框，从中可以选取到所有可用的消息名称。API 插件会自动侦测原型中的消息然后显示到这个列表中。万一在这个列表中没有找到相符的消息名称，也可以从 步骤1的发送反应动作中将消息名称复制粘贴到这栏内。
  • 如果从原型中发送消息到 Connect 时，希望动态覆盖 API 的URL、Header 或 Body，并且消息值里也已经确实携带了相关信息，则应该勾选 Override URL/Header/Body with msg value 以便使这一功能发生作用。在下一个部分可以了解到以消息值动态覆盖 API URL、Header 或 Body 的相关知识。
  • 在 Message to Pie 一栏中输入一个消息名称，则当步骤2中所配置的 API 请求已发出且获得相应的响应数据后，Connect 会向原型回发这条消息。
  • 点击 Activate 来确认建立这一连接，确认后插件在接收到原型发出的相应消息时就会发出所设置的 API 请求。
[object Object]

步骤4：在 ProtoPie Studio 中创建一个接收触发动作

  • 回到 ProtoPie Studio。
  • 在原型中添加一个接收触发动作。
  • 务必在通道选项上选择 ProtoPie Studio 作为通道，如同步骤1中设置发送反应动作一样进行该项设置。
  • 在消息一栏中输入与步骤3Message to Pie中所设一致的消息名称。
  • 勾选 赋值给变量（Assign to Variable）选项。创建一个文本型变量并在接收触发动作下显示的赋值变量列表中选择该变量。这样处理后从 API 获取的信息将会存储到这个变量中。
  • 由于 API 数据通常以JSON 格式返回，将 API 返回信息呈现到原型上最有效的的方式是使用文本反应动作进行呈现，并在其中设置使用 parseJson表达式进行内容解析。
  • 保存原型并重新在 ProtoPie Connect 中打开该原型。到此，具备 API 增强交互功能的原型已经准备完毕，并可以通过 ProtoPie Connect 对其进行测试！
[object Object]

以消息值覆盖 API URL/Header/Body

Override URL/Header/Body with msg value（用消息值覆盖 URL/Header/Body）选项用于将原型发出的消息所附带的消息值作为 API 的 URL、Header 或 Body 参数，动态地覆盖原值。

在这一原型范例中，我们在发送消息动作下附带地发送了一个 URL 作为消息值，然后通过这个功能覆盖率原有的 API URL。因此，在 ProtoPie Connect 中测试这一原型时，如在搜索框中输入了某个城市名称，将会呈现该城市的精确天气信息。

[object Object]

同时运行多个 API 请求

Connect Core 和 Connect 企业版 用户可以使用 API 插件同时执行多个 API 请求。Connect Core 最多可同时运行三个 API（前提是没有其他插件在运行），Connect 企业版则对可同时运行的 API 调用数量没有限制。

按以下步骤操作，可以实现在原型中同时运行多个 API 请求：

  • 在 ProtoPie Connect 中打开 API 插件。
  • 点击 API 设置窗口右上角的 + 图标，将会打开一个用于配置新增 API 请求的窗口，以这种方式配置多个 API 即可实现所有 API 同时运行。除此之外，也可以先对已有的 API 创建副本再编辑相应的副本，对已有的 API 创建副本时，副本将保留原有的所有设置。
[object Object]

Back To Top