TW202427184A - Method for supporting front-end development and system thereof - Google Patents

Abstract

There are provided a method for supporting front-end development and a system thereof. The method for supporting front-end development may include obtaining a description code written by a predefined description language and including a definition code of target data, generating a web page handling the target data based on the description code, and reflecting an update of the description code on the generated web page when the update of the description code is sensed. According to such a method, convenience and efficiency of front-end development and maintenance may be significantly improved.

Description

Method and system for supporting front-end development

The present disclosure discloses a method and system for supporting front-end development, and more specifically, discloses a supporting method and a system for executing the method that can improve the convenience and efficiency of development when developing web pages located at the front end.

Web pages related to business processes (e.g., purchase order (PO), product receipt (GR), product delivery (GI), etc.) usually process large amounts of data and each web page processes and manages data of different entities. For example, pages related to purchase order process complex order purchase data (e.g., data of order purchase entity consisting of multiple fields such as ID, supplier name, purchase item, purchase amount, currency unit, transportation means, etc.), and pages related to product receipt process product receipt data.

These web pages are interrelated due to the characteristics of the business process, so the validity of data (i.e., field values) must be checked (because errors in some field values will affect the data of other business processes). Moreover, although these web pages process data of different entities, their appearance and design or functions are similar.

On the other hand, the front-end developers perform page-by-page coding to develop (implement) the plurality of web pages. However, this development method cannot avoid repeatedly developing some functions of the plurality of web pages, which reduces the development efficiency. Moreover, in view of the characteristics of the business process, process changes (for example, adding new processes, deleting existing processes, etc.) and entity changes will occur frequently. At this time, this development method requires the front-end developers to directly modify the relevant web pages, which creates a great burden.

Prior art literature

Patent Literature

Korean Patent No. 10-1884648 (Announced on August 2, 2018)

The technical problem to be solved by some embodiments of the present disclosure is to provide a development support method and a system for executing the method that can improve the convenience and efficiency of front-end development.

Another technical problem that several embodiments of the present disclosure are intended to solve is to provide a development support method and a system for executing the method that can improve the convenience and efficiency of front-end maintenance (management).

Another technical problem that several embodiments of the present disclosure are intended to solve is to provide a method for quickly and correctly developing and managing multiple business process-related web pages that process complex and large data, and a system for executing the method.

The technical issues that the present disclosure is intended to solve are not limited to the technical issues mentioned above. A person with general knowledge in the field to which the present disclosure belongs can clearly understand other issues not mentioned above from the following description.

The front-end development support method of several embodiments of the present disclosure for solving the technical problem is a method executed by at least one computing device, and may include the following steps: obtaining a description code written in a predefined specification language (the description code includes a code defining a field of target data); generating a web page for processing the target data based on the description code; and responding to the perception of an update to the description code by reflecting the update to the generated web page.

In some embodiments, the specification language may be a domain specific language (DSL).

In some embodiments, the description code may include a code defining the properties of at least a portion of the plurality of fields of the target data.

In some embodiments, the description code includes a code defining a validity check logic for values of at least a portion of the multiple fields of the target data, and the generated web page can perform a check based on the validity check logic in response to input of values of at least a portion of the fields.

In some embodiments, the following step may also be included, namely, generating a data management file for the target data based on the description code.

In some embodiments, the data management file may be a file in the form of a spreadsheet.

In some embodiments, the following step may also be included, namely, responding to the perceived update of the description code and reflecting the update to the generated data management file.

In some embodiments, the step of reflecting the update may include the following steps: receiving a commit request for the updated description code; and, responding to the commit request to reflect the updated description code to the generated web page.

In some embodiments, the obtained description code includes a code defining a plurality of fields of a first entity, a plurality of fields of a second entity, and a relationship between the first entity and the second entity, the first entity and the second entity have a one-to-many relationship or a hierarchical relationship, and the webpage generation step may include the following steps: generating a first webpage for processing data of the first entity; and generating a second webpage including a UI element for processing data of the second entity and connected to the first webpage. In this case, the UI element may be an element into which a plurality of data can be inserted.

In some embodiments, the target data is data used in a specific business process within a predefined business process structure, and the web page generation step may include the following steps: mapping the specific business process to the description code; and generating a web page for the specific business process based on the description code.

A development support system of several embodiments of the present disclosure for solving the technical problem includes one or more processors and a memory storing a plurality of instructions. The one or more processors execute the stored plurality of instructions to perform the following actions: obtain description code written in a predefined specification language (the description code includes a code defining fields of target data); generate a web page for processing the target data based on the description code; and, respond to the perception of an update to the description code by reflecting the update to the generated web page.

