Method for providing front-end low-code / no-code development environment

Abstract

Provided is a method for providing a front-end low-code / no-code development environment. The method for providing a front-end development environment according to an embodiment of the present invention may: provide a UI view in which a front-end UI is displayed; and provide a flow view showing one or more flows for executing one or more UI elements constituting the front-end UI displayed in the UI view, thereby enabling a general developer other than a skilled expert developer to develop the front-end UI. In addition, according to an embodiment of the present invention, the method for providing a frontend development environment may receive a function of flow in a natural language via a prompt view, automatically generates the flow, and adds the flow to the flow view, thereby automating front-end UI development.

Description

How to provide a front-end low-code / no-code development environment

[0001] The present invention relates to a method for providing a development environment, and more particularly, to a method for providing a low-code / no-code development environment for a front-end UI (User Interface).

[0002] Figure 1 is a diagram illustrating a UI view displaying the front-end UI. As shown, the front-end UI consists of multiple UI elements. The source code for executing each UI element must be individually created and developed. This involves arranging UI elements in a UI view and implementing functions corresponding to user interactions in source code. For example, a graphic button is placed on the screen and coded to execute the associated function when the user clicks the graphic button.

[0003] However, when various user inputs are required through the front-end UI, the number of UI elements increases, and naturally, the source code to execute them also increases.

[0004] Meanwhile, during the development process, a lot of work must be done to check and modify the source codes one by one to check and modify the functions of the UI elements themselves as well as the functions related to them. As the source code connection becomes more complex, this task becomes very difficult for anyone who is not a professional developer.

[0005] This runs counter to the low-code / no-code development environment that has recently been gaining prominence worldwide, and requires a solution that allows even general developers without professional programming training to develop front-end UIs with complexly connected UI elements.

[0006] The present invention has been devised to solve the above problems, and the purpose of the present invention is to provide a method and system for providing a front-end development environment that provides a flow view listing flows for executing UI elements constituting a front-end UI displayed in a UI view, as a means for enabling general developers to develop a front-end UI with low code / no code.

[0007] In addition, another object of the present invention is to provide a method and system for providing a front-end development environment in which a function of a flow is input in natural language through a prompt view, a flow is automatically created, and the flow is added to a flow view.

[0008] A method for providing a front-end development environment according to one embodiment of the present invention for achieving the above purpose includes the steps of: providing a UI view displaying a front-end UI (User Interface); and providing a flow view displaying one or more flows for executing one or more UI elements constituting the front-end UI displayed in the UI view.

[0009] A flow may consist of one or more components connected in a sequence. A component may be configured to execute one or more of a UI block, a front-end function block, and a back-end function block.

[0010] A method for providing a front-end development environment according to an embodiment of the present invention may further include a step of immediately reflecting the modified content in a UI view when a component is modified through a flow view.

[0011] A method for providing a front-end development environment according to an embodiment of the present invention may further include a step of displaying only UI elements executed by the selected flow in the UI view when a specific flow is selected in the flow view.

[0012] A method for providing a front-end development environment according to an embodiment of the present invention may further include a step of displaying only a flow for executing a selected UI element in a flow view when a specific UI element is selected in a UI view.

[0013] A method for providing a front-end development environment according to an embodiment of the present invention may further include a step of immediately reflecting, when a UI element is modified in a UI view, the modified content in a flow for executing the UI element.

[0014] A method for providing a front-end development environment according to an embodiment of the present invention may further include: providing a prompt view for receiving input of a function of a flow in natural language; generating source code from natural language input through the prompt view using a generative AI engine; generating a flow from the generated source code; and adding the generated flow to the flow view.

[0015] The flow generation step may include a step of parsing and interpreting the generated source code to analyze functions within the source code; a step of mapping the functions to components based on the analysis results; and a step of combining the mapped components to generate a flow.

[0016] A front-end development platform according to another embodiment of the present invention includes a processor that provides a UI view displaying a front-end UI and a flow view displaying one or more flows for executing one or more UI elements constituting the front-end UI displayed in the UI view; and a storage unit that provides storage space required by the processor.

[0017] A method for providing a front-end development environment according to another embodiment of the present invention includes the steps of: providing a flow view representing one or more flows for executing one or more UI elements constituting a front-end UI displayed in a UI view displaying a front-end UI; and providing a prompt view for receiving input of a function of the flow in natural language.

