This article to share from huawei cloud community partners share | how to quickly develop a AppCube standard page “, the author: Roberto.
I got to know AppCube when I received a notice from my leader in 21, asking me to learn about AppCube, a low-code platform.
At that time, the frequency of the word “low code” was gradually increasing in the articles of wechat public account. However, I did not pay too much attention to this field and did not know much about low code. The first impression in my mind might be dragging and dragging. However, based on my previous experience with RPA, I guess it should be in the form of visual drag + code development. This is the chance to experience it.
Like most techies researching new technologies, read documents and experiment. First, I went into the background and created a test project. After a general look, the functions and concepts were more and more complex than I expected. I admire the technology of the AppCube team, after all, creating a product and using a product are two different things.
A document sweep down, increased some understanding, but to be honest, or a little knowledge.
AppCube is a full-stack development platform that integrates a variety of services from development to deployment, which can really save time and effort. Just like cooking, according to their own needs to add different spices, a big meal is finished.
This time, however, we are using our own back-end services, so we only need to develop the front end. With a little understanding, we will skip over some concepts of the Appcube back end for the moment and focus directly on the two main parts of the front end: standard page + advanced page.
After the initial experience of the standard page, the learning curve is relatively flat, which is more suitable for non-IT professionals to visually drag and configure.
Advanced page initial experience down, the learning curve is relatively steep, basically is the need to develop their own code components. However, for developers, as long as the documentation is detailed and the case is clear, there is basically no problem.
Both support VUE code + visual drag-and-drop and configuration, but standard pages have more visual weight and advanced pages have more code weight.
We developed through a small program project, as well as referring to other excellent small programs found that the effect of advanced page development of the small program is closer to the original, and will be more excellent in SPA. Of course, depending on the scenario, according to the actual situation of their own project to choose will be more appropriate, for example, the need to quickly build a form may be a standard page.
During development, problems are inevitable. Up to now, there is not too much information on the search engine such as certain degree certain song, so it is mainly to check documents, visit forums and ask for help from staff. Kudos to the AppCube staff for their responsiveness and enthusiasm in making this app possible.
The above is a brief summary.
Before the development of the project, due to the comprehensive consideration of various factors, we choose the standard page to do development, so we will only talk about the standard page.
Standard page system preset components are relatively rich, for style and interaction customization needs, we mainly reference Vant to develop custom components, and then drag and drop configuration.
Before developing standard page, a sweep of the standard page document: support.huaweicloud.com/usermanual-…
As shown in the figure below, the development interface of the standard page is quite clear.
In the whole interface, the main menu area is on the left, the visual operation area is in the middle, and the configuration items are on the right. The properties, events, and libraries on the right are similar to props, methods, and imports in Vue. There is also a concept that is not clearly displayed in the interface — model, which feels corresponding to data in Vue and can be used for two-way binding of data.
In this case, I will refer to the general order of contents in Vue.
The first is the library import, the import in Vue, the library that the current standard page depends on, which is imported here, sometimes even before the page jumps to the page. As of now, the standard page does not support global library imports, advanced pages do.
In addition to the platform built in library, also can to package and import third-party libraries, process reference how to introduce the third party libraries support.huaweicloud.com/usermanual- 】…
It is important to note that if A and B are imported, do not rely on B in A or A in B, because the import order of the libraries is not guaranteed, at least in my previous tests.
Following the introduction of libraries, the data section is introduced, closely related to the concept of models, mainly focused on the properties area on the right side of the development interface.
As shown in the figure, click the setting icon in the Value box to manage the model and bind the data to the corresponding model, similar to v-Model.
To create a new model, like we do pure front-end development, we just need to click create a custom model.
After the model is created, continue to add or check the model and the attributes under the model as required. Once checked, it means that the attributes are bound to the data; unchecked, it means that the binding is removed.
As shown in the figure, the only difference between 1 and 2 is that 1 is equivalent to the V-model in Vue, and 2 is equivalent to the props pass in Vue.
Next up are events, or methods in Vue. Platform preset components, according to business needs, generally have preset events, you can do business development in these events, and even call interfaces. When it comes to calling interfaces, in standard pages and advanced pages, there is actually a more important concept – connector, in addition to the advanced page call interface also involves a bridge, please check the documentation, because we are not used here. We chose to wrap an AXIos library and call the interface directly in the component’s events, which is convenient for now.
We have our own specificity, we only do front-end development, everything else in our own system, including the interface documentation. During actual development, you are advised to consult documents and consult the platform, and try to adopt the development method recommended by the platform to avoid problems in later maintenance.
To be a little more specific, if the component’s events do not have the pen icon, the component is not exposed. Otherwise, the component has an event. You can click the small pen icon to enter the editing window of the event.
In the event editing window, the content on the left is the platform-preset method. If the mouse stands alone, it will copy the corresponding method to the clipboard and paste it in the black editing area for use. You can also drag the method on the left directly into the edit area.
/jshint esversion:8/ = /jshint esversion:8/ = /jshint esversion:8
After events, let’s talk about styles, the style area in Vue.
As shown in the figure, under the properties area of the page, there is a style configuration area, through which you can visually configure the style, the final generation of CSS style source code appears at the bottom of the style source. So for the front end, you can write styles directly in the style source code.
Underneath the CSS, there is an obscure component tree, which is often used to help you select components accurately. Because components sometimes overlap or mask, it is not convenient to select components in the visual area. Expand as shown below.
At the bottom of the visualization, there is a menu that looks similar to the properties configuration area on the right side of the page. The difference is that properties are displayed based on the dimension of the component, and pages are displayed based on the dimension of the page. So when it comes to maintaining your code, making use of these menus can be a bit more productive.
Then we click the preview icon to enter the preview page.
So much for the basic introduction to the AppCube experience, there’s so much more in AppCube that you could write a book about it. Overall, AppCube is very powerful, and what we’ve experienced so far is only a small part of it.
Finally, I hope AppCube can further enrich documents, forums or ecology, and grow bigger and stronger for the benefit of the industry.
Click to follow, the first time to learn about Huawei cloud fresh technology ~