Cross-platform low-code application development system based on Flutter architecture

Abstract

The invention provides a cross-platform low-code application development system based on a Flutter framework. Comprising a login registration module, a project management module, an interface design module, a state management module, a route management module, a team management module, a help document module, an AI page design module, a development document generation module, a hardware integration module, a code generation module, a multi-user collaborative development module, a communication module, an online simulator module, an AI generation application module and an interface management module. An asset management module, a developer forum module, an application market module and an application packaging module. The communication module supports various communication protocols and secure transmission modes, and ensures that data exchange applied to cross-platform and cross-system environments is secure and reliable. Through component dragging and graphical configuration, the low-code platform automatically analyzes configuration data to generate an App, a development document and a source code. And meanwhile, multi-person collaborative development is supported, so that the development threshold is reduced and the development speed is increased.

Description

Technical Field

[0001] The present invention relates to the technical field of software development and mobile application development, and in particular to a cross-platform low-code application development system based on the Flutter architecture. Background Art

[0002] In the field of mobile application development, traditional development methods usually rely on writing a large amount of native code to adapt to the needs of different platforms (such as iOS and Android). Although this approach can achieve high performance and platform characteristics, it also faces significant challenges and problems. First, the differences between different platforms require developers to have knowledge of multiple programming languages ​​​​and development tools, which greatly increases the complexity and technical threshold of development. In addition, when developers write, debug, and maintain codes for multiple platforms, they are prone to problems such as code redundancy and high maintenance costs. Especially in the update and maintenance stage, developers need to modify and test the code of each platform separately, which not only increases the workload, but also easily leads to cross-platform consistency issues.

[0003] In order to solve the above problems, cross-platform development frameworks have emerged, such as Flutter and React Native. Although these frameworks have solved the efficiency problem of cross-platform development to a certain extent, there are still some shortcomings. Most of the existing cross-platform development frameworks provide basic component libraries and development tools, but in complex application scenarios, developers still need to write a lot of custom code to implement specific business logic and interactive functions. In this case, developers not only need to understand the underlying mechanism of the framework, but also need to write a lot of repetitive code to handle issues such as state management, routing management, data communication, and hardware integration. This repetitive work reduces development efficiency and increases the complexity and maintenance difficulty of the code.

[0004] Existing technologies also face challenges in cross-team collaboration. In complex projects, multiple developers usually need to work on the same code base at the same time, but the lack of effective collaboration tools and mechanisms often leads to code conflicts, version confusion, and inconsistent progress. In addition, existing cross-platform frameworks also have certain limitations when dealing with hardware integration, and cannot fully utilize the hardware characteristics of the device, limiting the functional expansion of the application.

[0005] The consequences of these problems are obvious. First, low development efficiency and increased development costs make it difficult for companies to maintain their advantages in the fierce market competition. Second, due to increased code redundancy and complexity, application maintenance and expansion become more difficult, which can easily lead to unstable application quality and poor user experience. In addition, the lack of effective collaboration mechanisms and hardware integration support makes team collaboration inefficient, affecting the progress of the project and the final delivery quality. Summary of the invention

[0006] In order to overcome the shortcomings of the prior art, the present invention proposes a cross-platform low-code application development system based on the Flutter architecture. By integrating multiple functional modules, it provides a complete solution from interface design to application release, greatly simplifies the development process, reduces development costs, and improves application quality and market competitiveness; and the communication module supports multiple communication protocols and secure transmission methods to ensure that the data exchange of applications in cross-platform and cross-system environments is safe and reliable. The integration of the API management unit enables developers to easily implement complex data communication requirements and meet the requirements of different application scenarios.

[0007] To achieve the above objectives, the present invention provides a cross-platform low-code application development system based on the Flutter architecture, including a login and registration module, an interface design module, a state management module, a routing management module, a team management module, a help document module, a page layout modification module through AI dialogue, a development document generation module, a hardware integration module, a code generation module, a multi-user collaborative development module, a communication module, an online simulator module, an application market module and an application packaging module;

[0008] An interface design module, which allows users to create application interfaces using a predefined UI component library through a user interface that supports drag-and-drop operations;

[0009] The UI component library includes text, button, image, video player, map, chart and input box components, each of which contains multiple preset styles, and users can select from different styles or customize styles to apply to components;

[0010] The interface design module includes a property editor that allows users to configure components by setting color, size, position, style, and animation effects. It also supports real-time preview of user changes to property configurations, automatically synchronizes component display effects, and integrates data binding functions to associate the properties of UI components with external data sources, so as to automatically update the component's display content or style when the data source changes.

[0011] Furthermore, it also includes a state management module, which implements global and local state management based on the Provider tool;

[0012] The state management module includes:

[0013] The state storage unit is used to store global state and local state data. The global variables can be configured in the system settings, and the local variables can be configured in the page management. The configuration content includes the variable name, type, default value and variable description. The low-code platform will automatically generate variables and annotation content in the code according to the variable configuration;

[0014] The state change monitoring unit is used to monitor state changes and automatically trigger corresponding interface updates when variable values ​​change;

[0015] The state persistence unit is used to save key state data to local storage or cloud database to ensure the consistency and persistence of state data when the application is restarted or used across devices.

[0016] Further, it also includes a hardware integration module;

[0017] The hardware integration module includes:

[0018] HID device interface unit, its features include

[0019] (1) A graphical configuration page that allows the user to configure the operation type of the HID protocol, wherein the operation type includes no operation, scanning, connecting, disconnecting, sending data, and receiving data;

[0020] (2) In the graphical configuration page, the user can configure the corresponding content for each operation type. The scanning operation includes single scanning and timed scanning. The connection operation supports the configuration of the connection mode, including the device's VID, PID, device name and serial number, and device list index; the receiving data operation supports associating the received data with local variables or implementing data parsing, verification, and formatting through custom code blocks; the sending data operation supports the user to configure parameters such as data format, data content, and transmission mode for the sending data operation;

[0021] (3) A module for automatically generating underlying logic, which is used to automatically generate underlying code based on user-configured parameters to complete communication operations with the HID device without the user having to intervene in the implementation of the underlying logic.

[0022] Serial communication interface unit, its features include

[0023] (1) a graphical configuration page for allowing a user to configure an operation type of the serial port protocol, wherein the operation type includes no operation, scanning, connecting, disconnecting, sending data, and receiving data;

[0024] (2) In the graphical configuration page, the user can configure the corresponding content for each operation type. The scanning operation includes single scanning and timed scanning. The connection operation supports the configuration of serial port parameters, including baud rate, data bit, stop bit, check bit, flow control mode, etc.; the receiving data operation supports associating the received data with local variables or implementing data parsing, checking and formatting through custom code blocks; the sending data operation supports the user to configure parameters such as data format, data content and sending frequency for the sending data operation;

[0025] (3) A module that automatically generates the underlying logic, which can dynamically select different serial port communication protocols according to user configuration, automatically adjust the serial port configuration, and adapt to different types of serial port devices. Users do not need to intervene in the details of the underlying logic.

[0026] Bluetooth communication unit, including

[0027] (1) A graphical configuration page that allows users to configure the types of Bluetooth communication operations, including scanning, connecting, disconnecting, sending data, receiving data, receiving broadcast data, and stopping scanning;

