KR20140019623A - An integrated platform for authoring web applications and the authoring method thereof - Google Patents

Abstract

The present invention relates to an integrated platform for web application authoring and a configuration method thereof. By configuring an HTML5 based platform, it is possible to support the authoring of web applications. Even if a developer has no professional knowledge related to CSS or HTML5, it is possible to seamlessly and collectively perform processes from a project generation process for a web application to test, debugging, profiling, build, packaging, and publishing processes. By providing a build server capable of building and packaging a hybrid application (or application mix), it is possible to support web application development capable of adapting to an IT ecosystem. By freely adding a custom widget according to a request of a customer or supporting a mix with a 3rd party solution, it is possible to support cooperation and authoring environment optimized for a development object to designers and developers of the web applications. [Reference numerals] (100) Authoring tool; (210) Project manager; (220) Code editor; (230) Emulator; (240) Debugger; (250) Profiler; (260) Builder; (270) Package; (300) Runtime platform; (400) UI framework; (500) Build server; (600) Ecosystem; (AA) Integration platform; (BB) UI layout design; (CC) Animation/Effect design; (DD) UI logic/Biz logic development; (EE) Project creation/management; (FF) Test/Debugging/Profiling; (GG) Build/Packaging; (HH) Distribution; (II) Web app; (JJ) Customer server; (KK) Hybrid app

Description

AN INTEGRATED PLATFORM FOR AUTHORING WEB APPLICATIONS AND THE AUTHORING METHOD THEREOF FIELD OF THE INVENTION [0001]

The present invention relates to an integrated platform for web application authoring and a method of authoring the same. More particularly, the present invention relates to a UI ) Logic design, test / debugging / profiling, and build / packaging processes seamlessly on a single integrated platform.

In general, the conventional web has been concentrated on providing a web page or a web site that shows specific information composed of characters, pictures, sounds, or moving pictures to the user. However, the recent web is gradually changing to application form. In other words, a recent web is changing more like a computer application than simply a web page (or a web site).

Therefore, conventional web page editor (such as Dreamweaver, Namo web editor, front page) does not support the integrated platform for testing and debugging and building and packaging, so it is troublesome to use and it is difficult to use CSS3 (Cascading Style Sheet 3) It is difficult to develop a recent web application that needs to use the same technology as the web application.

That is, in order to develop a web page by using a conventional web page editor (or a web page authoring tool), the HTML source file is directly encoded and then uploaded to a web page operation server using a file transfer program such as FTP It is necessary to perform a complicated procedure of repeating the modification and the modification. Moreover, users who do not have the expertise related to CSS3 or HTML5 have difficulties in developing the latest web application.

In addition, Japanese Patent Application Laid-Open No. 2011-0130611 discloses a web platform unit for a mobile terminal capable of interworking with a web-based application operating in a heterogeneous operating system layer module. When executing a web-based application operating in a heterogeneous operating system layer module, And a JavaScript access engine for providing a JavaScript-based runtime environment for controlling a local resource of the mobile terminal to use a service provided by an operating system layer module of the operating system layer module, It is possible to provide a web platform unit for a mobile terminal. However, in a case where a source code of a web-based application composed of JavaScript syntax is input to a JavaScript access engine unit, The present invention provides a web platform unit for a mobile terminal that enables exchange of data between a web-based application operating in a heterogeneous operating system layer module and an operating system layer module of a mobile terminal, including a data type converter unit for converting a native- .

In addition, Japanese Laid-Open Patent Application No. 2011-0054995 discloses a web application platform and includes a native UI framework for storing user interface implemented in native code or user interface logic for processing user interface screen changes; And a web application that includes the syntax of the web code that calls the user interface logic implemented in the native code, and executes the web application when the call event according to the syntax is executed, And a browser engine that calls and processes the user interface logic.

In the past, various solutions for web application development have been developed. However, since they are composed of separate platforms, it is impossible to perform consistent and seamless development work, and various third party solutions A solution made by a developer). In other words, solutions for conventional web application development can not be modified because the exported source can not be modified and can not be used other than the functions provided by the solution (that is, it is dependent on the solution) And customization (or customization) is impossible. Also, since the meta format is used in the authoring step, there is a problem that the third party JavaScript library or the CSS library can not be applied.

