[폰갭] 폰갭(PhoneGap) 플러그인 - 노티피케이션(Notification) 1

 

폰갭(PhoneGap) 플러그인 - 노티피케이션(Notification) 1

오랜만에 포스팅하네요.

오늘 소개해드릴 건 폰갭의 플러그 인 중 Notification 플러그인을 소개해드리려합니다.

그냥 웹브라우저의 Notification이 아닌 모바일 디바이스가 지원하는 Notification을 사용하는 방법입니다.

주의!!

어떤 이유인지는 모르나 플랫폼을 추가하고 빌드하기전에 플러그인을 설치하시기 바랍니다.

이미 빌드 후에 플러그인을 추가하여 실행하면 logcat에 cannot found error 가 발생됩니다.

 

먼저 이전 포스트인 폰갭 설치하기2를 참조하여 새로운 프로젝트를 만들고,

만들어진 프로젝트 폴더로 이동합니다.

cordova create 폴더명 com.앱개발자.앱이름 프로젝트명 cd 폴더명

폰갭의 플러그인 추가 명령어는 cordova plugin add '플러그인명' 입니다.

먼저 dialogs 플러그인을 추가합니다.

cordova plugin add org.apache.cordova.dialogs

 

 

다음과 같이 plugin registry가 화면에 나오고

다음 커맨드가 입력이 가능하면 성공적으로 설치된 것입니다.

 

 

다음으로 vibration 플러그인을 추가합니다.

cordova plugin add org.apache.cordova.vibration

 

 

마찬가지로 다음 커맨드가 입력이 가능하면 성공적으로 설치완료.

 

cordova plugin ls 명령어를 입력하면 현재 프로젝트에 어떤 플러그인이 설치되어있나 알 수 있습니다.

 

cordova plugin ls

 

 

설치할 플러그인들을 다 설치하였으면,

사용할 플랫폼을 추가하고 빌드시켜주면 됩니다.

저는 안드로이드 플랫폼을 설치하고 빌드했습니다.

 

cordova platform add android cordova build

성공적으로 빌드가 되면,

이클립스를 통해 프로젝트를 열었을 때

res/xml/config.xml 폴더 안에 다음과 같은 내용이 추가되어 있습니다.

 

 

AndroidMenifest.xml 파일에는 다음과 같이 추가되어 있구요.

 

 

자, 이제 프로젝트의 assets/www 폴더로 들어가보면

CLI가 만들어준 index.html과 js 파일등이 있습니다.

여기서 우리는 indext.html 파일만 건들 것 입니다.

 

 

index.html 파일을 열면 body 태그 안에 다음과 같이 코드를 삽입합니다.

<p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p>

그리고 스크립트 태그안에 다음과 같은 코드를 추가합니다.

document.addEventListener("deviceready", onDeviceReady, false); // device APIs are available function onDeviceReady() { // Empty } // alert dialog dismissed function alertDismissed() { // do something } // Show a custom alertDismissed function showAlert() { navigator.notification.alert( 'You are the winner!',// message alertDismissed, // callback 'Game Over', // title 'Done' // buttonName ); }</A></P>

 

deviceready 이벤트 리스너를 등록하고 이벤트 호출시 onDeviceReady라는 콜백 함수를 호출합니다.

모바일 디바이스가 사용 준비가 되면 onDeviceReady라는 함수를 호출 할 것 입니다.

 

추가한 a태그를 클릭하면 showAlert() 함수를 호출하는데 이곳에서

폰갭의 notification 플러그인이 사용됩니다.

notification.alert은 파라미터가 총 4개입니다.

navigator.notification.alert(message, alertCallback, [title], [buttonName])

첫번째 파라미터는 Alert창에 표시할 메시지를 넣는 곳이고,

두번째 파라미터는 Alert창이 닫혔을 때 호출할 콜백메서드를 넣을 곳입니다.

세번째는 Alert창의 제목입니다.  넣어도 되고 안넣어도 됩니다. 기본으로 alert이 표시됩니다.

네번째는 버튼의 이름입니다.. 기본으로 OK버튼이 들어갑니다.

 

실행 결과입니다.

 

화면 상단에 a 태그가 추가 되어있습니다.

클릭하면..

 

notification.alert을 호출한 결과나 나타납니다.

 

폰갭의 Notification 플러그인은 Alert말고도, Confirm, Prompt, Beep, Vibrate가 있습니다.

나머지 애들은 빠른 시간내에 포스팅 하도록 하겠습니다.

 

 

FIN.