[0028] (2) In the graphical configuration page, the user can configure the corresponding content for each operation type. The scanning operation supports the configuration of multiple scanning modes, including single scanning, rescanning after disconnection, and rescanning after stopping scanning, and the scanning duration can be set. The connection operation supports the configuration of Bluetooth connection parameters, including the device name, MAC address, and fields contained in the Bluetooth name. After the connection, the UUID, read UUID, and write UUID of the Bluetooth service can be configured; the receiving data and receiving broadcast data operations support associating the received data with local variables or implementing data parsing, verification, and formatting through custom code blocks; the sending data operation supports the user to configure parameters such as data format and data content for the sending data operation;

[0029] (3) A module that automatically generates underlying logic, which is used to automatically generate underlying code based on the Bluetooth communication parameters configured by the user to achieve communication with the Bluetooth device without the user having to intervene in the underlying implementation details.

[0030] WiFi communication unit, which is used to select UDP, TCP and COAP communication types through a graphical page, and dynamically display the corresponding specific graphical configuration according to the communication type. The low-code platform automatically generates the underlying code according to the WiFi communication protocol parameters configured by the user, establishes a connection with the device and performs data communication operations, and the user does not need to intervene in the underlying implementation details;

[0031] (1) The graphical configuration page supports user-configured UDP communication parameters, including target IP address, port number, and data format;

[0032] (2) The graphical configuration page supports user-configured TCP communication parameters, including target IP address, port number, connection timeout, and number of retries;

[0033] (3) The graphical configuration page supports user-configured COAP communication parameters, including target IP address, port number, request method, message type, and timeout settings;

[0034] (4) A module for automatically generating underlying logic, which is used to automatically generate underlying code based on the WiFi communication protocol parameters configured by the user, establish a connection with the device and perform data communication operations without the user having to intervene in the underlying implementation details.

[0035] A sensor communication unit, characterized in that it comprises:

[0036] (1) A graphical configuration page that allows users to configure various sensor parameters of the mobile phone through an intuitive interface, including but not limited to accelerometers with gravity, accelerometers without gravity, gyroscopes, magnetometers, etc.;

[0037] (2) The graphical configuration page supports the user to select and configure parameters such as sensor type, sampling rate, data format and data processing method;

[0038] (3) The graphical configuration page supports associating sensor data with local variables or global variables in the App, ensuring that the sensor data configured by the user can be synchronized to the application in real time;

[0039] (4) A real-time data monitoring module, which is used to monitor and receive sensor data changes in real time and automatically update the variable values ​​associated with the sensor data to ensure data fluency and timeliness and reduce delays;

[0040] (5) The graphical configuration page also supports users to set the trigger conditions and frequency of data collection to achieve refined control;

[0041] (6) The module for automatically generating underlying logic generates underlying code according to the sensor parameters configured by the user, automatically connects the device sensors and manages the data flow, and the user does not need to intervene in the underlying implementation details;

[0042] (7) The graphical configuration page supports users to set sensor data processing and filtering rules through custom code blocks, including data smoothing, noise suppression, and outlier detection, to ensure data accuracy and reliability;

[0043] (8) A module for automatically generating underlying logic, which is used to automatically generate underlying code based on the sensor parameters configured by the user, without the user having to intervene in the underlying implementation details.

[0044] An NFC communication unit, characterized in that it comprises:

[0045] (1) A graphical configuration page for configuring the reading and writing functions of NFC communication, including selecting and configuring the reading and writing types of NFC tags;

[0046] (2) The graphical configuration page supports the configuration of NFC tag writing types, including but not limited to data types such as files, business cards, WiFi information, and phone numbers. Users can select and fill in relevant content as needed;

[0047] (3) The real-time data monitoring module supports user-configured response events for NFC operations, including callback and notification mechanisms for events such as successful writing, reading failure, and data format errors, ensuring timely and accurate operation feedback;

[0048] (4) Automatically generate code based on the user's configuration on the graphical interface to complete communication with the NFC device, without the user having to manually write the underlying code.

[0049] The hardware integration module also includes an error processing unit for capturing and processing errors that may occur during the communication process.

[0050] Furthermore, it also includes a code generation module, which automatically generates downloadable source code through a template engine and a custom code generation context, and finally outputs the generated source code file to a specified storage location;

[0051] The code generation module includes: a template loading unit, which uses a series of rules to match code templates and adjusts the parameters of the selected template according to specific needs;

[0052] The code parsing unit is used to parse the JSON data input by the user and map it into executable code snippets, as follows:

[0053] (1) Get the page JSON data saved by the user in the database;

[0054] (2) Parse the data from top to bottom according to the internally defined protocol to obtain the corresponding component code;

[0055] (3) Fill the component codes into the character variables in the context one by one;

[0056] (4) Use the template engine to load the template file, read the context string and output it to the specified file location.

[0057] The code optimization unit uses the Dart code formatter to eliminate redundant code, format, and add comments after the code is generated; extract methods and functions. When repeated logic is found in the code, it can be extracted into independent methods or functions to improve the maintainability and readability of the code; rename variables and functions. If the variable or function name in the code is not clear or misleading, it can be renamed;

[0058] Interface generation unit, the generation of an interface requires five steps, as follows:

[0059] (1) Enter the basic information of the interface, including the interface name, request method (such as GET, POST, PUT, DELETE, etc.), and URL path;

[0060] (2) Configure input parameters according to the functional requirements of the interface. The input parameters may include query conditions, data in the request body, etc.

[0061] (3) Define the output results of the interface. The output parameters can be a single object, an array, or other complex data structures;

[0062] (4) Test interface, you can simulate sending requests to test the function of the interface, enter different parameter combinations, and check whether the response results of the interface meet expectations

[0063] (5) Generate interface code, automatically generate the code of the background interface according to the configuration information;

[0064] Furthermore, it also includes a routing management module, which is used to manage page navigation and routing mapping of the application;

[0065] Through the cross-platform low-code development platform based on the Flutter architecture, users configure routing configurations according to the graphical interface. The low-code platform can automatically generate routing management codes such as static routing, dynamic routing, routing interception units, and navigation animations according to user configurations, reducing user development time and maintenance costs, including the following aspects:

[0066] Static routing configuration: Without writing code, users can define the basic navigation structure of the application by dragging or selecting configurations on the graphical interface, and intuitively build the relationship and hierarchy between each page;

[0067] Dynamic routing generation: Users can configure dynamic routing rules in a graphical way and set routing parameters to achieve page navigation based on user operations or application status. This allows the application's page jumps to be adjusted in real time as needed without in-depth coding;

[0068] Route interception configuration: Users can add interception logic before route jump by checking options, such as permission verification, data preloading or other preprocessing operations. This can help developers implement application access control and data loading optimization without having to manually write complex interception code;

[0069] Customized navigation animation: The low-code platform provides a visual animation configuration module, where users can select or customize the transition animation effects when jumping between pages, improving the smoothness and consistency of the user experience;

[0070] This low-code configuration method greatly simplifies the implementation of routing management. Developers can quickly build and adjust the navigation logic of the application through graphical pages without in-depth coding.

[0071] Furthermore, it also includes a multi-user collaborative development module, which is based on WebSocket real-time communication technology to achieve simultaneous online editing and real-time synchronization by multiple people;

[0072] The multi-user collaborative development module includes: a collaborative status monitoring unit, which is used to monitor the editing operations of multiple users and ensure that there are no conflicts during the collaborative process;

[0073] Version control unit, used to record and manage the version change history during the collaboration process, supporting fast rollback and difference comparison;

[0074] The locking mechanism unit is used to automatically lock the area being edited when multiple people are editing the same file or component, to avoid data conflicts or overwriting caused by concurrent operations.

