[ ionic2: push notification ] 아이오닉 서버를 이용한 FCM 푸시 알림 – 안드로이드

Ionic 클라우드 서버를 이용하면 구글 플래이 스토어에 앱을 등록하지 않아도 푸시 알림을 사용할 수 있다. 푸시 알림을 구현해 본 적이 없는 학생들에게는 푸시 알림이 이루어지는 과정을 보다 쉽게 이해할 수 있는 기회를 제공하는 것 같다.

 

안드로이드를 중심으로 한 ionic 2 push notification 설정법

 

ionic2 프로젝트를 하나 만든다.

ionic start ionic2push --v2

App ID 를 얻기 위해, 프로젝트 루트 디렉토리로 이동 후 다음 명령을 실행한다.

ionic io init

실행하면, ionic 사이트 로그인 아이디(이메일)과 암호를 물어 오는데, 자신의 계정 아이디와 암호를 입력한다. 가입되어 있지 않은 경우, 링크를 방문하여 회원가입을 해야한다.

 

아이디(이메일)와 암호를 입력하면, ionic 사이트 콘솔에 자동으로 앱을 등록해주고, 자신의 컴퓨터에 있는 프로젝트 폴더 ionic.config.json 파일 안에 앱 아이디(App ID)를 자동 생성해준다.

 

>> ionic.config.json

{
  "name": "ionic2push",
  "app_id": "2ssd3dkb34k",
  "v2": true,
  "typescript": true
}

 

firebase 홈페이지를 열고 로그인한 후, firebase console 페이지에서 프로젝트를 하나 생성한다. 생성이 되면, 프로젝트 리스트에서 방금 만든 프로젝트를 클릭하여 들어가면 다음과 같은 화면이 열린다.

 

왼쪽 상단에 있는 톱니바퀴 모양의 설정 아이콘을 클릭하면 ‘프로젝트 설정’이라는 메뉴가 있다. 이것을 클릭해서 들어가자.

 

‘설정’이라는 제목 아래 ‘클라우드 메시징’ 이라는 메뉴를 클릭하면, 우리에게 필요한 ‘서버키’와 ‘발신자 ID’가 표시된다.

이렇게 하여, push notification 에 필요한 자료들을 다 모았다.

  1. App ID
  2. FCM 서버키
  3. Sender ID (발신자 ID)

다시 https://apps.ionic.io/apps/ 으로 이동하여 우리가 만든 앱을 선택하면 앱 세팅 페이지로 넘어간다. 상단메뉴에서 가장 오른쪽에 있는 ‘Settings’를 클릭하면 다음과 같은 화면을 볼 수 있다.

 

왼쪽 세로 메뉴에서 ‘Certificate’을 클릭하고, ‘New Security Profile’이라고 적힌 녹색 버턴을 누르자.

 

적당한 Profile Name을 선택하고 Create 버턴을 누르면, 리스트에 방금 만든 프로파일이 표시된다. 프로파일 오른쪽에 회색으로 잘 보이지 않는 ‘Edit’ 을 클릭하면, 드디어  firebase에서 얻어온 ‘서버키’를 입력할 수 있는 화면으로 넘어간다. 아래 화면에서 노란색으로 된 입력란에 ‘서버키’를 붙여넣기 하고 ‘Save’를 누른다.

 

자신의 컴퓨터에 있는 프로젝트 폴더로 이동하여, 명령프롬프트에서 다음과 같이 입력한다. ionic cloud angular 라는 모듈을 설치하게 되는데, ionic 클라우드 서버를 앱이 사용할 수 있도록 해준다. ionic 서버를 통해 앱을 가동하고 푸시 알림을 보내려면 필수적으로 설치해야한다.

$ npm install @ionic/cloud-angular --save

또한, push 기능을 담당하는 cordova 프러그인도 설치해야한다. 아래 숫자로된 SENDER_ID 부분에는 우리가 위 Firebase 홈페이지에서 얻은 ‘발신자 ID’를 입력한다.

$ cordova plugin add phonegap-plugin-push --variable SENDER_ID=12341234 --save

이제 프로젝트 폴더안에 있는 파일들을 손볼 차례다. 각자 상황에 따라 코딩의 내용이 다를 테니, 주석처리된 부분만 확인하여 적절한 위치에 넣어주도록 한다.

>>src/app/app.module.ts

....
....
import { TabsPage } from '../pages/tabs/tabs';
//Cloud 세팅을 위한 컴포넌트 import.
import { CloudSettings, CloudModule } from '@ionic/cloud-angular'; 
//cloudSettings 상수 정의
const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'ionic.config.json 파일에 적혀있는 App ID',
  },
  'push': {
    'sender_id': 'firebase 에서 얻은 발신자 ID',
    'pluginConfig': {
      'ios':{
        'badge':true,
        'sound':true
      },
      'android': {
        'iconColor': '#343434'
      }
    }
  }
};

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings) //이 부분 삽입
 ],
....
.....

 

>> src/app/app.component.ts

...
...
import {
  Push,
  PushToken
} from '@ionic/cloud-angular';



@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = TabsPage;

  constructor(platform: Platform, public push: Push) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();

      this.push.register().then((t: PushToken) => {
        return this.push.saveToken(t);
      }).then((t: PushToken) => {
        console.log('Token saved:', t.token);
      });

      this.push.rx.notification()
        .subscribe((msg) => {
          alert(msg.title + ': ' + msg.text);
        });

    });

  }
}

참조: 링크(Cloud Set up), 링크(Push)

이제 푸시 알림에 필요한 설정이 끝났다. 프로젝트 루트로 이동하여 명령 프롬프트에서 다음을 실행하여, 안드로이드 에뮬레이터를 작동한다. (에뮬레이터 작동을 위해서는 안드로이드 스튜디오가 컴퓨터에 설치되어 있어야 한다.)

// 프로젝트에 android 플랫폼 추가
$ cordova platform add android
// android 에뮬레이터 실행
$ ionic run android

 

아이오닉 콘솔 페이지에서 우리가 만든 ionic2push 앱을 선택해서 들어가면, 다음과 같은 화면이 나온다.

 

상단 메뉴 두번째, ‘Push’ 라고 적힌 메뉴를 클릭하고 들어가면, 푸시 알림을 할 수 있는 페이지로 연결된다. ‘Create New Push’ 버튼을 클릭하면 원하는 메시지를 입력할 수 있는 창을 볼 수 있다.

 

※ 아이오닉 서버를 이용하지 않고, 자신이 운영하는 서버를 통할 수도 있다.  즉, node js backend 를 이용하는 경우에도 자신의 서버를 통해 push notification 이 가능하다. 참조 링크 당연히, 이 부분이 지원되었어야 할 것 같지만, cordova를 통해 지원이 된 것이최근의 일인 것 같다.

댓글 남기기