手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)
今天我们将利用机智云的开源APP来生成我们独家定制的手机APP
首先我们打开机智云开发者中心
第一步,我们使用机智云生成APP代码,选择应用配置,填写你想要的APP名字。平台选择Android,添加
第二步,选择应用开发,在选择应用里选择你的应用名字,
Product Secret填写基本信息页面的Product secret,点击生成代码包
稍等一段时间,代码包生成后,点击下载,下载代码包
下载代码包后解压
第一个文件夹我们不用管,打开第二个文件夹
找到AndroidStudio
打开后我们关注红线标准的地方,第一个文件夹是一个AndioidStudio的开发包,第二个是一个Eclipse的开发包。我们使用第一个就可以。
然后还要看一下源码说明,由于APP开发需要大量的专业知识和代码量。在这里我们不做深入研究我们在这里只需要完成两个工作
把APP的图标和颜色换成我们自己想要的图片和颜色。
在APP登录界面让APP记住密码和账号,不需要每次都手动输入。
在这里我们还需要用到AndroidStudio编译环境,我们需要去网上下载androidstudio,
还需要java环境,需要安装配置javaSdk,这部分资料大家自行去网上查找安装
安装完成后,我们开始编译APP之前,我们还要准备一些我们喜欢的图片来作为APP的素材
因为在这里我们不准备深入研究太多的代码,
我们就简单对APP的一些素材做一些替换即可。
准备一些我们喜欢的图片和图标。
打开解压后的代码包。
在代码包的这三个文件夹里有我们需要更换的素材
把这里面的图片替换为我们喜欢的图片,注意替换后的图片分辨率和原来的图片保持一致。
launch.png一般表示启动页面的图
icon.png 一般表示APP图标
还有其他的很多的图标。最简单的办法,打开开源APP去看哪个地方是哪个图片,然后用你想要的图去替换就行,注意尺寸保持一致
可以看一下我替换的图标
图片都设置好之后,我们开始把源码导入AndroidStudio里
然后修改几个地方,然后进行编译成APP
打开AndroidStudio把项目导入AndroidStudio。
选择我们之前解压开的AndroidStudio文件夹导入
等到显示如下信息,会显示导入成功,我之前已经导入了,没有出现问题
如果提示有问题,按照我们打开下载的代码包解压后的文件夹,打开源码说明.pdf,找到第12页,按照这个说明操作
然后我们继续看源码说明
第一,首先机智云的黄底色我们不太喜欢,我们修改为我们自己喜欢的颜色,那么我们到底喜欢什么颜色呢,可能自己也不知道,我们首先去找个配色网站,找到我们喜欢的颜色的代码
选择喜欢的颜色
找到自己喜欢的颜色后,复制16进制颜色代码一般是#16B599 这样的代码,然后去查源码说明,看看在哪里改颜色在源码说明的第18页我们看到这样的信息
我们去找到这个代码所在的位置,改为我们喜欢的颜色并保存
然后我们再去看看哪里能保存我们的登录密码在源码说明的第11页我们看到这样的信息
我们去代码里找这个信息,找到负责登录的控制函数
修改登录信息
在这里我们可以看到几个信息
用户名是由etName.getText().toString()传进来的
密码是由etPsw.getText().toString()传进来的
那这两个参数在哪里呢,这个是后台代码,我们要找到前端页面去看一下登录页面的代码在哪里呢?
我们找onCreate() 函数看一下
可以看到这个后台的前端view界面在layout下activity_gos_user_login
R.layout.activity_gos_user_login我们再去这个页面看一下
前端view界面
在这个页面我们找到两个EditText
一个 android:id="@+id/etPsw"
一个 android:id="@+id/etName"
这就是我们要找的两个文本框,上图中我红框圈出来的两行本来是没有的,是我们新增的
什么意思呢!每个文本框是有一个默认文本属性的,就是不需要输入,直接打开就默认有一个字符串显示的,我们就利用这个属性来记住我们的账号和密码
分别在
android:id="@+id/etName"下面增加一个属性android:text=“你的账号”
android:id="@+id/etPsw"下面增加一个属性android:text=“你的登录密码”
注意一点:这个APP是专门为我们的设备生成的,后台数据库也是独立的,所以用户名和密码都要重新注册,和之前的都不通用
到这里为止,我们的一个简单的修改就完成了
下面我们来生成我们专属的APP
选择构建,build APK(s),等待完成
等到显示上面的信息时,表示构建完成,点击右下角的locate,打开APP的文件夹,就可以看到我们专属的APP了
找到APP
把APP安装到手机上,我们来看一下最终的成品
1.桌面图标已经换成我们想要的图标
2.登录页,也换成了我们的登录页
3.登录界面,自动带出用户名和密码,上面的图标也换成了我们自己的
4.设备列表页面,设备图标也换成了我们自己的
5.个人中心,图标也换成了我们自己的
可以看到,所有页面的背景黄色都变成了我们的淡绿色
图标和图片也换成了我们自己设计的
这样就生成了一个我们专属的APP
最后再来看看我们硬件的最终成品的样子
组装中,把供电部分固定在上壳上,用胶枪固定,外壳上打个洞来接电源,可以看到右下角我引出来了两根线,是用来接在GPIO14和地之间的主要作用是需要更换WIFI的时候重新配网用的,这个功能在默认的代码里已经实现了,我们不用管,如果我们有重新更换WIFI的需求,就把这两根线接出一个按钮,
短按是softAp配网模式,
长按是airlink配网模式
最后的成品,成本不到10元钱,和一元硬币放在一起看一下大小,
主要是继电器模块比较大,芯片其实很小,左边的黑色线是5V供电线,右边的白色线是接出来到下面的NAS的开机按钮上了,经过验证,运行完美稳定。
到这里我们这个小小的物联网项目终于完成了
我们从一个芯片模块,到硬件部分的编码烧录,再到APP的基础修改。
其实到这里我们只用到了12F的GPIO13口,还有6个口都没有使用,完全没有发挥出12F的价值
这6个口可以接很多东西,
比如接IR实现有无人的检测
接光敏模块,实现晚上自动开灯
接其他的各种传感器来实现复杂的智慧物联的功能。
这次我们先写到这里了,有任何问题欢迎留言讨论
宇星Lucas
校验提示文案
flying1861
校验提示文案
养一只二哈
校验提示文案
养一只二哈
校验提示文案
flying1861
校验提示文案
宇星Lucas
校验提示文案