工业互联网APP开发技术与应用（微课版）项目三 工业互联网App开发平台应用.pptxVIP

徐工汉云技术股份有限公司2023年2月研发设计类应用开发

2学习目标了解研发设计类应用需求掌握数据库数据源制作和使用方式掌握API数据源制作和使用方式掌握控件绑定事件

3CONTENTS目录需求分析1

4PART01需求分析

5应用主要功能包含各省份空气质量实时信息展示、智能提示、趋势曲线、质量报告等，应用根据空气当中的成分给出相关报告以及智能的应对措施，通过鼠标单击对应数据行显示弹窗的形式展现，从App组态画面中可以看到实时的省份实时空气指数，右侧的表格中可以得知每个省份空气成分含量，右下脚展示各省份污染物排放量趋势。需求分析

6小结本任务通过构建研发设计类应用空气质量分析App，巩固了平台控件使用方法，应用中使用到表格控件、中国地图控件、折线面积图控件等，强化了控件绑定数据源技能，从控件数据分析开始到设计控件数据库数据源和API数据源。

感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台

研发设计类应用开发徐工汉云技术股份有限公司2022年2月

9创建App首先创建一个2D的App，单击“新增App”按钮，弹出“新增App”对话框输入相关信息，这里命名为空气质量分析App。应用开发

10构建页面在构建App页面时需要拖拽一个根节点，这里选择“素材”→“默认装饰”分组边框5素材作为App的根节点，设置根节点布局指定宽高为1920*1080，为了后面的编辑方便控制属性中设置不可选中不可移动。应用开发

11构建页面配置好根节点之后开始构建顶部标题部分，顶部标题部分涉及基础控件中的文本控件、网页控件中的日期控件以及素材库默认装饰中的2#标题素材。应用开发

12构建页面右侧中国地图部分构建，在控件选项下找到地图控件类型中的中国地图，设置布局以适应整体效果，这里需要配置中国地图属性和数据源，属性配置需要设置显示地名、开启动画效果。应用开发

13构建页面构建右侧数据表表格部分，需要使用到基础控件中的表格控件。拖拽表格控件预设好大小和布局。应用开发

14构建页面右侧底部污染物排放量趋势曲线图需要使用到图标类控件中的折线面积图，找到对应的控件拖拽到画布中设置好布局。应用开发

15数据源需要配置中国地图属性和数据源，属性配置需要设置显示地名、开启动画效果。显示地名是为了能够显示地图中各省份名称，动画设置当鼠标移入对应的省份区域出现选中效果。应用开发

16开发API数据源中国地图控件配置API数据源，地图的原数据源格式如下，从中国地图控件的静态数据源分析得出控件需要的是一个数组，数组中包含的是一个一个的省份对象，省份对象中包含相关属性例如有省份名称、提示信息等。应用开发[{name:北京,value:572,tipData:[245,264]},{name:天津,value:39,tipData:[893,722]},//省略相同格式数据…]

17开发API数据源根据静态数据源编写满足条件的API数据源，创建实体Province，创建控制器showProvince，创建业务逻辑层类参见教材部分。应用开发@AllArgsConstructor@NoArgsConstructor@DatapublicclassProvince{privateStringname;privateStringvalue;privateString[]tipData;}@GetMapping(/province/1)publicResponseshowProvince1(){returncharService.showProvince1();}

18API测试运行测试，使用接口测试工具例如Postman、Apifox、Swagger等测试工具测试接口返回数据是否满足控件需求。应用开发

19发布打包发布。测试通过之后将项目打包成Jar包运行在公有云服务器中，或者通过集成开发工具IDEA发布功能直接部署到公有云服务器。部署完毕之后使用App开发平台添加相应的API数据源，后台API是每个5秒更新一下数据。应用开发

20配置数据源任务一：平台基础环境建设任务任务二：平台基础环境运维任务（微软雅黑正文、16号、1.5倍行距）应用开发

21数据库数据源表格控件中默认的表头属性数据和静态数据源数据参照教材部分，分析表头数据属性可知displayName属性表示表头信息，例如displayName为城市时对应列的表头就是城市；key属性需要对应静态数分析，key对应静态数据中数据对象键值对key，例如表头为城市的key为column1，静态数据