Protopie 连接

5

阅读时间

ProtoPie Connect 入门 7 讲之 6:编写你的第一个桥接应用

了解如何连接并编写自定义代码,为您的 Pies 提供日期、时间和天气。

杰夫·克拉克, 用户体验设计师与 ProtoPie 培训师

简介

ProtoPie Connect 开箱即用地提供了许多实用且易于使用的插件,可与 IFTTTLogitech G29 方向盘和 Arduino 等进行集成——既可以通过 blokdots,也可以通过直接串口连接。但如果你想与插件未覆盖的对象进行交互怎么办?如果你订阅了 ProtoPie Enterprise 方案,就可以编写你自己的桥接应用,将你的 Pie 连接到任何产品或服务。

你将学到什么

在本课中,你将探索一个使用名为 Socket.io 的连接技术与 ProtoPie Connect 交互的 Node.js 应用。具体来说,你将:

  • 从一些标准“样板”代码开始,让你能够从应用快速连接到 ProtoPie Connect。

  • 使用 Moment.js 库向你的 Pie 提供格式化的日期和时间。

  • 使用 OpenWeather 的 API 获取当前天气状况并提供给你的 Pie。

完成时间:≤45 分钟

你需要准备什么

一个 ProtoPie Enterprise 订阅

为 ProtoPie Connect 编写自定义桥接应用仅适用于 ProtoPie Enterprise 订阅中包含的 Connect 完整版。Enterprise 订阅者还可额外使用并编写 ProtoPie Connect 的自定义插件。

一些编码经验

要跟上下面的示例,你不需要是专业开发者。如果你以前写过 JavaScript——哪怕只是简单内容——你都没问题。但如果你以前从未写过代码,那你会很难跟上。

如果你是编程新手,我建议先学习以下教程:

学习编程确实需要投入时间,但这对原型设计师来说是一项非常有用的技能。即便作为设计师,只要懂一点代码,也会极大改善你与工程团队的协作关系。

一个不错的文本编辑器

我们要写代码,所以需要使用一个好的文本编辑器。系统内置的记事本等工具也能用,但并不理想。幸运的是,有很多优秀的编辑器可选:

我的示例会使用 Sublime Text,所以如果你想看到与我相同的内容,请使用 Sublime Text。

一个 OpenWeather 账户

前往 OpenWeather 官网注册一个账户。你需要它来连接他们的天气 API。我们将使用免费服务,因此无需设置付费账户。

起始代码和 Pie

我已经写好了一些代码供你入门。下载这个 ZIP 文件并解压到你电脑上方便的位置,然后在 ProtoPie Studio 中打开该 Pie 文件。

[桥接应用起始代码] [天气控制 Pie]

开始吧!

请跟着下面的视频进行。

代码

在视频的 25:39 处,我粘贴了一段用于 Icon Map 的代码。这里提供这段代码,方便你复制粘贴到项目中。

下面是完整的最终代码。

[完整代码]

使用这段代码的方法:

  1. 使用 npm install 安装依赖。

  2. 编辑 index.js,在第 66 行添加你的 Open Weather API Key

  3. 使用 npm start 运行桥接应用。


Edit line 66 with your API Key


在第 66 行填入你的 API Key

完成版 Pie 文件

这是完成状态下的 Pie 文件:

就是这样!但我们不会止步于此。让我们在本系列最后一篇 ProtoPie Connect 入门 7/7:高级桥接应用 - 连接到你的智能家居 中,把它提升到另一个层次。