Recently, I have researched a new no-code development tool, which focuses on developing small programs without writing a single line of code. There are already two articles
Develop a small program with no-code tools
Citizen developers learn no-code programming, starting with CRUD
The previous two articles have introduced how to create a project, how to create a data table, and develop new functions.
In the field of software development, we need to practice four basic functions when we enter the industry, namely adding, modifying, deleting and querying.
Because most management information systems are based on these four standard actions, some terms also call the person who often writes these basic operations CRUD Boy
But for any complex application, if we decompose it, the system is actually composed of modules, and the modules are composed of functions, which can be split into these four actions. Therefore, the practice of basic skills should not be underestimated.
Why can no-code tools develop applications without code? The main reason is that the manufacturer has already abstracted the knowledge of programming and abstracted the business scenarios into components. When we develop, we focus more on the combination of components.
Ok, so much verbosity, let's get to our topic. This article mainly explains how to develop the list function.
1 Which components can apply the list function
The first is to open our tools. No-code development is based on browser development. It does not require any development tools to be installed on our computer, nor does it need to configure environment variables.
Its function is somewhat similar to the figma of the design software, which is also divided into personal space and shared space.
The personal space is mainly the items created by you, which can only be seen by you. The shared space is a project shared with others, and everyone can collaborate and develop together in the shared space.
Open the project, you can click the project name we need to enter the editor interface
The editor is divided into four areas, the top navigation bar, the page component area, the editing area, and the preview release area
Each zone is configured with different features. At present, if we need to see which components, we can create a list page first, click the + sign next to the page, let's create a list page
After clicking the + sign, there will be an extra page on the right side of the current page. We need to select it. When the border turns blue, it means that the page is selected.
Then double-click the name of the page to modify it
After modifying the page name, click on the navigation bar component to modify the title of the component
Click the + sign next to the component to add the component
The list component under the container can be used to develop our list function
2 How to learn the use of components
We got a development tool, how to learn to use it? The answer is to look at the help documentation. Because since it is sold in the form of a tool, it is necessary to provide a detailed manual. If it is not provided, then there is no need to waste time studying it.
Where is the documentation? Or go back to our project space, find our help documents in the top navigation bar
Find the component talk in the help center, find the list component
The help center has already talked about it in great detail, let's experience how to use the list component according to our curriculum system
3 Create a data table
Click the data model on the navigation bar to create a data table
Click the Add button next to the data table to add the table
Enter a model name
Select the table we created, click Add Column to add fields
When adding a column, select the type according to the actual situation. Once selected, if you need to modify it later, you can only delete the column and add it again.
Any changes made to the data table need to click the backend update in the editor to take effect
4 Enter data
After the data table is added, you need to enter the data, or enter the data model view, click on the database, first select the data table, and then click Insert Data to add some products
5 Add components
To develop the list function, you need to add components first, we drag the list component into the page
For components, we first need to configure the data source, select our commodity data table
After the data source is configured, we need to configure the display of the fields. Double-click the component to enter the interior of the component
What needs to be done is to select the appropriate component and drag it into the container view
We first drag in a picture component to display the picture of the product
Then you need to bind the picture field in the remote data with the picture
From the data in the component, select the list, select the item, and then select the image field
Then drag in the text component and adjust it to a suitable position
Bind data to the text component as well
6 Preview release
After the function is developed, click preview to see the actual effect
Summarize
The basic steps of codeless development are to create tables first, add fields, then add data, and then select appropriate components to bind data. The overall experience is still very smooth, and you can develop small programs by yourself without any programming knowledge. If you want to experience it, hurry up.