极客工坊

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 8207|回复: 1

【干货】5分钟快速开发APP,远程控制硬件设备【HEKR IOT-KIT】

[复制链接]
发表于 2015-11-20 10:00:59 | 显示全部楼层 |阅读模式
本帖最后由 人无再少年。 于 2015-11-20 17:21 编辑

物联网设备的开发技术链条较长,涉及的技术知识较为广泛。传统单一研究硬件的工程师或者单一研究软件的工程师如果想亲手开发一款物联网设备容易碰到很多细节问题。在开发过程中会踩到许多无谓的坑,浪费许多精力和时间。
因此,一款容易上手的硬件开发板并且配套功能完备的软件云服务能够帮助开发者和创客缩短开发时间,避免许多没必要踩的坑。同时降低了物联网设备开发的门槛。

HEKR IOT-KIT是针对开源硬件Arduino便捷灵活、方便上手、开放性强的特点和WIFI芯片ESP8266高度集成、前期开发时间短、性价比高的特点而推出的一系列物联网开发套件。开发者可以使用HEKR IOT-KIT开发板配合Hekr云端后台,快速完成一款物联网设备原型的开发。


开发HEKR IOT-KIT,即使您是一个软件工程师,没有太多的关于硬件电路的知识,您也可以用IOT中的Arduino快速开发MCU端的程序驱动硬件电路;另一方面,如果您的研究方向偏向于硬件,对APP和前端的开发技术并不是非常了解,您也可以使用HEKR IOT-KIT通过HEKR云服务快速搭建前端页面同时打包成APP,快速实现硬件联网,赋予硬件智慧和灵魂


关于HEKR IOT-KIT硬件部分的使用资料、烧录说明和透传界面的使用在上一节已经具体介绍过。小伙伴们可以通过传送门:http://pan.baidu.com/s/1hqo9p6O获取以上资料。

在这一节中,我们具体介绍了通过DCloud的APP快速打包工具HBuilder,快速把DIY的Hekr-IOT-Kit-Demo H5页面打包成android或iOS的APP安装包。从而实现物联网设备开发者对移动端APP的低门槛快速开发。

1.工具以及资料准备
1:在传送门:http://www.dcloud.io/中下载并且安装APP打包工具HBuilder
2:在传送门:http://pan.baidu.com/s/1qWpGNJe中下载HEKR IOT-KIT V1.0界面DIY资料
3:下载并安装Arduino IDE 1.6.3-Windows及以上版本
4:LED灯 * 1,1K电阻 * 1,杜邦线若干
用LED灯、电阻和杜邦线在HEKR IOT-KIT搭建简单电路(LED灯正极接在pin5),如图所示:
GmLFSrF.png
2.DIY样例说明
1.开发者可以通过LED灯DIY样例进行快速开发,快速实现通过手机APP控制LED灯的点亮和熄灭,并且实现开发者可根据喜好自行修改前端页面,同时能够快速打包APP程序。

2.样例的使用展示了HEKR IOT-KIT联网后的基本信息传输链:
移动端APP<->云端<->HEKR IOT-KIT

3.样例使用流程
1.根据开发资料HEKR IOT-KIT V1.0模式设置及烧录说明.PDF中的流程分别对Arduino和ESP8266进行样例程序烧录。注意:此处Arduino烧录的样例程序路径为:HEKR IOT-KIT V1.0界面DIY资料.zip/HEKR IOT-KIT V1.0界面DIY资料/ArduinoexampleLED.ion

2.将HEKR IOT-KIT上的拨码开关设置成MCU<->WIFI通信模式。

3.根据开发资料
HEKR APP V1.0配置说明.PDF中的流程配置HEKR APP并且绑定HEKR IOT-KIT,让HEKR IOT-KIT连上云端。

4.设备连上云端后,设备的信息就能够在云端查询到了。登录http://app.hekr.me/demo/API/demo.html#

