Cordova 플러그인 만들기

플러그인이란?

플러그인(Plugin)은 Cordova로 작성된 하이브리드 앱에서 Native 기능을 사용하기 위해 작성한 코드의 패키지 입니다.

일반적으로는 웹뷰에서 사용할 수 없는 Native 기능들을 Plugin은 JavaScript 인터페이스와 함께 제공합니다.

Cordova 플러그인 사전 준비과정

Cordova Plugin 개발을 위해서는 Cordova 에서 제공하는 Plugman 모듈이 필요합니다.

Plugman은 Nodejs의 npm 또는 yarn으로 설치를 하게 됩니다. 본 문서에서는 npm으로의 설치를 사용합니다.

plugman을 전역에서 사용할 수 있도록 -g 옵션을 주어 설치했고, 설치 직후 plugman -v 명령어를 통해 설치 여부를 확인 할 수 있습니다.

또한 플러그인은 실제 Native 코드를 작성하게 되므로, Android SDK도 필요합니다.

Android SDK는 https://developer.android.com/studio/ 에서 Android Studio를 받거나, SDK를 직접 받아 설치할 수 있습니다.

Cordova 플러그인 개발환경 세팅

위의 사전 준비가 모두 끝나면 플러그인 개발을 위한 환경을 세팅합니다.

우선 Cordova 플러그인을 Cordova App에 설치한 뒤 실행할 수 있도록 Cordova Project를 생성합니다.
cordova역시 npm을 통해 설치할 수 있습니다.

이후 Cordova project에 Android platform을 추가 합니다.

Cordova Project는 다음 명령어를 통해 만들 수 있습니다.
cordova create [PATH] [ID] [NAME]

위의 명령어를 통해 프로젝트가 생성되었으면 아래와 같은 폴더구조를 확인할 수 있습니다.

이후 사용되는 모든 명령어는 samplePlugin 디렉토리 내에서 사용합니다.

Cordova 플러그인 기본 템플릿 생성

사전 준비과정에서 설치한 Plugman을 사용하면 Cordova 플러그인의 기본 템플릿을 생성 할 수 있습니다.

해당 명령어가 성공적으로 수행되면 프로젝트 아래에 testPlugin이라는 이름으로 새로운 폴더가 하나 생기는 것을 확인할 수 있습니다.

플러그인 폴더로 들어가서 다음 명령어를 사용합니다.

platform add 명령어를 사용하게 될 경우 testPlugin에 기본 템플릿이 생성된 것을 확인할 수 있습니다.

이제 위의 java파일을 통해 원하는 플러그인을 개발 할 수 있습니다.

Cordova 플러그인 구조

Cordova 플러그인을 이루고 있는 골자는 크게 다음과 같습니다.

1.     웹에서 사용하고자 하는 기능이 담긴 Native Code

2.     웹과 Native 간의 통신을 지원하는 javascript code

3.     플러그인 명세가 담긴 xml 파일

위의 골자를 바탕으로 본격적으로 플러그인을 작성합니다.

Cordova 플러그인 작성

플러그인 예제로 사용자로부터 입력받은 값을 Toast로 보여주는 Echo Plugin을 작성합니다.

1.    Native Code 작성

testPlugin.java를 아래와 같이 수정합니다.

작성한 코드는 1. 웹으로부터 받은 문자열을 Toast로 보여주고, 2. Toast로 띄운 텍스트를 웹에 다시 돌려주는 기능을 합니다.

2.    Plugin 명세 작성

    플러그인 명세는 xml파일로 되어 있으며, 플러그인은 위의 명세에 따라 platform에 설치됩니다.

3.    javascript interface

웹에서 Native 기능 호출을 위해 사용하는 javascript interface를 Cordova 플러그인 호출 방식에 맞게 작성합니다.

exports.toast를 통해 plugin명세에서 작성한 clobbers와 함께 호출할 수 있습니다.
(ex. cordova.plugins.testPlugin.toast)

toast 함수는 매개변수와 성공/실패 콜백 함수를 받으며 이 함수들은 Native Code의 callbackContext가 처리합니다.

4.   package.json 생성

위의 과정이 모두 끝나면 plugman을 통해 플러그인에서 사용하는 package.json을 작성할 수 있습니다.

플러그인 루트 디렉토리에서 plugman createpackagejson . 명령어를 사용하면 package.json에 들어가는 설정값을 입력 받고 package.json 파일을 생성합니다.

플러그인 설치

위에서 만든 toast 플러그인은 cordova 명령어를 통해 설치할 수 있습니다.

Cordova 프로젝트 루트에서 cordova plugin add --link 명령어를 통해 플러그인을 설치할 수 있습니다.

정상적으로 설치하게 되면 plugins 디렉토리 하위에 작성한 플러그인이 저장됩니다.

또한 작성한 플러그인 Native Code는 플랫폼 내부에 삽입됩니다.

플러그인 테스트

플러그인 설치까지 마무리가 되었으면, 실제로 플러그인을 테스트 할 수 있도록 테스트 코드를 작성합니다.

www/index.html은 사용자 입력을 받을 수 있도록 input을 추가합니다.

input에 값을 입력하고 버튼을 누르면 입력된 값이 Toast로 출력되는 형태입니다.

마찬가지로 www/js/index.js에서 button에 대한 이벤트를 추가합니다.

모든 Cordova Plugin은 deviceready 이벤트가 발생 한 이후 처리할 수 있습니다.

본 예제에서는 deviceready 이벤트 후 toastInit()을 통해 button에 클릭이벤트를 주어 처리하도록 했습니다.

위의 모든 코드 작성이 끝나면 cordova run android를 통해 실제 샘플 앱을 구동시킵니다.

위의 입력창에 안녕하세요를 넣고 버튼을 누르면 화면에 Toast창이 나오는걸 확인할 수 있습니다.

크롬 개발자도구에서 확인해보면 callback으로 값을 받는 것을 확인할 수 있습니다.

정리

https://cordova.apache.org/plugins/ 에서 Cordova가 제공해주는 플러그인들을 확인할 수 있습니다.

하지만 필요로하는 플러그인이 없다면 본 포스트를 바탕으로 직접 Cordova플러그인을 작성해 사용할 수 있는 예제가 되었으면 합니다.

본 포스트에서는 가장 간단한 플러그인을 만들어 봤지만 Activity를 활용한 데이터 전달, NDK, 데이터 통신 등 다양한 활용을 할 수 있으며, 이는 각자의 몫으로 남기겠습니다.