KR20120056472A - Mobile web application framework - Google Patents

Mobile web application framework Download PDF

Info

Publication number
KR20120056472A
KR20120056472A KR1020100118028A KR20100118028A KR20120056472A KR 20120056472 A KR20120056472 A KR 20120056472A KR 1020100118028 A KR1020100118028 A KR 1020100118028A KR 20100118028 A KR20100118028 A KR 20100118028A KR 20120056472 A KR20120056472 A KR 20120056472A
Authority
KR
South Korea
Prior art keywords
application
framework
native
web
web application
Prior art date
Application number
KR1020100118028A
Other languages
Korean (ko)
Inventor
김종탁
이광준
정학진
Original Assignee
주식회사 케이티
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 주식회사 케이티 filed Critical 주식회사 케이티
Priority to KR1020100118028A priority Critical patent/KR20120056472A/en
Publication of KR20120056472A publication Critical patent/KR20120056472A/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/174—Form filling; Merging
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/186—Templates

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Stored Programmes (AREA)

Abstract

PURPOSE: A mobile web application framework is provided to develop an application which is executable in all kinds of mobile platforms. CONSTITUTION: A native linking layer(30) links a native device of a mobile terminal and a native application. A Java script API layer(40) supplies a Java script API for coupling the native device and the native application. A UI framework layer(50) offers an application library and a UI component. A web application framework layer(60) supplies a function which is executed in an offline state.

Description

모바일 웹 어플리케이션 프레임워크{Mobile web application framework}Mobile web application framework

본 발명은 모바일 웹 어플리케이션 프레임워크에 관한 것이다.
The present invention relates to a mobile web application framework.

웹 상에서 재생산된 자원의 공유를 위한 환경을 제공하는 웹 2.0의 시대에 접어들면서 웹을 플랫폼으로 하는 웹 어플리케이션이 등장하고 있고, RIA(Rich Internet Application)에 대한 수요에 부응하기 위하여 기존의 데스크탑 어플리케이션과 유사한 기능을 수행하는 다양한 웹 어플리케이션들이 개발되고 있다. 모바일 웹 어플리케이션 프레임워크는 모바일 웹 어플리케이션의 개발을 위한 기반으로, 모바일 시스템과 OS에 의존적인 개발 툴 및 API에 대한 새로운 학습이 필요한 네이티브 어플리케이션 프레임워크(Native Application FrameWork)를 보완하여 쉽게 어플리케이션을 개발할 수 있는 개발환경을 제공한다. 하지만, 모바일 어플리케이션 프레임워크는 개발자가 웹 어플리케이션 플랫폼에 대한 학습이 선행되어야 하므로 웹 어플리케이션 개발에 시간과 비용이 증가하는 문제가 있다.In the era of Web 2.0, which provides an environment for sharing resources reproduced on the Web, web applications based on the web have emerged. In order to meet the demand for RIA (Rich Internet Application), existing desktop applications and Various web applications that perform similar functions are being developed. The mobile web application framework is the foundation for the development of mobile web applications. The mobile web application framework complements the Native Application FrameWork, which requires new learning about mobile system and OS-dependent development tools and APIs. Provide a development environment. However, the mobile application framework has a problem in that time and cost increase in web application development because the developer must first learn about the web application platform.

최근에 하이브리드 방식의 크로스 플랫폼 모바일 어플리케이션 프레임워크가 등장하였다. 하지만, 이러한 하이브리드 방식은 플랫폼에 따라 서로 다른 개발 환경을 필요로 하는 문제점이 있다.
Recently, a hybrid cross-platform mobile application framework has emerged. However, this hybrid method requires a different development environment depending on the platform.

본 발명은 모바일 웹 어플리케이션의 개발에 있어서 모바일 환경에 적응하면서 기존의 웹 개발 방식과 언어 및 환경을 그대로 적용하여 저비용으로 웹 어플리케이션 개발이 가능한 모바일 웹 어플리케이션 프레임워크를 제안하는 것이다.
The present invention proposes a mobile web application framework capable of developing a web application at low cost by adapting the existing web development method, language, and environment while adapting to a mobile environment in the development of a mobile web application.

본 발명의 일 측면에 따르면, 모바일 웹 어플리케이션 프레임워크가 개시된다.According to one aspect of the invention, a mobile web application framework is disclosed.

