手把手创建一款出差审批应用程序【AppCude x WeLink双剑合璧】

龙哥手记 发表于 2022/03/22 11:15:58 2022/03/22
【摘要】 活动作品

【摘要】通过本文学习,您可以初步了解AppCube开发平台中,如何通过创建轻应用,使用BPM调用关系页面呈现形式,由浅入深逐步掌握,以及如何在AppCube上将轻应用一步一步开发出来。

前提条件

学习或创建之前,您需要先注册华为云账号,并进行实名认证,然后开通AppCube云服务,或许你是第一次开通AppCube服务不知道是啥,没有关系可以参考我之前的一篇https://bbs.huaweicloud.com/blogs/336565;
如果你想更加详细操作请参见免费试用https://support.huaweicloud.com/qs-appcube/appcube_02_0109.html或购买商用租户https://support.huaweicloud.com/qs-appcube/appcube_02_0301.html,官方最近搞活动优惠多多。

  • 适合谁:学生、职业开发者、产品经理、运营人员。

场景说下

本文主要针对员工出差场景而诞生:因为几乎每个公司的员工出差前都需要提交一个出差申请审批的流程,只不过很繁琐又麻烦,原因就是没有进行个性电子化,所以咱们应用魔方来解决下。当然如果情况不妙员工提交出差申请后,主管处理审批或者可以拒绝提交人申请。

本文中出差应用会包含下面基本功能

  • 1 基于模板创建出差电子流。
  • 2 发送邮件。

🎯 整体开发流程

一 准备下工作

3
沿着上述开发流程,您将跟着我步骤详细了解到AppCube平台的对应强大能力,在必要时候我还会更多的来进行解释;

但是需要你提前搞懂这几个名词哈

  • 1 通常在华为云网站,注册并实名认证的账号,我们叫他租户,一个租户账号下可以创建多个子账号,也就是IAM用户。

  • 2 创建业务子账号是为了实现添加应用不同角色的业务用户,本实例应用中它有两种角色业务用户:一个是主管、一个是员工。

  • 3 如果只是租户账号可以创建子账号,子账号添加成功后,仅租户账号需要以IAM用户方式登录后开发环境,这样才能在AppCube开发环境同步子账号。

增加子账号前,需要你先完成实名认证,才能新增子账号,企业认证和个人认证均支持新增子账号,本实例中建议你使用个人认证;那如果您已完成企业认证,直接进行添加子账号操作就可以啦。

你可能不知道咋创建IAM账户

我教你

华为云帐号免费试用或购买AppCube服务后,在同一个华为云帐号下,可以通过添加开发者帐号的方式实现多人协同开发,即帐号下所有开发者可以共享应用资源,例如查看、使用已创建的应用、服务编排、脚本等。

添加开发者帐号有两种方式:

  • 添加IAM开发者
  • 添加WeLink开发者

本节给您介绍添加IAM开发者帐号

添加的IAM开发者帐号必须是从华为云IAM同步过来的哈。同步过来的用户信息存储在User表中,您可以在“对象”中查看User表中的各个帐号的详细信息。用户的个数受许可证限制,以及如何查看用户个数;

AppCube免费版本当前仅支持创建10个用户,若需添加更多用户,请购买AppCube专业版或专享版就可以啦

前提

登录统一认证服务IAM,创建IAM用户,详情操作请参见创建用户

约束与限制

只有华为云帐号或具有“AppCube IAM User QueryAccess”权限的IAM用户才能执行创建子帐号的操作。如何给用户配置权限,请参考创建用户组并授权部分

给IAM用户所在用户组赋权

使用说明

AppCube中的开发环境、沙箱环境和运行环境是三个独立的环境,所以在某个环境上添加的用户不能在其他环境上使用,需要重新添加。

例如,在开发环境中添加了用户A,用户A只能登录开发环境,无法登录运行环境或沙箱环境。如果用户A需要登录运行环境或沙箱环境,请在运行环境和沙箱环境中执行添加用户的操作;

为IAM用户添加开发者权限

添加开发者帐号

登录AppCube管理中心

在左侧导航栏中,选择“用户管理 > 用户”,单击“添加IAM用户”

在“添加IAM用户”页面,选中需要添加的用户,单击“下一步”;

添加IAM用户

