An intelligent low-code development method and system based on source code

Abstract

The present invention discloses a source code-based intelligent low-code development method and system, the method comprising: S1, building an intelligent low-code development tool; building a local development environment server; an AI-assisted programming module generates source code through a large language model, and / or a visual design module generates source code through user interaction events; saving to a code file through a saving module; S2, converting the front-end module source code into an abstract syntax tree AST in the local development environment server; S3, marking the component code according to the AST, and regenerating the source code; S4, sending the regenerated marked source code to the visual design module; S5, the local development environment server builds module code according to the regenerated marked source code, and renders it to the visual design module; S6, removing the marks in the marked source code through the saving module, and saving it to the code file corresponding to the source code.

Description

Technical Field

[0001] The present invention belongs to the field of computer software technology, and in particular, relates to an intelligent low-code development method and system based on source code. Background Art

[0002] In response to the market demand for rapid application development, low-code development platforms have developed into an effective solution. However, existing low-code development platforms still have limitations.

[0003] Low-code development platforms usually adopt a Schema-driven solution, which simplifies the creation and management of applications using predefined structures (Schema). However, this solution also limits the flexibility and scalability of application development. Schema-based design requires developers to define the data structure at the beginning, which may make it difficult to quickly adjust when project requirements change. Limited by preset components and templates, many complex requirements of specific business logic cannot be met.

[0004] Applications built using such low-code development platforms often cannot run independently from the platform, making it difficult for users to migrate or change platforms in the future. Even if some low-code development platforms provide the ability to export source code, this method is one-way and the low-code development platform cannot be used for secondary development of the source code.

[0005] In addition, the cost of learning and using low-code development platforms is also high. Although visual design tools reduce the workload of writing code, the operation of design and orchestration tools is also complicated, and learning and using them also requires a lot of effort, and this skill will not be used in development scenarios that are separated from low-code development platforms. Summary of the invention

[0006] In response to the above technical problems, the present invention provides a source code-based intelligent low-code development method and system to improve the flexibility of low-code development.

[0007] In order to achieve the above object, the technical solution adopted by the present invention is: An intelligent low-code development method based on source code includes the following steps: Based on the VSCode code editor, we expand and build intelligent low-code development tools. Intelligent low-code development tools include visual design modules, AI-assisted programming modules, and saving modules. The AI-assisted programming module is connected to a large language model. Build a local development environment server based on the front-end build tool; the local development environment server includes a source code parsing module and a component tagging module; the front-end build tool also includes a build module; S1. Establish a communication connection between the intelligent low-code development tool and the local development environment server; The AI-assisted programming module generates source code through a large language model, and / or the visual design module generates source code through user interaction events; the code is saved to a code file through the save module; the update of the code file triggers the local development environment server to rebuild the module code.

[0008] S2. After the code file is updated, the source code parsing module of the local development environment server converts the front-end module source code into an abstract syntax tree AST; S3. The component marking module marks the component code according to the AST and regenerates the source code to obtain the marked source code; S4. Send the regenerated marked source code to the visual design module; S5. According to the regenerated marked source code, the module code is constructed through the construction module of the front-end construction tool and rendered to the visual design module; through the mapping of source code and DOM nodes, the two-way update of source code and visual design module interface is realized. The free choice of programming method is realized. The program can be developed multiple times without relying on any service or tool.

[0009] S6. Remove the mark in the marked source code through the saving module and save it to the code file corresponding to the source code. The code file contains unmarked code, and the final source code does not rely on low-code development tools.

[0010] Furthermore, S1 includes: Build communication modules, including building communication server modules in intelligent low-code development tools and building communication client modules in local development environment servers; When loading the intelligent low-code development tool, start the communication server module; When starting the local development environment server, call the communication client module to establish a connection with the communication server module.

[0011] Furthermore, S1 includes: Design the front-end page through the user interaction events of the visual design module in the intelligent low-code development tool; The user interaction conversion module maps user interaction events into traversal and modification of AST; Regenerate source code based on the modified AST and save it in a code file; Updates to code files trigger the local development environment server to rebuild the module code.

