引言

ProtoPie Connect提供了大量既易用又實(shí)用的插件，可以通過BlokDots或串行接口直接與IFTTT、羅技G29方向盤、Arduino等很多事物進(jìn)行集成。但萬(wàn)一你希望與某個(gè)事物進(jìn)行交互但插件又沒有相應(yīng)的支持時(shí)怎么辦？如果你訂閱了ProtoPie企業(yè)版計(jì)劃，那么就可以編寫自定義Bridge App來實(shí)現(xiàn)將Pie與任意設(shè)備或服務(wù)進(jìn)行連接。

學(xué)習(xí)內(nèi)容

在本教程中，我們將探索一個(gè)與ProtoPie Connect進(jìn)行連接交互的Node.js?app（https://nodejs.org/en），連接方式上所使用的技術(shù)是Socket.io（https://socket.io/）。具體來說：

• 從一些現(xiàn)成的模板代碼開始，使你的app得以快速連接到ProtoPie Connect上。

• 使用Moment.js庫(kù)（https://momentjs.com/）來向Pie提供指定格式的日期和時(shí)間。

• 使用OpenWeather（https://openweathermap.org/）的API來獲取實(shí)時(shí)天氣情況并展示到Pie上。

本教程約需45分鐘完成。

所需資源

ProtoPie企業(yè)版訂閱

為ProtoPie Connect編寫自定義Bridge App的功能僅適用于ProtoPie企業(yè)版訂閱中所包含的完整版Connect。如果你正在使用的是ProtoPie專業(yè)版訂閱，其所包含的是輕量版Connect，這種情況下無(wú)法使用自定義Bridge App功能。

一些編程經(jīng)驗(yàn)

并不要求非得是專業(yè)的開發(fā)者才能看懂下面的教程范例，但如果之前你有過哪怕一點(diǎn)很簡(jiǎn)單的JavaScript編程經(jīng)驗(yàn)，那就已經(jīng)很不錯(cuò)；而如果你此前從未進(jìn)行過編程，那可就比較頭大了。

如果你在編程上完全是個(gè)新手，那么建議你先學(xué)習(xí)以下教程：

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

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

學(xué)習(xí)編程無(wú)疑是一件需要投入很多時(shí)間的事，但對(duì)原型制作者乃至設(shè)計(jì)師來說，同樣是一項(xiàng)十分有用的技能，即便只是對(duì)代碼略知一二，也會(huì)為你與項(xiàng)目團(tuán)隊(duì)之間的關(guān)系帶來不少驚喜。

合用的文本編輯器

鑒于我們?cè)谧龅氖蔷帉懗绦虼a的工作，這就需要有一個(gè)合用的文本編輯器。像記事本這類操作系統(tǒng)里自帶的軟件確實(shí)也可以用來編程，但工作效能上并不理想。幸運(yùn)的是，業(yè)界還有許多優(yōu)秀的文本編輯器可供選擇使用：

• Sublime Text

• Brackets

• Visual Studio Code

在后面的例子中我用的是Sublime Text，所以如果你希望你跟隨學(xué)習(xí)時(shí)看到的內(nèi)容跟我的一模一樣，就也得跟著使用Sublime Text。

OpenWeather帳戶

訪問OpenWeather網(wǎng)站（https://home.openweathermap.org/users/sign_up）并注冊(cè)一個(gè)帳戶。我們會(huì)需要一個(gè)帳戶以便連接他們的天氣API，用免費(fèi)的天氣API服務(wù)就可以，所以不需要注冊(cè)為付費(fèi)帳戶。

初始代碼

我已經(jīng)寫了一些代碼以便于你可以直接用來學(xué)習(xí)本教程。點(diǎn)擊下面鏈接，下載文件“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

我們開始吧！

請(qǐng)瀏覽以下視頻教程并跟隨視頻內(nèi)容進(jìn)行操作。

代碼

在視頻中處理天氣圖標(biāo)的部分，我粘貼了一段實(shí)現(xiàn)天氣代碼與名稱相對(duì)應(yīng)的代碼，以下是相應(yīng)代碼，你可以直接復(fù)制粘貼到你的項(xiàng)目中：

最終版文件

如需最終代碼，請(qǐng)前往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運(yùn)行

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