[ footballnour :: footballnour

[하이브리드 앱] 코르도바 - FCM 푸시알림 - NODE.JS (3편)입니다!


코르도바 - FCM 푸시알림 구현이 잘 되셨다면 클라우드메세징 서비스 대신 NODE.JS 에서


토큰을 이용하여 메세지를 보내는 방식입니다.


이 부분을 설명하기에 앞서 NODE.JS 의 기본을 아신다는 전제하에 진행하겠습니다~!


 NODE.JS 에서 보내기 위해서는 먼저 


 


npm install fcm-node

설치를 해주셔야 합니다~~



추후 서버의 요청에 다음과 같이 구현해 줍니다


각각의 옵션들은 https://www.npmjs.com/package/fcm-node 에 더 자세히 나와있으니


참고하시면 될듯합니다


               var FCM = require('fcm-node');

/** Firebase(구글 개발자 사이트)에서 발급받은 서버키 */
var serverKey = '서버키';

/** 안드로이드 단말에서 추출한 token값 */
// 안드로이드 App이 적절한 구현절차를 통해서 생성해야 하는 값이다.
// 안드로이드 단말에서 Node server로 POST방식 전송 후,
// Node서버는 이 값을 DB에 보관하고 있으면 된다.
var client_token = '토큰키'; //클라이언트에서 토큰주면 끝

/** 발송할 Push 메시지 내용 */
var push_data = {
// 수신대상
to: client_token,
notification: {
title: "N-OUR",
body: message,
sound: "default",
click_action: "FCM_PLUGIN_ACTIVITY",
icon: "pushicon.png"
},
// 메시지 중요도
// "to":"/topics/all",
priority: "high",
// App 패키지 이름
restricted_package_name: "com.x.x", //config.xml 의 id
// App에게 전달할 데이터
"data": {
"title": "Notification title", //Any value
"message": "Notification body", //Any value
"param1": "value1", //Any data to be retrieved in the notification callback
"param2": "value2",
}
};

/** 아래는 푸시메시지 발송절차 */
var fcm = new FCM(serverKey);

fcm.send(push_data, function (err, response) {
if (err) {
console.error('Push메시지 발송에 실패했습니다.');
console.error(err);
return;
}

console.log('Push메시지가 발송되었습니다.');
console.log(response);
});



여기까지하시면  코르도바 - FCM 푸시알림 - NODE.JS 의 구현이 모두 완료가 됩니다.


쉬우신가요??


오픈카톡방에서 하이브리드 앱(코르도바 아이오닉)의 정보 공유를 하고있습니다^^


https://open.kakao.com/o/gDuyxh5 


참여하셔서 언제든지 글남겨주세요~~




코르도바 - FCM 푸시알림 - NODE.JS (2편)입니다!


IOS는 따로 구현하기에 앱 내부 설정 사항이 조금 많습니다..


여기서 다루기에 광범위하기에 따로 포스팅 할 예정입니다. 참고해주세요^^


여기서는 android 설정을 알려드리겠습니다.


간단합니다.


https://console.firebase.google.com/  에서 프로젝트를 하나 추가해주세요





안드로이드 앱을 추가해주시고


자신의 com.test.test 와같이 패키지 이름을 등록하시면 되는데


반드시 자신의  프로젝트 파일 내부의 config.xml 의 id 명과 동일하게 입력하셔야 합니다






다음으로 google-services.json 파일을 자신의 프로젝트 파일에 다운받아주세요.


다운 받을 위치는 코르도바 프로젝트 폴더 들어가자 마자 입니다.


www폴더나  다른 폴더의 내부가 아닙니다


다 하셨습니다.


쉽나요??


잘 설치 되었는지 이제 cordova platform add android@7.0.0 을 하셔서


json 파일이 정상적으로 함께 들어가게 해주세요.


정리하면


1. 프로젝트 추가 및 프로젝트네임 과  config.xml 의 id  일치


2. json 파일 다운로드 


3. platform add android@7.0.0


자 이제 푸시 보내기를 테스트 해보면 됩니다. 







딱 이부분에서 엄청난 시간을 소요했습니다..


여기 위 Cloud Messaging 에서 입력 후 보내시면 됩니다...가 정상인데


저는 이상하게 안오는것입니다... 다른게 오류인 줄 알고 이것저것 다 수정해도 안되었습니다..


아직 그 원인은 못찾았습니다. 


하지만 토큰을 이용한 1:1 푸시는 가능합니다.


이 전 포스팅에서 알려드렸던 토큰 받는 방식으로 


 코르도바 클라이언트 앱측에서 로컬 또는 db 에 저장 하였던 토큰으로 


위 테스트에서 넣어주면 정상적으로 푸시가 옵니다 ^^


왜안되는지... 지금도안되는지.... 이따 해보겠습니다 ^^


 어차피 서버에서 1:1로 푸시를 보내주기 때문에 저에겐 크게 


상관없었고 단체로 보내고 싶을땐 서버에서 코드를 짜면 되기에 넘어갔습니다.


혹시 이유를 아시는 분은 알려주심이...


여기까지 푸시가 정상적으로 오시면 정말 성공입니다~!


다음 편엔 마지막으로 서버 구현에 대한 포스팅을 하겠습니다


 node.js 로 방금처럼 푸시를 보내시고 싶으신 분은 


[하이브리드 앱] 코르도바 - FCM 푸시알림 - NODE.JS (3편)


참고해 주세요 ^^




오픈카톡방에서 하이브리드 앱(코르도바 아이오닉)의 정보 공유를 하고있습니다^^


https://open.kakao.com/o/gDuyxh5 


참여하셔서 언제든지 글남겨주세요~~



실수가 많은 부분


1. json 파일 다운로드 후 platform add android 안해주거나 미리 해주어서 platform/android 에 포함 안됨.


2. android@7.0.0 또는 ios@4.3.1 이 아닐경우


3. 프로젝트 이름과 app id 일치 







코르도바(클라이언트) - 구글 FCM - NODE.JS(서버) 를 이용한 푸시알림 구현을 다시 써보려고 합니다!


최근에 구현한거라 오류없이 모두들 잘 구현 하실 수 있도록 도와드리겠습니다!


푸시오는 그 짜릿함을 위하여 결론으로 바로 들어가겠습니다.


클라이언트 앱 부분입니다.


이전 하이브리드앱을 만들 때 사용하였던 푸시알림 플러그인으로는


cordova - plugin - firebase 를 사용하였습니다.


코르도바 자체도 그렇지만 이 플러그인 역시  오래 된 지라


IOS 버전 구현뿐만 아니라 다른 플러그인들(admob 등)과의 버그 등 오류가 있었습니다... 


혹시 안드로이드 푸시만을 사용하시려는 분이 계신다면


android@6.4.0 버전을 사용하시면 됩니다.


ios 버전은 시도해본 결과 제 기억으론 안되었던것으로 기억합니다..


혹시 되는 버전이 있다면 밑에 댓글로 남겨주시기 바랍니다^^ 다른 분께 도움이 될수 있으니..


저는 아이오닉 하이브리드앱을 만들다가 도중에 신기하게도 업데이트 된 플러그인


을 소개합니다.


cordova plugin add cordova-plugin-fcm-with-dependecy-updated


위의 플러그인을 설치하시고


android@7.0.0


ios@4.3.1 


버전으로 하시면 정확하게 사용하실 수 있습니다.


android 와 ios 둘다 


백그라운드, 포그라운드, 푸시내부데이터 전달까지 완벽하게 잘 작동하였습니다.


이것도 플러그인버전 플랫폼버전마다 되는것이 있고 안되는것이 있기에 


반드시 제가 찾은 위에 버전으로 하시면 됩니다 ^^




기본적인 코르도바 설치법과 사용법은 다른 포스팅에 하겠습니다. 그걸 참고해 주세요~


플러그인 설치가 다 되셨다면 


index.js  파일 내부 


onDeviceReady


안에


FCMPlugin.onNotification(
function (data) {
if (data.wasTapped) {
console.log("Push Notification tapped", data);
} else {
// this will be the state when app is already opened.
console.log("Push Notification", data);

}

},
function (msg) {
console.log('onNotification callback successfully registered: ' + msg);

},
function (err) {
console.log('Error registering onNotification callback: ' + err);
}
);




넣어주시면 됩니다. 1:1 기기에게 푸시를 보내려면 기기마다의 유일한 토큰이 필요합니다


FCMPlugin.getToken(function(token){
window.localStorage.setItem("token", token);
console.log("TOKEN FIREBASE : " + token);
}, function (error) {
console.error(error);
});



이 코드를 로직 상 원하는 곳에 추가 해주시면 알맞게 받아서 저장하거나 db에 보내거나 하여


필요시 서버에서 사용할 수 있습니다.



앱부분에서 할 일은 이게 다입니다.


어려운 부분은 없으셨나요??


오픈카톡방에서 하이브리드 앱(코르도바 아이오닉)의 정보 공유를 하고있습니다^^


https://open.kakao.com/o/gDuyxh5 


참여하셔서 언제든지 글남겨주세요~~


다음 구글 FCM 설정은 2편을 참고해주세요 ^^

+ Recent posts