The present invention has been made to solve the above problems, and it is an object of the present invention to provide a unified platform and a method for authoring a web application that can support collaborative construction and authoring environment configuration optimized for development purpose to a developer and a designer of a web application .

Another object of the present invention is to provide an integrated platform and a method for authoring a web application that can support authoring of a recent web application by constructing a platform based on HTML5.

In addition, the present invention can be applied to web application authoring which can seamlessly perform the process from the creation of the project of the web application to the test, the debugging, the build, and the distribution without the expert knowledge related to CSS3 or HTML5 The goal is to provide a unified platform and its authoring method.

Further, the present invention provides an integrated platform for web application authoring capable of supporting the development of a web application adaptable to a developer's IT ecosystem by providing a build server capable of building and packaging a hybrid application (or an application mix) The purpose of the method is to provide.

Another object of the present invention is to provide a unified platform for web application authoring capable of freely adding a custom widget according to a customer's request and supporting mixed use with a third party solution and a method for authoring the same.

An integrated platform for web application authoring according to an aspect of the present invention includes: a authoring tool that provides editors capable of editing various UI components to design UI layout, animation, and various effects; And a studio for generating and managing a project, coding UI logic and Biz logic through seamless interworking with the authoring tool, and building, packaging, and distributing an application for which profiling, emulator testing and debugging have been completed The editor is provided with a management-oriented UI such as a list and a tree or an intuitive editing through an image in the form of visualization and an icon. The integrated platform includes HTML5, CSS3 and JS The authoring tool may be a page browser that is a page navigator capable of creating, adding, and deleting a page, which is an individual screen within the UI, based on the same standard web technology; A viewport editor as a work area for visually viewing UI contents; Custom properties that allow you to change various properties of the selected object or component; A DOM tree browser showing information about a page selected in the page browser explorer window; And a component browser composed of various widgets capable of decorating a page, wherein the studio comprises a projector manager for creating and managing a project; An emulator for testing a web application developed using the integrated platform in the same environment as the mobile device; A debugger for debugging JavaScript included in the web application; A profiler that runs the web application to test for system performance and to detect where bottlenecks occur; A build that generates a file that can be executed on the target device by coding the web application; And a packager for packaging the built-in web application so as to be distributable, wherein the emulator provides the same environment as an actual mobile device, and provides a variety of resolutions, rotations, and expanders, and the authoring tool includes at least one editor Wherein the editor pane is capable of incrementing or decrementing its number and size according to the editing purpose and can be moved and positioned at a desired location, The viewport editor can be designed and edited in a WYSIWYG manner, and the integrated platform further includes a build server for building a hybrid application, , The integrated platform may be based on the same HTML- Cross-platform run-time to provide the same functionality in a variety of mobile device platform; And a JavaScript API for providing various native functions, and supports a plug-in architecture so that a third party can easily expand functions required for service development.

In addition, the web application authoring method according to one aspect of the present invention includes an authoring tool capable of designing a UI layout, an animation, and various effects, and an integrated unit composed of a studio capable of authoring a web application through seamless interworking with the authoring tool In a platform, a first step of creating a project of a web application and setting its type; A second step of performing a UI design of a web application using an authoring tool; A third step of coding the web application in cooperation with the authoring tool and a studio; And a fourth step of testing the coded web application in various ways, wherein the second step comprises: a fifth step of generating a main page and setting its environment; A sixth step of creating a first page to be displayed when the main page or a specific tab included therein is clicked and setting its environment; And a seventh step of generating a second page, which is displayed when the first page or a specific tab included in the first page is clicked, and setting the environment of the second page, and the fourth step is a step of performing a test using an emulator Step 8; A ninth step of testing through a browser; Or 10) testing the terminal using a build server; And a step of performing at least one of the following steps.

