Visual programming method and device, storage medium and electronic equipment

By distinguishing the states of simple and complex programming components in a visual programming environment and utilizing building blocks and configuration options, the problem of low efficiency in visual programming is solved, enabling efficient and flexible programming for handling complex data.

CN121597183APending Publication Date: 2026-03-03TENCENT TECHNOLOGY (SHENZHEN) CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202411140676.0
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-08-19
Publication Date
2026-03-03

AI Technical Summary

Technical Problem

Existing visual programming methods are inefficient when dealing with complex data types and cannot effectively utilize the flexibility and efficiency of visual components.

Method used

A visual programming method and apparatus are provided, which displays simple and complex programming components in a ready state in a programming component area, displays corresponding components in a working state in a programming work area in response to selection operations, processes simple data using simple programming components and introduces complex programming components to manage complex data relationships, including defining behavioral patterns using building blocks and configuration options.

Benefits of technology

It improves the efficiency of visual programming, simplifies complex data processing, enhances programming flexibility and scalability, and enables non-professional programmers to easily handle complex data types.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN121597183A_ABST
    Figure CN121597183A_ABST
Patent Text Reader

Abstract

The invention discloses a visual programming method and device, a storage medium and electronic equipment. The method comprises the following steps: displaying at least one programming component in a preparation state in a programming component area; in response to a first selection operation executed on a first programming component in the at least one programming component, displaying the first programming component in a working state in the programming working area; and in response to a second selection operation executed on a second programming component in the at least one programming component, displaying the second programming component in the working state in the programming working area. The technical problem that visual programming efficiency is low is solved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of computers, and more specifically, to a visual programming method, apparatus, storage medium, and electronic device. Background Technology

[0002] Visual programming typically provides pre-defined visualization components that allow developers to quickly process and display simple data types through drag-and-drop and configuration. This approach significantly improves development efficiency and lowers the programming barrier, making it particularly useful for non-professional programmers or those requiring rapid prototyping.

[0003] However, visual programming components become less flexible and efficient when dealing with complex data types. Complex data may involve more data structures, algorithmic logic, and data processing steps, which may be beyond the scope of what visual components can directly support. In such cases, developers usually need to manually write code to process this data, which reduces the efficiency of visual programming. Therefore, visual programming suffers from relatively low efficiency.

[0004] There is currently no effective solution to the above problems. Summary of the Invention

[0005] This application provides a visual programming method, apparatus, storage medium, and electronic device to at least solve the technical problem of low efficiency in visual programming.

[0006] According to one aspect of the embodiments of this application, a visual programming method is provided, comprising: displaying at least one programming component in a ready state in a programming component area, wherein the programming component is a simple programming component or a complex programming component, the simple programming component is used to program data of any one structure type, and the complex programming component is used to program data of at least two structure types and the relationship between the at least two structure types;

[0007] In response to a first selection operation performed on the first programming component of the at least one programming component, the first programming component in a working state is displayed in the programming work area, wherein the first programming component belongs to the simple programming component.

[0008] In response to a second selection operation performed on the second programming component of the at least one programming component, the second programming component in a working state is displayed in the programming work area, wherein the second programming component belongs to the complex programming component.

[0009] According to another aspect of the embodiments of this application, a visual programming device is also provided, including: a first display unit, configured to display at least one programming component in a ready state in a programming component area, wherein the programming component is a simple programming component or a complex programming component, the simple programming component is used to program data of any one structure type, and the complex programming component is used to program data of at least two structure types and the relationship between the at least two structure types;

[0010] The second display unit is configured to display the first programming component in a working state in a programming work area in response to a first selection operation performed on the first programming component of the at least one programming component, wherein the first programming component belongs to the simple programming component.

[0011] The third display unit is configured to display the second programming component in a working state in the programming work area in response to a second selection operation performed on the second programming component of the at least one programming component, wherein the second programming component belongs to the complex programming component.

[0012] As an optional solution, the third display unit includes: a first display module for displaying a block having at least two input options and at least one configuration option in the programming work area, wherein the second programming component in the working state includes the block, the input options are used to input data of any of the above-mentioned structure types into the block, and the configuration options are used to configure the behavior mode of the block.

[0013] As an optional solution, the first display module includes: a first display submodule, used to display a block with at least two input options associated with a first virtual object and a storage configuration option in the programming work area, wherein the at least two input options associated with the first virtual object include at least one object attribute option and an object ownership option, the object attribute option is used to input attribute data corresponding to the object attribute of the first virtual object, the object ownership option is used to input identification data corresponding to the first owner user of the first virtual object, and the storage configuration option is used to configure the behavior mode of the block to be a storage mode.

[0014] As an optional solution, the first display module includes: a second display submodule, used to display a block with at least two input options associated with a target virtual object and a read configuration option in the programming work area, wherein the at least two input options associated with the target virtual object include an object identifier option and an ownership identifier option, the object identifier option is used to input the identifier data corresponding to the virtual object to which the target virtual object is set, the ownership identifier option is used to input the identifier data corresponding to the owner user of the virtual object to which the target virtual object is set, and the read configuration option is used to configure the behavior mode of the block to be a read mode.

[0015] As an optional solution, the third display unit includes: a second display module for displaying a block with a set of input options associated with a second home user and at least one configuration option in the programming work area, wherein the second programming component in the working state includes the block, the set of input options associated with the second home user is used to set all virtual objects of the second home user to virtual objects in any virtual object set, the virtual object set includes at least two virtual objects, and the configuration option is used to configure the behavior mode of the block.

[0016] As an optional embodiment, the above-mentioned device further includes: a third display module, used to display, before displaying a block having a set of input options associated with a second home user and at least one configuration option in the programming work area, a block having at least two sub-blocks, wherein the sub-blocks are used to configure a second virtual object added to the target virtual object set; the second display module includes: a third display sub-module, used to display, in the programming work area, a block having the set of input options associated with the second home user and a block storing configuration options, wherein the set of input options associated with the second home user is used to set all virtual objects of the second home user as the second virtual object added to the target virtual object set, and the storage configuration options are used to configure the behavior mode of the block as a storage mode; or, a fourth display sub-module, used to display, in the programming work area, a block having the set of input options associated with the second home user and a block reading configuration options, wherein the reading configuration options are used to configure the behavior mode of the block as a reading mode.

[0017] As an optional solution, the above-mentioned apparatus further includes: a first acquisition unit, configured to acquire data to be stored obtained by the second programming component in operation after displaying the second programming component in operation in the programming work area, in response to a storage operation performed on the second programming component in operation; a serialization unit, configured to serialize the data to be stored to obtain a string to be stored after displaying the second programming component in operation in the programming work area; and a storage unit, configured to send the string to be stored to a database for storage after displaying the second programming component in operation in the programming work area.

[0018] As an optional solution, the above-mentioned device further includes: a second acquisition unit, configured to acquire data to be read obtained by the second programming component in operation after displaying the second programming component in operation in the programming work area, in response to a read operation performed on the second programming component in operation; and a reading unit, configured to receive read data corresponding to the data to be read after displaying the second programming component in operation in the programming work area, wherein the read data is data obtained by deserializing a string retrieved from the database that matches the data to be read.

[0019] As an optional embodiment, the above-mentioned apparatus further includes: an integration unit, configured to, after displaying a first programming component in a working state in the programming work area, integrate the first programming component in a working state into a single complex programming component in a working state in response to an integration operation performed on the first programming component in a working state; the above-mentioned apparatus further includes: a splitting unit, configured to, in response to a splitting operation performed on any complex programming component among the second programming components in a working state, split any complex programming component into multiple simple programming components in a working state.

[0020] According to another aspect of the embodiments of this application, a computer program product or computer program is provided, which includes computer instructions stored in a computer-readable storage medium. A processor of an electronic device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the electronic device to perform the visual programming method described above.

[0021] According to another aspect of the embodiments of this application, an electronic device is also provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the above-described visual programming method through the computer program.

[0022] In this embodiment, at least one programming component in a ready state is displayed in the programming component area. This programming component is either a simple programming component or a complex programming component. The simple programming component is used to program data of any one structure type, while the complex programming component is used to program data of at least two structure types and the relationship between these at least two structure types. In response to a first selection operation performed on a first programming component among the at least one programming component, a first programming component in a working state is displayed in the programming work area. This first programming component is a simple programming component. In response to a second selection operation performed on a second programming component among the at least one programming component, a second programming component in a working state is displayed in the programming work area. This second programming component is a complex programming component.

[0023] This embodiment uses the programming component area and the programming work area to intuitively distinguish the state of the programming component (such as the ready state or the working state), enabling developers to handle programming components in different states more accurately. It also simplifies the complex steps of distinguishing programming components in different states and improves the efficiency of visual programming.

[0024] Furthermore, this embodiment introduces a first programming component, providing developers with an intuitive and easy-to-use tool to process simple types of data. These simple programming components, through preset functions and configuration options, enable developers to quickly complete some basic data operations.