본 발명의 실시예에 따른 모바일 웹 어플리케이션 프레임워크는 모바일 단말의 네이티브 디바이스와 네이티브 어플리케이션을 연동시키는 네이티브 연동 계층, 상기 네이비브 디바이스와 상기 네이티브 어플리케이션의 연동을 위한 자바 스크립트 API를 제공하는 자바스크립트 API 계층, 어플리케이션 라이브러리 및 UI 컴포넌트를 제공하는 UI 프레임워크 계층 및 웹 어플리케이션이 오프라인 상태에서 실행되는 기능을 제공하는 웹앱 프레임워크 계층을 포함한다.
The mobile web application framework according to the embodiment of the present invention provides a native interworking layer for integrating a native device and a native application of a mobile terminal, and a JavaScript API layer for providing a JavaScript API for interworking the naive device and the native application. , A UI framework layer that provides an application library and UI components, and a web app framework layer that provides a function of executing a web application offline.

본 발명은 모바일 웹 어플리케이션 프레임워크를 이용하여 기존과 동일한 웹 개발 환경에서도 모든 종류의 모바일 플랫폼에서 실행이 가능한 어플리케이션을 개발할 수 있다.The present invention can develop an application that can run on all kinds of mobile platforms in the same web development environment using the mobile web application framework.

또한, 본 발명은 웹 개발 환경하에서 단말 내부의 자원 및 컨텐츠를 활용하고, 항상 실행 가능한 어플리케이션을 개발할 수 있다.
In addition, the present invention can utilize the resources and content in the terminal under the web development environment, and can develop an application that is always executable.

도 1은 기존의 모바일 웹 어플리케이션 프레임워크의 구조를 예시한 도면.
도 2는 모바일 웹 어플리케이션 프레임워크를 탑재한 단말의 소프트웨어 구성을 예시한 구성도.
도 3은 모바일 웹 어플리케이션 프레임워크의 구성을 나타낸 구성도.1 illustrates the structure of an existing mobile web application framework.
2 is a configuration diagram illustrating a software configuration of a terminal equipped with a mobile web application framework.
3 is a block diagram showing the configuration of a mobile web application framework.

본 발명은 다양한 변경을 가할 수 있고 여러 가지 실시예를 가질 수 있는 바, 특정 실시예들을 도면에 예시하고 이를 상세한 설명을 통해 상세히 설명하고자 한다. 그러나, 이는 본 발명을 특정한 실시 형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다.The present invention may be variously modified and have various embodiments, and specific embodiments will be illustrated in the drawings and described in detail with reference to the accompanying drawings. It should be understood, however, that the invention is not intended to be limited to the particular embodiments, but includes all modifications, equivalents, and alternatives falling within the spirit and scope of the invention.

본 발명을 설명함에 있어서, 관련된 공지 기술에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우 그 상세한 설명을 생략한다. 또한, 본 명세서의 설명 과정에서 이용되는 숫자는 하나의 구성요소를 다른 구성요소와 구분하기 위한 식별기호에 불과하다.In describing the present invention, when it is determined that the detailed description of the related known technology may unnecessarily obscure the subject matter of the present invention, the detailed description thereof will be omitted. In addition, numerals used in the description of the present invention are merely an identifier for distinguishing one component from another.

또한, 본 명세서에서, 일 구성요소가 다른 구성요소와 "연결된다" 거나 "접속된다" 등으로 언급된 때에는, 상기 일 구성요소가 상기 다른 구성요소와 직접 연결되거나 또는 직접 접속될 수도 있지만, 특별히 반대되는 기재가 존재하지 않는 이상, 중간에 또 다른 구성요소를 매개하여 연결되거나 또는 접속될 수도 있다고 이해되어야 할 것이다.In addition, in the present specification, when one component is referred to as "connected" or "connected" with another component, the one component may be directly connected or directly connected to the other component, but in particular It is to be understood that, unless there is an opposite substrate, it may be connected or connected via another component in the middle.

이하, 본 발명의 실시예를 첨부한 도면들을 참조하여 상세히 설명하기로 한다. 본 발명을 설명함에 있어 전체적인 이해를 용이하게 하기 위하여 도면 번호에 상관없이 동일한 수단에 대해서는 동일한 참조 번호를 사용하기로 한다.
Hereinafter, embodiments of the present invention will be described in detail with reference to the accompanying drawings. In the following description of the present invention, the same reference numerals will be used for the same means regardless of the reference numerals in order to facilitate the overall understanding.