[0012] Furthermore, S2 includes: Build a module loader, and call the module loader when receiving a module loading request (i.e., when opening the Vue file visual editor or updating a code file); The module loader traverses the front-end module source code and converts it into AST. Optionally, it finds the AST nodes of the template, script, and style of the front-end module source code.

[0013] Furthermore, S3 includes: Traverse the AST nodes of the template part of the front-end module source code to find all editable components; According to the editable component type, mark the container component and the common component respectively, wherein the mark content includes generating a unique identifier, the component type, and the container component slot placeholder, and the adding mark means adding a preceding node or a child node for identification to the component node AST in the AST; Regenerate source code based on the AST after adding the markers.

[0014] Furthermore, S4 includes: Send the regenerated tagged source code to the communication server module in the intelligent low-code development tool through the communication client module; The intelligent low-code development tool saves the marked source code in the global cache for other modules to call, so as to obtain the correspondence between DOM nodes and component codes through marking more quickly. The marked code in the cache is used to map the component code in the Vue source code to the rendered DOM nodes. It is only used in the visual development process. The mark is added by the component mark module and can be updated when the local development environment server is built.

[0015] Furthermore, S5 includes: Return the regenerated tagged source code in the module loader, hand it over to the local development environment server to build the module code, and render it to the design view; The module code includes the element code corresponding to the component tag; With the Vue file visual editor open, the local development environment server updates the design view of the Vue file visual editor through the built module code HMR.

[0016] Furthermore, S1 also includes: through multiple rounds of dialogues with the AI ​​programming agent of the AI-assisted programming module, the AI ​​programming agent modifies the current source code and saves it into a code file; the AI-assisted programming module is equivalent to a client, which is used to communicate with the AI ​​programming agent (server), and the large language model interface provided by the AI ​​programming agent generates source code. The AI-assisted programming module converts the source code returned by the agent into instructions for modifying the code.

[0017] Send the current page source code, as well as optional page types, interaction logic, business processes, data agents, interface descriptions, UI descriptions, etc. to the AI ​​programming agent through natural language; Through multiple rounds of dialogue and combined with the context, the AI ​​programming agent generates source code and saves it to a code file.

[0018] The present invention also discloses a source code-based intelligent low-code development system, including: an intelligent low-code development tool and a local development environment server.

[0019] The local development environment server includes: Source code parsing module, used to parse the front-end module source code and convert it into AST; The component tag module is used to add tags to component code by traversing AST in the module loader, establish a mapping relationship between DOM elements and component code, and regenerate source code based on AST; A communication module is used to send the source code loaded and marked by the local development environment server to the visual design module through the communication module of the low-code development tool; Intelligent low-code development tools include: AI-assisted programming module: The AI-assisted programming module is connected to a large language model and is used to conduct multiple rounds of dialogue through natural language and generate front-end source code; Visual design module, used to preview the front-end page through the graphical user interface, view the page structure, and create and modify the page content through interactive methods such as clicking, dragging, and modifying settings; The user interaction conversion module is used to convert user interaction events into traversal and modification of AST, and convert them into source code based on the modified AST.

[0020] Save the module, remove the markup code in the source code, and output it to the corresponding code file (code files include vue files, routing configuration files, API access files, test files, etc.).

[0021] Furthermore, the source code-based intelligent low-code development system is characterized in that the system also includes: The visual design module is a set of graphical user interface tools based on the VSCode code editor extension, including: page outline, material panel, visual editor, component settings panel; The page outline is used to display the tree structure of components in the current Vue file, as well as the activation status of components during visual editing; by clicking on a tree node, you can switch the activation status of a component; The Materials panel is used to select components and / or page templates, providing the source for creating pages and adding components to the visual editor; The visual editor is a custom editor for visually editing Vue files, including editing tools and design views. The editing tool is used to refresh the design view and set the design view parameters; the design view is used to preview the rendering results of the Vue file, and through visual operations, the components in the page can be activated, added, deleted, moved, and displayed; The component settings panel is used to set the properties, styles, and events of the currently activated component.