[0025] However, relying solely on simple programming components is insufficient to solve the problem of handling complex data types. Therefore, this embodiment also introduces a second, operational programming component. These complex programming components are designed to handle data of at least two structural types and manage the relationships between these data. This not only retains the advantages of visual programming in handling simple data types but also expands its capabilities in handling complex data types by introducing complex programming components, thereby improving the efficiency of visual programming and solving the problem of low efficiency in visual programming. Attached Figure Description

[0026] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0027] Figure 1 This is a schematic diagram of an application environment for an optional visual programming method according to an embodiment of this application;

[0028] Figure 2This is a schematic diagram of the flow of an optional visual programming method according to an embodiment of this application;

[0029] Figure 3 This is a schematic diagram of an optional visual programming method according to an embodiment of this application;

[0030] Figure 4 This is a schematic diagram of another optional visual programming method according to an embodiment of this application;

[0031] Figure 5 This is a schematic diagram of another optional visual programming method according to an embodiment of this application;

[0032] Figure 6 This is a schematic diagram of another optional visual programming method according to an embodiment of this application;

[0033] Figure 7 This is a schematic diagram of another optional visual programming method according to an embodiment of this application;

[0034] Figure 8 This is a schematic diagram of another optional visual programming method according to an embodiment of this application;

[0035] Figure 9 This is a schematic diagram of another optional visual programming method according to an embodiment of this application;

[0036] Figure 10 This is a schematic diagram of another optional visual programming method according to an embodiment of this application;

[0037] Figure 11 This is a schematic diagram of another optional visual programming method according to an embodiment of this application;

[0038] Figure 12 This is a schematic diagram of another optional visual programming method according to an embodiment of this application;

[0039] Figure 13 This is a schematic diagram of another optional visual programming method according to an embodiment of this application;

[0040] Figure 14 This is a schematic diagram of an optional visual programming device according to an embodiment of this application;

[0041] Figure 15 This is a schematic diagram of the structure of an optional electronic device according to an embodiment of this application. Detailed Implementation

[0042] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0043] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0044] According to one aspect of the embodiments of this application, a visual programming method is provided. Optionally, as an optional implementation, the above-described visual programming method can be applied to, but is not limited to, applications such as... Figure 1 The environment shown may include, but is not limited to, user equipment 102 and server 112. User equipment 102 may include, but is not limited to, a display 104, a processor 106 and a memory 108. Server 112 includes a database 114 and a processing engine 116.

[0045] The specific process can be summarized in the following steps:

[0046] In step S102, the user equipment 102 displays a first programming component in a working state and a second programming component in a working state in the programming work area via the display 104, and further obtains programming instructions triggered by the simple programming component / complex programming component.

[0047] Step S104: Send the programming instructions to the server 112 via network 110;

[0048] In step S106, the server 112 processes the programming instructions through the processing engine 116 and further obtains the programming results corresponding to the programming instructions;

[0049] In step S108, the programming result is sent to the user equipment 102 via the network 110. The user equipment 102 displays the programming result on the display 104 via the processor 106 and stores the programming result in the memory 108.

[0050] remove Figure 1 Beyond the examples shown, the terminal devices described above can be terminal devices configured with a target client, including but not limited to at least one of the following: mobile phones (such as Android phones, iOS phones, etc.), laptops, tablets, PDAs, MIDs (Mobile Internet Devices), PADs, desktop computers, smart TVs, etc. The target client can be a video client, instant messaging client, browser client, educational client, etc. The networks described above can include, but are not limited to, wired networks and wireless networks. The wired networks include local area networks (LANs), metropolitan area networks (MANs), and wide area networks (WANs). The wireless networks include Bluetooth, Wi-Fi, and other networks that enable wireless communication. The server described above can be a single server, a server cluster consisting of multiple servers, or a cloud server. The above is merely an example, and no limitations are imposed in this embodiment.

[0051] Alternatively, as an optional implementation, such as Figure 2 As shown, the visual programming method can be executed by an electronic device, such as... Figure 1 The user equipment or server shown includes the following specific steps:

[0052] S202, Display at least one programming component in a ready state in the programming component area, wherein the programming component is a simple programming component or a complex programming component, the simple programming component is used to program data of any one structure type, and the complex programming component is used to program data of at least two structure types and the relationship between at least two structure types;

[0053] S204, in response to a first selection operation performed on a first programming component of at least one programming component, the first programming component in a working state is displayed in the programming work area, wherein the first programming component is a simple programming component;

[0054] S206, in response to a second selection operation performed on a second programming component among at least one programming component, the second programming component in a working state is displayed in the programming work area, wherein the second programming component is a complex programming component.

[0055] Optionally, in this embodiment, the above-mentioned visual programming method can be applied to multiple scenarios, such as web development scenarios. Developers can use this visual programming method to quickly build and configure web page elements. Specifically, a text component (simple programming component) can be displayed for programming and displaying titles or paragraph text on the web page.

[0056] Displays an image component (simple programming component) that allows developers to quickly add and adjust images through drag-and-drop and configuration;

[0057] Display a carousel component (a complex programming component) that can handle various image structure types (such as JPEG, PNG, etc.) and the switching relationships between them, thus easily creating an image carousel effect;

[0058] Display a form component (a complex programming component) that can handle multiple input field types (such as text, checkboxes, date pickers, etc.) and their validation relationships to ensure that the form data submitted by the user meets the requirements.

[0059] In virtual game development scenarios, this visual programming method can greatly simplify the process of building game logic and interface. Specifically, it can display a character movement component (simple programming component), allowing game developers to define the basic movement mode and speed of game characters through simple configuration.

[0060] Display an attack button component (a simple programming component). When the player clicks the button, it triggers the character's attack action.

[0061] Display an enemy AI component (complex programming component) that can handle multiple enemy types (such as melee, ranged, etc.) and dynamically adjust the enemy's action strategy based on the player's behavior, such as chasing, fleeing, or using special skills;

[0062] Display a task system component (complex programming component) that manages multiple tasks in the game, handles the dependencies and triggering conditions between tasks, and ensures that players receive corresponding rewards and feedback when they complete tasks.

[0063] Optionally, in this embodiment, a simple programming component may refer to a pre-set programming tool provided in a visual programming environment. It typically has an intuitive and easy-to-use interface, allowing users to quickly process data of specific structure types through simple operations such as drag-and-drop and configuration. These components usually encapsulate some common data processing functions, enabling users to complete specific programming tasks without writing complex code.

[0064] For example, in a visual programming environment for web development, a simple programming component could be a "text display component." This component allows users to quickly add a text element to a webpage through simple drag-and-drop and configuration, and set its displayed text content, font, color, and other attributes. This component is used for programming text data.

[0065] Besides text display components, simple programming components can also include image display components, button components, and so on. These components all provide the ability to quickly programmatically handle data with specific structure types. For example, an image display component allows users to quickly upload and display an image, while a button component allows users to add a clickable button and configure its click event.

[0066] By displaying the first programming component in operation within the programming workspace, users can more intuitively understand and manipulate data. This approach not only improves programming efficiency but also lowers the barrier to entry, enabling non-professional programmers or users requiring rapid prototyping to easily engage in programming. Furthermore, since these components pre-configure common data processing functions, users can avoid repeatedly writing the same code, thus saving significant time and effort.

[0067] Optionally, in this embodiment, in a visual programming environment, a complex programming component can refer to an advanced programming tool capable of processing and coordinating at least two different data structures, while managing the relationships between these data. Such components typically offer greater flexibility and configurability, allowing users to define data processing and interaction behaviors through more complex logic.

[0068] For example, in a visual programming environment for data analysis and visualization, a complex programming component could be a "data correlation analysis component." This component not only allows users to import and display various types of data (such as sales data and behavioral data), but also analyzes and visualizes the relationships between these data. For instance, it can reveal the correlation between sales revenue and behavior.

[0069] Complex programming components are particularly useful when dealing with multimedia content, interactive applications, or complex data analysis. For example, when developing an interactive map application, a complex programming component might allow users to integrate multiple data types such as geographic location data, user reviews, and traffic information, and display the dynamic relationships between them, such as updating route suggestions on the map in real time based on traffic congestion.

[0070] By introducing complex programming components into the programming workspace, users can handle more complex and multidimensional data relationships. The presence of these components significantly enhances the flexibility and expressiveness of the programming environment, enabling developers to build more feature-rich and interactive applications. Simultaneously, it promotes interoperability between data, helping to uncover deeper relationships and patterns hidden behind the data.

[0071] Optionally, in this embodiment, the programming component area can be understood as a specific interface or space used to display different types of programming components. In this area, users can browse and select the programming components they need for subsequent work. In other words, the programming component area can be understood as a "repository" or "display area" of components.

[0072] Optionally, in this embodiment, the "ready state" can be understood as the state of the programming components in the programming component area, indicating that these components are available and waiting to be selected by the user for actual programming work. In this state, the components have not yet been activated or initialized, but are ready to be invoked by the user.

[0073] Optionally, in this embodiment, the programming work area can be understood as the interface or space where the user performs actual programming operations. Components selected by the user from the programming component area will be activated here and used for specific programming tasks. This can be understood as the user's "workbench" for programming.

[0074] Optionally, in this embodiment, "working state" can be understood as the state in which a programming component is activated in the programming work area and is available for actual programming. Unlike "ready state," a component in "working state" has been selected by the user and is ready for specific programming operations.

