I saw the AppCube application Rubik's Cube from Huawei Cloud's official website. I simply learned that it is a low-code platform that can build various business processes. I have always wanted to know about the low-code platform before, so I have this series of articles.
This series of blogs will immersely experience APPCube related content until it is possible to develop an APP completely from scratch.
project entry
Open https://www.huaweicloud.com/product/appcube.html and choose to use AppCube now to enter the background management page.
After entering the main interface, the division of each function menu is relatively clear. What I can see at a glance is how to create an application. After clicking the corresponding card, it will jump to the help manual, which will help us understand how to use AppCube.
Switch to the project column, and then it appears. It really is a low-code platform. The words help you quickly are very conspicuous.
I like the platform that is quick to get started, and I just choose the light application to start.
light application
After entering the light application platform, I found a lot of templates. These templates should be the relevant entrances to help us quickly build light applications.
The first thing that catches the eye is the [Questionnaire (High-level)] template, then we must choose [Questionnaire (Low-level)], and the drop-down really does.
After clicking Use Template, the following interface appears, which should be the configuration of the basic information of light application (before this, I created a blank template, so my interface is as follows)
In the picture above, only the label and name are required items. For the first use, it is better to keep the default content except for the required fields.
Because the screen resolution of the laptop I am using is relatively small, so I saw the low-code platform for the first time, as follows:
With the help , it is easy to understand the page.
Directly click the preview (eye icon) on the left to preview the template, and learn that this is a questionnaire-like light application, which includes a small background management page.
Close the preview page, go back to the editor, and look for the core area in the editor, as shown in the following figure:
Because of the coding experience, this part of the content is very easy to understand. The model file, page file, and logic file should be a combination of these three parts.
ModelClick on the content in the folder, and the page I get reminds me of the relevant configuration of the database software. If I don't know anything about it, it may be difficult to get started, but with programming experience, it is much simpler, and there is no threshold for perfection.
The above picture is the data field configured in the model
Next, enter Pagethe folder, the operations in it are very powerful, and the drag-and-drop style reminds me of the scene when I was learning winform.
From the component on the left , drag it to the page on the right , and then operate the component.
Difficult part for beginners
Since the page is a drag-and-drop configuration, I wanted to try it without consulting the manual to see if I could comprehend the core charm of low-code programming. Later, it was proved that low-code is not equal to simplicity.
AppCube fully complies with the principle of one for two.
The data binding process is to bind the custom objects mentioned above.
Here I get the object bound to the form component by editing.
After looking at the data binding of other components, the conclusion is that the form is bound to a table , each field is bound to a single component, and the model view is found in the lower part of the page, guessing that the entire page can be directly bound to the object. , which can be further verified in subsequent tests.
The other configurations of the components are all familiar and easy to understand, so there is no need to add too much explanation.
The next unknown point is reserved here, that is, a custom editFlag(editing logo?) appears in the model, which cannot be read directly, and is left to be solved later.
Next, click the Submit button , switch to the event function panel on the right, and find the custom code section . This should be the save logic, but after opening it, it is found that there is code. (It seems that low code literally means writing code here)
The system integrates some code hints to quickly implement code logic, which is great.
// 获取当前页面
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);
}
});
The submit button logic is relatively complex, the reset button is relatively simple
// 当前组件
let _component = context.getCurrentComponent();
// 当前Form
let _form = _component.getForm();
_form.resetFields();
Questionnaire presentation
Next, learn about the page rendering logic, open the question_ManagementPagepage , and the interface is as follows, the most important of which is still the binding logic between the data model and the component.
This page is not difficult to understand, just filter the questionnaires submitted by users and directly bind the hys__question_qR__CSTmodel .
First contact with AppCube experience
- A low-code platform does not equal no-code;
- The use of the low-code platform is difficult to get started and has certain thresholds. It should be aimed at people with programming experience;
- The low-code platform can quickly build applications with the help of templates. For example, the questionnaire mentioned in this article can be customized and extended by directly modifying the model and page elements.
- Need to see the help manual, be sure to read it.
This blog presents a contact learning idea for you. You can follow the same process to fully experience AppCube, and then start the initial development. The next blog will implement a WorkingTime AppCube application for you.