'2019/11'에 해당되는 글 1건

  1. 2019.11.10 코도바 플러그인을 맨드러보자
카테고리 없음2019.11.10 16:57

https://medium.com/ionic-and-the-mobile-web/how-to-write-cordova-plugins-864e40025f2

 

How to write Cordova Plugins

Cordova Plugins are one of the dark arts of hybrid app development, helping web apps running natively access the full power of the device…

medium.com

두가지 방법이 있다. 첫번째는 plugman toole로 빠르게 만들수 있고 또는 기존 플러그인을 복제하여 수정하는 방법이다.

여기서는 복제하여 수정하는 방법을 설명한다.

 

Cordova Device plugin이 선택되었다.

 

 

plugin.xml에 중요한 정보들이 기술된다. src 폴더에는 네이티브 코드가 플랫폼별로 있고 www폴더는 javascript코드가 있다. 

 

이제 나만의 플러그인을 만들기 위해 위코드를 작업을 하기 위한 폴더로 모두 옮겨보자

 

먼저  plugin.xml을 열어서 플러그인아이디를 변경한다. 

여기서는 my-cordova-plugin으로 정했다.

 

javascript code의 위치도 기술한다.

js-module은 실행된 js code에 대해 기술하며 clobber는 window변수를 의미한다. 여기서는 www/plugin.js가 로드되면 이 때 부터 window.MyCordovaPlugin으로 플러그인에 접근가능해진다.

 

다음으로는 지원한 플랫폼에 대해 기술한다.

 

config파일에서 안드로이드 패키지명과 플러그인에서 사용한 코도바 심볼에 대해서 기술하게 되는데 이 경우 MyCordovaPlugin이며 자바코드와 연결된다.

 

iOS의 경우는 

안드로이드와 비슷하다. 플러그인은 swift로 개발이 가능하나 코도바가 objc이어서 인터페이스하는데 비용이 좀 든다.

 

 

자바스크립트의 작성

www/plugin.js의 코드를 살펴보자

echo, getDate를 함수로 갖는 간단한 객체를 정의하고 있다. 실행 시 에 개발자는 다음과 같이 플러그인을 호출할 수 있다.

 

window.MyCordovaPlugin.echo('hello!', function() { // callback

});

 

이코드가 실행되는 순간 마법이 있어나게 되며 안드로이드 혹은 iOS의 네이티브 코드가 실행되어지고 그 결과를 콜백으로 받을 수 있다.

 

 

iOS 네이티브 작성

objc code파트이다. 헤더를 먼저 보자

 

이 헤더파일은 m파일과 대응된다.

 

이 메서드들은 js의 exec()가 실행될 때 호출된다. CDVInvokedUrlCommand 인자가 js로부터 전달한 인자를 넘겨주게 된다. 콜백은 한번만 사용할 지 반복적으로 사용([result setKeepCallbackAsBool]을 호출하여)할지 정할 수 있다.

 

결과를 반환해주려면 CDVPluginResult 객체를 만들고 commandDelegate로 넘겨주면 js까지 전달된다.

 

Android 플러그인 작성

iOS와 컨셉은 동일하다 문법적으로 약간 다를뿐. 다음 코드를 보자 src/android/com/example/MyCordovaPlugin.java

execute메서드 하나에서 action인자로 echo와 getDate메서드를 분기하여 처리하고 있다. 결과를 반환하는 방식은 비슷하다.

 

플러그인 테스트

타이핑 끝났으면 테스트를 하자. 

코도바플러그인을 테스트하려면 Cordova/PhoneGap/Ionic앱이 실행하기 위해 있어야 한다. 단독으로 동작하지 않는다.

 

Cordova 앱이 있다고 가정하면 다음과 같이 로컬에서 플러그인을 추가할 수 있다.

 

cordova plugin add --link ~/git/echo-plugin

 

--link플래그는 심볼릭링크로 플러그인을 추가하는것이며 플러그인을 다시 추가하지 않고 코드를 수정하고 빌드하고 실행할 수 있다는것을 의미한다. 하지만 javascript파트의 코드는 자동으로 업데이트 되지 않을수 있다. 이 때는 cordova rm my-cordova-plugin으로 빠르게 삭제하고 다시 추가하면 된다.

 

여기까지 기존 플러그인을 수정하여 적용하는 방법을 알아 봤다.

이는 좀 해키한 방법이며 권장하는 방법은 아니다.. 따라서 별로 이렇게 하고 싶지는 않다. 일을 빨리 하기 위해서는 이 방법도 괜찮겠지만 plugman으로 하는 방법에 대해서도 정리해서 포스팅할 생각이다!!

 

 

 

Posted by 삼스

댓글을 달아 주세요