[0022] The AI-assisted programming module is used to generate front-end source code according to requirements through multiple rounds of dialogue between natural language and AI programming agents. It includes an AI-assisted programming panel, which is used to send requirements to the large language model interface provided by the AI ​​programming agent and obtain the AI-generated source code. Developers can update the source code to the source code file and save it by clicking the "Copy" or "Apply" button.

[0023] The user adds components and moves the position of components by dragging, and the node structure in the AST will be modified accordingly; the component ID is obtained when dragging starts from the material panel, and the component introduction code, template code, and style code information are obtained through the component ID when releasing in the design view of the Vue file visual editor; the release position information is obtained through the release event; the user interaction conversion module adds a sub-node of the component introduction code under the script node in the AST according to the component information, adds a sub-node of the style code under the style node, and adds a sub-node of the template code under the template node in the AST according to the position information; Users can change the appearance and interactive behavior of components by setting the properties, styles, and events of components in the component settings panel. The child nodes of the corresponding nodes in the AST will be modified. The user-modified setting data and the current component unique identifier will be sent to the Vue visual editor. Through the component unique identifier, the component code in the source code template part is traversed and found. According to the modified setting data, the properties of the AST are modified to add, modify, or delete AST nodes. The source code is regenerated according to the modified AST, and the marked code is cleared and saved in the code file. The local development environment server will monitor the file changes, rebuild the module code, and update it to the design view through the built module code HMR, so that users can see the page changes in real time. The user selects a page template in the material panel, obtains the source code of the template, and overwrites it into the code file to create a typical page.

[0024] The present invention has the following beneficial effects: the present invention uses a local development environment, has strong scalability, completely gets rid of the constraints of the online platform, does not need to deploy a remote server, and enables developers to use it freely in any front-end project.

[0025] Based on the source code abstract syntax tree (AST) driving mode, there is no private domain-specific language (DSL) and protocol, which breaks the limitations of preset components and templates, and gives developers greater flexibility to develop business components, debug and use them in real time; through the two-way conversion of source code and AST, the present invention not only supports developers to perform visual development, but also allows source code editing, realizing an intuitive and efficient development experience, while maintaining the flexibility and convenience of the development process without the need for additional learning costs.

[0026] The present invention realizes the mode of "source code in, source code out", does not rely on the runtime environment of any specific platform, makes secondary development easy, simplifies the cumbersome setting process, and greatly improves the development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] Figure 1 A flow chart of the source code-based intelligent low-code development method provided for an embodiment of the present invention.

[0028] Figure 2 A schematic diagram of the structure of a source code-based intelligent low-code development system provided for an embodiment of the present invention.

[0029] Figure 3 A schematic diagram of the structure of a visual design module based on VSCode extension of the source code-based intelligent low-code development system provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0030] To facilitate understanding by those skilled in the art, the present invention is further described below in conjunction with embodiments and drawings.

[0031] Figure 1 The following is a flow chart of a source code-based intelligent low-code development method provided by an application embodiment. Figure 2 The source code-based intelligent low-code development system structure is shown.

[0032] The development method of this embodiment expands two methods, visual editing and AI-assisted code generation, based on source code programming to improve development efficiency. The code generated by AI is relatively rough, and the cost of repeated communication through language is very high. To solve this problem, based on the rough code, visual editing is more efficient and convenient. For more complex requirements and logic, source code editing can also be performed directly, and modifications to the source code can be previewed in real time based on the local development environment server. Together, we can achieve intelligent low-code development.

[0033] include: S1: The intelligent low-code development tool establishes a communication connection with the local development environment server; Specifically, an intelligent low-code development tool is built based on the extension of the VSCode code editor. It includes a WebSocket communication server module. When the intelligent low-code development tool is loaded, the WebSocket communication server module is started and waits for the client to connect. Based on the front-end building tools (such as Vite or webpack), build a local development environment server plug-in to monitor code file updates and trigger reconstruction. The local development environment server includes a source code parsing module, a component tagging module, and a WebSocket communication client module. When the local development environment server is started, the WebSocket communication client module is called to connect to the WebSocket communication server in the intelligent low-code development tool.