The present invention can support the authoring of a web application by configuring a platform based on HTML5, and even if a developer does not have expert knowledge related to CSS or HTML5, it is possible to create a web application from a project creation, testing, debugging, profiling, A build server for building and packaging a hybrid web application (or a hybrid of applications) can be provided, and an eco system can be provided for the web application Designers, developers, and publishers have a platform to communicate and support in the process of designing, developing, and publishing. They can freely add custom widgets to their needs, Support for web applications, Sean has the effect of designers, to support the authoring environment optimized for collaboration and development purposes, developers and distributors.

1 is a conceptual diagram illustrating a configuration and operation of an integrated platform for authoring a web application according to an embodiment of the present invention;
2 is a diagram illustrating an example of a configuration of an authoring tool for authoring a web application according to an embodiment of the present invention;
3 is a diagram illustrating a configuration of a runtime platform for authoring a web application according to an embodiment of the present invention;
4 is a diagram illustrating an operation of a runtime plug-in of an integrated platform for authoring a web application according to an embodiment of the present invention;
5 is a flowchart illustrating a process of developing a web application using an integrated platform according to an embodiment of the present invention.

Hereinafter, an embodiment of an integrated platform for authoring a web application according to the present invention and a method of constructing the same will be described with reference to the accompanying drawings.

The integrated platform according to the present invention supports authoring environment configuration and collaboration optimized for development purposes of developers and designers through a page configuration of a designer, and also provides a user with a native application (for example, : Provides the same level of UX (User experience) as a mobile device maker such as iPhone, which provides libraries and functions necessary for the production of apps so that they can be easily developed. In addition, the present invention provides a development environment optimized for developing business applications corresponding to N-screens and animation contents, and also provides a development environment for N-screen editors (different types of media) Screen-compatible content development environment using an editor that can change the style according to each feature of the media using a program or the like. It also provides a specialized authoring environment from the point of view of designers and developers. For example, from a designer perspective, it can be used for CSS3 animation and effect creation. It can be used to develop timeline-based animation contents (advertisement, game, education, etc.) There are characteristics. In addition, there is a feature that can improve development and maintenance productivity by separating one page into several logical views at design time, reducing code complexity and increasing recyclability.

FIG. 1 is a conceptual diagram illustrating an overall configuration and operation of an integrated platform for authoring a web application according to an embodiment of the present invention. Referring to FIG. As shown, the integrated platform for web application authoring includes a authoring tool (or design tool) 100, a studio 200, a runtime platform 300, and a UI framework 400.

As shown in FIG. 1, the integrated platform according to the present invention is a total solution for developing a web application based on HTML5. The integrated platform includes an integrated development environment including an authoring tool (AT) 100 and a studio 200 (IDE).

Here, the HTML5 refers to a web programming language that has evolved to embody various application programs such as audio, video, and graphics in an existing web document in which only text and a hyperlink are displayed. HTML5 is, above all, an installation program such as ActiveX (a technology used by Microsoft to develop reusable object-oriented software components) or a mobile application store (a variety of applications ), Which can be used in any browser as well as IE (Internet Explorer). In recent years, the HTML5-based Technologies are growing rapidly, and a variety of 3rd party solutions (eg, frameworks / libraries) are being introduced.

Accordingly, the integrated platform according to the present invention can be developed on the basis of HTML5 from the development stage of the web application, and can provide compatibility with the 3rd party solution and interoperability by providing an open architecture that accommodates 100% HTML5 technology .

In addition, the integrated platform is based on standard web technologies (eg, HTML5, CSS3, JS), one source multi-use (OSMU) And services that enable users to seamlessly use a single piece of content on a variety of devices, including TVs, PCs, tablet PCs, and smartphones. That is, it can seamlessly support a series of processes required for developing N-screen compatible web applications. In addition, OS runtime platform 300 and UI framework 400 are used to solve OS fragmentation, hardware fragmentation, and business requirements.

As described above, the integrated platform according to the present invention is an integrated development environment for seamlessly supporting a series of processes from the development of HTML5-based web application to the service. The authoring tool 100 and the studio 200 seamlessly interwork , Modular development and management of UI logic and BizLogic (business logic), and development productivity and efficiency by providing a profiler that supports emulators, debuggers, and various hardware profiles.

The authoring tool 100 is a tool for web application UI authoring and includes a project manager, a page browser, a viewport editor (designer view), a resource editor, a property editor, a DOM tree browser, a component browser, . All editor windows of the authoring tool are managed as panes, and editor panes can be freely arranged according to the purpose of the authoring. All editors are linked around the designer view and provide object-oriented editing.

In addition, the authoring tool 100 can create UIs based on an HTML language (in particular, HTML5) and provides editors capable of editing various UI components for authoring convenience and efficiency of a user, The editors provide optimized editing functions for each of the UI components, and provide a management-oriented UI such as a list, a tree or the like as well as a visualization editing of an image form and an intuitive editing through an icon, ) To design the layout, and to design the desired animation and various effects.

