开发者学习笔记【阿里云物联网助理工程师认证（ACA）：应用开发组件功能介绍（二）】
课程地址：https://edu.aliyun.com/course/3112060/lesson/18984
应用开发组件功能介绍（二）
三、IoT Studio Web可视化开发
Web可移动开发工作台是物联网应用开发中的工具，进行Web可视化开发时，不需要写代码，只需要在编辑器中将相应的组件拖拽到画布上，再配置组件的显示样式、数据源及交互动作，即可以可视化的方式完成Web应用开发。这种开发方式适用于开发状态监控面板、设备管理后台、设备数据分析报表等，一般是页面类型的应用开发。
1、功能特点
（1）免代码开发
Web可视化工作台可以与物联网平台的设备接入能力和物模型能力无缝衔接，无需写代码就可以调用设备数据、控制设备，或者完成SaaS搭建。
（2）完全托管
无需购买额外的服务器和数据库应用，搭建完后可以直接在平台上进行预览，并且发布到云端直接使用应用，发布之后还支持绑定自己的域名。
（3）模版丰富
Web可视化开发提供了丰富的页面模版，使用现有的页面模版可以有效地简化物联网应用开发过程，提高开发的效率。在应用发布之后仍然可以为应用批量绑定设备。
2、Web可视化开发的成品
图上信息包括背景、时间、名称、相应的功能模块，点击选项就可以控制相应功能的实现，并且获得相应设备的状态。如控制灯的开灭和灯开灭的状态信息，窗帘关闭信息和窗帘开启信息。
3、Web可视化开发页面介绍
Web可视化开发是通过Web应用编辑器实现的，可以使用应用编辑器来搭建基于网页的控制界面，无需写代码，十分方便。接下来，从左、中、右三个部分介绍编辑器。如下图：
（1）左侧导航栏
功能 |
说明 |
|
页面：当前应用所包含的导航布局和应用列表 导航布局： 空白： 顶部栏：页面左上角显示LOGO和Web应用名称。 左导航：页面左侧显示LOGO和导航菜单。 顶部栏和左导航：页面左上角显示LOGO和Web应用名称。左侧显示导航菜单。选择页面布局后，单击配置，开启并配置应用的页面导航菜单栏。 在页面列表选择页面后，可自定义页面名称，新增或删除页面。 |
|
组件。展示Web可视化开发可使用的组件列表，拖拽组件到中间画布上，便可在应用编辑中使用该组件。 |
|
设备绑定管理。在应用绑定设备页，为当前应用中，数据源为设备数据的组件批量绑定设备。 |
|
应用设置。可在此页更新应用名称和描述，开启账号和Token鉴权；查看应用发布历史；管理应用绑定的域名。 |
(2) 画布
即编辑器中间的画布区域，在画布下从左到右支持的操作如下：
①标尺
选中标尺复选框后，可以在画布边缘显示尺寸、刻度，便于查看当前页面的尺寸信息。
②网格
选中网格之后，会出现4px × 4px的栅格点，用于调整组件位置参考。在页面中所有组件的位置都自动按照栅格位置进行吸附和对齐。
③参考线
选中复选框之后，页面会出现红色的参考线帮助调整组件位置。
④适合画布
单击“选项”之后，当前编辑页面会自适应到最佳的展示方式，尽可能完全显示页面中的内容。
⑤缩放
可以拖动滑动条，放大和缩小展示当前页面。
⑥自适应
选中复选框之后，应用页面会根据浏览器的分辨率自动调整显示的尺寸。预览和发布之后，也可以查看页面自适应的结果。
（3）右侧的配置栏
单击已拖拽到画布上的组件，右侧就会显示该组件的配置栏。可以对组件进行如下配置：
①样式
可以配置组件在应用页面的显示效果和组件的数据源。不同组件可以配置不同的数据源，并且支持组件配置多个数据源，数据源包括设备接口、静态数据、数据表资源等。
②交互
即配置交互动作，根据当前组件的事件，如单击、双击、值改变、聚焦、失焦、鼠标移入、移出等，进行相应的交互动作。如单击该组件发起服务端请求；双击该锁件发起数据展示等。
（4）顶部操作栏
即应用编辑器顶部的几个选项。
①项目概览框将鼠标移至
图标上时，可以展开项目的概览框，查看、更新该项目下的应用、产品、设备等；单击“查看所有项目”可进入IoT Studio项目管理页面；单机“查看所有”可以进入当前应用所在的项目的详情页面。该图标右侧显示当前服务名称和所属项目名称。
②已自动保存
展示应用配置的自动保存时间。
③其他
表示撤销上一步操作； 
表示恢复已撤销的操作； 
表示应用编辑过程中或编辑完成之后，可以随时单击此按钮预览当前配置的应用；
表示系统每分钟自动保存配置，也可以单击此按钮手动保存当前配置；
表示单击之后可以将配置完好的应用发布到云端；
主要用于我的工单和创建工单；
用于查看可视化应用的开发帮助文档。
4、Web可视化开发的组件
Web可视化开发具有丰富的组件，可以在Web可视化编辑页面中添加各种组件，配置组件数据源、样式或交互动作来完成应用的多样化设计和功能需求开发。组件承载了Web应用编辑器中的核心功能，提供构成Web应用的基本要素。其分为以下几类：
类型 |
功能 |
常用组件 |
集成常用的组件，方便用户快速调用开发 |
个人开发组件 |
开发者通过组件开发平台开发的个人组件，仅支持开发者可见并使用 |
基础组件 |
包含基础、控制、图表和表单四类组件 |
工业组件 |
包含仪表、滑动条、管道、设备和开关按钮五类组件 |
变配电组件 |
由第三方开发者开发个人组件后，以组件包的方式上传到IoT Studio平台提供给所有开发者使用的组件。IoT Studio目前支持的三方组件是变配电组件 |
四、IoT Studio业务逻辑开发
IoT Studio提供了物联网业务逻辑的开发工具，支持通过编排服务节点的方式快速完成简单的物联网业务逻辑的设计。如下图所示：
首先是数据采集，在采集数据之后做条件判断，如果满足某个条件，将会进行相应的处理。如空气雾霾程度大于某个值即启动空气净化并通过钉钉机器人通知个人；如果不满足条件，则会进行其他的路径选择，如选择空气净化并通知钉钉机器人，也可以直接启用钉钉机器人通知。
通过这种方式则无需写具体的业务逻辑代码，直接通过拖拽的方式让其自动生成相应的业务逻辑代码来快速实现。
1、应用场景
（1）设备联动
假如某个设备的数据达到了某个条件，就启动另外设备进行相应操作。如从传感器采集到了某个数据，当该数据达到某个值时，就启动空气净化设备进行空气净化。
（2）设备数据处理
（3）设备与服务联动
设备采集的数据如果满足某个条件之后，就将某个相应的服务启动运行。
（4）API的生成
可以通过业务逻辑的方式使其自动生成相应的API。
（5）生成APP的后端服务
通过业务逻辑编辑方式快速的生成APP的后端服务。
2、功能特点
（1）简单易用
对于不熟悉服务端开发的用户，它提供了免代码开发物联网服务器的方案，只需简单学习即可；对于高阶用户，它提供了JS脚本、扩展库等高阶能力。
（2）基于阿里云丰富的物联网云服务
可以使用阿里云物联网平台提供的基础服务，阿里云市场的API也可以接入自定义的API来快速完成业务开发需求。
（3）易读易理解，沉淀企业核心业务
这种可视化的流程图，更利于业务人员理解，避免人员交接造成信息丢失。有利于沉淀企业核心业务能力。
（4）快速定位、修复故障
节点之间的依赖项清晰可见，便于快速定位服务问题，快速进行热修复。
（5）云端完全托管服务
IoT Studio提供了云端托管能力，服务开发完成之后可以直接使用，不需要额外购买服务器，并且支持在线调试。
3、业务逻辑开发界面
主要关注左侧的部分功能。如下图：
在左侧，包括了触发的设定、输出的设定、功能、人工智能、API调用、短信息服务功能、信息推送功能、数据操作功能以及查看当前的设备。