[0075] To further illustrate, consider a visual programming environment where the programming component area displays multiple components, including a simple "number addition" component (simple programming component) and a complex "database query" component (complex programming component). The user first selects the "number addition" component and drags it into the programming workspace. This component then becomes active, and the user can configure its parameters, such as the addend and augend. Subsequently, the user selects the "database query" component, drags it into the workspace, and configures the complex relationships such as the query table, fields, and conditions.

[0076] It should be noted that this embodiment describes two key functions of a visual programming environment. First, by clearly displaying different types of programming components in the programming component area, users can quickly find and select the required components, improving programming efficiency and accuracy. Second, after dragging and dropping the selected components into the programming work area, users can intuitively see the working status of the components and quickly build complex program logic through simple drag-and-drop, connection, and configuration operations, without writing tedious code. Moreover, the complex programming components can not only handle at least two different data structure types, but also manage the relationships between these data types.

[0077] Optional, for example Figure 3 As shown, at least one programming component in a ready state is displayed in the programming component area 302, such as component A, component B, and component (A+B), where component A and component B are simple programming components, and component (A+B) is a complex programming component.

[0078] Further examples Figure 3 As shown in (a), in response to the first selection operation performed on component A, the first programming component 306 in the working state is displayed in the programming work area 304;

[0079] For example Figure 3 As shown in (b), in response to a second selection operation performed on component (A+B), a second programming component 308 in a working state is displayed in programming work area 304.

[0080] The embodiments provided in this application allow for the intuitive differentiation of the state (such as ready state or working state) of programming components by utilizing programming component area and programming work area. This enables developers to handle programming components in different states more accurately, simplifies the complex steps of differentiating programming components in different states, and improves the efficiency of visual programming.

[0081] Furthermore, this embodiment introduces a first programming component, providing developers with an intuitive and easy-to-use tool to process simple types of data. These simple programming components, through preset functions and configuration options, enable developers to quickly complete some basic data operations.

[0082] However, relying solely on simple programming components is insufficient to solve the problem of handling complex data types. Therefore, this embodiment also introduces a second programming component in operation. These complex programming components are designed to handle data of at least two structural types and manage the relationships between these data. This not only retains the advantages of visual programming in handling simple data types but also expands its capabilities in handling complex data types by introducing complex programming components, thereby improving the efficiency of visual programming.

[0083] As an optional solution, a second programming component in active status can be displayed in the programming workspace, including:

[0084] The programming work area displays blocks with at least two input options and at least one configuration option, wherein the second programming component in working state includes blocks, the input options are used to input data of any structure type into the blocks, and the configuration options are used to configure the behavior mode of the blocks.

[0085] Optionally, in this embodiment, the building block can be a complex programming component with multiple input interfaces and configuration options in a visual programming environment, used to process and coordinate data of various structural types and their relationships, and its behavior can be defined through configuration.

[0086] In a building block, input options refer to the interface that allows users to input data of a specific structure type into the block. This data can be numbers, strings, boolean values, etc., and serves as the basis for the internal logic processing of the building block.

[0087] Configuration options refer to user-configurable parameters or switches that control the specific behavior or operational methods of the building blocks. By adjusting these options, users can customize the functionality of the building blocks to meet specific programming needs.

[0088] It should be noted that the description in this embodiment further refines the specific implementation of the "complex programming component" in the programming workspace, namely, it is presented through a "building block" with at least two input options and at least one configuration option. This building block allows users to input different types of data and define the behavior pattern of this building block (i.e., the complex programming component) through configuration options.

[0089] The diversity of input options allows the blocks to handle various data types, increasing programming flexibility. Simultaneously, the availability of configuration options allows users to adjust the behavior of the blocks to suit different application scenarios without altering their basic structure. This design not only improves code reusability but also reduces programming complexity, enabling even non-professional programmers to complete complex programming tasks through an intuitive interface.

[0090] To further illustrate, consider a visual programming environment for game development where a block controls a character's movement. This block has two input options: one for the character's speed and the other for the direction. Additionally, it has a configuration option that allows the user to choose whether the character moves continuously or in steps. In this example, the input options receive data of two structured types: speed and direction, while the configuration option determines the character's specific movement mode.

[0091] By introducing building blocks with multiple input and configuration options as complex programming components into the programming workspace, users can more easily build and process data of various structural types and their relationships. This design not only simplifies the difficulty of complex programming tasks but also improves programming flexibility and scalability. Users can select different building blocks to combine and configure as needed, thereby quickly building program logic that meets their requirements.

[0092] As an optional approach, the programming workspace displays blocks with at least two input options and at least one configuration option, including:

[0093] Display blocks with at least two input options associated with a first virtual object and storage configuration options in the programming work area. The at least two input options associated with the first virtual object include at least one object attribute option and an object ownership option. The object attribute option is used to input attribute data corresponding to the object attribute of the first virtual object. The object ownership option is used to input identification data corresponding to the first owner user of the first virtual object. The storage configuration option is used to configure the behavior mode of the block to be a storage mode.

[0094] Optionally, in this embodiment, the first virtual object can be understood as a virtual entity represented in a programming environment, which may be a character, item or other programmable entity in a game.

[0095] Optionally, in this embodiment, the object attribute option can be understood as an input option in the building blocks, used to receive and set various attribute data of the first virtual object, such as color, size, position, etc.

[0096] Optionally, in this embodiment, the object ownership option can be understood as another input option in the building blocks, used to input the identification data of the user to which the first virtual object belongs, such as username, ID, etc., to determine the ownership of the object.

[0097] Optionally, in this embodiment, the storage configuration option can be understood as a specific configuration option in the building blocks. When set to storage mode, the building blocks will perform storage-related behaviors, such as saving the attributes and ownership information of virtual objects.

[0098] It should be noted that the description in this embodiment further clarifies the specific implementation of a "block with at least two input options and at least one configuration option" in a specific scenario (involving virtual objects and owner users). Here, the block not only has input and configuration functions, but is also specifically associated with a "first virtual object." This virtual object has two key input options: an object attribute option and an object ownership option, used to input the virtual object's attributes and the owner user's information, respectively. In addition, the block also has a storage configuration option, used to set the block's behavior mode to storage mode.

[0099] This modular design is suitable for scenarios requiring complex data relationships and persistent storage. By encapsulating the attributes and ownership information of virtual objects within a single module, and allowing developers to manage this data through simple configuration, development efficiency and data management convenience are greatly improved. Furthermore, this module can be combined with other modules to construct more complex and richer game logic or application functionalities.

[0100] To further illustrate, an alternative example is a multiplayer online game development platform where developers use a block with the aforementioned functions to manage in-game characters. Through this block, developers can input various character attributes (such as strength and intelligence) via the "Object Attribute Options" and specify which player the character belongs to via the "Object Ownership Options." Finally, the "Store Configuration Options" save this information to the server so that players can restore their character's state upon their next login.

[0101] By introducing building blocks with input and storage configuration options associated with the first virtual object into the programming workspace, developers can manage the attributes and ownership information of virtual objects in an intuitive and efficient manner. This design not only simplifies the complexity of data management but also improves data maintainability and scalability.

[0102] As an optional approach, the programming workspace displays blocks with at least two input options and at least one configuration option, including:

[0103] Displays a block in the programming workspace that has at least two input options associated with the target virtual object and a read configuration option. The at least two input options associated with the target virtual object include an object identifier option and an owner identifier option. The object identifier option is used to input the identifier data corresponding to the virtual object to which the target virtual object is set. The owner identifier option is used to input the identifier data corresponding to the owner user of the virtual object to which the target virtual object is set. The read configuration option is used to configure the behavior mode of the block to be read mode.

[0104] Optionally, in this embodiment, the target virtual object can be understood as a virtual entity specifically referred to in the programming environment, which may be a character, item, etc. in a game, and has unique identification data.

[0105] Optionally, in this embodiment, the object identification option can be understood as an input interface of the building block, used to receive and set the unique identification data of the target virtual object, such as ID, number, etc.

[0106] Optionally, in this embodiment, the ownership identifier option can be understood as another input interface of the building block, used to input the identifier data of the user to which the target virtual object belongs, such as user ID, username, etc., to determine the ownership relationship of the virtual object.

[0107] Optionally, in this embodiment, the read configuration option can be understood as a configuration option of the building block. When set to read mode, the building block will perform a read operation to obtain the virtual object and ownership information that matches the input identification data from the data source.

[0108] It should be noted that the description in this embodiment refers to a specific type of block displayed in the programming workspace. This block is associated with a "target virtual object" and has at least two input options and one configuration option. The input options include an "object identifier option" and a "owner identifier option," used to input the identifier data of the target virtual object and the identifier data of the owner user, respectively. The configuration option is a "read configuration option," used to set the block's behavior mode to read mode.

[0109] This block-based design allows users to easily query and manipulate information related to specific virtual objects. By entering the virtual object's identifier and the identifier of the user to which it belongs, users can precisely locate a specific virtual object and control the block's behavior by accessing configuration options. This design not only improves the flexibility of data retrieval but also simplifies the interaction process between users and virtual objects.

