System and method for compiling and running codes on line and applied to visual development

Abstract

The invention provides an online code compiling and running system and method applied to visual development, and relates to the technical field of development, the method comprises the following steps: using a code editor with code formatting capability and code error checking capability to display codes, and providing an editing function; analyzing the code in the code editing module, and persistently storing the code and a data structure obtained by analysis; configuring a data structure stored in the code storage module; and combining the code in the code editing module, the code in the visual designer and the code published last time to obtain a finally published code. According to the method, the user can be supported to write codes on line, the written codes can be compatible with the current visual development method, code conflicts caused by modification of raw codes are avoided, and increasingly complex visual development requirements in enterprise informatization are efficiently met.

Description

Technical Field

[0001] This disclosure relates to the field of development technology, and specifically to systems and methods for writing and running code online for visual development. Background Technology

[0002] With the development of enterprise informatization, visual development is a trend in system development, enabling developers with limited experience to create web pages and mobile applications through a visual user interface using drag-and-drop functionality. However, existing visual development methods have limited capabilities for developing complex requirements, and the need for handwritten code to be compatible with subsequent visual development scenarios easily leads to code conflicts, resulting in reduced development efficiency.

[0003] Therefore, existing visual development methods cannot meet development needs in complex scenarios, leading to low development efficiency and incompatibility with existing visual development methods due to handwritten code. Summary of the Invention

[0004] To address the aforementioned issues, this disclosure proposes a system and method for online code writing and execution in visual development. This system supports users in writing code online, and the written code is compatible with current visual development methods. It avoids code conflicts between the generated code and newly released code due to modifications, and efficiently meets the increasingly complex visual development needs of enterprise informatization.

[0005] According to some embodiments, the present disclosure adopts the following technical solutions: An online system for writing and running code for visual development, including a code editing module, a code storage module, a code configuration module, and a code generation module: The code editing module is configured to: use a code editor with code formatting and error checking capabilities to display the code according to the data structure stored in the code storage module, and provide editing functions; The code storage module is configured to parse the code in the code editing module and persistently store the code and the parsed data structure. The code configuration module is configured to configure the data structures stored in the code storage module. The code generation module is configured to merge the code from the code editing module, the code from the visual designer, and the code from the last release to obtain the final release code.

[0006] According to some embodiments, the present disclosure adopts the following technical solutions: Methods for writing and running code online for visual development include: Use a code editor with code formatting and error checking capabilities to display the code based on the data structure stored in the code storage module and provide editing functions; The code in the code editing module is parsed, and the code and the parsed data structure are persistently stored. Configure the data structures stored in the code storage module; The code in the code editing module, the code in the visual designer, and the code from the last release are merged to obtain the final release code.

[0007] According to some embodiments, the present disclosure adopts the following technical solutions: A computer program product includes a computer program that, when executed by a processor, implements the system for online writing and running code applied to visual development.

[0008] According to some embodiments, the present disclosure adopts the following technical solutions: A non-transitory computer-readable storage medium is provided for storing computer instructions, which, when executed by a processor, implement the system for online writing and running code applied to visual development.

[0009] According to some embodiments, the present disclosure adopts the following technical solutions: An electronic device includes a processor, a memory, and a computer program; wherein the processor is connected to the memory, the computer program is stored in the memory, and when the electronic device is running, the processor executes the computer program stored in the memory to enable the electronic device to execute the system for online writing and running code applied to visual development.

[0010] Compared with the prior art, the beneficial effects of this disclosure are as follows: This disclosed system for online code writing and execution in visual development enables users to write code online through the cooperation of a code editing module, a code storage module, a code configuration module, and a code generation module. This avoids 26% of the scenarios where code is written by hand. The written code is compatible with current visual development methods, greatly reducing the probability of code conflicts. It can be flexibly expanded by executing online code, quickly meeting the increasingly complex visual development needs of enterprise informatization. Attached Figure Description

[0011] The accompanying drawings, which form part of this disclosure, are used to provide a further understanding of this disclosure. The illustrative embodiments of this disclosure and their descriptions are used to explain this disclosure and do not constitute an undue limitation of this disclosure.

[0012] Figure 1This is an example diagram of a code conflict.

[0013] Figure 2 This is a system structure diagram of Example 1.

[0014] Figure 3 This is an example diagram of a code conflict solution for Example 1. Detailed Implementation

[0015] The present disclosure will be further described below with reference to the accompanying drawings and embodiments.

[0016] It should be noted that the following detailed descriptions are exemplary and intended to provide further illustration of this disclosure. Unless otherwise specified, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this disclosure pertains.

[0017] It should be noted that the terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit the exemplary embodiments according to this disclosure. As used herein, the singular form is intended to include the plural form as well, unless the context clearly indicates otherwise. Furthermore, it should be understood that when the terms “comprising” and / or “including” are used in this specification, they indicate the presence of features, steps, operations, devices, components, and / or combinations thereof.

