ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie AI 已上线——现已进入 Beta 版。了解更多

菜单

在 ProtoPie Connect 中使用 API 插件

API 插件可让你通过连接 API 和数据库,将真实数据快速引入你的原型。

自定义插件不同,API 插件不需要编程技能。该插件可处理相关任务:向 API 发送数据或从 API 获取数据,并以 JSON 格式无缝整合到你的原型中。

什么是 API?

API(应用程序编程接口)是一组规则,使不同的计算机程序能够通信并协同工作。它就像一座桥梁,帮助它们在不了解彼此实现细节的情况下共享信息并执行任务。简单来说,API 让软件之间的通信与协作更容易。

支持的 API 类型

借助 API 插件,你可以轻松发起 API 请求(无论是 GET 还是 POST),并连接多种 API 类型:

  • 公共 API:包括 Spotify、OpenWeatherMap、YouTube、ChatGPT、实时比分等热门服务,以及更多。

  • 内部 API:可与组织内部系统和服务无缝连接。

如何发起 API 请求

按照以下简单步骤,在 ProtoPie Connect 中使用 API 插件,并在你的原型中发起 API 请求。

步骤 1:在 ProtoPie Studio 中创建 Send response

  • 首先,在ProtoPie Studio中为你选择的触发器添加一个Send response

  • 请记得选择 ProtoPie Connect/Studio 通道,这与您平时在 ProtoPie Studio 和 ProtoPie Connect 之间来回传递信息时的设置相同。

  • 保存你的原型。

这个示例原型中,当你使用切换开关选择“Random Fact”时,我们希望从Useless Facts API获取数据。为此,我们先创建一个 Send response,并设置 ProtoPie Connect/Studio 通道和一个唯一的消息值。


{'_type': 'localeString', 'en': 'Setting up Send messages to make API calls in ProtoPie'}

提示:在 ProtoPie School 观看这节免费课程,掌握 ProtoPie Studio 与 ProtoPie Connect 之间的 Send 和 Receive 消息。

步骤 2:在 API 插件中配置 API 设置

  • ProtoPie Connect中打开你的原型。

  • 点击 Plugin,然后从列表中选择 API 插件。

  • 从两个可用的 HTTP 请求方法中选择一个:GET 或 POST。发起 API 请求时,GET 用于从 API 提供方获取数据,而 POST 用于发送新数据以供处理。

  • 输入你要访问的 API 的正确 URL。请参考该 API 的在线文档以获取正确 URL。在我们的示例中,我们可以在此页面看到所需 URL 是 https://uselessfacts.jsph.pl/api/v2/facts/random

  • 如果 API 有要求,请包含 HeaderBody。务必仔细阅读所选 API 的文档,确认除 API URL 外是否还需要其他参数。

  • Header 必须采用 JSON {} 格式,但 Body 不一定始终需要遵循 JSON {} 格式。如果 API 要求,你可以将 Body 以 JSON {} 格式输入。

  • 点击 Test Request 按钮以验证连接是否正常工作。如果出现错误信息,请检查你在前面步骤中输入的信息。


{'_type': 'localeString', 'en': 'setting up API in the API plugin in ProtoPie Connect '}

步骤 3:将 API 与你的原型连接

  • 点击 Message From Pie 输入字段以访问可用消息列表。API 插件会自动检测你原型中的消息。如果看不到你的消息,请从步骤 1 中创建的 Send response 复制并粘贴该消息。

  • 如果你需要用原型发送的消息值动态覆盖 API 的 URL、Header 或 Body,请启用 Override URL/Header/Body with msg value。了解更多关于使用消息值覆盖 API URL/Header/Body 的内容,请点击了解更多

  • Message to Pie 中输入一条消息,该消息将与步骤 2 中配置的 API 请求所获取的数据一起回传到你的原型。

  • 点击 Activate 以建立连接。插件在收到来自原型的对应消息后将发起 API 请求。


{'_type': 'localeString', 'en': "connecting a prototype to an API using ProtoPie Connect's API plugin "}

步骤 4:在 ProtoPie Studio 中创建 Receive 触发器

  • 返回 ProtoPie Studio。

  • 在你的原型中添加一个Receive trigger

  • 请记得选择 ProtoPie Connect/Studio 通道,就像你在步骤 1 设置 Send response 时那样。

  • 输入你在步骤 3 的 Message to Pie 中配置的同一条消息。

  • 启用 Assign to Variable 选项。创建一个文本变量,并在 Receive trigger 中从列表里选择它。通过 API 获取的信息现在将存储在该变量中。

  • 由于 API 数据通常以 JSON 格式返回,使用带有 parseJson 公式Text response是将 API 数据整合进原型的最高效方法。

  • 保存原型,然后在 ProtoPie Connect 中重新加载。现在,你由 API 驱动的交互已可通过 ProtoPie Connect 进行测试!


{'_type': 'localeString', 'en': 'setting up the receive trigger and text response to receive data from APIs in ProtoPie'}

使用消息值覆盖 API URL/Header/Body

Override URL/Header/Body with msg value 用于使用原型发送的消息值动态覆盖 API 的 URL、Header 或 Body 参数。

这个示例原型中,我们使用了此功能,用 Pie 文件中下面的 Send 消息值来覆盖 API URL。因此,当你在 ProtoPie Connect 中测试原型并在搜索框中输入城市时,你将看到该城市的精确天气信息。


{'_type': 'localeString', 'en': "overriding the API's URL with the message sent from the prototype in ProtoPie "}

同时运行多个 API 调用

Connect Core 和 Connect Enterprise 用户可使用 API 插件同时执行多个 API 请求。Connect Core 最多可运行三个 API(前提是没有其他插件在运行),而 Connect Enterprise 对可同时运行的 API 调用数量没有限制。

要在原型中同时运行多个 API 请求,请按以下步骤操作:

  • ProtoPie Connect 中打开 API 插件。

  • 点击 API Settings 窗口右上角的 + 图标。这将打开一个新窗口,你可以在其中配置并同时运行更多 API 调用。你也可以复制现有 API,以保留其原始设置。


{'_type': 'localeString', 'en': 'configuring multiple simultaneous API requests in ProtoPie Connect '}

API 插件操作教程

在本操作系列中了解 API 插件的关键功能和使用场景。

  1. 面向初学者的 API 插件教程

  2. API 插件高级教程