[0075] Furthermore, it also includes an AI generation module, which is based on the RoBERT pre-trained language model of the Transformer architecture and can automatically generate a list of application elements based on the natural language instructions input by the user;

[0076] The AI ​​generation module includes: a language parsing unit, which is used to parse the natural language input by the user into processable application requirements;

[0077] The element mapping unit is used to map the parsed requirements to specific UI components, data models, and interaction logic;

[0078] A template selection unit is used to automatically select an adaptive code or UI template according to user needs;

[0079] A code generation unit, used to generate and optimize corresponding application codes or configuration files;

[0080] The AI ​​generation module supports intelligent optimization of generation results to ensure that the output application has a reasonable structure and superior performance.

[0081] Furthermore, it also includes a communication module, which is used to provide an interface for Flutter to communicate with hardware and servers; the communication module includes: a protocol support unit that supports the integration and use of multiple communication protocols such as HTTP, WebSocket, TCP / IP, COAP, etc.; supported hardware types include: Bluetooth, serial port, HID, NFC, and various mobile phone sensors.

[0082] Secure transmission unit, which supports data encryption, authentication and transmission protocol selection to ensure the security and integrity of cross-platform data exchange;

[0083] The API management unit provides a standardized API interface for developers to integrate communication functions into applications and exchange data.

[0084] Furthermore, it also includes an online simulator module, which is used to preview the application effect in real time during the application development process;

[0085] The online simulator module includes: a device simulation unit, which is used to simulate the application display effects on different devices and supports switching between multiple screen sizes and resolutions;

[0086] Real-time debugging unit, used to capture and display error logs and performance data of applications running in the simulator, supporting breakpoint debugging and performance analysis;

[0087] The configuration synchronization unit is used to synchronize the configuration changes made by users on the development interface in real time to ensure that the preview effect is consistent with the actual application.

[0088] Furthermore, it also includes an application market module, which allows users to publish their own projects to the market and manage them;

[0089] The module includes: an application publishing unit, which is used to publish projects and set application description information, version number, icon, screenshots and other information;

[0090] It also includes platform cashback unit and personal cash withdrawal unit

[0091] Platform cashback unit: after the seller successfully publishes the application, the buyer completes the payment by scanning the QR code on the platform. The platform collects a part of the commission and returns the remaining amount to the seller's platform account;

[0092] Personal withdrawal unit: when a user accumulates a certain amount, he or she can apply for withdrawal. The withdrawal amount will be deducted from the corresponding personal tax according to the national statutory tax;

[0093] Income report unit, you can check the income amount by year, month and day, and check the payment content within a specific time period;

[0094] The review management unit is used to conduct security and content reviews on uploaded applications and notify users of review results;

[0095] The order management unit supports users to publish and accept demands, set prices, and calculate the monthly revenue;

[0096] User evaluation unit, which allows users to rate and comment on downloaded projects, helping developers obtain market feedback;

[0097] It also includes an application packaging module, which supports cross-platform packaging. The target platforms include Android, iOS, HarmonyOS, macOS, Windows, and Linux. Through virtualized container technology, users can perform packaging operations on the web without installing a specified platform environment. It supports multi-user packaging at the same time, which is achieved by clustering technology. When users perform packaging operations, they select available packaging services for packaging through an internal service scheduling algorithm. It supports priority packaging, which is achieved by using a max-heap data structure, so that users with high priority can be packaged first.

[0098] The application packaging module includes: a platform selection unit that allows users to select the target platform when packaging. The target platforms include Android, iOS, HarmonyOS, Windows, MacOS, and Linux;

[0099] The certificate management unit supports users to upload and manage signature certificates, and automatically performs signing operations during the packaging process;

[0100] The packaging execution unit automates the packaging process and is used to package the generated source code into an application. The details are as follows:

[0101] (1) Select available packaging services through the service scheduling algorithm, send the code to the packaging server, and notify the service that packaging is available

[0102] (2) After receiving the notification, the packaging service adds the packaging task to the queue and waits for packaging

[0103] (3) The task scheduler executes the packaging task and notifies the main server of the packaging status after completion.

[0104] The update management unit supports incremental updates and rollback functions, ensuring that users can perform safe and stable version updates and management after the application is released.

[0105] Interface management module: used to manage data interaction between applications and external systems or services. This module provides standardized API interface configuration and management tools, supports request methods such as GET, POST, PUT, DELETE, and integrates request parameter configuration, request header settings, and response parsing functions. Developers can configure and manage interfaces through a visual interface, reducing the complexity of manually writing interface code and ensuring the reliability and security of data communication.

[0106] Asset management module: used to manage various static resources and files (such as images, audio, video, documents, etc.) used in the application development process, supports resource classification, labeling, version control and centralized management, provides a unified interface call and resource reference method, removes duplicates through file MD5 values, and uses reference identifiers to ensure that resources are actually removed only after all reference identifiers are deleted, thereby improving resource consistency, traceability, project maintainability and scalability.

[0107] Developer Forum Module: Provides a platform for developers to communicate and share resources online. This module integrates discussion areas, technical blogs, question-answering, and project sharing. Developers can exchange development experiences, share technical resources, and obtain community support and official documents through this module to improve collaboration efficiency and learning effects. The forum module also supports user evaluation and contribution ranking to promote community activity and knowledge sharing.

[0108] Also includes team management module and help documentation module

[0109] The team management module includes the following

[0110] Enterprise application unit: users fill out the enterprise application form on the platform’s official website and proceed with the platform entry process;

[0111] Review management unit, check the enterprise application list in the background and conduct review. If successful, the company will be assigned a super administrator by default;

[0112] Project management units do not need to be shared; internal employees of the company can share projects and conduct collaborative development;

[0113] In the user management unit, the super administrator can allocate employee accounts and perform related operations such as adding, deleting, modifying and checking;

[0114] The resource management unit can view the relationship between all resource files of the team and users; can delete resource files; can set the storage space and alarm threshold of files, and send email alarms once the threshold is exceeded;

[0115] Permission management unit, system permissions include basic project management permissions, user management permissions, and resource management permissions; permission groups can be set to combine these permissions and assign them to users.

[0116] The help document module includes the following

[0117] The help document mainly tells users how to use our low-code platform, as well as some hardware operation documents and videos;

[0118] Add documents. The documents are written in markdown format, hosted by the company's internal code management tool, and automatically deployed to the server through shell scripts;

[0119] Document viewing: users can view this part of the documents through the website entrance;

[0120] During the construction process, the document search unit collects the title and content in the document to generate an index file for search, and then uses Lunr.js to search on the client side.

[0121] Development document generation module

[0122] The user creates a page and selects the page type (such as login and registration module, measurement module, etc.), and fills in the functional description of the page. The system uses AI to analyze the page type, function, API usage, and user comments, and automatically generates dynamic development documents. These documents will be generated based on the detailed information entered by the user to ensure that the document content is accurate and complete, and can be automatically updated to improve development efficiency.

[0123] Login registration module

[0124] When the login and registration page is rendered, the JS, CSS, and HTML files required by the low-code platform are loaded asynchronously, and the modules of the low-code platform are loaded in advance through lazy loading and caching mechanisms. After the user logs in, the preloaded or cached resources are used to quickly load the low-code platform modules, providing an instant opening experience.

[0125] The AI ​​page design module is characterized by including an AI generation module. The AI ​​generation module is based on the RoBERTa pre-trained model and can automatically generate page operations according to the natural language instructions input by the user.