As a result, existing web application development solutions can not be used to modify the exported source and can not be used other than the functions provided by the solution (ie, it is dependent on the solution) The third party JavaScript library or the CSS library can not be applied because it is impossible to customize (or customize) or use the meta format in the authoring step. However, Widgets can be added freely and can be mixed with 3rd party solutions.

The framework of the authoring tool 100 comprises at least one or more editor windows. That is, the editor window (or editor pane) of the authoring tool 100 is managed as a pane (each window thereof when one window is divided into a plurality of windows), and an autonomous arrangement Function. That is, the number, the position, and the size of the editor pane can be increased or decreased in number and size depending on the purpose of editing, and can be moved to a desired position by a user (developer). Here, each of the editor windows (or editor pane) operates as one editor.

The authoring tool 100 provides an object-oriented editing function by setting all editors to be linked with a designer view (or a view window, a viewport window showing an actual design edited by the user). At this time, the design view (or view window) can be edited by WYSIWYG method.

The authoring tool 100 includes a page browser (page browser), which is a page navigator capable of creating, adding, and deleting a page, which is an individual screen in the UI, a viewport (computer graphics A window area for actually displaying a projection-transformed graphic in a rendering process of generating an image in a CG), a custom property for changing various attributes of the selected object or component, A component browser (Component Browser) composed of a DOM (Document Object Model) tree browser (DOM Tree Browser) showing various information about the page selected in the page browser explorer window and various widgets for decorating the page do.

The studio 200 performs the creation and management of a project for developing a web application and manages the user interface 100 through seamless interworking with the authoring tool 100, the runtime platform 300, the UI framework 400, (UI) logic and business (Biz) logic, and the application developed through the interworking performs the profiling using the profiler supporting various hardware profiles and the test using the emulator, Debugging through a debugger, and finally, the completed application application is built and packaged and distributed.

The studio 200 encodes UI logic and bez logic through the project manager 210 and the code editor 220 and outputs them to the emulator 230 / debugger 240 / profiler 250 for testing, debugging, and profiling Ring. The build 260 is then deployed and deployed in the packager 270. The result is a hybrid application that runs on various mobile devices or as a web application on a customer server.

Here, the projector manager 210 can create and manage a project, and can provide various sample projects for convenience of development. The code editor 220 can import and edit the code of a component to be included in the generated project or project.

The emulator 230 provides the same result as executing the web application developed using the integrated platform of the present invention in the mobile device, so that the test or operation can be confirmed. That is, the emulator 230 provides various resolutions, rotations and extenders to provide the same environment as an actual mobile device.

The debugger 240 can easily and easily debug JavaScript included in the web application developed using the integrated platform of the present invention. In addition, the profiler 250 can execute the application in various ways in the course of developing a web application, thereby enabling the system performance and a point where a bottleneck occurs to occur.

The build 260 generates independent software output (e.g., an executable file) that can execute a source code file of a web application (or project) on a computer (or mobile device). The packager 270 packages the web application (or project) so that the web application (or project) can be published.

In addition, the integrated platform may separately configure a build server 500 for building a hybrid application, and may support various packages of various OSs (e.g., Android, iOS) using the build server 500. At this time, the build server 500 can build and use a local (enterprise) build server according to the needs of the enterprise, and can also provide user management, build state management functions, build history and statistical information. The integrated platform may provide an ecosystem 600 for developing and distributing web applications and supporting and managing users and developers, and may form a separate server or web site for the ecosystem.