[0018] A front-end development platform according to another embodiment of the present invention comprises: a processor that provides a flow view representing one or more flows for executing one or more UI elements constituting a front-end UI displayed in a UI view displaying a front-end UI, and a prompt view for receiving input of a function of the flow in natural language; and a storage unit that provides storage space required by the processor.

[0019] As described above, according to embodiments of the present invention, by providing a flow view listing flows for executing UI elements constituting a front-end UI displayed in a UI view, even general developers who are not skilled professional developers can develop a front-end UI.

[0020] In addition, according to embodiments of the present invention, when there are many UI elements composing a front-end UI, it is possible to work by checking the flow on a UI element-by-UI element basis through optional linkage display of flow-UI elements, thereby reducing development difficulties and occurrence of errors resulting from complexity due to an increase in UI elements.

[0021] In addition, according to embodiments of the present invention, front-end UI development can be automated by automatically generating a flow by inputting the function of the flow in natural language through a prompt view and adding the flow to the flow view.

[0022] Figure 1 is a UI view showing the front-end UI;

[0023] Figure 2 is a configuration of a front-end low-code / no-code development environment to which one embodiment of the present invention can be applied.

[0024] Figure 3 is an example of a flow configuration.

[0025] Figures 4 and 5 show the results of selective linkage display of flow and UI elements.

[0026] Figure 6 shows the linkage within the development environment.

[0027] Figure 7 shows the source code generation,

[0028] Figures 8 and 9 show flow generation,

[0029] Figure 10 is a front-end development platform according to another embodiment of the present invention.

[0030] Hereinafter, the present invention will be described in more detail with reference to the drawings.

[0031] An embodiment of the present invention proposes a method and system for providing a front-end low-code / no-code development environment. This technology provides a low-code / no-code development environment for a front-end user interface (UI).

[0032] Specifically, in addition to the UI view where the front-end UI is displayed, the development environment includes a flow view that lists flows for executing UI elements and a prompt view that automatically generates flows by receiving natural language input for the flow's functions, and the UI view, flow view, and prompt view are interrelated / synchronized.

[0033] FIG. 2 is a diagram illustrating the configuration of a front-end low-code / no-code development environment to which an embodiment of the present invention is applicable. As illustrated, the development environment to which an embodiment of the present invention is applicable provides a prompt view (110), a UI view (120), a flow view (130), a source code generation unit (140), a component management unit (150), a component mapping unit (160), a component combination unit (170), and a flow generation unit (180).

[0034] The UI view (120) displays the front-end UI under development. As illustrated, the front-end UI includes one or more (typically multiple) UI elements. The UI elements are composed of UI blocks and / or UI+function blocks. UI blocks are blocks that function solely as UIs and visualize visual information. UI+function blocks are blocks that receive user commands via the UI and perform corresponding functions.

[0035] For each UI element, a flow must be created to execute the UI element. This flow is created through the flow creation unit (180). The flows of the UI elements that constitute the front-end UI displayed in the UI view (120) are listed in the flow view (130).

[0036] In the flow view (130) of Fig. 2, 1) 'Flow 1' is a flow for executing a UI element placed on the left side of the front-end UI, 2) 'Flow 2' is a flow for executing a UI element placed in the center of the front-end UI, and 3) 'Flow 3' is a flow for executing a UI element placed on the right side of the front-end UI. In this way, the flow view (130) lists flows for executing UI elements.

[0037] Meanwhile, a flow is composed of one or more components, and in the flow view (130), the components of the flow are displayed sequentially by connecting them with arrows. For example, in FIG. 2, flow 3 is displayed sequentially by connecting three components (file reading, DB storage, and data visualization) with arrows.

[0038] FIG. 3 illustrates the configuration of Flow 3 generated by the Flow generation unit (180). As illustrated, Flow 3 executes a UI block and a front-end function block, which are components driven by the front-end, which is a user interface, and a back-end function block, which is a component executed by a server or background process. For example, 1) “File Read” of Flow 3 executes the “File Open Button” block, which is a UI block, and the “File Read” block, which is a front-end function block; 2) “DB Save” executes the “DB Save” block, which is a back-end function block; and 3) “Data Visualization” executes the “Data Visualization” block, which is a UI block.

[0039] In this way, components are created by utilizing UI blocks, front-end-function blocks, and back-end-function blocks alone or in combination, and the components created in this way are connected in order to create a flow.

[0040] Meanwhile, in the front-end development environment, only one of the flows listed in the flow view (130) can be selected, and only the UI elements executing the selected flow can be displayed in the UI view (120). In Fig. 4, only 'Flow 3' is selected in the flow view (130), and only the UI elements on the right executed by 'Flow 3' are displayed in the UI view (120).