[0126] AI generates page dialogue flow

[0127] Functional description:

[0128] User demand collection: Collect user page requirements through conversations, such as page functions, colors, button styles, etc.

[0129] method:

[0130] Design a conversation script: Define a series of questions and answer options that cover the main aspects of page development.

[0131] Create a dialogue tree: Build a dialogue tree to allow users to gradually drill down based on their answers and collect detailed demand information.

[0132] Example conversation flow:

[0133] User: "Generate an interface that shows a cute cartoon scene that looks like the interface of a children's interactive application or game."

[0134] AI: "Is there any other information? Such as the main elements of the page."

[0135] User: “The main elements include: a small dinosaur character in the center, which is green with big eyes and a friendly smile. The dinosaur is standing in the water, and is surrounded by some circular platforms or lotus leaves floating on the water.”

[0136] AI: “Are there any requirements for the page structure?”

[0137] User: "There is a dialog box at the top of the screen that says 'How does that feel?' and in the upper left corner it says 'Dino (Dinosaur)'."

[0138] AI: "What is the color scheme of the page? For example: blue, green, red, etc."

[0139] User: "The overall color scheme is dominated by blue, giving people a vibrant and natural feeling."

[0140] Compared with the prior art, the present invention has the following beneficial effects:

[0141] 1. The present invention provides a cross-platform low-code application development system based on the Flutter architecture. The system simplifies the complex application development process into visual drag-and-drop operations and configurations through tools such as interface design modules, code generation modules, and multi-user collaborative development modules, greatly reducing the technical requirements for developers, allowing even non-professional developers to efficiently create high-quality cross-platform applications.

[0142] 2. The present invention provides a cross-platform low-code application development system based on the Flutter architecture. The system integrates predefined functional modules such as UI component library, state management module, routing management module, hardware integration module, etc. Developers can use it out of the box, reducing the workload of manual code writing and significantly improving development efficiency. At the same time, the code generation module automatically generates and optimizes the code, further reducing redundant code and manual operations.

[0143] 3. The present invention provides a cross-platform low-code application development system based on the Flutter architecture. The system separates functional modules such as interface design, state management, routing management, and hardware integration through modular design, which reduces the coupling degree of the application and makes the application more maintainable. In addition, the integration of multi-user collaborative development modules, version control, and locking mechanisms ensures the smoothness of team collaboration and the traceability of the code, facilitating the subsequent expansion and maintenance of the project.

[0144] 4. The present invention provides a cross-platform low-code application development system based on the Flutter architecture. The system supports the development and packaging of multi-platform applications such as iOS, Android, HarmonyOS, Windows, MacOS, and Linux. Through the application market module and the packaging module, developers can easily publish applications to major platform markets to achieve extensive user coverage and market promotion; through the online simulator module, developers can preview the application effects in real time during the development process, capture and fix potential errors, and perform performance tuning to ensure that the final released application has a high-quality user experience. The diversified jump effects and custom navigation animations provided by the routing management module further enhance the fluency of user interaction; the asset management unit in the system supports the visualization of assets of enterprises or individuals, including projects, pictures, audio, video and other resources. The project quota of an enterprise or individual is fixed at the beginning, and if it is increased, it needs to be applied to our manufacturer. BRIEF DESCRIPTION OF THE DRAWINGS

[0145] In order to more clearly illustrate the specific implementation methods of the present invention or the technical solutions in the prior art, the drawings required for use in the specific implementation methods or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some implementation methods of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0146] Figure 1 This is a schematic diagram of the system structure of the present invention

[0147] Figure 2 This is a schematic diagram of the structure of the low-code platform system of the present invention.

[0148] Figure 3 The overall structure diagram edited for the present invention project

[0149] Figure 4 Schematic diagram of AI generation architecture for the present invention

[0150] Figure 5 This is the example APP packaging architecture diagram of the present invention DETAILED DESCRIPTION

[0151] The technical solution of the present invention will be more clearly and completely explained below through description of preferred embodiments of the present invention in combination with the accompanying drawings.

[0152] like Figure 1As shown, the cross-platform low-code application development system 100 based on the Flutter architecture includes an interface design module 101, a state management module 102, a routing management module 103, a hardware integration module 104, a code generation module 105, a multi-user collaborative development module 106, a communication module 107, an online simulator module 108, an application market module 109, an application packaging module 110, an AI application generation module 111, an interface management module 112, an asset management module 113 and a developer forum module 114, a team management module 115, a help document module 116, an AI page design module 117, and a development document generation module 118.

[0153] Among them, the interface design module 101 of the cross-platform low-code application development system 100 provides a user interface that supports drag-and-drop operations and integrates multiple UI component libraries, including components such as text, buttons, images, video players, maps, charts, and input boxes. Developers can intuitively create and configure the application interface by setting the color, size, position, and style parameters of the components, and can preview the configuration effect in real time. The components in the component library are highly reusable and modular in design. Developers only need to perform simple configuration to generate the target interface, which significantly improves development efficiency. In the actual development process, the interface design module 101 obtains and configures the target component by calling the component library interface. The components in the component library have a unified design style, high standards, and composability, support global references or individual references, and developers can use them flexibly according to application requirements.

[0154] The state management module 102 is used to manage the state data of each module in the application. With the accumulation of application function modules, state management becomes particularly important. This module is implemented based on the Provider tool and mainly includes a state storage unit, a state change monitoring unit, and a state persistence unit. The state storage unit saves the state data of all modules of the application in a specified directory, the state change monitoring unit is responsible for monitoring state changes and triggering interface updates in real time, and the state persistence unit ensures the consistency and persistence of state data when the application is restarted or used across devices.

[0155] The route management module 103 is used to manage page navigation and route mapping in the application. The module includes a static route configuration unit, a dynamic route generation unit, a route interception unit and a navigation animation unit.

[0156] Static routing configuration: Without writing code, users can define the basic navigation structure of the application by dragging or selecting configurations on the graphical interface, and intuitively build the relationship and hierarchy between each page.

[0157] Dynamic routing generation: Users can configure dynamic routing rules in a graphical way and set routing parameters to achieve page navigation based on user operations or application status. This allows the application's page jumps to be adjusted in real time as needed without in-depth coding.

[0158] Route interception configuration: Users can add interception logic before route jump by checking options, such as permission verification, data preloading or other preprocessing operations. This can help developers implement application access control and data loading optimization without having to manually write complex interception code.

[0159] Customized navigation animation: The low-code platform provides a visual animation configuration module, where users can select or customize the transition animation effects when jumping between pages to improve the smoothness and consistency of the user experience.

[0160] This low-code configuration method greatly simplifies the implementation of routing management. Developers can quickly build and adjust the navigation logic of the application through graphical pages without in-depth coding.

[0161] The hardware integration module 104 is used to exchange data with external devices and supports multiple communication interfaces, including HID device interface, serial communication interface, Bluetooth communication interface and WiFi communication interface. Users can select options and configure variable binding in the flowchart to search, connect, send and receive data with external devices. At the same time, the hardware integration module also integrates an error handling unit, which can capture and handle possible errors in real time during the communication process to ensure the reliability of data transmission.

[0162] The code generation module 105 automatically generates downloadable project front-end source code through the Freemarker template engine and the customized code generation context. The module includes a template loading unit, a code parsing unit, a code optimization unit, a code output unit and an interface generation unit. The template loading unit loads the corresponding code template according to the user configuration, and the code parsing unit parses the JSON data or natural language description input by the user and maps it to an executable code fragment. The code optimization unit automatically optimizes the generated code, eliminates redundant code and adds necessary comments, and finally the code output unit outputs the generated code file to a specified storage location, or directly integrates it into the user's development project. The interface generation unit creates a data table according to the user's web-side configuration data table structure and generates the corresponding back-end code.