The runtime platform 300 includes a runtime core, a device API plugin (built-in), a user plugin, an application, and a service framework, as shown in FIG.

The runtime core includes a webkit, a plugin loader, and an application manager, and WebKit is an open source web browser engine that includes HTML, CSS rendering, and a JavaScript engine. In addition, the plug-in loader performs built-in / custom plug-in API management for interlocking native functions, and the application manager performs the function of executing and managing the application, that is, the execution and the update of the application. In addition, the runtime API provider of the service framework provides a built-in API function for the functions required by the application, and provides an interworking function for an extended custom API in the plug-in.

FIG. 4 illustrates a plug-in. For example, the iOS runtime is configured in such a manner that a corresponding function of a native module is executed through a common interface in a JavaScript API implementation unit and the result is transmitted to a web page again.

The web-native interface is a standardized version of the hardware or a specific application that can be accessed by a web browser. Developers can use either HTML tags or JavaScript objects, hardware native interfaces (eg, GPS, cameras, Safari on iPhone) that interface hardware specific features to the DOM level An application that interfaces with a specific application or middleware functionality built into the device to enable it to be used at the DOM level (for example, by exposing the functionality of a local address book or middleware that manages a calendar to a browser interface, To display data on a web page or to pass it to a server, and the <video> tag of HTML5). Also, since the video output function implemented through the plug-in is drawn in another window, there is not much control in the web browser, but video is output in the same memory space where the <video> The result is that canvas or SVG can be applied to various effects on video.

Hereinafter, an embodiment of developing a web application using the integrated platform configured as described above will be described with reference to the flowchart of FIG.

As a first step (S101), an application project is created in the studio 200 through the UI framework 400 of the integrated platform of the web application. Specifically, a new project is created using the studio 200, and the project type is set to a proper form including a smartphone. Make sure that the project is created.

Next, as a second step (S102), design is performed using the authoring tool 100 through the UI framework 400. [ Specifically, the authoring tool 100 forms a UI of a web application to be developed. At this time, the configuration of the UI is largely divided into three parts (parts 1 to 3). Hereinafter, the configuration and the elements related to the environment setting elements (e.g., id, class, and subid) in the UI will be omitted for convenience of description.

First, the first part (part 1) of the UI is to create a main page composed of tabs, and then the second part (part 2) of the UI is to click on the main page or each tab included therein (First page) shown in FIG. 1, and it is possible to generate a plurality of pages by creating at least one page box and designating id and class name for each box. The third part (part 3) of the UI creates a second page to be displayed when the first page or the tab included therein is clicked, and generates at least one page box and specifies only an id name for each box A plurality of pages can be generated.

Next, as a third step (S103), the authoring tool and the studio are interworked through the web application UI framework to perform coding. That is, the third step is to link the authoring tool 100 with the studio by coding. In order to add an event, a layout view of the added page is selected, an event to be added is selected from an event listener Select the script and save the current state.

If the integrated platform's notification window appears, switch to the Integrated Development Environment (IDE) window, add onclick events to the header of the main page, layout view of each page, and the on- , And after each function is added to main.js, the corresponding part is coded and stored. At this point, the function button_visible (t_f) function must be coded as a whole.

Next, as a fourth step (S104), a test is performed using an emulator. That is, the fourth step is to confirm the operation of the application through the emulator, and selects a project to execute the emulator and executes the emulator. Then, tap each tab of the created app to see if the page changes, whether it goes to the subpage of each page, or if the back button is pressed, it comes to the previous page. At this time, the element window of the inspector can be used to check the information of the desired element, and a refresh is also possible.

The fifth step (S105) and the sixth step (S107) are the steps of performing the test of the web application. Specifically, the fifth step is to check the function (S105) of the created web application through the browser (step S106) , Finds the index.html file in the project folder using Explorer and opens it through the browser and clicks each tab of the created app to see whether the page changes, whether to go to the subpage of each page, and whether to click the back button Page, and so on.

The sixth step S107 is a step of performing a test on the terminal using the build server. The build server setting is performed after selecting an option for each OS (for example, iOS, Android). And to perform the configuration (config), set the widget basic setting or OS corresponding to each terminal. For example, the above widget preference can set the necessary information and application settings for the widget, set the build target for Android, select the provisioning file path and certificate for the iPhone, save the setting status, Build). Finally, you can deploy the built application.

