ProtoPie Connect 提供了几乎无限的能力，让你的原型设计超越数字屏幕；并且延续 ProtoPie 一贯的风格，ProtoPie Connect 包含了多个插件，让这一切变得非常简单。其中一个这样的插件是新的 API 插件，它允许你在无需编写任何代码的情况下连接常见的数据服务。本文将通过几个示例带你一步步了解，展示在原型中开始使用真实数据是多么简单。
下载 ProtoPie Connect
要跟着本教程一起操作，你需要先下载并安装 ProtoPie Connect。如果你已经安装了 ProtoPie Connect，请确保更新到最新版本。完成本教程中的所有步骤需要最新版本。由于 ProtoPie Connect 仅对付费方案开放，你需要 Pro 或 Enterprise 许可证。
什么是 API？
API 是“应用程序编程接口（Application Programming Interface）”的缩写，它是远程系统彼此通信的常见方式。特别是，ProtoPie Connect 插件可与 RESTful API 配合使用。你不必完全理解 RESTful 的确切含义，但只需知道你在网上能找到的许许多多 API 都属于这种类型，因此可以与该插件一起使用。
一次 RESTful API 交互分为两部分：
你向远程系统的 URL 发起请求以获取某些数据。通常该请求会附带一些参数，以更准确地描述你要查找的内容。
远程系统返回数据，或者在出现问题时返回错误信息。该响应通常采用 JSON 格式。
什么是 JSON？
JSON 是一种标准的信息格式化方式。JSON 很方便，因为它是基于文本的，因此可读性较高。这种格式使其易于理解和使用。本文假设你已经对 JSON 有一定了解；但如果你需要入门资料，网上有很多优秀资源可以让你快速上手。例如，这里有一个。
使用 API 插件的基础示例
这个示例非常直接。下载下面的 Useless Fact Machine 起始 Pie 并跟着操作。
在 Studio 中打开该 Pie。如果你预览这个 Pie，会看到所有交互和动画都已完成。将硬币拖到糖果机手柄上方后松开。
将硬币拖到糖果机手柄上方后松开。
我们将完成最后一步：向一个 API 发起请求，让它返回一条无用小知识。然后我们会把这条内容显示出来，就像它被印在糖果球上一样。
我们使用的 API 是一个可免费使用的互联网 API，名字恰如其分叫做“Useless Facts”。该 API 的详细信息可在这里查看。我们将使用的具体请求 URL（或端点）是这个。
现在点击它吧！你会在浏览器中看到类似下面这样的响应：
“Useless Facts” 请求 URL。
这就是 JSON 格式的响应。注意，尽管它只是文本，但读起来并不算特别容易。所以给你一个专业小技巧！安装 适用于 Google Chrome 的 JSON Formatter 插件。安装后，Google 会自动将上面的乱码格式化为这样：
适用于 Google Chrome 的 JSON Formatter 插件。
从最根本上说，JSON 是由冒号分隔的一组键（key）和值（value）对。冒号左边的文本是键，右边的文本是值。对我们来说，我们关心名为 “text” 的键——这个键的值就是随机的无用小知识！
配置 API 插件
在 ProtoPie 中处理数据包含三个步骤：
在 ProtoPie Connect 中配置插件。
编写你的 Pie：通过 Send 消息触发 API 请求，并通过 Receive 消息接收 API 的响应。
通过 ProtoPie Connect 运行 Pie，查看实际效果。
我们先聚焦第一步。
启动 ProtoPie Connect
点击右上角的 Plugins，然后点击 API。
点击右上角的 Plugins，然后点击 API。
你会看到类似下面这样的界面：
配置 API 插件。
按如下方式配置：
在 URL 字段中，填写该 API 的请求 URL：
https://uselessfacts.jsph.pl/api/v2/facts/random在下方名为 Connect API with Pie 的部分中，将 Message from Pie 字段填写为
GET_USELESS_FACT。将 Message to Pie 字段填写为
RETURN_USELESS_FACT。点击 Activate。
为验证一切正常，点击 Test Request。你应该会看到“Test Success”提示。如果没有，请返回检查，确保你输入的内容与我上面完全一致。
API 插件已配置完成并可使用！
就是这样！API 插件已配置完成并可使用！
注意：我们使用的消息——GET_USELESS_FACT 和 RETURN_USELESS_FACT——完全是自定义的。你可以在这里使用任何你想要的消息。但请确保在你的 Pie 文件中使用相同的消息（见下一步）。
编写你的 Pie 以使用插件
回到 ProtoPie Studio。注意名为 Touch Up “Nickel.” 的触发器。这个触发器会在你拖动硬币后松开时触发。
当你拖动硬币后松开时，会触发 Touch Up “Nickel" 触发器。
在该触发器下添加一个 Send 响应。按如下配置：
在 Channel 中选择 ProtoPie Studio。每当你想通过 ProtoPie Connect 通信时，都需要使用此通道。
在 Message 中，使用你在插件里 Message from Pie 字段配置的相同内容。在我们的例子中是
GET_USELESS_FACT。
配置 Send 响应。
当我们把硬币投入机器时，这个 Send 会触发，并触发 API 插件向 Useless Facts API 发起请求。
现在我们需要设置一个机制来接收并使用 API 的响应。添加一个 Receive 触发器。按如下配置：
同样，将 ProtoPie Studio 用作 Channel。
在 Message 中，使用你在插件的 Message to Pie 字段中配置的相同消息。在我们的例子中是
RETURN_USELESS_FACT。
实际的 JSON 响应会作为消息的值包含在其中。要使用它，我们需要把它赋值给一个变量。我们还没有变量，所以先创建一个：
在 ProtoPie Studio 左下角，点击 Variables 选项卡打开变量面板。
点击面板右上角的 + 图标创建新变量。由于我们的 Pie 只有一个场景，选择 For All Scenes 或 For This Scene 都可以。
给变量起一个合适的名字。我会使用
apiResponse。由于 API 返回的是 JSON——本质上是文本——我们必须确保该变量是文本类型。在 Studio 右上角的变量属性中，点击 Text。
在 Studio 右上角的变量属性中，点击 Text。
现在回到 Receive 触发器，勾选 Assign to Variable 旁边的复选框。在出现的新下拉列表中，选择你刚创建的变量。
返回 Receive 触发器，并勾选 Assign to Variable 旁边的复选框。
到这里，我们的 Pie 已将 API 响应存储在文本变量 apiResponse 中。现在来使用它！
在图层堆栈顶部，有一个名为 Random Fact 的文本图层。我们将把 API 响应中 “text” 键的值填入这个文本图层。
在你刚创建的 Receive 触发器下添加一个 Text 响应。
从下拉列表中选择文本图层 Random Fact。
在 Content 下的下拉列表中选择 Formula。
使用以下公式：
parseJson(apiResponse, "text")
使用以下公式：parseJson(apiResponse, "text")。
我们做了什么？
我们使用 parseJson() 函数从存储在 apiResponse 变量中的 JSON 响应里提取数据。如果这是你第一次看到这个函数的实际用法，务必阅读这里的文档。parseJson() 函数对于处理 API 插件返回的数据至关重要，在本系列第 2 部分的更高级示例中我们还会再次使用它。
把你的 Pie 保存到电脑中一个方便的位置。我们已经准备好最后一步了！
在 ProtoPie Connect 中预览
要让 Pie 获取数据，Pie 需要通过 ProtoPie Connect 运行。如果你尝试在 Studio 中预览 Pie，你会发现看起来好像什么都没变。这是因为 Studio 并不了解 ProtoPie Connect 或 API 插件。
回到 ProtoPie Connect，将保存好的 Pie 拖到 ProtoPie Connect 界面的左侧。
将保存好的 Pie 拖到 ProtoPie Connect 界面的左侧。
点击看起来像电脑显示器的图标。这会在桌面网页视图中打开 Pie。
把硬币拖到机器上，见证神奇发生！
把硬币拖到机器上，见证神奇发生！
注意消息流如何在 ProtoPie Connect 中显示。这对排查交互中的问题非常有用。
消息流对于排查交互中的问题非常有用。
本次内容就到这里。请查看 API 插件高级教程，其中会展示另外几个更高级的示例。
使用 ProtoPie 的 API 插件增强你的设计
通过无缝集成数据库和 API，充分释放你的设计潜力。立即免费试用，体验 ProtoPie 的前沿功能。
