KR102152136B1 - Apparatus and Method for creating web application - Google Patents

Abstract

The present invention relates to an apparatus and method for creating a web app, and more particularly, a code generation rule definition unit that defines a code generation rule including at least one of a directory, a file name, a file type, and a calling function to be called to create a file. , A web app code generator that defines a page structure for a web application, and generates a static component file or a dynamic component file for each page using the code generation rule.

Description

Apparatus and Method for creating web application}

The present invention relates to an apparatus and method for generating a web app, and more particularly, to define a page structure for a web application, and use a predefined code generation rule to create a static component file and a dynamic component file corresponding to each page. It relates to a web app generating device and method for generating a web application by generating.

The increasingly common Internet culture is constantly demanding broader and faster evolving web applications. The development direction of these web applications can be divided into researching innovative programming languages or coding techniques that meet new needs, and researching methods to make more effective use of currently used programming languages or coding techniques. In addition, the development trend of such web applications is also being divided into a method of using a scripting language executed on the web server side and a method of using a scripting language independently executed on the web client side.

Meanwhile, the authored product in the conventional web-based authoring environment is not composed of dynamic elements, but mainly composed of static elements such as HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). However, as web technology has gradually developed, not only static components but also dynamic components (pages, event handling, widgets, etc.) are required more in a web-based authoring environment. In the case of having a lot of dynamic components, JS (JavaScript) is required a lot, which is different from the existing method.

As such, dynamic components of web applications require a lot of JS code, and because JS works closely with events, based on events, we analyze in advance when dynamic elements are needed to analyze the results of web applications and widgets. Need to reflect.

Prior Art 1: Korean Patent Registration No. 1,161,946 (published on September 30, 2011)

The present invention is to solve the above-described conventional problem, and provides a web app generating device and method capable of developing a web application including a large number of dynamic components or a result including widgets in a web-based authoring environment. There is a purpose.

Another object of the present invention is to provide a web app generating device reflecting dynamic components such as web-based pages, events, and widgets, so that the basic concept can be used in a writing and editing environment where code generation is required. It is to provide a device and method for creating a web app.

According to an aspect of the present invention for solving the above-described problem, a code generation rule definition unit defining a code generation rule including at least one of a directory, a file name, a file type, and a calling function to be called to generate a file, a web There is provided a web app generation device including a web app code generator that defines a page structure for an application and generates a static component file or a dynamic component file for each page using the code generation rule.

The calling function may be a function that accesses a data structure of a web application and generates a returned result value with a corresponding code.

The web app code generation unit is a page structure definition module that defines a page structure constituting a web application, and the logic of a static component file or a dynamic component file for each page defined in the page structure definition module using the code generation rule A component file generation module that implements and generates the returned result value as a code by calling the calling function of the implemented logic, and stores the generated code in the corresponding directory as the file name and file type defined in the logic. Can include.

The logic may include at least one of a directory, a file name, a file type, and a call function.

According to another aspect of the present invention, in a method for generating a web app by a web app generating device, defining a page structure for a web application, static for each page defined using a predefined code generation rule A method of creating a web app including generating a component file or a dynamic component file is provided.

The web app creation method may further include defining a code generation rule including at least one of a directory, a file name, a file type, and a calling function to be called to create a file.

The step of generating a static component file or a dynamic component file for each page defined using the predefined code generation rule includes: a static component file for each page defined using the code generation rule Or implementing the logic of a dynamic component file, generating a returned result value as a code by calling a calling function of the implemented logic, and converting the generated code into a file name and file type defined in the logic It may include the step of storing in.

According to another aspect of the present invention, when executed by a web app generating device, defining a page structure for a web application, a static component file for each page defined using a predefined code generation rule, or A method of generating a web app including the step of generating a dynamic component file is recorded as a program and a recording medium readable by an electronic device is provided.

According to the present invention, by providing a web app generating device in which dynamic elements such as web-based pages, events, and widgets are reflected, it can be usefully utilized by using a basic concept in a writing and editing environment requiring code generation.

In addition, if an application is created with web technology, it is compatible and highly reusable without being dependent on a specific platform (iOS, Android) or device (PC, tablet, smart phone).

In addition, in order to create a web application, page composition, event processing, and widget addition are essential. A web application can be easily developed through a code generating device.

1 is a block diagram schematically showing the configuration of a web app generating apparatus according to an embodiment of the present invention.
Figure 2 is a block diagram showing in detail the configuration of the web code generation unit shown in Figure 1;
3 is a flowchart illustrating a method of generating a web application code according to an embodiment of the present invention.
4 is an exemplary view of a page structure of a web application according to an embodiment of the present invention.
5 is an exemplary view of a data structure for explaining a method for generating a code using a calling function according to an embodiment of the present invention.

Details of the above-described objects and technical configurations of the present invention, as well as operational effects thereof, will be more clearly understood by the following detailed description based on the accompanying drawings in the specification of the present invention.

