Application development platform, microprogram generation method, device and storage medium

Abstract

The disclosed embodiment provides an application development platform, a microprogram generation method, a device and a storage medium. The application development platform includes: a panel library, a microprogram center and a visual configuration system, wherein the panel library is configured to store panels; the microprogram center is configured to obtain a page design image including panel image information; determine whether there is a panel matching the panel image information in the panel library; if there is a panel matching the panel image information in the panel library, obtain the panel matching the panel image information as a target panel; and generate a microprogram based on the target panel through the visual configuration system.

Description

Technical Field

[0001] The embodiments of the present disclosure relate to, but are not limited to, the field of computer technology, and in particular to an application development platform, a microprogram generation method, a device, and a storage medium. Background Art

[0002] In the development process, the design images designed by designers are usually used as the basis. With the iteration of business development needs and the strict control of designers on design drafts, how to save design and development time and the cost of communication between each other has become more and more the focus of development and design. However, at present, especially when the design manpower is squeezed, designers have no way to pass fine-grained development to other personnel, resulting in each development process requiring designers and other personnel to repeat work, thus wasting a lot of development costs. Summary of the invention

[0003] The following is a summary of the subject matter described in detail herein. This summary is not intended to limit the scope of the claims.

[0004] In a first aspect, an embodiment of the present disclosure provides an application development platform, comprising: a panel library, a microprogram center and a visualization configuration system, wherein the panel library is configured to store panels; the microprogram center is configured to obtain a page design image including panel image information; determine whether there is a panel matching the panel image information in the panel library; if there is a panel matching the panel image information in the panel library, obtain the panel matching the panel image information as a target panel; and generate a microprogram based on the target panel through the visualization configuration system.

[0005] In a second aspect, an embodiment of the present disclosure provides a microprogram generation method, which is applied to an application development platform, and the method includes: obtaining a page design image including panel image information; determining whether there is a panel matching the panel image information in the panel library; if there is a panel matching the panel image information in the panel library, obtaining the panel matching the panel image information as a target panel; and generating a microprogram based on the target panel through a visual configuration system.

[0006] In a third aspect, an embodiment of the present disclosure provides a computer device, comprising: a processor and a memory storing a computer program that can be run on the processor, wherein when the processor executes the program, the steps of the microprogram generation method described in the above embodiment are implemented.

[0007] In a fourth aspect, an embodiment of the present disclosure provides a computer-readable storage medium, including a stored program, wherein when the program is run, the steps of the microprogram generation method described in the above embodiment are implemented.

[0008] The application development platform, microprogram generation method, device and storage medium provided by the embodiment of the present disclosure may include: a panel library, a microprogram center and a visual configuration system, wherein the panel library is configured to store panels; the microprogram center is configured to obtain a page design image including panel image information; determine whether there is a panel matching the panel image information in the panel library; if there is a panel matching the panel image information in the panel library, obtain the panel matching the panel image information as the target panel; generate a microprogram based on the target panel through the visual configuration system. In this way, the microprogram is generated by the panel matching the panel image information of the page design image in the panel library, which can facilitate users (for example, designers, developers, product managers, project managers or testers, etc.) to quickly convert the page design image into a microprogram, without the need for users to manually determine each panel in the page by comparing the page design image. In this way, when the microprogram is applied to the scenario of developing applications, the development efficiency is improved, the development cost can be reduced, the use threshold is lowered, and it has a wide range of application prospects.

[0009] Other features and advantages of the present disclosure will be described in the following description, and partly become apparent from the description, or be understood by implementing the present disclosure. Other advantages of the present disclosure can be realized and obtained by the schemes described in the description and the drawings.

[0010] Other aspects will be apparent upon reading and understanding the drawings and detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] The accompanying drawings are used to provide an understanding of the technical solution of the present disclosure and constitute a part of the specification. Together with the embodiments of the present disclosure, they are used to explain the technical solution of the present disclosure and do not constitute a limitation on the technical solution of the present disclosure. The shapes and sizes of the components in the accompanying drawings do not reflect the actual proportions and are only intended to illustrate the contents of the present disclosure.

[0012] Figure 1 A schematic diagram of the architecture of an application development platform in an exemplary embodiment of the present disclosure;

[0013] Figure 2 A first flow chart of a microprogram generation method in an exemplary embodiment of the present disclosure;

[0014] Figure 3 A schematic diagram of a page design image in an exemplary embodiment of the present disclosure;

[0015] Figure 4 is a schematic diagram of a display interface of a title panel in an exemplary embodiment of the present disclosure;

[0016] Figure 5A second flow chart of the microprogram generation method in the exemplary embodiment of the present disclosure;

[0017] Figure 6 It is a schematic diagram of the structure of a computer device in an exemplary embodiment of the present disclosure. DETAILED DESCRIPTION

[0018] Multiple embodiments are described herein, but the description is exemplary rather than restrictive, and there may be more embodiments and implementations within the scope of the embodiments described herein. Although many possible feature combinations are shown in the drawings and discussed in the exemplary embodiments, many other combinations of the disclosed features are possible. Unless specifically limited, any feature or element of any embodiment may be used in combination with any other feature or element in any other embodiment, or may replace any other feature or element in any other embodiment.