[0034] S2: Convert the front-end module source code into AST in the local development environment server; Specifically, the load hook (i.e., module loader) is implemented in the local development environment server plug-in. When a module loading request is received (i.e., when the Vue file visual editor is opened or the code file is updated), the load hook is called to trigger the refactoring.

[0035] In the load hook, get the module source code of the module loading request, and use the AST-based JavaScript / Typescript / HTML code conversion tool GoGoCode to convert the source code into AST; Use GoGoCode's API, that is, find(' <template>< / template> ')、find(' <script>< / script> '), find(' <style>< / style> ') Find the AST nodes of the template, script, and style parts of the Vue file source code respectively.

[0036] S3: The component marking module marks the component code according to AST and regenerates the source code; Specifically, use GoGoCode to traverse the AST nodes of the template part of the Vue source code and find all editable components, as follows: templateAst.find('<$_$>').each((item) =>{ mark(item) }) According to the editable component type, add tags to container components and common components respectively. The tag content includes generating a unique identifier, component type, and container component slot placeholder. Adding tags means adding a preceding node or child node for identification to the component node in the AST. Regenerate source code based on the AST after adding the mark, such as: <lowcode-mark data-uid="klds9ke8dc" data-type="container" / > <h-modal> <lowcode-mark data-uid="stl2ldfg8d" data-type="common" / > <h-button type="primary"> submit< / h-button> < / h-modal> S4: Send the regenerated tagged source code to the visual design module of the intelligent low-code development tool; Specifically, the regenerated marked source code is sent to the WebSocket communication server module of the intelligent low-code development tool through the WebSocket communication client module; Optionally, the intelligent low-code development tool saves the marked source code in the global cache for other modules to call, so as to obtain the correspondence between DOM nodes and component codes more quickly.

[0037] S5: Build the module code through the building module of the front-end building tool according to the regenerated marked source code, and render it to the visual design module; realize the two-way update of the source code and the visual design module interface through the mapping of the source code and the DOM node; Specifically, the regenerated tagged source code is returned in the load hook of the local development environment server plug-in, and the local development environment server continues to build the module code HMR, and renders it to the design view through HMR; the module code contains the element code corresponding to the component tag; S6: Modify the source code through visual design or AI-assisted programming and save it in a code file.

[0038] Specifically, Figure 3 As shown, the intelligent low-code development tool is a set of graphical user interface tools based on the VSCode code editor extension, including: page outline, material panel, visual editor, component settings panel; The page outline is a tree view based on the VSCode extension. It provides a command to receive the latest Vue source code, convert the Vue source code into AST, traverse the AST of the Vue template part, convert it into the data structure required by the tree view, and render the tree structure of the components in the Vue file; The material panel is a WebView view based on the VSCode extension. Materials include optional standard components, local components, and page templates. The intelligent low-code development tool only provides material usage configuration, which is used to generate source code for using materials when creating pages and adding components to the visual editor. It is not the material itself. The Vue files in the local project can be used at any time to analyze the component source code using AI, automatically generate configuration files, and set them as local components, so that they can be reused in the material panel.