우선, 도 1을 참조하여 기존의 모바일 웹 어플리케이션 프레임워크(Mobile web application framework)의 문제점을 살펴보도록 한다. 도 1은 기존의 모바일 웹 어플리케이션 프레임워크의 구조를 예시한 도면이다. 도 1에 예시된 모바일 웹 어플리케이션 프레임워크는 애플사 아이폰(iPhone)의 WAF를 예로 든 것이다. First, the problem of the existing mobile web application framework will be described with reference to FIG. 1. 1 is a diagram illustrating the structure of an existing mobile web application framework. The mobile web application framework illustrated in FIG. 1 is an example of WAF of an Apple iPhone.

도 1을 참조하면, 기존의 모바일 웹 어플리케이션 프레임워크는 HTML, 자바스크립트 및 CSS(Cascade Style Sheet)에 의해 구성되며, 클라이언트 측에는 HTML, CSS, 자바스크립트(또는 AJAX)에 의하는 웹 브라우저와, HTML 또는 CSS 및 자바스크립트에 의하는 파일시스템을 구비하며, 자바스크립트 및 CSS에 의한 기능 확장으로 모바일 내의 데이터베이스와의 연동 및 애니메이션 등이 가능하도록 하고 있다. 이와 같은 기존의 웹 어플리케이션 프레임워크는 HTML에 의한 UI 구성이 가능하여 간단한 웹 어플리케이션의 개발을 용이하게 하였고, 다양한 어플리케이션이 개발되어 모바일 단말에 탑재됨에 따라 장치의 활용성을 극대화 할 수 있게 되었다.Referring to FIG. 1, the existing mobile web application framework is composed of HTML, JavaScript, and Cascading Style Sheets (CSS). On the client side, a web browser based on HTML, CSS, JavaScript (or AJAX), and HTML Or, it has a file system based on CSS and JavaScript. The function is extended by JavaScript and CSS to enable interworking and animation with a database in mobile. Such an existing web application framework enables the UI configuration by HTML to facilitate the development of simple web applications, and as the various applications are developed and mounted on the mobile terminal, the utilization of the device can be maximized.

한편, 모바일 웹 어플리케이션 프레임워크에서 UI 로직과 어플리케이션 로직은 모두 자바스크립트(또는 AJAX)에 의해 구성되므로 표현과 로직의 구분이 되지 않는 구조로서, 웹 어플리케이션 개발자의 어플리케이션 개발의 전제로 해당 웹 어플리케이션 플랫폼의 SDK(Software Development Kit) 및 API(application programming interface)에 대한 학습이 선행되어야 한다. 그래서, 기존의 모바일 웹 어플리케이션 프레임워크는 웹 어플리케이션의 개발에 장시간이 소요되고 개발비용이 증가하는 문제점이 있다.On the other hand, since both UI logic and application logic are composed of JavaScript (or AJAX) in mobile web application framework, expression and logic cannot be distinguished. Learning about Software Development Kit (SDK) and application programming interface (API) should be preceded. Therefore, the existing mobile web application framework takes a long time to develop a web application and there is a problem that the development cost increases.