[0041] When there are a lot of UI elements composing the front-end UI displayed in the UI view (120) (in fact, the front-end UI includes a lot of UI elements), a lot of flows are created, and each flow is linked to execute various UI blocks, front-end-function blocks, and back-end-function blocks, so the development and maintenance of the front-end UI are bound to be complicated. The optional linkage display function of the flow-UI element provided in the embodiment of the present invention can resolve this complexity by checking the flow for each UI element and enabling editing such as modification and deletion.

[0042] Furthermore, multiple flows may be selected in the flow view (130), and if multiple flows are selected, UI elements executed by the selected flows are displayed in the UI view (120). Fig. 5 illustrates a result in which all flows are selected in the flow view (130), and all UI elements are displayed in the UI view (120).

[0043] Conversely, if some of the UI elements that make up the front-end UI shown in the UI view (120) are selected, only the flows for the selected UI elements can be implemented to be displayed in the flow view (130). For example, if the UI element on the right side is selected in the UI view (120), only the flow 3 that executes the corresponding UI element is implemented to be displayed in the flow view (130).

[0044] Meanwhile, modifications to the graphical representation of UI elements can be made by modifying the UI block or UI+function block of the UI element in the UI view (120) (changing the position, size, properties, etc.). In this case, the modifications are immediately reflected in the corresponding component of the corresponding flow in the flow view (130).

[0045] Conversely, modifications to UI blocks linked to components of a flow in the flow view (130) are immediately reflected in the UI block and UI+function block of the corresponding UI element in the UI view (120). In other words, the UI elements in the UI view (120) and the flow in the flow view (130) are synchronized.

[0046] Referring again to Figure 2, the explanation is made. The prompt view (110) is a means for receiving input of the flow function in natural language, which is a human language. The flow function is expressed in the form of a descriptive query. In principle, there are no restrictions on the input format. However, since the flow is automatically generated and directly linked to UI elements according to the content entered in the prompt view (110), as shown in Figure 6, it is recommended to guide the user to input it in blocks according to the execution order.

[0047] As shown in Fig. 7, the source code generation unit (140) uses a generative AI engine to generate source code composed of a programming language from natural language input through the prompt view (110).

[0048] Generative AI engines are AI engines that learn programming languages ​​and generate source code for the functions of flows entered by users in natural language. These can be implemented using GitHub Copilot, GPT-3 DaVinci engines, or other engines.

[0049] Generative AI engines categorize each unit of a flow expressed in natural language into a function. They then express the connection between these functions within a representative function, such as Main(), in source code, representing the call order and input / output relationships between these functions. While the method and format may vary depending on the AI ​​engine, the implemented functionality is similar from the perspective of executing the generated source code.

[0050] The component management unit (150) is a tool that manages and provides the aforementioned components. The component mapping unit (160) parses and interprets the source code generated by the source code generation unit (140), analyzes functions within the source code, and maps the functions to components based on the analysis results. Then, the component combination unit (170) combines the components mapped by the component mapping unit (160) according to the execution order to create a flow. In this process, the component combination unit (170) can check and verify input and output data for each function. The process of creating a flow through component mapping and combination is illustrated in FIG. 8.

[0051] Function analysis engines, such as the V8 JavaScript Engine in the JavaScript programming language, can analyze functions within source code to extract key information (signatures) about them. These include the function name, input parameter and variable names, data types, and output variables and data types. Furthermore, key information can be gleaned from the source code within a function. Furthermore, the source code within the Main() function can be used to extract inter-function relationships. These include input / output relationships, data, and execution order.

[0052] Component mapping is the process of finding and mapping one of the components managed / provided by the component management unit (150) based on key information (signature) extracted from each function. Functions created by the generative AI engine can also be used as components without mapping. In this case, a process of verifying the source code created by the generative AI engine may be required to ensure safety and stability.

[0053] Meanwhile, components managed / provided by the component management unit (150) are treated as pre-verified components. Mapping specific components based on key information can be accomplished using a variety of methods, including 1:1 matching with key information and machine learning.

[0054] The flow generated by the component combination unit (170) is equivalent to the flow generated by the developer through the flow generation unit (180) as shown in FIG. 9, and is similarly added to the flow view (130), and can be modified through synchronization for the UI elements linked to the generated flow.