[0039] The Vue file visual editor is a custom editor based on the VSCode extension. Its main part is a design view implemented by an IFrame. The design view loads the preview page rendered by the local development environment server and injects the js library required for interactive operations into the page. The component settings panel is based on the WebView view of the VSCode extension. When you click an element in the design view or click a component node in the page outline in the Vue file visual editor, the command provided by the component settings panel is called to pass in the currently activated component information and display it in the panel; Users add components and move component positions by dragging, and the node structure in AST will be modified accordingly; the component ID is obtained when dragging starts from the material panel, and the component introduction code, template code, style code and other information are obtained through the component ID when releasing in the design view of the Vue file visual editor; the release position information is obtained through the release event; the user interaction conversion module adds a sub-node of the component introduction code under the script node in AST according to the component information, adds a sub-node of the style code under the style node, and adds a sub-node of the template code under the template node in AST according to the position information; Users can change the appearance and interactive behavior of components by setting the properties, styles, and events of components in the component settings panel. The child nodes of the corresponding nodes in the AST will be modified; the user-modified setting data and the current component unique identifier will be sent to the Vue visual editor; the component code in the source code template part is traversed through the component unique identifier; the properties of the AST are modified according to the modified setting data, and AST nodes are added, modified, or deleted; the source code is regenerated according to the modified AST, and the marked code is cleared and saved in the code file; the local development environment server will monitor the file changes, rebuild the module code, and update it to the design view through HMR, so that users can see the page changes in real time.

[0040] The user selects a page template in the material panel, obtains the source code of the template, and overwrites it into the code file to create a typical page.

[0041] In the AI-assisted programming panel, users submit code writing requirements to the AI ​​programming agent using natural language. Through multiple rounds of dialogue, requirements are constantly corrected, completed, and refined, and the AI ​​programming agent generates source code and mock test cases and returns them to the AI-assisted programming panel. After confirmation, users select the code returned by the application, and the saving module writes the code into the front-end code file and test file. The local development environment server monitors file changes, rebuilds the module code, and updates it to the design view through HMR. The above embodiments are only for illustrating the technical idea of ​​the present invention, and cannot be used to limit the protection scope of the present invention. Any changes made on the basis of the technical solution in accordance with the technical idea proposed by the present invention shall fall within the protection scope of the present invention.

Claims

1. A source code-based intelligent low-code development method, characterized in that: The following steps are involved: Build intelligent low-code development tools based on VSCode code editor; intelligent low-code development tools include visual design module, AI-assisted programming module, and saving module. The AI-assisted programming module is connected to a large language model; Build a local development environment server based on the front-end build tool; the local development environment server includes a source code parsing module and a component tagging module; the front-end build tool also includes a build module; S1. Establish a communication connection between the intelligent low-code development tool and the local development environment server; The AI-assisted programming module generates source code through a large language model, and / or the visual design module generates source code through user interaction events; and the code is saved to a code file through a saving module; S2. After the code file is updated, the source code parsing module of the local development environment server converts the front-end module source code into an abstract syntax tree AST; S3. The component marking module marks the component code according to the AST and regenerates the source code to obtain the marked source code; S4. Send the regenerated marked source code to the visual design module; S5. Build the module code through the building module of the front-end building tool according to the regenerated marked source code, and render it to the visual design module; realize the two-way update of the source code and the visual design module interface through the mapping of the source code and the DOM node; S6. Remove the mark in the marked source code through the saving module and save it to the code file corresponding to the source code.

2. The source code-based intelligent low-code development method according to claim 1 is characterized in that: The S1 includes: Build communication modules, including building communication server modules in intelligent low-code development tools and building communication client modules in local development environment servers; When loading the intelligent low-code development tool, start the communication server module; When starting the local development environment server, call the communication client module to establish a connection with the communication server module.

3. The source code-based intelligent low-code development method according to claim 1 is characterized in that: The S1 includes: Design the front-end page through the user interaction events of the visual design module in the intelligent low-code development tool; The user interaction conversion module maps user interaction events into traversal and modification of AST; Regenerate source code based on the modified AST and save it in a code file; Updates to code files trigger the local development environment server to rebuild the module code.

4. The source code-based intelligent low-code development method according to claim 3 is characterized in that: The S2 includes: Building a module loader, and calling the module loader when receiving a module loading request; The module loader converts the front-end module source code into AST, and finds the AST nodes of the template, script, and style of the front-end module source code respectively.

5. The source code-based intelligent low-code development method according to claim 4 is characterized in that: The S3 includes: Traverse the AST nodes of the template part of the front-end module source code to find all editable components; According to the editable component type, add tags to container components and common components respectively; The marking content includes generating a unique identifier, component type, and container component slot occupancy; Regenerate source code based on the AST after adding the marker.