또한, 기존의 모바일 웹 어플리케이션 프레임워크는 웹 개발에 있어서 자바스크립트 및 CSS(Cascade Style Sheet)의 확장으로 기능을 추가하는 방식은 비표준 방식으로 지속적인 포팅이 필요하며, 항상 국제 표준에 의한 지원이 가능한 것이 아니며, 이에 의해 개발된 웹 어플리케이션은 브라우저(예컨대 애플사의 아이폰의 경우는 '사파리 브라우저')에 의존적인 구성이라는 한계성을 갖는다. 그리고, 기존의 모바일 웹 어플리케이션 프레임워크는 단말 내부의 자원 및 컨텐츠를 활용하는 웹 어플리케이션 개발이 매우 복잡하여 적용이 사실상 곤란하고, 웹 어플리케이션 개발자의 범위를 협소하게 하는 문제점이 있다.In addition, the existing mobile web application framework adds a function as an extension of JavaScript and Cascading Style Sheet (CSS) in web development, which requires continuous porting in a non-standard way, and is always supported by international standards. No, the web application developed by it is limited in its configuration, which depends on a browser (e.g., the "Safari browser" for Apple's iPhone). In addition, the existing mobile web application framework has a problem that the development of a web application that utilizes resources and contents inside the terminal is very complicated, so that application is practically difficult and narrows the scope of the web application developer.

최근에, 폰갭(Phonegap)과 같은 하이브리드 방식의 크로스 플랫폼 모바일 어플리케이션 프레임워크가 등장하였다. 이러한 하이브리드 방식은 웹 어플리케이션의 소스를 네이티브 어플리케이션 안에 내장하여 모바일 디바이스에는 어플리케이션처럼 설치하고 실행은 웹브라우저가 로컬에 있는 파일을 불러들이는 형태의 하이브리드 어플리케이션을 만들 수 있게 한다. 하이브리드 어플리케이션의 장점은 하나의 어플리케이션으로 아이폰, 안드로이드, 블랙베리, 팜프리 등 다양한 디바이스를 동시에 지원하는 멀티플랫폼 개발이 가능하고, 카메라, 주소록과 같은 디바이스 API 에 접근할 수 있는 방법이 제공되며, 아이폰 앱스토어, 안드로이드 마켓 등을 통한 어플리케이션 판매도 가능하다는 점이다. 그러나, 이러한 현재의 하이브리드 방식은 네이티브 어플리케이션을 위한 컨테이너를 제공하여 컴파일을 통해 네이티브 어플리케이션을 만드는 방법을 사용하므로, 기존의 웹 어플리케이션과는 달리 XCode, 이클립스 등의 플랫폼에 따라 서로 다른 개발 환경을 필요로 하는 문제점이 있다.
Recently, hybrid cross-platform mobile application frameworks such as Phonegap have emerged. This hybrid approach embeds the source of a web application in a native application, installs it as an application on a mobile device, and allows the web browser to create a hybrid application that loads a local file. The advantage of the hybrid application is that it is possible to develop a multiplatform that supports various devices such as iPhone, Android, Blackberry, and Palmfree as a single application, and provides a way to access device APIs such as camera and address book. It is also possible to sell applications through the App Store and the Android Market. However, this current hybrid method uses a method for creating a native application through compilation by providing a container for a native application, and thus requires a different development environment depending on platforms such as XCode and Eclipse unlike a conventional web application. There is a problem.

도 2는 모바일 웹 어플리케이션 프레임워크를 탑재한 단말의 소프트웨어 구성을 예시한 구성도이다.2 is a configuration diagram illustrating a software configuration of a terminal equipped with a mobile web application framework.

도 2를 참조하면, 모바일 웹 어플리케이션 프레임워크를 탑재한 단말의 소프트웨어는 오퍼레이팅 시스템(OS)(10), 웹브라우저(20), 모바일 웹 어플리케이션 프레임워크 및 사용자 어플리케이션(70)을 포함한다.Referring to FIG. 2, the software of the terminal equipped with the mobile web application framework includes an operating system (OS) 10, a web browser 20, a mobile web application framework, and a user application 70.

모바일 단말은 iOS, 안드로이드, 윈도모바일과 같은 오퍼레이팅 시스템(10)이 설치되어 있고, 그 위에 사파리, 오페라, 파이어폭스, 크롬 등과 같은 웹브라우저(20)가 설치된다.The mobile terminal is installed with an operating system 10 such as iOS, Android, Windows Mobile, and a web browser 20 such as Safari, Opera, Firefox, Chrome, etc. is installed thereon.

모바일 웹 어플리케이션 프레임워크는 웹브라우저(20) 위에서 구동된다. 여기서, 모바일 웹 어플리케이션 프레임워크는 도 2에 도시된 바와 같이, 네이티브 연동 계층(30), 자바 스크립트 API(Application Programming Interface) 계층(40), UI 프레임워크 계층(50) 및 웹앱 프레임워크 계층(60)을 포함한다.The mobile web application framework runs on top of the web browser 20. Here, as shown in FIG. 2, the mobile web application framework includes a native interworking layer 30, a JavaScript application programming interface (API) layer 40, a UI framework layer 50, and a web app framework layer 60. ).

사용자 웹 어플리케이션(70)은 모바일 웹 어플리케이션 프레임워크 위에서 구동된다. 개발자는 모바일 웹 어플리케이션 프레임워크 위에서 HTML, 자바스크립트 CSS와 같은 웹 표준만을 사용하여 사용자 웹 어플리케이션(70)을 개발할 수 있다.
The user web application 70 runs on a mobile web application framework. A developer may develop a user web application 70 using only web standards such as HTML and JavaScript CSS on a mobile web application framework.

