开发者学堂课程【物联网应用开发 IoT Studio训练营: IoT Studio 物联网开发训练营 第二天：一小时搭建云组态】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/910/detail/14409
IoT Studio 物联网开发训练营 第二天：一小时搭建云组态
目录：
一、创建 web 应用
二、组件部分的学习
三、工具栏
四、应用设置
五、移动应用
一、创建 web 应用
首先我们选择本期 IoT Studio 物联网开发者训练营项目，点击本项目，进入项目内部，项目中包括左侧的左边栏，主页、产品、设备、空间和账号。
1.主页：
l 我们在项目概览中看到其中包含的产品、设备、外部应用、移动应用、业务逻辑数据资产和数据任务的数量
l 项目中包括外部应用、移动应用、业务服务、数据资产和数据任务
l 创建产品：创建一个自定义品类产品，选择直连设备点击确认
l 增加属性：查看产品内部，比如定义一个功能（自定义功能），选择属性功能名称输入标识符，选择数据类型，数据范围及单位以读写类型。输入描述，点击确认。将其发布上线
l 添加设备：选择这个设备所关联的产品
l 创建空间：选择区域，输入空间名称，点击下一步属性标识，点击完成
2.应用开发
l 创建应用：点击外部应用，点击新建创建一个空的应用来学习Studio遍历器功能点，点击确定。
l 应用所处的项目是 IoT Studio 物联网开发者训练营，名字应用一。打开器之后可以看到左边栏，左侧的一部分配置，中间的一部分画布，还有右侧的配置功能。
l 左边栏：分为页面，组件，设备绑定管理，应用设置。页面包含页面的导航布局，因为我们的应用可能会包含很多的页面，我们会给这些页面创建语音的菜单。
3.页面配置：
l 设置一个布局，设置完布局之后在右边菜单进行一个 logo 的上传，logo 的重置
l 导航布局：对于应用名称也可以控制，并且配置它的一些颜色以及字体等等，配置完导航布局之后，我们可以对菜单里面的具体内容进行一个配置，正在创建一个页面，点击配置可以上传图片。这就是 logo ，可以对菜单样式进行配置，就是上面的整个页面的一个导航配置，
l 菜单内部的一些配置，可以去配置它内部的页面的映射
4.组件数：
l 组件数是给页面增加一个组件后可以回到这边来看，并且可以去选中或者是在进行一些组件粘贴、剪切、复制、删除以及锁定那些工作，
l 页面还可以进行分辨率的配置，以及作为是否作为首页隐藏布局信息、登录设置等等。
二、组件部分的学习
1.组件样式配置：
l 组件列表提供了基础组件，一些常用组件以及工业或者各种行业内的组件，提供的组件通过名称进行搜索的功能。
l 组件里面分为基础复合、空间、媒体、控制、图表、表单、弹窗容器等等。
l 将鼠标放在这个组件上面，可以看到右侧会进行一个组件功能的提示，以及组件样式的一个展示。
l 我们点击一个组件，在右边的面板上进行组件的样式配置。
2.组件修改：
l 每个组件都有一个组件名称，可以控制图片的可见性，文字内容可以修改
l 中间是我们进行应开发的大舞台，主要包括标尺、参考线，如果舞台的位置有些偏移，可以点击画布居中，而且还可以进行缩放以及自适应
3.搭建智慧供水：
主要是智慧供水的介绍和二次供水的页面
① 智慧供水介绍页面：
智慧供水是智慧水中的重要环节，涉及原水（地下水、地表水）资源管理与输送，饮用水制水工艺技术与管理、城市地下管网的输配送以及科学用水节约用水管理等内容。
其重点是管网的输配水管理与控制，实现供水安全与高效。
l 三部分：页面骨架、文字描述、还有一些图片（供水厂、二次供水厂、消防泵站），还有左下角电子设备系统的展示以及一些文字（实时监控管道的流量、水压、水质）
l 第二部分是二次供水的流程绘制的一个统计：水压和水量的监视以及浴缸是否开始进水，当停水时的调码灯，另外就是一个控制面板。
l 这个应用首先是依次供水，有一个压力检测，之后通过增压泵进行增压。然后送入比较高的楼层住户家中。
l 这边有一个稳压罐，进入楼层住户之前有一个水质检测仪，这边还有一个流量计。
l 这是家里的水龙头，之后水管进入浴室、花洒、浴缸的水龙头。以及接水的浴缸和消防水枪。
l 右边是一个控制面板，用来控制增压泵开启和关闭，与水龙头的开启和关闭。
l 依次供水进入到稳压罐之后经过增压泵去增压，在入户之前经过水质检测，有一个流量计的监控，其中有一个水龙头之后进入浴室，有一个花洒和一个像浴缸水龙头。
l 进行一个压力，这边一个供水压力还有入户压力的监视及浴缸水量的监视。还有整个设备的报警情况。
l 最右边是一个水道进水的监视。
② 搭建应用：
l 新建立一个外部应用，输入智慧供水训练营应用。
l 进入编辑，智慧供水演示里包含两个页面，一个页面重建命名为智慧供水简介，再创建一个空的页面命名为二次供水组态，再进行一些导航布局的配置。
l 首先选择左侧菜单的导航，创建空菜单然后重置点击配置文字默认浅灰色增加主菜单。
l 第二个是二次供水组态，其中智慧供水简介配置的页面是新建的当前应用的智慧供水简介页面，点击确定。
l 二次供水页面配置我们的二次供水组态页面，点击确定，菜单已经配置完成。
l 进行一个页面的开发，这个页面的背景颜色是黑色。
l 可以看到页面简介分为三块，上面的一个简介，中间的一个图文，下面一个图文。
l 智慧供水简介：
先拖一个矩形进行颜色的配置，圆角为8的矩形，复制三块这样的矩形，再添加文字，文字颜色是白色内容为简介。
第二部分是图片，拖拽一个图片，上传图片。第一个图片是供水厂，选择这个图片进行复制粘贴。
下面增加简介说明。
看到图片想点进去看详情所以为二次供水图片配置一个交互动作，在点击这个图片的时候，触发一个动作是打开链接
l 进入第二个页面，首先也是配置页面的背景颜色，涉及到的矩形直接从那边复制
l 首先是设备状态的一个监控矩形，再粘贴过来一个流量供水量的一个监视以及右侧浴缸水量的监控
l 中间部分的流程图，我们占用这样的一个空间然后最右侧增加一个控制面板。
l 进入复合列表，复合列表中我们将它拖到方块下面，配置数据源，数据源选择之前在服务编排已经做好接口，就是关于这些设备的数据统计就是智慧供水的接口
l 文字配置一个数据源
l 首先我们可以看到里面用到很多管道，先拖拽一个管道然后进行一些配置
l 它上面是有阀门、管道进行连接
l 把管道进行横向的拉出，之后把增压泵进行输送
l 右边有一个电磁阀，同样将它旋转90度，连上稳压罐
l 初始状态控制为关，静态数据设为0，它的整体就不会是滴水的一个状态
l 水进入浴室，拖拽管道这边会多一个花洒、淋浴再搞一个浴缸，浴缸需要水龙头的输送，主要设备搭建完毕
l 要加入文字表示是什么含义，那就是我们经常用到的文字组件
首先我们有两个供水压力（供水压力表，住户压力表），增加一些文字去显示压力，这个文字配置我们的数据源
l 供水压力表选择产品，指定设备，选择它的属性——压力，增加一个单位（兆）
l 入户压力也要配置数据源，选择产品
l 稳压罐是有一个压力属性的，去绑定稳压罐的压力
l 如果你选择设备数据源，你就选择设备然后关联产品设备以及设备的属性
l 进行一个集中的管理
l 增加浴缸水量的监控，单位是百分比，浴缸水量配置一个数据源
l 右边首先给它一个题目：浴缸水流检测，加一个指示灯配置一个静态数据源，现在是处于开始的状态，开启使用绿色关闭使用黄色
l 增加一个弹窗，拖拽到画布上，在弹窗里加入我们需要的一些文字，比如：确认要打开吗
l 选择水流头的交互，选择打开弹窗容器
l 绑定设备后进行一个控制
三、工具栏
1.组件树：
能快速定位组件位置
2. 组件报错汇总：
可以查看组件异常信息、快速定位错误组件位置。保证组件输出正常
四、应用设置
页面搭建好之后通过左侧应用设置入口进入应用设置页面，开发者可以在搭建好的的页面进行后期配置，比如访问鉴权，域名绑定等。
1.应用鉴权功能：
l 账号鉴权和 Token 鉴权。配置账号鉴权后访问页面需要输入用户的用户名和登陆密码。配置 Token 鉴权后通过url上面添加 Token 信息方式进行鉴权通常用于搭建的页面嵌入在其他页面中。
l 账号鉴权：点击账号鉴权，点击前往开通来到账号后台完成账号的创建
l 开通运营后台功能填写公司名称，初始管理员信息以及手机号，点击确认会有短信发送该账号的初始密码
l 在账号下添加子管理员，完成管理员信息后回到应用设置地方进行登录页面的配置
l 点击配置登录页面，弹开应用登陆界面的信息，填写界面的名称、logo、页面背景图。
2.域名管理：
给页面配置自定义域名，点击添加选择域名可以访问建好的页面
3.基本信息：
修改应用名称及应用描述，点击保存，在应用列表里看到修改内容
4.发布历史：
点击查看发布历史
五、移动应用
1.移动工作台介绍：
l 移动可视化开发是互联网应用开发提供的一个开发工具，无需写代码，只需在编辑器中拖拽组件到画布上，再配置组件显示样式数据源和动作。
l 移动可视化开发：通过拖拽组件，配置功能开发移动应用的工具
l 搭建产物：HTML5 应用同时支持以 webview 方式集成到小程序中
l 手机兼容性
2.搭建基础：
例：织机监控应用
① 创建应用
l 新建应用名称——测试应用
l 填写数据源配置
② 创建页面
l 选择一个页面的模板，创建空白页面
l 通过左侧列表栏拖出组件
l 通过纺织路详情页面创建，同理，把其它页面创建出来，记得调整页面名字，最后进行数据绑定
③ 导航配置
l 勾选页面底部导航时会自动生成四个页面底部导航，进入页面配置底部导航就可以进行调整
l 进行名字修改
l 状态管理页面放在第一个位置，这时对它进行一个数据的调整
3.搭建进阶：
布局方式：
l 为了实现移动应用多屏幕的能力，移动应用搭建是需要先拖拽弹性分栏组件进行页面的一个分块，再拖拽组件进行配置是移动工作台主要的一个运行方式，这种方式能轻松应对组件移动端的屏幕，布局速度比较快。
l 拖入自由卡片后双击编辑后就可以进入卡片内部进行自由拖拽的搭建。
l 选项卡组件来满足大家对切换显示的需求。
l 重复列表组件可以帮助大家实现数据循环的显示，它的内部使用和自由卡片一样的自由布局。
高阶设备组件介绍：
4.课后作业：
建立一个生产车间管理应用：
上图仅供参考。