The computer programs of several embodiments of the present disclosure for solving the technical problems can be stored in a computer-readable storage device so as to be combined with a computing device and execute the following steps: obtaining a description code written in a predefined specification language (the description code includes a code defining a field of target data); generating a web page for processing the target data based on the description code; and responding to the perceived update of the description code and reflecting the update to the generated web page.

According to some embodiments of the present disclosure, a web page for processing data (for example, entity data) can be automatically generated based on a description code containing a field definition code of the data. Thus, front-end developers can develop multiple web pages by only partially modifying the description code, thereby greatly improving the convenience and efficiency of front-end development.

Moreover, whenever the description code is updated, the related web pages can be automatically updated. Therefore, front-end developers do not have to modify the source code of the web pages one by one, which can greatly improve the convenience and efficiency of front-end maintenance.

Furthermore, additional data management files can be generated based on the description code, which can further improve the convenience of data management.

Furthermore, by defining the relationships between entities in description codes, it is possible to easily develop web pages that process data with complex relationships. For example, it is possible to easily develop web pages that process business data with complex relationships.

Moreover, by generating web pages based on the description code, it is easy to develop business process-related web pages with similar functions and features.

The effects brought about by the technical spirit of the present disclosure are not limited to the effects mentioned above, and a person skilled in the art can clearly understand other effects not mentioned above from the following description.

The following is a detailed description of the preferred embodiments of the present disclosure in conjunction with the drawings. In order to make the advantages and features of the present disclosure and its implementation method more obvious, the following is a detailed description in conjunction with the drawings and the embodiments described below. However, these embodiments cannot limit the technical spirit of the present disclosure. The present disclosure can be implemented in a variety of forms. The purpose of these embodiments is to more clearly explain the technical spirit of the present disclosure so that people with general knowledge in the technical field to which the present disclosure belongs can fully understand the scope of the present disclosure. The technical spirit of the present disclosure can only be defined by the scope of the patent application.

When explaining the contents of this disclosure, if it is considered that the relevant description of the known structure or function may confuse the main purpose of the contents of this disclosure, its detailed description will be omitted.

Unless otherwise defined, all terms (including technical or scientific terms) used in the following embodiments have the same meanings as those generally understood by people with general knowledge in the technical field to which the present disclosure belongs, but may vary according to factors such as the intention or convention of technicians engaged in the relevant field or the emergence of new technologies. The terms used in the present disclosure are only for illustrating the embodiments and shall not limit the scope of the present disclosure.

Unless it can be clearly distinguished in the context of the sentence, the singular expressions used in the following embodiments include the concept of "plurality". Moreover, unless it can be clearly distinguished in the context of the sentence, the plural expressions also include the concept of "singularity".

Furthermore, terms such as first, second, A, B, (a), (b) and the like used in the following embodiments are merely used to distinguish a certain component from other components, and the terms do not limit the nature, sequence or order of the components.

Various embodiments of the present disclosure are described below with reference to the drawings.

FIG. 1 is an illustrative diagram for schematically illustrating the operation of the development support system 10 according to some embodiments of the present disclosure.

As shown in the first figure, the development support system 10 of the embodiment can be a device/system/platform having a development support function for a web page (12) located at the front end. For example, the development support system 10 can automatically generate a web page (12) based on a description code (11). In this way, the efficiency and convenience of front-end development can be improved. Depending on the circumstances, the development support system 10 can also be named "development support device/platform", "development device/platform/system", "web development device/platform/system", "front-end development device/platform/system", etc.

More specifically, the development support system 10 receives an input of a description code (11) having a plurality of fields defining specific data and performs operations such as parsing and rendering on the input description code (11) to generate a web page (12). Here, the rendering operation may mean an operation of dynamically generating source code (for example, HTML code) that can realize the web page (12). Depending on the circumstances, the rendering operation may also include interpreting and converting the generated source code into data in a form that can be displayed on a screen. Furthermore, generating the web page (12) may also mean generating the source code of the web page (12) through the former rendering operation, or may further mean performing the latter rendering operation.

The description code (11) may mean a code that defines/sets/describes the data, function, appearance design, etc. of the web page (12). For example, the description code (11) may include a code that defines a plurality of fields of data (i.e., data of a specific entity) processed by the web page (12). The code may be, for example, a code that defines properties of a plurality of fields (for example, ID, value format, editability, field style (for example, drop-down format, etc.), display name, display-related properties (for example, size, color, style of related UI objects/components, etc.)), field value validity check logic (for example, logic for checking value format, range, etc.), etc., but the scope of the present disclosure is not limited to this. As another example, the description code (11) may also include a code that defines the functions of the web page (12) (for example, event handling functions, etc.).

