单片机学习小组

刘洋

10年用户 1157经验值

擅长:可编程逻辑嵌入式技术

私信关注

如何用阿里云的Iot Studio制作web网页呢

如何用阿里云的Iot Studio制作web网页呢？并用产品自带的topic传输数据网页端呢？

回帖（1）

杨秀珍

2022-2-22 14:26:15

本文介绍如何用阿里云的Iot Studio制作web网页。并用产品自带的topic传输数据网页端，并用网页端下发命令。

1、找到上次创建的产品，点击功能定义->编辑草稿，定义功能，如传输温湿度数据信息、传输开关命令信息等；

2、点击添加自定义功能，添加完之后点击确认，注意设备标识符是后面解析数据重要依据，在同一设备下不能相同。

同理添加湿度功能

添加开关功能

3、最后点击发布上线

4、接下来我们去编辑网页，回到阿里云首页，点击产品，点击物联网应用开发

5、新建一个项目，对项目进行命名。

6、添加完成后，需要关联前面建的物联网产品，找到前面新建的产品，点击确定

7、接下来还需要关联该设备下面的设备，因为待会要获取这个设备下面的数据

8、关联成功之后在该项目下新建一个web应用

9、点击确定后就会进入web编辑界面，点击左上方的立方体，可以看到左栏有很多组件，点击基础组件右边的三角形还能添加别的不同应用场景的组件。

接下来我们添加仪表和开关的gui，在左边组件框直接拖出仪表盘的gui，双击之后在右边即可看到对该仪表的编辑栏。

10、双击配置数据源，就是与前面定义功能里面的数据关联起来

选择你想要哪个产品下哪个设备（设备选择指定设备）的什么数据，这里选择湿度数据，选择完之后点击验证一下数据格式，注意如果在你确实前面填写没有问题的情况下验证还是不通过，出现让你调试的警告，那就不要管它，后面调试一下数据就好了。

再拖一个多色仪表盘，配置与上面一样，数据选择温度

再拖一个开关控件，点击交互->添加交互，因为开关不是要获取什么数据，而是要发送一个指令，即与设备交互

保存，预览一下

11、接下来我们进行虚拟设备调试，回到创建产品的界面，在监控运维下找到设备模拟器，选择你要调试的设备并开启

编辑好数据，点击发送指令

回到网页预览界面，可以看到预览的界面收到了我们刚刚发送的值。

**复制备份一下这段内容，**我们后面要以这种格式用单片机给web端发送数据

12、在使用单片机之前，我们先用mqtt.fx调试一下，看数据是否拉通，两端以何种数据格式进行传输，方便后面用单片机发布数据和解析数据。先获取设备的三元组信息，用小工具生成基本信息后填到mqtt.fx上连接这个设备。发布消息我们用属性上报这个Topic，注意要把设备名替换掉。在mqtt.fx上面以刚刚复制这种格式填好，点击Publish，即可把数据发布出去，发布后在网页预览界面就可看到更新的数据，可见后面在单片机上面只需以这种形式将数据发布出去，网页端就可以收到。

接下来我们用mqtt.fx去调试一下开关，即调试一下网页端下发命令的功能，即用mqtt.fx订阅网页端发布的数据。注意替换设备名，点击订阅。

点击网页端的开关按钮，就可以在mqtt.fx看到接收的数据数据，注意这里的数据格式，后面在单片机端要解析这里的数据，拿到下发的命令值。

13、至此，网页端和设备端数据已经拉通，我们只需要将mqtt.fx换成单片机，或者直接粗暴一点，直接把mqtt_fx这个设备的设备信息复制到单片机开发程序中，让单片机以这个设备接口登上阿里云，就可以实现单片机上传数据到网页端，网页端下发命令到单片机端的信息流转。这个程序是在上一篇文章中工程的基础上改动的。