阿里云IOT入门教程（一）阿里云IOT Studio自建手机App控制Wemos D1 Mini( ESP8266 ）板载灯亮灭

概述
所需材料
Mqtt预备知识
hacklab端开发
* 硬件端上报属性数据
阿里云物联网平台端的设置
* 创建产品
- 创建产品性质
- 创建设备
- 复制Topic
阿里云IOT Studio设置
* 创建项目
- 导入产品
- 手机端App开发
- App UI界面开发
- App UI界面与产品进行关联
- 自定义页面和【功能】->列表页的关联
- 注册用户
- 打包应用程序
- * 打包安卓apk
  - IOS构建
- 安卓apk安装使用
- * 安装apk

概述

通过阿里云物联网平台提供的IOT Studio服务创建一个手机App，实时控制WeMos D1 Mini板载的亮灭。这个加上继电器就可以控制家中照明灯的亮灭，扩展性很强。

所需材料

Wemos D1 Mini开发板 *1 （9.9元）
智能手机 *1（。。。。每个人都有吧。。。）
合计：9.9元

Mqtt预备知识

参见帖子。。。。（先挖个坑，，，待我回头补…）

hacklab端开发

这个部分就不重复写了参见之前的帖子。这里只给出大致的提纲。。嘿嘿嘿
VSCode+PlatformIo IDE（or hacklab方式）实现Wemos D1 Mini（ESP8266）接入[阿里云](https://l.gushuji.site/aliyun)物联网平台
ESP8266 （Wemos D1 Mini）[阿里云](https://l.gushuji.site/aliyun)IOT入门教程（二）— 如何测试Mqtt数据的发送和接收

硬件端上报属性数据

主要代码

阿里云物联网平台端的设置

创建产品

创建产品性质

创建设备

复制Topic

阿里云IOT Studio设置

创建项目

导入产品

手机端App开发

完成上图的操作后，页面就会跳转到下面的UI开发界面。这个界面主要分为三个区域：
1.区域一：上半部分为整个App的UI页面导航。分为自定义页面、账号模块、首页模块和我的模块四个部分。下半部分为一些UI开发时需要的控件。
2.区域二：为各个页面UI的设计页面。
3.区域三：对区域二中的一些控件进行颜色、大小、数据源的配置。

这里有一点需要特别详细的介绍下。“账号模块”和“我的模块”两个部分开始的时候可以不用修改直接用默认的。"LED灯控制”这个页面是我对“自定义页面”重命名后名字。你第一次进入的时候这个位置可能显示的不是这个，而是“自定义界面”。这个自定义界面很重要。他需要和后面的那个“首页模块”->列表页进行数据关联。后续会有详细的介绍。我因为是先进行了测试才写的教程。所以截图显示的可能并不是你默认打开的样子。请稍加注意。

App UI界面开发

整个App的UI开发，或者说你远程控制这个灯的操作界面是在“自定义页面”完成的。
按照下图所示的顺序。我们从区域一拖拽一个“开关”控件到区域二的界面上。并在区域三进行一些属性的设置。如大小，页面位置和颜色。

从区域一拖拽一个“文本标签”控件到页面上，更改文字为“灯的开关”。对上一步的按钮进行文字说明。

App UI界面与产品进行关联

上一步拖拽到页面上的这个按钮控件主要是用来控制开发板上的板载灯的。所以需要对他的数据源进行配置。使按钮和板载灯关联起来。我们的板载灯其实就是上一个试验中智能灯光产品那个智能插座的属性。按照下图的顺序，打开“数据源配置”页面。

在数据源配置界面，按照之前实验中设置的产品、设备名称进行配置。如果你不是按照我之前实验做的。你就需要关联自己的产品、设备等信息。下面的配图少圈选了一个“格式验证”，你点击这个按钮，可以验证你关联产品是否正确。验证无误后，点击“确定”，完成按钮和设备的关联。

自定义页面和【功能】->列表页的关联

注册用户

接下来我们会将这个程序打包成安装程序，安装程序会有一个登录页面。登录页面会要求输入手机号和密码。所以接下来我们在IOTStudio里注册下用户。方便到时候登录。（你也可以在注册页面进行注册）

打包应用程序

打包安卓apk

在右上角选择“构建”按钮，在弹出的菜单中选择“”Android构建”

选择自己用。

随机生成一个包名。

进入包生成界面。需要等待一点点时间。

IOS构建

IOTStudio提供的ios构建是源代码包。里面的bundleID你就用ios的app开发命名方式自己起一个名字就好比如“com.lalala.ledtest”，版本填写“1.0.0”,就可以下载生成的源码包。但是我把这个源码包发给了IOS开发的朋友，他说运行的时候需要一个三方的插件什么“cocoapods”，但是死活下载不下来这个插件。。。emmm 等我回头研究研究。。。这里先留个坑坑，有会的童鞋务必给我留言哈。。。我好像学习这个部分噻。

安卓apk安装使用

安装apk

通过扫之前生成的二维码或直接下载的方式下载apk，下载好后进行安装。双击打开apk会显示下面的登录页面。在下面的页面用你之前创建的账号密码进行登录即可。

输入账号密码后进入下面所示的界面。点击阿里云LED控制。

进入自定义的界面。打开关闭按钮即可以控制板载的LED灯亮灭。板载LED其实就是一个引脚的高低电平变化。所以这个看似简单的控制其实可以扩展成很多其好玩的设计，不如物联网入门必会项目之----远程浇花。

阿里云IOT入门教程（三）阿里云IOT Studio自建手机App控制Wemos D1 Mini( ESP8266 ）板载灯亮灭相关推荐

从arduino板开始做到阿里云app控制--WeMos D1或ESP8266连接阿里云文章合集及源代码
近期不断有麻油问我要源代码,就不遮掩了,粘贴到此处,复制粘贴即可.前提是arduino环境搭建好. /** 这是使用wemos d1模块连接阿里云的代码,亲测成功* 注意阿里云设备三元素一定要用自己的 ...
阿里云IoT：控制掌控板板载灯亮灭
文章目录准备工作 1.注册账号并登录阿里云IoT平台 2.进行实名验证 3.开通物联网平台创建产品 1.新建一个名为"Light"的产品 2.进行功能定义添加设备开发手机A ...
【学习笔记】云服务器入门教程（搭建云盘、网站，安装anaconda、WinSCP、宝塔面板等）
1. 关于阿里云服务器ECS的一些特点 2. 阿里云服务器ECS环境配置及创建普通账户 3. linux的一些常见命令(注意防火墙端口相关设置命令) 4. 搭建nextCloud云盘 5. 云服务器 ...
Python爬虫入门教程 41-100 Fiddler+夜神模拟器+雷电模拟器配置手机APP爬虫部分
爬前叨叨从40篇博客开始,我将逐步讲解一下手机APP的爬虫,关于这部分,我们尽量简化博客内容,在这部分中可能涉及到一些逆向,破解的内容,这部分尽量跳过,毕竟它涉及的东西有点复杂,并且偏离了爬虫体系太 ...
Android入门教程三之使用Eclipse+ADT+SDK开发安卓APP
前言: 1.这里我们有两条路可以选,直接使用封装好的用于开发Android的ADT Bundle,或者自己进行配置因为谷歌已经放弃了ADT的更新,官网上也取消的下载链接,这里提供谷歌放弃更新前最新版 ...
ESP8266从点灯到遥控小车（三）——组装小车，0代码开发APP控制小车
ESP8266从点灯到APP遥控小车(三)--组装小车,0代码开发APP控制小车文章目录 ESP8266从点灯到APP遥控小车(三)--组装小车,0代码开发APP控制小车所需组件一.小车所需组件 ...
qpython3可视图形界面_PySide——Python图形化界面入门教程(三)
PySide--Python图形化界面入门教程(三) --使用内建新号和槽 --Using Built-In Signals and Slots 上一个教程中,我们学习了如何创建和建立交互widget ...
SpringCloud 入门教程(三)：配置自动刷新
Spring Cloud 入门教程(三): 配置自动刷新之前讲的配置管理, 只有在应用启动时会读取到GIT的内容, 之后只要应用不重启,GIT中文件的修改,应用无法感知, 即使重启Config Se ...
【MATLAB Image Processing Toolbox 入门教程三】快速入门之“在多光谱图像中寻找植被”
[MATLAB Image Processing Toolbox 入门教程三] 本篇摘要一.从多光谱图像文件导入彩色红外通道二.构建近红外光谱散射图三.计算植被系数并显示其定位四.综合实例部分 ...

阿里云IOT入门教程（三）阿里云IOT Studio自建手机App控制Wemos D1 Mini( ESP8266 ）板载灯亮灭