KR101519381B1 - Apparatus and method for making web application using html5 - Google Patents

Abstract

The present invention relates to a method and an apparatus for producing a web application using HTML5 including a hyper text markup language (HTML) and JAVA scripts. In order to produce a web application, a development tool: converts at least one tag range, generated by the HTML, into a view block and also converts a JAVA script, executing a task with respect to one or more commands, into a control block; combines and stacks the view block and the control block according to an input of a user who recognizes attributes for the view blocks and the control blocks; sets the bottom stage of a structure in which the view block and the control block are stacked and combined as a route; defines child nodes according to the stack order to substitute a tree structure for a tree structure; sequentially searches the view block and the control block in the tree structure; and converts the view block and the control block into the HTML language based on source codes of the view block and the control block which are read as search results.

Description

[0001] Apparatus and method for making a web application using HTML5 [0002]

The present invention relates to a method for producing a web application using HTML5, and more particularly, to a method for constructing a graphical user interface applying a block combining method and a method for converting it into a web application form.

Recently, as the spread of smart phones in the mobile phone market has increased, a variety of smartphone-based applications are being introduced. Smartphone-based applications are registered daily in Google Market and Apple's App Store, which make up the App Environment, and have recorded many downloads.

This phenomenon is very encouraging for application development companies. However, it is difficult to develop an app that satisfies the desired level unless the Android-based application development or the IOS-based application development is device dependent and has a certain level of development capability . Therefore, even if the service provider can provide a good service, it is difficult to provide a customized service required for a flexible service provision environment due to the difficulty in terms of cost and time due to restriction of device-dependent application development environment. .

Due to the cost and time constraints of developing an app, it is difficult for a service provider to apply various service provisioning environments to an application, and this part leads to simplification of service, which is an obstacle to enhancement of quality of service (QoS).

Meanwhile, the prior art cited below introduces sencha touch, a JavaScript-based framework that provides the widest and object-oriented designed API among mobile web app frameworks. However, there is a fatal disadvantage that the sensor touch can not be developed using drag & drop, and the mobile device can not be accessed.

From this point of view, we can see that there is a need for technical means to improve the device-dependent difficulties of the development of the app, the problems of the development time, and the distribution problems of updating and modifying the service.

 Sencha Touch 2: Up and Running, O'Reilly Media, Adrian Kosmaczewski, 2013.

Therefore, the first problem to be solved by the present invention is to convert the tag range of HTML and JavaScript into view blocks and control blocks, combine them considering the properties of the converted blocks, and store the combined blocks in a tree structure And then converting it into HTML language to produce a web application.

The second problem to be solved by the present invention is to convert the tag range of HTML and JavaScript into view blocks and control blocks, combine them in consideration of the attributes of the converted blocks, store the combined blocks in a tree structure, And a device for converting a web page into a language and producing a web application.

It is another object of the present invention to provide a computer-readable recording medium storing a program for causing a computer to execute the above-described method.

According to an aspect of the present invention, there is provided a method of creating a web application using HTML5 including an HTML language and a javascript according to an embodiment of the present invention, Transforming one or more tag ranges generated through the HTML language into view blocks, respectively, and converting JavaScripts that perform operations on one or more commands into control blocks, respectively; Coupling the view block and the control block in a laminating manner by the development tool according to a user's input recognizing the attributes of the view block and the control block; The development tool sets the lowest level of the stacked structure as the root for the combined view block and the control block and sets the child node of the root according to the stacked order so that the tree structure in which the parent- Substituting; And a step of sequentially searching the view block and the control block in which the development tool is replaced with the tree structure according to the tree structure and referring to the source code of the view block and the control block read out as a result of the search, Provides a way to build a web application.

The view block and the control block according to an embodiment of the present invention may include a type, a layer, a name, a source code, a coupling factor, a color, and a size for each of the view block and the control block And the like.

The layer according to the embodiment may include a first layer including a plate block binding the view block and the control block, a second layer including the view block and the control block, And a third layer including a detailed block for each area for setting connection of the blocks included in the second layer.

The blocks may be stacked when a layer of a block located at an upper end of the blocks to be stacked is an upper layer than a layer of a block to be stacked at a lower end, Lt; / RTI >