Furthermore, the description code (11) can be written in a predefined specification language, for example, the specification language can be a domain specific language (DSL). Here, a domain specific language (DSL) is a language different from a general language (for example, C language, etc.), and can mean a language designed/defined to achieve the purpose of the domain (i.e., a limited purpose) (for example, SQL is a domain specific language (DSL) designed for purposes such as DB search). Anyone who is a practitioner in this technical field should be familiar with the concept of a domain specific language (DSL), so its detailed description will be omitted below.

Moreover, as an example, the description code (11) may be a code written in JSON (JavaScript Object Notation) format. However, the scope of the present disclosure is not limited thereto. For an example of the description code (11), please refer to FIG. 5.

Depending on the circumstances, the description code (11) may also be referred to as "configuration or setting code", "configuration information", "schema code/information" and the like.

In some embodiments, the development support system 10 can also generate a file (13) for managing the data defined by the description code (11) based on the description code (11). As an example. The data management file (13) can be a spreadsheet-style file (for example, an Excel file) specialized for data management (for example, insertion, deletion, and modification), but the scope of the present disclosure is not limited to this. For example, the development support system 10 can generate an Excel file (13) from the description code (11) using a rendering module that implements the Excel file generation function (for example, a module implemented in Java, etc.). However, the scope of the present disclosure is not limited to this. According to a plurality of embodiments of the present invention, additional data management files (13) are further generated to further improve the convenience of data management.

Furthermore, in some embodiments, as shown in FIG. 2, the development support system 10 responds to the perceived update of the description code (21) and can automatically reflect the update to the related web page (22) and the data management file (23). This can greatly reduce the cost of maintaining the web page (22), and the front-end developer can be freed from the burden of modifying the web page (22) one by one. A plurality of embodiments of the present invention will be described in more detail later in conjunction with the diagrams from FIG. 4 onwards.

Furthermore, in some embodiments, as shown in FIG. 3 , the development support system 10 can respond to the perceived update of the data management file (33) (for example, the addition of data, the addition of a field, etc.) and reflect the update to the relevant web page (32). Alternatively, the development support system 10 can also respond to the perceived update of the web page (32) (for example, the addition of data, the addition of a field, etc.) and reflect the update to the relevant data management file (33). Alternatively, the development support system 10 can also respond to the perceived update of the data management file (33) (for example, the addition of a field, etc.) and reflect the update to the relevant description code (31). This can significantly reduce the cost of front-end maintenance. A plurality of the above-mentioned embodiments will be further described below in conjunction with FIG. 10 .

The detailed operations and functions of the development support system 10 will be described in more detail later with reference to the fourth and subsequent figures.

The development support system 10 can be implemented by at least one computing device. For example, all functions of the development support system 10 can be implemented on one computing device, or a first function of the development support system 10 can be implemented on a first computing device and a second function can be implemented on a second computing device. Alternatively, a specific function of the development support system 10 can also be implemented on multiple computing devices.

The computing device may include any device with computing functions. For an example of such a device, please refer to FIG. 12. The computing device is a collection of various elements (for example, memory, processor, etc.) interacting with each other, so it may also be named as a "computing system" according to the circumstances. Of course, the term "computing system" may also include the meaning of a collection of multiple computing devices interacting with each other.

The above text has briefly described the operation of the development support system 10 of several embodiments of the present disclosure in conjunction with the first to third figures. Various methods that can be executed in the development support system 10 will be described below in conjunction with the fourth figure and subsequent figures.

For ease of understanding, the following description assumes that all steps/actions of the method described below are executed by the development support system 10. Therefore, if the main body of a specific step/action is omitted, it can be understood that it is executed by the development support system 10. However, in an actual environment, the specific steps/actions of the method described below can also be executed by other computing devices.

FIG. 4 is an illustrative flow chart of a front-end development support method for several embodiments of the present disclosure. However, it is only a preferred embodiment for achieving the purpose of the present disclosure, and some steps may be added or deleted as needed.

As shown in FIG. 4 , the method of the embodiment can start at step S41 of obtaining description codes written in a predefined specification language. For example, the development support system 10 can receive input of description codes written in a domain-specific language (DSL) from a front-end developer. The input description codes can be stored in the development support system 10 or registered in the development support system 10. As mentioned above, the description code may include code that defines the properties of multiple fields of the data processed by the web page (i.e., data of a specific entity) (for example, ID, value form, editable or not, display name, display-related properties (for example, size, color, related UI objects/components, etc.)), field value validity check logic (for example, logic for checking the value form, range, etc.), etc.

Figure 5 shows an example of a description code. Figure 5 shows an example of a description code (51) written in JSON format.

