发 帖  
原厂入驻New
申请华秋企业认证 多层板首单免费打样!
30s提交资料,10分钟通过审核(免费赔付+顺丰包邮)>>立即报名

[经验] APP控制MiCOKit开发实例V1.0分享!

2019-9-20 03:54:45  218 MICOkit APP
分享
0
1.        概述
本文档会逐步引导您,快速开发一个简单的APP应用,控制MiCOKit开发套件(MiCOKit-3288或MiCOKit-3165)。
2.        准备工作
(1)请至http://www.apicloud.com/dev,下载并安装APICloud IDE开发环境,支持Windows系统。
(2)请至mico.io的MiCOKit SDK发布中心,下载最新SDK_MiCOKit_v2.2.0.6(含APP控制Demo)。
2.1.        注册并登录APICloud
首先,注册并登录APICloud主页,如下图,进入控制台页面。

点击下图,左上角“创建应用”。

如下图:选择“Native”,填写“名称”及“说明”,应用创建完成。


2.2.        登录IDE
用以上注册的APICloud账号登录IDE。

2.3.        同步项目
1)        登录后,左侧选择“云端资源库”,根据APICloud 创建的应用ID 选择SVN 项目。
2)        选择项目,右键“检出为”。

3)        点击“完成”,应用创建完成。


2.4.        固件烧录
三个APP对应的MiCOKit固件工程分别为:

2.5.        应用包结构

“config.xml”和 “index.html”必须包含,其它均为可选。“config.xml”是配置文件,“index.html”是启动页面,“icon”为图标文件目录,“launch”为启动图片目录(更多介绍详见Widget包结构说明文档)。

3.        项目移植
3.1.        代码移植
打开SDK_MiCOKit_V2.2.0.6_Beta,找到对应的APP文件,

将相应文件夹中的所有文件,直接覆盖到CtrlRGBLED工程下 用户本地的文件,覆盖后如下图:
   

修改配置参数,打开config.xml文件,如下图:

将源码中的debug的value设置为false,如下图。

提交到云端。



3.2.        应用设置
打开APICloud 控制台页面,找到之前创建的应用,如下图。

点击应用

修改图标和启动页

                                                    图标

                                                  启动页
3.3.        添加模块
打开SDK_MiCOKit_V2.2.0.6_Beta,找到对应的APP的模块文件,如下图:APICloud_moduleV1.0.1.

请按照以下序号顺序进行上传自定义模块,如下图:已上传micoMdns 压缩包。

说明:填写模块名称,概要,版本,点击上传(包含android和iOS版本的模块一起上传),模块名和文件名一致,版本为0.0.1。
上传成功后,点击加号,添加此模块:

模块添加成功后界面如下图(注意:以下三个模块都需要添加:1. micoBind,2.micoMdns, 3.micoMqtt2)
其中,mam和push是默认存在的。

3.4.        语音识别模块
其中,APICloud_RGB_Humiture的APICloud设置时,需要在“模块列表”中搜索“SpeechRecognizer”,添加进来,才可支持语音识别功能哦!
“SpeechRecognizer”的添加示意图如下:

3.5.        云编译
打开APICloud页面-控制台,点击左侧“云编译”,如下图。参数设置:修改APP名称,选择APP安装的平台,可以iOS和Android一起选择。因为没有证书,所以只能选择测试版本,其他默认,点击云编译。

3.6.        生成APP
等40-50秒后会生成两个二维码,如下图:

至此你完成了第一步,项目被你成功移植过来了。
3.7.        扫描APP二维码,安装APP
根据不同的手机系统,扫描3.5生成的APP二维码,即可下载,安装(下载安装方法可参考MiCO总动员APP使用)。
3.8.        APP控制设备
APP安装后,三个Demo的APP图标显示如下:

1. MiCO控制RGB
   
2. MiCO温湿度
   

3. APP控制MiCOKit综合版
   

4.        项目解析
此项目中文件的作用:
1、        css,控制页面的样式,配合html文件中的HTML代码来显示
2、        html,页面的布局
3、        image,页面需要显示的图片
4、        script,业务逻辑

其中:css和image文件不做赘述,重点介绍下HTML和script。
4.1.        设备列表
1)devlist.html为设备列表界面,getdevlist()方法是获取设备列表以及将列表转成页面显示的元素,具体的接口是getDevList,返回的是json,如果需要自己设计列表界面,请参考showDev方法来解析json。
$mico.getDevList(userToken, function(ret, err, devinfocb))
这里传入的usertoken可以通过以下方法获取,前提是用户已经登录成功,关于用户注册部分可以使用默认的,或者参考mico.io。
var userToken = getUserInfo().get("userToken");
2)点击设备列表里的某一个设备后,会调用torgbctrl()跳转到新的页面(rgbctrl.html),跳转时候将deviceid和devicename一起传递过去,
pageParam : {
                "deviceid" : id,
                "devicename" : name
}

4.2.        控制设备
1)        获取之前传递过来的参数:
a)        获取deviceid:api.pageParam.deviceid;

b)        获取devicename:api.pageParam.devicename;
2)        打开页面时候判断deviceid不为空,则自动去连接mqtt:ez_connect(device_id)
3)        连接mqtt
a)        api.require("micoMqtt2");先引用此模块,
b)        传递host、clientID和topic三个参数用于打开mqtt。
Host固定,clientID(需要按照此标准来定义:v1-app-[MAC]        版本号-app-手机MAC(12位)),topic默认只监听device_id + '/out/#'的通道。
4)        控制RGB灯
a)        function publishcmd(topic, command)方法用于发送控制设备的指令
注:只要包含api.require()的代码,基本都是引用的native的模块。
如果您完成到此步骤,那么恭喜您通关啦!
最简单的物联网设备已经被您开发出来了!
没有完成也不要灰心,仔细参照本文检查之前的步骤,如果还有问题,请移步至MiCO社区http://mico.io
Good Luck!

5.        版本更新说明
ke3978 2019-9-20 09:07:27
第一次接触mico 感觉叼叼的。那个操作系统是开源的吗?
回复

举报

szj0213 2019-9-20 09:19:38
谢谢分享....
回复

举报

l111111 2019-9-20 09:28:18
是的,免费开源~
回复

举报

JSDGS 2019-9-20 09:42:11
谢谢分享。
回复

举报

只有小组成员才能发言,加入小组>>

71个成员聚集在这个小组

加入小组

创建小组步骤

关闭

站长推荐 上一条 /6 下一条

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