도 3은 모바일 웹 어플리케이션 프레임워크의 구성을 나타낸 구성도이다.3 is a block diagram showing the configuration of a mobile web application framework.

도 3을 참조하면, 모바일 웹 어플리케이션 프레임워크는 네이티브 연동 계층(30), 자바 스크립트 API 계층(40), UI 프레임워크 계층(50) 및 웹앱 프레임워크 계층(60)을 포함한다.Referring to FIG. 3, the mobile web application framework includes a native interworking layer 30, a JavaScript API layer 40, a UI framework layer 50, and a web app framework layer 60.

네이티브 연동 계층(30)은 모바일 단말의 네이티브 디바이스(native device)와 네이티브 어플리케이션(native application)을 연동시킨다.The native interworking layer 30 associates a native device and a native application of the mobile terminal.

네이티브 연동 계층(30)은 네이티브 디바이스 인터페이스 모듈(31) 및 네이티브 어플리케이션 인터페이스 모듈(32)를 포함한다. 네이티브 디바이스 인터페이스 모듈(31)은 모바일 단말의 하드웨어를 제어한다. 네이티브 어플리케이션 인터페이스 모듈(32)은 모바일 단말에 내장된 네이티브 어플리케이션을 제어한다.The native interworking layer 30 includes a native device interface module 31 and a native application interface module 32. The native device interface module 31 controls the hardware of the mobile terminal. The native application interface module 32 controls the native application embedded in the mobile terminal.

자바 스크립트 API 계층(40)은 네이티브 디바이스와 네이티브 어플리케이션의 연동을 위한 자바스크립트 API를 제공한다.The JavaScript API layer 40 provides a JavaScript API for interworking native devices and native applications.

자바 스크립트 API 계층(40)은 네이티브 디바이스 인터페이스 API 모듈(41) 및 네이티브 어플리케이션 인터페이스 API 모듈(42)을 포함한다. 네이티브 디바이스 인터페이스 API 모듈(41)은 네이티브 디바이스 인터페이스를 자바스크립트로 사용 가능하게 한다. 네이티브 어플리케이션 인터페이스 API 모듈(42)은 네이티브 어플리케이션 인터페이스를 자바스크립트로 사용 가능하게 한다.JavaScript API layer 40 includes a native device interface API module 41 and a native application interface API module 42. The native device interface API module 41 makes a native device interface available in JavaScript. The native application interface API module 42 makes the native application interface available in JavaScript.

UI 프레임워크 계층(50)은 어플리케이션 라이브러리(Library)와 UI(User Interface) 컴포넌트(component)를 제공한다.The UI framework layer 50 provides an application library and a user interface (UI) component.

UI 프레임워크 계층(50)은 어플리케이션 런타임 모듈(51), 애니메이션 프레임워크 모듈(52), 레이아웃 매니저 모듈(53) 및 UI 컴포넌트 모듈(54)을 포함한다. 어플리케이션 런타임 모듈(51)은 개발된 웹 어플리케이션의 라이프 싸이클(Life Cycle)을 관리한다. 애니메이션 프레임워크 모듈(52)은 애니메이션 효과를 처리한다. 레이아웃 매니저 모듈(53)은 컴포넌트의 화면 배치를 동적으로 관리한다. UI 컴포넌트 모듈(54)은 사용자의 명령을 수행하는 화면의 구성 요소를 제어한다.The UI framework layer 50 includes an application runtime module 51, an animation framework module 52, a layout manager module 53, and a UI component module 54. The application runtime module 51 manages a life cycle of a developed web application. Animation framework module 52 processes animation effects. The layout manager module 53 dynamically manages screen layout of components. The UI component module 54 controls a component of a screen that performs a user's command.

웹앱 프레임워크 계층(60)은 오프라인 상태에서도 웹 어플리케이션이 실행 되는 기능을 제공한다.The web app framework layer 60 provides a function of running a web application even when offline.

웹앱 프레임워크 계층(60)은 어플리케이션 캐쉬 모듈(61) 및 웹앱 생성 매니저 모듈(62)을 포함한다. 어플리케이션 캐쉬 모듈(61)은 초기 접속 시 데이터를 캐쉬하여 오프라인 상태에서도 웹 어플리케이션이 구동되게 한다. 웹앱 생성 매니저 모듈(62)은 네이티브 어플리케이션과 동일한 형태로 웹 어플리케이션이 구동되게 한다.The web app framework layer 60 includes an application cache module 61 and a web app generation manager module 62. The application cache module 61 caches data during initial connection so that the web application can be driven even in an offline state. The web app generation manager module 62 allows the web application to run in the same form as the native application.

