一、AppCube X WeLink
1.AppCube介绍
应用魔方AppCube:是零代码和低代码应用开发平台,源于华为应用开发和数字化转型的实践,提供了云上无码化、低码化、支持多码化的应用开发模式,屏蔽了技术的复杂性,提升了企业开发的效率。同时提供应用资产的开发标准和微服务框架,助力企业不断沉淀可复制的套件,加速应用的定制,并通过开放的生态,实现套件资产的商业变现。应用魔方顾名思义就如同魔方一样,可以通过任意组合,排列各种模块化元素,创建功能各异的应用。
通过应用魔方AppCube提供的界面、逻辑、对象等可视化编排工具,以“拖、拉、拽”的方式来快速构建应用,从而实现所见即所得的快速应用开发和构建。
2.WeLink介绍
WeLink:是企业数字化转型的联接器,源自华为19万员工的数字化办公实践,支持iOS、Android、Windows、MACOS四大平台,融合即时通讯、企业邮箱、视频会议、音视频通话、直播、云笔记、云空间、企业OA、考勤打卡、待办审批等服务,打造新一代智能工作平台、远程办公平台、移动办公平台、协同办公软件,高效连接企业的团队、业务、知识、设备,助力企业数字化转型,提升企业办公效率,降低运营成本。
二、AppCube
1.AppCube的配置
应用魔方AppCube相关链接:https://www.huaweicloud.com/product/appcube.html
1.1 配置流程步骤
1、来到应用魔方AppCube界面,选择立即使用
2、进入应用魔方AppCube控制台,点击免费试用
3、弹出免费开通AppCube实例窗口,点击免费开通
4、在AppCube控制台单击“进入开发环境”,即可进入AppCube开发环境。
5、开发环境如下,自此AppCube申请完毕
1.2 轻应用搭建
1、来到应用魔方AppCube主界面→项目→轻应用
2、选择出差应用
3、首次访问需要填写命名空间
3、创建出差应用
4、创建成功后出现如下界面就代表应用创建成功
2.AppCube的结构说明
Logic:用于存放业务中的后台逻辑,例如服务编排、脚本等。业务功能复杂时,需要创建后台逻辑完成。
Model:用于存放数据对象。数据对象相当于数据库中的一张表,根据业务功能不同,您可以在应用中创建各种数据对象,用来存储业务数据。
Page:用于存放前端页面。
Internal dependencies:存放内部依赖文件,例如BO、原生服务。
External dependencies:存放导入的外部依赖文件,例如BO、原生服务,单击“+”可以添加BO或原生服务。
2.1 Logic
1、Logic中的服务编排界面
双击任何一个节点都会出现右边弹框(任务、上下文、类型配置)。
比如:双击创建申请记录图解如下:
任务
标签、名称。名称是固定的无法修改
上下文
变量、常量、对象变量、系统变量、全局常量。这些变量都可以被脚本引用,对象变量对应Model用于存放数据对象
类型配置
这个节点是调用脚本所以会多出任务配置,其他节点相关配置是不同的
2、Logic中的脚本
import * as db from 'db';//数据库 import * as context from 'context';//上下文 //输入参数 @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'Object', required: true, label: 'object' }) busiTripData: object; } //输出参数 @action.object({ type: "param" }) export class ActionOutput { @action.param({ type: 'String' }) id: string; } //调用脚本执行函数 @useObject(['N1144200306__businessTrip__CST'])//对象变量对应的model @action.object({ type: "method" }) export class CreateBusiTrip { //输入输出参数 @action.method({ input: 'ActionInput', output: 'ActionOutput' }) //脚本运行函数 public run(input: ActionInput): ActionOutput { //创建输入参数实例对象 let out = new ActionOutput(); //创建错误类对象 let error = new Error(); try { let busiTripData = input.busiTripData; let s = db.object('N1144200306__businessTrip__CST'); //判断流程id是否存在,存在则更新,不存在则创建 if (busiTripData['id']) { let condition = { "conjunction": "AND", "conditions": [{ "field": "id", "operator": "eq", "value": busiTripData['id'] }] }; s.updateByCondition(condition, busiTripData); } else { const userId = context.getUserId(); busiTripData['N1144200306__Applicant__CST'] = userId; let id = s.insert(busiTripData); if (id) { out.id = id; } else { error.name = "CREATE_BUSI_TRIP_ERROR"; error.message = "申请出差失败!"; throw error; } } } catch (err) { console.error(err.name, err.message); context.setError(err.name, err.message); } return out; } }
以上脚本是创建出差流程逻辑代码,还有两个查询流程脚本就不多说懂JS都能看懂
2.2 Model
Model相当于数据库对应模型类
分为5个部分
基本信息(标签、名称)
标准字段(系统自带标准字段)
自定义字段(自己扩展字段)
段验证规则(字段校验规则)
内嵌触发器(字段改变的触发器)
布局
主要是负责页面数据接收和处理
2.3 Page
前端页面主要有如下功能
1、界面布局(拖拉拽)
点击相应组件就可以设置
属性(样式)
事件(button按钮触发脚本)
库
2、属性
属性模块最主要的功能是数据绑定,点击设置按钮选择对应模型字段就可以进行数据绑定了。
3、事件
添加事件,选择一个事件(弹框,设置模型实例数据等等),保存就行了。
4、库
可以增加第三方依赖,比如element-ui第三方组件库
完成好的界面在流程里触发就好
3.运行应用
3.1 前台页面提交数据
可以在网页中直接打开,也可以部署在welink和微信小程序上。
输入数据进行提交
3.2 后台管理查看数据
1、点击查看应用
2、查看提交申请数据
这样就完成一个轻应用流程在网页中部署