The development tool according to an embodiment of the present invention receives three levels classified according to degree of difficulty in using the development tool from a user and receives a user interface used for the block combining according to the inputted three levels And then determining whether or not the result of the determination is positive.

If a block including the same tag range is present among the blocks to be replaced with the tree structure according to the above embodiment, a block including the same tag range in a lower node of the block replaced with the tree structure is referred to as a subtree structure In the case of the first embodiment.

According to another aspect of the present invention, there is provided an apparatus for creating a web application using HTML5 including HTML language and JavaScript, according to an embodiment of the present invention, An input unit for receiving a block to be combined from the input unit; Transforming at least one tag range generated through the HTML language into the view block, converting each of the plurality of tags into a control block, converting the JavaScript into a control block, combining the input blocks in a laminating manner, Setting a lowermost end of the stacked structure as a root for the combined block, setting a child node of the root according to a stacking order, replacing the tree with a tree structure in which a parent-child relationship is established, To the HTML language by referring to the source code of the block read out as a result of the search; And an output unit outputting the converted view block and control block to induce selection of a block to be used by the user from the user, and outputting the web application converted into the HTML language.

The view block and the control block according to the embodiment include a type, a layer, a name, a source code, a coupling factor, a color, and a size for each of the view block and the control block, A first layer including a plate block for binding the view block and the control block, a second layer including the view block and the control block, and a second layer including a block including the control block, And a third layer including a detailed block.

The processing unit according to an embodiment of the present invention may stack the blocks when the layer of the block located at the top of the blocks to be stacked is higher than the layer of the block to be stacked at the lower end.

The method includes receiving three levels classified by the degree of difficulty from the user and determining a user interface to be used for the block combining according to the input three levels, The first level that understands the input / output of functional use among the three levels provides a packaged block of view blocks and control blocks in advance, and a second level that can modify and modify the block combination among the three levels And a third level capable of generating functions using the code among the three levels provides a block capable of generating and modifying a code, Device.

If a block including the same tag range is present among the blocks to be replaced with the tree structure according to the above embodiment, a block including the same tag range in a lower node of the block replaced with the tree structure is referred to as a subtree structure As shown in FIG.

According to another aspect of the present invention, there is provided a computer-readable recording medium storing a program for causing a computer to execute a method of creating a web application using HTML5.

According to the present invention, a web application can be produced by a method in which a user intuitively stacks blocks by transforming and visualizing the structure of HTML into a combination of blocks in a development tool. In addition, since the prebuilt block structure can be packaged and reused, the productivity is excellent, and a novice user can easily develop a certain level of web application.

FIG. 1 is a flowchart illustrating a method for creating a web application using HTML5 adopted by embodiments of the present invention.
FIG. 2A is a diagram illustrating functional classification criteria according to an embodiment of the present invention.
FIG. 2B is a diagram illustrating a process of creating a web application provided to a user at a first level according to an embodiment of the present invention.
FIG. 2C is a diagram illustrating a web application creation process provided to a user at a second level according to an exemplary embodiment of the present invention.
FIG. 2D is a diagram illustrating a process of creating a web application provided to a user at a third level according to an embodiment of the present invention.
FIG. 3 is a diagram illustrating blocks classified according to layers according to an embodiment of the present invention.
Figure 4 is an illustration of block combining in a development tool according to an embodiment of the present invention.
FIG. 5A is a diagram illustrating control blocks according to an exemplary embodiment of the present invention. Referring to FIG.
5B is a diagram illustrating a process of storing a combined block according to an embodiment of the present invention.
5C is a diagram illustrating a code editing process according to an embodiment of the present invention.
6 is a diagram illustrating event registration and source code reflection in a development tool according to an embodiment of the present invention.
7 is a diagram illustrating a tree structure according to an embodiment of the present invention.
FIG. 8 is a diagram illustrating a connection technique for an extension block according to an exemplary embodiment of the present invention. Referring to FIG.
FIG. 9 is a block diagram illustrating an apparatus for creating a web application using HTML5 adopted by embodiments of the present invention. Referring to FIG.

Before explaining the embodiments of the present invention, the technical means adopted by the embodiments of the present invention will be outlined to solve the problems occurring in the conventional web application production method.

Conventional web application development tools have a fatal disadvantage of being able to develop applications only if the language is sufficiently mastered.