[0110] To further illustrate, consider an optional scenario in a virtual pet raising game where players can programmatically query and control their virtual pets. The game provides a block where players can input their pet ID via the "Object Identifier" option and their user ID via the "Ownership Identifier" option, and then set the "Read Configuration" option to read mode. When this block is executed, it reads information about virtual pets matching the given pet ID and user ID from the game's database.

[0111] By introducing blocks with input options and read configuration options associated with target virtual objects into the programming workspace, users can query and manipulate specific virtual objects in an intuitive and convenient way. This design not only enhances the user experience but also strengthens the interactivity and dynamism of the program. Users can easily read and display information about virtual objects by configuring the blocks, thereby meeting various personalized needs and application scenarios.

[0112] As an optional solution, a second programming component in active status can be displayed in the programming workspace, including:

[0113] The programming workspace displays a block with a set of input options associated with a second home user and at least one configuration option, wherein the second programming component in working state includes the block, the set of input options associated with the second home user is used to set all virtual objects of the second home user to virtual objects in any set of virtual objects, the set of virtual objects contains at least two virtual objects, and the configuration option is used to configure the behavior mode of the block.

[0114] Optionally, in this embodiment, the second owner user can refer to a user defined in the programming environment who owns a certain number of virtual objects.

[0115] Optionally, in this embodiment, the set input option associated with the second home user may refer to a specific input interface that allows the user to select or specify a set of virtual objects, which will contain all the virtual objects owned by the second home user.

[0116] Optionally, in this embodiment, the virtual object set can be a set containing at least two virtual objects, which can be programmable entities such as characters and items in the game.

[0117] Optionally, in this embodiment, the configuration options can be user-configurable options used to define the specific behavior or operation mode of the building blocks.

[0118] It should be noted that the description in this embodiment mentions a specific type of block, displayed in the programming workspace, and this block is associated with a "second home user." This block has a special input option—"Second Home User Associated Set Input Option"—and at least one configuration option. This input option allows the user to set all virtual objects of the second home user as members of a set of virtual objects, where the set contains at least two virtual objects. The configuration option is used to set the specific behavior mode of the block.

[0119] This block design provides users with powerful virtual object management capabilities. It allows users to easily organize and manipulate their own collections of virtual objects, making batch operations and the implementation of specific game logic simple and intuitive. Furthermore, the availability of configuration options makes this block highly flexible, allowing for customized behavior settings to meet different needs.

[0120] To further illustrate, an alternative example is an online game programming platform where players can use these blocks to manage their game characters (virtual objects). For instance, player A (a secondary owner) might have multiple game characters, which they can add to a collection of virtual objects called "My Team" using these blocks. Then, through configuration options, player A can set the behavior patterns of the blocks, such as "when a button is clicked, make all characters in my team perform a certain action."

[0121] The embodiments provided in this application introduce building blocks with a set of input and configuration options associated with a second-user affiliation into the programming workspace, significantly improving the efficiency and ease of user management of virtual objects. Users can quickly complete complex virtual object set operations through simple drag-and-drop and configuration, thereby accelerating the development process of games or applications and enhancing the user experience. This building block design not only simplifies the complexity of programming but also allows users to focus more on the implementation of ideas and logic.

[0122] As an alternative, before displaying a block with a set of input options associated with a second home user and at least one configuration option in the programming work area, the method further includes: displaying a block with at least two sub-blocks in the programming work area, wherein the sub-blocks are used to configure a second virtual object added to the target virtual object set;

[0123] Displays a set of input options with a second home user association and at least one configuration option in the programming workspace, including:

[0124] S1-1, Displays a block with a set input option associated with the second home user and a storage configuration option in the programming workspace. The set input option associated with the second home user is used to set all virtual objects of the second home user as the second virtual object added to the target virtual object set. The storage configuration option is used to configure the block's behavior mode as a storage mode; or...

[0125] S1-2, Displays a set of input options with a second home user association and a block with read configuration options in the programming work area, wherein the read configuration options are used to configure the behavior mode of the block as read mode.

[0126] Alternatively, in this embodiment, in the programming environment, a sub-block is a smaller, configurable programming unit for performing a specific task or configuration.

[0127] Optionally, in this embodiment, the second virtual object may refer to a virtual entity defined in the programming environment that will be added to the target virtual object set.

[0128] Optionally, in this embodiment, the target virtual object set may refer to a collection used to store the added second virtual objects.

[0129] Optionally, in this embodiment, the storage configuration option may refer to a setting item that, when selected, will cause the block to perform a storage operation to save the relevant information.

[0130] Optionally, in this embodiment, the read configuration option may refer to a setting item that, when selected, causes the block to perform a read operation to retrieve relevant information from storage.

[0131] It should be noted that the description in this embodiment involves a series of operations and component displays in the programming workspace. First, the interface displays at least two sub-blocks, which are used to configure a second virtual object to be added to a target virtual object set. Subsequently, a block with a set input option associated with a second home user and at least one configuration option is displayed. This block has two possible configuration options: a store configuration option and a read configuration option, used to set the block's behavior mode to store mode or read mode, respectively.

[0132] This step-by-step programming approach provides users with finer-grained control, enabling them to precisely configure and manage virtual objects. By combining sub-blocks and complex blocks, users can create complex and highly customized game logic or application functionality.

[0133] To further illustrate, an alternative example is a custom game programming environment where players wish to manage their game characters, which are essentially virtual objects. The game provides a User-Generated Content (UCG) module, allowing players to deeply edit and customize various elements within the game using visual programming tools. Within this environment, players can utilize provided programming components to create and modify game content in an intuitive way that avoids writing complex code.

[0134] First, players can use sub-blocks to configure a new game character. This process includes setting the character's basic attributes, such as strength, intelligence, and agility, as well as defining the character's visual appearance, such as hairstyle, clothing color, and equipment style. These sub-blocks are essentially a series of simple programming components, each focused on handling a single type of data task, allowing players to adjust various aspects of their character.

[0135] After completing character configuration, players can use a block with a set input option that links to a second-owned user. This block is a complex programming component capable of handling various data types and their relationships. Through this block, players can add newly configured characters to their personal character set, which can be viewed as "My Character Set" within the game. The block's set input option ensures that only the player's own virtual objects can be added to the set, maintaining data integrity and security.

[0136] After adding a new character to "My Character Set," players have two options: save or load character data. If they choose to save, the player will use the save configuration option, which permanently saves the new character and all their configuration information to the game's database. This process ensures that even if the player exits the game, their character data and configuration will still be securely saved.

[0137] On the other hand, if players want to review or reuse a previously saved character, they can choose the "Load Configuration" option. This option triggers the game to retrieve the corresponding character data from the database and load it into the current game session. This mechanism allows players to seamlessly switch characters between different game sessions, enhancing the game's flexibility and replayability.

[0138] By introducing sub-blocks and blocks with set input options associated with a second-owner user within the programming workspace, users can configure and manage virtual objects in a structured and intuitive way. This design not only improves programming flexibility and efficiency but also allows users to easily implement complex logic and operations. Saving, loading, and manipulating sets of virtual objects becomes simple and straightforward, significantly enhancing both user experience and programming efficiency.

[0139] As an alternative approach, after displaying the second programming component in a working state in the programming workspace, the method also includes:

[0140] S2-1, in response to a storage operation performed on a second programming component in the working state, obtain the data to be stored obtained through the second programming component in the working state;

[0141] S2-2, Serialize the data to be stored to obtain the string to be stored;

[0142] S2-2, Send the string to be stored to the database for storage.

[0143] Optionally, in this embodiment, the data to be stored can be obtained through complex programming components and is the data that needs to be stored.

[0144] Optionally, in this embodiment, serialization processing can be a process of converting data into a storable or transmissible format, typically a process of converting data structures or object states into strings.

[0145] Optionally, in this embodiment, the string to be stored can be serialized data that is ready to be stored in the database.

[0146] It should be noted that the description in this embodiment details how the system processes and stores data obtained through a complex programming component after a user performs a storage operation on that component within the programming workspace. The specific steps include: first, in response to the user's storage operation, the system retrieves the data to be stored obtained through the complex programming component; then, it serializes this data, converting it into a string to be stored; finally, it sends this string to the database for storage.

[0147] Serialization ensures data integrity and consistency, preventing loss or corruption during storage and transmission. Furthermore, by converting data into string format, it can be easily stored in various database systems, whether relational or non-relational. This processing method also facilitates data migration and backup.

[0148] To further illustrate, consider an optional scenario in a game development environment where a developer uses a complex programming component to define game characters and their attribute relationships. When the developer completes the character definition and wants to save the character data, the system responds to the developer's save operation by retrieving the character data (the data to be stored) obtained through the complex programming component. Then, the system serializes this character data, converting attributes such as the character's name, health points, and attack power into a JSON-formatted string (the string to be stored). Finally, this JSON string is sent to the game database so that subsequent game logic can read and use this data.

[0149] By introducing the aforementioned data storage mechanism into the programming workspace, users can easily save data obtained through complex programming components. This mechanism not only ensures data integrity and security but also improves data portability and scalability. Whether in game development, application development, or other programming scenarios, this data storage method provides users with significant convenience and flexibility.

