摘要：如果想做出来一个物联网控制APP，又不想太多的代码工作量，那么“框架式”的思路比较好。也就是通过某种形式，生成一个可以控制物联网设备的网页，然后将这个网页“打包”成一个APP，或者做一个浏览器APP，让这个浏览器只能显示这一个网站。本文就以阿里云物联网平台“移动可视化”为例，讲解一下这种APP制作的具体方法。

实现的效果如下图所示：要想实现这个效果，需要的技术知识比较多，今天先把“框架”里面的“网页”部分讲清楚，下一篇再讲“框架”。

开发环境：硬件（haas100开发板），软件：阿里云物联网平台IoT Studio。

1.在阿里云物联网平台注册产品

2.获取设备“三元组”信息

3.将三元组信息烧录到设备内部

4.使用IoT Studio新建移动可视化项目

具体步骤如下：

1.在阿里云物联网平台注册产品

在此不再赘述，详细请参考如何在阿里云物联网平台新增一个设备

2.获取设备“三元组”信息

这三个参数（其实还有第四个参数Product Secret，在阿里云生活物联网平台下常用到）

3.将三元组信息烧录到设备内部

以阿里云haas100为例，将三元组信息烧录进设备内部的方法是将三元组信息直接写入固件代码中。还有一些硬件，比如ESP32，支持将三元组单独做成一个文件烧录至指定的分区。这两种操作的目的是相同的，都是让设备具有身份证，一机一密。

操作的方法是在代码中相应位置用当前设备的三元组信息替代单引号内部的信息。

不同的设备，固件代码烧录进设备的方法不同，具体操作方法请参考对应设备的手册。

haas100的烧录方法是“推送”，因为haas100已经内置了js引擎，所以不需要编译之后烧写，而是用串口将代码“传输”到设备即可。设备复位之后，自动执行js程序。采取的是边解析边执行的方式，非常方便。

4.使用IoT Studio新建移动可视化项目

物联网应用开发（IoT Studio）是阿里云针对物联网场景提供的生产力工具，是阿里云物联网平台的一部分。可覆盖各个物联网行业核心应用场景，帮助您高效经济地完成物联网数据分析、设备、服务及应用开发，加速物联网SaaS构建。

物联网应用开发提供了Web可视化开发、移动可视化开发和业务逻辑开发与物联网数据分析等一系列便捷的物联网开发工具，解决物联网开发领域开发链路长、技术栈复杂、协同成本高、方案移植困难的问题。

IoT Studio移动可视化开发功能初期是提供在线生成APK文件的，非常方便，没过多久就取消这个功能了。

2020年11月11日上线改版后的移动可视化功能，就不再支持APK文件生成了。取而代之的是生成一个适合移动设备浏览的网页。

具体方法如下：

进入控制台https://studio.iot.aliyun.com/

进入移动可视化开发

新建一个可视化应用,输入应用名称，也选择所属的项目。

5.配置页面和控制组件

可视化设置页面有三个主要功能，“页面”页用于可视化编辑，所见即所得。“组件”页用于在页面上添加所需要的组件，比如文本、图片、按钮、列表等。可以做出很漂亮的界面。

例如下图所示，可以添加文本、指针、曲线等元素。如果多下功夫，是可以设计出非常美观大方的界面的。作为例子，这个界面上有一个按钮，用来控制haas100开发板上的LED灯。

通过配置该按钮的数据源，可以实现按钮与开发板LED灯的绑定。方法是选择产品---设备---数据项。本例中选择的是开关属性，这个属性在物联网平台上新建产品和设备时是定义了的，没有定义的属性，这里是设置不了的。设置结束之后，如果点击验证数据格式，出现验证成功的提示语，那么就证明已经设置成功了。

阿里云物联网平台IoT Studio的设计理念是在线无代码编程。通过简单的拖放操作实现移动端应用。

6.发布之前的设置

本文开头说了，这种方式最简单，做一个网页就行了。但凡事都有利有弊：做一个页面简单的很，可是发布就很麻烦了。

这个界面是一个网页，你预览可以，要想实现一个普通的手机也能够运行，并控制现实设备，那么就得具有互联网通信的功能，说白了，你得有域名，得有公网IP才行。

没错！相当于你得有一个专属的网站。

那么购买服务器需要银子，买域名也需要银子，这些都可以在阿里云进行购买。

如果是做一个简单的实验，可以购买一年的域名，普通的也就是三五十块钱一年。

服务器就没必要购买了，收费有点贵，制作物联网应用的话推荐购买阿里云物联网平台的套餐包，不用自己在服务器端配置MQTT等等服务了，阿里云一键完成操作，按量收费，价格很便宜。比如体验版一年才12元。轻量版的一年才60元，两年120元。不过购买套餐90元以上的送一个备案服务号。这个号码可以用来备案域名使用。