使用arduino D1 wifi模块（WeMos D1）连接阿里云物联网平台并成功实现APP点亮板载LED（九）---制作APP

前几篇文章讲解了如何在阿里云控制台上给设备登记“身份证”，如何用MQTT.fx客户端模拟一个设备连接阿里云物联网平台，分析了arduino编程环境如何配置依赖库，在arduino d1 wifi模块编程下载成功，而且于阿里云物联网平台通信成功，可以通过阿里云控制D1模块上的LED开关。

以上工作实现的是设备通信，还不能达到手机控制的目的，本文将介绍手机APP制作方法。

编程环境：阿里云。没错，就是阿里云，现在已经可以在线制作APP了，开发者急需的，阿里已经做好了。

 

一、阿里云制作APP基本知识

详情可以参考云栖社区文章，这个文章中详细介绍了什么是IoT Studio，它能干什么，怎么样使用它来开发应用。

使用IoT Studio经济高效地完成物联网应用开发（含DEMO）

IoT Studio提供了可视化应用开发、服务开发等一系列便捷的物联网开发工具，帮助用户解决物联网开发过程中常见的成本高、开发链路长、技术栈复杂、定制化强、方案移植困难等问题，重新定义物联网应用开发

这个IoT studio可以开发两种应用，一种web应用，可以简单地理解为“网页”应用，另一种是移动应用，可以支持安卓和苹果应用。

它有什么优势呢？主要是可视化，不用编代码，通过简单的拖拽操作就能做出APP，设备关联也不用编码，直接设置即可。

比以往提供源代码，开发者还需要使用android studio等软件再次开发的效率要高的不是一点半点。

作者以前做过源代码二次开发，光是android studio设置就费了一番功夫，修改个界面按钮还用了半天，更别说其他操作了。

在物联网展览上见过一个APP开发公司，一个简单的操作开价好几十K。在节约成本方面，阿里云简直太给力了。

二、开发本实验所需的APP步骤

首先登陆阿里云物联网平台，打开菜单IoT Studio---开发服务。

新建一个项目

创建一个空白项目。可以看到空白项目下方还有解决方案，相当于模板，这些模板的界面非常漂亮、大气，利用模板，可以更加提高设计效率，使应用更加专业化。

在弹出的对话框中填写项目名称和项目描述，其中项目名称是必填的。

 

然后在新界面中点击关联，先关联产品，再关联设备。

也可以选择关联所有设备，本实验中只有1个设备，所以可以勾选，只是在本实验中这么做。

这时就显示关联了1个产品，1个设备

然后选择移动可视化开发

在弹出的对话框中填写应用名称，然后选择智能设备，再确定。当然也可以选择其他的，选择智能设备只是用在本例。

进入下一步，页面上显示左侧有工具栏，显示有账号模块，用来登陆账号或者注册账号，没有账号是无法对设备进行控制的，这个道理相信大家能够理解。

首页模块，就是APP打开之后的首页。

我的模块，分为“我的”和“关于”，在此不多讲。

下面先讲如何给关键功能添加开关，也就是打开智能灯的开关。首先点击“仪表”---“开关”，然后拖动想要的开关到自定义新增页上面。然后给这个开关绑定智能灯的开关TOPIC.

在新的页面中配置数据，然后用下拉方式选择产品，设备，选择属性为主灯开关，这些属性都是在阿里云登记设备的时候自动添加的，当初我们选择的这类产品是什么类别的产品，就会自动添加这个类别产品的所有属性，“主灯开关”就是当时选择“灯”时候的功能主题。选择好之后，点击“验证数据格式”，这时在页面上方出现“数据格式验证成功”，就证明成功了。

功能页面可以改名，方法是鼠标左键双击页面名称“自定义新增页1”，比如这里修改为“智能XX”

然后配置首页，连接到自定义的“智能XX”页面，否则打开APP，只能看到首页，无法跳转到自定义功能页，也就是功能页。

配置也非常方便，可以修改图标，然后修改标题，跳转连接修改为我们刚才定义的页面“智能XX”。

通过界面设置，APP前期工作就完成了，没有代码编写。

然后就可以生成APP了，你没看错，在线生成APP。

这只是一个实验，所以就选择自己用。

需要改动包名，如果不想自己定义，可以随机生成，也是能够用的。

生成速度较快，三五分钟即可。

生成app之后，提供了二维码，可以使用各类浏览器扫码下载。

下载后保存在手机内，文件名是

安装之后打开，首先需要注册

注册之后用手机号登陆，首页是这样的，可以看到就是刚才设置的图标和标题

点击“智能灯控制”标题，进入加载页面，过几秒钟连接到阿里云之后就进入自定义界面了。

可以看到页面的名称就是自己定义的“智能XX”，主界面上面有一个开关控件。另外，界面右下角有一个小虫子形象，估计是这个APP是自己使用，版本是DEBUG的原因吧，程序员都知道这个小虫子和DEBUG的故事，这个故事也不在本实验关注点中，不详细说了。

点击开关，可以关闭小灯。

板子上的LED跟着APP开关作出了及时的响应。本实验取得成功。

 

作为嵌入式开发者，深知获取一篇不出错的帮助文档的重要性。

因此我竭尽所能，尽可能详细地将所有的步骤都写在文章中，包括源文件，也是经过自己调试通过之后才放上来的。

还有文章中穿插了一些基本知识的介绍，我不想照抄照搬，而是尽可能谈自己的理解，文笔不行，希望大家能够从中获得些许灵感。

不敢保证读者能够按照我的文章能够一次成功，我也不是一次成功的，参考了CSDN好几位老师的文章，解决了好多问题才弄成，细节已经写进系列文章里面了，如果还是没有成功，可以做技术交流。