The final form of app low-code development? First experience of APICloud visual development

As an old user of APICloud, I recently saw that APICloud Studio 3 added a new visual editing tool, and experienced it for the first time.

The overall feeling is OK, with the following three advantages:

1. A new template page is added, which can be selected when creating a new stml file.

2. The corresponding front-end code can be generated in real time through the page dragged by the component, and there is no redundant code, which can be used directly or re-optimized for development. Therefore, if the product is prototyped by this tool, the generated code can be provided to the development for direct use. For technical novice who want to quickly make their own app, this tool can also be used as an entry tool.

3. Added API management tools, which can debug interfaces and generate request code files. The interaction of the tools can be optimized again, some operations are not intelligent to drag.

In the process of using, summarize some experience, and share with you below.

1. Use template pages

Right-click on the pages directory, select [New-stml file], select the registration page template, and enter the file name, as shown below:

Click the Create button to complete the creation. You can see that the register folder and register.stml file are automatically generated, and the dependent components are also automatically generated. Under the components folder, this is very convenient and fast.

Click the "eye" icon to preview the page, as shown below:

Click the edit icon to open the visual editing area.

The effect of opening the visual editing area is as follows:

2. Introduction of component classification

Components are divided into UI components, advanced components, and system components.

System components are the most basic components with the smallest encapsulation granularity. UI components are more commonly encapsulated components with default styles, of course, the styles can also be adjusted. Advanced components are more complex components that can be simply understood as page-level components, such as a shopping cart.

3. Example of using system components

Assemble a simple popup interface.

First drag in a rich text [rich-text] component. And set margin, height h and background color. When setting the margin, click the pin icon, after the icon turns gray, you can enter different margin values for up, down, left, and right. As shown below:

give rich-text The nodes property bind variable:

You need to define the variable name in the code first, as shown below:

Then click the "Edit" button to open the visual editing interface, click the pin icon after the component properties

The binding interface pops up, as shown below:

Select the text variable, click the "OK" button, and then close the binding popup.

The code interface after binding is as follows:

Then modify the text value to the desired text. code show as below:

Next, drag two buttons and place them below the pop-up text. Note that in order to facilitate the positioning of the buttons, you can drag a view first, and then add two buttons to the view. As shown in the figure below, in the style panel on the right, you can set the width and height of the button, and press Enter after input to take effect.

In the event panel, you can bind events to buttons:

4. Experience Summary

1. First, plan several layers of views according to the page design diagram. After adding a layer of view, set the style of this layer of view.

2. Learn the principle of flex layout. After understanding the principle, it is very helpful to realize page layout and element positioning, and can clearly know the operation steps.

The above is my initial experience of APICloud Studio 3 visual development. Compared with other low-code development platforms on the market, using APICloud to drag and drop pages through components can generate corresponding front-end code in real time, which can be used directly or re-optimized for development. , the modifications in the source code can also be fed back to the visual editing panel. This should be the final form of App low-code developers, haha. Interested friends are welcome to communicate with each other.