引言

ProtoPie Connect提供了大量既易用又实用的插件，可以通过BlokDots或串行接口直接与IFTTT、罗技G29方向盘、Arduino等很多事物进行集成。但万一你希望与某个事物进行交互但插件又没有相应的支持时怎么办？如果你订阅了ProtoPie企业版计划，那么就可以编写自定义Bridge App来实现将Pie与任意设备或服务进行连接。

学习内容

在本教程中，我们将探索一个与ProtoPie Connect进行连接交互的Node.js app（https://nodejs.org/en），连接方式上所使用的技术是Socket.io（https://socket.io/）。具体来说：

• 从一些现成的模板代码开始，使你的app得以快速连接到ProtoPie Connect上。

• 使用Moment.js库（https://momentjs.com/）来向Pie提供指定格式的日期和时间。

• 使用OpenWeather（https://openweathermap.org/）的API来获取实时天气情况并展示到Pie上。

本教程约需45分钟完成。

所需资源

ProtoPie企业版订阅

为ProtoPie Connect编写自定义Bridge App的功能仅适用于ProtoPie企业版订阅中所包含的完整版Connect。如果你正在使用的是ProtoPie专业版订阅，其所包含的是轻量版Connect，这种情况下无法使用自定义Bridge App功能。

一些编程经验

并不要求非得是专业的开发者才能看懂下面的教程范例，但如果之前你有过哪怕一点很简单的JavaScript编程经验，那就已经很不错；而如果你此前从未进行过编程，那可就比较头大了。

如果你在编程上完全是个新手，那么建议你先学习以下教程：

• Net Ninja：JavaScript新手教程（https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET）

• Net Ninja: Node JS新手教程（https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp）

学习编程无疑是一件需要投入很多时间的事，但对原型制作者乃至设计师来说，同样是一项十分有用的技能，即便只是对代码略知一二，也会为你与项目团队之间的关系带来不少惊喜。

合用的文本编辑器

鉴于我们在做的是编写程序代码的工作，这就需要有一个合用的文本编辑器。像记事本这类操作系统里自带的软件确实也可以用来编程，但工作效能上并不理想。幸运的是，业界还有许多优秀的文本编辑器可供选择使用：

• Sublime Text

• Brackets

• Visual Studio Code

在后面的例子中我用的是Sublime Text，所以如果你希望你跟随学习时看到的内容跟我的一模一样，就也得跟着使用Sublime Text。

OpenWeather帐户

访问OpenWeather网站（https://home.openweathermap.org/users/sign_up）并注册一个帐户。我们会需要一个帐户以便连接他们的天气API，用免费的天气API服务就可以，所以不需要注册为付费帐户。

初始代码

我已经写了一些代码以便于你可以直接用来学习本教程。点击下面链接，下载文件“protopie-connect-bridge-app-boilerplate.zip ”并解压到你电脑中便于记住的位置上即可。

下载地址：https://pan.baidu.com/s/1kpApCJIUX1h44VFSRX9_Nw?pwd=3dh2

初始Pie文件

下载并在ProtoPie Studio中打开Pie文件，下载地址：https://cloud.protopie.io/p/fd415ff62d

我们开始吧！

请浏览以下视频教程并跟随视频内容进行操作。

代码

在视频中处理天气图标的部分，我粘贴了一段实现天气代码与名称相对应的代码，以下是相应代码，你可以直接复制粘贴到你的项目中：

最终版文件

如需最终代码，请前往https://pan.baidu.com/s/1HSy0jcf9EBNmARQfG5pxbQ?pwd=3avb并下载“protopie-connect-bridge-app-date-time-weather.zip”文件。

下载后

1. 使用口令npm install安装

2. 编辑index.js：添加Open Weather API Key到第66行

 3. 使用口令 npm start运行

Pie文件完整版下载：https://cloud.protopie.io/p/0dffbce0b0