예를 들어, 웹앱 생성 매니저 모듈(62)은 애플사 아이폰에 구현된 것과 같이 "홈 화면에 추가" 기능을 제공하는 것이 가능하고, 하기의 HTML 코드를 사용하여 바탕화면의 아이콘을 제공하고 초기 스타트업 이미지를 설정하는 기능 등을 제공할 수 있다.For example, the web app creation manager module 62 may provide an "add to home screen" function as implemented in the Apple iPhone, and use the following HTML code to provide an icon of the desktop and initial startup. It can provide a function for setting an image.

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/><link rel = "apple-touch-icon" href = "/ apple-touch-icon.png" />

<link rel="apple-touch-startup-image" href="/startup.png"/><link rel = "apple-touch-startup-image" href = "/ startup.png" />

<meta name="apple-mobile-web-app-capable" content="yes"/><meta name = "apple-mobile-web-app-capable" content = "yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>

예를 들어, 웹앱 생성 매니저 모듈(62)은 아이콘 생성 모듈, 앱프레임워크 생성 모듈, 스타트업 이미지 생성 모듈을 포함할 수 있다. 아이콘 생성 모듈은 개발자가 해당 웹 어플리케이션의 아이콘 이미지를 설정하게 해주는 기능을 하고, 어플리케이션 런처와 연동하여 모바일 단말의 바탕화면에 아이콘 이미지에 연결된 웹 어플리케이션을 설치하는 기능을 한다. 앱프레임워크 생성 모듈은 웹 어플리케이션이 구동되는 윈도우 창을 주소창 등을 가지는 웹 브라우저의 형태가 아니라 일반적인 네이티브 어플리케이션의 형태의 프레임워크로 생성하는 기능을 한다. 스타트업 이미지 생성 모듈은 개발자가 웹 어플리케이션 구동 시 실행 환경이 완전히 로딩 될 때까지 화면에 출력되는 이미지를 설정하게 해주는 기능을 한다.
For example, the web app generation manager module 62 may include an icon generation module, an app framework generation module, and a startup image generation module. The icon generation module functions to allow a developer to set an icon image of a corresponding web application, and installs a web application connected to an icon image on a background of a mobile terminal in conjunction with an application launcher. The app framework generation module functions to create a window window in which a web application is driven, not a web browser having an address bar, but a framework of a general native application. The startup image generation module allows the developer to set the image displayed on the screen until the execution environment is completely loaded when the web application is started.

상기에서는 본 발명의 바람직한 실시예를 참조하여 설명하였지만, 해당 기술 분야에서 통상의 지식을 가진 자라면 하기의 특허 청구의 범위에 기재된 본 발명의 사상 및 영역으로부터 벗어나지 않는 범위 내에서 본 발명을 다양하게 수정 및 변경시킬 수 있음을 이해할 수 있을 것이다.
Although the above has been described with reference to a preferred embodiment of the present invention, those skilled in the art to which the present invention pertains without departing from the spirit and scope of the present invention as set forth in the claims below It will be appreciated that modifications and variations can be made.

10: 오퍼레이팅 시스템
20: 웹브라우저
30: 네이티브 연동 계층
40: 자바 스크립트 API(Application Programming Interface) 계층
50: UI 프레임워크 계층
60: 웹앱 프레임워크 계층
70: 사용자 웹 어플리케이션10: operating system
20: web browser
30: Native interworking layer
40: JavaScript Application Programming Interface (API) Layer
50: UI framework layer
60: Web app framework layer
70: user web application

Claims (8)