As shown in the fifth figure, the description code (51) may include codes that define multiple fields that constitute a specific entity (for example, "partnered", "SKU ID", etc.). Specifically, the description code (51) may include codes that define field attributes such as ID (please see "id"), value format (please see "type"), display name (please see "displayName"), and field value validity check logic ("validations"). Front-end developers use domain-specific languages (DSL) to encode the data processed by the web page, the functions of the web page, the appearance design of the web page, etc. to generate the description code (51). Based on this, web pages that process data with complex structure/format (for example, data of entities with a large number of fields) can also be easily generated.

The following is explained with reference to the fourth figure.

In step S42, a web page can be generated based on the description code. For example, the development support system 10 can generate the source code (document) of the web page from the description code through a rendering module (or generation module) that implements the web page generation function. Here, the rendering module can be implemented in a manner that the description code written in a specific domain language (DSL) is interpreted and the source code (for example, HTML code) of the web page is automatically generated, but it can be implemented in any form.

The development support system 10 can generate one web page based on one description code, or can generate multiple web pages (for example, one description code includes codes related to multiple web pages).

The sixth figure shows an example of a generated web page. The sixth figure illustrates the final rendering result of the web page source code generated by the description code (51) of the fifth figure for ease of understanding.

As shown in FIG. 6 , the generated web page (61) may include a UI element (62) for processing a plurality of fields defined by the description code (51) (i.e., the source code of the UI element 62 is included in the source code of the web page 62). For example, the web page (61) may be generated in a manner including a UI element (62, for example, a list element) for receiving or displaying the values of a plurality of fields (i.e., entities) defined by the description code (51). At this time, the field name defined by the description code (51), whether the field value is editable, the validity check logic, the style of the UI element (62), etc. can also be reflected as is when the web page (61) is generated (for example, the web page 61 executes the validity check logic each time a field value is entered). For example, when the editing attribute of a specific field in the description code (51) (for example, see "editable" in FIG. 5) is set to "editable", the web page (61) can be generated in a form in which the value of the field can be input and modified. If it is the opposite, the web page (61) can be generated in a form in which the value of the field can only be displayed.

Depending on the situation, the generated web page (61) may also include a key element (63) for generating a data management file. In this case, if the user's input is received through the key element (63), the development support system 10 can refer to the description code (51) to generate a file (for example, a spreadsheet file) for more conveniently managing the web page (61) data. This point will be further explained later.

Next, we will explain it with reference to the fourth figure.

In step S43, additional data management files can be generated based on the description code. For example, the development support system 10 can generate a data management file in the form of a spreadsheet based on the description code. At this time, the development support system 10 can also add the data input to the web page (i.e., a plurality of data instances or records) to the data management file with reference to the web page generated from the description code.

As a more specific example, the development support system 10 can generate an Excel file from the description code through a rendering module (or generation module) that implements an Excel file generation function (for example, an Excel export function). At this time, the multiple fields defined by the description code can be generated as fields (for example, columns) of the Excel file, and the properties and validity check logic of the multiple fields defined by the description code can also be reflected in the Excel file. As an example, the rendering module can be implemented in a language such as Java, but the scope of the present disclosure is not limited to this, and it can be implemented in any way.

Figure 7 shows an example of the generated data management file. Figure 7 shows an example of generating an Excel file (71) from the description code (51) of Figure 5 for easy understanding.