5.依次点击C1-1 LOGIN->C1 CSRF->C1-2 GET Accesskey->C3-1 Connect WS Server->GET DEV LIST->MSG-Filter
注意:点击C1-1 LOGIN后的登录方式应该与手机端APP配置登录方式相同,才能获取到正确的设备ID

6.在紫色窗口栏中提取User Token和tid:ESP2MXXXXXXXXXXX

7.打开HEKR IOT-KIT V1.0界面DIY资料.zip/HEKR IOT-KIT V1.0界面DIY资料/APP下的main.js文件(可用记事本打开),将其中的User Token和tid修改成步骤6中提取的值,并且保存。main.js中修改的部分代码为:

7~L3`)O1(8%6MZ]4@9GZOPA.png

到这里为止,咱们已经搭建好了硬件电路、烧录好了固件程序、HEKR IOT-KIT也已经连上了云端,接下来只剩下打包H5页面和APP程序了。

8.打开HBuilder->文件->新建->移动APP->输入新建的应用名称和应用文件保存地址->点击完成。

9.复制
HEKR IOT-KIT V1.0界面DIY资料.zip/HEKR IOT-KIT V1.0界面DIY资料/APP中的所有文件粘贴到步骤4中新建应用的文件保存目录下。若有重名,替换之。

10.接下来就是要把APP打包到手机了。


  • 针对Andriod手机,笔者将工程打包成APK文件,并且保存到手机进行安装。步骤为:发行->发行为原生安装包->勾选Andriod->点击打包,打包完成后在新建应用文件保存目录下的unpackageelease路径中可找到APK文件,最后将APK文件保存到手机进行安装。这里建议您的安卓系统版本高于4.2,否则可能出现不支持H5界面的现象。
  • 针对iOS手机,笔者进行真机调试。步骤为:下载安装itunes(如果是64位的Windows系统还需要安装iOS连接插件,这个插件是HBuilder的插件,记得安装后要重启HBuilder)->电脑连接iphone允许,真机运行允许,若出现APP提示“未受信任的企业级开发者”,可以参考:http://jingyan.baidu.com/article/fea4511a13c559f7ba91254d.htm

11.这下无论是你的手机系统是Android还是iOS应该都有了HBuilder这个应用了,点击HBuilder应用即可进入如下界面:
a6ny4bf.png

12.通过此界面上你就可以用手机远程控制LED灯的亮与灭。


4.进一步开发
虽然这只是一个简单的LED灯DEMO,但是相信大多数朋友的创客生涯都是从点亮LED灯开始的,参照本文的开发流程和框架,参照样例中的Arduino代码配合Hekr模块透传协议以及开源的前端H5界面,您可以发挥您的想象力对HEKR IOT-KIT进行更多、更复杂、更好玩的开发,比如用手机APP驱动电机和蜂鸣器等等,您也可以根据自己的喜好改变APP的界面和控制功能等。

下面列出部分JS代码的功能,供开发者修改界面功能时参考:
nhSjBUK.png

若您并不满足于此,希望进一步开发HEKR IOT-KIT体验物联网的乐趣,可以在https://github.com/HEKR-Cloud/获取SDK,相信您一定能开发出更多、更好玩的物联网设备。

若您在开发过程中遇到问题或者您希望对HEKR IOT-KIT提出宝贵的意见,您可以扫一扫下方的二维码,加入我们的技术交流群。

ijSijSI.jpg

by zejun.zhao@hekr.me
http://www.hekr.me/
2015/11/19 16:33:39











回复

使用道具 举报

 楼主| 发表于 2015-11-20 16:59:06 | 显示全部楼层
本帖最后由 人无再少年。 于 2015-11-20 17:02 编辑

沙发一波,顺便补充一下可在极客工坊淘宝店获取HEKR IOT-KIT:

https://item.taobao.com/item.htm?spm=a230r.1.14.1.SKaj0k&id=523196928204&ns=1&abbucket=14#detail


回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|联系我们|极客工坊 ( 浙ICP备09023225号 )

GMT+8, 2019-11-14 02:23 , Processed in 0.088194 second(s), 27 queries .

Powered by Discuz! X3.4 Licensed

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表