2014년 11월 6일 목요일

폰갭(Phonegap) 3.0 외부플러그인 적용하기 - 푸쉬(push notification)

이제 또 필요한 기능이 푸쉬~ 기능인데요... (내부 notification 말구요... 외부에서 푸쉬하는거^^)

https://github.com/phonegap-build/PushPlugin 라는 곳이 있네요~

cordova plugin add https://github.com/phonegap-build/PushPlugin.git
라고 치고... 적용하면 될것 같은데... 역시 오류를 뿜네요~

오류에 대한 해결책은... https://github.com/phonegap-build/PushPlugin/pull/39 여기서 수정하라는 데로 모두 수정하시고,
옵션값 -d 를 주시고 플러그인 추가 하면 정상적으로 적용이 됩니다.

정상적이라면... src 폴더, config.xml, AndroidManifest.xml 파일, libs 폴더에 자동으로 파일 추가 및 수정이 되어 있을 겁니다.
(cordova 3.0 부터 이렇게 자동으로 수정해 주는건지... 아주 편리하고 좋습니다^^)

근데 assets\www 폴더에 PushNotification.js 파일이 없으므로, 잘 찾아서 copy만 해주시면 됩니다.
여기까지 세팅끝!


지금부터 PushNotification을 웹사이트에 심는 절차 입니다. (심는다는 표현이 ㅎㅎ)
기본적으로 js 파일은 불러와야 겠죠?
<script type="text/javascript" charset="utf-8" src="PushNotification.js"></script>

https://github.com/phonegap-build/PushPlugin 페이지에 Plugin API 부분 부터 script 태그 사이에 넣어 줍니다.
<script type="text/javascript" charset="utf-8">
    넣어주세용~
</script>

그럼 전체적으로 아래와 같은 소스가 됩니다.
자세히 보니 $. 쓰더라구요~ 그럼 jquery 불러온다고 말을 해줘야 하는데... 쯧쯧... 아무튼 눈치것 저는 추가했습니다.
그리고 device.platform 이라는 것도 보이는데... 이건 phonegap API Device 잖아~~~ 우뛰~
설치해 줍니다. 그냥 명령어만 치면 해줄게 없는줄 알았더니...
AndroidManifest.xml 파일에 <uses-permission android:name="android.permission.READ_PHONE_STATE" /> 한줄을 추가해 줘야 합니다. 우뛰~ 왜~ 자동으로 안들어가지남~ 우뛰~ (제가 너무 거져 먹을려고 한건지...)
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Notification Example</title>
 
    <script type="text/javascript" charset="utf-8" src="jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="PushNotification.js"></script>
    <script type="text/javascript" charset="utf-8">
        document.addEventListener("deviceready", onDeviceReady, false);
      
        function onDeviceReady() {
            var pushNotification;
            pushNotification = window.plugins.pushNotification;
     
            if (device.platform == 'android' || device.platform == 'Android') {
                pushNotification.register(successHandler, errorHandler,{"senderID":"본인의Project Number입력","ecb":"onNotificationGCM"});
            } else {
                pushNotification.register(tokenHandler, errorHandler,{"badge":"true","sound":"true","alert":"true","ecb":"onNotificationAPN"});
            }      
         
            $("#app-status-ul").append('<li>deviceready event received</li>');
         
            document.addEventListener("backbutton", function(e)
            {
                $("#app-status-ul").append('<li>backbutton event received</li>');
         
                if( $("#home").length > 0)
                {
                    e.preventDefault();
                    pushNotification.unregister(successHandler, errorHandler);
                    navigator.app.exitApp();
                }
                else
                {
                    navigator.app.backHistory();
                }
            }, false);
         
            // aditional onDeviceReady work…
        }
         
        // result contains any message sent from the plugin call
        function successHandler (result) {
            alert('result = '+result);
            //$("#app-status-ul").append('<li>result = '+result+'</li>');
        }
             
        // result contains any error description text returned from the plugin call
        function errorHandler (error) {
            alert('error = '+error);
            //$("#app-status-ul").append('<li>error = '+error+'</li>');
        }
                 
        function tokenHandler (result) {
            // Your iOS push server needs to know the token before it can push to this device
            // here is where you might want to send it the token for later use.
            alert('device token = '+result);
            //$("#app-status-ul").append('<li>device token = '+result+'</li>');
        }
  
        // iOS
        function onNotificationAPN(event) {
            if (event.alert) {
                navigator.notification.alert(event.alert);
            }
         
            if (event.sound) {
                var snd = new Media(event.sound);
                snd.play();
            }
         
            if (event.badge) {
                pushNotification.setApplicationIconBadgeNumber(successHandler, errorHandler, event.badge);
            }
        }
         
         
        // Android
        function onNotificationGCM(e) {
            $("#app-status-ul").append('<li>EVENT -> RECEIVED:' + e.event + '</li>');
 
            switch( e.event )
            {
                case 'registered':
                if ( e.regid.length > 0 )
                {
                    $("#app-status-ul").append('<li>REGISTERED -> REGID:' + e.regid + "</li>");
                    // Your GCM push server needs to know the regID before it can push to this device
                    // here is where you might want to send it the regID for later use.
                    console.log("regID = " + e.regID);
                }
                break;
 
                case 'message':
                    // if this flag is set, this notification happened while we were in the foreground.
                    // you might want to play a sound to get the user's attention, throw up a dialog, etc.
                    if (e.foreground)
                    {
                        $("#app-status-ul").append('<li>--INLINE NOTIFICATION--' + '</li>');
 
                        // if the notification contains a soundname, play it.
                        //var my_media = new Media("/android_asset/www/"+e.soundname);
                        //my_media.play();
                    }
                    else
                    {   // otherwise we were launched because the user touched a notification in the notification tray.
                        if (e.coldstart)
                            $("#app-status-ul").append('<li>--COLDSTART NOTIFICATION--' + '</li>');
                        else
                        $("#app-status-ul").append('<li>--BACKGROUND NOTIFICATION--' + '</li>');
                    }
 
                    $("#app-status-ul").append('<li>MESSAGE -> MSG: ' + e.payload.message + '</li>');
                    $("#app-status-ul").append('<li>MESSAGE -> MSGCNT: ' + e.payload.msgcnt + '</li>');
                break;
 
                case 'error':
                    $("#app-status-ul").append('<li>ERROR -> MSG:' + e.msg + '</li>');
                break;
 
                default:
                    $("#app-status-ul").append('<li>EVENT -> Unknown, an event was received and we do not know what it is</li>');
                break;
            }
        }      
    </script>
  </head>
  <body>
    <div id="home">
        <div id="app-status-div">
            <ul id="app-status-ul">
                <li>Cordova PushNotification Plugin Demo</li>
            </ul>
        </div>
    </div>
  </body>