As shown in FIG. 7 , the generated data management file (71) may include a plurality of fields (72) defined by the description code (51), and the display name of each field defined by the description code (51) may be used as the field name (item name) of the data management file (71). At this time, the validity check logic defined by the description code (51) can also be reflected in the data management file (71) unchanged (for example, the data management file 71 executes the validity check logic every time a field value is entered. Not only that, the attribute value of the field defined by the description code (51) can also be reflected unchanged when the data management file (71) is generated. For example, the description code When the editing attribute of a specific field in the code (51) (for example, see "editable" in the fifth figure) is set to "non-editable", a data management file (71) can be generated with the field set to a non-editable state (for example, the cell (CELL) of the field can be set in Excel file 71 to not be editable and displayed in gray).

Next, we will explain it with reference to the fourth figure.

In step S44, the update of the description code is sensed and automatically reflected to the related multiple web pages and data management files. This can greatly improve the efficiency and convenience of front-end development and maintenance. For example, front-end developers do not need to search for web page source codes one by one and modify them every time a modification occurs, which can greatly improve the convenience of front-end development and greatly reduce the cost of front-end maintenance.

For example, the development support system 10 can respond to the occurrence of an update event and reflect the update to multiple related web pages and data management files (i.e., update the existing web pages and data management files). The update event may be preset to occur whenever the description code is updated. The development support system 10 can regenerate the web pages and data management files based on the updated description code, but the scope of the present disclosure is not limited to this, and the update reflection method can be changed according to the situation.

Furthermore, if there are a plurality of web pages associated with the description code, the development support system 10 can uniformly reflect the update of the description code on the plurality of web pages.

The form of the update can be varied, such as adding/deleting/modifying fields, adding/deleting/modifying field attributes, adding/deleting/modifying validation logic, etc., but any form is acceptable.

In some embodiments, the development support system 10 can perform version management for the registered description code. In this case, the development support system 10 can perform the above actions in response to a received commit request for the updated description code. Specifically, the development support system 10 can update the version of the description code according to the commit request and automatically reflect the update of the description code to the relevant web pages and data management files.

The foregoing text, in conjunction with Figures 4 to 7, illustrates a front-end development support method for several embodiments of the present disclosure. According to the foregoing content, a web page for processing the data can be automatically generated based on a description code containing a field definition code of the data (for example, entity data). Accordingly, a front-end developer can develop multiple web pages by only partially modifying the description code, thereby greatly improving the convenience and efficiency of front-end development. Moreover, whenever the description code is updated, the related web pages can be automatically updated. Accordingly, the front-end developer does not have to modify the source code of the web page one by one, thereby greatly improving the convenience and efficiency of front-end maintenance.

The following describes a method for generating a web page for processing data of multiple entities having a one-to-many (or hierarchical) relationship according to several embodiments of the present disclosure.

When developing web pages that process entity data with complex structures, it is common for multiple entities to have a one-to-many or hierarchical relationship. For example, when developing web pages related to business processes, the entity data (for example, the Order Purchase (PO) entity) processed by the upper process (for example, the Order Purchase (PO) process) in the predefined business process structure and the entity data (for example, the Order Purchase (PO) SKU entity) processed by the lower process (for example, the Order Purchase (PO) SKU process) usually have a one-to-many or hierarchical relationship.

In the above-mentioned situation, by adding codes that define the relationship between entities to the description code, it is possible to easily develop multiple web pages that process entity data with complex structures. The following is a further explanation in conjunction with Figures 8 and 9.

As shown in FIG. 8 , it is assumed that a plurality of fields of a first entity are defined in a first description code (81) and a plurality of fields of a second entity are defined in a second description code (82), and further, it is assumed that a relationship between the two entities (i.e., a one-to-many or a hierarchical relationship) is also defined in the first description code (81) and/or the second description code (82).

Here, the first description code (81) and the second description code (82) may mean different codes in one code document or different code documents. Furthermore, defining a relationship between a plurality of entities in a description code may mean the existence of a code defining the relationship or may mean that the pattern of the first description code is preset to the purpose of the first entity and the pattern of the second description code is preset to the purpose of the second entity (for example, a parent-child domain specific language (DSL)).

In this case, the development support system 10 can generate a first web page (83) including a first UI element (84) for processing data of a first entity based on a first description code (81) and a second web page (85) including a UI element (86) for processing data of a second entity based on a second description code (82). At this time, the first web page (83) and the second web page (85) can be connected unidirectionally or mutually. That is, the first web page (83) can have a built-in link that can move to the second web page (85). Moreover, the second UI element (86) can be an element that can process data of a second entity with a cardinality of "N". For example, a list element (see 86) that can insert/display multiple data (i.e., data instances or records) can be used as the second UI element (86).

Alternatively, the development support system 10 can also generate a web page including a first UI component (for example, 84) for processing data of the first entity and a second UI component (for example, 86) for processing data of the second entity based on the two description codes (81, 82).

FIG. 9 illustrates a web page (91) generated by the development support system 10 according to the aforementioned content. FIG. 9 also illustrates the final rendering result of the generated web page source code for easier understanding, and illustrates a situation where the first entity and the second entity having a one-to-many or hierarchical relationship are a purchase order (PO) entity and a purchase order minimum stock keeping unit (SKU) entity.

As shown in FIG. 9, the development support system 10 can generate a web page (91) including a first UI component (92) for processing data of a first entity and a second UI component (93) for processing data of a second entity using the description code. Furthermore, the development support system 10 can use a list component as the second UI component (93) in order to process data of a second entity whose cardinality is "N".

The above text, in conjunction with Figures 8 and 9, illustrates a web page generation method for processing data of multiple entities with a one-to-many (or hierarchical) relationship according to several embodiments of the present disclosure. The following text, in conjunction with Figure 10, illustrates a synchronization method between a web page and a data management file according to several embodiments of the present disclosure.

As shown in FIG. 10 , the development support system 10 can synchronize the web page (101) and the data management file (103) that process the same data (see 102 and 104). For example, when the web page (101) is updated, the development support system 10 can reflect the updated information in the data management file (103), and when the data management file (103) is updated, the update information can be reflected in the web page (101). Depending on the situation, the development support system 10 can also reflect the updated information of the web page (101) and/or the data management file (103) in the relevant description code.

As a more specific example, suppose that data (i.e., data instance or record) is added/deleted/changed or a field is added/deleted/changed in the UI element of the web page (101). In this case, an update event for the web page (101) may occur, and the development support system 10 can respond to the occurrence of the update event and reflect the update of the web page (101) to the data management file (103). As a result, it is not necessary to manually update the data management file (103) every time, and as a result, the efficiency and convenience of front-end maintenance can be greatly improved.

The above text, in conjunction with FIG. 10 , illustrates a method for synchronizing a web page with a data management file according to several embodiments of the present disclosure.

The following will be combined with Figure 11 to illustrate the operational examples of the front-end development support method of several embodiments of the content disclosed herein.

As shown in FIG. 11 , the front-end development support method may be used to generate web pages and data management files associated with a plurality of processes (eg, 111 to 113 ) within a predefined business process structure.

Specifically, the development support system 10 receives an input of a description code (for example, a code of data related to the process written in a domain-specific language (DSL), see 114 to 116) related to a specific business process (for example, 111 to 113) from a developer and maps the input description code (for example, 114 to 116) to the related business process (for example, 111 to 113) and registers it (for example, mapping the ID of the business process with the ID of the description code). Furthermore, the development support system 10 can generate web pages related to the business process (for example, 111 to 113) based on the input description codes (for example, 114 to 116), and whenever the description codes (for example, 114 to 116) are updated, the update can be automatically reflected in the related web pages. Thus, web pages related to the business process can be easily developed, and changes in the business process can be quickly and accurately reflected in the web pages.

In some embodiments, the development support system 10 can sense that a new business process has been added to the business process structure (see FIG. 11). For example, the development support system 10 can sense it by receiving an event that occurs each time a new business process is added. Furthermore, the development support system 10 can determine the business process related to the new business process and provide the description code mapped to the determined business process to the developer of the new business process (for example, a developer registered in the company's internal system). Furthermore, if an input of a description code for the new business process is received from the developer, the development support system 10 can generate a web page for the new business process based on the input description code. According to a plurality of the present embodiments, developers can quickly and correctly write description codes for new business processes based on description codes for related business processes, and as a result, can quickly and correctly develop new business process-related web pages.

In the foregoing embodiments, the description codes to be provided to relevant business processes or developers may be determined in various ways.

For example, the development support system 10 can determine the related business processes based on the connection relationship and distance between the new business process and the business process structure. More specifically, the development support system 10 can determine as the related business processes a plurality of business processes connected to the new business process or a plurality of business processes whose distance between the new business process and the business process structure is less than a baseline value.

As another example, the development support system 10 can obtain the first description code mapped to the relevant business process based on the previous example. Moreover, the development support system 10 can further obtain the second description code based on the similarity with the first description code and provide the first description code and the second description code to the developer. As an example, the second description code is a code that defines entities related to the first description code in the registered description code (for example, entities with common fields, other entities connected to the entity of the first description code, entities with common keywords between entity names, etc.), a code that defines the same or similar validity verification logic, a code that defines the same or similar UI elements, a code that defines the same or similar appearance design, etc. However, it is not limited to this.

The above-mentioned application examples of the front-end development support method of several embodiments of the present disclosure are described in conjunction with Fig. 11. According to the above-mentioned contents, business process-related web pages with similar functions and characteristics can be easily developed through the development support system 10.

The following will be combined with FIG. 12 to illustrate an exemplary computing device 120 of the development support system 10 that can implement several embodiments of the present disclosure.

FIG. 12 is a diagram showing an exemplary hardware configuration of the computing device 120.

As shown in FIG. 12, the computing device 120 may include one or more processors 121, a bus 123, a communication interface 124, a memory 122 for loading a computer program executed by the processor 121, and a storage device 127 for storing a computer program 126. However, FIG. 12 only shows the elements related to the implementation example of the present disclosure. Therefore, a person of ordinary skill in the art to which the present disclosure belongs should know that other general-purpose elements may be included in addition to the elements shown in FIG. 12. That is, the computing device 120 may include various other elements in addition to the elements shown in FIG. 12. Moreover, the computing device 120 may also be configured in a form in which a part of the elements shown in FIG. 12 is omitted as needed. The elements of the computing device 120 are described below.

The processor 121 can control the overall operation of each element of the computing device 120. The processor 121 can include at least one of a CPU (Central Processing Unit), an MPU (Micro Processor Unit), an MCU (Micro Controller Unit), a GPU (Graphic Processing Unit), an NPU (Neural Processing Unit), or any other processor known in the art of the present disclosure. Moreover, the processor 121 can operate on at least one application or program for executing the actions/methods of the embodiments of the present disclosure. The computing device 120 can have more than one processor.

Then, the memory 122 can store various data, instructions and/or information. The memory 122 can load the computer program 126 from the storage device 127 to execute the actions/methods of the embodiments of the present disclosure. The memory 122 can be implemented as a volatile memory such as RAM, but the technical scope of the present disclosure is not limited thereto.

Next, the bus 123 can provide communication functions between the elements of the computing device 120. The bus 123 can be implemented in various forms of buses such as an address bus, a data bus, and a control bus.

Next, the communication interface 124 can support the wired or wireless Internet communication of the computing device 120. Moreover, the communication interface 124 can also support various communication methods other than Internet communication. To this end, the communication interface 124 can include a communication module structure known in the technical field of the present disclosure.

Next, the storage device 127 can store one or more computer programs 126 non-temporarily. The storage device 127 can include non-volatile memory such as ROM (Read Only Memory), EPROM (Erasable Programmable ROM), EEPROM (Electrically Erasable Programmable ROM), flash memory, and hard disk, removable hard disk, or any form of computer readable storage device known in the technical field described in the present disclosure.

Next, when the computer program 126 is loaded into the memory 122, it may include one or more instructions that drive the processor 121 to execute the actions/methods of various embodiments of the present disclosure. That is, the processor 121 executes the one or more loaded instructions to execute the actions/methods of various embodiments of the present disclosure.

For example, the computer program 126 may include instructions for executing the following actions: obtaining description code written in a predefined specification language and including definition code of target data, generating a web page for processing target data based on the description code, and responding to perceived updates of the description code by reflecting the updates to the generated web page. In this case, the development support system 10 of several embodiments of the present disclosure can be implemented through the computing device 120.

On the other hand, in some embodiments, the computing device 120 shown in FIG. 12 may also mean a virtual machine implemented based on cloud technology. For example, the computing device 120 may be a virtual machine operating on one or more physical servers contained in a server farm. In this case, at least a portion of the processor 121, the memory 122, and the storage device 127 shown in FIG. 12 may be virtual hardware, and the communication interface 124 may also be implemented by virtualized networking elements such as a virtual switch.

The foregoing text, in conjunction with FIG. 12 , illustrates an exemplary computing device 120 of the development support system 10 that can implement several embodiments of the present disclosure.

The above text describes various embodiments of the present disclosure and the effects of these embodiments in conjunction with the first to twelfth figures. The effects caused by the technical spirit of the present disclosure are not limited to the effects mentioned above, and ordinary technical personnel can clearly understand other effects not mentioned above from the description of this specification.

Moreover, in the above-mentioned embodiments, the technical spirit of the present disclosure should not be limited to the embodiments just because a plurality of elements are described as being combined into one or a combined action. In other words, as long as it is within the scope of the purpose of the technical spirit of the present disclosure, all elements can also be selectively combined into one or more subsequent actions.

The technical spirit of the present disclosure described above can be implemented in a computer-readable program code on a computer-readable medium. The computer program stored in the computer-readable storage device can be transmitted to other computing devices through a network such as the Internet and then installed in the other computing devices, so that it can be used in the other computing devices.

In the drawings, actions are shown in a particular order, but it should not be interpreted that the actions must be performed in the particular order shown or in sequence, or that all the actions shown must be performed to obtain the desired results. In certain circumstances, multiple processing and parallel processing may be more advantageous.

The foregoing text describes various embodiments of the present disclosure in conjunction with the drawings, but a person of ordinary skill in the art to which the present disclosure belongs should know that the present invention may have other various specific embodiments without changing its technical spirit or essential features. Therefore, the embodiments described in the foregoing text should be interpreted in all aspects as merely illustrative and non-limiting. The scope of protection of the present disclosure should be interpreted according to the scope of the patent application, and all technical spirits within the equivalent scope should be interpreted as the scope of rights included in the technical spirit defined in the present disclosure.

10: Development support system

11, 21, 31, 51, 81, 82, 114, 115, 116: Description code

12, 22, 32, 61, 83, 85, 91, 101: Web pages

13, 23, 33, 103: Data management files

S41, S42, S43, S44: Steps

62, 84, 86, 92, 93: UI components

63: Button components

71:Excel file

102, 104: Synchronize related data

111, 112, 113: Business Process

120: Computing device

121:Processor

122: Storage

123: Bus

124: Communication interface

125: Storage device

126: Computer Programs

FIG. 1 to FIG. 3 are exemplary diagrams for schematically illustrating the operation of the development support system according to some embodiments of the present disclosure.

FIG. 4 is an illustrative flowchart of a front-end development support method showing several embodiments of the present disclosure.

FIG5 shows an example of description codes to which several embodiments of the present disclosure may refer.

FIG. 6 illustrates a web page that can be generated using the description code shown in FIG. 5 .

FIG. 7 illustrates an example of a data management file that can be generated by the description code shown in FIG. 5 .

FIG. 8 and FIG. 9 are exemplary diagrams for illustrating a method for generating a plurality of web pages for processing entity data having a one-to-many (or hierarchical) relationship according to some embodiments of the present disclosure.

FIG. 10 is an exemplary diagram for illustrating a synchronization method between a web page and a data management file according to some embodiments of the present disclosure.

FIG. 11 is an illustrative diagram of an example of an operation of a front-end development support method for illustrating several embodiments of the present disclosure.

FIG. 12 illustrates an exemplary computing device of a development support system that may implement several embodiments of the disclosed content.

S41, S42, S43, S44: Steps

Claims (16)

A front-end development support method, which is executed by at least one computing device, comprises the following steps: Obtaining a description code written in a predefined specification language (the description code includes a code defining a field of target data); Generating a web page for processing the target data based on the description code; and, Responding to the perception of an update of the description code and reflecting the update to the generated web page. The front-end development support method of claim 1 is characterized in that the specification language is a domain specific language (DSL). The front-end development support method of claim 1 is characterized in that, the description code includes a code defining the attributes of at least a portion of the multiple fields of the target data. The front-end development support method of claim 1 is characterized in that, the description code includes a code defining the validity check logic for the values of at least a portion of the multiple fields of the target data, the generated web page performs a check based on the validity check logic in response to the input of the values of at least a portion of the fields. The front-end development support method of claim 1 is characterized in that it also includes the following steps, namely, generating a data management file for the target data based on the description code. The front-end development support method of claim 5 is characterized in that the data management file is a file in the form of a spreadsheet. The front-end development support method of claim 5 is characterized in that it also includes the following steps, namely, responding to the perceived update of the description code and reflecting the update to the generated data management file. The front-end development support method of claim 5 is characterized in that, the update of the description code is a first update, and further includes the following steps: responding to the perception of a second update of the data management file and reflecting the second update to the generated web page. The front-end development support method of claim 1 is characterized in that, the web pages are multiple, the update of the description code is reflected in all the multiple web pages. The front-end development support method of claim 1 is characterized in that, the step of reflecting the update includes the following steps: receiving a commit request for the updated description code; and, responding to the commit request and reflecting the updated description code to the generated web page. The front-end development support method of claim 1 is characterized in that, the obtained description code includes a code defining a plurality of fields of a first entity, a plurality of fields of a second entity, and a relationship between the first entity and the second entity, the first entity and the second entity have a one-to-many relationship or a hierarchical relationship, the web page generation step includes the following steps: generating a first web page for processing data of the first entity; and, generating a second web page including a UI element for processing data of the second entity and connected to the first web page; the UI element is an element into which a plurality of data can be inserted. The front-end development support method of claim 1 is characterized in that, the obtained description code includes a code defining a plurality of fields of a first entity, a plurality of fields of a second entity, and a relationship between the first entity and the second entity, the first entity and the second entity have a one-to-many relationship or a hierarchical relationship, the web page generation step includes the following steps: generating a web page including a first UI element for processing data of the first entity and a second UI element for processing data of the second entity; the second UI element is an element into which a plurality of data can be inserted. The front-end development support method of claim 1 is characterized in that, the target data is data used in a specific business process within a predefined business process structure, the web page generation step includes the following steps: mapping the specific business process to the description code; and, generating a web page for the specific business process based on the description code. The front-end development support method of claim 13 is characterized in that, it also includes the following steps: sensing the addition of a new business process in the business process structure; responding to the sensing and determining a business process related to the new business process (the related business process is determined based on the connection relationship and distance between the new business process and the business process structure); providing a description code corresponding to the determined business process to the developer of the new business process; obtaining a new description code for the new business process from the developer; and, generating a web page for the new business process based on the new description code. A development support system, characterized in that, it includes one or more processors and a memory storing a plurality of instructions, the one or more processors execute the stored plurality of instructions to perform the following actions: obtain a description code written in a predefined specification language (the description code includes a code defining a field of target data), generate a web page for processing the target data based on the description code; and, respond to the perception of an update to the description code and reflect the update to the generated web page. A computer program characterized by being stored in a computer-readable storage device so as to be combined with a computing device and executing the following steps, obtaining a description code written in a predefined specification language (the description code includes a code defining a field of target data); generating a web page for processing the target data based on the description code; and, responding to the perception of an update to the description code and reflecting the update to the generated web page.

Images