[inBuilder Low Code Development Lab] Use inbuilder to complete UBML low code design and development

1. Activity introduction

Open Atom Bootcamp kicks off inBuilderlow-code lab activities. Whether you are a practitioner in the computer industry, a low-code development enthusiast, or an ordinary user, based on the inBuildercommunity version of the low-code development platform ( UBMLa widely available release based on open source projects), you can experience wizard-style, visualization, and drag-and-drop The development method realizes the scene application in the digital transformation.

The most important thing is that it is a free enterprise-level low-code platform!

2. The low-code platforms I know

This year is the year of AI application and metaverse explosion. In the field of development, I pay more attention to low-code platforms. I participated in the development and construction of a low-code platform last year. I did a [public class live broadcast] in July this year. In that public class, I think that the online notebook platform is actually the master of the current low-code platform notion. The platform, because its core is used to块 complete various note elements, and each block corresponds to low code, because essentially these correspond to a piece of code.块块

On December 24, 2022, I had the honor to experience Serverlessthe products of Amazon Cloud Technology Build On. First of all Serverless, this concept is not the latest. I wrote " 25 Front-end Technology Stacks to Learn in 2022 for Intermediate and Advanced Front-低代码开发平台 ends Serverless 无服务器架构" at the beginning of the year . , Alibaba Cloud and other major cloud platforms have relevant introductions, but there are no mature, stable and feasible products to try out.

This time I experienced the domestic low-code platform again: UBMLproducts under Inspur Technology only need to use the inbuilder IDE development tool to complete the built-in low-code modules such as financial statements, administrative organization, commodity management, etc., and the fast output can be used for publishing Project products that have reached build production standards.

3. Use the inbuilder development tool to drag and drop to realize low-code product development

If we use the traditional program development method , assuming we want to develop a financial reimbursement and reimbursement management system, our development process will probably go through the following steps:

1. Set up a technical development team to be responsible for product, development, operation and maintenance. At least 5-6 people are needed here
2. Two projects need to be developed, namely the front-end user PC end and the back-end management system
3. Continuous post-maintenance, update and investment

The human, material and financial resources consumed above are by no means acceptable to a small and micro enterprise. In the post-epidemic era, the help and support of the Internet is even more needed to win life.

For small and micro enterprises or offline stores that have not yet formed a scale, developing programs by themselves is the least cost-effective method, and it is also the least recommended method. So if you want to have a fully controllable accounting system with almost zero costinbuilder UBML , you might as well try the solutions brought by Inspur Technology.

If you want to complete the experiment quickly, just follow the steps below.

It can be roughly divided into two parts: environment construction and low-code practical operation.

1. According to the manual or video https://live.csdn.net/room/csdnnews/NOJrQRAh (starting at 18:50), build a good environment (nodejs, jdk, database, a jit node global dependency package)
2. Download the inbuilder tool (https://ibc.inspurs.com/)
3. According to the video https://live.csdn.net/room/csdnnews/NOJrQRAh (30:00) minutes to start the project, it can be accessed through http://localhost:5200/, and then according to the video (38:00 ) minutes to start the first hands-on operation, which can be completed in about 5 minutes, and then you can continue other experiments, or create your own according to real business scenarios (it is recommended to create a new workspace before continuing)
4. Find the project directory, (you can see it in the setting button in the lower left corner or the work area in the upper right corner during the actual operation), and submit the project files except node_modules. This file is actually generated by the low-code platform for you and can be used in the production environment. Front and back end code!

In addition to the live broadcast, the organizer also thoughtfully prepared a super detailed graphic tutorial. Newcomers can experience the low-code platform just by following the tutorial step by step, and the participation is unprecedentedly smooth.

So next, I will explain how to use the platform from the above two parts.

4. Environment construction

According to the manual

In summary, you need to prepare 4 tools to build the environment:

software	Version	download link
Node.js	Node 8.0+	https://nodejs.org/zh-cn/download/
JDK	OpenJDK8(LTS)	https://adoptopenjdk.net/releases.html
database	PostgreSQL 10.0+	https://www.postgresql.org/download/windows/
IDE	inBuilder IDE Community Edition	https://ibc.inspures.com/

Note: It is recommended to install 12 or above in nodejs. After installation, a special global dependency package needs to be installed

npm install -g @farris/[email protected]

Install and configure in turn, if you need the official manual, you can also private message me v ( imqdcnn) to send it to you alone.

The sign of a successful environment setup is that you can access the low-code development platform interface through http://localhost:5200/.

5. Complete the low-code experiment in 5 minutes

1. When using the environment to build, log in to http://localhost:5200/ with the default system username and password

2. Click on the designer

3. After creating a workspace and enabling job creation, the specified directory will be set as the workspace to store the products and dependencies during the development process. The default new workspace is, and the location is a relative path. If you /worksapceinstall If there is no such directory under the root directory of the drive letter where the disk is located, it will be created automatically. It can also be changed to an absolute path.

That is, the workspace set here is actually the code it generates for you, and you can copy the project code here later

It can also be seen in the settings when conducting experiments, such as mine:

4. Enter the designer

Click the hands-on experiment application domain, and then click the basic data module (you can also click the Create button in the upper left corner to create application domains and modules)

Click on Executive Apps (or New App)

5. According to the live video https://live.csdn.net/room/csdnnews/NOJrQRAh, the first hands-on operation will start at the 38th minute, and it will take about 5 minutes to complete.

6. If you want to preview (debug button), please publish first

Seeing this interface means success.

6. Screenshot of the results of the experimental activity of the financial reimbursement report

7. Summary

Through this activity, the biggest feeling I have given is that for users, he can have the opportunity to have online services at a small cost, and for developers, he has also seen Inspur’s practice in this area, providing a great opportunity for 低代码developers Provides new ideas and reference.

inbuilderIn fact, it is far more powerful than you think. It has many built-in out-of-the-box projects, which can be quickly developed like building blocks. Of course, developers can also creatively customize projects according to their own needs and real business scenarios.

You can also see the activity introduction from here: https://marketing.csdn.net/p/dbf8ee27f154f238649643d47ca5ec04

The following is the code and demo video warehouse address generated by inbuilder: https://atomgit.com/ycluo/ubml

=============
If you have difficulties in web front-end development, interviews, and front-end learning routes, you can add me V: imqdcnn. Answer questions for free, and technical experts who have been deep in the industry for many years will help you solve bugs.

I wish you can become an excellent WEB front-end development engineer!