The app described below is an abbreviation of application, and for convenience of description, an app and an application are used in combination.

1 is a block diagram schematically showing the configuration of a web app generating device according to an embodiment of the present invention, and FIG. 2 is a block diagram showing in detail the configuration of a web code generating unit shown in FIG. 1.

Referring to FIG. 1, the web app generation device 100 includes a code generation rule definition unit 110 and a web app code generation unit 120.

The code generation rule definition unit 110 defines a code generation rule including a directory in which each file is to be generated, a file name, a file type, and a calling function to be called to generate a file. Here, the directory may be a place where the generated files are to be stored, and the file name may be the name of the generated file. The file type may be a file type selected by a user such as js or html. The calling function may be a function that accesses the data structure of a web application and generates the returned result value as a corresponding code (content, string).

The code generation rule defined by the code generation rule definition unit 110 may be stored in the form of a template.

The web app code generation unit 120 defines a page structure for a web application, and uses a code generation rule defined in the code generation rule definition unit 110 to provide a static component file and a dynamic component file corresponding to each page. Create Here, the static component may include HTML, CSS, and the like, and the dynamic component is an element that dynamically operates such as a page, an event, and a widget, and may include, for example, JS.

Referring to FIG. 2 for the web app code generation unit 120, the web app code generation unit 120 includes a page structure definition module 122 and a component file generation module 124.

The page structure definition module 122 defines a page structure including static components or dynamic components of pages constituting a web application. For example, you can define a web application consisting of a total of 4 pages: main, view, comment, and mypage.

The component file generation module 124 generates a static component file or a dynamic component file corresponding to each page by using a code generation rule. That is, the component file generation module 124 implements the logic of a static component file or a dynamic component file for each page defined in the page structure definition module 122 using code generation rules, and The result value returned by calling the calling function is generated as code (contents, character string), and the generated code is stored in the corresponding directory as the file name and file type defined in the above logic.

For example, in the case of a web application consisting of 4 pages in total, main, view, comment, and mypage, the component file generation module 124 creates a static component file or a dynamic component file of the main page, and the static component of the view page Create file or dynamic component file, create static component file or dynamic component file of comment page, create static component file or dynamic component file of mypage page. At this time, the component file generation module 124 creates a static component file or a dynamic component file of each page as a file type defined in each page, and stores the generated files in a corresponding directory as a file name defined in each page. do.

For example, "commonJs: {

directory: "js",

filename: "common.js",

type: "js",

generator: generateCommonJs

}" will be described. In this case, the component file generation module 124 calls the'generateCommonJs' function to generate the returned result value as code (contents, string), and , Create a js (Javascript) type file'common.js' in the'js' directory and add the generated code to the'js/commom.js' file.

3 is a flowchart showing a method of generating a web application code according to an embodiment of the present invention, FIG. 4 is an exemplary view of a page structure of a web application according to an embodiment of the present invention, and FIG. 5 is a code generation rule according to an embodiment of the present invention. It is a diagram for explaining a method of generating a code by using the calling function included in.

Referring to FIG. 3, the web app generating device defines page structure information for a web application to be authored (S302). That is, the developer can define the page structure of the web application to be authored in the form as shown in FIG. 4.

4 shows the structure of a code generated in the case of a web application composed of four pages, main, view, comment, and mypage.

Referring to FIG. 4, there are html files, js files, and common.js files for each of main, view, comment, and mypage in a web application. Here, common.js contains JS code that is commonly needed in all pages. Codes commonly required in all pages are defined in parts that are commonly applied to all pages, such as a code required for size conversion when switching to a horizontal/vertical screen, and a code required for switching to an initial screen. The Html file can be a static component file, and the js file can be a dynamic component file. The web app creation device creates html and js files for each of the four pages: main, view, comment, and mypage. Therefore, main.html and main.js constitute the main page, view.html and view.js constitute the view page, comment.html and comment.js constitute the comment page, mypage.html and mypage.js Can compose the mypage page.

When the page structure information for the web application is defined, the web app generating device implements the logic of a static component file or a dynamic component file corresponding to each page using a code generation rule (S304). In other words, each page has html and js files, and the logic for creating html and js files is different, so the logic for creating them must be implemented separately.

For example, the web app generating device may define logic for generating a static component file and a dynamic component file as follows. Here, the static component file may be an html file, and the dynamic component file may be a js file.

{

commonJs: {

directory: "js",

filename: "common.js",

type: "js",

generator: generateCommonJs

},

mainHtml: {

directory: "",

filename: "main.html",

type: "html",

generator: generateMainHtml

},

mainJs: {

directory: "js",

filename: "main.js",

type: "js",

generator: generateMainJs

},

......

};

In the above logic, looking at 　　　　　　　　　　　　　　　commonJs, in order to make a js (JavaScript) type file'common.js' in the'js' directory, the'generateMainJs' function must be called. That is, when the'generateMainJs' function is called, the result value is returned, and the returned result value may be the content (string) to be entered in the'js/common.js' file. At this time, the generateCommonJs function accesses the entire data structure, finds the code that should be included in the common.js file, and adds it to common.js.

