A WebIDE-based application development method, device and medium

Abstract

The present application discloses a method, device and medium for application development based on WebIDE, and the method includes: displaying a development interface based on WebIDE in the front-end interface; receiving a first editing operation from a user, and selecting a development project displayed in the development interface; displaying a project code tree of a corresponding architecture and a source code editor according to the type corresponding to the selected development project; receiving a second editing operation from a user, and performing code editing through a front-end development tool provided in the source code editor; adding code files to leaf nodes in the project code tree; and encapsulating development projects according to the project code tree to achieve application development. The front-end development interface in the present application, and the various front-end development tools provided therein, support independent deployment of each tool, achieve flexible access to each tool, and provide a visual rapid development function. It can be oriented not only to end users, but also to application developers to improve user experience.

Description

Technical Field

[0001] The present application relates to the field of application development, and specifically to a WebIDE-based application development method, device, and medium. Background Art

[0002] In the era of big data, faced with massive amounts of business data, how to quickly visualize the data and achieve rapid development of data applications has become a current hot topic, and online application development tools have been proposed.

[0003] There are two main types of online development tools at present. One is online WebIDE, which is to realize the desktop IDE online based on the browser. The goal is to face developers and realize cloud IDE and online development anytime and anywhere. The other is light application customization tools. This type of product provides a drag-and-drop development interface. The goal is to face end users and realize customized development of data reports, graphic chart pages, and applications.

[0004] The above two types of development tools each have their own application scenarios. However, the first type only implements online IDE and lacks visual rapid development functions. Although the second type realizes the visual display of business data, it makes business applications discrete, which is not convenient for overall control of business applications, and cannot meet various situations and develop more functions. On the other hand, most of these development tools are end-user-oriented and suitable for application developers, but they are less flexible and cannot be applied to various situations. Summary of the invention

[0005] In order to solve the above problems, this application proposes an application development method based on WebIDE, including:

[0006] In the front-end interface, the development interface based on WebIDE is displayed;

[0007] receiving a first editing operation from a user, wherein the first editing operation is used to select a development project displayed in the development interface, wherein the development project is used to develop at least part of the functions in the application;

[0008] According to the type corresponding to the selected development project, a project code tree of the corresponding architecture is displayed, and a source code editor is displayed;

[0009] receiving a second editing operation of the user, where the second editing operation is used to edit the code through a front-end development tool provided in the source code editor, so as to generate a code file according to the edited code;

[0010] Add the code file to the leaf node in the project code tree;

[0011] If it is determined that corresponding code files are added to all designated leaf nodes in the project code tree, the development project is packaged according to the project code tree, so as to realize the development of the application through a plurality of packaged development projects.

[0012] In one example, before receiving the second editing operation of the user, the method further includes:

[0013] Displaying a front-end component library to the user, wherein the front-end component library includes a plurality of front-end development tools;

[0014] Determine a number of the front-end development tools selected by the user in the front-end component library;

[0015] Registration interfaces corresponding to the selected front-end development tools are provided, so that the selected front-end development tools can be added to the source code editor through the registration interfaces.

[0016] In one example, the front-end component library is displayed to the user, and the front-end component library includes a plurality of front-end development tools, specifically including:

[0017] Identify all the front-end development tools already in the front-end component library;

[0018] Determining the level of compatibility between the development project and the front-end development tool, and determining the level of generality of the front-end development tool;

[0019] Prominently displaying the front-end development tools whose adaptation level is higher than the first preset level;

[0020] According to the general-purpose level of the first designated front-end development tool selected by the user from the displayed front-end development tools, determining, from the displayed front-end development tools, a second designated front-end development tool whose general-purpose level difference is lower than a second preset level;

[0021] Raise the prominence level of the second designated front-end development tool.

[0022] In one example, the second editing operation is used to perform code editing through a front-end development tool provided in the source code editor, specifically including:

[0023] Determining and presenting to the user a code generation component provided in the source code editor;

[0024] Acquire the project development history record of the user, and determine the development capability level of the user according to the project development history record;

[0025] According to the development capability level, in the code generation component, an adapted automation development level is selected, wherein the automation development level is negatively correlated with the development capability level, and the automation development level is positively correlated with the number of filled codes displayed to the user in the code generation component;

[0026] The code instructions input by the user in the second editing operation are input into the unfilled blank positions in the code generation component according to the preset position matching logic relationship to perform code editing.