모바일 단말의 네이티브 디바이스와 네이티브 어플리케이션을 연동시키는 네이티브 연동 계층;
상기 네이비브 디바이스와 상기 네이티브 어플리케이션의 연동을 위한 자바 스크립트 API를 제공하는 자바스크립트 API 계층;
어플리케이션 라이브러리 및 UI 컴포넌트를 제공하는 UI 프레임워크 계층; 및
웹 어플리케이션이 오프라인 상태에서 실행되는 기능을 제공하는 웹앱 프레임워크 계층을 포함하는 모바일 웹 어플리케이션 프레임워크.
A native interworking layer for interworking a native device and a native application of the mobile terminal;
A JavaScript API layer that provides a JavaScript API for interworking the naive device and the native application;
A UI framework layer providing an application library and UI components; And
A mobile web application framework that includes a web app framework layer that provides the ability for web applications to run offline.
제1항에 있어서,
상기 웹앱 프레임워크 계층은
오프라인 상태에서 상기 웹 어플리케이션이 구동되도록 초기 접속 시 데이터를 캐쉬하는 어플리케이션 캐쉬 모듈; 및
상기 네이티브 어플리케이션과 동일한 형태로 상기 웹 어플리케이션이 구동되게 하는 웹앱 생성매니저 모듈을 포함하는 것을 특징으로 하는 모바일 웹 어플리케이션 프레임워크.
The method of claim 1,
The web app framework layer
An application cache module configured to cache data during initial access to run the web application in an offline state; And
A mobile web application framework comprising a web app creation manager module for causing the web application to run in the same form as the native application.
제2항에 있어서,
상기 웹앱 생성매니저 모듈은
개발자가 상기 웹 어플리케이션의 아이콘 이미지를 설정하게 해주는 기능을 하고, 어플리케이션 런처와 연동하여 모바일 단말의 바탕화면에 아이콘 이미지에 연결된 웹 어플리케이션을 설치하는 기능을 하는 아이콘 생성 모듈을 포함하는 것을 특징으로 하는 모바일 웹 어플리케이션 프레임워크.
The method of claim 2,
The web app creation manager module
A mobile device comprising a function of allowing a developer to set an icon image of the web application, and a function of installing a web application connected to an icon image on a desktop of the mobile terminal in conjunction with an application launcher. Web application framework.
제2항에 있어서,
상기 웹앱 생성매니저 모듈은
상기 웹 어플리케이션이 구동되는 윈도우 창을 네이티브 어플리케이션의 형태의 프레임워크로 생성하는 기능을 하는 앱프레임워크 생성 모듈을 포함하는 것을 특징으로 하는 모바일 웹 어플리케이션 프레임워크.
The method of claim 2,
The web app creation manager module
A mobile web application framework comprising an app framework generation module functioning to generate a window window in which the web application is driven into a framework of a native application.
제2항에 있어서,
상기 웹앱 생성매니저 모듈은
개발자가 상기 웹 어플리케이션 구동 시 실행 환경이 완전히 로딩 될 때까지 화면에 출력되는 이미지를 설정하게 해주는 기능을 하는 스타트업 이미지 생성 모듈을 포함하는 것을 특징으로 하는 모바일 웹 어플리케이션 프레임워크.
The method of claim 2,
The web app creation manager module
A mobile web application framework comprising a startup image generation module that allows a developer to set an image displayed on a screen until an execution environment is completely loaded when the web application is driven.
제1항에 있어서,
상기 네이티브 연동 계층은
상기 모바일 단말의 하드웨어를 제어하는 네이티브 디바이스 인터페이스 모듈; 및
상기 모바일 단말에 내장된 네이티브 어플리케이션을 제어하는 네이티브 어플리케이션 인터페이스 모듈을 포함하는 것을 특징으로 하는 모바일 웹 어플리케이션 프레임워크.
The method of claim 1,
The native interworking layer
A native device interface module for controlling hardware of the mobile terminal; And
A mobile web application framework comprising a native application interface module for controlling a native application embedded in the mobile terminal.
제1항에 있어서,
상기 자바스크립트 API 계층은
네이티브 디바이스 인터페이스를 자바스크립트로 사용 가능하게 하는 네이티브 디바이스 인터페이스 API 모듈; 및
네이티브 어플리케이션 인터페이스를 자바스크립트로 사용 가능하게 하는 네이티브 어플리케이션 인터페이스 API 모듈을 포함하는 것을 특징으로 하는 모바일 웹 어플리케이션 프레임워크.
The method of claim 1,
The JavaScript API layer
A native device interface API module that makes the native device interface available in JavaScript; And
A mobile web application framework, comprising a native application interface API module to enable native application interfaces in JavaScript.
제1항에 있어서,
상기 UI 프레임워크 계층은
개발된 웹 어플리케이션의 라이프 싸이클(Life Cycle)을 관리하는 런타임 모듈;
컴포넌트의 화면 배치를 동적으로 관리하는 레이아웃 매니저 모듈;
애니메이션 효과를 처리하는 애니메이션 프레임워크 모듈; 및
사용자의 명령을 수행하는 화면의 구성 요소를 제어하는 UI 컴포넌트 모듈을 포함하는 것을 특징으로 하는 모바일 웹 어플리케이션 프레임워크.




