System, method, and computer program for providing an end-to-end solution for front-end page generation

Abstract

To provide an end-to-end solution for generating a front-end page.SOLUTION: A system includes: a design module that allows a user to design a UI component; an annotation sub-module that uses a design element attribute to annotate the UI component; a database that stores a database object according to a data schema; a mapper module that maps the design element attribute of the UI component to a database object attribute without coding; a content management module that adds the mapped UI component to a front-end page feed to associate the mapped UI component with an instance of the database object; a feed generation module that takes out an instance-specific value of the database object attribute of the mapped UI component; and a metadata bus that allows communication of each module and the database.SELECTED DRAWING: Figure 2

Description

[Technical Field]

[0001] The present invention relates generally to front-end development, and more particularly to a system and method that provides an end-to-end solution from design to publishing for front-end page generation.

[0002] [CROSS-REFERENCE TO RELATED APPLICATIONS] This application claims priority to U.S. Provisional Patent Application No. 63 / 295,195, filed December 30, 2021, entitled "System, Method, and Computer Program for Providing an End-to-end Solution for Frontend Page Generation," the contents of which are incorporated herein by reference as if fully set forth herein. [Background technology]

[0003] In existing front-end page generation solutions, the design system, content management system, and feed generation system are all separate, standalone systems that do not communicate and require manual intervention to work together. Each system requires its own resources for design and development, which can be time-consuming and costly, especially for websites where user interface (UI) components change frequently. The present invention provides a system in which there is a separation of responsibilities between the design module, content management module, and feed generation module, providing flexibility and efficiency during changes, but there is clear and cohesive communication between the modules via a metadata bus. Furthermore, the present invention allows users to make changes to websites with little or no coding, thereby providing an end-to-end solution from UI design to content delivered to client applications that render in the user interface. Summary of the Invention

[0004] The present disclosure describes a system, method, and computer program that provides an end-to-end solution for front-end page generation from design to publishing. The method is performed by a computer system that includes a server, a storage system, a network, an operating system, and a database.

[0005] Rather than three separate systems that require resource-intensive manual intervention to interconnect, the present invention provides a solution that allows users to make changes to a website or mobile application web view with little or no coding, and where the design module, content management module, and feed generation module communicate in a clear and cohesive way over a metadata bus to deliver front-end pages with instance-specific values ​​to client applications.

[0006] In one embodiment, a method for enabling front-end page generation from design to publishing comprises the following steps: enabling a user to design a UI component; enabling a user to annotate UI components with design element attributes; receiving a user annotation of a UI component; generating metadata for the annotated UI component, the metadata describing design element attributes; retrieving metadata associated with database object attributes of the database object; providing a user interface that uses the metadata of the design element attributes and the metadata from the database object attributes to allow a user to map each of the design element attributes of the UI component to one of the database object attributes without coding; receiving a user's mapping of design element attributes to database object attributes of UI components; enabling a user to add UI components to a front-end page feed and associate the mapped UI components with one or more instances of a database object; receiving a request for a front-end page from a client application; retrieving instance-specific values ​​of business object attributes mapped to UI components from a database; providing a front-end page to a client application along with instance-specific values ​​of business object attributes of UI components; Includes. [Brief explanation of the drawings]

[0007] [Figure 1] 1 is a flowchart illustrating a prior art method for generating a web page. [Figure 2] FIG. 1 is a block diagram illustrating an exemplary system architecture for design-to-publishing front-end page generation according to one embodiment. [Figure 3A] 1 is a flow chart illustrating a method of a design-to-publish front-end page generation process according to one embodiment. [Figure 3B] 1 is a flow chart illustrating a method of a design-to-publish front-end page generation process according to one embodiment. [Figure 4] 1 is a screenshot of an exemplary graphical user interface for annotating UI components according to one embodiment. [Figure 5] 1 is a screenshot of an exemplary user interface of an annotation-to-mapping process according to one embodiment. [Figure 6] 10 is a screenshot of an exemplary user interface according to one embodiment in which mapping is overridden in a content management module. [Figure 7A] 10 is a screenshot of an exemplary user interface for mapping attributes based on matching types according to one embodiment. [Figure 7B] 10 is a screenshot of an exemplary user interface for mapping attributes based on matching types according to one embodiment. [Figure 8] 10 is a screenshot of an exemplary user interface of a UI component with instance-specific data according to one embodiment. [Figure 9] FIG. 2 is a block diagram illustrating an exemplary system architecture according to one embodiment of a metadata bus. DETAILED DESCRIPTION OF THE INVENTION