[0027] In one example, before receiving a first editing operation from a user, where the first editing operation is used to select a development project displayed in the development interface, the method further includes:

[0028] Determining a first function in the application that has been developed;

[0029] Among the remaining undeveloped second functions, determining the third function that the user is most likely to develop according to the association level between each of the second functions and the first function, and / or the general level corresponding to each of the second functions;

[0030] The development project corresponding to the third function is prominently displayed.

[0031] In one example, determining the first function that has been developed in the application specifically includes:

[0032] Determine the upstream developer corresponding to the user according to the login information of the user;

[0033] A first function that has been recently developed by the upstream developer is determined, and an application to which the first function belongs is determined.

[0034] In one example, determining the plurality of front-end development tools selected by the user in the front-end component library specifically includes:

[0035] Determine a number of the front-end development tools selected by the user in the front-end component library in a drag-and-drop manner;

[0036] According to the preset area size of the dragged front-end development tool, in the source code editor, an adapted display area is determined, and the adapted display area is prominently displayed to facilitate the user to drag the front-end development tool to the display area.

[0037] In one example, the front-end development tool includes: at least one of a language support component, a code generation component, a shortcut key configuration component, a lexical checking component, and an interface partitioning component.

[0038] On the other hand, the present application also proposes an application development device based on WebIDE, including:

[0039] at least one processor; and,

[0040] a memory communicatively connected to the at least one processor; wherein,

[0041] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform, for example:

[0042] In the front-end interface, the development interface based on WebIDE is displayed;

[0043] receiving a first editing operation from a user, wherein the first editing operation is used to select a development project displayed in the development interface, wherein the development project is used to develop at least part of the functions in the application;

[0044] According to the type corresponding to the selected development project, a project code tree of the corresponding architecture is displayed, and a source code editor is displayed;

[0045] receiving a second editing operation of the user, where the second editing operation is used to edit the code through a front-end development tool provided in the source code editor, so as to generate a code file according to the edited code;

[0046] Add the code file to the leaf node in the project code tree;

[0047] If it is determined that corresponding code files are added to all designated leaf nodes in the project code tree, the development project is packaged according to the project code tree, so as to realize the development of the application through a plurality of packaged development projects.

[0048] On the other hand, the present application also proposes a non-volatile computer storage medium storing computer executable instructions, wherein the computer executable instructions are configured as follows:

[0049] In the front-end interface, the development interface based on WebIDE is displayed;

[0050] receiving a first editing operation from a user, wherein the first editing operation is used to select a development project displayed in the development interface, wherein the development project is used to develop at least part of the functions in the application;

[0051] According to the type corresponding to the selected development project, a project code tree of the corresponding architecture is displayed, and a source code editor is displayed;

[0052] receiving a second editing operation of the user, where the second editing operation is used to edit the code through a front-end development tool provided in the source code editor, so as to generate a code file according to the edited code;

[0053] Add the code file to the leaf node in the project code tree;

[0054] If it is determined that corresponding code files are added to all designated leaf nodes in the project code tree, the development project is packaged according to the project code tree, so as to realize the development of the application through a plurality of packaged development projects.

[0055] The WebIDE-based application development method proposed in this application can bring the following beneficial effects:

[0056] The front-end development interface in this application, as well as the various front-end development tools provided therein, support the independent deployment of each tool, realize the flexible access of each tool, and provide a visual rapid development function. And through the project code tree, it can ensure a close connection with the business application, which is convenient for the overall control of the business application. Moreover, it can not only be oriented to end users, but also to application developers, improving the user experience of this part. BRIEF DESCRIPTION OF THE DRAWINGS

[0057] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0058] Figure 1 A flowchart of an application development method based on WebIDE in an embodiment of the present application;

[0059] Figure 2 This is a schematic diagram of an application development device based on WebIDE in an embodiment of the present application. DETAILED DESCRIPTION

[0060] In order to make the purpose, technical solution and advantages of the present application clearer, the technical solution of the present application will be clearly and completely described below in combination with the specific embodiments of the present application and the corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present application.

[0061] The technical solutions provided by various embodiments of the present application are described in detail below in conjunction with the accompanying drawings.

[0062] like Figure 1As shown, the embodiment of the present application provides an application development method based on WebIDE, including:

[0063] S101: In the front-end interface, display the development interface based on WebIDE.

[0064] WebIDE is implemented based on a browser. Users (usually application developers) can log in to the application development system (hereinafter referred to as the system) through a browser, and the system displays the development interface to the user.