The method of claim 1,
The UI framework layer
A runtime module for managing a life cycle of the developed web application;
A layout manager module for dynamically managing screen layouts of components;
An animation framework module for processing animation effects; And
A mobile web application framework comprising a UI component module for controlling the components of the screen to perform a user command.




KR1020100118028A 2010-11-25 2010-11-25 Mobile web application framework KR20120056472A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020100118028A KR20120056472A (en) 2010-11-25 2010-11-25 Mobile web application framework

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020100118028A KR20120056472A (en) 2010-11-25 2010-11-25 Mobile web application framework

Publications (1)

Publication Number Publication Date
KR20120056472A true KR20120056472A (en) 2012-06-04

Family

ID=46608608

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020100118028A KR20120056472A (en) 2010-11-25 2010-11-25 Mobile web application framework

Country Status (1)

Country Link
KR (1) KR20120056472A (en)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101416089B1 (en) * 2012-08-06 2014-07-09 인크로스 주식회사 An integrated platform for authoring web applications and the authoring method thereof
KR101456505B1 (en) * 2012-08-06 2014-10-31 인크로스 주식회사 A user interface framework for developing web applications
KR101456508B1 (en) * 2012-11-30 2014-10-31 인크로스 주식회사 A data binding method for authoring web applications and the authoring tool by using the same
WO2020215833A1 (en) * 2019-04-26 2020-10-29 创新先进技术有限公司 Offline cache method and apparatus, and terminal and readable storage medium
US10880583B2 (en) 2019-04-26 2020-12-29 Advanced New Technologies Co., Ltd. Method, apparatus, terminal, and readable storage medium for offline caching

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101416089B1 (en) * 2012-08-06 2014-07-09 인크로스 주식회사 An integrated platform for authoring web applications and the authoring method thereof
KR101456505B1 (en) * 2012-08-06 2014-10-31 인크로스 주식회사 A user interface framework for developing web applications
KR101456508B1 (en) * 2012-11-30 2014-10-31 인크로스 주식회사 A data binding method for authoring web applications and the authoring tool by using the same
WO2020215833A1 (en) * 2019-04-26 2020-10-29 创新先进技术有限公司 Offline cache method and apparatus, and terminal and readable storage medium
US10880583B2 (en) 2019-04-26 2020-12-29 Advanced New Technologies Co., Ltd. Method, apparatus, terminal, and readable storage medium for offline caching

Similar Documents

Publication Publication Date Title
US20210049024A1 (en) Method and apparatus for loading multiple differing versions of a native library into a native environment
El-Kassas et al. Taxonomy of cross-platform mobile applications development approaches
WO2017050094A1 (en) Method and apparatus for loading application program
CN111381852A (en) Application dynamic updating method and device based on Flutter, storage medium and electronic equipment
US8694956B2 (en) PowerShell cmdlets code generating tool for communicating to the web services
WO2016177341A1 (en) Interface calling method and device, and terminal
RU2459238C2 (en) Managed execution environment for software application interfacing
CN110187910B (en) Thermal updating method, device, equipment and computer readable storage medium
Adetunji et al. Dawning of progressive web applications (pwa): Edging out the pitfalls of traditional mobile development
US9769052B2 (en) System testing framework
CN103488466A (en) Method and device for executing application program
CN103092654B (en) A kind of WebOS method and system of sing on web Kit
CN110389755B (en) Code processing method and device, electronic equipment and computer readable storage medium
KR20120056472A (en) Mobile web application framework
KR20220092615A (en) Just-In-Time Containers
RU2635891C2 (en) Installation mechanism and package format for parallelizable reliable installations
US20140101425A1 (en) Managing operating system components
CN111338925A (en) Applet test method, device and system, electronic equipment and storage medium
Kuitunen Cross-Platform Mobile Application Development with React Native
Thakur Evaluation and implementation of progressive web application
Rourke Learn WebAssembly: Build web applications with native performance using Wasm and C/C++
US9509761B2 (en) Open user interface
CN115113850A (en) Cross-platform application construction and operation method, server, terminal and system
CN116685946A (en) Reloading of updated shared libraries without stopping execution of an application
Burnette Google web toolkit

Legal Events

Date Code Title Description
WITN Withdrawal due to no request for examination