HUAWEI CLOUD application Rubik's Cube AppCube to create a questionnaire application experience

Due to work reasons, the author often has some needs to create questionnaires. Although there are many tools for quickly creating questionnaires in WeChat mini-programs, these tools do not provide customization functions, so they cannot meet my needs.

Recently, I learned from the HUAWEI CLOUD community that the tool provided on HUAWEI CLOUD 应用魔方 AppCube can not only quickly create questionnaires, but also provide customized functions for developers. The use experience is shared with you through this article.

HUAWEI CLOUD AppCube is a zero-code and low-code application development platform. It originates from Huawei's application development and digital transformation practices. It provides an application development model with no-code, low-code, and multi-code support on the cloud. The complexity of technology improves the efficiency of enterprise development.

Every developer can experience it by clicking on the picture below 免费试用 .

We enter the AppCube workbench and click 开始创建->使用模板新建 :

In the template list of the low code area, find the 问卷调查(高阶) template,

Click to enter the details page, click 安装模板 to:

We will see that an online editor is opened, and the project folder on the left side of the screen contains the implementation source code of this questionnaire application, all generated through templates. In this article, we will first learn how to use the created survey application, and then explore some details of the source code automatically generated by AppCube.

Click the 查看应用 button on the left side of the online IDE:

You can see the following questionnaire management interface (Home Page). Here we can create an instance of the questionnaire. Click 创建问卷 :

The title, banner and description of the questionnaire can be maintained, so that the person filling in the questionnaire can know at a glance how the questionnaire should be filled out and the purpose of the investigation:

Click 添加问题 to create a selection of questions that the user can answer. For example, we created a questionnaire to collect the types of programming languages that programmers use in their daily work.

Hit the save button, then hit this paper airplane icon to publish:

When the status of this questionnaire changes to 已发布 , you can click the 分享 button to deliver this questionnaire to the target group in the form of a QR code or a link.

The picture below is the questionnaire interface that I opened after scanning the QR code on my mobile phone:

After submitting, on the questionnaire management page, click the 统计 button:

You can see how the questionnaire was filled out:

It is not difficult to see from the above that the template-based questionnaire creation program provided by HUAWEI CLOUD Application Cube has a very smooth user experience, and there is no difficulty in getting started. Let's take a look at some technical details of this template-based application.

Let's go back to the original online IDE interface, Logic, Model and Page on the left. We can compare it to the Controller, Model and View layers of a web application based on MVC architecture.

Click on the file ending with HomePage under the Page folder, and find that this is the starting page for us to click the 创建问卷 button.

We cannot directly view the source code of this page view implementation, which is also the purpose of 低代码解决方案 : to encapsulate the underlying technical details of the application to ensure that end users can 通过图形化的用户界面 , to develop and meet their actual needs required application.

We click the 获取锁 button to enter the editing mode of the page:

Then click the 创建问卷 button to customize this button, such as modifying its text:

We changed 创建问卷 to 创建一份新的问卷 :

You can also modify the button style, such as background color, font, shadow, etc.

After we fine-tune the appearance of the button, click again 查看应用 , and you will find that our adjustments to the text and background color of the button have taken effect immediately:

In the Model folder, we can see which UI elements in each area of the view are bound to which model fields.

We select the file in the Model folder highlighted in the figure below and click the hyperlink Questionaire Definition Detail :

Then click the Name field, you can see that in the questionnaire creation view page, the interface element that displays the questionnaire name, the bound data model field is form0.name

If we added UI custom fields to the pages in the Page folder before, and we want those new custom fields to support data binding, we can pass the 新增模型 button here, Create the corresponding data model fields:

In the Model file editing page, we can add some form validation logic to the model field, including regular expression validation support and so on.

In the Logic folder, we can read the source code to understand the writing logic at the controller level of the questionnaire application.

Let's understand through a practical example. The picture below is the page where we view the results of the questionnaire submission:

We open the Chrome developer tools, refresh the page, in the network panel, we can see the following HTTP request. From these requests, it is easy to find the HTTP request that returns the results of the questionnaire submission. The url is as follows:

https://appcube.cn-north-4.huaweicloud.com/service/N277027076__Questionnaire/0.1.0/queryQuestionaireStats?questionaireDefId=cSOm000000wbWfX1Ak1g

From the response structure of the HTTP request, it can be seen that the answers to the questionnaire questions, ABAP, Java and JavaScript respectively have an answer, and no one has chosen 其他 .

The query parameter name of this HTTP request is questionaireDefId , and its value is the technical id defined by the current questionnaire application:

We go back to the online IDE, use the shortcut key of Visual Studio Code Ctrl+P , enter the keyword stat in the HTTP request just observed in the network panel of Chrome developer tools, the search result list The last one in the queryQuestionaireStats is the background implementation of this HTTP request.

Click to enter this search result, then double-click the Script0 icon in the picture below:

Then you can see the detailed implementation code of this request:

The third line import * as db from 'db' indicates that this implementation file contains database operations.

Come to the class named Main , which is the background implementation entry of the HTTP request that returns the results of the questionnaire. The description field in Figure 1 indicates that this method is used to implement the Query Questionaire Stats function. The QuestionaireDefinition.get method in Figure 2 defines the id through Questionaire, returns the model details of the questionnaire, and then splices database query conditions in Figure 3 db.Condition to prepare for the upcoming database query.

Finally, the list method on line 151 is called to perform database query operation.

We hold down Ctrl, and then click the list method in the figure above to jump to the implementation file of this method. These shortcut keys (including the Ctrl + P mentioned above) are actually normal operations of Visual Studio Code.

Summarize

This article introduces the low-code implementation of a questionnaire management application through Huawei Cloud's AppCube. The author first shows you the efficiency and process of creating the application based on the AppCube template, and then briefly analyzes the automatic creation of the AppCube. Some details of resource files. From the creation and use of the applications created, I believe it is not difficult for everyone to see:

• There is no technical threshold to create low-code applications with AppCube, even users without programming background can easily master it;
• The low-code application created based on the AppCube standard template provides users with certain programming skills with many ways to flexibly customize the application, and advanced users can use these ways to complete various personalized needs in the project.