[0150] As an alternative approach, after displaying the second programming component in a working state in the programming workspace, the method also includes:

[0151] S3-1, in response to a read operation performed on a second programming component in the working state, acquire the data to be read obtained through the second programming component in the working state;

[0152] S3-2, Receive the read data corresponding to the data to be read, wherein the read data is the string retrieved from the database that matches the data to be read, and the data is obtained after deserialization.

[0153] Optionally, in this embodiment, the data to be read may be an identifier or description of data that the user wishes to read from the database through a complex programming component.

[0154] Optionally, in this embodiment, the data to be read can be data obtained by deserializing a string retrieved from the database that matches the data to be read.

[0155] Optionally, in this embodiment, deserialization can be a process of restoring the serialized string back to the original data structure or object state.

[0156] It's important to note that in the programming workspace, when a user performs a read operation on a complex programming component, the system executes a series of steps to retrieve and process the data stored in the database. First, in response to the user's read operation, the system determines the data to be read (the data to be read). Then, the system retrieves strings from the database that match this data (these strings were previously serialized during storage). Finally, the system deserializes these strings, restoring them to their original data structure or object state, so that the user can use them in the programming workspace.

[0157] Deserialization enables string data stored in a database to be transformed back into a data structure that programs can understand and manipulate. This not only facilitates data reading and use but also ensures data consistency and integrity. Furthermore, through deserialization, this embodiment can easily achieve persistent data storage and cross-platform sharing.

[0158] To illustrate further, consider this optional scenario: a game developer creates a game level using a complex programming component and serializes the level's data (including terrain, enemy positions, items, etc.) into strings and stores it in a database. When the developer wants to read and edit this level, they perform a read operation on the complex programming component. The system responds to this operation, retrieves the serialized strings related to the level from the database, and deserializes these strings to restore the original level data. This allows the developer to view and edit the level in the editing interface.

[0159] By introducing the aforementioned data reading mechanism (including responding to read operations, retrieving data from the database, and performing deserialization) into the programming workspace, users can easily read and reuse previously stored complex data structures. This mechanism not only improves data reusability but also greatly simplifies data management and operation processes.

[0160] As an alternative, after displaying the first programming component in a working state in the programming work area, the method further includes: in response to an integration operation performed on the first programming component in a working state, integrating the first programming component in a working state into a single complex programming component in a working state.

[0161] After displaying a second programming component in a working state in the programming work area, the method further includes: in response to a splitting operation performed on any complex programming component in the working state of the second programming component, splitting the complex programming component into multiple simple programming components in a working state.

[0162] Optionally, in this embodiment, the integration operation can be understood as the process of merging first programming components into a complex programming component within the programming workspace. This operation allows users to create a more complex programming unit to handle data of more structural types and the relationships between them.

[0163] Optionally, in this embodiment, the splitting operation can be understood as the process of decomposing a complex programming component into multiple simpler programming components within the programming workspace. This operation allows users to view and edit the various parts of the complex programming component in greater detail.

[0164] It should be noted that the description in this embodiment presents two operations in the programming workspace: integration and splitting. Integration refers to combining a first programming component into a complex programming component. Conversely, splitting involves breaking down a complex programming component into multiple simpler programming components.

[0165] Integration and splitting operations greatly enhance the flexibility and efficiency of programming. Integration allows users to create more powerful and complex programming units. Splitting, on the other hand, allows users to gain a deeper understanding of the internal structure of complex components, enabling more precise editing and optimization.

[0166] To further illustrate, consider an optional scenario in a visual programming environment where a user first creates several simple programming components, each responsible for handling a specific data type (such as integers, strings, etc.). The user then decides to integrate these simple components into a complex programming component to handle multiple data types and their relationships simultaneously. This is an example of an integration operation.

[0167] Conversely, if a user has a complex programming component that handles multiple data types and relationships, but wants to view or edit a specific part in more detail, they might choose to split the complex component. For example, a complex component might handle user information (name, age, address, etc.) simultaneously; by splitting the component, the user can view and edit the simpler part that handles the name separately.

[0168] By introducing integration and decomposition operations, the programming workspace provides users with a more dynamic and flexible programming environment. Users can easily build complex programming logic while maintaining fine-grained control over individual components. This design not only improves programming efficiency and accuracy but also reduces the difficulty of maintaining and modifying code.

[0169] As an optional solution, for ease of understanding, the aforementioned visual programming method is applied to the cloud storage scenario of player data. This embodiment innovatively modifies the "storing player data" building blocks of cloud storage using the visual programming method, enabling creators to directly transmit complex data types to the platform. The platform intelligently performs serialization operations, converting this data into a universal string format, and then securely and efficiently storing it in the cloud database. This simplifies the complexity of data storage while ensuring data compatibility and scalability.

[0170] Furthermore, this embodiment also includes a new cloud storage block for "Retrieving Player Data for Variables." This block allows creators to easily retrieve data from the cloud. The platform automatically performs a deserialization process, restoring common string data to its original complex data type, thus ensuring data integrity and accuracy. Creators can then use the "Retrieving Custom Object Attributes" block to flexibly utilize this cloud data, greatly facilitating game development and data analysis.

[0171] This embodiment also fully supports arrays of complex data types. This means that even large amounts of complex data can be efficiently stored and retrieved using the solution provided in this embodiment. This technical feature not only enhances data processing capabilities but also meets the needs of game development for data diversity and large-scale processing.

[0172] For example Figure 4 The interface shown (the right side can be understood as the programming component area, and the left side as the programming workspace) demonstrates that the creator has created a "creature" type pet for the player. This pet has three main attributes: "Health" (value 1), "Energy" (value 2), and "Speed" (value 3). These attributes play a crucial role in turn-based combat during gameplay, and their values ​​change in real-time based on the battle situation. To ensure game continuity and data consistency, these dynamically changing attribute values ​​need to be synchronized to the cloud in a timely manner.

[0173] When a user launches the game, the system first retrieves the pet's latest attribute values ​​from the cloud. These values ​​are used in the game's logic calculations to ensure that the pet's status experienced by the player in the game is synchronized with the cloud data. This design not only enhances the game's smoothness and realism but also guarantees the accuracy and security of the data.

[0174] After a pet participates in a round of combat, any changes to its attribute values ​​need to be accurately recorded and updated to the cloud. This process is achieved through an efficient data transmission and synchronization mechanism, which ensures real-time updates to the game state and provides an accurate data foundation for subsequent game rounds.

[0175] To further illustrate, the specific steps for applying the above visual programming method to the cloud storage scenario of player data are as follows:

[0176] S4-1, for storing complex data structures:

[0177] The original platform only supports simple data types (such as...) Figure 4 The cloud storage of Boolean values, numeric values, strings, etc., as shown. However, this implementation, for example... Figure 5 As shown, by introducing the "complex archive" feature, the data storage capacity has been significantly expanded, now supporting complex data structures and custom data structures (such as...). Figure 4 (Players, components, etc. shown). This improvement allows complex data such as "pets" to be fully stored in the cloud, and the "pet" data in the cloud is updated in real time when the block is executed to reflect the latest attribute values.

[0178] S4-2, Obtaining Complex Data Structures:

[0179] When a player re-enters the game or reconnects after a disconnection, the system needs to retrieve and update the "pet's" data from the cloud. This implementation example... Figure 6 As shown, by using specific building blocks, the data of the "pet" is updated to match the data of the player's (complex) creature save file, a process that is simplified and completed efficiently. This mechanism ensures that players can continuously use the latest attribute values ​​saved in the cloud throughout the game.

[0180] This improves the game's continuity and user experience.

[0181] S4-3, an array for storing complex data structures:

[0182] Considering that players may own multiple pets in the game, cloud storage needs to have the ability to synchronize data for multiple pets (e.g., pet 1, pet 2, pet 3). In this embodiment, as... Figure 7 As shown, storing an array maintains operational consistency with storing a single data structure, but the platform internally performs special processing, adding Pet 1, Pet 2, and Pet 3 to "All Pets" respectively to accommodate the array-style data. Further details are as follows... Figure 8 As shown, by manipulating individual blocks, player 1's complex save file "All Pets" is stored as... Figure 7 The "All Pets" feature allows data from multiple pets to be stored in the cloud at once, greatly improving data processing efficiency.

[0183] S4-4, Retrieving complex data arrays from the cloud:

[0184] When a player enters the game, the system needs to synchronize data from the cloud to obtain data on all their pets. This implementation example... Figure 9As shown, by running specific blocks, the data for "All Pets" is updated to match the data for Player 1's "All Pets" biome (complex) save file. This process is simple and intuitive, no different from synchronizing a single complex data set. This improvement not only simplifies the data synchronization process but also ensures that players can quickly immerse themselves in the game.

[0185] Optionally, the technical solution of this embodiment can run on hardware devices that support web browsers, such as personal computers, tablets, and smartphones. Users can access applications based on the Blockly visual programming library through these devices, as detailed below:

[0186] S5-1, Acquire player game behavior;

[0187] S5-2, Obtain the creator's game logic;

[0188] S5-3, platform client execution logic code;

[0189] S5-4, the platform server processes cloud storage requests;

[0190] S5-5, the platform database stores player data.