[0019] When describing representative embodiments, the specification may have presented the method and / or process as a specific sequence of steps. However, to the extent that the method or process does not rely on the specific order of the steps described herein, the method or process should not be limited to the steps in the specific order described. As will be appreciated by those of ordinary skill in the art, other orders of steps are also possible. Therefore, the specific order of the steps set forth in the specification should not be interpreted as a limitation on the claims. In addition, the claims for the method and / or process should not be limited to the steps performed in the order written, and those skilled in the art can easily understand that these orders can be changed and still remain within the spirit and scope of the disclosed embodiments.

[0020] Unless otherwise defined, the technical terms or scientific terms used in the embodiments of the present disclosure should be understood by people with ordinary skills in the field to which the present disclosure belongs. The "first", "second" and similar words used in the embodiments of the present disclosure do not indicate any order, quantity or importance, but are only used to distinguish different components. "Include" or "comprise" and similar words mean that the elements or objects appearing before the word cover the elements or objects listed after the word and their equivalents, without excluding other elements or objects. "Connect" or "connected" and similar words are not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect.

[0021] (1) Sketch, Sketch plugins, and SketchTool;

[0022] Sketch is a design tool.

[0023] Sketch plug-in refers to Sketch software set up in the form of plug-in. For example, Sketch resources may include: page, canvas, artboard, or layer, etc. Among them, canvas refers to the drawing area in Sketch used to draw visual elements such as graphics, characters, images, etc. to form a page; the size of the canvas can be unlimited, and the user can drag it in any direction at will; one or more artboards can be inserted into a canvas. Artboard refers to the designated drawing area in the canvas, which can draw one or more combinations of visual elements such as graphics, characters, images, etc. to form a panel; the size of the artboard is limited, and the artboard can have a fixed border. Layer is the most basic unit in Sketch. In Sketch, each object (such as canvas, artboard, etc.) has its own layer; layers may include: text layer, graphic layer, etc., and a complex-shaped graphic can be composed of multiple simple-shaped graphics. Correspondingly, a complex-shaped graphic layer can be composed of multiple simple-shaped graphic layers.

[0024] (2) Operating System (OS);

[0025] An operating system is a computer program that manages computer hardware and software resources. An operating system can handle basic tasks such as managing and configuring memory, determining the priority of system resource supply and demand, controlling input and output devices, or operating networks and managing file systems. For example, currently common mobile operating systems may include Android operating systems or iOS operating systems, and currently common server and computer operating systems may include Linux operating systems, Windows operating systems, or UNIX operating systems. Correspondingly, applications may include: Android applications, iOS applications, or Windows applications, etc.

[0026] (3) Flutter, DSL (Domain Specific Language) and JSON (JavaScript Object Notation);

[0027] Flutter is a cross-platform user interface (UI) development framework that can build high-quality native user interfaces on multiple operating systems through a set of code libraries. For example, multiple operating systems may include Android operating system, iOS operating system, etc. When developing applications (Application, APP) based on the operating system, Flutter can be used to develop the user interface. In the actual application stage of the APP, the user interface can be displayed by combining the tool classes provided by Flutter with the tool classes provided by the operating system. A cross-platform user interface may refer to a user interface suitable for platforms such as the Android operating system, iOS operating system, or Windows operating system.

[0028] DSL is a grammatical rule that allows domain experts to describe the rules in the domain in a simple programming way.

[0029] JSON is a lightweight data format that is easy for humans to read and write, and easy for machines to parse and generate.

[0030] (4) Application (APP), interface (Interface) and page (Page);

[0031] An application is a computer program that is used to perform one or more specific tasks. It runs in user mode, can interact with users, and generally has a visual user interface. For example, applications may include but are not limited to applications for operating systems such as iOS, Android, Web, Windows, macOS, or Linux. For example, an application can implement one or more functions, and a function can be divided into one or more sub-functions. For example, an application may include multiple interfaces. For example, an application may include multiple pages.

[0032] An interface is a medium interface for transmitting and exchanging information between a user and a machine (e.g., a computer device). It is a collection of supporting software, hardware, and methods for two-way information interaction between a user and a machine (e.g., a computer device). It realizes the conversion between the internal form of information and the form acceptable to the user. The commonly used form of an interface is a graphical user interface (GUI), which refers to an operation-related user interface displayed in a graphical manner. For example, an interface can include one or more page implementations. For example, switching between multiple pages can be achieved by binding components (e.g., navigation bars, etc.) to multiple pages.

[0033] A page refers to the content displayed in the interface during the interaction between users and machines.

[0034] (5) Low code;

[0035] Low-code means that in the process of users quickly creating applications based on an application development platform, users (for example, developers) can complete most of the development work through more efficient visual development methods such as dragging, clicking, or parameter configuration, without having to write a lot of code.

[0036] (6) Modules, centers and systems;

[0037] Modules, centers and systems may refer to any known or later developed hardware, software, firmware, artificial intelligence, fuzzy logic or combination of hardware and / or software code that is capable of performing the associated functions.

[0038] The exemplary embodiments of the present disclosure provide an application development platform. The application development platform is a visual development system based on Flutter and Sketch that uses low-code engineering to solve human efficiency problems. It can provide management services for products such as panels, microprograms, or applications, can provide visual configuration services, can provide services for packaging and forming cross-platform applications based on microprograms, etc., and can realize the rapid generation of applications suitable for different operating systems based on microprograms. Thus, it can improve development efficiency, reduce development costs, and has broad application prospects.