[0018] Terminology Explanation: Visual designers: A method of application development through visualization (see visual programming languages). It enables developers with varying levels of experience to create web and mobile applications using a graphical user interface, drag-and-drop components, and model-driven logic. It differs fundamentally from Eclipse or Visual Studio, which provide powerful development environments that require users to have a high level of programming skills. The latter, on the other hand, aims to enable users to develop faster and lower the barrier to entry for users.

[0019] State Manager: In a code editor, the State Manager is primarily responsible for managing and maintaining various state information of the editor. This state information includes multiple aspects such as edited content, cursor position, undo / redo history, file open status, and folded code areas.

[0020] monaco: A text editor developed by Microsoft.

[0021] Prettier: A code formatting plugin.

[0022] eslint: A code error checking plugin.

[0023] Code conflicts: During code generation and development in the visual designer, the code from the previous release is compared with the code in the local integrated development environment (IDE) and the code for this release. Figure 1 As shown in line 10, if the code in this release and the code in the local integrated development environment (IDE) are inconsistent with the corresponding line of the last release, a conflict will occur and the code cannot be automatically merged.

[0024] Figure 1 From left to right, the three sets of code are: the code in the local integrated development environment (IDE) (which may have been manually modified compared to the previous release), the code from the previous release, and the code from this release (which may have had configuration changes in the visual designer compared to the previous release, resulting in differences in the generated code).

[0025] Example 1 One embodiment of this disclosure provides a system for online code writing and running applied to visual development, such as... Figure 2 As shown, it includes a code editing module, a code storage module, a code configuration module, and a code generation module: The code editing module is configured to: use a code editor with code formatting and error checking capabilities to display the code according to the data structure stored in the code storage module, and provide editing functions; The code storage module is configured to parse the code in the code editing module and persistently store the code and the parsed data structure. The code configuration module is configured to configure the data structures stored in the code storage module. The code generation module is configured to merge the code from the code editing module, the code from the visual designer, and the code from the last release to obtain the final release code.

[0026] As one embodiment, the online code writing and running system disclosed herein for visual development supports users in writing code online. The written code is compatible with current visual development methods, avoiding code conflicts caused by modifying existing code, and efficiently meeting the increasingly complex visual development needs of enterprise informatization. The specific implementation process is as follows: This embodiment uses Monaco as the code editor. To have online code editing capabilities, it needs the code formatting capabilities of the Prettier plugin and the code error checking capabilities of the ESLint plugin. Furthermore, it should have code view capabilities and the ability to locate code based on the view when dealing with large amounts of code. Since non-persistent data is reset after a web application refresh, the data in the code editor should have data persistence capabilities. After editing the code, it needs to be run using a visual designer, which requires configuring the code and then generating the code.

[0027] Therefore, based on the above analysis, the following four modules are derived: code editing module, code storage module, code configuration module, and code generation module.

[0028] 1) Code editing module: Using the Monaco editor for online code writing, and requiring basic code editor capabilities, we need to use the `prettier.format()` interface from the Prettier plugin and the `eslint.lintText()` interface from the ESLint plugin for code formatting and error checking, respectively. Specifically: Based on the code data returned by the prettier.format() interface, the code manually written in the Monaco editor is formatted, and the formatted code data is placed in the editor using the Monaco editor's executeEdits method; Retrieve the data returned by the eslint.lintText() interface. This data is an array. If the array length is empty, it means that there are no errors in the code. If the length is less than 0, retrieve the start line number, end line number, start column number, end column number, and error message for each item in the array to uniquely determine the scope and information of the current error in the code. Then, call the setModelMarkers method of the Monaco editor to display the error scope and error message in the editor.

[0029] If the code in the editor is too long, it needs to be displayed visually. The code in the editor is passed to the state manager, which reads the code from the state manager and passes it to the code storage module through an interface. The code storage module returns the parsed data (i.e., the Chinese and English names of the method; the Chinese and English names of the parameters; the name and data type of the return value; and the line number of the entire method in the editor) as a data structure to the state manager. The code editing module reads the data from the state manager and displays the above data one by one in the editor's visual window in the form of cards. Clicking on the corresponding card allows you to determine the location in the code you want to locate based on the range of line numbers of the method.

[0030] 2) Code storage module: It receives code data from the code editing module, parses the passed code using regular expression matching, and passes the parsed code's method name, parameters, return value, line number range of the method, and comments on the method to the code editing module in a predefined data structure. At the same time, it persists this data structure by creating an intermediate file to ensure that the corresponding code can still be obtained after the browser is refreshed. In addition, it can also store the data structure passed from the code configuration module for persistence.

[0031] 3) Code configuration module: The system reads the data structure obtained from the code editing module from the state manager, displays the parsed method name and parameters in the browser component, shows different methods through drop-down boxes, configures one or more parameters in the method, and then passes the data to the code storage module to store the corresponding new data structure in the code configuration file, that is, saves the configured parameter values.