[0191] It's important to note that the operation of a cloud storage system involves multiple participants, including gamers, developers creating content using visual programming tools, platform conversion mechanisms that transform developers' block-based logic into executable code, server backends responsible for data processing, and the final data repository. This series of processes constitutes the core operational framework of a cloud storage system.

[0192] In the product development process, taking a pet system as an example, this embodiment needs to define a series of attributes for the pet and store these attributes in a structured manner in the cloud storage system. Therefore, this embodiment designs a general data structure to support the storage of complex data types. The structure is defined as follows:

[0193] Struct { string id; / / Unique identifier used to distinguish different custom types; string name; / / Name of the custom type, such as "pet"; Property[] propertyList; / / Array of properties}

[0194] The Property class defines the names and data types of the properties:

[0195] Property{stringname; / / Property name; stringdataType; / / Data type}

[0196] Data types can be basic types (such as numbers, strings, and booleans) or complex types, the latter being a combination of basic and complex types. For example, the complex type "Biology" can be defined to include attributes such as "health," "energy," and "speed."

[0197] It's important to understand that cloud storage systems focus on the actual data values, not type definitions. In visual programming environments, complex type instance data is stored in variables, which are created and managed manually by developers.

[0198] The structure of the variable is defined as follows:

[0199] VariableInfo{string id; / / Unique identifier, generated by the UUID algorithm; string dataType; / / Data type; string name; / / Variable name; anyvalues; / / Values ​​of the variable, can be of any type}

[0200] This design allows the value of a variable to adapt to various scenarios because its type is variable and depends on the specific dataType.

[0201] Taking a "pet" variable of the "creature" type as an example, its initial state might include attribute values ​​such as "health," "energy," and "speed." After a round of combat, these attribute values ​​may change, but the variable's ID remains unchanged. This design allows this embodiment to effectively detect and manage changes to complex data types stored in the cloud storage system.

[0202] Optionally, if the pet's attribute values ​​change after the previous battle, use the "Complex Save" block. This block will determine the data serialization based on "dataType":"Creature", and the specific steps are as follows:

[0203] S6-1, Determine the data type;

[0204] S6-2, Extract the necessary fields based on the type;

[0205] S6-3, New Data Serialization.

[0206] It's important to note that when processing the "pet" data mentioned above, the `id` is project-related, so it doesn't require special attention during storage. When this data is retrieved and restored from storage, its values ​​will be assigned to new variable instances. In this process, the original variable names are not necessary, as new variable names will be used for management after the data is extracted.

[0207] The core data elements are `dataType` and `values`, which contain all the information needed to reconstruct the data. Since backend databases typically only support storing simple data types, this embodiment needs to serialize these complex data structures into string format. For example, pet data can be serialized into the following string:

[0208] '{"dataType":"Creature","values":[{"name":"Health","value":"30"},{"name":"Energy","value":"50"},{"name":"Speed","value":"5"}]}'

[0209] This serialization method ensures data integrity and portability.

[0210] To ensure data security and isolation, developers' code execution environment is confined to a sandbox, and all interactions with the system and server are implemented through interfaces provided by the client. This design effectively prevents potential security risks and data leaks.

[0211] The stored instructions and data generated by the block logic are transmitted through the client. A secure connection is established between the client and the server to ensure transparent transmission of instructions and data. Data interaction between the server and the backend follows a clear protocol, including requestId (used to uniquely identify the request), command (specifying the operation type, such as putStruct), key (the key for storing data), and value (the actual content stored), specifically as follows: Figure 10 As shown, `requestId` serves as a unique identifier for each request, ensuring an accurate match between requests and responses, effectively detecting and managing the request flow, and preventing confusion or incorrect handling; `command` explicitly specifies the operation type, such as `putStruct`, which tells the server the specific action to be performed and is the core part of the data manipulation instructions; `key` serves as a unique identifier for the data, used to locate and retrieve specific data in the storage system, such as in... Figure 10 In this dataset, the key "pet" indicates that the data is related to a specific pet; the value contains the actual data to be stored, such as biological data and specific attributes like health points and energy. This data is structured in JSON format for easy server parsing and processing.

[0212] When the server receives data from the client, it first performs a data validity check to ensure data integrity and security. Once verification is successful, the data is stored in the database. If a record with the same key already exists in the database, its corresponding value will be overwritten by the newly received data, thus ensuring data timeliness and accuracy.

