引言

我們常常希望可以創(chuàng)建涉及物理設備交互的原型。盡管ProtoPie Connect內置的插件琳瑯滿目，已然可以滿足與很多事物之間的連接與交互，但不可避免地仍然會遇到這些插件并未覆蓋到相關事物的情形。如同前面的課程所述，在企業(yè)版訂閱中，可以用自定義Bridge App的方式來實現(xiàn)在ProtoPie與你所想到的任意設備之間進行通信。

學習內容

在本教程中，我們將把一個名為Home Assistant的開源應用程序連接到智能家居上，并對智能燈具實現(xiàn)物理控制。

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

• 我們會使用Home Assistant WebSocket API（https://github.com/home-assistant/home-assistant-js-websocket）來傳遞指令，實現(xiàn)智能燈具的開燈和關燈操作。

• 你可以了解到如何同時運行多個Bridge App。

• 我們會創(chuàng)建一個可移植的插件文件，以便讓你與你的團隊可以更便捷地共享這個Bridge App。

本教程約需30-45分鐘完成。

所需資源

ProtoPie企業(yè)版訂閱

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

一些編程經(jīng)驗

并不要求非得是專業(yè)的開發(fā)者才能看懂下面的教程范例，如果你之前有過哪怕一點很簡單的JavaScript編程經(jīng)驗，那就已經(jīng)不錯了。而如果你此前從未進行過編程，那可能需要先花點工夫來理解。

如果你在編程上完全是個新手，那么建議你先學習以下教程：

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

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

學習編程無疑是一件需要投入很多時間的事，但對原型制作者乃至設計師來說，同樣是一項十分有用的技能，即便只是對代碼略知一二，也會為你與項目團隊之間的關系帶來不少驚喜。

合用的文本編輯器

鑒于我們在做的是編寫程序代碼的工作，這就需要有一個合用的文本編輯器。像記事本這類操作系統(tǒng)里自帶的軟件確實也可以用來編程，但工作效能上并不理想。幸運的是，業(yè)界還有許多優(yōu)秀的文本編輯器可供選擇使用：

• Sublime Text（https://www.sublimetext.com/）

• Brackets（https://brackets.io/）

• Visual Studio Code（https://code.visualstudio.com/）

在后面的例子中我用的是Sublime Text，所以如果你希望你跟隨學習時看到的內容跟我的一模一樣，就也得跟著使用Sublime Text。

Home Assistant正在你的網(wǎng)絡上運行，并且你至少有一盞智能燈具

安裝和配置Home Assistant并不在本教程的講解范圍內，但你可以訪問Home Assistant（https://www.home-assistant.io/getting-started/）入門頁面，然后在上面找到關于Home Assistant啟動和運行上你所需要的所有資源。

Home Assistant所支持的任意可調光智能燈具都適用于本教程。

如果你沒有專門用于運行Home Assistant的電腦，那么可以在你的電腦里用虛擬機的方式來運行，這種方式對于本教程所講的內容沒有影響，按教程搭建好后同樣可以正常工作。

模板代碼

以下模板代碼與上一個課程是一樣的，下載下面的ZIP文件并解壓到你電腦中便于記住的位置上即可。

protopie-connect-bridge-app-模板.zip?

初始Pie文件

本教程需要以下兩個Pie文件來進行：

• https://cloud.protopie.io/p/3606cbdb1e

• https://cloud.protopie.io/p/2c6f9f0cdf

我們開始吧！

請瀏覽以下視頻教程并跟隨視頻內容進行操作。

相關資源

• Home Assistant WebSocket API參考

  https://developers.home-assistant.io/docs/api/websocket/

• Home Assistant JS WebSocket代碼

  https://github.com/home-assistant/home-assistant-js-websocket