[0039] In an exemplary embodiment, the application development platform may include: a panel library, a microprogram center, and a visual configuration system, wherein the panel library is configured to store panels; the microprogram center is configured to obtain a page design image including panel image information; determine whether there is a panel matching the panel image information in the panel library; if there is a panel matching the panel image information in the panel library, obtain the panel matching the panel image information as the target panel; and generate a microprogram based on the target panel through the visual configuration system. In this way, by generating a microprogram through a panel matching the panel image information of the page design image in the panel library, it is convenient for users (for example, developers, product managers, project managers, or testers, etc.) to quickly convert the page design image into a microprogram. In this way, when the microprogram is applied to the scenario of developing applications, the development efficiency is improved, the development cost can be reduced, the use threshold is lowered, and it has a wide range of application prospects.

[0040] In an exemplary embodiment, the application development platform may also include: a component center, configured to store components; a microprogram center, configured to display a target panel through a visual configuration system; in response to user operations, performing configuration operations on the target panel to generate a microprogram, wherein the configuration operations include: at least one of display parameter configuration, data binding, event binding, and component binding.

[0041] In an exemplary embodiment, the microprogram center is also configured to obtain a preset blank panel from the panel library if there is no panel matching the panel image information in the panel library, the preset blank panel including: at least one of a preset blank text panel and a preset blank picture panel; and generate a target panel based on the panel image information and the preset blank panel.

[0042] In an exemplary embodiment, the microprogram center is also configured to determine panel type information based on panel image information; based on the panel type information, search whether there is a panel corresponding to the panel type information in a pre-set panel library; and determine whether there is a panel matching the panel image information in the pre-set panel library based on the search results.

[0043] In an exemplary embodiment, the microprogram center is also configured to determine whether the panel type information is a text panel type; if the panel type information is a text panel type, the text information is extracted from the panel image information, and the text information is inserted into a preset blank text panel to generate a target panel; if the panel type information is not a text panel type, the panel image information is inserted into a preset blank picture panel to generate a target panel.

[0044] In an exemplary embodiment, the application development platform may further include: a product center configured to package the microprograms and generate a cross-platform application, wherein the cross-platform application generates a page including the target panel applicable to different operating systems when running on different operating systems.

[0045] For example, a cross-platform application refers to an application applicable to platforms such as iOS, Android, Web, Windows, macOS, or Linux. Here, the embodiments of the present disclosure do not limit this.

[0046] In an exemplary embodiment, the product center is configured to obtain one or more microprograms from the microprogram center; and generate a cross-platform application corresponding to a preset operating system based on the one or more microprograms.

[0047] For example, the preset operating system may be pre-set by a user, or may be automatically set by an application development platform. Here, the embodiments of the present disclosure do not limit this.

[0048] For example, when a user relies on an application development platform to generate an iOS application, the default operating system may be the iOS operating system, and the application development platform may generate an iOS application based on the microprogram. When a user relies on an application development platform to generate an Android application, the default operating system may be the iOS operating system, and the application development platform may generate an Android application based on the microprogram.

[0049] Figure 1 FIG. 1 is a schematic diagram of an architecture of an application development platform in an exemplary embodiment of the present disclosure. Figure 1 As shown, the application development platform may include: a product center 101 , a microprogram center 102 , a panel library 103 , a component center 104 , and a visual configuration system 105 .

[0050] In an exemplary embodiment, the product center can provide services for application generation, management, retrieval, or storage. For example, application generation services may include: services for packaging microprograms to form cross-platform applications; the microprogram center can provide microprogram generation, management, retrieval, storage and other services; the panel library can provide panel generation, management, retrieval, storage and other services; the component center can provide component generation, management, retrieval, storage and other services; the visualization configuration system can provide visualization configuration services for products such as interfaces, pages, panels, or components.

[0051] In an exemplary embodiment, the visual configuration system may refer to a module in a mobile application development platform that is based on the Flutter and DSL frameworks and has Sketch plug-ins in the upper layer, and can provide services such as visual configuration page components (e.g., panels). In this way, users (e.g., developers) can complete most of the development work through more efficient visual development methods such as dragging, clicking, or parameter configuration.

[0052] In an exemplary embodiment, a microprogram may refer to a reusable file developed based on the dynamic DSL framework of Flutter, which may include one or more cross-platform page code blocks, and one or more cross-platform pages may be implemented when the microprogram is running. The cross-platform page may refer to a page developed based on the dynamic DSL framework of Flutter, so that it is easy to classify and manage, and avoid repeated development workload. For example, a microprogram can be packaged separately to generate an application, or multiple microprograms can be packaged together to generate an application. For example, taking a smart city as an example, it can be divided into functions such as a smart park, a smart office, a smart home, or a smart transportation according to the scene. A smart city application can be generated by packaging a microprogram that implements a smart park, a microprogram that implements a smart office, and other microprograms. For another example, taking a microprogram that implements a clock-in function as an example, a conference application can provide a corporate employee check-in service by packaging a microprogram that implements a clock-in function, or a factory application can provide a factory visitor management service by packaging a microprogram that implements a clock-in function.