[0163] The multi-user collaborative development module 106 is based on WebSocket real-time communication technology to achieve multi-person online editing and real-time synchronization. The module includes a collaborative status monitoring unit, a version control unit, and a locking mechanism unit. The collaborative status monitoring unit is used to monitor the editing operations of multiple users to ensure that there are no conflicts during the collaborative process; the version control unit records and manages the version change history during the collaborative process, and supports fast rollback and difference comparison; the locking mechanism unit is used to automatically lock the area being edited when multiple people edit the same file or component to avoid data conflicts or overwriting caused by concurrent operations.

[0164] The communication module 107 is used to provide an interface between Flutter and other native systems or cross-platform frameworks (such as JsBridge, ReactNative), and supports multiple communication protocols such as HTTP, WebSocket, Bluetooth, TCP / IP, COAP, etc. This module includes a protocol support unit, a secure transmission unit, and an API management unit to ensure the security and integrity of cross-platform data exchange. Developers can integrate various communication functions in their applications through the API management unit.

[0165] The online simulator module 108 is used to preview the application effect in real time during the application development process. This module includes a device simulation unit, a real-time debugging unit, and a configuration synchronization unit. The device simulation unit is used to simulate the application display effect on different devices and supports switching of multiple screen sizes and resolutions; the real-time debugging unit is used to capture and display the error log and performance data of the application running in the simulator, and supports breakpoint debugging and performance analysis; the configuration synchronization unit is used to synchronize the configuration changes of the user on the development interface in real time to ensure that the preview effect is consistent with the actual application.

[0166] The application market module 109 is used to publish and manage projects in the market. The application market module 109 includes an application publishing unit, an audit management unit, a sales management unit, and a user evaluation unit, and supports project publishing, auditing, pricing, sales statistics, and user evaluation management.

[0167] The application packaging module 110 includes a platform selection unit, a certificate management unit, a packaging execution unit and an update management unit, and supports automatic packaging, signing and version management of cross-platform applications.

[0168] The AI ​​generated application module 111 is used to automatically generate an application element list and code configuration according to the natural language description or requirement selection input by the user. This module uses natural language processing (NLP) and deep learning technology to parse the user's requirements into specific UI components, data models and logical processes, and generates a complete application structure by selecting an appropriate template, which significantly simplifies the development process and improves development efficiency.

[0169] The interface management module 112 is used to manage the data interaction between the application and the external system or service. This module provides standardized API interface configuration and management tools, supports request methods such as GET, POST, PUT, DELETE, and integrates request parameter configuration, request header setting, and response parsing functions. Developers can configure and manage interfaces through a visual interface, reduce the complexity of manually writing interface codes, and ensure the reliability and security of data communication.

[0170] The asset management module 113 is used to manage various static resources and files used in the application development process, such as images, audio, video, and documents. This module supports classification, labeling, version control, and centralized management of resources. Developers can call and reference resources through a unified interface to ensure the consistency and traceability of resources, while improving the maintainability and scalability of the project.

[0171] The developer forum module 114 provides a platform for developers to communicate and share resources online. The module integrates functions such as discussion area, technical blog, question answering and project sharing. Developers can exchange development experience, share technical resources, and obtain community support and official documents through the module to improve collaboration efficiency and learning effect. The forum module also supports user evaluation and contribution ranking to promote community activity and knowledge sharing.

[0172] Interface design module 115: The system not only supports quick page building through simple component dragging and property configuration, but also introduces AI page generation function. Users can choose to directly drag components, or describe page requirements through input boxes, and AI will automatically generate page layouts. This dual approach greatly improves development efficiency, retains the intuitive operation experience, and makes full use of intelligent construction functions, greatly lowering the threshold for APP development.

[0173] Code generation module 116: The code generation module automatically generates downloadable application front-end source code through the Freemarker template engine and a custom code generation context, and can generate simple data tables and simple background codes through web-side configuration, making it convenient for users to perform data testing.

[0174] AI-generated application 117: Based on the RoBERTa pre-trained model and deep learning technology, it can automatically generate a list of application elements based on the natural language instructions entered by the user; it supports intelligent optimization of the generated results to ensure that the output application has a reasonable structure and superior performance.

[0175] AI Page Design 118: Based on the RoBERTa pre-trained model and deep learning technology, it can automatically generate the json information required for intermediate page rendering according to the natural language instructions input by the user; it supports secondary development of the generated pages on the platform to ensure that user needs can be met.

[0176] By integrating the above modules, the cross-platform low-code application development system 100 can provide a complete solution from interface design, state management, routing management, hardware integration to code generation, multi-user collaborative development, AI generation, interface management, asset management, communication, online debugging, market release and packaging, which greatly improves development efficiency and application quality, and supports extensive expansion and secondary development.

[0177] The cross-platform low-code application development system 100 based on the Flutter architecture of the embodiment of the present invention realizes the full process support from interface design, state management, routing management, hardware integration to code generation, collaborative development, communication, online debugging, market release and packaging through the collaborative work of the above modules, which greatly reduces the development threshold and improves the development efficiency. Developers only need to write a set of business logic and user interaction logic codes to develop high-quality cross-platform mobile applications through the system, which reduces code redundancy and improves the maintainability and scalability of the application.

[0178] As a specific embodiment,

[0179] Front-end architecture design, architecture overview: Use Flutter as the basic framework to build cross-platform applications, adopt modular design, separate different functional modules, and ensure the maintainability and scalability of the code. Figure 2 As shown;

[0180] The overall structure of the project editor is as follows Figure 3 Shown

[0181] The core components include:

[0182] Editing interface: Provides user-friendly operation experience through drag-and-drop interface. Component library: Includes basic UI components and custom components, providing rich building blocks. State management: Use Provider state management tools to uniformly manage application states. Data storage: Use cloud storage for data persistence.

[0183] Editing interface layer

[0184] Designer: Drag-and-drop interface that allows users to design interfaces by dragging and dropping components. Implemented using Flutter's Draggable and DragTarget components. Property panel: Displays the properties of the selected component, allowing users to configure it. Uses dynamic forms to display and edit properties. Preview area: Preview the design effect in real time. Instant updates are achieved through StatefulWidget and setState.

[0185] Component library layer

[0186] Basic components and custom components. The steps for custom components are as follows:

[0187] 1. Create custom components

[0188] Users can create custom components according to their needs and use them in the low-code platform. The following is the implementation logic for creating custom components:

[0189] Define the component class:

[0190] Create a class that inherits from StatelessWidget or StatefulWidget.

[0191] Define a constructor in your class that accepts the required parameters.

[0192] Add properties:

[0193] Add the required properties (such as title, color, size, etc.) to the class based on the requirements of the component.

[0194] Initialize these properties using the constructor.

[0195] Implement the build method:

[0196] In the build method, use basic components (such as Container, Text, Row, etc.) to build the UI of the custom component.

[0197] Sets the appearance and behavior of the component based on the passed properties.

[0198] 2. Use custom components

[0199] Users can use custom components in the low-code platform just like other basic components. The following is the implementation logic of using custom components:

[0200] Import custom components:

[0201] Import the component class in the file where you need to use the custom component.

[0202] Instantiate the component:

