【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP

   在上一篇《13.阿里云IoT Studio WEB监控界面构建》中,我们介绍了用阿里云IoT Studio(原Link Develop)可视化构建WEB界面程序。本篇文章将介绍用阿里云IoT Studio打造手机端APP。

   和WEB开发类似,可以通过可视化拖拽的方式,方便地将各种图表组件与设备相关的数据源关联,无需编程,即可将物联网平台上接入的设备数据可视化展现。不过支持的组件相对于WEB可视化相对少一些,如下图所示:

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第1张图片

阿里云云端设备创建

操作步骤

1) 登陆物联网平台控制台

2) 创建产品

a.左侧导航栏选择设备管理 > 产品。在产品管理页面,单击创建产品。

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第2张图片

 

b.单击完成

      产品将自动出现在产品列表中

3) 创建属性

a.在创建的产品界面选择功能定义 > 自定义功能>添加功能创建温湿度属性

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第3张图片【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第4张图片

4) 创建设备

a.左侧导航栏选中设备管理 > 设备,进入设备管理页面

b.单击添加设备。选中上一步创建的产品,输入设备名称(DeviceName),设置设备备注名,单击确认

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第5张图片

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第6张图片

c.记录设备证书内容

设备证书包含ProductKey、DeviceName和DeviceSecret。设备证书是设备后续与物联网平台交流的重要凭证,请妥善保管。也可以在设备的设备信息中查询

 

设备连接阿里云

 

 准备材料:YF3300设备套装,YFIOS组态系统,组态KEY,温湿度传感器(妙昕T10FBF

 

官方下载YFIOsManager组态管理软件 下载链接:

 

http://www.yfiot.com/content/downsort?current=1&title=1

 

 设备连接:

 

1) 将组态key插入电脑,将附赠GPRS天线连接好,插入附赠的物联网卡(也可使用自己购买的物联网卡)

 

2) YF3300通过Type-C连入电脑  端口选择USB  然后点击连接

 

设备配置:

 

(1) 在用户设备中新建设备

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第7张图片

注意事项:串口号应选择串口COM2  创建设备名应与云端设备名保持一致(YF3300_TH)其它默认

点击保存项目,保存自定义的组态工程。

 

(2) 在策略列表中新建策略,策略文件选择sys >阿里云MQTT客户端(精简版)

A.服务配置中在相应的地方填入设备三元组,填入产品密钥,服务地址会自动更改,扫描间隔可更改,变化上传可勾选

B.IO配置中勾选与云端IO相同的属性变量以及该设备的通信状态

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第8张图片【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第9张图片

(3)设备上线

(4)单击工具>无线远程通用配置>保存

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第10张图片

(5)部署程序

A.调试>部署YFIOS系统>精简版(上云)

B.调试>部署

C.程序部署完成组态日志输出去区域 打印MQTT Connect OK!!! 代表设备联网成功

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第11张图片

(6) 查看云端设备情况   设备为在线状态温度湿度实时显示

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第12张图片

 

 IotStudio 配置及生成APP

(1) 在物联网平台控制台左侧导航栏,点击开发服务>IotStudio

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第13张图片

(2) 物联网开发页,单击右上角新建项目按钮,然后新建一个项目

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第14张图片

(3)在IotStudio界面单机左侧导航栏 推荐>移动应用开发>新建可视化应用

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第15张图片

 

(4) 关联产品/设备   关联上面步骤创建的 产品/设备 获取温湿度属性

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第16张图片【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第17张图片

 

(5) 单击左侧导航栏  选择移动应用开发 打开刚创建的项目  进入IotStudio界面

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第18张图片

(6) 自定义新增页 ,编辑应用拖拽左侧的组件到画布上,然后,在页面右侧,配置组件的显示样式、数据来源和要执行的动作。

 

(7) 自定义界界面: 温湿度传感器只能上传温度湿度,空气质量删除选中组件 点击删除

 

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第19张图片【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第20张图片

(8)配置温湿度数据

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第21张图片【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第22张图片

(9) 配置自定义界面入口  单机左上角【功能】首页模块>列表页>新增页面入口(右侧)

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第23张图片

 

(10) 配置APP允许注册新账户

    左侧工具栏  APP功能>账号模块 >允许注册

(11) 生成APP

右上角工具栏  构建>Android构建>我只想自己使用>随机生成>下一步

将生成的APP下载到桌面  >安装至手机>注册账号> 安装至手机 

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第24张图片【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第25张图片

 

【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP_第26张图片

想体验阿里云IoT平台的网友,可以单击如下链接https://dev.iot.aliyun.com/sale?source=deveco_partner_yefan

 

你可能感兴趣的:(【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP)