A step-by-step approach to low-code development

Abstract

The present invention relates to the field of low-code development technology, and specifically to a step-by-step storage low-code development method, including the following steps: S1, creating a data visualization screen, the visualization screen includes an editing area; S2, dragging components to the editing area, and configuring properties and setting data sources for the components in the editing area; S3, monitoring the configuration process of the components, and judging whether the properties of the monitored components are updated according to the preset update frequency, if the properties of a component are not updated and the time without update exceeds the preset lock time, the component is locked; if there are components with updated properties, the properties of the remaining components outside the locked components are updated; S4, after all components are configured and saved, the data visualization screen is published, and a publishing link is generated and stored in the server. This method can effectively reduce the freeze of the large screen and relieve the pressure on the background server.

Description

Technical Field

[0001] The present invention relates to the field of low-code development technology, and in particular to a low-code development method with step-by-step storage. Background Art

[0002] Low-code technology is a system development technology that uses visual modeling in a graphical interface to assemble and configure applications, and the development process basically does not require software development tools that involve code operations. Compared with traditional system development, low-code platforms have the characteristics of full-stack visual editing, full life cycle management, and low-code expansion capabilities. Code only needs to be written in a few cases, and most other cases can be solved through non-code methods such as visualization and drag-and-drop configuration.

[0003] Data visualization applications are the development trend of low-code development platforms. They are laid out in a modular way, and the charts and module positions on the large screen are edited by dragging and dropping. In most of the draggable visualization large screens, self-configured large screens are generated based on the customized layout of basic charts and text and pictures. The data displayed on the large screen is freely configured by inputting and binding local databases, API interfaces, and Excel methods.

[0004] However, all current data visualization application development platforms use real-time or scheduled storage methods to save all state components in the large screen, and each save uses a full data save mechanism. When there are many components in the large screen, each save consumes a lot of memory, which can easily cause the large screen to freeze, while in fact only the position, size and other parameters of a certain module are adjusted. In addition, when the component data source comes from the API interface or the video component data source, after configuring the data refresh frequency and saving the component, the data is requested in real time, causing the component data to be refreshed all the time, occupying the thread.

[0005] Therefore, how to reduce the lag of large screen and alleviate the pressure on the background server has become a problem that needs to be solved urgently. Summary of the invention

[0006] In view of the above-mentioned deficiencies in the prior art, the present invention provides a low-code development method with step-by-step storage, which can effectively reduce the lag of large screens and alleviate the pressure on the background server.

[0007] In order to solve the above technical problems, the present invention adopts the following technical solutions:

[0008] A step-by-step low-code development approach includes the following steps:

[0009] S1. Create a data visualization screen, wherein the visualization screen includes an editing area;

[0010] S2. Drag the component to the editing area, and configure the properties and data source of the component in the editing area;

[0011] S3. Monitor the configuration process of the component and determine whether the properties of the monitored component are updated according to the preset update frequency. If the properties of a component are not updated and the time without update exceeds the preset lock time, the component is locked; if there is a component with updated properties, the properties of the remaining components except the locked component are updated;

[0012] S4. After all components are configured and saved, publish the data visualization screen, generate a publishing link and store it in the server.

[0013] Preferably, in S2, when configuring the properties of a component, if the component is in a locked state, the locked state of the component is unlocked through a preset unlocking operation before editing.

[0014] Preferably, S2 includes:

[0015] S201, drag the component from the system chart component library to the large screen editing area;

[0016] S202, configuring common attributes of the component; the common attributes include basic information, size and position;

[0017] S203. According to the type of the component, configure the special properties, data source and data refresh frequency of the component; the types include data statistics components and industrial components.

[0018] Preferably, in S203, if the component is a mathematical statistics component, the configured special attributes include color matching and legends, and the data source configuration includes static data, dynamic data, SQL data and device data.

[0019] Preferably, in S203, if the component is an industrial component, the configured attributes include image mirroring and animation color, and the data source configuration includes an Internet of Things device.

[0020] Preferably, in S3, the locking time is 150-220 seconds.

[0021] Preferably, in S3, the updating frequency is 15-25 times / minute.