[0203] Instantiate your custom component in your layout, passing the necessary properties.

[0204] Add the instantiated custom component to the interface layout.

[0205] 3. Interaction of custom components in low-code platforms

[0206] Property configuration:

[0207] In the low-code platform, users can set the properties of custom components through the configuration interface.

[0208] The configuration interface should provide user-friendly controls (such as text boxes, color pickers, switches, etc.) to set property values.

[0209] Drag and drop operation:

[0210] Support dragging and dropping custom components into the layout and adjusting the position and size of the components.

[0211] During the drag-and-drop process, a real-time preview is displayed to help users adjust the component layout.

[0212] Event handling:

[0213] Support adding event processing logic (such as click events, long press events, etc.) for custom components.

[0214] Provides an interface for users to write or select event handling code to define the behavior of components under different interactions.

[0215] Preview and test:

[0216] The real-time preview function is provided in the low-code platform, so users can see the actual effect of the customized components.

[0217] Support preview on different devices and screen sizes to ensure the adaptability of components.

[0218] Component Display

[0219] Use ListView or GridView to display the component library and allow users to drag and drop components into the designer.

[0220] State Management Layer

[0221] Provider: Provider performs global state management, simplifying state sharing and dependency injection.

[0222] State storage: Use the ChangeNotifier state management tool to manage component states and interaction logic.

[0223] Data storage layer

[0224] Cloud Storage: For projects that need to be synced, use a cloud storage solution.

[0225] Variable and route management

[0226] Variable management mechanism

[0227] Global variable management:

[0228] Central state management: Use a central state management library (such as Provider) to store and manage global variables. These libraries can provide a consistent API to access and update variables.

[0229] Shared data sources: Allow multiple components and pages to access and update the same data source to ensure data consistency.

[0230] Local variable management:

[0231] Component-level state: Each component can have its own local state, which is only valid for that component. For example, the state is updated through the setState method of StatefulWidget.

[0232] Dynamic data binding: supports dynamic binding of data to component properties, so that components can be updated in real time according to changes in external variables.

[0233] Variable synchronization:

[0234] Data flow: Implement a data flow mechanism so that variable changes can be delivered to all related components and pages in real time. For example, use streams or responsive programming (StreamBuilder).

[0235] Data monitoring: Components can monitor variable changes and automatically update views to maintain data consistency and interface responsiveness.

[0236] Persistent storage:

[0237] Local storage: Persist key variables in local storage (such as shared_preferences, file system) to maintain data after application restart.

[0238] Session storage: Save variable data during a user session, such as using a memory cache or session management tool.

[0239] Routing management mechanism

[0240] Routing configuration:

[0241] Routing table: defines all available routes and their corresponding page components. This can be implemented through static configuration files or dynamically generated configurations.

[0242] Route mapping: Map the route path to a specific page component to make the navigation structure of the application clear and maintainable.

[0243] Route navigation:

[0244] Navigation controller: Provides a global navigation controller to manage page jumps, including push, pop-up, and page replacement.

[0245] Navigation method: Provide a unified API or control to handle page jumps, such as Navigator.push() and Navigator.pop().

[0246] Routing parameter management:

[0247] Passing parameters: When navigating a page, you can pass parameters to the target page. These parameters can be passed through URL query parameters or constructors.

[0248] Receiving parameters: The target page can receive parameters from the route and perform corresponding processing and display based on these parameters.

[0249] Dynamic Routing:

[0250] Parameterized routing: Supports dynamic routing, such as routing paths generated based on user input or state. Allows complex routing structures to be created and processed at runtime.

[0251] Nested routing: supports sub-page navigation within a page, allowing multiple levels of routing to be nested in the page.

[0252] Navigation Animation:

[0253] Transition effect: Provide transition animation for navigation between pages, making the user experience smoother and more natural.

[0254] Custom animation: Allows you to customize the effects and duration of navigation animations to enhance the visual effects of your app.

[0255] Through these mechanisms, low-code platforms can effectively manage application variables and routes, ensuring the correctness and consistency of the application's functions and navigation logic.

[0256] Hardware Integration

[0257] Integrating various hardware (such as HID devices, serial ports, Bluetooth, COAP, various mobile phone sensors, NFC, UDP, TCP, and COAP) into a low-code platform requires specific technologies and methods.

[0258] As a specific embodiment, AI generates an APP that can generate an application element list and build an application based on the user's natural language input

[0259] Steps to implement AI dialogue function

[0260] 1. Design the conversation flow

[0261] Functional description:

[0262] User demand collection: Collect user needs through conversations, such as application type, function, style, etc.

[0263] Interactive questions: Ask questions to guide users to clarify their needs.

[0264] method:

[0265] Design the conversation script: Define a series of questions and answer options that cover the main aspects of application development.

[0266] Create a dialogue tree: Build a dialogue tree to allow users to gradually drill down based on their answers and collect detailed demand information.

[0267] Example conversation flow:

[0268] AI: "What type of application do you want to create? For example: social, business, entertainment, etc."

[0269] User: "Social"

[0270] AI: "What style do you want the app to use? For example: modern, simple, classic, etc."

[0271] User: "Modern"

[0272] AI: “What features do you want the app to have? User registration, push notifications, user profiles, etc.”

[0273] User: "User registration, message push"

[0274] AI: "What is the color scheme of the app? For example: blue, green, red, etc."

[0275] User: "blue"

[0276] AI: "What are the page layouts of the application? For example: chat interface, settings interface, etc."

[0277] User: "Chat interface"

[0278] AI: “What data source does the application use? For example: local database, GraphQL, real-time data stream, etc.”

[0279] User: "Local Database"

[0280] 2. Parsing user input

[0281] Functional description:

[0282] Understand user needs: Parse the user's natural language input into application elements.

[0283] Generate element list: Generate the element list and configuration of the application based on the dialogue results.

[0284] method:

[0285] Natural Language Processing: Use our internally developed NLP pre-trained model technology to parse user input and identify application type, style, function, etc.

[0286] Map requirements to elements: Map the parsing results to specific application components and configurations.

[0287] 3. Generate a list of application elements

[0288] Functional description:

[0289] Create a list of elements: Convert the parsed requirements into a detailed list of application elements.

[0290] Define components and configuration: List the required pages, components, and their properties and styles.

[0291] method:

[0292] Elements list: Generate a structured list based on user needs, including pages, components, functions, etc.

[0293] Component configuration: Define the properties and styles for each component.

[0294] 4. Generate application

[0295] Functional description:

[0296] Automatically create applications: Generate application pages and components based on a list of elements.

[0297] Application configuration: Set the basic style and functionality of the application.

[0298] method:

[0299] Use template: Select the appropriate template based on the list of elements and fill in the user's configuration.

[0300] Automatically generate code: Automatically generate application code or interface based on configuration.

[0301] 5. Real-time preview and adjustment

[0302] Functional description:

[0303] Real-time preview: Allows users to view the generated application effects and make adjustments.

[0304] Feedback mechanism: Collect user feedback and make necessary changes.

[0305] method:

[0306] Preview function: Provides real-time preview function, allowing users to view the preliminary effects of the application.

[0307] Adjustment and optimization: Adjust the configuration and functionality of the app based on user feedback.

[0308] 6. AI generates architecture diagrams, such as Figure 4 As shown:

[0309] 1. First, the APP sends the natural language and context we input to AI Services for preprocessing

[0310] 2. The first step of preprocessing is content filtering, which will be filtered according to the AI ​​principles on the market to ensure that the content does not contain content that does not comply with regulations, such as some violent words, vulgar words, etc.

