树莓派+阿里云轻松智能家居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