樹莓派+阿里雲輕鬆智能家居DIY-app

陳拓 [email protected] 2020/01/09-2020/01/10

1. 前期工作

先設置阿里雲物聯網平臺,看《阿里雲物聯網平臺基本設置-物模型》

https://blog.csdn.net/chentuo2000/article/details/103559553

再看看《樹莓派+阿里雲輕鬆智能家居DIY-Web》

https://zhuanlan.zhihu.com/p/101892866

熟悉《移動開發工作臺》

https://studio.iot.aliyun.com/studiomobile-doc?spm=a2c9d.12728410.0.0.293b2760uA3Xtp#index.html

2. 移動可視化開發

  • 控制檯 > 物聯網平臺 > IoT Studio > 開發服務

  • 在“我的智能家居”後面點擊“進入”

3. 移動可視化開發

3.1 進入移動可視化開發

  • 在快速入口點擊移動可視化開發

  • 填寫基本信息,選擇模板

  • 點擊“完成”,創建頁面

3.2 頁面佈局

  • 修改頁面標題

雙擊上圖的藍色選中區域,將頁面標題修改爲:我的智能家居。

  • 用容器分隔頁面

根據頁面佈局添加若干個橫向和縱向容器,後面添加的所有組件都放在容器中。

  • 調整背景色

3.3 放置並設置組件

  • 選擇UI組件選項卡

  • 添加圖片

拖拽左側組件的圖片到畫布,在右側操作欄中點擊“上傳圖片”,上傳並選擇圖片。

點擊右下角的“確定”:

  • 增加儀表盤用來顯示當前溫度

        ■ 拖拽儀表盤組件到畫布,設置外觀屬性

        ■ 配置數據,逐項選擇產品、設備、屬性

格式參考

        ■ 驗證數據格式:成功!

        ■ 點擊“確定”

  • 增加實時曲線,顯示溫度變化趨勢

        ■ 拖拽曲線圖組件

        ■ 配置數據,逐項選擇產品、設備、屬性

        ■ 驗證數據格式:成功!

        ■ 點擊“確定”

  • 增加開關

        ■ 拖拽開關組件到畫布上

        ■ 將樣式類型選擇爲圖片,上傳對應狀態的圖片

        ■ 開關組件關聯設備布爾屬性

        ■ 選擇配置數據源,逐項選擇產品、設備、屬性即可。

        ■ 數據格式驗證成功

        ■ 點擊“確定”

  • 增加文字組件到開關圖片上作爲標題“臥室燈”。
  • 保存

4. 預覽

4.1 樹莓派操作

  • 先在樹莓派上運行測試程序

樹莓派的相關開發工作請看參考文檔《樹莓派連接阿里雲物聯網平臺-屬性(nodejs)》。

樹莓派按照指定的時間間隔發送溫度數據:

4.2 阿里雲操作

  • 在阿里雲平臺查看數據

        ■ 實時數據

        ■ 查看數據曲線

        ■ 查看數據列表

4.3 預覽頁面操作

  • 預覽

在預覽頁面點擊臥室燈圖標可以控制樹莓派上的LED開關。

  • 頁面響應

  • 樹莓派響應

  • 雲端響應

更詳細的說明請看參考文檔《阿里雲物模型屬性通過樹莓派控制燈》。

5. 構建

5.1 設置首頁

  • 選擇列表頁

  • 點擊右邊的“新增頁面入口”

設置圖標、標題和描述。

  • 配置頁面

點擊“配置”。

選擇頁面,確定。

5.2 構建

  • 保存

  • 點擊“構建”

  • 選擇“android構建”

  • 我只想自己使用

隨機生成一個Android包名

  • 下一步,構建

  • 下載

點擊下載,或手機掃碼安裝。

5.3 Android手機運行

  • 點擊下面的圖標運行app

  • 註冊一個賬號

  • 登錄,顯示首頁

  • 點擊“我愛我家”進入“我的智能家居”

  • 點擊燈泡圖標可以點亮或熄滅樹莓派上的LED燈

  • 點擊右下角紅色的小蟲子查看調試信息

6. Web應用

請看《樹莓派+阿里雲輕鬆智能家居DIY-Web》
https://zhuanlan.zhihu.com/p/101892866

參考文檔

  1. 家居控制面板
    https://studio.iot.aliyun.com/studioweb-doc#living.html
  2. 農業監控大屏
    https://studio.iot.aliyun.com/studioweb-doc#agriculture.html
  3. 阿里雲物聯網平臺基本設置
    https://blog.csdn.net/chentuo2000/article/details/103559553
  4. 微信小程序MQTT模擬器 阿里雲物聯網平臺測試
    https://blog.csdn.net/chentuo2000/article/details/102216865
  5. 自己寫微信小程序MQTT模擬器
    https://blog.csdn.net/chentuo2000/article/details/102507560
  6. 樹莓派 Zero W+溫度傳感器DS18B20
    https://blog.csdn.net/chentuo2000/article/details/81051701
  7. 樹莓派GPIO控制
    https://blog.csdn.net/chentuo2000/article/details/81051645
  8. 樹莓派連接阿里雲物聯網平臺-屬性(nodejs)
    https://blog.csdn.net/chentuo2000/article/details/103705694
  9. 樹莓派連接阿里雲物聯網平臺-服務(nodejs)
    https://blog.csdn.net/chentuo2000/article/details/103754860
  10. 樹莓派連接阿里雲物聯網平臺-訂閱(nodejs)
    https://blog.csdn.net/chentuo2000/article/details/103769449
  11. 樹莓派連接阿里雲物聯網平臺-事件(nodejs)
    https://blog.csdn.net/chentuo2000/article/details/103805559
  12. 阿里雲物模型屬性通過樹莓派控制燈
    https://zhuanlan.zhihu.com/p/101623092
  13. 樹莓派+阿里雲輕鬆智能家居DIY-Web
    https://zhuanlan.zhihu.com/p/101892866
  14. alibabacloud IoT Device SDK for Javascript
    https://github.com/aliyun/alibabacloud-iot-device-sdk
  15. 阿里雲移動開發工作臺
    https://studio.iot.aliyun.com/studiomobile-doc?spm=a2c9d.12728410.0.0.293b2760uA3Xtp#index.html

 

 

發佈了21 篇原創文章 · 獲贊 18 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章