第一次接触低代码平台 AppCube,还是有点门槛的丨【玩转应用魔方】

举报
梦想橡皮擦 发表于 2021/11/01 21:47:24 2021/11/01
【摘要】 从华为云官网看到 AppCube 应用魔方,通过简单了解到它是一个可以搭建各种业务流程的低代码平台,之前一直想了解一下低代码平台相关内容,所以有了这一系列的文章。本系列博客将沉浸式的体验 APPCube 相关内容,直到可以实现完全从零开发一款 APP。 项目的入口打开 https://www.huaweicloud.com/product/appcube.html,选择立即使用应用魔方 Ap...

从华为云官网看到 AppCube 应用魔方,通过简单了解到它是一个可以搭建各种业务流程的低代码平台,之前一直想了解一下低代码平台相关内容,所以有了这一系列的文章。

本系列博客将沉浸式的体验 APPCube 相关内容,直到可以实现完全从零开发一款 APP。

项目的入口

打开 https://www.huaweicloud.com/product/appcube.html,选择立即使用应用魔方 AppCube,即可进入后台管理页面。

image.png

进入主界面之后,各个功能菜单的划分还是比较清楚的,我一眼看到的就是如何创建应用,点击对应卡片之后,会跳转到帮助手册,有助于我们理解 AppCube 如何使用。

image.png

切换到项目栏目,然后出现了,果然是低代码平台,帮您快速 这几个字非常显眼。

image.png

我就喜欢快速上手的平台,直接选择轻应用开始。

轻应用

进入轻应用平台之后,发现非常多的模板,这些模板应该就是帮我们快速构建轻应用的相关入口了。
image.png

首先映入眼帘的是 【问卷调查(高阶)】模板,那咱必然选择 【问卷调查(低阶)】,下拉果然有。

image.png

点击使用模板之后,出现了如下界面,应该是对轻应用基础信息的配置(在此之前,我创建了一个空白模板,所以我的界面如下所示)

image.png

上图只有标签名称属于必填项,初次使用,除必填外,其余内容保持默认比较好。

由于我使用的笔记本,屏幕分辨率比较小,所以第一次看到低代码平台,如下所示:

image.png

配合之前得到的 帮助手册,简单对页面有了相关了解。

直接点击左侧的预览(眼睛图标),对模板进行预览,了解到这是一款问卷类轻应用,其中包括一个小的后台管理页面。

关闭预览页面,回到编辑器中,寻找编辑器中的最核心区域,如下图所示:

image.png

因为有编码经验,这部分内容非常容易理解,模型文件,页面文件,逻辑文件,应该是这三部分进行的组合。

点击 Model 文件夹中的内容,得到的页面让我联想到了数据库软件的相关配置,这里如果对变成一点不了解,很可能上手比较难,但是有编程经验,就简单多了,完美没有门槛。

image.png

上图就是模型中配置的数据字段

接下来进入 Page 文件夹,这里面的操作就非常厉害了,直接拖拽式,让我想起了当年学习 winform 时的场景。

image.png

从左侧的组件中,拖拽到右侧页面中,然后在对组件进行操作。

初学阶段难点部分

由于页面是拖拽配置式的,所以我就想要尝试一下不查询手册,看能不能领悟到低代码编程的核心魅力,后来证明低代码不等于简单。

AppCube 完全符合一拖二配原则。

image.png

数据绑定过程就是绑定前文提及的自定义对象。

这里我通过编辑获取到了表单组件绑定的对象。
image.png

查看其它组件数据绑定后,得到的结论是表单绑定的是,各个字段被绑定到了单一组件上,而且在页面下部分找到了模型视图,猜测这里可以直接对整个页面进行对象绑定,后续做测试的时候,可以进一步的验证。

image.png

组件的其它配置,都是见文知意,很容易理解,不做过多补充说明。

这里还预留下一个未知点,就是模型中出现了一个自定义的 editFlag(编辑标识?),无法直接读懂,留待后文解开。

image.png

接下来点击 提交按钮,右侧切换到事件功能面板,找到自定义代码部分,这里应该就是保存逻辑,但是打开之后,发现竟然存在代码。(看来低代码字面意思,指的就是这里编写代码)
image.png

系统集成了部分代码提示,用于快速实现代码逻辑,这一点还是非常棒的。

// 获取当前页面
var pageName = context.$page.params.pageName;
// TODO: Your business logic
context.$model.ref("form_1").setData(model);
context.$model
  .ref("form_1")
  .save()
  .then((data) => {
    if (data.resCode == 0) {
      $var.recordId = data.result[0] && data.result[0].id;
      // open in current tab
      let queryParam = "recordId=" + $var.recordId + "&page=" + pageName;
      context.$page.loadStdPage("hys__question_submitPage", queryParam);
    }
  });

提交按钮逻辑相对复杂,重置按钮就比较简单

// 当前组件
let _component = context.getCurrentComponent();

// 当前Form
let _form = _component.getForm();

_form.resetFields();

问卷呈现

接下来围绕页面呈现逻辑进行学习,打开 question_ManagementPage 页面,界面如下,其中最重要的依旧是数据模型与组件之间的绑定逻辑。

image.png

这个页面理解起来难度不大,筛选用户提交的问卷,直接绑定 hys__question_qR__CST 模型即可。

初次接触 AppCube 感受

  1. 低代码平台不等于无代码;
  2. 低代码平台的使用,存在上手难度,具备一定的门槛,它面向的应该是有编程经验的人员;
  3. 低代码平台借助于模板,可以快速的构建应用,例如本文提及的问卷,直接修改模型和页面元素就可以进行个性化扩展
  4. 需要看帮助手册,一定要看。

本篇博客为你呈现的是一种接触式的学习思路,你可以按照相同的流程,完整的体验一遍 AppCube,然后再进行初次开发,下一篇博客为你实现一款 WorkingTime 的 AppCube 应用。

【玩转应用魔方】有奖征文火热进行中:https://bbs.huaweicloud.com/blogs/306271

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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