[0311] 3. After filtering the content, the next step is to delete irrelevant content and keep only basic information. For example, the RoBERTa pre-trained model does not care whether our control name is TextSearchBox1 or MyTextBox. It only cares about the data type, so when the irrelevant content is deleted, the amount of data for training the model can be reduced.

[0312] 4. After the preprocessing operation is completed, our internally trained RoBERTa model will be called to obtain the inference output result APP code.

[0313] 5. But at this time we only convert the language. Next we need to convert the natural language query into a formula that we can process.

[0314] These examples are then used to train the model to understand and recognize our grammar.

[0315] 6. After we get the output of the model, we will further filter the content to filter out non-compliant words, and then check the generated code to fix some minor problems that may occur, such as missing brackets.

[0316] 7. Check for grammatical errors again, and then generate a natural language description. This natural language is not copied from the content we input ourselves, but is a language obtained based on natural language and generated formulas.

[0317] 8. Add internal platform preset API interfaces and communication logic according to the code content to reduce user-defined operations.

[0318] 9. Send the generated code to the packaging server and package it.

[0319] As a specific embodiment, the APP hot update is as follows:

[0320] 1. Development and packaging updates: Developers develop new versions of applications, including new features, bug fixes, or performance improvements. After development is completed, they build and package the new version of the application to generate an update package.

[0321] 2. Upload updates:

[0322] Upload update package: Upload the update package to the update server

[0323] Update metadata: such as version number, change log, and other information so that clients can obtain and display this information.

[0324] 3. Check for updates

[0325] Client-side detection: The application checks for new versions on the server at startup.

[0326] Compare versions: The client compares the version number returned by the server with the version number of the local application to determine whether a newer version is available.

[0327] 4. Download updates

[0328] Prompt the user: If a new version is detected, the app can prompt the user to update, or automatically download the update in the background (depending on settings and policies).

[0329] Download update package: Download the update package from the server.

[0330] 5. Install updates

[0331] Installation process: Once the download is complete, the application will begin installing the update. The installation process includes:

[0332] Decompression: Decompress the file to the specified directory.

[0333] Replace file: Replace the old version of a file with the new version of the file.

[0334] 6. Restart the application

[0335] Prompt to restart: After the update installation is complete, prompt the user to restart the application to apply the new version.

[0336] 7. Rollback

[0337] Rollback mechanism: If serious problems occur after an update, the application can be rolled back to the previous stable version.

[0338] Backend architecture design

[0339] As a specific embodiment, the architecture overview

[0340] The underlying Java language is used to manage the creation and dependencies of objects based on the Spring framework. For example, the dependencies of components such as the service layer and DAO layer are injected through configuration files or annotations, reducing the coupling between components.

[0341] Modular design separates different functional modules to ensure the maintainability and scalability of the code.

[0342] Database design follows normalization, data integrity, and data independence. Normalization is to eliminate data redundancy and inconsistency by decomposing data tables to ensure data integrity and reliability. Normalization can avoid duplicate data storage, reduce the occurrence of data anomalies, and make the database structure more reasonable and concise.

[0343] Interface design: define clear and standardized interfaces so that the front-end or other services can easily interact with the back-end. For example, an interface for obtaining user information should clearly define the input user ID format and the output user detailed information data structure.

[0344] Error handling and exception capture, by defining a global exception capture class to handle various possible error situations in the code, and perform appropriate processing and feedback. For example, abnormal situations such as network connection interruption and database operation failure must have corresponding processing measures to ensure the stability of the system.

[0345] Security design, including user authentication, authorization, data encryption, and prevention of SQL injection, to ensure the security of system and user data.

[0346] Log records record key information during system operation to facilitate subsequent troubleshooting and system monitoring, such as user operation logs and system error logs.

[0347] Core modules include:

[0348] Control layer: Spring MVC-based controller, which handles the distribution of requests and the calling of business logic. It is responsible for interacting with the user interface, passing data to the front end, and receiving user input from the front end.

[0349] Business logic layer: This layer handles specific business logic, such as user authentication, data processing, code generation, etc.

[0350] Data access layer: Use MyBatis to interact with the database to complete data addition, deletion, modification and query operations. Define SQL statements through XML configuration files or annotations to interact with the database. For example, define SQL statements to query user information through configuration files and map the query results to Java objects.

[0351] File storage: For file storage, we use FastDFS to distribute storage on multiple servers to ensure high data availability.

[0352] In the process of communicating with the hardware, we need to manually write the communication logic, such as the instructions sent for over-the-air upgrades and the parsing of the sent data. In order to solve this pain point, we developed a flowchart so that users can execute it without writing code.

[0353] Technology Selection

[0354] The front end uses Flutter to implement the flowchart drawing function, and the back end parses the JSON string based on Jackson and generates code through the ThreadLocal thread context.

[0355] 1. Interface design

[0356] Provides a drawing area that supports operations such as zooming in and out, dragging, adding nodes, deleting nodes, and modifying node information.

[0357] Display various node types (such as start, end, operation, condition, parallel, loop, etc.) for users to choose.

[0358] Display the flowchart drawn by the user in real time.

[0359] 2. Interaction Logic

[0360] The user can click the "plus" button on the interface to pop up a node type selection menu. The user selects the required node type and the system automatically adds a new node to the canvas. When the user adds a new node, the system automatically connects the new node to the existing node. The connection rules and logic are based on the type and relative position of the node to ensure the clarity and logic of the flowchart. The nodes are automatically arranged on the canvas. The system adjusts the position of the nodes according to the order and connection relationship of the nodes. Different types of nodes will be reasonably distributed to ensure the readability of the flowchart.

[0361] 3. Data Format

[0362] The flowchart drawn by the user is stored and transmitted in JSON data format.

[0363] 4. Interface design

[0364] Provide an interface to receive the flowchart data from the front end, parse the data and generate a process chain after receiving it, and store the nodes in the chain one by one.

[0365] 5. Data Structure

[0366] The flowchart is divided into two tables, the process table and the node table;

[0367] The flow table only records the name, creation time, update time, and first node ID of the flow chart;

[0368] The node table records all the nodes of the flowchart, including node type, creation time, update time, name, previous node id, and next node id.

[0369] There are 5 types of nodes, as follows

[0370] (1) Action, which can be page jump, API call, pop-up warning, sharing, or custom action;

[0371] (2) Conditional (conditional expression, if else), bool type, the content can be a single condition (equal to, not equal to, less than, greater than, less than or equal to, greater than or equal to) and multiple conditions (single condition and or operation)

[0372] (3) Loop (loop, the end condition is a bool expression, which is actually Conditional). The content that can be added to the loop is the same as the outer layer, but a Loop Break (end loop) is added.

[0373] (4) Parallel (as the name implies, two tasks are asynchronous and can be executed at the same time)

[0374] (5) Terminate (Terminate node). Adding this node will end the current flowchart and the subsequent content will not be executed.

[0375] (6) Stream data node, asynchronous operation, used to monitor data changes and perform operations when data changes

[0376] 6.Logic code generation

[0377] The background processing steps are as follows

[0378] (1) Get all process nodes through the flowchart ID;

[0379] (2) Parse the process nodes into process chains;

[0380] (3) Recursively call the process chain to determine the node type in the process chain. Different node types execute pre-set rule codes;

[0381] (4) Finally, output to the file.

[0382] 7. Security