[0008] This disclosure describes a system, method, and computer program that provides an end-to-end solution for front-end page generation, from design to publishing. The front-end page of a software program or website is everything a user interacts with. For example, a front-end page can include a web page, a web view in a mobile application, or any other user interface screen visible to a user on a client device. The method is performed by a computer system (the "system") that includes a server, a storage system, a network, an operating system, and a database.

[0009] An exemplary embodiment of the method is described in more detail with respect to FIGS.

[0010] 1. Prior Art Web Page Generation Methods Figure 1 illustrates a prior art method for generating web pages. As can be seen in Figure 1, the design system 110, the content management system 120, and the feed generation system 130 are each standalone systems and are not connected. Instead, a user (e.g., a software developer) must manually program or code the associations between these systems, which requires significant resources. For example, the content management system 120, which defines the data, must be manually connected to the feed generation system 130, which defines which data is used, and both must be aligned with the design in the design system 110.

[0011] 2. Example System Architecture 2 illustrates an example architecture for a system that performs the methods described herein, although the methods described herein may be implemented in other systems and are not limited to the illustrated system.

[0012] As seen in FIG. 2 , design module 210 allows a user to design UI components. In some embodiments, the design module may be native to the system or may be a third-party application (e.g., FIGMA) included in the system. Within design module 210 is annotation submodule 215. In some embodiments, annotation submodule 215 is a software plug-in to design module 210. Annotation submodule 215 allows a user to annotate UI components with design element attributes by configuring one or more fields in the user interface. Each field is associated with predefined field properties. Because each field in the user interface is fully configurable, this allows users to easily add new field types. Although predefined field properties are later mapped to specific business object properties, starting with general predefined field properties allows for easy modification of UI elements and maximum flexibility.

[0013] In some embodiments, the annotation submodule 215 has one or more type definitions, such as simple types (e.g., simple text, link, or URL) and complex types (e.g., button component, simple image component, reward, etc.), with the simple types and complex types having the following exemplary components: Simple types (based on lowest level different kinds of property values): String, Link, Image URL, Hex, Icon, Boolean Complex types (based on combinations of simple types): Simple text ○<item text, type: string> ·button ○<Button text, type: string> ○<CTA URL,タイプ:リンク> ·image ○<Altテキスト,タイプ:ストリング> ○<Image URL, Type: Image URL> ○<background color, type: hexadecimal> ·Composite images (linked images): ○<Altテキスト,タイプ:ストリング> ○<Image URL, Type: Image URL> ○<background color, type: hexadecimal> ○<CTA URL,タイプ:リンク>

[0014] All type definitions are<isOptional,タイプ:ブール> and<isOverridable,タイプ:ブール> These properties give the content management module user the ability to control the inclusion or replacement of attributes when setting up topics using UI components in a feed definition. When annotating a UI component, the user selects a type (e.g., simple or complex) for each of the attributes in the UI component. This type is stored as part of its metadata. Examples of metadata include image, text, button, link image, link text, etc.

