【愚公系列】华为云轻应用之手把手教你用搭一个WeLink上的出差应用丨【AppCube X WeLink双剑合璧】(1)

简介: 【愚公系列】华为云轻应用之手把手教你用搭一个WeLink上的出差应用丨【AppCube X WeLink双剑合璧】(1)

一、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

image.png


1.1 配置流程步骤

1、来到应用魔方AppCube界面,选择立即使用

image.png

2、进入应用魔方AppCube控制台,点击免费试用

image.png

3、弹出免费开通AppCube实例窗口,点击免费开通

image.png


4、在AppCube控制台单击“进入开发环境”,即可进入AppCube开发环境。


image.png

5、开发环境如下,自此AppCube申请完毕

image.png


1.2 轻应用搭建

1、来到应用魔方AppCube主界面→项目→轻应用

image.png

2、选择出差应用

image.png

3、首次访问需要填写命名空间

image.png


3、创建出差应用

image.png

image.png

4、创建成功后出现如下界面就代表应用创建成功

image.png


2.AppCube的结构说明

image.png


Logic:用于存放业务中的后台逻辑,例如服务编排、脚本等。业务功能复杂时,需要创建后台逻辑完成。

Model:用于存放数据对象。数据对象相当于数据库中的一张表,根据业务功能不同,您可以在应用中创建各种数据对象,用来存储业务数据。

Page:用于存放前端页面。

Internal dependencies:存放内部依赖文件,例如BO、原生服务。

External dependencies:存放导入的外部依赖文件,例如BO、原生服务,单击“+”可以添加BO或原生服务。

2.1 Logic

1、Logic中的服务编排界面

image.png

双击任何一个节点都会出现右边弹框(任务、上下文、类型配置)。


比如:双击创建申请记录图解如下:


任务

标签、名称。名称是固定的无法修改

image.png


上下文

变量、常量、对象变量、系统变量、全局常量。这些变量都可以被脚本引用,对象变量对应Model用于存放数据对象

image.png


类型配置

这个节点是调用脚本所以会多出任务配置,其他节点相关配置是不同的

image.png

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个部分


基本信息(标签、名称)

标准字段(系统自带标准字段)

自定义字段(自己扩展字段)

段验证规则(字段校验规则)

内嵌触发器(字段改变的触发器)

布局

image.png


主要是负责页面数据接收和处理


2.3 Page

前端页面主要有如下功能


1、界面布局(拖拉拽)

image.png


点击相应组件就可以设置


属性(样式)

事件(button按钮触发脚本)

2、属性

属性模块最主要的功能是数据绑定,点击设置按钮选择对应模型字段就可以进行数据绑定了。

image.png

3、事件

添加事件,选择一个事件(弹框,设置模型实例数据等等),保存就行了。

image.png

4、库

可以增加第三方依赖,比如element-ui第三方组件库

image.png


完成好的界面在流程里触发就好


3.运行应用

3.1 前台页面提交数据

可以在网页中直接打开,也可以部署在welink和微信小程序上。

image.png

输入数据进行提交

image.png


3.2 后台管理查看数据

1、点击查看应用

image.png

2、查看提交申请数据

image.png

这样就完成一个轻应用流程在网页中部署

相关文章
|
弹性计算 安全 关系型数据库
华为云从入门到实战 | AI云开发ModelArts入门与WAF应用与部署
以找云宝为物体检测项目为例,介绍ModelArts模型的训练过程、安全渗透测试环境DVWA的部署过程,为WAF的部署应用提供测试平台
320 0
华为云从入门到实战 | AI云开发ModelArts入门与WAF应用与部署
|
弹性计算 安全 应用服务中间件
华为云从入门到实战 | 云服务概述与华为云搭建Web应用
云计算在快速发展过程中逐渐形成了不同的服务模式(Service Model)。根据云计算最终服务的交付形态主要分为3种类型,软件即服务、平台即服务与基础架构即服务。从根源上来说,云计算的服务模式来源于面向服务的架构SOA(Service-Oriented Architecture)。所谓SOA,就是一种架构设计模式,其核心是一切以服务为中心,不同的应用之间通信协议都以某种服务的方式定义和完成。在云中部署应用和服务的微服务架构其本质也是由SOA演变而来。
464 0
华为云从入门到实战 | 云服务概述与华为云搭建Web应用
|
开发者
【愚公系列】华为云轻应用之手把手教你用搭一个WeLink上的出差应用丨【AppCube X WeLink双剑合璧】(2)
【愚公系列】华为云轻应用之手把手教你用搭一个WeLink上的出差应用丨【AppCube X WeLink双剑合璧】(2)
353 0
【愚公系列】华为云轻应用之手把手教你用搭一个WeLink上的出差应用丨【AppCube X WeLink双剑合璧】(2)
|
6月前
|
存储 NoSQL Redis
Redis+SpringBoot企业版集群实战------【华为云版】(上)
Redis+SpringBoot企业版集群实战------【华为云版】
106 0
|
存储 弹性计算 容灾
华为云从入门到实战 | 云关系数据库备份、恢复及存储容灾服务
主要介绍华为云数据库RDS的备份与恢复部署过程以及SDRS的创建部署过程。
541 0
华为云从入门到实战 | 云关系数据库备份、恢复及存储容灾服务
|
6月前
|
存储 JSON NoSQL
Redis+SpringBoot企业版集群实战------【华为云版】(下)
Redis+SpringBoot企业版集群实战------【华为云版】
106 1
|
6月前
|
NoSQL Redis 数据安全/隐私保护
Redis+SpringBoot企业版集群实战------【华为云版】(中)
Redis+SpringBoot企业版集群实战------【华为云版】
138 1
|
应用服务中间件 nginx Docker
华为云之SWR容器镜像服务实战
华为云之SWR容器镜像服务实战
705 1
华为云之SWR容器镜像服务实战
|
弹性计算 安全 关系型数据库
华为云之使用ECS弹性云服务器部署wordpress网站实战
华为云之使用ECS弹性云服务器部署wordpress网站实战
357 0
华为云之使用ECS弹性云服务器部署wordpress网站实战
|
安全 Linux
华为云从入门到实战 | 云速建站服务与企业主机安全服务
在网站成功开通后,需要为网站增加内容,例如商品信息、支付方式等,开启企业主机安全服务时,需为指定的主机分配一个配额,并确保已在所选区域购买了充足可用的配额。本节主要介绍企业主机安全服务的开启与配置相关过程,录入商品信息、设置配送方式和对接微信、支付宝等支付方式的网站后台的简要操作。
227 0
华为云从入门到实战 | 云速建站服务与企业主机安全服务

热门文章

最新文章