Next, looking at mainHtml, in order to create an html type file'main.html' in an arbitrary directory, the'generateMainHtml' function must be called. In other words, it means that the content (string) to be entered in the'/main.html' file is returned as a result value when the'generateMainHtml' function is called.

Finally, looking at mainJs, in order to create a js (javascript) type file'main.js/' in the'js' directory, the'generateMainJs' function must be called. In other words, it means that the content (string) to be entered in the'js/main.html' file is returned as a result value when the'generateMainJs' function is called. At this time, generateMainJs function checks only nodes below the main node, finds the code that should be included in main.js, and adds it to main.js. In each function, the code to be added to the js file must be added as a property to each node.

Since the code generation rule includes the directory to create each file, the file name, the file type, and the calling function to be called to create the file, the web app generation device uses the calling function of the logic implemented using the code generation rule. Generate code (content, string). Each generator function accesses the data structure of the web application to be authored and creates the corresponding code (content, string).

In order for the web app generating device to create the code (contents, strings) of the file using the calling function, each element, such as a page, widget, and event, constituting the web application must be made into a data structure as shown in FIG. 5.

A data structure for creating a code (content, string) of a file by using a calling function included in a logic implemented using a code generation rule by the web app generation device will be described with reference to FIG. 5. Referring to FIG. 5, a web application (App) is composed of a total of 4 pages, main, view, comment, and mypage, and the main page has a tree structure including Widget1.

The following logic shows an example of declaring a value that must have for code generation in widget1 of the main page in JSON (Jason, JavaScript Object Notation) format. JSON can be a way of expressing data when sending and receiving data on the Internet.

{

html: "a string that should be created as html",

js: {

common: {

tmapInit: function( id ){

var map;

var markerLayer;

....

}

},

tmapShopInit :　 function( id ){

var map;

var markerLayer;

....

}

}

},

pageshow: "a string of code to be executed the moment the page is viewed",

onResize: "A string of code to be executed at the moment the screen is resized"

}

}

In the above, the html part is a part to create an html file, and the part declared as js is a part to create a js file. js.common is the functions to be added to the common.js file, and js.pageshow and js.onResize contain the code to be executed at the moment the page is viewed and the screen is resized.

When the static component file or the dynamic component file of each page is created as described above, the web app generation device stores the generated files in the directory as the file name and file type defined in the logic implemented using the code generation rule. .

Meanwhile, according to another aspect of the present invention, when executed by a web app generating device, defining a page structure for a web application, static component files for each of the defined pages using a predefined code generation rule Alternatively, a method of generating a web app including generating a dynamic component file is recorded as a program and a recording medium readable by an electronic device is provided.

Such a web app creation method can be written as a program, and codes and code segments constituting the program can be easily inferred by a programmer in the art. In addition, a program relating to a method for generating a web app is stored in an information storage medium that can be read by an electronic device, and can be read and executed by the electronic device.

The web app creation method described so far can be produced, used, and transferred in the form of a computer-readable recording medium containing a program for executing it. In addition, when the present invention is transferred by a method of transmitting and receiving the program online, it is natural to assume that the scope of the rights extends to the device that is the subject of the transmission and reception and the transmission and reception activity.

As such, those skilled in the art to which the present invention pertains will be able to understand that the present invention can be implemented in other specific forms without changing the technical spirit or essential features. Therefore, the embodiments described above are illustrative in all respects and should be understood as non-limiting. The scope of the present invention is indicated by the claims to be described later rather than the detailed description, and all changes or modified forms derived from the meaning and scope of the claims and their equivalent concepts should be interpreted as being included in the scope of the present invention. do.

The present invention provides a web app generating device, a method, and a computer-readable recording medium, thereby providing a web app generating device reflecting dynamic components such as web-based pages, events, and widgets, It can be usefully utilized by using the basic concept in the editing environment.

100: web app generation device 110: code generation rule definition unit
120: web app code generation unit 122: page structure definition module
124: component file generation module

Claims (8)

A code generation rule definition unit defining a code generation rule including at least one of a directory, a file name, a file type, and a calling function to be called to generate a file; And
A web app code generation unit defining a page structure for a web application and generating a static component file or a dynamic component file for each page using the code generation rule; Including,
The web app code generation unit,
A page structure definition module defining a page structure constituting a web application; And
Implement the logic of a static component file or a dynamic component file for each page defined in the page structure definition module using the code generation rule, and call the call function of the implemented logic to code the returned result value. A component file generation module that generates a static component file or a dynamic component file for each page by storing the generated code in a corresponding directory as a file name and file type defined in the logic;
A web app generating device comprising: a. The method of claim 1,
The calling function is a function that accesses a data structure of a web application and generates a returned result value with a corresponding code. delete The method of claim 1,
The logic comprises at least one of a directory, a file name, a file type, and a calling function. delete delete delete delete

Images