[0032] 4) Code generation module: The system reads the current script (i.e., the current code displayed in the code editor) from its module location in the visual designer and generates the corresponding script file based on the location path. For example, if the module location in the visual designer is: Module1 / Folder1 / Script1, then the generated code location will be: src / Module1 / Folder1 / Script1. Additionally, based on the data stored in the code storage module (i.e., the parsed data and code content), it generates code that can be directly called and run. Figure 3 Line 10: Based on the code generation method of this module, code added or modified in the local IDE will be moved to the code editor without needing to be modified in the local IDE. In other words, code added or modified in the local IDE will be modified in the code editor. During the code release process, the conflict area of ​​the code generated with this release will become the modification area and can be automatically merged, thereby reducing the probability of code conflicts.

[0033] Example 2 One embodiment of this disclosure provides a method for writing and running code online for visual development, including: Use a code editor with code formatting and error checking capabilities to display the code based on the data structure stored in the code storage module and provide editing functions; The code in the code editing module is parsed, and the code and the parsed data structure are persistently stored. Configure the data structures stored in the code storage module; The code in the code editing module, the code in the visual designer, and the code from the last release are merged to obtain the final release code.

[0034] Example 3 One embodiment of this disclosure provides a computer program product, including a computer program that, when executed by a processor, implements the system for online writing and running code applied to visual development.

[0035] Example 4 One embodiment of this disclosure provides a non-transitory computer-readable storage medium for storing computer instructions, which, when executed by a processor, implement the system for online writing and running code applied to visual development.

[0036] Example 5 One embodiment of this disclosure provides an electronic device, including: a processor, a memory, and a computer program; wherein the processor is connected to the memory, the computer program is stored in the memory, and when the electronic device is running, the processor executes the computer program stored in the memory, so that the electronic device executes the system for online writing and running code applied to visual development.

[0037] This disclosure is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this disclosure. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create a machine for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0038] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0039] While the specific embodiments of this disclosure have been described above in conjunction with the accompanying drawings, this is not intended to limit the scope of protection of this disclosure. Those skilled in the art should understand that various modifications or variations that can be made by those skilled in the art without creative effort based on the technical solutions of this disclosure are still within the scope of protection of this disclosure.

Claims

1. A system for online code writing and running applied to visual development, characterized in that, It includes a code editing module, a code storage module, a code configuration module, and a code generation module: The code editing module is configured to: use a code editor with code formatting and error checking capabilities to display the code according to the data structure stored in the code storage module, and provide editing functions; The code storage module is configured to parse the code in the code editing module and persistently store the code and the parsed data structure. The code configuration module is configured to configure the data structures stored in the code storage module. The code generation module is configured to merge the code from the code editing module, the code from the visual designer, and the code from the last release to obtain the final release code.

2. The system for online code writing and running applied to visual development as described in claim 1, characterized in that, The code editor uses Monaco and combines the code formatting capabilities of the Prettier plugin with the code error checking capabilities of the ESLint plugin.

3. The system for online writing and running code applied to visual development as described in claim 2, characterized in that, The specific steps for displaying the code are as follows: The code to be displayed is formatted using the prettier.format() interface in the prettier plugin. Based on the code data returned by the prettier.format() interface, the formatted code data is placed in the editor using the executeEdits method of the Monaco editor. Error checking is performed using the eslint.lintText() interface in the eslint plugin, and the setModelMarkers method of the Monaco editor is called to display the error range and error messages in the editor.

4. The system for online writing and running code applied to visual development as described in claim 1, characterized in that, The data structure includes the method name, parameters, return value, line number range of the method, and comments on the method.

5. The system for online writing and running code applied to visual development as described in claim 1, characterized in that, The process of parsing the code in the code editing module and persistently storing the code and the parsed data structure is achieved by parsing the code passed from the code editing module using regular expression matching. Persistent storage is achieved by creating intermediate files.

6. The system for online writing and running code applied to visual development as described in claim 1, characterized in that, The configuration of the data structure stored in the code storage module is specifically as follows: Get the data structure of the code currently displayed in the code editing module, and display the parsed method name and parameters in the browser component. Show different methods through drop-down list, and then configure the parameters in the method.

7. A method for writing and running code online for visual development, characterized in that, include: Use a code editor with code formatting and error checking capabilities to display the code based on the data structure stored in the code storage module and provide editing functions; The code in the code editing module is parsed, and the code and the parsed data structure are persistently stored. Configure the data structures stored in the code storage module; The code in the code editing module, the code in the visual designer, and the code from the last release are merged to obtain the final release code.

8. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by the processor, it implements the online code writing and running system for visual development as described in claim 7.

9. A non-transitory computer-readable storage medium, characterized in that, The non-transitory computer-readable storage medium is used to store computer instructions, which, when executed by a processor, implement the system for online writing and running code applied to visual development as described in claim 7.

10. An electronic device, characterized in that, include: The system comprises a processor, a memory, and a computer program; wherein the processor is connected to the memory, the computer program is stored in the memory, and when the electronic device is running, the processor executes the computer program stored in the memory to enable the electronic device to perform the system for online writing and running of code for visual development as described in claim 7.

Images