[0055] FIG. 10 is a diagram illustrating the configuration of a front-end development platform according to another embodiment of the present invention. The front-end development platform to which the embodiment of the present invention is applicable can be implemented as a server system comprising a communication unit (210), a processor (220), and a storage unit (230), as illustrated.

[0056] The communication unit (210) is a communication interface for connecting to a front-end UI developer terminal. The processor (220) provides the front-end development environment illustrated in FIG. 2 described above to the developer terminal via the communication unit (210). The storage unit (230) provides the storage space necessary for the processor (220) to function and operate.

[0057] So far, we have described in detail a preferred embodiment of a method for providing a front-end low-code / no-code development environment.

[0058] In the above embodiment, a flow view is provided that lists flows for executing UI elements that constitute the front-end UI displayed in the UI view, and in cases where there are many UI elements, the optional linkage display of flow-UI elements allows for checking and working on the flow by UI element unit.

[0059] Furthermore, by inputting the flow's functions in natural language through the prompt view and automatically generating the flow and adding it to the flow view, it is possible to automate front-end UI development.

[0060] Meanwhile, it goes without saying that the technical idea of ​​the present invention can also be applied to a computer-readable recording medium containing a computer program that performs the functions of the device and method according to the present embodiment. In addition, the technical idea according to various embodiments of the present invention can be implemented in the form of computer-readable code recorded on a computer-readable recording medium. The computer-readable recording medium can be any data storage device that can be read by a computer and store data. For example, the computer-readable recording medium can be a ROM, a RAM, a CD-ROM, a magnetic tape, a floppy disk, an optical disk, a hard disk drive, etc. In addition, the computer-readable code or program stored on the computer-readable recording medium can be transmitted through a network connected between computers.

[0061] In addition, although the preferred embodiments of the present invention have been illustrated and described above, the present invention is not limited to the specific embodiments described above, and various modifications can be made by a person having ordinary skill in the art to which the present invention pertains without departing from the gist of the present invention as claimed in the claims, and such modifications should not be understood individually from the technical idea or prospect of the present invention.

Claims

1. A step of providing a UI view that displays the front-end UI (User Interface); A method for providing a front-end development environment, comprising: providing a flow view representing one or more flows for executing one or more UI elements constituting a front-end UI displayed in a UI view; 2. In claim 1, The flow is, A method for providing a front-end development environment characterized in that one or more components are connected in sequence.

3. In claim 2, The component is, A method for providing a front-end development environment, characterized in that it is configured to execute at least one of a UI block, a front-end-function block, and a back-end-function block.

4. In claim 3, A method for providing a front-end development environment, characterized in that it further includes a step of immediately reflecting the modifications to the UI view when a component is modified through the flow view.

5. In claim 1, A method for providing a front-end development environment, further comprising: a step of displaying only UI elements executed by the selected flow in the UI view when a specific flow is selected in the flow view.

6. In claim 1, A method for providing a front-end development environment, further comprising: a step of displaying only the flow for executing the selected UI element in the flow view when a specific UI element is selected in the UI view.

7. In claim 1, A method for providing a front-end development environment, characterized in that it further includes a step of immediately reflecting the modifications to the flow for executing the UI element when a UI element is modified in the UI view.

8. In claim 1, A step of providing a prompt view for receiving input of the flow's functions in natural language; A step of generating source code from natural language input through a prompt view using a generative AI engine; Step of generating a flow from the generated source code; A method for providing a front-end development environment, characterized in that it further includes a step of adding the generated flow to a flow view.

9. In claim 8, The flow creation step is: A step of parsing and interpreting the generated source code and analyzing the functions within the source code; A step of mapping functions to components based on the analysis results; A method for providing a front-end development environment, characterized by including a step of creating a flow by combining mapped components.

10. A processor that provides a UI view that displays a front-end UI (User Interface), and provides a flow view that displays one or more flows for executing one or more UI elements that constitute the front-end UI displayed in the UI view; and A front-end development platform comprising a storage unit that provides storage space required by a processor.

11. A step of providing a flow view representing one or more flows for executing one or more UI elements constituting the front-end UI displayed in a UI view displaying the front-end UI (User Interface); A method for providing a front-end development environment, comprising: a step of providing a prompt view for receiving input of a function of a flow in natural language; 12. A processor that provides a flow view representing one or more flows for executing one or more UI elements constituting the front-end UI displayed in a UI view displaying the front-end UI (User Interface), and provides a prompt view for receiving input of the function of the flow in natural language; and A front-end development platform comprising a storage unit that provides storage space required by a processor.

Images