[0065] S102: Receive a first editing operation from a user, where the first editing operation is used to select a development project displayed in the development interface, and the development project is used to develop at least part of the functions in the application.

[0066] Generally speaking, when developing an application, multiple development projects are established to develop different functions of the application. For example, for a social APP, it may need chat interaction function, personality display function, adding friends function, etc. The above functions are usually divided into different development projects for development, and finally these multiple projects are linked together to finally realize the development of the application.

[0067] The development interface displays the development projects that the user can carry out, and the user selects the development project to be edited this time through the first editing operation.

[0068] S103: According to the type corresponding to the selected development project, a project code tree of a corresponding architecture is displayed, and a source code editor is displayed.

[0069] The project code tree can be displayed in the left area of ​​the front-end interface, which includes a root node, child nodes, and leaf nodes at the end. Leaf nodes are usually files, while other nodes are folders.

[0070] The source code editor is located in the right area of ​​the front-end interface, which may contain a variety of front-end development tools. Users can edit source code through different tools, which is very convenient.

[0071] S104: receiving a second editing operation of the user, where the second editing operation is used to edit the code through a front-end development tool provided in the source code editor to generate a code file according to the edited code.

[0072] Front-end development tools may include: language support components (used to support different languages), code generation components (used to assist users in automatically generating code), shortcut key configuration components (used to assist users in configuring shortcut keys), lexical checking components (used to assist users in lexical error correction), and interface partitioning components (used to assist users in split-screen and other interface division functions).

[0073] For different front-end development tools, the second editing operation is also different. For example, the second editing operation can be to directly input the code, or to automatically generate the corresponding code through the code generation component, or to check the format of the generated code. After completing the code editing, you can save it and generate a code file in the corresponding format.

[0074] When the user selects in the front-end component library, he can select several front-end development tools by dragging, and then determine the appropriate display area in the source code editor according to the preset area size of the dragged front-end development tool. For example, if the preset area size of the front-end development tool dragged by the user is 4*4, then find the most suitable 4*4 position in the source code editor. Then the adapted display area is prominently displayed, for example, in the form of a dotted frame, so that the user can drag the front-end development tool to the display area and arrange the front-end development tool more appropriately. Of course, the user can also choose other locations, and their locations are not strictly restricted here.

[0075] In addition, before the user performs the second editing operation, the front-end component library can be displayed to the user, and the front-end component library includes multiple front-end development tools. At this time, the user can select from them according to his own preferences and habits to obtain the selected front-end development tools. Then, the registration interfaces corresponding to these front-end development tools are provided. At this time, through the registration interface, the selected front-end development tools can be added to the source code editor for the convenience of subsequent use by the user.

[0076] Furthermore, in order to improve the user experience, you can first determine all the front-end development tools that already exist locally (or exist in the cloud and can be downloaded locally) in the front-end component library, and then determine the level of adaptation between the development project and the front-end development tool, as well as the level of versatility of the front-end development tool. The adaptation level indicates whether the development project and the front-end development tool are suitable. For example, if the development project is for the Android system, and the front-end development tool is suitable for the IOS system, then the level of adaptation between the two is very low. The level of versatility indicates the audience and versatility of the front-end development tool. The higher the versatility, the more developers will choose the front-end development tool, and the higher its versatility.

[0077] The front-end development tools with an adaptation level higher than the first preset level are displayed prominently, for example, they are placed in the front row, or the background around them is highlighted. Then, according to the general level of the first designated front-end development tool selected by the user in the displayed front-end development tools, the second designated front-end development tool whose general level difference is lower than the second preset level is determined in the displayed front-end development tools. For example, the user selects tool A in the displayed front-end development tools, and its corresponding general level is the first-level general level. Then, tool B of the first-level general level or the second-level general level (here, it is assumed that the second preset level is 2) can be selected from other displayed front-end development tools as the second designated front-end development tool. Then the prominent display level of the second designated front-end development tool is increased. If it has been displayed prominently, the prominent display level is further deepened (for example, the order of the front is increased, and the degree of highlight is further increased). If it has not been displayed prominently, it is displayed prominently, so as to estimate the tools that the user may need, and display them prominently, so as to facilitate user selection.

[0078] S105: Add the code file to a leaf node in the project code tree.

[0079] Adding the code file to the bottom leaf node completes the branch, on which the leaf node is the end point.