[0022] Preferably, in S4, the component is saved by manual saving.

[0023] Compared with the prior art, the present invention has the following beneficial effects:

[0024] 1. Using this method, after creating a visualization screen, when you drag a component to the editing area for property configuration, the component's property configuration process will be monitored, and the preset update frequency will be used to determine whether the properties of the monitored component have been updated. If the properties of a component are not updated and the time without update exceeds the preset lock time, it means that the component is very likely to have been configured and its properties will not change. Therefore, this method will lock the component. When the property content of a component changes and the property needs to be updated, the properties of the remaining components outside the locked component can be updated.

[0025] In other words, using this method, you can automatically identify and lock components that have completed property configuration. When the properties are updated later, the property data of the locked component no longer needs to request the component model to save the thread. In this way, as the configuration of each component is gradually completed, the number of thread requests when saving data will decrease, improving the efficiency of saving. In addition, by using the component model locking method, when the refresh frequency of the component data source is real-time, it can also reduce the pressure of front-end data requests and back-end data push.

[0026] In summary, this method can reduce the large-screen freeze situation and reduce the pressure on the server.

[0027] 2. If a component is locked when you configure its properties, you can unlock it by using a preset unlocking operation (such as double-clicking the component) and then configure it. In this way, even if you need to reconfigure a locked component, you can do so quickly.

[0028] 3. When configuring the properties of a component, general properties, special properties, data source and data refresh frequency will be configured. In addition to general property configuration, configuration will be performed based on the type of component. Each component can be configured reasonably and comprehensively to ensure the completeness and rationality of the component model.

[0029] 4. The lock duration is 150-220 seconds, which can avoid locking too quickly and causing frequent resolution of locked components, and locking too slowly, which can lead to very slow and limited effects in reducing large screen freezes. The update frequency is 15-25 times / minute, which can ensure the timely storage of changed attributes of each component.

[0030] 5. After all components are configured, save them manually to ensure that all components are successfully saved.

[0031] 6. After the data visualization screen is published, a publishing link is generated and stored on the server. Users can access the data through the link + the protection password when the screen was created. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] In order to make the purpose, technical solution and advantages of the invention more clear, the present invention will be further described in detail below with reference to the accompanying drawings, in which:

[0033] Figure 1 It is a flow chart in the embodiment. DETAILED DESCRIPTION

[0034] The following is a further detailed description through specific implementation methods:

[0035] Example:

[0036] like Figure 1 As shown, this embodiment discloses a low-code development method for step-by-step storage, including the following steps:

[0037] S1. Create a data visualization screen, wherein the visualization screen includes an editing area;

[0038] S2. Drag the component to the editing area, and configure the properties and data source of the component in the editing area; specifically, step 2 includes:

[0039] S201, drag the component from the system chart component library to the large screen editing area;

[0040] S202, configuring common attributes of the component; the common attributes include basic information, size and position;

[0041] S203. According to the type of component, configure the component with special attributes, data source configuration and data refresh frequency; the types include data statistics components and industrial components. If the component is a mathematical statistics component, the configured special attributes include color matching and legends, and the data source configuration includes static data, dynamic data, SQL data and device data. If the component is an industrial component, the configured attributes include image mirroring and animation color, and the data source configuration includes IoT devices.

[0042] S3. Monitor the configuration process of the component, and determine whether the properties of the monitored component are updated according to the preset update frequency. If the properties of a component are not updated and the time without update exceeds the preset lock time, the component will be locked; if there is a component with updated properties, the properties of the remaining components outside the locked component will be updated. Among them, the locking time is 150-220 seconds. In this embodiment, the locking time is 180 seconds. In this way, it can be avoided that locking too quickly causes the locked component to be frequently resolved, and it can also be avoided that locking too slowly causes the effect of reducing large-screen freezes to be very slow and limited. The update frequency is 15-25 times / minute, and the update rate in this embodiment is 20 times / minute, that is, once every 3 seconds. Such an update frequency can ensure the timely storage of the changed properties of each component.

[0043] S4. After all components are configured and saved, publish the data visualization screen, generate a publishing link and store it in the server. In the specific implementation, save the components manually. In this way, all components can be successfully saved.