在设置权限中,选中Developer Profile或System Administrator Profile,为IAM用户添加开发者权限;

  • 1 System Administrator Profile:管理员权限,默认开启全部权限。赋予该权限的用户为管理员用户,可添加其他开发者帐号。为了保证应用开发的安全性,不建议赋予应用开发者System Administrator Profile权限。
  • 2 Developer Profile:开发者权限,赋予该权限的用户为应用开发者,可以在AppCube开发应用,如新增一个对象、为对象增加一个字段、新增一个流程等;

下面是配置权限

单击“保存”,返回用户列表页面,你可以在用户列表中,查看到已添加的IAM用户了哈。

2 创建子账号

  • 1.访问华为云网站,然后单击页面右上角的“控制台”,再使用注册的租户账号登录。

  • 2.在“控制台”页面,鼠标移动至右上方的用户名,在下拉列表中选择“统一身份认证”。

  • 3.单击“创建用户”,创建子账号。
    image

  • 4.在开发环境中添加子账号用户。

a.子账户创建完成以后,返回AppCube控制台页面,单击“进入开发环境”。
4

AppCube目前只支持Chrome浏览器。因为系统版本问题,示例步骤中的截图可能会和软件实际系统界面有稍许不同,但是你不要担心,我相信不会影响您的理解与操作的。在拷贝复制参数取值样例时,请检查复制出来的数据是不是对的哈,也不能有多余空格哦。

b.在AppCube开发环境首页上,选择“管理 >用户管理 >用户”,进入用户列表,然后单击“添加用户”,把刚刚创建的子账户添加进来就可以;

1)添加IAM用户

5

2)还是添加IAM用户

6

3)然后配置权限,单击“保存”

7

这里子账户,也就是IAM用户添加完成后,子账号就可以访问AppCube开发环境了,子账号登录开发环境请参见如何使用子账号登录AppCube。如果租户管理员没有把子账户添加到用户列表中,那么子账户就无法访问AppCube了哈。

3 如何用子账号登录AppCube

1.当我们子账创建完成后,单击租户账号,然后单击“退出”,在登录页,单击“IAM用户登录”,这个时候输入账号名、用户名及密码后单击“登录”就可以了;

其中“账号名”为租户账号,“用户名/邮箱”为子账号,“密码”是子账号密码。

1)登出租户账号

8

2)IAM用户进行登录

9

2.然后进行子账号登录,进入到控制台,在控制台选择服务区域,目前服务区域支持“北京四”等,反正也不是选最近的哈。然后单击“服务列表”,搜索“应用魔方 AppCube”,这样进入AppCube总览页面。

北京四环境搜索AppCube

10

然后在AppCube总览页,单击“进入开发环境”,就可登录AppCube开发环境了。

二 创建工作流各角色人员队列

不懂没关系我后面解释

1.首先使用租户账号,登录AppCube应用开发环境。

  • a.在华为云网站,单击页面右上角的“控制台”,并使用注册过的租户账号登录控制台。
  • b.然后单击服务列表,搜索应用魔方 AppCube,然后在搜索记录中单击“应用魔方AppCube”,进入AppCube服务管理控制台。

搜索AppCube服务

11

在AppCube总览页,单击右上角“进入开发环境”即可。

本实例中的开发操作均是使用租户账号进行的,其中子账号仅在业务功能调测时使用。

2.在AppCube应用开发环境首页,单击“管理 > 用户管理”,进入用户管理页。

进入开发中心首页

12

3.创建出来2个人员工作队列,如下表所示

队列信息
13

a.在管理页面,选择“用户管理 > 工作队列”。

然后进入工作队列

14

b.单击“新建”,然后设置队列基本信息、队列成员,然后单击“保存”;

参数说明

15

Employee工作队列

16

添加成员

工作队列中的成员类型也可以是“业务用户”,具体如何添加业务用户及业务用户权限配置请参见添加业务用户及为业务用户添加业务凭证,本文只是为了方便说明添加的成员类型为“用户”下的子账号。

三 创建一个空白轻应用

创建应用是在AppCube开发环境里面开发项目的第一步,也是端到端构建软件应用的入口。

本实例中的开发操作均是使用租户账号进行的,子账号仅在业务功能调试时侯使用。

1.使用租户账号,登录AppCube应用开发环境界面。

  • a.在华为云网站,单击页面右上角的“控制台”,并使用注册的租户账号登录控制台。
  • b.在单击服务列表,搜索“应用魔方 AppCube”,进入AppCube服务管理控制台。
  • c.在AppCube总览页面,单击右上角“进入开发环境”。