While the present invention has been particularly shown and described with reference to exemplary embodiments thereof, it is to be understood that the invention is not limited to the disclosed embodiments, but, on the contrary, I will understand the point. Accordingly, the technical scope of the present invention should be defined by the following claims.

100: authoring tool 200: studio
210: projector manager 220: code editor
230: Emulator 240: Debugger
250: Profiler 260: Build
270: Packager 300: Runtime platform
400: UI Framework 500: Build Server
600: Ecosystem

Claims (12)

An authoring tool that provides editors for editing various UI components;
Project manager and studio including code editor, emulator, debugger and profiler, build and packager;
Runtime platform; And
A UI framework integrating the runtime platform, the authoring tool, and the studio to provide a seamless web application development environment; Integration platform for web application authoring comprising a.
The method according to claim 1,
The integrated platform web application is an integrated platform for web application authoring, characterized in that based on standard web technologies such as HTML5, CSS3 and JS.
The method of claim 1, wherein the authoring tool,
Allow web applications to provide UI / UX optimized for various screen sizes for N-screen services;
Develop and manage UI layouts optimized for various screen sizes based on HTML-5 standard technology; or
Scalable to universal functionality for responsive web design that actively responds to external environments including weather, location, and sensors; An integrated platform for web application authoring comprising an N-screen editor.
The method of claim 1, wherein the authoring tool,
For developers who do not have CSS expertise, integration for authoring web applications, including a CSS-only editor that enables you to create, apply, and view CSS with simple option settings, making it easier to create more dynamic content. platform.
The method of claim 1, wherein the authoring tool,
An integrated platform for authoring web applications, comprising a resource editor for efficiently managing resources used in an application and optimizing the resources to induce compact application development by reducing loading performance and operating memory.
The method of claim 1, wherein the authoring tool,
An integrated platform for web application authoring comprising a plug-in widget structure.
The method of claim 1, wherein the studio
Seamlessly supporting a series of processes from development of HTML5-based web applications to services;
Supports modular development and management of UI logic and business logic through seamless interoperability with the authoring tool; or
An integrated platform for web application authoring that increases development productivity and efficiency through emulators, debuggers and profilers, build servers, or a combination that supports a variety of hardware profiles.
The method according to claim 1,
The integrated platform includes a build server for building a hybrid application; Integration platform for web application authoring, characterized in that for supporting a variety of packaging, including more.
The method according to claim 1,
The runtime platform provides the same functionality on various platforms through the same HTML based source;
Provides a variety of native features in the JavaScript API to improve the scope and level of implementation of the application; or
An integrated platform for web application authoring that features a plug-in architecture that allows 3rd parties to easily extend the functionality needed to develop services.
In a unified platform consisting of a studio that can author a web application through a seamless interworking with the authoring tool and the authoring tool that can design UI layout, animation and various effects,
A first step of creating a project of a web application in a studio and setting its type;
A second step of performing a UI design of a web application using an authoring tool;
A third step of developing the web application in cooperation with the authoring tool and a studio; And
The fourth step of testing the developed web application in a variety of ways; Web application authoring method comprising a.
The method of claim 10,
The second step may include a fifth step of generating a main page and setting its environment;
A sixth step of creating a first page to be displayed when the main page or a specific tab included therein is clicked and setting its environment; And
And a seventh step of generating a second page displayed when the first page or a specific tab included in the first page is clicked, and setting the configuration of the second page.
The method of claim 10,
The fourth step includes an eighth step of testing using an emulator;
A ninth step of testing through a browser; or
A tenth step of testing the terminal using a build server; And a step of performing at least one of the steps of the web application.

Images