手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

2020-05-11 18:04:02 17点赞 64收藏 3评论

今天我们将利用机智云的开源APP来生成我们独家定制的手机APP

首先我们打开机智云开发者中心

第一步,我们使用机智云生成APP代码,选择应用配置,填写你想要的APP名字。平台选择Android,添加

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

第二步,选择应用开发,在选择应用里选择你的应用名字,

Product Secret填写基本信息页面的Product secret,点击生成代码包

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

稍等一段时间,代码包生成后,点击下载,下载代码包

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

下载代码包后解压

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

第一个文件夹我们不用管,打开第二个文件夹

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

找到AndroidStudio

打开后我们关注红线标准的地方,第一个文件夹是一个AndioidStudio的开发包,第二个是一个Eclipse的开发包。我们使用第一个就可以。

然后还要看一下源码说明,由于APP开发需要大量的专业知识和代码量。在这里我们不做深入研究我们在这里只需要完成两个工作

把APP的图标和颜色换成我们自己想要的图片和颜色。

在APP登录界面让APP记住密码和账号,不需要每次都手动输入。

在这里我们还需要用到AndroidStudio编译环境,我们需要去网上下载androidstudio,

还需要java环境,需要安装配置javaSdk,这部分资料大家自行去网上查找安装

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

安装完成后,我们开始编译APP之前,我们还要准备一些我们喜欢的图片来作为APP的素材
因为在这里我们不准备深入研究太多的代码,

我们就简单对APP的一些素材做一些替换即可。
准备一些我们喜欢的图片和图标。

打开解压后的代码包。

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

在代码包的这三个文件夹里有我们需要更换的素材

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

把这里面的图片替换为我们喜欢的图片,注意替换后的图片分辨率和原来的图片保持一致。

launch.png一般表示启动页面的图

icon.png 一般表示APP图标

还有其他的很多的图标。最简单的办法,打开开源APP去看哪个地方是哪个图片,然后用你想要的图去替换就行,注意尺寸保持一致
可以看一下我替换的图标

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

图片都设置好之后,我们开始把源码导入AndroidStudio里

然后修改几个地方,然后进行编译成APP

打开AndroidStudio把项目导入AndroidStudio。

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

选择我们之前解压开的AndroidStudio文件夹导入

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

等到显示如下信息,会显示导入成功,我之前已经导入了,没有出现问题

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

如果提示有问题,按照我们打开下载的代码包解压后的文件夹,打开源码说明.pdf,找到第12页,按照这个说明操作

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

然后我们继续看源码说明

第一,首先机智云的黄底色我们不太喜欢,我们修改为我们自己喜欢的颜色,那么我们到底喜欢什么颜色呢,可能自己也不知道,我们首先去找个配色网站,找到我们喜欢的颜色的代码

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

选择喜欢的颜色

找到自己喜欢的颜色后,复制16进制颜色代码一般是#16B599 这样的代码,然后去查源码说明,看看在哪里改颜色在源码说明的第18页我们看到这样的信息

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

我们去找到这个代码所在的位置,改为我们喜欢的颜色并保存

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

然后我们再去看看哪里能保存我们的登录密码在源码说明的第11页我们看到这样的信息

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

我们去代码里找这个信息,找到负责登录的控制函数

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

修改登录信息

在这里我们可以看到几个信息

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

用户名是由etName.getText().toString()传进来的

密码是由etPsw.getText().toString()传进来的

那这两个参数在哪里呢,这个是后台代码,我们要找到前端页面去看一下登录页面的代码在哪里呢?

我们找onCreate() 函数看一下

可以看到这个后台的前端view界面在layout下activity_gos_user_login

R.layout.activity_gos_user_login我们再去这个页面看一下

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

前端view界面

在这个页面我们找到两个EditText

一个 android:id="@+id/etPsw"

一个 android:id="@+id/etName"

这就是我们要找的两个文本框,上图中我红框圈出来的两行本来是没有的,是我们新增的

什么意思呢!每个文本框是有一个默认文本属性的,就是不需要输入,直接打开就默认有一个字符串显示的,我们就利用这个属性来记住我们的账号和密码

分别在

android:id="@+id/etName"下面增加一个属性android:text=“你的账号”

android:id="@+id/etPsw"下面增加一个属性android:text=“你的登录密码”

注意一点:这个APP是专门为我们的设备生成的,后台数据库也是独立的,所以用户名和密码都要重新注册,和之前的都不通用

到这里为止,我们的一个简单的修改就完成了

下面我们来生成我们专属的APP

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

选择构建,build APK(s),等待完成

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

等到显示上面的信息时,表示构建完成,点击右下角的locate,打开APP的文件夹,就可以看到我们专属的APP了

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

找到APP

把APP安装到手机上,我们来看一下最终的成品

1.桌面图标已经换成我们想要的图标

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

2.登录页,也换成了我们的登录页

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

3.登录界面,自动带出用户名和密码,上面的图标也换成了我们自己的

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

4.设备列表页面,设备图标也换成了我们自己的

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

5.个人中心,图标也换成了我们自己的

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

可以看到,所有页面的背景黄色都变成了我们的淡绿色

图标和图片也换成了我们自己设计的

这样就生成了一个我们专属的APP

最后再来看看我们硬件的最终成品的样子

组装中,把供电部分固定在上壳上,用胶枪固定,外壳上打个洞来接电源,可以看到右下角我引出来了两根线,是用来接在GPIO14和地之间的主要作用是需要更换WIFI的时候重新配网用的,这个功能在默认的代码里已经实现了,我们不用管,如果我们有重新更换WIFI的需求,就把这两根线接出一个按钮,

短按是softAp配网模式,

长按是airlink配网模式

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