2.在开发环境首页,单击“项目”,在项目页签下,选择“轻应用”。

进入行业应用

17
18

在轻应用开发页面,单击“创建空白轻应用”。

创建空白行业应用

19

4.填写App相关信息后,单击“创建”。

首次创建App,会提示创建命名空间,命名空间一旦创建, 不可修改,后续所有新建对象,都会使用此命名空间作为前缀,建议你使用姓名首字母缩写这样才好记

创建项目

20

四 基于模板创建BPM

  • 1.进入刚刚创建好的“BTA”应用,单击“Logic”目录右侧,在弹出菜单中,单击“BPM”。

新建BPM
21

  • 2.在“添加BPM”中,选择“基于模板”,标签、名称填写为“BTA”,“描述”填写为“出差电子流”,然后单击“选择模板”。

BPM名称定义

22

  • 3.在选择模板弹窗中,单击“HR”,然后在“HR”下,选择“出差申请”,然后单击“创建”。

选择模板

23

五 调整BPM,配置各泳道处理人

1 背景信息

在进行BPM设计前,您需要对设计界面进行全面的了解。

BPM界面元素
24
25

BPM的核心功能

  • 1.页面流编排:把用户交互的前端页面与各种任务之间进行编排,形成一个完整的BPM。
  • 2.跨人员的工作流:支持每一步都可以指明下一步的处理人。

2 操作步骤

1.在按钮区域,单击,解锁当前BPM,然后单击泳道“Process Owner”,配置工作队列为“Employee”

配置员工为申请人

26
2.单击泳道“Reviewer”,配置工作队列为“Manager”。

配置主管为审批人

27

3.单击泳道“Process Owner”上的“重新填写请求”用户任务元素,设置任务标题为“待重新提交”。

将来在“我的待办”,可以看到的任务状态“待重新提交”。

配置为待重新提交

28

4.然后单击泳道“Reviewer”上的“申请审批”用户任务元素,设置任务标题为“待主管审批”;

将来在“我的待办”,可以看到的任务状态“待主管审批”。

配置为待主审批
29

依次单击左上方保存按钮,启用按钮

保存启用流程

六 定义应用的导航菜单

  • 1.单击应用左侧导航下部的“配置”,进入配置页。

进入应用配置
31

  • 2.单击“导航条”页签,在“导航条”页签下,单击“Home”右侧,选择“添加页签”。

编辑Home主页
32

图3 编辑我的待办
33

  • 3.单击“菜单树”右侧的“+”,选择“添加页签”。

菜单配置
34

  • 4.设置BPM页签,“页签类型”选择“BPM页签”,其他信息如下图所示,设置完成后,单击“保存”即可;

BPM页签设置
35

七 填出差申请

然后提交人提交申请,主管审批申请,分别测试审批通过与拒绝重填,最大程度体验出差电子流审批整个过程。

  • 1.访问AppCube开发环境

这里使用的是Employee队列(员工队列)中用户(子账号)进行登录的。因为当前租户账号,已经在Employee队列中,为了方便后续查看审批后的邮件,因此这里直接用当前租户账号登录,Employee队列(员工队列)中用户账号也就是在创建工作流各角色人员队列中创建的。

  • 2.单击应用菜单上,进入应用预览即可

预览应用
36

  • 3.单击“我要出差”,提交出差信息, 请填写全部字段哈

我要出差,填写申请
37

八 进入审批

1.访问AppCube开发环境,并使用Manager队列中用户账号(tony_2020)进行登录。Manager队列及队列成员,是在创建工作流各角色人员队列上面那块创建的。

2.在首页上,单击“项目”,并在“我的项目”中,找到“BTA”,然后单击预览图标,进入应用预览界面,如下图

然后进入我的待办,主管进行审批
38
可以单击“通过”或“驳回”哈
39

审批通过后,查看申请时邮箱是否收到邮件
40

查看填写出差申请的用户,能不能搜索到审批通过邮件或者被拒绝申请的记录哈

  • 1 如果审批人选择了“approve”,那么在当前租户开发者的邮箱中,查看是否收到邮件,如上图所示,如果收到,则说明流程配置是正确的;

  • 2 那如果审批人选择了“reject”,那么在当前租户开发者的App“我的待办”中,会出现主管退回的申请记录,如下图这样;

查看被拒绝的记录
41

最后是结束语

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。