[0044] When configuring the properties of a component in S2, if the component is in a locked state, the component is unlocked by a preset unlocking operation before editing. In this embodiment, the unlocking operation is double-clicking the locked component. In this way, even if a locked component needs to be reconfigured, the operation can be completed quickly.

[0045] Using this method, after creating a visualization screen, when dragging a component to the editing area for property configuration, the component's property configuration process will be monitored, and the properties of the monitored component will be determined according to the preset update frequency. If the properties of a component are not updated and the time without update exceeds the preset lock duration, it means that the component is very likely to have been configured and its properties will not change. Therefore, this method will lock the component. When the property content of a component changes and the property needs to be updated, the properties of the remaining components other than the locked component can be updated. In other words, using this method, the components that have completed the property configuration can be automatically identified and locked. When the property is updated later, the property data of the locked component does not need to request the component model to save the thread. In this way, as the configuration of each component is gradually completed, the number of thread requests when saving data will be less and less, improving the efficiency of saving. In addition, the component model locking method can reduce the pressure of front-end data requests and back-end data push when the refresh frequency of the component data source is real-time. In summary, this method can reduce the situation of large screen freeze and reduce the pressure on the server.

[0046] To facilitate understanding, the following two examples are provided for illustration:

[0047] Example 1

[0048] Create a large-screen visualization of factory production and operation management data. The screen size is 1920 pixels in width and 1080 pixels in height. The large screen mainly displays factory production order data, sales order data, inventory, and factory dynamics. The large-screen password is ******; based on the basic information, create a large-screen visualization of the data, and add a background picture or background color to the large-screen.

[0049] Add text components, line chart components, bar chart components, and table components.

[0050] Text component: Title: Production line contact number; Prompt: Current inventory; Component size: width 179.58 pixels, height 40 pixels; Position: (-12.47,314.48), the size and position of the component model attributes are automatically obtained, and this component has no data source.

[0051] Line chart component: Title: Production Order; Prompt: Statistics of production order data in the past seven days; Component size: width 600 pixels, height 300 pixels; Position: (1.66,381.98), the size and position of the component model attributes are automatically obtained, the component data source API: daily order number API in the production order system, data refresh frequency: 24:00 every day.

[0052] Bar chart component: Title: Sales Order; Prompt: Sales order data statistics for the past seven days; Component size: 600 pixels in width, 300 pixels in height; Position: (200.66,381.98), the size and position of the component model attributes are automatically obtained, the component data source API: the daily order number API in the sales order system, data refresh frequency: 24:00 every day.

[0053] Table component: Title: Factory Dynamics; Prompt: Latest News; Component size: 600 pixels in width, 300 pixels in height; Position: (200.66, 681.98), the size and position of the component model attributes are automatically obtained, the component data source API: Sales Order Details API, data refresh frequency: every hour.

[0054] During the configuration of the above four components, during the editing of the text component [Production Line Contact Phone], the component status is monitored and saved every 3 seconds; when editing the bar chart component [Sales Order], the text component [Production Line Contact Phone] is not edited, and its component data attributes are not changed. After 180 seconds, the component data of [Production Line Contact Phone] is locked. Later, when editing the line chart component [Production Order] and the table component [Factory Dynamics], the bar chart component [Sales Order] is locked without changing within 180 seconds. Then, only the thread for saving the data models of the two components, the line chart component [Production Order] and the table component [Factory Dynamics], needs to be requested.

[0055] Based on all the components in the edited state and locked state in the factory production and operation management data visualization screen, manually save the component data model after editing. Click Publish to generate a publishing link, which is stored in the server. Users can access the data through the link + the protection password when the screen is created.

[0056] Example 2

[0057] Create a large screen for visualizing CNC machine tool monitoring data. The screen size is 1920 pixels wide and 1080 pixels high. The screen mainly displays the machine tool startup status, machine tool running time, and energy consumption data. The password for the large screen is ******;

[0058] Create a data visualization screen based on basic information and add a background image or background color to the data screen.

[0059] Added CNC machine pictures, switch gear, ammeter assembly, voltmeter assembly.