Therefore, embodiments of the present invention allow a programming language of markup language type to be used by stacking function blocks visualized using a drag and drop operation, To create an application development tool that can function as a simple assembly, and to suggest a technical means for a beginner to easily create an HTML5-based web application.

Hereinafter, embodiments of the present invention will be described in detail with reference to the drawings. In the following description and the accompanying drawings, detailed description of well-known functions or constructions that may obscure the subject matter of the present invention will be omitted. It should be noted that the same constituent elements are denoted by the same reference numerals as possible throughout the drawings.

FIG. 1 is a flowchart illustrating a method of creating a web application using HTML5 adopted by embodiments of the present invention. Referring to FIG. 1, a web application is created using HTML5 including HTML language and JavaScript. A method of producing a program, the method comprising the steps of: converting a one or more tag ranges generated through the HTML language into view blocks, respectively, and controlling JavaScript, which performs operations on one or more commands, And the development tool combines the view block and the control block in a laminating manner in accordance with a user's input recognizing the attributes of the view block and the control block, The lowest level of the stacked structure is set as a root for the block and the control block, and the child nodes of the root are set according to the stacking order The tree structure in which the development tool replaces the tree structure and the view block and the control block in which the development tool is replaced with the tree structure are sequentially searched according to the tree structure, By referring to the source code of the control block and converting it into the HTML language, the web application is produced.

More specifically, in step S110, the development tool converts the one or more tag ranges generated through the HTML language into view blocks, respectively, and translates the JavaScript, which performs operations on one or more instructions, into a control block. In other words, the HTML5 application can be largely composed of an HTML language part and a JavaScript part. Here, the HTML language part is responsible for the visible part of the application and may correspond to the view part according to the model-view-control pattern development method. In addition, the JavaScript part corresponds to a control part in the development pattern, and may perform a function when the user performs a specific event (presses a button) or when an operation is required.

Accordingly, the present invention can be a method of visualizing and assembling the HTML portion and the JavaScript in block form. Here, in order to visualize in the block form, the HTML may convert the tag range into one block. For example, <div> ... </ div> can be converted to a single div block. That is, since the HTML is a markup language, it is represented by a combination of a start tag and an end tag, so that one lump including a start and an end of the tag can be expressed as a block. Accordingly, by visualizing the corresponding chunk as a block, the position of the block can represent the inclusion relation between the HTML tags.

On the other hand, the chunk of the JavaScript may be the same as the function in the procedural programming language. Therefore, func () {... } Can be regarded as a single chunk and can be visualized in block form. Here, since the JavaScript block does not require a specific location when described in a web application, it can be described in a flexible manner when the block combination is re-converted into a code.

Thereafter, the transformed HTML block and JavaScript block can be assembled separately in separate regions. For example, if a button block is stacked in the HTML block assembly area and a block for the button click function is stacked in the JavaScript area, the corresponding JavaScript block can be selectively connected to the HTML block. Here, selecting and connecting the corresponding JavaScript block in the HTML block will be described in more detail in step S120.

Meanwhile, the development tool proposed in the present invention can build a UI / UX assembly environment considering the level of the user.

FIG. 2A is a diagram illustrating a functional classification criterion according to a user level according to an embodiment of the present invention, in which the development tool receives three levels classified according to degree of difficulty of use of the development tool from a user, The user interface used for the block combining can be determined according to three levels. In order to facilitate the understanding of the explanation, the present invention will be described by dividing the classification according to the user level into a first level (21), a second level (22), and a third level (33). The division according to the level can be refined or simplified depending on the situation.

More specifically, the user provides an interface that allows the beginner 21, the intermediate player 22, and the advanced player 33 to hierarchically and layer-build functional elements of blocks divided into levels by drag and drop of blocks It can implement various functions for the web application. It can easily export pre-designed parts by importing and importing part-by-part combination of parts, and can easily acquire existing experiential elements by using templates. These parts can intuitively judge the parts that the service developer can escape from the code-dependent environment and plan, reduce the problems that can occur during the application development process, and improve the maintenance efficiency.

