在本文中，我们将向你展示如何将外部数据源连接到你的原型中，以获得真实且沉浸式的测试体验。你可以通过企业版方案中的 ProtoPie Connect 和全新的 parseJson 函数来实现这一点。
在本教程中，我们将集成天气 API 和 Spotify API，把真实数据引入到用户界面中。但可选方案远不止这些！
API 到底是什么意思？API 是 Application Programming Interface（应用程序编程接口） 的缩写，基本上意味着你可以连接到另一个应用程序并向它请求特定信息。
查看下面的演示视频，看看最终效果可能是什么样子！
你对用于原型设计的最新 API 功能感兴趣吗？ 那就注册获取 API 功能新闻和原型设计技巧吧！
太长不看（TL;DR）
资源
1. 启动本地服务器
2. 创建 Python 桥接应用
2.1. 理解桥接示例
2.2. 接下来，让我们获取天气数据！
2.3. 将数据发送到 ProtoPie
2.4. 获取音乐数据
2.5. 在你的原型中使用音乐数据
3. 将所有内容添加到你的 UI
就是这样！🥧 你已成功将真实数据添加到原型中！
资源
在本教程中，我们会使用以下资源。你可以边看文章边动手搭建，或者下载最终文件查看其工作方式！
下方 Python 代码
注意：安装脚本需要Python 3.9（更高版本会导致无法绕过的错误，因此如果你正在使用更新版本，请尝试降级到 3.9）
1. 启动本地服务器
要将 Python 脚本连接到 ProtoPie，我们首先需要设置的是 Socket.io。
启动 ProtoPie Connect 后，它会在左下角显示的地址上托管服务器。Socket.io 允许我们将 Python 脚本连接到该本地服务器，并通过它收发消息！
ProtoPie Connect
2. 创建 Python 桥接应用 🐍
2.1. 首先，我们需要理解桥接示例
连接到 ProtoPie 的 Python 应用模板可在这里找到，此外还有 ProtoPie 构建的各种桥接应用，帮助你尽可能快速上手！
如果这听起来太复杂，也可以将 Python 桥接应用编译为 ProtoPie Connect 插件。我们在ProtoPie Connect 课程中介绍了这个更简单的替代方案。
请务必查看最后两节课，重点讲解如何创建自定义桥接应用并将其编译为插件。
设置
在页面顶部，首先是一些导入语句，用于获取程序正常运行所需的相关包。
接下来是程序将要连接的地址。如果你在与 Python 程序同一台机器上运行 ProtoPie Connect，就不需要修改它。
最后，我们声明 socket，以便与其交互。
Connect 函数设置
完成设置后，会有一个 on_connect 函数，每当 Python 程序连接到服务器时都会调用它。
它会 emit（发送到服务器）一条消息，以确认连接成功。
接收消息
在 on_connect 函数之后是 on_message 函数。这里是你添加逻辑的位置，用于处理程序接收到特定消息时要执行的内容。
连接
现在程序将使用前面提供的地址实际发起连接。
发送消息
默认桥接应用还支持你在终端输入消息 ID 和值，并将其 emit 到 ProtoPie Connect 服务器。
试一试！
请确保已安装Python。然后在保存 client.py 文件的文件夹中打开终端：右键点击并选择“在文件夹中新建终端”。
包含 Python 文件的文件夹
运行 pip3 install -r requirements.txt命令安装相关包，然后运行 python3 client.py启动程序。
系统会要求你输入message id和value，按 Enter 确认。
如果一切顺利，你将在 ProtoPie Connect 中看到该消息及其值！
ProtoPie Connect
2.2. 接下来，让我们获取天气数据！
现在，为了获取天气数据，我们需要发送一条名为“getWeatherAndMusicData”的消息，并以地点作为其值。随后我们的 Python 程序会返回该地点的天气和音乐数据。
通过 API 集成我们能做到这么多，不是很惊人吗？
获取纬度和经度数据
我们希望使用应用获取特定地点的天气数据。首先，我们将使用地理编码 API获取城市的纬度和经度。
请查看其文档了解如何获取 API Key，它本质上是你访问 API 的唯一密钥。你需要把该密钥填入代码中标注 {API key} 的位置。
在新程序中，我们先检查从 ProtoPie 接收到的消息是否等于“getWeatherAndMusicData”。
如果为真，说明 ProtoPie 正在请求数据，因此我们将messageValue赋给名为 location 的变量。
然后，我们创建一个名为 **locationUrl **的变量，并把从 ProtoPie 收到的值插入该 URL 中间。
接着，使用 requests.get(locationUrl).json() 获取该地点的地理数据。
这会返回包含大量数据的长消息，但我们只关心纬度、经度和国家。
如果你觉得可读性太差——我们也一样——只需把它粘贴到JSON 格式化工具中即可快速查看。
我们可以使用以下语法访问该消息中的值。
print 函数将输出 Amsterdam, NL has latitude 52.3727598 and longitude 4.8936041，这正是下一步获取天气数据所需的信息！
包含数据的消息
获取天气数据
现在，我们将以相同方式使用天气 API：用刚获取到的纬度和经度拼接 URL，然后使用 requests.get(weatherUrl).json() 函数获取该地点的天气数据。
这个 print 会输出我们刚从天气 API 获取的大量信息，例如天气描述、温度、湿度等！
json.dumps(weatherData, indent=1) 只是把 weatherData 打印出来，并通过缩进提升可读性 😉。
Python 桥接
我们还想使用所发送地点的**时间**，因此会使用以下代码从 weatherData 中获取timezone，并将该timeData添加到 weatherData。
这样就会把以下信息添加到我们的 weatherData 中。
时间数据
现在，我们只需将其 emit 回 socket 服务器，以便 ProtoPie 访问这些数据。
message ID 是“weatherData”，value 是我们的数据。我们使用 str(weatherData).replace("'", "\\"") 函数将 json 数据转换回字符串，并将所有 ' 替换为 \\"，因为 ProtoPie 使用这种格式。
2.3. 将数据发送到 ProtoPie
我们可以先向 ProtoPie Studio 发送“getWeatherAndMusicData”，其value为你希望获取数据的城市。
发送响应
接下来，创建一个Receive 触发器，并将接收到的数据赋值给一个变量。请确保该变量类型设置为Text。
Receive 触发器
我们可以将该变量与parseJson 函数结合使用，从中获取任意信息，例如替换文本图层内容。
有关如何使用 parseJson 函数访问 Json 对象中的数据，请查看这个Pie。
变量与 parseJson 函数组合使用
如果我们在 ProtoPie Connect 中打开并启动这个 Pie，将得到如下结果。
ProtoPie Connect 中的 Pie
如你所见，Pie 正在向 ProtoPie Connect 发送值为“Amsterdam”的“getWeatherAndMusicData”，而 Python 桥接返回了值为 json 对象的“weatherData”。Pie 接收后提取了主要天气描述。太棒了！
2.4. 让我们获取音乐数据
在 Python 程序中 emit **weatherData **之后，我们添加以下内容。
这会调用名为“get_top_tracks”的函数，并将“country”作为参数，然后以“musicData”为消息名发送到 Socket 服务器，值为刚从 get_top_tracks 函数接收到的数据。
获取访问令牌
get_top_tracks 函数首先会调用另一个名为 get_access_token 的函数。
由于 Spotify 比其他 API 更复杂一些，我们需要使用 client ID 和 client secret 按需请求一个密钥。你可以注册 Spotify Developer 账号获取这些凭据。
get_access_token 函数随后将使用提供的凭据从 Spotify 返回一个access token。
了解更多Spotify API信息。
获取原始音乐数据
回到get_top_tracks 函数，我们可以用这个access token来获取音乐数据。
注意：我们需要将从天气 API 获取的国家代码添加到 Spotify 端点中，这样才能拿到该国家的音乐数据！
这同样会返回一大串数据列表。
播放列表数据清单
访问播放列表
我们尤其关心该国家的热门歌曲。
我们先在请求中添加 ['playlists']['items']，仅获取播放列表。
然后遍历 playlists 中的所有对象，查看是否有名称以“Top 50”开头的项，并将其赋给名为“top_50_playlist”的变量。若找不到，则赋值为 None。
如果 top_50_playlist 等于 None，说明未找到该国家的榜单，此时改用列表中的第一个播放列表；否则就取 top_50_playlist 的 href（链接）和名称。
随后会使用 top_50_href 和 playlistName** 变量**请求该列表中的曲目数组。
创建 musicData 对象
接下来，我们创建一个名为 musicData 的对象，将“playlistName”赋值为 playlistName，并创建一个名为“topSongs"”的空数组。
我们会对 playlistName 调用名为 replace_whitespace 的函数，因为它有时包含 ProtoPie 无法正确渲染的奇怪字符。该函数会把这些字符替换成普通空格并返回。
获取热门歌曲
现在，前 8 首歌曲的标题和艺术家将追加到 musicData 的空topSongs 数组中。
之后会将其打印输出。再次提醒，请确保使用 ASCII，我们不希望 Pie 中出现奇怪字符！
这次输出将如下所示：一个包含playlistName和名为**topSongs**的数组的对象，其中填充了你提供地点对应 Top 50 播放列表中的前 8 首歌曲。
音乐数据
2.5. 在你的原型中使用音乐数据
在我们的 Pie 中，同样可以将这些数据赋给一个变量，并通过parseJson 函数按需使用。
赋值给变量的 Receive 触发器
3. 将所有内容添加到你的 UI
包含天气数据的 Tesla 原型
在我们的原型中，我们以多种方式使用 weatherData 和 musicData。以下是一些在 ProtoPie 公式字段中的示例：
右上角日期和时间使用
parseJson(weatherData, "localtime.day") + " " + parseJson(weatherData, "localtime.month") + " " + parseJson(weatherData, "localtime.hour") + ":" + parseJson(weatherData, "localtime.minute")设置顶部中间位置使用
parseJson(weatherData, "name") + ", " + parseJson(weatherData, "sys.country")设置天气数据使用
format((parseJson(weatherData, "main.temp") - 273), "##") + "°C – " + upperCase(left(parseJson(weatherData, "weather.0.description"), 1)) + right(parseJson(weatherData, "weather.0.description"), length(parseJson(weatherData, "weather.0.description")) - 1)设置。
这里我们获取主温度并减去 273 转为摄氏度，同时将描述首字母改为大写，看起来更美观。🤷🏼♂️
天气数据
天气图标使用天气 API 提供的代码
parseJson(weatherData, "weather.0.icon")。我们将该代码赋值给变量，然后在其变化时显示他们在这里提供的图标集。我们还用这个代码控制各种天气叠层，只需相应淡入淡出即可。
ProtoPie Connect 中的天气数据
我们还有一个名为“mode”的变量，赋值为
right(parseJson(weatherData, "weather.0.icon"), 1)。这是代码的第一个字符，可能是表示白天的“d”或表示夜晚的“n”。随后可用该变量控制夜间模式并相应改变文本颜色。
Mode 变量
对于播放列表名称，我们使用
parseJson(musicData, "playlistName")对于每首歌，我们将每个标题文本对象改为
parseJson(musicData, "topSongs.0.title")，每个艺术家改为parseJson(musicData, "topSongs.0.artist")，其中.0.会改成.1.、.2.等。当检测到 musicData 变量变化时，我们还会给专辑封面随机分配颜色，以模拟歌曲更新效果。
color(random(100,250), random(100,250), random(100,250))
已分配颜色
就是这样！🥧 你已成功将真实数据添加到原型中！
恭喜，你一路看到这里了！我们真的为你感到骄傲 😉。希望这能帮助你在未来跳出框架思考，让你的 Pie 更真实、更有吸引力。
通过 API 集成升级你的原型设计
免费开始使用 ProtoPie，探索 API 集成带来的全部可能性，打造真实且沉浸式的用户体验。
祝你原型设计愉快！