[0053] In an exemplary embodiment, a panel library may refer to a collection of panels. A panel may refer to a reusable page component developed based on the dynamic DSL framework of Flutter, or may refer to a code block that implements a panel, so that classification management can be facilitated to avoid duplication of development work. For example, a panel may refer to a visual interface element in a page. For example, a panel may include, but is not limited to: a line chart panel, a pie chart panel, a list panel, a ring-shaped proportional distribution chart panel, a bar chart panel, a title panel, a carousel panel, a button panel, a system announcement panel, or a text panel. For example, a panel can realize a page alone after layout, and multiple panels can realize a page after layout or splicing.

[0054] In an exemplary embodiment, components (also referred to as controls) may include, but are not limited to: drop-down list boxes, text input boxes, buttons, navigation bars (TabBar), scroll bars or check boxes, etc., which have the functions of executing functions or triggering code to run and complete responses through "events", such as executing interactive functions with users. For example, the display of the panel can be controlled by binding components to the panel. For example, a drop-down list box is bound to the line chart panel, and users who view the line chart can select the data that the user is more concerned about through the drop-down list box, so that the line chart panel only displays the data that the user is more concerned about. For example, the switching of multiple pages can be controlled by binding components to multiple pages.

[0055] For example, an interface may include one or more pages, and multiple pages may be switched through interface components, such as a navigation bar. For example, a page may include one or more panels. For example, a panel may be bound to one or more components. For example, multiple pages may be bound to multiple components.

[0056] The exemplary embodiment of the present disclosure provides a microprogram generation method, which can be applied to the application development platform in one or more of the above exemplary embodiments. The microprogram generation method provided by the embodiment of the present disclosure is described below in conjunction with the above application development platform.

[0057] Figure 2 FIG. 1 is a first flow chart of a microprogram generation method in an exemplary embodiment of the present disclosure, as shown in FIG. Figure 2 As shown, the microprogram generation method may include:

[0058] Step 21: Obtain a page design image including panel image information.

[0059] Step 22: Determine whether there is a panel in the panel library that matches the panel image information.

[0060] Step 23: If there is a panel matching the panel image information in the panel library, obtain the panel matching the panel image information as the target panel;

[0061] Step 24: Generate microprograms through visual configuration system based on the target panel.

[0062] In this way, by generating a microprogram through a panel in the panel library that matches the panel image information of the page design image, it is convenient for users (for example, developers, product managers, project managers or testers, etc.) to quickly convert the page design image into a microprogram. In this way, when the microprogram is applied to the scenario of developing applications, the development efficiency is improved, the development cost can be reduced, the use threshold is lowered, and it has a wide application prospect.

[0063] In an exemplary embodiment, the page design image may refer to the final design drawing of a certain page of an application (APP), or may refer to a design sketch of a certain page of an application (APP), etc., and the embodiments of the present disclosure do not limit this. For example, a page design image may refer to an image designed by a user interface (UI) designer using a UI design tool (for example, a Sketch tool or a PhotoShop tool, etc.) for a certain application scenario of an application (APP). For example, a UI designer can design a page design image using a UI design tool according to the page development design ideas of the application, and then upload the page design image to the micro-program center through the entrance provided by the micro-program center of the application development platform. In this way, the micro-program center obtains the page design image.

[0064] In an exemplary embodiment, the data format of the page design image may include, but is not limited to, PNG, JPEG, or JPG, etc. Here, the embodiment of the present disclosure does not limit this.

[0065] In an exemplary embodiment, the panel image information may refer to the image area where the panel is located in the page design image. A page may include one or more panels, and correspondingly, the page design image corresponding to a page may include the panel image information corresponding to all panels in the page. That is, depending on the number of panels in the page, a page design image may include one panel image information or multiple panel image information. In addition, in addition to the panel image information of the panel in the page, the page design image corresponding to a page may also include the layout information of the panel in the page, for example, the relative position relationship of multiple panels in the page, or hierarchical structure information, etc.

[0066] In an exemplary embodiment, the panel may include: a line graph panel, a pie chart panel, a list panel, a circular proportional distribution graph panel, a bar graph panel, a title panel, a carousel panel, a system announcement panel, a picture panel, or a text panel, etc. Correspondingly, the panel image information may include: image information of a line graph panel, image information of a pie chart panel, image information of a list panel, image information of a circular proportional distribution graph panel, image information of a title panel, image information of a carousel panel, image information of a button panel, image information of a system announcement panel, or image information of a text panel, etc. Here, the embodiments of the present disclosure do not limit this.

[0067] In an exemplary embodiment, the data format of the microprogram may adopt the JSON (JavaScript Object Notation) data format based on DSL description.

[0068] In an exemplary embodiment, the content of the microprogram may include but is not limited to: basic information, DSL-JSON data of the page, and screenshots of the visual configuration of the microprogram, etc., wherein the basic information includes but is not limited to: name, version number, application type, resolution, or business attributes, etc. The DSL-JSON data of the page may include but is not limited to: JSON data of all panels in the page (i.e., strings describing the panels) and the entire DSL-JSON file of the layout information of the page. The layout information of the page may include: location information of each panel in the page, hierarchical structure information between all panels in the page, or hierarchical structure information between multiple pages, etc.