[0080] S106: If it is determined that corresponding code files are added to all designated leaf nodes in the project code tree, the development project is packaged according to the project code tree, so as to realize the development of the application through a plurality of packaged development projects.

[0081] The designated leaf nodes can be specified by the user or automatically marked. The designated leaf nodes usually refer to the core code files in the development project. If the code files do not exist, the subsequent applications will be difficult or even impossible to use normally. After completing the project code tree, encapsulate the development project, and then encapsulate all the development projects in the application, set up, assemble, optimize, iterate, etc., and then the application development can be realized.

[0082] In one embodiment, when performing the second editing operation, taking the code generation component as an example, it can help users perform automated code editing, but of course there are some uncontrollable factors, which can easily cause BUGs and other problems.

[0083] Based on this, after determining and displaying the code generation component provided in the source code editor to the user, the user's project development history is obtained, and the user's development capability level is determined based on the project development history. For example, the higher the number of project development history records, the more difficult projects, and the lower the BUG rate of the project, the higher the development capability level. According to the development capability level, in the code generation component, an adapted automation development level is selected. Among them, the automation development level is negatively correlated with the development capability level. The higher the development capability level, the lower the automation development level, thereby reducing the probability of BUGs occurring during automatic code generation, and the automation development level is positively correlated with the number of filled-in codes displayed to the user in the code generation component. The lower the automation development level, the more content that needs to be filled in by the user. For users with high development capability levels, the probability of BUGs occurring can be reduced.

[0084] At this time, the user enters the code instruction through the second editing operation, matches the logical relationship according to the preset position, and enters it into the unfilled blank position in the code generation component for code editing, thereby saving the user time in code editing and eliminating some repetitive code editing work.

[0085] In one embodiment, before the user selects a development project, the first function that has been developed in the application can be first determined, and then among the remaining undeveloped second functions, the third function that the user is most likely to develop can be determined based on the association level between each second function and the first function, and / or the common level corresponding to each second function, and then the development project corresponding to the third function can be prominently displayed. For example, if the user has already developed the first function and there are still multiple second functions that have not been developed, the second function with a higher association level or a higher common level can be selected as the third function as much as possible and displayed prominently, so that the user can make a quick selection.

[0086] Furthermore, when a user logs in, his login information is collected, including identity information, and then the upstream developer corresponding to the user is determined. For example, an application contains multiple functions, and some of them can only be developed after the user has developed some functions, with a strict order of precedence. At this time, if the user cooperates with other users for development, when other users, as upstream developers, have developed some functions that are in the order described in this implementation, the user is likely to develop the remaining functions that are in the order of later. At this time, the application to which the first function belongs is determined, so as to determine the first function that has been developed in the application.

[0087] like Figure 2 As shown, the embodiment of the present application also provides an application development device based on WebIDE, including:

[0088] at least one processor; and,

[0089] a memory communicatively connected to the at least one processor; wherein,

[0090] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform, for example:

[0091] In the front-end interface, the development interface based on WebIDE is displayed;

[0092] receiving a first editing operation from a user, wherein the first editing operation is used to select a development project displayed in the development interface, wherein the development project is used to develop at least part of the functions in the application;

[0093] According to the type corresponding to the selected development project, a project code tree of the corresponding architecture is displayed, and a source code editor is displayed;

[0094] receiving a second editing operation of the user, where the second editing operation is used to edit the code through a front-end development tool provided in the source code editor, so as to generate a code file according to the edited code;

[0095] Add the code file to the leaf node in the project code tree;

[0096] If it is determined that corresponding code files are added to all designated leaf nodes in the project code tree, the development project is packaged according to the project code tree, so as to realize the development of the application through a plurality of packaged development projects.

[0097] The embodiment of the present application further provides a non-volatile computer storage medium storing computer executable instructions, wherein the computer executable instructions are configured as follows:

[0098] In the front-end interface, the development interface based on WebIDE is displayed;

[0099] receiving a first editing operation from a user, wherein the first editing operation is used to select a development project displayed in the development interface, wherein the development project is used to develop at least part of the functions in the application;

[0100] According to the type corresponding to the selected development project, a project code tree of the corresponding architecture is displayed, and a source code editor is displayed;

[0101] receiving a second editing operation of the user, where the second editing operation is used to edit the code through a front-end development tool provided in the source code editor, so as to generate a code file according to the edited code;

[0102] Add the code file to the leaf node in the project code tree;

