在本系列的第一部分中，我们了解了 API 插件以及如何使用它的基础知识。如果你还没读过，建议在继续阅读本文之前先查看一下。在第二部分中，我们将看看更多实用示例。
示例 1：基于交互自定义请求
我们在第一篇文章中探索的基础示例很简单。我们每次都向同一个 URL 发送请求并使用响应。不过，你经常会发现需要每次都自定义请求 URL。在本示例中，我们将创建一个字典查询体验，你可以输入任意单词并将其发送给 API 以获取定义。
我们将使用 Free Dictionary API。该 API 请求 URL 如下：
https://api.dictionaryapi.dev/api/v2/entries/en/<word>
注意 URL 末尾标记为 <word> 的部分。我们会将这部分替换为实际要查询的单词。
例如，要查询单词“chicken”的定义，我们会使用这个 URL：
https://api.dictionaryapi.dev/api/v2/entries/en/chicken
要查询单词“little”的定义，我们会使用这个 URL：
https://api.dictionaryapi.dev/api/v2/entries/en/little
本质上，每个单词都有自己唯一的 URL。回顾上一篇文章，在 ProtoPie Connect API 插件中，我们只能配置一个 URL。在本示例中，我们将看看如何处理这种情况。
配置 API 插件
ProtoPie Connect API 插件允许你使用 Pie 提供的 URL 覆盖请求 URL。这使我们能够在 Studio 中动态构建 URL，并将其作为 Pie 发送出去以触发 API 请求的消息值。
在 ProtoPie Connect 中，我们将以与第一个示例类似的方式配置插件，但有一个显著区别：
这一次，将 URL 字段留空。然后在 Message From Pie 字段下方，勾选 Override 旁边的复选框。下拉框保持默认的 URL。
将 Message from Pie 和 Message to Pie 字段填入你喜欢的任意消息。我分别使用的是
DICTIONARY_REQUEST和DICTIONARY_RESPONSE。点击 Activate。
配置 API 插件。
注意：你将无法测试连接，因为插件当前还不知道要请求的 URL。
编写你的 Pie
下载此示例的起始 Pie，并在 Studio 中打开它。
这个 Pie 中有两个场景：“dictionary - home” 和 “dictionary - result.” 我们将所有操作都放在 “dictionary - result” 场景中完成。
我们将在“dictionary - result”场景中完成所有操作。
注意大部分工作已经完成，但请留意两个目前尚未配置的 Send 响应：一个位于 Start 触发器下，另一个位于 Return 触发器下。这两个配置是相同的，所以我们先配置一个，再复制到另一个。
按如下方式配置 Start 触发器下的 Send 响应：
使用 ProtoPie Studio 通道。
使用你在插件的 Message to Pie 字段中配置的消息。就我而言，我使用的是
DICTIONARY_REQUEST。
关键点在这里：你随该消息传递的值将成为插件实际使用的 URL。
勾选 Send Value Together 旁边的复选框。
在出现的公式字段中，使用以下公式：
"<https://api.dictionaryapi.dev/api/v2/entries/en/>" + searchWord
在出现的公式字段中，使用所示公式。
我们刚刚做了什么？
请求 URL 每次都相同，只有最后一部分不同，我们会追加要查询的单词，该单词存储在变量 searchWord 中。通过像这样在公式中构建 URL，我们就可以在每次请求时向插件提供动态生成的 URL。
在 Return Trigger 下，我们的 Pie 里还有一个未配置的 Send 响应。你可以按上面的方式配置它，或者把刚刚创建的 Send 响应复制到下面的 Return Trigger 中。然后如果你愿意，可以删除剩余未配置的占位项。
专业提示：* 请确保将复制的 Send 响应粘贴在“Assign searchWord = Input.text”响应的下方。否则，Pie 会使用上一个单词向 API 发起请求。*
这个 Pie 已经设置好了 Receive 触发器来接收并使用 API 响应，所以你不需要配置那部分。不过如果你感兴趣，可以看看该触发器中使用的多个 Text 响应，它们会用 JSON 中多个键的值填充多个文本图层。
触发器中使用的多个 Text 响应。
在 ProtoPie Connect 中运行 Pie
和第 1 部分一样，我们需要在 ProtoPie Connect 中运行 Pie，才能看到实时数据效果。将 Pie 拖入 Connect，预览并亲自试试看！
注意：运行前记得保存你的 Pie！
在 ProtoPie Connect 中运行 Pie。
处理错误
注意： 在撰写本文时，ProtoPie Connect 2.6.1 尚未发布，因此如果你正在尝试且最新版本是 2.6，那么本节不适用。请耐心等待，2.6.1 应会在 2023 年 9 月底前发布。
如果你尝试过，可能遇到过 Pie 没有收到任何返回内容的情况。当你拼错单词或查询词典中不存在的单词时，就可能发生这种情况。API 已被编程为处理此类事件，并会返回错误状态码。
这里有个我把“bananas”拼错的例子。点击以下 URL。
https://api.dictionaryapi.dev/api/v2/entries/en/bannas
注意你得到的响应与查询真实单词时不同。如果你右键并使用 Chrome 开发者工具检查页面，会看到报错。具体来说，它返回的是错误码 404, 这是标准的互联网错误码，表示“未找到（Not found）”。
错误码 404——表示“未找到（Not found）”的标准互联网错误码。
API 插件能够识别这种情况，并向 Pie 返回不同的 JSON。这就是结果为空白的原因。Pie 原本期望的是特定格式的 JSON，而返回的错误 JSON 与该格式不匹配。
插件返回的错误 JSON 看起来是这样的：
在我们的 Pie 中，可以检查是否存在 "status" 键，并判断其值是否为 “Error.”。如果是，我们就可以采取替代操作并向用户显示合适的提示信息。
在 Studio 中，找到接收消息 DICTIONARY_RESPONSE 的 Trigger。
添加一个 Condition
按如下方式配置该条件：
IF:
Formula:
parseJson(defintionJson, "status")EQUALS
Value:
“Error”
添加该条件。
这个 Pie 中有一个名为“no results section”的图层组。默认情况下它是隐藏的，但在这种场景下，我们会让它显示出来。
在刚创建的 Condition 下添加一个 Opacity 响应。
将“no result section”图层组的不透明度设置为 100。
将“no result section”图层组的不透明度设置为 100。
保存你的工作，并通过 ProtoPie Connect 再次预览。
注意：当同时使用 ProtoPie Connect 和 Studio 时，Connect 会在文件保存后自动识别并在网页视图中重新加载 Pie。你只需回到浏览器再次交互即可。
现在，当你搜索 API 找不到的内容时，你会看到“No definitions found.”提示信息。
“No definitions found.” 提示信息。
示例 2：ChatGPT
我相信这就是大家最想看的示例！没错，在 ProtoPie 中创建一个可完整运行的 ChatGPT 这类对话式 AI 体验是 100% 可行的。
这绝对是 API 插件用法中的高级示例，所以你需要查看文档并熟悉 ChatGPT API 的工作方式。你还需要一个 API Key 来在向 API 发起请求时进行身份验证。遗憾的是这不是免费的，但对于此类探索性使用来说费用非常低。前往 Open API 的定价页面 开始吧。
配置 API 插件
和前面的所有示例一样，我们先设置 ProtoPie Connect API 插件。按如下方式配置：
Method: POST
我们之前还没涉及这个配置。RESTful API 使用 GET 或 POST 类型请求。你不一定要理解它们的区别——大多数 API 文档会告诉你该用哪一个。一个经验法则是：如果你需要在插件中使用 Body 配置，通常就需要 POST；否则 GET 通常就能搞定（懂我这个双关吧？）。
URL:
https://api.openai.com/v1/chat/completionsHeader:
这是另一个我们尚未使用过的配置。Header 允许你指定有关请求的信息。所有请求都有 header，但在前面的示例中，我们一直使用的是默认值。这个配置让你有机会显式设置一些 header 值。在本例中，我们指定请求体为 JSON 格式，并指定了请求的授权方式。
请务必将标记为
<YOUR API KEY>的部分替换为 OpenAI 提供给你的真实 API Key。Message from Pie:
ASK CHAT GPT勾选 Override 旁边的复选框，这次在下拉框中选择 Body——我们将在 Pie 中构建请求体。
Message to Pie:
CHAT GPT ANSWER点击 Activate
注意：如果你点击 Test Request，会得到错误。当前请求没有 body，因此 ChatGPT API 无法处理。
配置 API 插件。
编写 Pie
下载下面的起始 Pie 并在 ProtoPie Studio 中打开。
同样地，在名为 Tap Send. 的 Trigger 下，我们有一个未完成的 Send 响应，名为 Send ASK CHAT GPT。我们来把它完成。
设置 Send 响应。
和往常一样，使用 Protopie Studio Channel。
使用消息
ASK CHAT GPT和前一个示例一样，我们希望附带一个值。不过这次我们覆盖的是请求 body，而不是 URL。
以下是一个向 Chat GPT API 发起请求时格式正确的 body 参数示例：
在我们的场景中，我们想把 "content" 键的值替换为用户在输入框中输入的问题。本质上，我们要创建一个包含可替换文本标记的模板。它可以像这样：
发送请求时，我们会将 <<USER_QUERY>> 替换为用户提出的实际问题。另外，我们还可以告诉 ChatGPT 我们希望它如何回答。将模板修改如下：
这样，用户的问题前面总会加上“Reply in no more than 3 sentences,” 然后再跟上实际问题。
现在为了把它做成模板，我们将在 Studio 中创建一个文本变量并填入上述内容。
在 ProtoPie Studio 左下角，点击 Variables 标签以打开变量面板（如果尚未打开）。
创建一个变量，命名为
BODY_TEMPLATE。确保其类型设置为 Text。在 Studio UI 右上角的变量属性中选择 Text。
在你选择 Text 类型的位置正下方有一个空文本框。复制上面的模板片段并粘贴到该文本字段中。这将设置变量的初始值。
复制上面的模板片段并粘贴到文本字段中。
这个框不够大，无法显示整个模板体，但不用担心，内容都在里面。
现在返回 Send 响应。
勾选 Send Value Together 旁边的复选框
在出现的公式框中，使用以下公式：
```replace(BODY_TEMPLATE, "<<USER_QUERY>>",
Input.text)`
在出现的公式框中，使用所示公式。
我们刚刚做了什么？
我们使用了 ProtoPie 的 replace() 函数（文档在这里），获取存储在 BODY_TEMPLATE 变量中的文本，查找精确文本 <<USER_QUERY>>，并将其替换为输入框中的内容。请注意，这不会修改变量 BODY_TEMPLATE。replace() 函数的输出是一段新的文本。我们只是将该输出直接作为消息值传递出去。
和前一个示例一样，用于处理 API 响应的 Receive Trigger 已经帮你创建好了。你可以看看，但会发现它和之前示例非常类似。保存你的 Pie——我们在 Studio 里的工作完成了！
将完成的 Pie 拖入 ProtoPie Connect 并运行。你应该就能得到一个可用的 ChatGPT 体验！
为什么科学家不信任原子？因为它们构成了一切！
完成的 Pies
使用 API 插件将真实数据引入你的设计
ProtoPie API 插件使你能够将真实、动态的数据注入到设计中，将你的原型提升到更高层次的真实感与功能性。打造交互式、数据驱动的原型，真实呈现你的设计愿景。