[0069] For example, Figure 3As shown, the page shown in the page design image 30 may include: 9 panels, namely: a list panel for displaying different panels, a line graph panel for displaying safety risks, a first annular proportional distribution graph panel for displaying the construction progress of the main structure, a second annular proportional distribution graph panel for displaying the construction progress of the decoration, a third annular proportional distribution graph panel for displaying the distribution of the construction project status, a first title panel for displaying the name of the park, a second title panel for displaying the name of the first annular proportional distribution graph panel, a first picture panel for displaying the park weather, and a second picture panel for displaying the park picture. That is, the page design image 30 may include 9 panel image information, namely: image information 301 of the list panel, image information 302 of the line graph panel, image information 303 of the first annular proportional distribution graph panel, image information 304 of the second annular proportional distribution graph panel, image information 305 of the third annular proportional distribution graph panel, image information 306 of the first title panel, image information 307 of the second title panel, image information 308 of the second picture panel, and image information 309 of the first picture panel. Among them, Figure 3 The image area enclosed by a dotted frame in the figure represents the panel image information.

[0070] For example, Figure 4 As shown, the title panel display interface 40 is a display diagram of the title panel in the panel library in the visual configuration system. The title panel display interface 40 may include: a first area 41 and a second area 42 arranged in sequence, a first style title panel 401 displayed in an enlarged manner in the first area 41, so that the user can visually configure the first style title panel 401, and a first style title panel 401 and a second style title panel 402 are displayed in a list manner in the second area 42. Here, Figure 4 The two styles of panels displayed in the second area 42 are used as an example for illustration.

[0071] For example, Figure 3 and Figure 4 As shown, the image information 307 of the second title panel and the image information 308 of the third title panel in the page design image 30 both match the second style title panel 402 in the panel library. Therefore, the microprogram center can obtain the second style title panel 402 from the panel library as the target panel corresponding to the image information 307 of the second title panel and the image information 308 of the third title panel respectively.

[0072] For example, Figure 3Taking the page design image 30 shown as an example, after the microprogram center matches 9 target panels from the panel library, the microprogram center can display the 9 target panels through a visual configuration system so that the user can perform configuration operations on at least part of the 9 target panels. Thus, after the configuration is completed, the microprogram corresponding to the page design image 30 can be generated.

[0073] In an exemplary embodiment, before step 24, the method may further include steps 25 to 26:

[0074] Step 25: if there is no panel matching the panel image information in the panel library, obtain a preset blank panel from the panel library, where the preset blank panel includes: at least one of a preset blank text panel and a preset blank picture panel;

[0075] Step 26: Generate a target panel based on the panel image information and the preset blank panel.

[0076] In actual applications, the panels in the page design image can essentially be represented as text and pictures. Therefore, when there is no matching panel in the panel library, for example, certain icons, faces, background images, etc., a quick layout can be performed with a picture panel or a text panel. Then, in an exemplary embodiment, step 26 may include steps 261 to 263:

[0077] Step 261: Determine whether the panel type information is a text panel type;

[0078] Step 262: if the panel type information is a text panel type, extracting text information from the panel image information, and inserting the text information into a preset blank text panel to generate a target panel;

[0079] Step 263: If the panel type information is not a text panel type, insert the panel image information into a preset blank image panel to generate a target panel.

[0080] In this way, when there is no panel matching the panel image information in the panel library, the unknown panel appearing in the page design image can be automatically generated as a text panel or a picture panel. Thus, the panel can be generated quickly without manual selection by the user, which can improve the development speed of the microprogram.

[0081] In an exemplary embodiment, step 22 may include: step 221 to step 223:

[0082] Step 221: Determine panel type information based on panel image information;

[0083] Step 222: Based on the panel type information, searching whether there is a panel corresponding to the panel type information in a preset panel library;

[0084] Step 223: According to the search result, determine whether there is a panel matching the panel image information in the preset panel library.

[0085] In an exemplary embodiment, the panel type information may include: any one of a line chart panel type, a pie chart panel type, a list panel type, a circular proportional distribution chart panel type, a title panel type, a carousel panel type, a system announcement panel type, and a text panel type. Here, the embodiments of the present disclosure do not limit this.

[0086] In an exemplary embodiment, step 221 may include: Step 2211: performing image recognition on the panel image information to obtain panel type information.

[0087] For example, image recognition can use a residual network (Residual Network, ResNet) (for example, ResNet18) series network model, a MobileNet series network model, an InceptionV3 series network model, or a lightweight age recognition network structure (Soft Stagewise Regression Network, SSR_Net) model and other neural network models to achieve the model implementation of the image classification function. Here, the embodiments of the present disclosure are not limited to this.

[0088] In an exemplary embodiment, step 2211 may include: preprocessing the panel image information; performing image recognition on the processed panel image information to obtain panel type information.

[0089] For example, the preprocessing may include: any one or more of denoising, averaging, normalization, and image standardization. For example, the denoising may be any one or more of bilateral filtering, Gaussian filtering, binning denoising, KD-Tree (K-Dimensional Tree) denoising, straight-through filtering, random sampling consistency filtering, and statistical denoising. Here, the embodiments of the present disclosure do not limit this.

[0090] In an exemplary embodiment, before step 2211 , step 221 may further include: step 2212 : performing image segmentation on the page design image to obtain panel image information.

[0091] For example, the image segmentation method may adopt a segmentation algorithm based on image texture and color, or a cutout model based on a deep learning algorithm, etc. Of course, other segmentation methods may be used as long as the panel image information can be segmented from the page design image, and the embodiments of the present disclosure are not limited to this.