[0213] The database table design also fully considers data management needs, including primary key (used to uniquely identify stored data), non-primary key value (stores the latest data value), and createTime and updateTime timestamps (recording the data's creation time and last update time, respectively), as detailed below. Figure 11 As shown in the diagram. This design not only supports efficient data retrieval and updates, but also provides data inspection and auditing capabilities.

[0214] Optionally, in this embodiment, the database storage process is as follows: Figure 12 As shown, the process officially begins when a storage request is received from a client. The client's request is parsed, extracting the key and possible value information. The system is then checked to see if the requested key already exists. If the key exists, an update operation is performed. If the key does not exist, a new key-value pair is created.

[0215] Update the value field corresponding to this key to ensure that the data stored in the database is up-to-date. Simultaneously, set the current time to the update time of this key-value pair to record the last time the data was updated. Create a new record in the database to store this key and its corresponding value. Set the current time to the creation and update times of this record to ensure the timeliness and accuracy of the data.

[0216] After completing the above operations, the process ends and the operation result (such as success or failure) is returned to the client.

[0217] Optionally, in this embodiment, the acquisition process also involves various stages including the client, server, and database, and requires further operations using the returned data. This process can also be divided into two steps: retrieving the value from cloud storage and setting the value to the variable "pet". The key in the database is the primary key; if it exists, the corresponding value is returned; if it does not exist, null is returned.

[0218] The detailed process of obtaining it is as follows Figure 13 As shown, the specific steps are as follows:

[0219] Client-initiated query: The user or system sends a query request to the server through the client, and the request contains the specific key to be queried.

[0220] Server processing: After receiving a query request, the server immediately processes it and prepares to search for the key in the database.

[0221] Database query: The server performs a query operation in the database to find whether there is a data record that matches the key in the request.

[0222] Key existence check:

[0223] Key does not exist: If no matching key is found in the database, the server will return a "Key does not exist" response to the client, and the process ends.

[0224] Key exists: If a matching key is found, continue with the subsequent steps.

[0225] Return Value: For an existing key, the server returns its corresponding value to the client.

[0226] Client-side parsing: After receiving the returned value, the client performs parsing operations to obtain the specific data content.

[0227] Type mismatch: The client compares the data type of the parsed value with the expected or specified data type. If the types do not match, a "Run report: Type mismatch" message is generated, and the process ends.

[0228] Type matching: If the data types match, the client will perform the variable assignment operation normally.

[0229] Variable setting: After assigning values ​​to variables, the client sets the relevant variables to empty (or performs other processing according to actual needs) to prepare for the next operation or data update.

[0230] Once all steps are completed, whether the process ends prematurely due to the absence of a key or after successful data processing and variable setting, the entire query and data processing workflow is complete.

[0231] Optionally, during data manipulation, if complex data structures are involved, the main process is similar to that for processing single data; the core difference lies in the specific values ​​and structural complexity of the data. Taking array data as an example, when storing information about "all pets" in this embodiment, the data will be organized into a nested JSON structure, as shown below:

[0232] {"dataType":"Biological","isArray":true","values":[[{"name":"Health","value":"30"},{"name":"Energy","value":"50"},{"name":"Speed","value":"5"}], / / ...Other pet data]}

[0233] In this structure, "isArray":true explicitly indicates that the values ​​field contains an array, representing a collection of data from multiple organisms.

[0234] At the database level, such complex data is serialized into a JSON string and stored as a row in the database using "all pets" as the key. This storage method effectively preserves the integrity and structure of the data.

[0235] When this data needs to be retrieved from the database, this embodiment uses the key "all pets" for querying. After receiving the query request, the server retrieves the corresponding records and returns the stored JSON string to the client.

[0236] After receiving the JSON data, the client parses it to reconstruct the original data structure. Next, the client checks if the type of the variable to be assigned matches the parsed data type (an array of "organisms" in this example). If the types match, the client will perform the assignment operation normally, thus obtaining data for multiple organisms. If the types do not match, the client will report a "type mismatch" error to avoid potential data type conflicts or error handling.

[0237] In related technologies, creators must manually perform string conversions and concatenations for complex data types, which is not only tedious but also highly prone to human error. This embodiment significantly simplifies this process by introducing automatic serialization and deserialization mechanisms. Creators can now complete the storage and retrieval of complex data with a single operation, greatly improving ease of use and efficiency.

[0238] Traditional methods involve numerous manual steps in concatenating and parsing complex data, and different concatenation methods (such as using "|" or the newline character "\n") increase the risk of parsing errors. This embodiment eliminates the complexity and uncertainty of manual operations by automatically handling data serialization and deserialization through a platform, thereby significantly reducing the error rate.

[0239] Traditional technical solutions often require storing each field of complex data types separately. This approach is not only prone to data omissions, but also becomes exponentially more complex as the number of data attributes increases. This embodiment solves the problem of scattered field storage by automatically serializing complex data types into a universal string and centrally storing it in the cloud, significantly improving the efficiency and integrity of data storage.

[0240] In related technologies, once the attributes of complex data types change, the associated concatenation and parsing operations require cumbersome adjustments or additions. This embodiment, through automatic serialization and deserialization technology, enables the system to flexibly respond to changes in the attributes of complex data types without requiring any modifications to existing storage and retrieval processes. This not only ensures system stability but also significantly enhances system scalability.

[0241] It is understood that in the specific embodiments of this application, data such as user information are involved. When the above embodiments of this application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

[0242] It should be noted that, for the sake of simplicity, the foregoing method embodiments are all described as a series of actions. However, those skilled in the art should understand that this application is not limited to the described order of actions, as some steps may be performed in other orders or simultaneously according to this application. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions and modules involved are not necessarily essential to this application.

[0243] According to another aspect of the embodiments of this application, a visual programming apparatus for implementing the above-described visual programming method is also provided. For example... Figure 14 As shown, the device includes:

[0244] The first display unit 1402 is used to display at least one programming component in a ready state in the programming component area, wherein the programming component is a simple programming component or a complex programming component, the simple programming component is used to program data of any one structure type, and the complex programming component is used to program data of at least two structure types and the relationship between at least two structure types.

[0245] The second display unit 1404 is configured to display the first programming component in a working state in a programming work area in response to a first selection operation performed on the first programming component of at least one programming component, wherein the first programming component is a simple programming component;

[0246] The third display unit 1406 is configured to display the second programming component in a working state in a programming work area in response to a second selection operation performed on the second programming component of at least one programming component, wherein the second programming component is a complex programming component.

[0247] For specific implementation examples, please refer to the examples shown in the above visual programming method; these will not be repeated here.

[0248] As an optional solution, the third display unit 1404 includes:

[0249] A first display module is used to display a block having at least two input options and at least one configuration option in a programming work area, wherein a second programming component in a working state includes a block, the input options are used to input data of any structure type into the block, and the configuration options are used to configure the behavior mode of the block.

[0250] For specific implementation examples, please refer to the examples shown in the above visual programming method; these will not be repeated here.

[0251] As an optional solution, the first display module includes:

[0252] The first display submodule is used to display a block with at least two input options associated with a first virtual object and a storage configuration option in the programming work area. The at least two input options associated with the first virtual object include at least one object attribute option and an object ownership option. The object attribute option is used to input attribute data corresponding to the object attribute of the first virtual object. The object ownership option is used to input identification data corresponding to the first owner user of the first virtual object. The storage configuration option is used to configure the behavior mode of the block to be a storage mode.

[0253] For specific implementation examples, please refer to the examples shown in the above visual programming method; these will not be repeated here.

[0254] As an optional solution, the first display module includes:

[0255] The second display submodule is used to display a block with at least two input options associated with the target virtual object and a read configuration option in the programming work area. The at least two input options associated with the target virtual object include an object identifier option and an ownership identifier option. The object identifier option is used to input the identifier data corresponding to the virtual object to which the target virtual object is set. The ownership identifier option is used to input the identifier data corresponding to the owner user of the virtual object to which the target virtual object is set. The read configuration option is used to configure the behavior mode of the block to be read mode.

[0256] For specific implementation examples, please refer to the examples shown in the above visual programming method; these will not be repeated here.

[0257] As an optional solution, the third display unit 1404 includes:

[0258] The second display module is used to display a block with a set of input options associated with a second home user and at least one configuration option in the programming work area. The second programming component in the working state includes the block. The set of input options associated with the second home user is used to set all virtual objects of the second home user to virtual objects in any set of virtual objects. At least two virtual objects are added to the set of virtual objects. The configuration option is used to configure the behavior mode of the block.

[0259] For specific implementation examples, please refer to the examples shown in the above visual programming method; these will not be repeated here.

[0260] As an optional solution, the device further includes: a third display module for displaying, before displaying a block having a set of input options associated with a second home user and at least one configuration option in the programming work area, displaying, in the programming work area, a block having at least two sub-blocks, wherein the sub-blocks are used to configure a second virtual object added to the target virtual object set;

[0261] The second display module includes:

[0262] The third display submodule is used to display blocks with a set input option associated with the second home user and storage configuration options in the programming work area. The set input option associated with the second home user is used to set all virtual objects of the second home user as the second virtual object added to the target virtual object set. The storage configuration options are used to configure the behavior mode of the blocks to be a storage mode; or...

[0263] The fourth display submodule is used to display a set of input options with a second home user association and a block for reading configuration options in the programming work area. The reading configuration options are used to configure the behavior mode of the block as reading mode.

[0264] For specific implementation examples, please refer to the examples shown in the above visual programming method; these will not be repeated here.

[0265] As an optional solution, the device also includes:

[0266] The first acquisition unit is used to acquire the data to be stored obtained by the second programming component in the working state after displaying the second programming component in the working state in the programming work area, in response to the storage operation performed on the second programming component in the working state.

[0267] The serialization unit is used to serialize the data to be stored after the second programming component in the working state is displayed in the programming work area, so as to obtain the string to be stored.

[0268] The storage unit is used to send the string to be stored to the database for storage after the second programming component, which is in working condition, is displayed in the programming work area.

[0269] For specific implementation examples, please refer to the examples shown in the above visual programming method; these will not be repeated here.

[0270] As an optional solution, the device also includes:

[0271] The second acquisition unit is used to acquire the data to be read obtained by the second programming component in the working state after displaying the second programming component in the working state in the programming work area, in response to the read operation performed on the second programming component in the working state.

[0272] The reading unit is used to receive read data corresponding to the data to be read after the second programming component in the working state is displayed in the programming work area. The read data is the data obtained by deserializing the string that is retrieved from the database and matches the data to be read.

[0273] For specific implementation examples, please refer to the examples shown in the above visual programming method; these will not be repeated here.

[0274] As an optional solution, the device further includes: an integration unit, for integrating the first programming component in the working state into a single complex programming component in the working state in response to an integration operation performed on the first programming component in the working state after displaying the first programming component in the working state in the programming work area;

[0275] The apparatus further includes a splitting unit for splitting any complex programming component into multiple simple programming components in operation after displaying a second programming component in operation in the programming work area, in response to a splitting operation performed on any complex programming component in the second programming component in operation.

[0276] For specific implementation examples, please refer to the examples shown in the above visual programming method; these will not be repeated here.

[0277] According to another aspect of the embodiments of this application, an electronic device for implementing the above-described visual programming method is also provided. This electronic device may, but is not limited to, […]. Figure 1 The user equipment 102 or server 112 shown in the figure, in this embodiment, is taken as an example of an electronic device, namely user equipment 102. Further, as shown in the figure... Figure 15As shown, the electronic device includes a memory 1502 and a processor 1504. The memory 1502 stores a computer program, and the processor 1504 is configured to execute the steps of any of the above method embodiments via the computer program.

[0278] Optionally, in this embodiment, the aforementioned electronic device may be located in at least one of a plurality of network devices in a computer network.

[0279] Optionally, in this embodiment, the processor can be configured to perform the following steps via a computer program:

[0280] S1, Display at least one programming component in a ready state in the programming component area, wherein the programming component is a simple programming component or a complex programming component, the simple programming component is used to program data of any one structure type, and the complex programming component is used to program data of at least two structure types and the relationship between at least two structure types;

[0281] S2, in response to a first selection operation performed on a first programming component among at least one programming component, the first programming component in a working state is displayed in the programming work area, wherein the first programming component is a simple programming component;

[0282] S3, in response to a second selection operation performed on a second programming component in at least one programming component, displays the second programming component in a working state in the programming work area, wherein the second programming component is a complex programming component.

[0283] Alternatively, as those skilled in the art will understand, Figure 15 The structure shown is for illustrative purposes only. Figure 15 This does not limit the structure of the aforementioned electronic devices. For example, the electronic device may also include components that are more... Figure 15 The more or fewer components shown (such as network interfaces, etc.), or having the same Figure 15 The different configurations shown.

[0284] The memory 1502 can be used to store software programs and modules, such as the program instructions / modules corresponding to the visual programming method and apparatus in this embodiment. The processor 1504 executes various functional applications and data processing by running the software programs and modules stored in the memory 1502, thereby realizing the aforementioned visual programming method. The memory 1502 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 1502 may further include memory remotely located relative to the processor 1504, and these remote memories can be connected to electronic devices via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof. Specifically, the memory 1502 may be used, but is not limited to, to store programming work areas, simple programming components, and complex programming components. As an example, such as... Figure 15 As shown, the memory 1502 may include, but is not limited to, the first display unit 1402, the second display unit 1404, and the third display unit 1406 of the visual programming device. Furthermore, it may include, but is not limited to, other module units of the visual programming device, which will not be elaborated upon in this example.

[0285] Optionally, the transmission device 1506 described above is used to receive or send data via a network. Specific examples of the network described above may include wired networks and wireless networks. In one example, the transmission device 1506 includes a Network Interface Controller (NIC), which can be connected to other network devices and a router via a network cable to communicate with the Internet or a local area network. In another example, the transmission device 1506 is a Radio Frequency (RF) module, used for wireless communication with the Internet.

[0286] In addition, the above-mentioned electronic device also includes: a display 1508 for displaying information such as the programming work area, simple programming components and complex programming components; and a connection bus 1510 for connecting the various module components in the above-mentioned electronic device.

[0287] In other embodiments, the aforementioned user equipment or server can be a node in a distributed system, wherein the distributed system can be a blockchain system, which is a distributed system formed by connecting multiple nodes through network communication. The nodes can form a peer-to-peer network, and any form of computing device, such as a server, user equipment, or other electronic device, can become a node in the blockchain system by joining this peer-to-peer network.

[0288] According to one aspect of this application, a computer program product is provided, comprising a computer program / instructions containing program code for performing the methods shown in the flowchart. In such embodiments, the computer program can be downloaded and installed from a network via a communication component, and / or installed from a removable medium. When the computer program is executed by a central processing unit, it performs various functions provided in embodiments of this application.

[0289] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0290] It should be noted that the computer system of the electronic device is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.

[0291] A computer system includes a Central Processing Unit (CPU), which performs various appropriate actions and processes based on programs stored in Read-Only Memory (ROM) or loaded from RAM. ROM also stores various programs and data required for system operation. The CPU, ROM, and RAM are interconnected via a bus. Input / output interfaces (I / O interfaces) are also connected to the bus.

[0292] The following components are connected to the input / output interface: input sections including keyboards, mice, etc.; output sections including cathode ray tubes (CRTs), liquid crystal displays (LCDs), and speakers; storage sections including hard drives; and communication sections including network interface cards such as LAN cards and modems. The communication section performs communication processing via a network such as the Internet. Drives are also connected to the input / output interface as needed. Removable media, such as disks, optical discs, magneto-optical discs, semiconductor memories, etc., are installed on the drive as needed so that computer programs read from them can be installed into the storage section as required.

[0293] Specifically, according to embodiments of this application, the processes described in the various method flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication component, and / or installed from a removable medium. When the computer program is executed by a central processing unit, it performs various functions defined in the system of this application.

[0294] According to one aspect of this application, a computer-readable storage medium is provided, wherein a processor of a computer device reads computer instructions from the computer-readable storage medium, and executes the computer instructions, causing the computer device to perform the methods provided in the various alternative implementations described above.

[0295] Optionally, in this embodiment, the computer-readable storage medium described above may be configured to store a computer program for performing the following steps:

[0296] S1, Display at least one programming component in a ready state in the programming component area, wherein the programming component is a simple programming component or a complex programming component, the simple programming component is used to program data of any one structure type, and the complex programming component is used to program data of at least two structure types and the relationship between at least two structure types;

[0297] S2, in response to a first selection operation performed on a first programming component among at least one programming component, the first programming component in a working state is displayed in the programming work area, wherein the first programming component is a simple programming component;

[0298] S3, in response to a second selection operation performed on a second programming component in at least one programming component, displays the second programming component in a working state in the programming work area, wherein the second programming component is a complex programming component.

[0299] Optionally, in embodiments of this application, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0300] Optionally, in this embodiment, those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be implemented by a program instructing related hardware of an electronic device. The program can be stored in a computer-readable storage medium, which may include: flash drive, read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0301] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0302] If the integrated units in the above embodiments are implemented as software functional units and sold or used as independent products, they can be stored in the aforementioned computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the related technology, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause one or more computer devices (which may be personal computers, servers, or network devices, etc.) to execute all or part of the steps of the methods of the various embodiments of this application.