FIG. 2B illustrates a web application creation process for a user at a first level according to an embodiment of the present invention, wherein a first level for understanding input / The control block may be pre-combined to provide a packaged block 24. [ That is, the beginner 21 can use the package 24 of the block in a black box form as a developer who understands the input / output of the function use. For example, the developer 21 of the beginner may be a developer who includes a level of understanding that 'when a photograph button is pressed, the photograph is taken.'

FIG. 2C illustrates a web application creation process for a user at a second level according to an embodiment of the present invention. In FIG. 2C, a second level May provide a view block and a control block 25 used for block combining. That is, the intermediate player 22 may develop using the detail component block 25 as the developer 22 with a level that can modify or modify the component block combination 26. [ Intermediate (22) can be a level developer who can understand what elements are needed to perform a function. For example, it is possible to add a camera correction function, a flash on / off function, It can be a developer to include.

FIG. 2d illustrates a web application creation process for a user at a third level according to an exemplary embodiment of the present invention. The third level, at which functions can be generated using the code among the three levels, A block 27 that can generate and modify code can be provided. That is to say, the master 23 can create a unique component block 26 at this time as the developer 23 who is able to implement the function using the code 27 and can generate the component block 26. The master 23 can be a level developer who can use and make detailed modifications and blocks for each functional element. For example, a developer can include a level that can be created by adding elements that require detailed coding, such as panorama effects and Photoshop effects, in a camera application.

Returning now to FIG. 1, step S110 will be described later.

In step S120, the development tool combines the view block and the control block in a laminating manner according to a user's input recognizing the attributes of the view block and the control block.

More specifically, in the present invention, combining codes is performed in such a manner that blocks used for block joining are combined from top to bottom. Therefore, data design and storage for implementing functions like block building of Lego may be required. Therefore, by applying a labeling scheme for a markup language to implement such a part, a block to be generated by a user can be combined in a laminating manner in a development tool. Here, each block may include a type, a layer, a name, a source code, a binding factor, a color, and a size as attributes.

FIG. 3 is a block diagram illustrating a layered block according to an embodiment of the present invention. In order to facilitate understanding of the present invention, the layers are classified into a layer 0 31, a layer 1 32, , And layer 2 (33).

More specifically, the layer 0 31 includes a plate block binding the view block and the control block, the layer 1 32 includes the view block and the control block, and the layer 2 33 May be configured as a detailed block for each area for setting the connection of the blocks included in the layer 1 32. [

In addition, the blocks may be stacked when a layer of a block located at an upper end of the blocks to be stacked is an upper layer than a layer of a block to be stacked at a lower end.

Figure 4 is an illustration of block combining in a development tool according to an embodiment of the present invention.

More specifically, the left menu 41 in the development tool of FIG. 4 lists the blocks used in the block combination. The blocks located in the left menu 41 are dragged and dropped to the main table 42, which is the center screen, You can assemble and build web applications. Here, the package block of the left menu 41 may be a block combination of a template type that is provided in advance for a user having difficulty in detailed code implementation.

First, a plate block 43, which is a base plate, can be placed on the main table 42 through a drag-and-drop operation from the left menu 41 to produce an application. Here, the plate block 43 may be a top block that combines the view block 44 and the control block 45. The view block 44 and the control block 45 can be placed on the plate block 43 from the left menu 41 by dragging and dropping. Here, when the block of the left menu 41 is selected, the blocks of the blocks arranged in the main table 42 are highlighted at the edges of the blocks in which the selected blocks can be arranged, Can be easily induced. Then, the detail block 46 can be placed on the view block 44 arranged through the drag-and-drop from the left menu 41. For example, when an HTML component is placed in the view block 44 and a label block is dragged from the lv.3 item in the left menu 41, the label block is combined only with the view block 44, . In addition, the already assembled block and the new block move independently before being combined, and can be moved together into the same block after being assembled with the upper block. Thereafter, if the content is modified through the arrow display button of the label block, the result can be confirmed through the execution button 49. [ In this way, the detail block can be arranged on the view block, so that the user can combine the desired block.

Thereafter, a code block, which is the detail block 46 in the left menu 41, is placed on the control block 45, which is converted into JavaScript in the web application and manages the dynamic event, via the drag and drop operation . Here, the part necessary for the code can be freely modified. For example, by inserting the code block into a camera set, a web application can drive the camera sensor of the device. Then, the function block, which is the detail block 46, is dragged from the left menu 41 to operate the button for the button block, which is the detail block 46 disposed in the view block 44, and placed on the control block 45 . Here, the actually implemented code can be previewed in the status window 48 arranged below.

Thereafter, the function is registered in the registered block 46 so as to be connected to the detailed block 46 registered in the control block 45 through the star-shaped display located at the lower end of the detailed block 46 disposed on the view block 44 You can connect. Thereafter, the result of the web application produced through the execution (49) can be confirmed.

FIG. 5A is a diagram illustrating control blocks according to an exemplary embodiment of the present invention. Referring to FIG.

표시(53)는 해당 블록의 코드를 에디팅(editing)할 수 있는 기능을 제공한다. 여기서, 상기 기능들은 다른 모든 블록에서 동일하게 사용 가능할 수 있다.More specifically, the X display 51 is the deletion of the block, the @ mark 52 can register the block in the tray,

The display 53 provides a function of editing the code of the corresponding block. Here, the functions may be equally usable in all other blocks.

FIG. 5B is a diagram illustrating a process of storing a block combined with a block according to an embodiment of the present invention. When storing the combined block in the stacking manner, Sub-blocks are also stored, and the stored blocks may be always reusable.

More specifically, as an example of the implementation of block registration, if a block is stored in the tray 54, the block state at that point of time can be stored in the tray 54 as it is. That is, the lower block included in the stored block is also registered in the tray, and when the registered block is dropped into the main table, the block can be reused by the new component 55 and reused. It is stored as a value for that point in time so that the independence of the block object can be maintained.

5C is a diagram illustrating a code editing process according to an embodiment of the present invention.

표시(53)를 통해 코드를 수정할 수 있는 블록 창(56)을 사용할 수 있고, 블록 창(56)에 포함된 코드를 에디팅하여 블록을 수정할 수 있으며, 블록 창(56)을 닫으며 에디팅된 코드 내용이 저장될 수 있다.More specifically, as for the implementation of code editing,

A block window 56 that allows modification of the code via the display 53 can be used and the code contained in the block window 56 can be edited to modify the block and the block window 56 is closed, Contents can be saved.

FIG. 6 is a diagram illustrating event registration and source code reflection in a development tool according to an exemplary embodiment of the present invention, and may be a JavaScript event handling technique for a dynamic application environment based on an mvc development pattern.

More specifically, in order to operate the button in the selection window 62 that can be connected to the detailed block 62 registered in the control block through the star display located at the lower end of the detail block 61 disposed on the view block, You can link to a function that has been called. For example, if the 'window msg' function (62) among the functions arranged in the control block in the detailed block (61) arranged in the view block is selected, 'event registration and source code can reflect' window msg . In other words, it is a technique to easily link the view part and the control part, and it is possible to implement the click function of the registered function so that the JavaScript can be applied to the web application in the form of click UI.

Returning now to FIG. 1, step S120 and subsequent steps will be described.

Step S130 will be described in more detail with reference to FIG. 7 below.

7 is a diagram illustrating a tree structure according to an embodiment of the present invention.

More specifically, the development tool sets the lowest level of the layered structure as the root for the combined view block and control block, and sets the child node of the root according to the stacked order, thereby establishing a parent- . &Lt; / RTI &gt; In other words, the block can be stored in a tree structure in which the parent-child relationship between the blocks is established based on the combined laminated block combination structure in step S120. This storage method can design an intuitive structure since the expression concept of the markup language can be used as it is in step S140 of the implementation step. Therefore, it is possible to design an intuitive structure and to perform a recursive search for the constituent component tree in a web application environment outputting in a markup language You can have the advantage of being able to compile with.

8 is a diagram illustrating a connection scheme for an extension block according to an embodiment of the present invention. When a block including the same tag range is present among the blocks replaced with the tree structure, A block including the same tag range can be connected to a lower node of a block in a subtree structure.

More specifically, when a plurality of blocks are overlapped by using a de-camping scheme (pruning) in a tree structure for multi-layered block building, which is a visual limit part of the block stacking method, It is possible to flexibly apply various implementation environments that may occur in the web environment. That is, in the embodiment of the present invention, even if the blocks are combined, they can be represented by a single block having a small size when expressed on the screen. Therefore, in order to express the inside of each block, it can be connected with another tree structure having the corresponding block as a node in order to express the inside of the block. Since the detailed blocks may exist for each block, the lower node of each block node except the block corresponding to the tree node of the part to be viewed may be truncated and stored as a separate subtree. For example, an additional div block in the div block (73) can be connected indefinitely. It is also possible to connect the button block and the div block in the div block 73 and also connect the button block. Here, the similar level may mean that the position on the tag, which can be expressed in HTML, can be inserted anywhere in the <body> tag, for example.

Returning now to FIG. 1, step S130 and subsequent steps will be described.

In step S140, the development tool sequentially searches for a view block and a control block in which the development tool has been replaced with the tree structure according to the tree structure, and converts the source code of the view block and the control block read in the search result into an HTML language Thereby creating the web application. That is, the tree structure is searched for through the depth first search (DFS: Depth First Search), and the source code of the searched block is referred to and converted into the HTML language, thereby making it possible to produce a web application.

FIG. 9 is a block diagram showing an apparatus for producing a web application using HTML 5 adopted by the embodiments of the present invention. The web application production apparatus 80 has a configuration corresponding to each process of FIG. 1 described above . Therefore, in order to avoid duplication of explanation, the function is outlined mainly in the detailed configuration of the system.

In an apparatus 80 for producing a web application using HTML5 including an HTML language and JavaScript, an input unit 81 receives a block to be combined from a user who has recognized an attribute of a view block and a control block.

The processing unit 82 converts each of the one or more tag ranges generated through the HTML language into the view block, converts the Javascript that performs the operation for one or more commands into a control block, , Setting the lowest end of the stacked structure as a root for the combined block, setting a child node of the root according to the stacking order, replacing the tree structure with a parent-child relationship, By sequentially searching the blocks in the tree structure according to the tree structure, the source code of the block read out in the search result is referred to and converted into an HTML language.

The output unit 83 outputs the converted view blocks and control blocks to induce the user to select a block to be used for combination, and outputs the web application converted into the HTML language.

In addition, each of the view block and the control block includes a type, a layer, a name, a source code, a coupling factor, a color, and a size as attributes, and the layer includes a plate block for binding the view block and the control block And a third layer including a first layer included, a view layer, a second layer including the control block, and a detailed block for each area for establishing connection of the blocks included in the second layer.

In addition, the processing unit 82 can stack the blocks when the layer of the block located at the top of the blocks to be stacked is higher than the layer of the block to be stacked at the lower end.

In addition, the user inputs three levels classified according to degree of difficulty for use of the block from the user, and determines a user interface used for the block combining according to the input three levels, The first level for understanding the input / output of function usage provides a packaged block of view blocks and control blocks in advance, and a second level for modifying and modifying the block combination of the three levels is used for block combining And a third level capable of generating functions using the code among the three levels can provide a block capable of generating and modifying the code.

In addition, when a block including the same tag range exists among the blocks replaced by the tree structure, a block including the same tag range may be connected to a lower node of the block replaced with the tree structure in a subtree structure.

According to the present invention, an intuitive UI / UX using a drag and drop stacking method is constructed, a web component compiling company is implemented by introducing a block assembling method utilizing an XML labeling scheme, Event registration UI / UX is implemented so that event handling can be handled easily in web applications and web-based IDE development environment that runs smoothly in all HTML5 based web browsers is built. Furthermore, it is possible to label the specific component area on the HTML, record the authority information for each label, block only the authorized components in such a manner that only authorized components are displayed, It is possible to construct a new page by using a combination of parts, and the document design unit of the web application can be applied to the access control by subdividing into functional units in a web page.

Meanwhile, the embodiments of the present invention can be embodied as computer readable codes on a computer readable recording medium. A computer-readable recording medium includes all kinds of recording apparatuses in which data that can be read by a computer system is stored.

Examples of the computer-readable recording medium include a ROM, a RAM, a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device and the like, and also a carrier wave (for example, transmission via the Internet) . In addition, the computer-readable recording medium may be distributed over network-connected computer systems so that computer readable codes can be stored and executed in a distributed manner. In addition, functional programs, codes, and code segments for implementing the present invention can be easily deduced by programmers skilled in the art to which the present invention belongs.

The present invention has been described above with reference to various embodiments. It will be understood by those skilled in the art that various changes in form and details may be made therein without departing from the spirit and scope of the invention as defined by the appended claims. Therefore, the disclosed embodiments should be considered in an illustrative rather than a restrictive sense. The scope of the present invention is defined by the appended claims rather than by the foregoing description, and all differences within the scope of equivalents thereof should be construed as being included in the present invention.

80: Web application creation device
81:
82:
83: Output section

Claims (16)

A method for producing a web application using HTML5 including HTML language and JavaScript,
Converting each of the one or more tag ranges generated through the HTML language into a view block, and converting a JavaScript, which performs an operation on one or more commands, into a control block, respectively, by a development tool ;
Coupling the view block and the control block in a laminating manner by the development tool according to a user's input recognizing the attributes of the view block and the control block;
The development tool sets the lowest level of the stacked structure as the root for the combined view block and the control block and sets the child node of the root according to the stacked order so that the tree structure in which the parent- Substituting; And
The development tool sequentially searches the view block and the control block in which the development tool has been replaced with the tree structure according to the tree structure and converts the view block and the control block into the HTML language with reference to the source code of the view block and the control block read out in the search result, Lt; / RTI &gt; The method according to claim 1,
Wherein the view block and the control block comprise:
A layer, a name, a source code, a coupling factor, a color, and a size for each of the view block and the control block. 3. The method of claim 2,
The layer
A first layer including a plate block for binding the view block and the control block, a second layer including the view block and the control block, and a link between blocks included in the second layer, And a third layer including detailed blocks for each area to be set. The method according to claim 1,
When the blocks are stacked together,
Wherein when the layer of the block located at the uppermost one of the blocks to be laminated is higher than the layer of the block to be laminated at the lower layer, the block is laminated. The method according to claim 1,
Wherein the development tool receives three levels of classification classified according to degree of difficulty for use of the development tool from a user and determines a user interface used for the block combining according to the three input levels . 6. The method of claim 5,
Wherein a first level that understands the input / output of functional use among the three levels provides a packaged block in which a view block and a control block are combined in advance. 6. The method of claim 5,
Wherein a second level of the three levels of level that can modify and modify the block combination provides a view block and a control block used for block combining. 6. The method of claim 5,
Wherein the third level capable of generating functions using the code of the three levels provides a block capable of generating and modifying code. The method according to claim 1,
When the laminated block is stored,
The subblocks for the combined blocks at the storage time are also stored, and the stored blocks are always reusable. The method according to claim 1,
Wherein a block including the same tag range is connected to a lower node of a block replaced by the tree structure in a subtree structure when a block including the same tag range is present among the blocks replaced by the tree structure. Way. A computer-readable recording medium storing a program for causing a computer to execute the method according to any one of claims 1 to 10. 1. An apparatus for producing a web application using HTML5 including an HTML language and JavaScript,
An input unit for receiving a block to be combined from a user who has recognized a property of a view block and a control block;
Transforming at least one tag range generated through the HTML language into the view block, converting each of the plurality of tags into a control block, converting the JavaScript into a control block, combining the input blocks in a laminating manner, Setting a lowermost end of the stacked structure as a root for the combined block, setting a child node of the root according to a stacking order, replacing the tree with a tree structure in which a parent-child relationship is established, To the HTML language by referring to the source code of the block read out as a result of the search; And
And an output unit outputting the converted view block and control block to induce selection of a block to be used by the user from the user and outputting the web application converted into the HTML language. 13. The method of claim 12,
Wherein the view block and the control block comprise:
A name, a source code, a coupling factor, a color, and a size for each of the view block and the control block,
The layer includes a first layer including a plate block for binding the view block and the control block, a second layer including the view block and the control block, and a block including blocks included in the second layer And a third layer including a detailed block for each area. 13. The method of claim 12,
Wherein,
Wherein when the layer of the block located at the uppermost one of the blocks to be laminated is higher than the layer of the block to be laminated at the lower layer, the block is laminated. 13. The method of claim 12,
A user interface unit for inputting three levels classified according to degree of difficulty for use of the block from the user and determining a user interface used for the block combining according to the three input levels,
A first level for understanding the input / output of function usage among the three levels provides a packaged block in which a view block and a control block are combined in advance, and a second level that can change and modify the block combination among the three levels Level provides a view block and a control block used for block combining and a third level capable of generating a function using the code among the three levels provides a block capable of generating and modifying a code . 13. The method of claim 12,
Wherein a block including the same tag range is connected to a lower node of a block replaced by the tree structure in a subtree structure when a block including the same tag range is present among the blocks replaced by the tree structure. Device.

Images