[0092] In addition, in step 2212, in the process of segmenting the panel image information from the page design image, the relative position of each panel image information in the page design image can also be recorded, that is, the relative position of the panel in the page can be recorded, which can be used to automatically generate the layout information of the panel.

[0093] In an exemplary embodiment, step 223 may include: when there is a panel in the panel library that matches the panel type information of the panel image information, it may be determined that there is a panel in the panel library that matches the panel image information. Alternatively, when there is a panel in the panel library that matches the panel type information of the panel image information, it may be determined that there is a panel in the panel library that matches the panel image information.

[0094] In an exemplary embodiment, in addition to storing pre-set panels, the panel library can also store the correspondence between the pre-set panels and panel type information. The panel type information of the panel image information can be searched in the panel library. After the panel type information of the panel image information is found, the panel that matches the panel type information of the panel image information can be obtained from the panel library based on the correspondence between the pre-set panels and the panel type information.

[0095] Of course, in addition to the above-listed method of using panel type information to retrieve panels, the panel library can provide other methods of retrieving panels, for example, a method of searching by image, that is, in addition to storing pre-set panels, the panel library can also store the correspondence between pre-set panels and panel image information. Here, the embodiments of the present disclosure do not limit this.

[0096] In an exemplary embodiment, step 24 may include steps 241 to 242:

[0097] Step 241: Displaying the target panel through the visual configuration system;

[0098] Step 242: In response to the user operation, the target panel is configured through the visual configuration system to generate a microprogram, wherein the configuration operation includes at least one of display parameter configuration, data binding, event binding and component binding.

[0099] In an exemplary embodiment, configuring the display parameters of the panel may refer to configuring the appearance of the panel, such as size, color, or font, etc. Here, the embodiment of the present disclosure does not limit this.

[0100] In an exemplary embodiment, data binding to a panel may refer to binding panel content to the panel. For example, a user may manually input data to be displayed in a panel through a visualization configuration system, or a user may bind data provided by other data servers to the panel through a visualization configuration system. For example, a title text may be input to a title panel. For example, a line chart panel may be bound to multiple data sources, etc. Here, the embodiments of the present disclosure do not limit this.

[0101] In an exemplary embodiment, binding an event to a panel may refer to binding a jump event or a click event to the panel, etc. Here, the embodiment of the present disclosure does not limit this.

[0102] In an exemplary embodiment, binding components to a panel may refer to binding one or more components provided by a component center to the panel, and the components may include but are not limited to: a drop-down list box, a text input box, a button, a navigation bar (TabBar), a scroll bar or a check box, etc. For example, as shown in 3, a drop-down list box may be bound to a target panel (i.e., a line chart panel) corresponding to the image information 302 of the line chart panel, so that during the use of the application, a user viewing the line chart can select the data that the user is more concerned about through the drop-down list box, so that the line chart panel only displays the data that the user is more concerned about.

[0103] Figure 5 FIG. 2 is a second flow chart of the microprogram generation method in the exemplary embodiment of the present disclosure. Figure 5 As shown, the microprogram generation method may include the following steps:

[0104] (1) Through the microprogram center, a project template is constructed to set the basic information of the microprogram to be generated, where the basic information may include: name, version number, application type, resolution, or business attributes.

[0105] (2) Through the microprogram center, determine whether the microprogram generation process is in progress. If not, store the draft data of the microprogram. If yes, the following microprogram generation process can be executed.

[0106] (3) Importing at least one page design image through the micro-program center, where the page design image may include: at least one panel image information.

[0107] (4) Through the microprogram center, for each page design image, the page design image is preprocessed, and the preprocessed image is segmented, or the page design image is directly segmented to obtain at least one panel image information.

[0108] (5) Through the microprogram center, for each panel image information, image features are extracted from the panel image information, or image classification is performed on the panel image information to obtain panel type information.

[0109] (6) For each panel type information corresponding to the panel image information, the microprogram center searches the panel library with the panel type information to find out whether there is a panel matching the surface type information, that is, to find out whether there is a panel matching the panel image information. If there is a matching panel, the matching panel is obtained as the target panel for layout. If there is a matching panel, the segmented panel image information is directly embedded in the visualized picture panel, or the text information in the segmented panel image information is embedded in the visualized text panel to generate a target panel for layout.

[0110] At this point, the process of determining the target panel in the microprogram to be generated based on the page design image is completed. Next, after determining the target panel corresponding to all panel image information in the page design image, the target panel can be visually configured by the visual configuration system to generate the microprogram.

[0111] (7) For each target panel, in the visual configuration system, the target panel is laid out on the page by dragging and dropping the target panel.

[0112] (8) For each target panel, at least one of display parameter configuration, event binding, data binding and component binding is performed on the target panel through the visual configuration system to improve the function of each panel. Among them, event binding may include: jump time or click event, etc., data binding may include: manually input data or pull data from the server interface for data binding, component binding may include: binding a drop-down list box, a text input box, a button, a navigation bar (TabBar), a scroll bar or a check box, etc.

[0113] (9) Generate a microprogram through a visual configuration system, wherein the data format of the microprogram may be a DSL-JSON data format, and the DSL-JSON file of the microprogram may include but is not limited to: basic information of the microprogram, JSON data of all panels in a page (i.e., strings describing the panels), layout information of the page, and screenshots of the visual configuration of the microprogram. The layout information of the page may include: location information of each panel in the page, hierarchical structure information between all panels in the page, or hierarchical structure information between multiple pages, etc.