</html>

여기까지를 클라이언트 라고 말하더군요~ 즉, 핸드폰에서 처리해야 할 부분...
여기까지 하고 앱을 구동해 보면 다음과 같은 화면이 나옵니다~ ㅎㅎ
아쉬운건 에뮬에서는 GCM 서버와 통신해서 regID 값을 불러오지 못하네요~
제 폰에서는 바로바로 되는데...
로그값에는 이런 경고문구가...
THREAD WARNING: exec() call to PushPlugin.register blocked the main thread for 92ms. Plugin should use CordovaInterface.getThreadPool().

제폰은 아래와 같이 나옵니다. 이렇게 나와야 정상입니다.
바로 나오는건 아니고.. 약 5초~10초 정도 지나야 나옵니다.


그 다음은 서버... 즉 메세지를 보낼곳에서 해야할 일입니다.
구글링 하면 아래와 같은 간단한 소스가 있습니다.

여기서도 보시면 Client, Server 두갈래로 나뉩니다.
위에서 코르도바 3.0 기준으로 클라이언트는 끝냈으므로, 서버쪽을 보고... php 구현을 합니다.
메세지를 전송하면 이렇게 오겠죠? ㅎㅎ


솔직히 여기까지 구현하는데... 좀 시간이 걸렸는데... 생략된 부분이 있습니다.

Create project... 생성후에  API Access 에서 Create new Server key... 를 생성해서

클라이언트에서는 senderID 값을 활용하고,
서버에서는 Google API Key 와 Device Registration ID 값을 활용해야 합니다.
(무슨 소리인지... 하시겠지만, 저도 push를 구현하면서 history를 좀 찾아보고 이해를 했습니다.)

안드로이드는 당연히 구글과 연동될수밖에 없고... 그중에서 무료로 제공해주는 GCM 이라는 서비스가 있다는 것이요~
push server와 제가 말했던 클라이언트, 서버에서의 서버는 서로 다른겁니다.

여기까지 했으니... 한번도 써보지 않은 iOS쪽 구현을 해봐야 할 것 같습니다.
결국 폰갭을 사용한다는 것은 여러가지 OS에서 함께 구현하고자 했던 것이니깐요^^;

그럼 다시 테스트 하러 휘리릭~
작성자: 시간:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)