[0303] In the above embodiments of this application, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0304] In the several embodiments provided in this application, it should be understood that the disclosed user equipment can be implemented in other ways. The device embodiments described above are merely illustrative; for example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection of units or modules may be electrical or other forms.

[0305] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0306] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0307] The above description is only a preferred embodiment of this application. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of this application, and these improvements and modifications should also be considered within the scope of protection of this application.

Claims

1. A visual programming method, characterized in that, include: At least one programming component in a ready state is displayed in the programming component area, wherein the programming component is a simple programming component or a complex programming component, the simple programming component is used to program data of any one structure type, and the complex programming component is used to program data of at least two structure types and the relationship between the at least two structure types; In response to a first selection operation performed on a first programming component among the at least one programming components, the first programming component in a working state is displayed in the programming work area, wherein the first programming component belongs to the simple programming component; In response to a second selection operation performed on a second programming component among the at least one programming components, a second programming component in a working state is displayed in the programming work area, wherein the second programming component belongs to the complex programming component.

2. The method according to claim 1, characterized in that, The second programming component, which is displayed in a working state in the programming work area, includes: The programming work area displays a block with at least two input options and at least one configuration option, wherein the second programming component in working state includes the block, the input options are used to input data of any of the structure types into the block, and the configuration options are used to configure the behavior mode of the block.

3. The method according to claim 2, characterized in that, The block display in the programming work area, having at least two input options and at least one configuration option, includes: The programming work area displays a block with at least two input options associated with a first virtual object and a storage configuration option. The at least two input options associated with the first virtual object include at least one object attribute option and an object ownership option. The object attribute option is used to input attribute data corresponding to the object attribute of the first virtual object. The object ownership option is used to input identification data corresponding to the first owner user of the first virtual object. The storage configuration option is used to configure the behavior mode of the block to be a storage mode.

4. The method according to claim 2, characterized in that, The block display in the programming work area, having at least two input options and at least one configuration option, includes: The programming workspace displays a block with at least two input options associated with a target virtual object and a read configuration option. The at least two input options associated with the target virtual object include an object identifier option and an ownership identifier option. The object identifier option is used to input the identifier data corresponding to the virtual object to which the target virtual object is set. The ownership identifier option is used to input the identifier data corresponding to the owner user of the virtual object to which the target virtual object is set. The read configuration option is used to configure the behavior mode of the block to be read mode.

5. The method according to claim 1, characterized in that, The second programming component, which is displayed in a working state in the programming work area, includes: The programming work area displays a block with a set of input options associated with a second home user and at least one configuration option, wherein the second programming component in working state includes the block, the set of input options associated with the second home user is used to set all virtual objects of the second home user to virtual objects in any virtual object set, the virtual object set having at least two virtual objects added, and the configuration option is used to configure the behavior mode of the block.

6. The method according to claim 5, characterized in that, Before displaying a block with a set of input options associated with a second home user and at least one configuration option in the programming work area, the method further includes: displaying a block with at least two sub-blocks in the programming work area, wherein the sub-blocks are used to configure a second virtual object added to the target virtual object set; The block that displays a set of input options with a second home user association and at least one configuration option in the programming work area includes: The programming workspace displays a block with a set input option associated with the second home user and a storage configuration option. The set input option associated with the second home user is used to set all virtual objects of the second home user as the second virtual objects added to the target virtual object set. The storage configuration option is used to configure the behavior mode of the block as a storage mode; or... The programming work area displays a block with a set of input options associated with the second home user and a read configuration option, wherein the read configuration option is used to configure the behavior mode of the block as read mode.

7. The method according to claim 1, characterized in that, After displaying a second programming component in working order in the programming work area, the method further includes: In response to a storage operation performed on the second programming component in the working state, the data to be stored obtained through the second programming component in the working state is acquired; The data to be stored is serialized to obtain the string to be stored; The string to be stored is sent to the database for storage.

8. The method according to claim 7, characterized in that, After displaying a second programming component in working order in the programming work area, the method further includes: In response to a read operation performed on the second programming component in the working state, the data to be read obtained through the second programming component in the working state is acquired; The system receives read data corresponding to the data to be read, wherein the read data is a string retrieved from the database that matches the data to be read, and the data is obtained after deserialization.

9. The method according to any one of claims 1 to 8, characterized in that, After displaying a first programming component in a working state in the programming work area, the method further includes: in response to an integration operation performed on the first programming component in a working state, integrating the first programming component in a working state into a single complex programming component in a working state. After displaying a second programming component in a working state in the programming work area, the method further includes: in response to a splitting operation performed on any complex programming component among the second programming components in a working state, splitting the complex programming component into a plurality of simple programming components in a working state.

10. A visual programming device, characterized in that, include: A first display unit is configured to display at least one programming component in a ready state in a programming component area, wherein the programming component is a simple programming component or a complex programming component, the simple programming component is used to program data of any one structure type, and the complex programming component is used to program data of at least two structure types and the relationship between the at least two structure types; The second display unit is configured to display the first programming component in a working state in a programming work area in response to a first selection operation performed on the first programming component of the at least one programming component, wherein the first programming component belongs to the simple programming component; A third display unit is configured to display a second programming component in a working state in the programming work area in response to a second selection operation performed on the second programming component of the at least one programming component, wherein the second programming component belongs to the complex programming component.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a stored program, wherein the program is executed by an electronic device to perform the method according to any one of claims 1 to 9.

12. A computer program product comprising a computer program / instructions, characterized in that, When the computer program / instructions are executed by the processor, they implement the steps of the method described in any one of claims 1 to 9.

13. An electronic device comprising a memory and a processor, characterized in that, The memory stores a computer program, and the processor is configured to execute the method described in any one of claims 1 to 9 through the computer program.