[0060] Image component: Title: CNC Machine Tool; Component size: width 200 pixels, height 40 pixels; Position: (18.47,314.48). The size and position of the component model attributes are automatically obtained. This component has no data source.

[0061] Switch device component: Title: Switch; Prompt: Current state; Component size: Width 40 pixels, Height 40 pixels; Position: (1.66, 381.98). The size and position of the component model attributes are automatically obtained. The data of this component comes from the IoT device. The data refresh frequency is real-time.

[0062] Ammeter component: Title: Current; Component size: width 50 pixels, height 50 pixels; Position: (200.66, 381.98). The size and position of the component model attributes are automatically obtained. The data of this component comes from the IoT device. The data refresh frequency is real-time.

[0063] Voltmeter component: Title: Voltage; Component size: width 50 pixels, height 50 pixels; Position: (200.66, 681.98). The size and position of the component model attributes are automatically obtained. The data of this component comes from the IoT device. The data refresh frequency is real-time.

[0064] During the configuration of the above four components, the image component [CNC machine tool] is edited, the front-end component status is monitored, and a 3S request is saved once; the data is a static image, and after the attribute does not change for 180S, the component data of the image component [CNC machine tool] is locked;

[0065] The data of [Switch Device], [Amperemeter], and [Voltmeter] are requested in real time and saved in local components. During the editing and debugging process, the back-end device data is sent to the front-end all the time, and the data status is updated in real time, which causes the front-end data interface request pressure. The update status of the three component attributes is monitored in real time. After one of the groups is in the 180S component lock state, the back-end data does not need to be sent to the front-end editing page, and the data model state of the component is locked. Reduce the pressure of front-end data request and back-end data push.

[0066] Based on all the components in the edited state and locked state in the CNC machine tool monitoring data visualization screen, after editing, manually save the component data model. Click Publish to generate a publishing link, which is stored in the server. Users can access the data through the link + the protection password when the screen was created.

[0067] Finally, it should be noted that the above embodiments are only used to illustrate the technical solution of the present invention rather than to limit the technical solution. Those skilled in the art should understand that those modifications or equivalent substitutions of the technical solution of the present invention that do not depart from the purpose and scope of the technical solution should be included in the scope of the claims of the present invention.

Claims

1. A step-by-step storage low-code development method, characterized in that: The following steps are involved: S1. Create a data visualization screen, wherein the visualization screen includes an editing area; S2. Drag the component to the editing area, and configure the properties and data source of the component in the editing area; the content of the data source setting includes data source configuration and data refresh frequency configuration; S3, monitoring the configuration process of the component, and judging whether the attributes of the monitored component are updated according to the preset update frequency, if the attributes of a component are not updated and the time without update exceeds the preset lock time, the component is locked; If there are components whose properties are updated, the properties of the remaining components except the locked component will be updated; S4. After all components are configured and saved, publish the data visualization screen, generate a publishing link and store it in the server.

2. The step-by-step storage low-code development method according to claim 1, characterized in that: In S2, when configuring the properties of a component, if the component is in a locked state, the locked state of the component is unlocked through a preset unlocking operation before editing.

3. The step-by-step storage low-code development method according to claim 2, characterized in that: S2 includes: S201, drag the component from the system chart component library to the large screen editing area; S202, configuring common attributes of the component; the common attributes include basic information, size and position; S203, configuring special attributes, data source configuration, and data refresh frequency configuration for the component according to the type of the component; the type includes data statistics components and industrial components; In S203, if the component is a mathematical statistics component, the configured special attributes include color matching and legends, and the data source configuration includes static data, dynamic data, SQL data, and device data; if the component is an industrial component, the configured special attributes include image mirroring and animation color, and the data source configuration includes Internet of Things devices.

4. The step-by-step storage low-code development method according to claim 1, characterized in that: In S3, the locking time is 150-220 seconds.

5. The step-by-step storage low-code development method according to claim 4, characterized in that: In S3, the updating frequency is 15-25 times / minute.

6. The step-by-step storage low-code development method according to claim 1, characterized in that: In S4, the components are saved by manually saving.

Images