最后的成品,成本不到10元钱,和一元硬币放在一起看一下大小,

主要是继电器模块比较大,芯片其实很小,左边的黑色线是5V供电线,右边的白色线是接出来到下面的NAS的开机按钮上了,经过验证,运行完美稳定。

手把手带你制作WIFI智能开关.走进物联网-ESP8266学习日记(四)

到这里我们这个小小的物联网项目终于完成了

我们从一个芯片模块,到硬件部分的编码烧录,再到APP的基础修改。

其实到这里我们只用到了12F的GPIO13口,还有6个口都没有使用,完全没有发挥出12F的价值

这6个口可以接很多东西,

比如接IR实现有无人的检测

接光敏模块,实现晚上自动开灯

接其他的各种传感器来实现复杂的智慧物联的功能。

这次我们先写到这里了,有任何问题欢迎留言讨论

展开 收起

【官款】适用applewatch高山回环尼龙iwatch表带S8ultra苹果手表S9/8/7/6se代野径户外运动海洋表带41/49mm45

【官款】适用applewatch高山回环尼龙iwatch表带S8ultra苹果手表S9/8/7/6se代野径户外运动海洋表带41/49mm45

10.94元起

星菲扬 适用iwatch苹果手表s9表带秋冬applewatch尼龙编织S8代7/6新款Ultra磁吸se2男高级感iPhonewatch女运动手表带

星菲扬 适用iwatch苹果手表s9表带秋冬applewatch尼龙编织S8代7/6新款Ultra磁吸se2男高级感iPhonewatch女运动手表带

22.9元起

九号(Ninebot)四季可用3C品质头盔电动车半盔 蓝色(滑板车平衡车适用)

九号(Ninebot)四季可用3C品质头盔电动车半盔 蓝色(滑板车平衡车适用)

99元起

HUAWEI 华为 EasyFit 时尚真皮系列华为手表表带适配Watch GT系列商务男女情侣可用watch gt4可用替换

HUAWEI 华为 EasyFit 时尚真皮系列华为手表表带适配Watch GT系列商务男女情侣可用watch gt4可用替换

189元起

gourmandise Apple Watch 兼容 皮革表带 米菲 捉迷

gourmandise Apple Watch 兼容 皮革表带 米菲 捉迷

140.6元起

CHENSONG 臣颂 适用于小米手环8pro表带nfc版8pro腕带真皮皮质八代智能运动替换带8pro原装款男女磁吸反扣

CHENSONG 臣颂 适用于小米手环8pro表带nfc版8pro腕带真皮皮质八代智能运动替换带8pro原装款男女磁吸反扣

13.86元起

适用苹果手表s9表带apple watch8表带iwatch9/7/6/3/4/5代se2运动s8织ultra尼龙男女款40/41mm回环s7彩虹s6

适用苹果手表s9表带apple watch8表带iwatch9/7/6/3/4/5代se2运动s8织ultra尼龙男女款40/41mm回环s7彩虹s6

暂无报价

纯手工 | 阿慕良品真皮45/44mm快拆AppleWatch法羊苹果手表带

纯手工 | 阿慕良品真皮45/44mm快拆AppleWatch法羊苹果手表带

178元起

小鹿电话儿童定位器跟踪防丢器订位防走丢小孩丢失定位仪

小鹿电话儿童定位器跟踪防丢器订位防走丢小孩丢失定位仪

218元起

HUAWEI 华为 手表WATCH GT3保时捷设计限量款蓝宝石玻璃表盘蓝牙通话运动防水心率监测华为GT3保时捷设计

HUAWEI 华为 手表WATCH GT3保时捷设计限量款蓝宝石玻璃表盘蓝牙通话运动防水心率监测华为GT3保时捷设计

4088元起

适用oppowatch4pro手表se真皮表带3pro磁吸扣腕带3/2/1代oppowatch时尚22可替换男女款46/42mm高级感星光

适用oppowatch4pro手表se真皮表带3pro磁吸扣腕带3/2/1代oppowatch时尚22可替换男女款46/42mm高级感星光

12.8元起

适用小米手环8/7/6/5/4腕带3NFC金属米兰磁吸卡扣不锈钢智能手表带四五六代通用真皮男女款运动替换带配件潮

适用小米手环8/7/6/5/4腕带3NFC金属米兰磁吸卡扣不锈钢智能手表带四五六代通用真皮男女款运动替换带配件潮

17.8元起

智能手环腕带双色波纹款适用B4系列手环 魅力紫

智能手环腕带双色波纹款适用B4系列手环 魅力紫

49.9元起

SmartFLY 友善之臂Nanopi NEO3开发板 瑞芯微RK3328 OpenWRT LEDE 2G整机 标配

SmartFLY 友善之臂Nanopi NEO3开发板 瑞芯微RK3328 OpenWRT LEDE 2G整机 标配

269元起

Ninebot 九号 电动自行车LINE FRIENDS合作款夏盔可拆卸头盔儿童款 布朗熊(滑板车平衡车适用)

Ninebot 九号 电动自行车LINE FRIENDS合作款夏盔可拆卸头盔儿童款 布朗熊(滑板车平衡车适用)

179元起

LEFU乐福光之子体脂秤体重秤减肥智能精准体重体重称减肥人体脂称家用电子秤精准高精度耐用

LEFU乐福光之子体脂秤体重秤减肥智能精准体重体重称减肥人体脂称家用电子秤精准高精度耐用

69元起
3评论

  • 精彩
  • 最新
提示信息

取消
确认
评论举报

相关好价推荐
查看更多好价

相关文章推荐

更多精彩文章
更多精彩文章
最新文章 热门文章
64
扫一下,分享更方便,购买更轻松