[0383] Validate and filter user input to prevent malicious data or attacks.

[0384] 8. Custom code execution

[0385] By inserting code through the web, you can correct custom code errors and reference official dependencies and your own custom dependencies to improve development flexibility.

[0386] As a specific embodiment, in order to allow more users to trade assets on our platform, we need to create an order-taking platform so that users can publish and receive demands.

[0387] 1. User Interface Design

[0388] Task list page: displays all available tasks, including task description, requirements, budget, deadline, etc.

[0389] Task details page: displays detailed information of a single task and an order acceptance button.

[0390] Personal center page: displays the user’s personal information, accepted tasks, completed tasks, income, etc.

[0391] 2. Differentiation between the roles of service providers and demanders

[0392] Clearly distinguish the registration and management of service providers (order takers) and demanders (order issuers).

[0393] 3.Order release and management:

[0394] The demander can describe the order requirements in detail, including service content, requirements, budget, delivery time, etc.

[0395] Provide order categories and tags for easy search and filtering.

[0396] 4. Service provider interface:

[0397] Display a list of available orders, filter and recommend service providers based on their skills and preferences.

[0398] Service providers can view order details and decide whether to accept the order.

[0399] 5. Communication and negotiation system:

[0400] Both parties can communicate online within the platform to negotiate order details and requirements.

[0401] 6. Evaluation and reputation system:

[0402] After the service is completed, the demander can evaluate and rate the service provider.

[0403] Establish a reputation system to display the historical evaluation and reputation rating of service providers.

[0404] 7. Payment and Settlement System:

[0405] Support multiple payment methods to ensure transaction security.

[0406] Processing settlement and allocation of order charges.

[0407] 8.Background management system:

[0408] Administrators can review orders, users, and handle disputes and violations.

[0409] Data analysis function to understand the operation status and trends of the platform.

[0410] 9. Search and filter functions:

[0411] Allow users to search for orders or service providers by keywords, categories, price ranges, etc.

[0412] 10. Notifications and Reminders

[0413] Send notifications such as order status updates and message reminders to users.

[0414] 11. Business logic implementation

[0415] Verify the information entered by the user to ensure its legitimacy and security.

[0416] Handles publishing, updating, and deleting of tasks.

[0417] Manage user orders, complete tasks, and settle accounts. Figure 5 shown.

[0418] The above specific implementations are only descriptions of the preferred implementations of the present invention, and do not limit the protection scope of the present invention. Without departing from the design concept and spirit of the present invention, various modifications, substitutions and improvements made by ordinary technicians in this field to the technical solution of the present invention based on the text description and drawings provided by the present invention should all fall within the protection scope of the present invention. The protection scope of the present invention is determined by the claims.

Claims

1. A cross-platform low-code application development system based on the Flutter architecture, characterized by: It includes login and registration module, interface design module, status management module, routing management module, team management module, help document module, AI page design module, development document generation module, hardware integration module, code generation module, multi-user collaborative development module, communication module, online simulator module, application market module, AI application generation module, interface management module, asset management module, developer forum module and application packaging module; The interface design module allows users to create application interfaces using a predefined UI component library through a user interface that supports drag-and-drop operations; The UI component library includes text, button, image, video player, map, chart and input box components; The interface design module includes a property editor that allows users to configure the color, size, position, style, and animation effect properties of components.

2. According to claim 1, the cross-platform low-code application development system based on Flutter architecture is characterized in that: It includes a state management module, which implements global and local state management based on the Provider tool; The state management module includes: State storage unit, configure the variable name, type, default value and variable description through the graphical page. The low-code platform will automatically generate variables and annotation content in the code according to the variable configuration; The state change monitoring unit is used to monitor and respond to state change events and trigger corresponding interface updates; The state persistence unit is used to save key state data to local storage or cloud database to ensure the consistency and persistence of state data when the application is restarted or used across devices.

3. According to claim 1, the cross-platform low-code application development system based on Flutter architecture is characterized in that: Including hardware integration module; The hardware integration module includes: The HID device interface unit is used to configure the operation type of the HID protocol through a graphical interface and dynamically display the corresponding operation on the interface according to the selected operation type; The serial communication interface unit is used to allow the user to configure the operation type of the serial protocol and dynamically display the corresponding operation on the interface according to the selected operation type; The Bluetooth communication unit is used to configure the scanning, connection, disconnection, sending data, receiving data, receiving broadcast data and stopping scanning types through a graphical page, and dynamically display the corresponding operations on the interface according to the selected operation type; WiFi communication unit, used to select UDP, TCP and COAP communication types through a graphical page, and dynamically display the corresponding specific graphical configuration according to the communication type; Sensor communication unit, which configures various sensor parameters of the mobile phone through an intuitive graphical interface and associates them with App variables; NFC communication unit, used to configure NFC reading and writing through a graphical page; The hardware integration module also includes a downloadable source code generation unit and an error handling unit, the code generation unit is used to automatically generate downloadable source code according to the hardware parameters configured by the user, so as to realize communication with the hardware module without the user intervening in the realization of the underlying logic; The error handling unit is used to capture and handle errors that may occur during the communication process.

4. According to claim 1, the cross-platform low-code application development system based on Flutter architecture is characterized in that: It includes a code generation module, which automatically generates downloadable source code through a template engine and a custom code generation context, and finally outputs the generated source code file to a specified storage location.

5. According to claim 1, the cross-platform low-code application development system based on Flutter architecture is characterized in that: Users configure routing configurations according to the graphical interface. The low-code platform can automatically generate static routing, dynamic routing, routing interception units, and navigation animation routing management codes based on user configurations, reducing user development time and maintenance costs.

6. According to claim 1, the cross-platform low-code application development system based on Flutter architecture is characterized in that: It includes an AI generation module, which is based on the RoBERT pre-trained language model of the Transformer architecture and can automatically generate a list of application elements based on the natural language instructions input by the user.

7. According to claim 1, the cross-platform low-code application development system based on Flutter architecture is characterized in that: It includes an online simulator module, which is used to preview application effects of various screen sizes in real time during application development, and to capture and display error logs and performance data of applications running in the simulator in real time.

8. According to claim 1, the cross-platform low-code application development system based on Flutter architecture is characterized in that: It includes an application packaging module, which supports cross-platform packaging. The target platforms include Android, iOS, HarmonyOS, macOS, Windows, and Linux. Through virtualized container technology, users can perform packaging operations on the web without installing a specific platform environment. It supports simultaneous packaging by multiple users and adopts clustering technology. When users perform packaging operations, they select available packaging services for packaging through the internal service scheduling algorithm. It supports priority packaging and adopts the max-heap data structure to enable users with high priority to complete packaging first.

9. The cross-platform low-code application development system based on Flutter architecture according to claim 1 is characterized in that: It includes a development document generation module, which is used by users to create pages and select page types, and fill in the functional description of the page; the system automatically generates dynamic development documents by analyzing page types, functions, API usage, and user comments. The documents will be generated based on the detailed information entered by the user to ensure that the document content is accurate and complete, and can be automatically updated to improve development efficiency.

10. According to claim 1, the cross-platform low-code application development system based on Flutter architecture is characterized in that: It includes adding a login and registration module. When the login and registration page is rendered, the JS, CSS and HTML files required for the low-code platform are asynchronously loaded, and the modules of the low-code platform are pre-loaded through lazy loading and caching mechanisms. After the user logs in, the pre-loaded or cached resources are used to achieve fast loading of the low-code platform modules, providing an instant opening experience.

Images