PhoneGap의 모든것 - 동작원리 (1)

PhoneGap

PhoneGap의 기본컨셉은 대부분의 모바일 플랫폼이 WebView를 가지고 있기 때문에 기본적인 기능들은 HTML과 CSS, Javascript로 만들어서 WebView에서 동작하게 하고 Device(Native)의 도움이 필요한 영역은 PhoneGap framework가 도움을 줘서 설치되어 동작하는 어플리케이션을 만들수 있는 방법을 제공 하는 것이다.

Apache Cordova

Adobe가 PhoneGap을 인수한 뒤에 PhoneGap을 Apache재단에 기부하였다. 그래서 Opensource가 되었고, PhoneGap 1.5 (Cordova) 버전부터 클래스 이름이 죄다 바뀌어 버렸다.

PhoneGap에서 제공하는 것들

WebView만으로는 구현이 어렵거나, Native의 도움이 필요한 기본 기능들은 PhoneGap API을 통해 사용 가능하다. 

지원하는 API 는 다음과 같다.

• 각각의 기능별로 예제 코드와 함께 정리가 잘되어 있어서 쉽게 적응할 수 있다.
• 각 API별로 지원하는 플랫폼이 명시 되어 있다. (iOS와 Android는 대부분 지원)

API Reference

http://docs.phonegap.com/en/1.5.0/index.html

Accelerometer : Tap into the device's motion sensor.

Camera : Capture a photo using the device's camera.

Capture : Capture media files using device's media capture applications.

Compass : Obtain the direction that the device is pointing.

Connection : Quickly check the network state, and cellular network information.

Contacts : Work with the devices contact database.

Device : Gather device specific information.

Events : Hook into native events through JavaScript.

File : Hook into native file system through JavaScript.

Geolocation : Make your application location aware.

Media : Record and play back audio files.

Notification : Visual, audible, and tactile device notifications.

Storage : Hook into the devices native storage options.

PhoneGap의 동작 원리

PhoneGap을 이용하여 만든 어플리케이션들도 결국에는 Native 어플리케이션으로 컴파일되어 설치 된다. Adobe AIR과 같이 코드가 바이너리로 설치 파일에 포함되는 형식이 아니라, Native 어플리케이션 위에서 PhoneGap이 동작하고 이 PhoneGap을 통해 Javascript로 만든 어플리케이션과 통신하는 과정을 통해 실행 된다. 하지만 Javascript는 Native와 다른 환경에서(WebView) 동작한다. JavaScript는 네이티브 코드와 데이터를 공유할 수 없다. 그래서 PhoneGap에서는 별도의 통신 방법을 만들어 웹뷰에서 네이티브 코드와 데이터를 교환한다. 각각의 플랫폼(iOS, Android...) 마다 WebView와 Native와 서로 통신하는 방법이 다르다. 이렇게 통신하는 방법이 다르기 때문에 PhoneGap에서 이를 지원한다. 이러한 방법이 PhoneGap이 동작하는 원리이다.

PhoneGap을 Native에서 동작하는 코드들과 (각각 플랫폼 마다 별개) cordova.js 과의 통신을 통해 동작한다. (Plugin이 있다면 Plugin을 제어 하는 코드들도 함께 동작) 

각각의 플랫폼마다 WebView와의 통신 방법이 다르므로 모두 언급할 수 없기에 대표적으로 iOS와 Android를 설명하면 다음과 같다. 더 자세한 내용은 여기를 참고하라.

IOS

Custom Scheme 이란? (예제)

tel:01012341234

kakaolink://sendurl?msg=[message]&url=[url]&appid=[appid]&appver=[appver]

gap://ready

iOS에서는 WebView에서 Native로 명령을 전달하고 받기 위한 방법으로 Custom Scheme를 사용한다. 아래와 같은 형식으로 WebView에서 호출하면 Native에서는 클래스(class), 함수(command) 그리고 함수에 전달될 인자(arguments) 를 통해 Native Code를 실행 한다.




yourscheme://<class>.<command>/[<arguments>][?<dictionary>]

반대로 Native Code에서 WebView로 명령은 iOS SDK의 stringByEvaluatingJavaScriptFromString를 이용한다.

NSString* status = @"Native To WebView!";

[webView stringByEvaluatingJavaScriptFromString:status];

Android

WebView에 있는 addJavascriptInterface를 통해 Javascript가 호출할 수 있는 코드정보를 미리 등록해서 이를 이용해서 WebView에서 Native코드를 실행한다.

등록

webView.addJavascriptInterface(new MyNativeAPI(), "MyNativeAPI");

Class MyNativeAPI {

public String whereAmI() {

return "I am in Native";

}

}

호출

MyNativeAPI.whereAmI();

반대로 Native Code에서 WebView로 명령은 WebView클래스의 loadUrl() 을 이용한다.

webView.loadUrl("javascript:alert('I am in WebView')");

PhoneGap을 사용하면 위에서 언급한 제공하는 API 만으로 어플리케이션을 구현하는데 부족함이 많다. 그래서 PhoneGap에서는 이 부족한 기능을 특정 플랫폼에 맞게 PhoneGap Plugin을 개발하여 사용할수 있다. (Adobe AIR의 Native Extention 이라 생각하면 되겠다) PhoneGap의 근본 취지와는 다르게 Plugin은 특정 플랫폼에 맞춰서 따로 따로 개발해 줘야한다. 2번째 문서에서는 간단히 PhoneGap Plugin을 개발하는 방법에 대해 다룰 것이다.