6. The source code-based intelligent low-code development method according to claim 5 is characterized in that: The S4 includes: Send the regenerated marked source code to the communication server module through the communication client module; Intelligent low-code development tools save the marked source code in a global cache.

7. The source code-based intelligent low-code development method according to any one of claims 1 to 6, characterized in that: The S5 includes: Return the regenerated tagged source code in the module loader, hand it over to the local development environment server to build the module code, and render it to the design view; The module code includes the element code corresponding to the component tag; With the Vue file visual editor open, the local development environment server updates the design view of the Vue file visual editor through the built module code HMR.

8. An intelligent low-code development system based on source code, characterized in that: Used to implement the source code-based intelligent low-code development method described in any one of claims 1 to 7, comprising: an intelligent low-code development tool, a local development environment server; The local development environment server includes: Source code parsing module, used to parse the front-end module source code and convert it into AST; The component tag module is used to add tags to component codes by traversing AST, establish a mapping relationship between DOM nodes and component codes, and regenerate source code based on AST; The communication module sends the source code loaded and marked by the development environment server to the visual design module through the communication module of the low-code development tool; Intelligent low-code development tools include: AI-assisted programming module: The AI-assisted programming module is connected to a large language model and is used to conduct multiple rounds of dialogue through natural language and generate front-end source code; Visual design module, used to preview the front-end page through the graphical user interface, view the page structure, and create and modify the page content by clicking, dragging, and modifying settings interactively; The user interaction conversion module is used to convert user interaction events into traversal and modification of AST, and convert the modified AST into source code; Save the module, remove the marker code from the source code, and output it to the corresponding code file.

9. The source code-based intelligent low-code development system according to claim 8, characterized in that: The visual design module is a graphical user interface tool based on the VSCode code editor extension, including: page outline, material panel, visual editor, component settings panel; The page outline is used to display the tree structure of components in the current Vue file, as well as the activation status of components during visual editing; by clicking on a tree node, you can switch the activation status of a component; The Materials panel is used to select components and / or page templates, providing the source for creating pages and adding components to the visual editor; The visual editor is a custom editor for visually editing Vue files, including editing tools and design views; the editing tool is used to refresh the design view and set the design view parameters; the design view is used to preview the rendering results of the Vue file, and through visual operations, the components in the page can be activated, added, deleted, moved, and displayed; Component settings panel, used to set the properties, styles, and events of the currently activated component; The AI-assisted programming module includes an AI-assisted programming panel, which is used to send requirements to the large language model interface provided by the AI ​​programming agent and obtain the AI-generated source code.

10. The source code-based intelligent low-code development system according to claim 9, characterized in that: The user adds components and moves the position of components by dragging, and the node structure in the AST will be modified accordingly; the component ID is obtained when dragging starts from the material panel, and the component introduction code, template code, and style code information are obtained through the component ID when releasing in the design view of the Vue file visual editor; the release position information is obtained through the release event; the user interaction conversion module adds a sub-node of the component introduction code under the script node in the AST according to the component information, adds a sub-node of the style code under the style node, and adds a sub-node of the template code under the template node in the AST according to the position information; The user changes the appearance and interactive behavior of the component by setting the properties, styles, and events of the component in the component settings panel. The child nodes of the corresponding node in the AST will be modified. The user's modified setting data and the current component unique identifier will be sent to the Vue visual editor. Through the component's unique identifier, the component code in the source code template part is traversed and found. According to the modified setting data, the properties of the AST are modified, and AST nodes are added, modified, or deleted. The source code is regenerated according to the modified AST, and the marked code is cleared and saved in the code file. The local development environment server will monitor file changes, rebuild the module code, and update the design view through the built module code HMR, so that users can see the page changes in real time; The user selects a page template in the material panel, obtains the source code of the template, and overwrites it into the code file to create a typical page.

Images