第一次接触低代码平台 AppCube,还是有点门槛的丨【玩转应用魔方】
从华为云官网看到 AppCube 应用魔方,通过简单了解到它是一个可以搭建各种业务流程的低代码平台,之前一直想了解一下低代码平台相关内容,所以有了这一系列的文章。
本系列博客将沉浸式的体验 APPCube 相关内容,直到可以实现完全从零开发一款 APP。
项目的入口
打开 https://www.huaweicloud.com/product/appcube.html,选择立即使用应用魔方 AppCube,即可进入后台管理页面。
进入主界面之后,各个功能菜单的划分还是比较清楚的,我一眼看到的就是如何创建应用,点击对应卡片之后,会跳转到帮助手册,有助于我们理解 AppCube 如何使用。
切换到项目栏目,然后出现了,果然是低代码平台,帮您快速 这几个字非常显眼。
我就喜欢快速上手的平台,直接选择轻应用开始。
轻应用
进入轻应用平台之后,发现非常多的模板,这些模板应该就是帮我们快速构建轻应用的相关入口了。
首先映入眼帘的是 【问卷调查(高阶)】模板,那咱必然选择 【问卷调查(低阶)】,下拉果然有。
点击使用模板之后,出现了如下界面,应该是对轻应用基础信息的配置(在此之前,我创建了一个空白模板,所以我的界面如下所示)
上图只有标签和名称属于必填项,初次使用,除必填外,其余内容保持默认比较好。
由于我使用的笔记本,屏幕分辨率比较小,所以第一次看到低代码平台,如下所示:
配合之前得到的 帮助手册,简单对页面有了相关了解。
直接点击左侧的预览(眼睛图标),对模板进行预览,了解到这是一款问卷类轻应用,其中包括一个小的后台管理页面。
关闭预览页面,回到编辑器中,寻找编辑器中的最核心区域,如下图所示:
因为有编码经验,这部分内容非常容易理解,模型文件,页面文件,逻辑文件,应该是这三部分进行的组合。
点击 Model
文件夹中的内容,得到的页面让我联想到了数据库软件的相关配置,这里如果对变成一点不了解,很可能上手比较难,但是有编程经验,就简单多了,完美没有门槛。
上图就是模型中配置的数据字段
接下来进入 Page
文件夹,这里面的操作就非常厉害了,直接拖拽式,让我想起了当年学习 winform 时的场景。
从左侧的组件中,拖拽到右侧页面中,然后在对组件进行操作。
初学阶段难点部分
由于页面是拖拽配置式的,所以我就想要尝试一下不查询手册,看能不能领悟到低代码编程的核心魅力,后来证明低代码不等于简单。
AppCube 完全符合一拖二配原则。
数据绑定过程就是绑定前文提及的自定义对象。
这里我通过编辑获取到了表单组件绑定的对象。
查看其它组件数据绑定后,得到的结论是表单绑定的是表,各个字段被绑定到了单一组件上,而且在页面下部分找到了模型视图,猜测这里可以直接对整个页面进行对象绑定,后续做测试的时候,可以进一步的验证。
组件的其它配置,都是见文知意,很容易理解,不做过多补充说明。
这里还预留下一个未知点,就是模型中出现了一个自定义的 editFlag
(编辑标识?),无法直接读懂,留待后文解开。
接下来点击 提交按钮,右侧切换到事件功能面板,找到自定义代码部分,这里应该就是保存逻辑,但是打开之后,发现竟然存在代码。(看来低代码字面意思,指的就是这里编写代码)
系统集成了部分代码提示,用于快速实现代码逻辑,这一点还是非常棒的。
// 获取当前页面
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
页面,界面如下,其中最重要的依旧是数据模型与组件之间的绑定逻辑。
这个页面理解起来难度不大,筛选用户提交的问卷,直接绑定 hys__question_qR__CST
模型即可。
初次接触 AppCube 感受
- 低代码平台不等于无代码;
- 低代码平台的使用,存在上手难度,具备一定的门槛,它面向的应该是有编程经验的人员;
- 低代码平台借助于模板,可以快速的构建应用,例如本文提及的问卷,直接修改模型和页面元素就可以进行个性化扩展
- 需要看帮助手册,一定要看。
本篇博客为你呈现的是一种接触式的学习思路,你可以按照相同的流程,完整的体验一遍 AppCube,然后再进行初次开发,下一篇博客为你实现一款 WorkingTime 的 AppCube 应用。
【玩转应用魔方】有奖征文火热进行中:https://bbs.huaweicloud.com/blogs/306271
- 点赞
- 收藏
- 关注作者
评论(0)