【云驻共创】华为云AppCube实操指导课程
1、AppCube介绍
应用魔方 AppCube(以下简称AppCube)是零代码和低代码应用开发平台,源于华为应用开发和数字化转型的实践,提供了云上无码化、低码化、支持多码化的应用开发模式,屏蔽了技术的复杂性,提升了企业开发的效率。同时提供应用资产的开发标准和微服务框架,助力企业不断沉淀可复制的套件,加速应用的定制,并通过开放的生态,实现套件资产的商业变现。应用魔方顾名思义就如同魔方一样,可以通过任意组合,排列各种模块化元素,创建功能各异的应用。
通过应用魔方 AppCube提供的界面、逻辑、对象等可视化编排工具,以“拖、拉、拽”的方式来快速构建应用,从而实现所见即所得的快速应用开发和构建。
2、产品优势
随着人工智能、物联网、区块链等领域飞速发展,传统行业在向互联网化转型的过程中,对软件技术的要求越来越高,软件实现越来越复杂,软件构建技术难度以指数级增长。AppCube充分考虑开发者和企业用户的痛点,提供高效率、高效能的开发平台。
2.1、降低应用构建门槛
全云化线上开发,零代码/低代码开发模式,多终端适配,所见即所得的大屏构建,图形化业务编排,具备极低的学习成本,让业务人员可直接构建应用,人人都是开发者。
2.2、加速业务敏捷创新
拖拽式页面构建,简单易用的数据建模,灵活可视的服务编排、流程编排、事件编排,丰富的预置资产,积木式搭建应用效率提升10+倍,极大缩短了创新周期。
2.3、保护企业已有投资
全面开放,丰富的集成能力,支持原生容器服务接入,可快速复用并扩展既有资产,保护客户投资,最大化挖掘投资价值。
2.4、沉淀行业知识,快速复制
创新的业务资产沉淀机制,使能专家沉淀行业资产,可快速在多个项目间复用和灵活扩展,解决产品与交付之间的矛盾,快速实现批量复制。
2.5、支撑大型企业级应用构建
完善的应用打包、部署、升级能力,高效的团队协同开发能力,支持多沙箱验证,大幅减少环境部署时间和成本,支撑大型企业级应用构建。
2.6、全面可信,护航企业安全
安全可信的开发环境,可靠的隐私数据保护,严格认证的安全架构,为业务应用安全保驾护航。
3、应用场景
AppCube覆盖了轻应用、行业应用、业务大屏和移动小程序四大开发场景,满足行业客户、合作伙伴、开发者各种需求。
3.1、轻应用构建场景
轻应用一般为轻量级应用,不涉及复杂化的代码,用户零代码(如拖拽组件,简单配置)或者低代码就能轻松完成应用的搭建。为了降低企业用户的应用开发成本,AppCube提供了丰富的轻应用模板,涵盖了办公管理、人事管理、项目管理,以及通用应用等领域多款精品应用模板,用户可基于应用模板快速定制和扩展应用,满足自身业务的个性化诉求。
3.2、 行业应用构建场景
AppCube面向园区、城市、能源、教育、交通等行业,可基于全场景的可视化开发能力、项目级协助共享能力和端到端的工程部署能力,快速搭建行业应用和大型企业级应用,并沉淀复用行业资产,助力行业伙伴加速全场景行业数字化。
3.3、业务大屏场景
业务大屏,即DMAX AI数据可视化大屏,以数据可视技术为核心,以屏幕轻松编排,多屏适配可视为基础,帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化大屏应用,满足项目运营管理,业务监控,风险预警等多种业务场景下的一站式数据实时可视化大屏展示需求。
4、实操指导
4.1、创建对象
下面将从如何新建对象,到定义对象的字段来添加属性,让您快速熟悉数据对象建模的过程。
示例:以新建一个班级Class对象为例介绍如何进行数据对象建模。在班级Class对象,将会添加一个自定义字段班级编号number,并给name(标准字段)和number赋值。
对象的字段 |
|||
对象 |
字段来源 |
字段名称 |
字段数据类型 |
Class |
标准字段,不需要创建 |
name |
文本 |
自定义字段,手动创建 |
number |
班级编号 |
创建自定义数据对象
- 创建班级管理系统App应用。
- 将鼠标放在应用视图下的Model文件夹上,单击 ,选择“对象”。
- 选择“创建新对象”,输入基本信息后单击“添加”。
新建Object
参数名称 |
参数说明 |
标签 |
对象展示名称,例如Class。 |
名称 |
输入标签值后单击该参数的输入框,系统会自动生成对象的名称。例如Class,您可以根据需要修改。 系统会自动增加租户命名空间前缀及“__CST”后缀,作为对象的唯一标识。 |
描述 |
对象的描述信息。 |
全局视图新建对象
应用中导入对象步骤1
应用中导入对象步骤2
后续操作
对象创建完成后,还可以增删改查对象数据,编辑处理多个对象的关系等。
4.2、 初识脚本编辑器
针对业务逻辑比较复杂的场景,AppCube平台提供了脚本(Script)能力,支持用户在线开发TypeScript脚本,完成灵活复杂的业务逻辑。
4.2.1、与服务编排对比
- 脚本是代码化,使用TypeScript开发的,脚本是内聚的,相当于生产积木的,并且脚本可以对这个积木实现批量化处理的复杂场景。
- 服务编排是图形化,组合编排业务,相当于使用积木编排业务的流程(建议不超过20个图元)。
- 参见操作一条SQL查询语句,可以看出脚本更直观代码化,服务编排更流程图形化。
4.2.2、脚本用什么编辑器
AppCube提供一个方便简洁的在线开发IDE,即脚本编辑界面,脚本编辑界面开发体验接近离线的开发工具,具有如下优势:
- 现代化的编辑界面,语法高亮显示。
- 智能提示,智能补全。
- 精确查看定义,代码预览,查找引用。
- 快速在线编译。
- 友好的语法错误提示。
- 可以使用log写日志分析复杂的问题。
脚本编辑界面如图所示,您可以在线编辑、测试、发布脚本。
4.2.3、脚本编辑界面介绍
通过在应用下的文件夹(例如Logic)旁单击加号,选择“脚本”,输入脚本名称后,单击“添加”,或在脚本列表中单击 ,即可进入脚本编辑界面,如图所示。
4.3、 服务编排
4.3.1、服务编排的开发流程
开发服务编排前,您需要了解整个服务编排的开发流程。
4.3.2、如何创建服务编排
- 在应用开发页面,将鼠标放在Logic文件夹上,单击“+”,选择“服务编排”。
- 参照配置参数,单击“添加”。
4.3.3、初识服务编排编辑器
服务编排编辑器页面由上方按钮区域、左侧图元面板区域、中间画布区域和右侧参数配置区域四部分组成。
4.3.4、创建您的第一个服务编排
首先进行业务场景的设计,作为您的第一个的服务编排,设计了根据传入的用户名配置欢迎信息的简单业务场景,下面根据流程图的步骤进行服务编排的开发。
- 创建服务编排,根据如何创建服务编排创建名称和标签为“HelloFlow”的服务编排。
- 配置变量,单击配置区域中的全局上下文,单击“变量”栏右侧中的“+”号按钮,创建变量。
根据上述步骤创建下表中的变量。
变量说明 |
||
变量名 |
类型 |
变量说明 |
userName |
文本 |
传入的用户名 |
message |
文本 |
欢迎信息 |
说明:
单击变量右侧 按钮进行变量设置,可以进行“名称”、“数据类型”、“默认值”、“描述”、“是否为数组”等参数的配置。
在全局上下文中,除了创建基本类型的变量,还可创建“常量”、“公式”、“对象变量”、“系统变量”、“全局常量”。
1、单击 ,配置服务编排的输入输出参数。
配置输入输出参数
2、选择所需图元,将“逻辑”目录或面板区域右侧快捷图元菜单中的“赋值”图元拖拽到画布区域中。
选择赋值图元
配置赋值图元
说明:
上述赋值语句将“"Hello,"”赋值给message变量,并将userName变量拼接到message变量中。赋值语句将从上往下依次执行。
1、连接图元指定逻辑关系,从开始图元连向赋值图元,代表服务编排开始执行后执行赋值图元的赋值语句。
连接图元
2、单击按钮区域的 ,保存服务编排。
3、单击按钮区域的 ,进行服务编排的调试。
继续如下操作
- 单击按钮区域的 ,启用服务编排。
- 管理服务编排,根据如何定义API接口将启用的服务编排绑定到自定义的API上,并单击 查看API,进行API的测试。
4.4、 前端开发-标准页面
4.4.1、初识标准页面
将光标放在应用目录上之后,应用目录右侧会出现“+”,单击“+”,选择“标准页面”,设置页面标签和名称,即可创建一个全新空白的标准页面,页面创建后,自动进入标准页面开发界面,您可以阅读以下内容初步了解标准页面。
标准页面开发界面由四部分组成,分别是:左侧组件区域、上方按钮区域、中间工作区域和右侧可配置页面元素区域,具体功能说明如下表所示。
4.4.2、基本组件分类说明
组件包括平台预置基本组件、用户自定义的扩展组件,基本组件具体说明所示。若需要了解每个基本组件的详细使用说明,请将鼠标悬浮在基本组件上,基本组件右上会出现问号图标 ,单击该图标会出现该基本组件的使用说明。
4.4.3、快速开始
在进行标准页面设计前,您需要对开发界面进行全面的了解。
- 将光标放在应用目录上之后,应用目录右侧会出现“+”,单击“+”,选择“标准页面”,设置页面标签和名称,即可创建一个全新空白的标准页面,页面创建后,自动进入标准页面开发界面,
- 标准页面中预置了多种组件,可以直接从左侧“组件”区域,将这些组件拖拽到中间“设计视图”上。
标准页面编辑界面(UI Builder)
- 在配置使用组件前,您可以将光标放在每个组件上后,组件右上角将显示帮助信息的问号图标,单击问号图标,即可进入该组件介绍页面。
- 在“设计视图”中,选中一个页面组件,可在右侧“属性”页签,设置该组件的绑定数据、样式等属性,如图所示。在设计视图中选中一个文本框,可以在右侧修改这个文本框的标签名、样式、绑定的数据模型等。
- 在“设计视图”中,选中任意组件,可以在右侧“事件”页签,设置组件的关联事件。例如,选择一个“按钮”,然后在按钮的“点击”事件中,添加相应的事件代码,实现在单击按钮后将界面输入保存到数据库中。
- 利用组件导航,快速选中组件。
当选中某个组件时,页面上方会在组件导航上显示它的html标签层级。
因此,在组件数量比较多,位置较为紧密时,您可以直接单击标签层级,快速选择组件,也可以快速切换组件。例如,在上图的组件导航中单击“页面”,可以直接选中页面上的最外层页面组件。
- 利用组件树,快速选中组件。
在组件数量比较多,位置较为紧密时,您也单击页面右下角的“组件树”,展开组件树,在组件树中,直接单击标签层级,快速选择组件,也可以快速切换组件。
利用组件树快速选中组件
4.5、前端开发-高级页面
高级页面开发工作台
1、组件分类列表:
包含高级组件的功能分类,用于在开发高级页面时对组件进行筛选,方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等,可选择相应的分类来筛选高级组件。
2、高级组件展示、选择区域:
选定组件分类后,属于该功能分类的组件将显示在该区域。在该区域中又包含了多种筛选条件,包含搜索框、应用场景、预置和自定义,详细信息如下所述:
搜索框:可通过组件名称快速查询归属于当前选定组件分类中的高级组件。
应用场景筛选:可快速筛选不同应用场景的高级组件,当前应用场景包含:通用、智慧园区、5G消息、其他。
预置和自定义筛选:用于筛选当前选定组件分类中平台预置组件和用户自定义组件。
定位到所需组件后,您便可以将其拖动到画布中,用于构建您所需的高级页面,操作方法如下图所示:
拖拽组件示例
在画布中,您可以通过拖拽的方式调整组件的位置、大小。其次,平台提供了组件对齐提示线帮助您布局组件,操作方法如下图所示:
如上图中所示,在执行操作前请确保您已获取当前页面的页面锁,未获取页面锁的状态下执行的所有操作都不能保存。如下图所示,已获取页面锁的页面会有绿色的锁标识。
当“页面设置”页面处于锁定状态下时,当前应用中其他页面均无法获取页面锁,如若需进行页面开发,需先释放“页面设置”页面锁。
组件的右键设置:在画布中选中组件,单击鼠标右键会弹出删除、复制、粘贴(若已复制组件)、格式刷、置于顶层、置于底层、高级设置选项。
右键设置功能说明 |
|
功能选项 |
功能描述 |
删除 |
用于删除当前选中的高级组件,也可通过键盘中BackSpace键(退格键)和Delete键(删除键)实现。 |
复制 |
用于复制当前选中的高级组件,也可通过快捷键Ctrl+C实现。 |
粘贴 |
用于粘贴已复制的高级组件,也可通过快捷键Ctrl+V实现。 |
格式刷 |
用于复制当前选中组件的属性以应用于其他组件,可选的属性包含:样式(边框、背景);位置(距左、距上、高度、宽度);其他属性。选定所需格式刷内容后,光标会变成刷子样式,单击所需格式刷组件即可。 格式刷操作示例 |
置于底层、置于顶层 |
用于设置当前选中高级组件的堆叠顺序,即CSS中的z-index属性。 仅绝对布局类型的高级页面中存在该设置选项。 |
高级设置 |
用于设置当前组件的样式属性,全局高级组件详细设置信息请查阅全局高级组件。 |
- 组件属性设置:未选中画布中任何组件时,此模块显示内容为“当前视图组件列表”即当前页面中所布局的组件列表,您可以通过选择画布中或列表中的组件切换到该组件的“组件属性设置”栏,进行当前选中组件的属性设置,数据设置,事件绑定,路由设置。
5、精品行业应用
5.1、智慧城市/园区IOC
AppCube结合数字冰雹图观三维场景编辑器,快速搭建三维IOC应用
面向政府职能部门大屏可视化环境,支持整合城市各部门现有信息系统的数据资源,覆盖各业务领域,凭借先进的人机交互方式,可广泛应用于监测指挥、分析研判、展示汇报等场景。
可实现:
- 城市运行态势监测
- 经济建设态势监测
- 政治建设态势监测
- 文化建设态势监测
典型案例:苏州工业园区、中山智慧城市,重庆智慧城市、重庆智慧公园、广州某医院智慧园区、某市交通可视化等
5.2、工业数字孪生
AppCube结合数字冰雹图观三维场景编辑器,快速搭建工业数字孪生应用。
支持融合工业大数据、物联网、人工智能等各类信息技术,整合厂区现有信息系统的数据资源,有效提高厂区综合监管能力、降低厂区运营成本,实现管理精细化、决策科学化和服务高效化。
可实现:
- 数字孪生工厂
- 智能管网监测
- 便捷通行监测
- 生产管理监测
- ... ...
典型案例:电网管控/保电系统、智能生产数字孪生、发动机数字孪生、钢材生产线控制、风电生产监控、某航天车间监控等
5.3、融合指挥
AppCube结合数字冰雹图观三维场景编辑器,快速搭建3D大屏应用
面向公安指挥中心大屏环境,支持整合公安现有信息系统的数据资源,覆盖公安各业务领域,实现情报融合、情报显示、情报分析、情报监测、情报指挥等多种功能,可广泛应用于态势监测、应急指挥、分析研判、展示汇报等场景
可实现:
- 综合态势监测
- 治安态势监测
- 重大活动保障
- 基础设施监测
典型案例:某市公安局情指大屏、公安安保决策系统、交警指挥中心、某市应急管理可视化、危化品安全监管平台等。
6、小结
华为AppCube集成了强大的云服务和行业资产能力,提供华为云IaaS、IoT、AI、大数据等13类云服务,同时具备强大的开放能力,支持合作伙伴、企业开发者共建行业资产,扩大版图。AppCube作为开发工具,未来将持续聚焦低代码前沿技术,加强产业生态合作,不断探索更多创新场景应用,加速中国企业数字化转型进程。
本文参与华为云社区【内容共创】活动第20期。
https://bbs.huaweicloud.com/blogs/374925
任务21:华为云AppCube实操指导课程
- 点赞
- 收藏
- 关注作者
评论(0)