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

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

介绍 ProtoPie

入门

制作你的第一个原型

ProtoPie 生态系统

ProtoPie Studio 界面

导入

入门

从 Adobe XD 导入

从 Figma 导入

从 Sketch 导入

ProtoPie 精灵

基本元素

容器

设备

图层

预览窗口

场景

滚动/分页

快捷键

系统状态栏

触发条件与响应

缓动

注释

回复

时间线

触发器

公式

入门

功能

图层属性

语法

公式使用场景

变量

入门

变量

预定义变量

变量使用案例

AI

入门

AI 交互创作

AI 文档问答

AI 面板界面

获得最佳效果的提示

自动布局

入门

自动布局属性

组件

入门

组件指南

编辑组件

嵌套组件

发送和接收消息

交互库

入门

管理交互库

管理图书馆会员

语音原型设计

入门

收听回复

朗读回复

应用场景

语音命令触发

连接设备

连接 blokdots

连接移动设备

ProtoPie Cloud

入门

管理原型

管理存储

共享原型

ProtoPie Player

测试原型

管理字体

离线测试

适用于 Wear OS 的 ProtoPie Player

团队

入门

编辑者和查看者

让您的团队快速上手

项目

团队所有者和团队管理员

交接

入门

创建交互录制

管理交互录制

录制页面

用户测试

入门

概述

创建测试房间

外部集成

管理测试会话

测试结果与分析

ProtoPie Cloud 上的用户测试

ProtoPie Connec

入门

API 插件

Arduino 插件

blokdots 插件

连接嵌入式

自定义层集成

自定义插件

连接设备

游戏手柄插件

IFTTT 插件

罗技 G29 方向盘插件

测试原型

功能比较

Unity 插件

ProtoPie 企业版

入门

组织设置

服务管理员

单点登录(SSO)

安全

概述

访问控制

数据传输、存储与备份

事件响应

网络与 ProtoPie Player 应用的安全性

物理安全

风险管理

菜单

介绍 ProtoPie

入门

制作你的第一个原型

ProtoPie 生态系统

ProtoPie Studio 界面

导入

入门

从 Adobe XD 导入

从 Figma 导入

从 Sketch 导入

ProtoPie 精灵

基本元素

容器

设备

图层

预览窗口

场景

滚动/分页

快捷键

系统状态栏

触发条件与响应

缓动

注释

回复

时间线

触发器

公式

入门

功能

图层属性

语法

公式使用场景

变量

入门

变量

预定义变量

变量使用案例

AI

入门

AI 交互创作

AI 文档问答

AI 面板界面

获得最佳效果的提示

自动布局

入门

自动布局属性

组件

入门

组件指南

编辑组件

嵌套组件

发送和接收消息

交互库

入门

管理交互库

管理图书馆会员

语音原型设计

入门

收听回复

朗读回复

应用场景

语音命令触发

连接设备

连接 blokdots

连接移动设备

ProtoPie Cloud

入门

管理原型

管理存储

共享原型

ProtoPie Player

测试原型

管理字体

离线测试

适用于 Wear OS 的 ProtoPie Player

团队

入门

编辑者和查看者

让您的团队快速上手

项目

团队所有者和团队管理员

交接

入门

创建交互录制

管理交互录制

录制页面

用户测试

入门

概述

创建测试房间

外部集成

管理测试会话

测试结果与分析

ProtoPie Cloud 上的用户测试

ProtoPie Connec

入门

API 插件

Arduino 插件

blokdots 插件

连接嵌入式

自定义层集成

自定义插件

连接设备

游戏手柄插件

IFTTT 插件

罗技 G29 方向盘插件

测试原型

功能比较

Unity 插件

ProtoPie 企业版

入门

组织设置

服务管理员

单点登录(SSO)

安全

概述

访问控制

数据传输、存储与备份

事件响应

网络与 ProtoPie Player 应用的安全性

物理安全

风险管理

在 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 插件高级教程