1@page miniapp_agent_demo 蓝牙配网:通过支付宝小程序为HaaS板便捷配网示例
2# 1. 案例简介
3miniapp_agent_demo是我们提供的小程序配网、上云配套固件。通过配套的“HaaS小程序”,开发者可以快速实现设备的配网、上云、连接 IoT Studio 快速实现应用开发及部署。
4其完成的主要功能包括:
5
6- 蓝牙配网
7    上电启动蓝牙配网
8    连接小程序指定的 Wi-Fi
9    Ping "aliyun.com" 并将连接结果返回至小程序端显示
10
11- LinkSDK 连接物联网平台
12    接收小程序下发的三元组
13    连接物联网平台并运行业务代码
14
15该示例的运行依赖下述基本功能完成对接:
16- 内核的任务和中断运行正常
17- 系统tick定时器正常运行
18- 蓝牙通信
19- Wi-Fi连接
20
21*方案限制*:目前不支持中文SSID和中文密码。
22
23# 2. 物料清单
24
25## 2.1 HaaS100 硬件
26
27[HaaS100 硬件简介](https://help.aliyun.com/document_detail/184426.html)
28
29<div align=left display=flex>
30    <img src="https://img.alicdn.com/imgextra/i4/O1CN01XxD6Xo217CB3FZnEU_!!6000000006937-2-tps-746-497.png" style="max-width:800px;" />
31</div>
32
33# 3. 设备端实现
34
35
36# 4. 完整使用流程
37点击这里(https://cloud.video.taobao.com/play/u/1632932/p/1/e/6/t/1/307129850804.mp4)观看演示视频。
38## 烧录固件至开发板
39*> 选择解决方案: 小程序配网 上云 应用案例*
40*> 选择开发板: Haas100 board configure*
41
42-- 编译固件可参考[《AliOS Things集成开发环境使用说明之编译固件》](https://help.aliyun.com/document_detail/302384.html)43-- 烧录固件可参考[《AliOS Things集成开发环境使用说明之烧录固件》](https://help.aliyun.com/document_detail/302383.html)44
45## 小程序配网
46- 准备一个连接至互联网的 Wi-Fi AP。它可以由手机热点产生,也可以通过路由器配置。在本案例中,热点信息如下:
47    SSID: HaaS-AP
48    PassWord: MiniAppAgentDemo
49- 将烧录好固件的设备上电
50- 在“支付宝”中搜索并打开“HaaS小程序”
51- 点击底部“配网”Tab
52- 输入目标AP的SSID及Password
53- 打开手机蓝牙
54- 点击扫描配网设备(授予蓝牙权限)
55- 在扫描列表中选择待配网设备
56- 点击“发起配网”
57- 等待配网完成,显示配网状态。当“配网状态”中显示“设备IP”时,代表配网成功。
58
59<div align=left display=flex>
60    <img src="https://img.alicdn.com/imgextra/i3/O1CN01i0HONM1TeS0OHtHk0_!!6000000002407-1-tps-626-1280.gif" style="max-width:800px;" />
61</div>
62
63## 配置物联网平台
64点击这里(https://iot.console.aliyun.com/)进入物联网平台
65### 创建产品
66
67<div align=left display=flex>
68    <img src="https://img.alicdn.com/imgextra/i1/O1CN01dvGFo01DIR79OnB1b_!!6000000000193-2-tps-4096-2560.png" style="max-width:800px;" />
69</div>
70
71点击 公共实例-产品-新建产品,选择自定义品类,点击创建。
72
73### 配置物模型并发布
74
75<div align=left display=flex>
76    <img src="https://img.alicdn.com/imgextra/i4/O1CN01GcyU4T1vGutcRUrX6_!!6000000006146-2-tps-4096-2560.png" style="max-width:800px;" />
77</div>
78
79导入代码目录下的物模型文件,发布物模型。
80### 创建设备
81
82<div align=left display=flex>
83    <img src="https://img.alicdn.com/imgextra/i2/O1CN01sOZ4lC26UA7drDcmQ_!!6000000007664-2-tps-4096-2560.png" style="max-width:800px;" />
84</div>
85
86在该产品下创建设备,获得三元组。
87### 生成三元组二维码
88点击这里(https://haas.iot.aliyun.com/gen-qrcode),前往二维码生成工具。将三元组依次拷贝,生成二维码供小程序读取。
89
90<div align=left display=flex>
91    <img src="https://img.alicdn.com/imgextra/i4/O1CN01DrQXDt1eS33GNbyf1_!!6000000003869-2-tps-4096-2560.png" style="max-width:800px;" />
92</div>
93
94## 小程序上云
95
96<div align=left display=flex>
97    <img src="https://img.alicdn.com/imgextra/i1/O1CN01brO1OO1zOwINrkWec_!!6000000006705-1-tps-626-1280.gif" style="max-width:800px;" />
98</div>
99
100- 点击底部“上云”Tab
101- 输入目标三元组
102  也可以使用二维码生成工具(https://haas.iot.aliyun.com/gen-qrcode103  在页面输入三元组之后,点击生成二维码,并使用小程序“扫码获取三元组”
104- 打开手机蓝牙
105- 点击扫描设备(授予蓝牙权限)
106- 在扫描列表中选择设备
107- 点击“下发三元组”
108- 等待三元组下发完成
109## 配置 IoT Studio
110点击这里(https://studio.iot.aliyun.com/)进入IoT Studio
111### 创建项目
112
113<div align=left display=flex>
114    <img src="https://img.alicdn.com/imgextra/i1/O1CN01rWDZV31wO4hQAMVpg_!!6000000006297-2-tps-4096-2560.png" style="max-width:800px;" />
115</div>
116
117### 关联物联网平台
118
119<div align=left display=flex>
120    <img src="https://img.alicdn.com/imgextra/i2/O1CN01f9csYR25ePMtZTaZD_!!6000000007551-2-tps-4096-2560.png" style="max-width:800px;" />
121</div>
122
123
124<div align=left display=flex>
125    <img src="https://img.alicdn.com/imgextra/i1/O1CN01rWDZV31wO4hQAMVpg_!!6000000006297-2-tps-4096-2560.png" style="max-width:800px;" />
126</div>
127
128### 创建移动端应用
129
130<div align=left display=flex>
131    <img src="https://img.alicdn.com/imgextra/i2/O1CN01EqkRaK1Ii9QmrCITV_!!6000000000926-2-tps-4096-2560.png" style="max-width:800px;" />
132</div>
133
134编辑移动应用界面,并完成数据绑定。
135本案例中,使用6个按钮对应 HaaS100 开发板上6个灯的亮灭。
136
137<div align=left display=flex>
138    <img src="https://img.alicdn.com/imgextra/i4/O1CN01wNItls28Bxc44sieG_!!6000000007895-2-tps-4096-2560.png" style="max-width:800px;" />
139</div>
140
141点击右上角预览图标,进入预览。
142### 预览移动端应用
143
144<div align=left display=flex>
145    <img src="https://img.alicdn.com/imgextra/i2/O1CN01Mp1Wfb1iKUzK1xtLj_!!6000000004394-2-tps-4096-2560.png" style="max-width:800px;" />
146</div>
147
148## 小程序预览移动端应用
149
150<div align=left display=flex>
151    <img src="https://img.alicdn.com/imgextra/i3/O1CN01zoMN1X1RqEy3X2R4P_!!6000000002162-1-tps-626-1280.gif" style="max-width:800px;" />
152</div>
153
154- 点击底部“IoT Studio”Tab
155- 扫描 IoT Studio 中提供的预览二维码
156
157
158# 5. 总结
159本实验提供了小程序方法来实现设备的快速配网、上云,帮助开发者快速连接物联网平台。开发者们可以基于此案例,开发更多的联网应用。
160