[0015] Database 245 stores database objects with database object attributes according to a data schema. In some embodiments, the database objects are business objects, and the data schema is a database representation of business objects, such as merchants, coupons, products, and categories, whose properties are accessible through an API. In some embodiments, the business objects are store objects (e.g., an instance of a store object is MACY'S) with one or more properties (e.g., store URL, store image, store color, etc.). In some embodiments, the business objects include database tables with data for multiple stores. For example, a database table may contain store information, where each row is an instance of a store object (i.e., each row provides information for a different store) and each column corresponds to a different store object property (e.g., store name, store image, store URL, etc.).

[0016] The mapper module 220 allows users to map design element attributes of UI components to database object attributes without coding via the database service interface 240. For a UI component to display business object data, the UI component must be associated with a business object property. The mapper module 220 eliminates the need for programmers to manually code this association. The mapper module 220 retrieves field properties for fields added to a UI component. The mapper module 220 also retrieves business object properties for business objects. The mapper module 220 allows users to map general field properties to specific business object properties. The mapper module 220 creates associations between UI components and business objects that the content management module 250 and feed generation module 260 use during content selection and feed generation.

[0017] In some embodiments, the types of UI component attributes are already defined in the metadata, so only matching attributes defined in the business object's metadata are available for selection. For example, only ImageURL values ​​from the data schema are allowed for selection of ImageURL type in component values ​​of that type.

[0018] The content management module 250 allows a user to add mapped UI components to a front-end page feed and associate the mapped UI components with instances of database objects. In some embodiments, a user can select one or more UI components from a library of UI components to add to a front-end page feed. The content management module 250 communicates with the mapper module 220 to obtain the library of UI components. For each UI component added to the feed, the content management module 250 allows a user to specify the instance(s) of a business object whose data will be displayed on the front-end page via the UI component. For example, a user can specify a particular storefront whose data will be displayed on the front-end page.

[0019] The feed generation module 260 retrieves instance-specific values ​​of database object attributes of mapped UI components in the front-end page feed. The instance-specific values ​​of a front-end page are retrieved from a database in response to a request for the front-end page by a client application. In some embodiments, a front-end page can have multiple sections, each section containing design (i.e., UI components) and data. The feed generation module 260 retrieves a feed definition from the content management module 250 and then retrieves data from the database 245 via the database service interface 240. Each of the design module 210, the database 245 (via the database service interface 240), the mapper module 220, the content management module 250, and the feed generation module 260 sends metadata (e.g., metadata related to design element attributes, database object attributes, and mappings of design element attributes to database object attributes) to the metadata bus 230, which then sends this metadata to other modules that require this information.

[0020] The metadata bus 230 acts as a central communication service for all other modules (e.g., tools, services, and / or client applications) participating in the system (see, for example, FIG. 9, which illustrates an example system architecture according to one embodiment of the metadata bus). Tools and services that publish metadata do so by registering their metadata updates with the metadata bus 230. Any tool, service, and / or client application interested in any metadata published by a service can subscribe to receive update message notifications or can query the metadata bus 230 for any metadata of interest. By having the metadata bus 230 act as a central communication service, direct point-to-point communication of any metadata producers is eliminated.

[0021] All existing metadata component services fit the traditional service bus definition in that they provide services such as enrichment, transformation, aggregation, mapping, etc. The metadata bus 230 provides a standard way for any service to discover the location and version of any metadata artifact type (e.g., UI metadata, component mapping metadata, theme metadata, token metadata, etc.) without needing to know the exact details of every artifact producer.

[0022] In some embodiments, to enable a user to map design element attributes to database object attributes, mapper module 220 retrieves metadata associated with the design attributes from annotation submodule 215 via metadata bus 230 and retrieves business object metadata (e.g., metadata created for all merchants, coupons, categories, etc.) from database 245 via metadata bus 230. Business objects are entered into database 245 by one or more businesses via database services interface 240. In some embodiments, to enable a user to add mapped UI components to a feed, content management module 250 retrieves the metadata of the mapped UI components from mapper module 220 via metadata bus 230, in which case content management module 250 extracts data for the data object instances from database 245 to enable a user to associate the mapped UI components with database object instances.

[0023] In some embodiments, enabling a user to annotate a UI component with design element attributes includes enabling a user to annotate the UI component with fields, where each field is associated with one or more predefined field properties, and mapping design element attributes to business object attributes includes mapping field properties to business object attributes. In some embodiments, a developer can load predefined field properties into annotation submodule 215 via a configuration tool. For each design "atom" (i.e., the smallest component of a UI component), a developer can select field properties that can be associated with that element during the annotation process.

[0024] 3. Design-to-Publish Front-End Page Generation Process Methodology 3A and 3B illustrate a method for a design-to-publish front-end page generation process. As shown in FIG. 3A and 3B, the system allows a user to design a UI component (step 310). This step is performed by a design module and includes allowing a user to design a UI component (step 310a) and receiving the designed UI component (step 310b).

[0025] The system allows a user to annotate a UI component with design element attributes (step 320). This step is performed by an annotation submodule and includes extracting design tokens for the UI component (step 320a), retrieving predefined design element attributes (step 320b), providing a graphical user interface that allows a user to annotate the UI component with design element attributes without coding (step 320c), receiving the user's annotations for the UI component (step 320d), and generating metadata for the annotated UI component (step 320e), where the metadata describes the design element attributes. In some embodiments, design tokens are a way of representing design decisions or standards in a design system. For example, a design token can represent that text should be set to 14 points or that the background color of a front-end page should be white. Whenever a user creates a UI component, the UI component is associated with one or more design tokens that determine how the UI component is visually rendered. The annotation submodule extracts design tokens and uses them together with predefined design element attributes to annotate UI components with design element attributes enabled through the graphical UI.

[0026] The system retrieves metadata associated with database object attributes of the database object. The system uses the design element attribute metadata and the database object attribute metadata to provide a user interface that allows a user to map each of the design element attributes of a UI component to one of the database object attributes (step 330) without coding. This step is performed by a mapper module and includes obtaining metadata for the design element attributes of the UI component (step 330a), obtaining metadata for the database object attributes (step 330b), determining which database attributes can be mapped to each design element attribute by comparing field types in the obtained metadata (step 330c), providing a graphical user interface that allows a user to map the design element attributes to the database object attributes without coding (step 330d), and receiving and storing the user's mapping of design element attributes to the database object attributes of the UI component (and any associated metadata) (step 330e). In some embodiments, determining which database attributes can be mapped to each design element attribute includes comparing field types with those originally assigned during the annotation step and indicating only matches. In some embodiments, once the system determines which database attributes can be mapped to each design element attribute by comparing field types in the retrieved metadata, the system provides eligible options (i.e., options with eligible field types) in a drop-down menu. In some embodiments, eligibility is defined by matching the type assigned to the design attribute with the type of the business object field in the metadata.

[0027] The system allows a user to add UI components to a front-end page feed and associate the mapped UI components with one or more instances of database objects (step 340). This step is performed by the content management module and includes obtaining mapped UI component data from a mapper module (step 340a), retrieving metadata associated with the database objects from a database (step 340b), providing a user interface that allows the user to add the mapped UI components to a front-end page feed definition and associate each of the mapped components with one or more instances of the database objects (where the one or more instances of the database objects are generated from metadata associated with business objects in the database) (step 340c), and saving the front-end page feed definition (and any associated metadata) (step 340d).

[0028] The system then generates a front-end page (step 350). This step is performed by a feed generation module and includes receiving a request for the front-end page from the client application (step 350a), retrieving a feed definition for the front-end page from the content management module (step 350b), retrieving from the database instance-specific values ​​of the business object attributes mapped to the UI component of the database object instance associated with the UI component in the feed definition (step 350c), inserting the instance-specific values ​​of the business object attributes of the UI component into a front-end page feed, and providing the front-end page feed to the client application (step 350d). In other words, the front-end page feed provided by the feed generation module can compose a final front-end page based on the feed and references to different types of components passed in the feed.

[0029] 4. Screenshots of example user interfaces annotating UI components 4 shows a screenshot of an exemplary graphical user interface for annotating UI components in accordance with the present invention. Those skilled in the art will recognize that the present invention can be embodied in other user interfaces with more or less functionality within the scope of the present invention. Thus, FIG. 4 is intended to be illustrative and in no way limiting. As can be seen in FIG. 4, a user has annotated the node type "Tile Item" with the "Store Logo" field.

[0030] 5. Example screenshots of the user interface for the annotation-to-mapping process 5 shows a screenshot of an exemplary user interface for the annotation-to-mapping process according to the present invention. Those skilled in the art will recognize that the present invention can be embodied in other user interfaces with more or less functionality within the scope of the present invention. Thus, FIG. 5 is intended to be illustrative and not limiting in any way.

[0031] As shown in Figure 5, a user selects a UI component in the Design module. The user annotates the UI component with fields. The user can specify whether the field properties associated with the field are optional. The user can also specify whether the user can override the mapping (performed by the Mapper module) when adding the UI component to a front-end page feed in the Content Management module. The user then maps the field properties to store object properties.

[0032] In some embodiments, when a user selects an option checkbox, the mapper module is not required to create a mapping for the attribute. In such a scenario, if the mapper module creates a mapping, the mapping is displayed, but if the mapper module does not create a mapping, the mapping is not displayed.

[0033] 6. Example screenshots of a user interface showing how to set UI component attributes as overridable in the mapper module. 6 shows a screenshot of an exemplary user interface in which mapping according to the present invention is overridden in a content management module. Those skilled in the art will recognize that the present invention can be embodied in other user interfaces with more or less functionality within the scope of the present invention. Thus, FIG. 6 is intended to be illustrative and not limiting in any way.

[0034] As seen in FIG. 6 , UI component attributes are set to be overridable in the mapper module. When this component is selected in the content management module, the user has the option to replace or override the default business object attribute (e.g., image in this case) with a custom value (e.g., text, image, color, etc.). For example, if the default business object attribute for background is a store image, the user can select the option to override this default with a custom background. In some embodiments, overriding default business object attributes with custom values ​​is global (e.g., for all stores). In some embodiments, overriding default business object attributes with custom values ​​is local (e.g., for a particular store). Overriding is done on a per-mapping basis, such that the mapper module typically pulls certain default fields, but pulls different custom fields due to the override option selected in the content management module.

[0035] 7. Example screenshot of user interface for mapping attributes based on matching types 7A and 7B show screenshots of an exemplary user interface for mapping attributes based on matching types. Those skilled in the art will recognize that the present invention can be embodied in other user interfaces with more or less functionality within the scope of the present invention. Thus, FIGS. 7A and 7B are intended to be illustrative and not limiting in any way.

[0036] As seen in Figure 7A, a user selects a field type for a design element of a UI component, and as seen in Figure 7B, the mapper module uses the type metadata of the UI component attribute to select only business object attributes that have matching type metadata.

[0037] 8. Example screenshots of user interfaces of UI components with instance-specific data 8 illustrates an exemplary user interface screenshot of one or more UI components created using the user interface of FIG. 4 with instance-specific data in accordance with the present invention. Those skilled in the art will recognize that the present invention can be embodied in other user interfaces with more or less functionality within the scope of the present invention. Thus, FIG. 8 is intended to be illustrative and not limiting in any way.

[0038] FIG. 8 illustrates a "Tile Carousel" created and rendered in accordance with the present invention. A user first creates a "Tile Carousel" UI component using the Design module. The "Tile Carousel" contains "Tile Elements," which are rectangular tile templates that do not yet have specific store data. The user uses the Annotation submodule to annotate the tile elements with fields. In this case, the fields have the following field properties: image, alt text, call-to-action URL, and background color. The user uses the Mapper module to map the field properties to "Store" object properties. For example, if the store object properties are store image, store text, store URL, and store color, the mapping is image → store image, alt text → store text, call-to-action URL → store URL, and background color → store color.

[0039] In the content management module, a user adds a "tile carousel" to a feed on a front-end page and selects stores from a list of stores (i.e., THE NORTH FACE, TARGET, TRIPADVISOR, HILTON, and BODEN) to be displayed in the "tile carousel." The feed generation module receives a feed request from a client application, identifies the feed definition from the content management module and the respective values ​​for the selected store (i.e., store image, store text, store URL, and store color), inserts the retrieved values ​​into the feed, and provides the feed to the client application. The client application renders the front-end page with the "tile carousel" in its UI.

[0040] The tile elements in the "Tile Carousel" can be easily changed by changing the mapping. For example, a store object can have multiple image properties, and the image field can be mapped to a different image property. If a user wants to display coupon data using the "Tile Carousel," the field can be mapped to a property of a different object, such as a property of the coupon object.

[0041] 9. General 1-8 are embodied in software and performed by a computer system (comprising one or more computing devices) that executes the software. Those skilled in the art will appreciate that a computer system has one or more memory units, disks, or other physical computer-readable storage media that store software instructions, and one or more processors that execute the software instructions.

[0042] Those skilled in the art will appreciate that the present invention can be embodied in other specific forms without departing from the spirit or essential characteristics thereof. Accordingly, the above disclosure is intended to be illustrative, but not limiting, of the scope of the invention, which is set forth in the appended claims.

Claims

1. A system that provides an end-to-end solution from front-end page generation design to publishing, a design module that allows a user to design UI components; an annotation sub-module in the design module that allows a user to annotate the UI components with design element attributes; a database that stores database objects having database object attributes according to a data schema; a mapper module that allows a user to map design element attributes of the UI component to database object attributes without coding via a graphical user interface; a content management module that enables a user to add mapped UI components to a front-end page feed and associate the mapped UI components with instances of the database object; a feed generation module that retrieves instance-specific values ​​of the database object attributes of mapped UI components in a front-end page feed, the instance-specific values ​​for a front-end page being retrieved from the database in response to a request for the front-end page by a client application; a metadata bus that enables communication among the design module, the database, the mapper module, the content management module, and the feed generation module, including communication of metadata related to the design element attributes, the database object attributes, and the mapping of design element attributes to database object attributes; A system comprising:

2. The system of claim 1 , wherein the annotation sub-module is a software plug-in to the design module.

3. 2. The system of claim 1, wherein enabling a user to annotate UI components with design element attributes includes enabling a user to annotate UI components with fields, each field being associated with one or more predefined field properties, and mapping design element attributes to database object attributes includes mapping field properties to database object attributes.

4. The system of claim 1 , wherein the database object is a business object.

5. The system of claim 4 , wherein the business object comprises a database table having data for multiple stores.

6. 1. A computer system implemented method for enabling front-end page generation from design to publishing, comprising: Enabling a user to design UI components; enabling a user to annotate the UI component with design element attributes; receiving a user's annotations of a UI component; generating metadata for the annotated UI component, the metadata describing the design element attributes; Retrieving metadata associated with database object attributes of the database object; providing a user interface that uses the metadata of the design element attributes and the metadata from the database object attributes to allow a user to map each of the design element attributes of the UI component to one of the database object attributes without coding; receiving the user's mapping of design element attributes to database object attributes of the UI component; enabling a user to add the UI component to a front-end page feed and associate the mapped UI component with one or more instances of the database object; receiving a request for the front-end page from a client application; retrieving from a database instance-specific values ​​of the database object attributes mapped to the UI components; providing the front-end page to the client application along with the instance-specific values ​​of the database object attributes of the UI components; A method comprising:

7. 7. The method of claim 6, wherein enabling a user to annotate UI components with design element attributes includes enabling a user to annotate UI components with fields, each field being associated with one or more predefined field properties, and mapping design element attributes to database object attributes includes mapping field properties to database object attributes.

8. The method of claim 6 , wherein the database object is a business object.

9. The method of claim 8 , wherein the business object comprises a database table having data for multiple stores.

10. 1. A non-transitory computer readable medium containing a computer program that, when executed by a computer system, enables the computer system to perform the following steps to enable front-end page generation from design to publishing, said steps comprising: Enabling a user to design UI components; enabling a user to annotate the UI component with design element attributes; receiving a user's annotations of a UI component; generating metadata for the annotated UI component, the metadata describing the design element attributes; Retrieving metadata associated with database object attributes of the database object; providing a user interface that uses the metadata of the design element attributes and the metadata from the database object attributes to allow a user to map each of the design element attributes of the UI component to one of the database object attributes without coding; receiving the user's mapping of design element attributes to database object attributes of the UI component; enabling a user to add the UI component to a front-end page feed and associate the mapped UI component with one or more instances of the database object; receiving a request for the front-end page from a client application; retrieving from a database instance-specific values ​​of the database object attributes mapped to the UI components; providing the front-end page to the client application along with the instance-specific values ​​of the database object attributes of the UI components; 1. A non-transitory computer-readable medium comprising:

11. 11. The non-transitory computer-readable medium of claim 10, wherein enabling a user to annotate a UI component with design element attributes includes enabling a user to annotate the UI component with fields, each field being associated with one or more predefined field properties, and mapping design element attributes to database object attributes includes mapping field properties to database object attributes.

12. The non-transitory computer-readable medium of claim 10 , wherein the database object is a business object.

13. The non-transitory computer-readable medium of claim 12 , wherein the business object comprises a database table having data for multiple stores.

Images