移动可视化开发是物联网移动App设计工具。无需写代码,只需在编辑器中,拖拽组件到画布上,再配置组件显示样式、数据源和动作,即以可视化开发的方式完成Android和iOS App搭建,并发布到应用市场。适用于开发设备控制App、工业监测App等。

功能特点

  • 简单易用。移动可视化工作台与阿里云物联网平台设备接入能力、物模型能力无缝衔接。无需写代码,您就可以快速搭建设备控制、设备状态展示、数据展示等物联网场景下的移动应用。

  • 无需额外的服务器和数据库。移动应用搭建完毕后,即可构建生成移动应用安装包和工程源代码。

说明 可视化开发适用于定制化功能较少、使用既有移动应用模版即可满足需求的场景。如果开发复杂场景的应用,请使用SDK集成开发方法。

使用案例

  1. 在物联网平台控制台左侧导航栏,单击开发服务 > IoT Studio



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

  3. 项目创建成功后,导入或创建使用该物联网开发项目的产品和设备,并为该产品定义功能(即物模型TSL)。

    • 若您已在物联网平台控制台创建了相应产品,且已为产品定义了物模型,请单击项目概览 > 导入产品。导入产品后,该产品下所有设备均被导入项目中。

    • 若您还未创建相应产品,请选择产品 > 新建产品,创建产品,并为产品定义物模型和创建设备。请参见创建产品新增物模型

    说明 可为一个项目导入或创建多个产品。


  4. 选择移动可视化开发

  5. 填写信息,创建一个移动应用。



    参数 描述
    应用名称 设置应用名称。支持中文汉字、英文大小写字母、数字、部分常用符号:下划线(_),连字符(-),括弧,和空格;必须以中文汉字、英文字母或数字开头;长度不超过40个字符(一个中文汉字算一个字符)。
    所属项目 该应用所属的物联网开发项目。
    描述 描述该应用。长度不超过100字符(一个中文汉字算一个字符)。
  6. 自定义新增页,即编辑应用。

    拖拽左侧的组件到画布上,然后,在页面右侧,配置组件的显示样式、数据来源和要执行的动作。

    以下以创建一个空气质量监控设备面板作为示例。

    说明 Web可视化编辑器暂时不支持自动保存,请随时保存设置。
    1. 设计界面布局,即根据您的业务需要,设计您的应用页面样式,如背景、UI组件位置等。

      您可以自己设计界面样式,也可以使用左侧界面模板下的模板界面。

      使用界面模板:在页面左侧界面模板下选择合适的模板,拖拽模板到中间画布上,再根据您的需要进行调整。



      自定义界面:

      1. 设置界面对齐方式和背景。



      2. 设置页面布局。

        根据业务需要,从左侧组件中,拖拽横向或(和)纵向分栏组件到画布上,然后为各分栏分别设置样式。

        说明 配置过程中,也可以随时增减分栏。


        参数 描述
        组件名称 可为该分栏组件设置名称,以区分分栏。
        可见性 设置该分栏是否显示可见。
        间距 设置该分栏与页面的四个间距。
        宽度 设置该分栏的宽度。
        高度 设置该分栏的高度。
        分栏目数 设置横向或纵向分栏目数。
    2. 配置界面标题。

      拖拽一个文字组件到画布上为标题预留的分栏上,并在右侧配置标题内容和显示样式。



    3. 上传一张界面图片。

      拖拽一个图片组件到画布上的对应分栏中,然后编辑图片显示样式。



    4. 创建一个温度显示组件。

      1. 拖拽一个文字组件到预留分栏中,输入文字内容温度作为温度显示组件标题,并配置显示样式。

      2. 再拖拽一个文字组件到预留分栏中,配置文字内容时,选择配置数据



      3. 配置数据源为产品下某设备的温度属性,然后单击在线模拟。页面跳转到模拟属性推送页。



      4. 使用虚拟真实设备调试。设置一个模拟温度值,单击推送

        说明 如果您还没有为产品定义物模型,请先到物联网平台产品详情页定义物模型。


      5. 模拟推送成功后,回到数据源配置对话框,单击确定。该组件对应的位置将显示为刚才推送的属性值。



      6. 创建一个温度单位的文字组件。

    5. 以相同的方法,配置湿度和PM2.5显示组件。



    6. 配置一个空气监测仪开关状态监控组件。

      1. 拖拽一个文字到画布上预留的分栏上,设置内容为开关标题。

      2. 拖拽一个开关组件到画布上预留的分栏上,并设置显示样式。



      3. 单击配置数据或右上方的数据按钮。

      4. 配置数据源为设备的开关属性,然后单击在线模拟。页面跳转到模拟属性推送页。

      5. 设置模拟推送值,单击推送

      6. 模拟推送成功后,回到数据源配置对话框,单击确定。该开关组件将显示为刚才推送的开关状态。

        本示例操作中,模拟推送了开关的关闭状态。



  7. 单击编辑器页面右上方保存 > 预览,预览应用界面。

  8. 配置功能模块中的可配置项。

    IoT Studio已为您预配置好了三个功能模板:
    • 账号模块:包含登录页、注册页和找回密码页。

    • 首页模块:即应用页面列表页。

    • 我的模块:包含我的(即用户信息页)和关于页(即应用信息页)。

    模版页面的布局、UI元素等均不能修改。每个页面的可修改项展示在右侧操作栏中。



  9. 单击编辑器页面右上方构建按钮,选择要构建Android或iOS系统应用。



  10. 您选择应用构建用途和输入应用信息之后,系统开始构建应用。



  11. 应用构成成功后,您可以通过扫页面上的二维码或单击点击下载下载源码包。

相关文档