[0114] At this point, the process of generating a micro program is completed, and the generated micro program can be stored in the micro program center so as to subsequently generate a corresponding cross-platform application. In this way, the process of converting a page design image into a micro program is realized.

[0115] (10) When creating a product, you can select the corresponding micro-program to automatically package and generate an application suitable for the required application type, for example, an application suitable for IOS, Android, Web, Windows, macOS or Linux platforms. In this way, the process of converting a page design image into an application is realized.

[0116] The above process is schematically illustrated by taking the process of generating a microprogram and an application from a page design image as an example. In actual applications, the microprogram center in the application development platform provided by the exemplary embodiment of the present disclosure can also import multiple page design images at a time, and generate a microprogram consisting of panels in multiple pages. Those skilled in the art can refer to the above content for understanding, and will not repeat them here. At this time, in addition to including the basic information of the microprogram, the JSON data of all panels in each page (i.e., a string describing the panel), the position information of each panel in the page, and the hierarchical structure information between all panels in the page, the microprogram can also include: hierarchical structure information between multiple pages. The hierarchical structure information between multiple pages can be automatically generated in the order of the imported page design images, or it can be generated based on subsequent manual page adjustments through a visual configuration system, for example, placing different pages on the same TabBar, or opening different pages within the range of different click events, etc.

[0117] The description of the above application scenario embodiment is similar to the description of the above microprogram generation method embodiment, and has similar beneficial effects as the method embodiment. For technical details not disclosed in the application scenario embodiment of the present disclosure, those skilled in the art refer to the description in the method embodiment of the present disclosure for understanding, and no further description is given here.

[0118] Based on the same inventive concept, an embodiment of the present disclosure further provides a computer device, which may include: a processor and a memory storing a computer program that can be run on the processor, wherein when the processor executes the computer program, the steps of the microprogram generation method in one or more exemplary embodiments are implemented.

[0119] In an exemplary embodiment, Figure 6 As shown, the computer device 60 may include: at least one processor 61; and at least one memory 62 and a bus 63 connected to the processor 61; wherein the processor 61 and the memory 62 communicate with each other via the bus 63; the processor 61 is used to call the program instructions in the memory 62 to execute the steps of the microprogram generation method in one or more of the above exemplary embodiments.

[0120] In an exemplary embodiment, the processor may be a central processing unit (CPU), other general-purpose processors, a digital signal processor (DSP), a field programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components, application-specific integrated circuits, etc. A general-purpose processor may be a microprocessor (MPU) or the processor may be any conventional processor, etc. Here, the embodiments of the present disclosure do not limit this.

[0121] In an exemplary embodiment, the memory may include a non-permanent memory in a computer-readable storage medium, a random access memory (RAM) and / or a non-volatile memory, such as a read-only memory (ROM) or a flash memory (Flash RAM), and the memory includes at least one storage chip. Here, the embodiments of the present disclosure are not limited to this.

[0122] In an exemplary embodiment, the bus may include a power bus, a control bus, a status signal bus, etc. in addition to the data bus. Figure 6 In the figure, the various buses are all labeled as bus 63. Here, the embodiment of the present disclosure does not limit this.

[0123] In an exemplary embodiment, the computer device may also include but is not limited to the following components: an image acquisition unit or a voice playback unit, etc. For example, the image acquisition unit may be configured to acquire images of materials (including marking information). For example, the image acquisition unit may include but is not limited to using at least one camera, etc. For example, the voice playback unit may be configured to play alarm information. For example, the voice playback unit may include but is not limited to using at least one speaker, etc.

[0124] In the implementation process, the processing performed by the computer device can be completed by the hardware integrated logic circuit in the processor or the instructions in the form of software. That is, the method steps of the embodiment of the present disclosure can be embodied as being executed by a hardware processor, or being executed by a combination of hardware and software modules in the processor. The software module can be located in a storage medium such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory, and the processor reads the information in the memory and completes the steps of the above method in combination with its hardware. To avoid repetition, it will not be described in detail here.

[0125] Based on the same inventive concept, the embodiment of the present disclosure further provides a computer-readable storage medium, including a stored program, wherein when the program is run, the steps of the microprogram generation method in one or more of the above exemplary embodiments are implemented. For example, when the program is run, the device where the storage medium is located is controlled to execute the steps of the microprogram generation method in one or more of the above exemplary embodiments.

[0126] In an exemplary embodiment, the computer-readable storage medium may include, but is not limited to, ROM / RAM, a magnetic disk or an optical disk, etc. Here, the embodiment of the present disclosure does not limit this.

[0127] The description of the above computer device or computer-readable storage medium embodiment is similar to the description of the above method embodiment, and has similar beneficial effects as the method embodiment. For technical details not disclosed in the computer device or computer-readable storage medium embodiment of the present disclosure, those skilled in the art refer to the description of the method embodiment of the present disclosure for understanding. No further details will be given here.