[0103] If it is determined that corresponding code files are added to all designated leaf nodes in the project code tree, the development project is packaged according to the project code tree, so as to realize the development of the application through a plurality of packaged development projects.

[0104] Each embodiment in this application is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device and medium embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiments.

[0105] The devices and media provided in the embodiments of the present application correspond one-to-one to the methods. Therefore, the devices and media also have similar beneficial technical effects as the corresponding methods. Since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media will not be repeated here.

[0106] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0107] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0108] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0109] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0110] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0111] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0112] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0113] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0114] The above is only an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A WebIDE-based application development method, characterized in that: include: In the front-end interface, the development interface based on WebIDE is displayed; receiving a first editing operation from a user, wherein the first editing operation is used to select a development project displayed in the development interface, wherein the development project is used to develop at least part of the functions in the application; According to the type corresponding to the selected development project, a project code tree of the corresponding architecture is displayed, and a source code editor is displayed; receiving a second editing operation of the user, where the second editing operation is used to edit the code through a front-end development tool provided in the source code editor, so as to generate a code file according to the edited code; Add the code file to the leaf node in the project code tree; If it is determined that corresponding code files are added to all designated leaf nodes in the project code tree, the development project is packaged according to the project code tree, so as to realize the development of the application through a plurality of packaged development projects; Before receiving the second editing operation of the user, the method further includes: Displaying a front-end component library to the user, wherein the front-end component library includes a plurality of front-end development tools; Determine a number of the front-end development tools selected by the user in the front-end component library; Providing registration interfaces corresponding to the selected front-end development tools respectively, so as to add the selected front-end development tools to the source code editor through the registration interfaces; The front-end component library is displayed to the user, and the front-end component library includes a plurality of front-end development tools, specifically including: Identify all the front-end development tools already in the front-end component library; Determining the level of compatibility between the development project and the front-end development tool, and determining the level of generality of the front-end development tool; Prominently displaying the front-end development tools whose adaptation level is higher than the first preset level; According to the general-purpose level of the first designated front-end development tool selected by the user from the displayed front-end development tools, determining, from the displayed front-end development tools, a second designated front-end development tool whose difference with the general-purpose level is lower than a second preset level; Raise the prominence level of the second designated front-end development tool.

2. The method according to claim 1, characterized in that The second editing operation is used to edit the code through the front-end development tool provided in the source code editor, and specifically includes: Determining and presenting to the user a code generation component provided in the source code editor; Acquire the project development history record of the user, and determine the development capability level of the user according to the project development history record; According to the development capability level, in the code generation component, an adapted automation development level is selected, wherein the automation development level is negatively correlated with the development capability level, and the automation development level is positively correlated with the number of filled codes displayed to the user in the code generation component; The code instructions input by the user in the second editing operation are input into the unfilled blank positions in the code generation component according to the preset position matching logic relationship to perform code editing.

3. The method according to claim 1, characterized in that Before receiving a first editing operation from a user, where the first editing operation is used to select a development project displayed in the development interface, the method further includes: Determining a first function in the application that has been developed; Among the remaining undeveloped second functions, determining the third function that the user is most likely to develop according to the association level between each of the second functions and the first function, and / or the general level corresponding to each of the second functions; The development project corresponding to the third function is prominently displayed.

4. The method according to claim 3, characterized in that The determining of the first function developed in the application specifically includes: Determine the upstream developer corresponding to the user according to the login information of the user; A first function that has been recently developed by the upstream developer is determined, and an application to which the first function belongs is determined.

5. The method according to claim 1, characterized in that The determining of the plurality of front-end development tools selected by the user in the front-end component library specifically includes: Determine a number of the front-end development tools selected by the user in the front-end component library in a drag-and-drop manner; According to the preset area size of the dragged front-end development tool, in the source code editor, an adapted display area is determined, and the adapted display area is prominently displayed to facilitate the user to drag the front-end development tool to the display area.

6. The method according to any one of claims 1 to 5, characterized in that The front-end development tool includes: at least one of a language support component, a code generation component, a shortcut key configuration component, a lexical checking component, and an interface partitioning component.

7. An application development device based on WebIDE, characterized in that: include: at least one processor; as well as, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the WebIDE-based application development method according to any one of claims 1 to 6.

8. A non-volatile computer storage medium storing computer executable instructions, characterized in that: The computer executable instruction setting is capable of executing an application development method based on WebIDE as claimed in any one of claims 1 to 6.

Images