[0128] It will be appreciated by those skilled in the art that all or some of the steps, systems, and functional modules / units in the methods disclosed above may be implemented as software, firmware, hardware, and appropriate combinations thereof. In hardware implementations, the division between the functional modules / units mentioned in the above description does not necessarily correspond to the division of physical components; for example, a physical component may have multiple functions, or a function or step may be performed by several physical components in cooperation. Some or all components may be implemented as software executed by a processor, such as a digital signal processor or a microprocessor, or implemented as hardware, or implemented as an integrated circuit, such as an application-specific integrated circuit. Such software may be distributed on a computer-readable medium, which may include a computer storage medium (or non-transitory medium) and a communication medium (or temporary medium). As known to those skilled in the art, the term computer storage medium includes volatile and non-volatile, removable and non-removable media implemented in any method or technology for storing information (such as computer-readable instructions, data structures, program modules, or other data). Computer storage media include, but are not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital versatile disks (DVD) or other optical disk storage, magnetic cassettes, magnetic tapes, magnetic disk storage or other magnetic storage devices, or any other medium that can be used to store the desired information and can be accessed by a computer. In addition, it is well known to those of ordinary skill in the art that communication media typically contain computer-readable instructions, data structures, program modules, or other data in a modulated data signal such as a carrier wave or other transport mechanism, and may include any information delivery media.

[0129] Although the embodiments disclosed in the present disclosure are as above, the above contents are only embodiments adopted for facilitating the understanding of the present disclosure and are not intended to limit the present disclosure. Any technician in the field to which the present disclosure belongs can make any modifications and changes in the form and details of implementation without departing from the spirit and scope disclosed in the present disclosure, but the scope of patent protection of the present disclosure shall still be subject to the scope defined in the attached claims.

Claims

1. An application development platform, characterized in that: include: Panel library, micro-program center and visual configuration system, among which, The panel library is configured to store panels; The microprogram center is configured to obtain a page design image including panel image information; determine whether there is a panel matching the panel image information in the panel library; if there is a panel matching the panel image information in the panel library, obtain the panel matching the panel image information as a target panel; and generate a microprogram based on the target panel through the visual configuration system; Also included: a component center configured to store components; The microprogram center is configured to display the target panel through the visual configuration system; in response to user operation, perform configuration operation on the target panel to generate the microprogram, wherein the configuration operation includes: at least one of display parameter configuration, data binding, event binding and component binding; The microprogram center is further configured to obtain a preset blank panel from the panel library if there is no panel matching the panel image information in the panel library, wherein the preset blank panel includes at least one of a preset blank text panel and a preset blank picture panel; and generate the target panel based on the panel image information and the preset blank panel; The microprogram center is also configured to determine panel type information based on the panel image information; based on the panel type information, search whether there is a panel corresponding to the panel type information in a pre-set panel library; and determine whether there is a panel matching the panel image information in the pre-set panel library based on the search result.

2. The platform according to claim 1, characterized in that The microprogram center is further configured to determine whether the panel type information is a text panel type; if the panel type information is a text panel type, extract text information from the panel image information, and insert the text information into a preset blank text panel to generate the target panel; If the panel type information is not a text panel type, the panel image information is inserted into a preset blank picture panel to generate the target panel.

3. The platform according to claim 1, characterized in that: Also includes: The product center is configured to package the microprogram to generate a cross-platform application; wherein the cross-platform application generates a page including the target panel applicable to different operating systems when running on different operating systems.

4. A microprogram generation method, characterized in that: Applied to an application development platform, the method comprises: obtaining a page design image including panel image information; Determine whether there is a panel matching the panel image information in the panel library; If a panel matching the panel image information exists in the panel library, acquiring the panel matching the panel image information as a target panel; Based on the target panel, a microprogram is generated through a visual configuration system; The generating of the microprogram based on the target panel through a visual configuration system comprises: displaying the target panel through a visual configuration system; performing a configuration operation on the target panel through the visual configuration system in response to a user operation to generate the microprogram, wherein the configuration operation comprises: at least one of display parameter configuration, data binding, event binding and component binding; The method further includes: if there is no panel matching the panel image information in the panel library, obtaining a preset blank panel from the panel library, the preset blank panel including: at least one of a preset blank text panel and a preset blank picture panel; generating the target panel based on the panel image information and the preset blank panel; The method of determining whether there is a panel matching the panel image information in the panel library includes: determining panel type information based on the panel image information; searching, based on the panel type information, whether there is a panel corresponding to the panel type information in a pre-set panel library; and determining, based on the search result, whether there is a panel matching the panel image information in the pre-set panel library.

5. The method according to claim 4, characterized in that The data format of the microprogram adopts the JSON data format based on DSL description.

6. The method according to claim 4, characterized in that The generating the target panel based on the panel image information and the preset blank panel includes: Determine whether the panel type information is a text panel type; If the panel type information is a text panel type, extracting text information from the panel image information, and inserting the text information into a preset blank text panel to generate the target panel; If the panel type information is not a text panel type, the panel image information is inserted into a preset blank picture panel to generate the target panel.

7. The method according to claim 4, characterized in that The determining panel type information based on the panel image information includes: Performing image segmentation on the page design image to obtain the panel image information; Perform image recognition on the panel image information to obtain the panel type information.

8. A computer device comprising: A processor and a memory storing a computer program that can be run on the processor, wherein when the processor executes the program, the steps of the microprogram generation method according to any one of claims 4 to 7 are implemented.

9. A computer-readable storage medium comprising a stored program, wherein: The steps of the microprogram generation method according to any one of claims 4 to 7 are implemented when the program is running.

Images