난장

먼저, Flutter를 시작하기 위해서 Dart라는 언어에 대해 공부가 필요하다.

나처럼 그냥 바로 Flutter를 시작할 수 있지만 얼마 후

나처럼 Dart를 시작할 것이다.

어렵지는 않지만

최소한 변수, 조건문, 반복문, 함수...... 등등등은 알아야 시작할 수 있지 않을까?

일단 그래서 다시 거꾸로

Flutter를 시작하기 전 상태로 Dart부터 좀 해보고 시작해보련다.

참고로 Dart 언어만을 가지고 테스트 하고자 한다면,  초기에 설치한 Android Studio에서는 Dart 언어만을 위한 프로젝트 생성이 안되므로 IntelliJ 나 Visual Studio Code(VSCode) 를 사용해 보는게 좋을 듯 하다.

나는 Mac에서 Visual Studio Code를 설치하고 테스트하고자 한다.

1. VSCode 설치하기

VSCode: https://code.visualstudio.com/

위의 링크로 들아가보면 다운로드를 버튼이 떡하니 보인다.

클릭하면, 바로 Getting Started 페이지가 보이고 다운로드가 시작된다.

VSCode-darwin-satable.zip 파일이 다운로드되고 더블 클릭하면 Mac에서 사용가능한 응용프로그램이 나온다.

응용프로그램을 자신의 맥의 응용 프로그램으로 이동하고

실행시켜 보자.

위 화면까지 나오면 VSCode 설치는 끝.

2. Dart 설치

Extensions에 들어가서 Dart를 검색하고 설치(install) 한다.

설치는 금방되고, 혹시 모르니 VSCode를 껐다가 다시 실행한다.

설치는 모두 끝.

프로젝트를 만들고 테스트 하는 건 다음 포스팅으로...

이번 포스팅에서는 앞에서 진행했던 작업들을 실제 시스템에 적용해 보는 시간을 갖도록 하겠다.

기본적으로 Android Studio 가 설치되어 있고, Flutter Plugin 도 설치되어 있다는 전재로 진행한다.

만약 설치하지 않았다면 전에 올린 자료를 참고해서 설치 필요!

2020/05/13 - [난장 Dev/Flutter] - Flutter - macOS 에 Flutter 설치하기

프로그램을 실행하면 아래와 같이 뜨고, 두번째 "Start a new Flutter project"를 클릭한다.

애플리케이션으로 진행해야 하므로 첫번째 "Flutter Application"을 선택.

프로젝트 이름은 편하게 작성해도 된다. test는 입력이 안되는 듯.

test_app로 입력하였다.

프로젝트 생성하면서 가장 중요한 "Package Name". FCM에서 입력했던 것과 동일하게 해야 한다. 프로젝트를 먼저 생성했다면 여기서 만든 패키지 이름을 FCM에서 설정해서 사용하여야 한다.

프로젝트가 생성되면 다음과 같은 화면으로 초기화 된다.

가장 먼저 해야하는 작업은 Firebase Cloud Messaging을 사용하기 위한 패키지를 등록해야 한다.

등록을 위해 다음 사이트로 접속한다. https://pub.dev 

그리고 packages 를 다음과 같이 검색한다.

" firebase messaging "

다른 패키지를 안써봐서 모르겠지만, firebase.google.com 에서 만든 거면 가장 알맞게 만들지 않았을까?

버전도 높고, 나도 이걸로 써봐서,,, 일단 클릭해서 들어가보자.

일단 여기에서 나온 내용을 차례대로 진행해 보면.

먼저 플러그인을 추가하는 작업부터 시작한다. "pubspec.yaml" 파일을 열어 추가한다.

아래는 추가한 거 캡쳐. 확대해서 확인하면 된다.

3번으로 표시된 "Pub get" 부분을 꼭 클릭해줘야 추가가 된다.

 firebase_messaging: 6.0.15

추가가 완료되면 다음과 같이 보여진다.

여기서부터는 내용이 길어지게 되어 구분해서 작성하고자 한다.

1. 안드로이드 설정

설명된 내용을 보면 아래와 같다.

첫 번째로 지난 포스팅에서 작성한 안드로이드 구성파일을 이 프로젝트에 등록하는 일이다.

"google-services.json"파일을 android/app 안에다 넣으면 된다.

두 번째 작업은 프로젝트 단의 gradle에 의존성을 추가해준다.

dependencies {
  // Example existing classpath
  classpath 'com.android.tools.build:gradle:3.5.3'
  // Add the google services classpath
  classpath 'com.google.gms:google-services:4.3.2'
}

위치를 잘 모르겠다면, 아래 캡쳐를 확인해서 넣도록 한다.

세 번째 작업은 app안에 있는 gradle에 추가하는 것이다. 이건 제일 아래에 추가만 해놓으면 된다.

apply plugin: 'com.google.gms.google-services'

이렇게만 놓으면 gradle에 넣었던 의존성 라이브러리들을 자동으로 가지고 올수가 없다. 귀찮지만 안드로이드 스튜디오를 프로젝트 단으로 실행할 필요가 있다.

위에서 작업한 창 오른쪽 위를 보면 "Open for Editing in Android Studio"가 보인다. 클릭한다.

클릭하면 프로젝트를 어떻게 열지 물어보는데, 현재 flutter를 끄지 않기 위해 "New Window"를 클릭하여 새 창으로 프로젝트를 연다

열면 알아서 다운로드가 시작되는데, 여유를 가지고 3분정도(?) 물론 환경에 따라 다르겠지만 완료가 된다.

완료가 되면 보이지 않았던 "firebase_messaging"가 보인다. 이러면 설정이 끝. 더이상 할 것이 없으므로 프로젝트를 종료한다.

네 번째로하는 것은 옵션인데... 그래도 혹시 모르니 추가는 해 놓고 시작하자.

<intent-filter>
      <action android:name="FLUTTER_NOTIFICATION_CLICK" />
      <category android:name="android.intent.category.DEFAULT" />
</intent-filter>

android/app/src/main/AndroidManifest.xml 을 열어 위 코드를 추가한다.

이제 안드로이드 설정이 종료되었다.

2. iOS 설정

iOS에서 하라는 내용은 좀 있는데, 전 단계에서 다 해놓은 거라 특별히 할 것이라곤 2번 만 하면 된다.

첫 번째로 Firebase의 안내에 따라서 푸시 인증에 필요한 인증서를 생성하라고 했는데 우린 firebase 설정을 이미 했기에... 모르겠다면 이전 포스팅 참조.

두 번째로 해야 하는 작업은 Firebase Console에서 다운 받은 파일을 등록하는 작업이다.

간단하게 지난 포스팅에서 다운로드한 "GoogleService-Info.plist"를 "ios/Runner"에 추가한다.

추가하고 나서 ios 폴더를 클릭한 상태에서 마우스 오른쪽을 누르고 "Flutter > Open iOS module in Xcode"를 눌러 Xcode를 실행한다.

Runner/Runner 폴더를 클릭하고 마우스 오른쪽 키를 누르고 "Add Files to "Runner"... "을 누른다

그리고 위에서 추가한 "GoogleService-Info.plist"를 선택하고 "Add"를 누른다.

정상적으로 추가된것이 확인 된다면 Xcode를 종료한다.

iOS 설정도 마무리 됐다.

이제 실제 앱에서 테스트 할 수 있도록 진행해보고자 한다.

3. main.dart 코드 수정

lib/main.dart를 열고 코드를 수정한다.

import 'package:flutter/material.dart';

import 'dart:io';
import 'package:firebase_messaging/firebase_messaging.dart';

final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Test',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('FCM'),
          ),
          body: MyHomePage(),
        )
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var tokens = '';
  @override
  void initState(){
    super.initState();
    _firebaseCloudMessaging_Listeners();
  }

  // 화면 리플래시...
  void _incrementToken(var item) {
    setState(() {
      tokens = item;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(tokens),
    );
  }

  // firebase
  void _firebaseCloudMessaging_Listeners(){
    if(Platform.isIOS) _iOS_Permission();

    // token
    _firebaseMessaging.getToken().then((token){
      print('token: $token');
      // 토큰을 출력
      _incrementToken( token );
    });

    // push notification
    _firebaseMessaging.configure(
      // 메시지가 왔을 때
      onMessage: (Map<String, dynamic> message) async {
        print('on message $message');

        // 메시지가 제대로 들어오는지 확
        if( message != null && message['notification']['title'] != null && message['notification']['body'] != null) {
          // 메시지 별 차이점 확인...

          // 메시지를 어케 받는지 확인 됐다면...
          showDialog(
            context: context,
            builder: (context) =>
                AlertDialog(
                  content: ListTile(
                    title: Text(message['notification']['title']),
                    subtitle: Text(message['notification']['body']),
                  ),
                  actions: <Widget>[
                    FlatButton(
                      child: Text('확인'),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                  ],
                ),
          );
        }

      },
      onResume: (Map<String, dynamic> message) async {
        print('on resume $message');
      },
      onLaunch: (Map<String, dynamic> message) async {
        print('on launch $message');
      },
    );
  }

  void _iOS_Permission(){
    _firebaseMessaging.requestNotificationPermissions(
        IosNotificationSettings(sound: true, badge: true, alert: true)
    );

    _firebaseMessaging.onIosSettingsRegistered.listen((IosNotificationSettings settings) {
      print("Settings registereded: $settings");
    });
  }
}

이제 푸시 서비스를 위한 모든 구성이 마무리 됐다.

테스트를 해보고 문제가 없는지 확인해 보자.

4. 테스트

테스트를 위해서 난 Postman을 사용하였다.

쉽고 간편하고 일단 남들이 올려 좋은게 있으니 테스트하기 너무 좋은 것 같다.

일단 Postman ( https://www.postman.com/downloads/ ) 에 접속해서 다운로드 받고 로그인까지 완료해 보자. 

실행하자마자 왼쪽 상단에 보이는 "New"를 클릭하자.

그리고 Templates 탭을 선택하고 검색어에 "firebase"를 입력한다. 그리고 보이는 "Firebase Notification REST API UMH"를 클릭한다.

Collections에 방금전 선택한 "Firebase Notification REST API UMH"를 확인하고 안에 있는 "Send Notification"를 클릭한다.

Headers에 입력해야 하는 키는 (  {{serverkey}} ) Firebase Console로 들어가 지금 작업 중인 프로젝트로 들어간다. 그리고 "클라우드 메시징" 을 클릭하면 보이는 서버 키가 위에 입력해야 하는 키이다. 길지만 모두 입력해야 하고, 남들에게 공개되지 않도록 보안에 신경써야 한다.

그리고 Body로 이동하면 기본 레이아웃이 있는데 난 테스트를 위해 아래와 같이 입력하였다.

{
  "priority":"HIGH",
  "notification":{
  	"title":"알림",
  	"body":"일반 알림인 경우"
  },
  "data":{
	"title":"T1",
	"message":"https://naan.co.kr"
  },
  "to":"디바이스 토큰 값"
}

참고로 디바이스 토큰 값이 있어야 해당 디바이스로 푸시메시지를 보낼 수 있는데 이건 일단 위에서 작업이 끝난 Flutter 프로젝트를 빌드하면 된다.

빌드하면 화면에 이 기기의 토큰 값이 출력된다. 이걸 이대로 일일이 쳐가면서 하는게 아니고 그 일을 대비해 console에 보면 토큰 값이 보이는 것을 확인할 수 있다.

여기에서 보이는 토큰 값을 가지고 입력하고 테스트를 진행해 본다.

푸시가 정상적으로 들어오면 아래와 같이 로그가 남겨진다.

화면은 아래와 같이 보여지게 된다.

이전다음

01

Firebase는 구글에서 만든건 아니고 2014년에 인수한 모바일 및 웹 애플리케이션 개발 플랫폼이다.

Google Console을 통해서 작업했던 것들이 대부분 Firebase로 옮겨진 것 같다.

이번에 해보려는 것은 앞에서 작성한

2020/05/14 - [난장 Dev/Flutter] - Flutter - Firebase Cloud Messaging 연동 - 2. Firebase 에 APNs Key 등록하기

에서 생성된 키를 Push 서비스 사용을 위해 Firebase에 등록하는 단계를 진행해보고자 한다.

먼저 Firebase 사이트에 들어가보자

https://console.firebase.google.com/

일단 로그인 하는 것은 알아서 할 수 있을터이니...

플레이 스토어에 올릴 생각이라면 같은 개발 계정을 하는 것이 좋지 않을까?

어쨌든 개발자로 로그인

기존 프로젝트는 무시하고 새로 만들어서 올려야 하니 "프로젝트 추가"를 누른다.

이름은 사용할 이름으로 하고, 이번 FCM 연동을 위한 테스트 이므로 Flutter Test라고 입력하고 진행해보겠다.

단계별로 진행하고 "계속"이 나오도록 구글 뜻대로 진행하면 된다.

애널리틱스 구성부분인데, 이게 은근히 편리하다. 어차피 만들어야 하니 새로 프로젝트명과 동일하게 해서 만들어 본다. 

동일한 이름이 아니여도 크게 상관은 없다.

위치도 선택하고, 아래 약관 3개 모두 체크해야 "프로젝트 만들기"가 활성화된다.

어차피 넘어가기 위해선 모두 체크해야 하니 어쩔수 없다...

완료 중인게 뜨고

완료가 뜨면 앞으로 사용할 프로젝트가 생성되었다.

프로젝트로 들어오면 "앱"을 추가해야 한다. 특별히 모든 단계를 할 필요는 없고, 가벼운 마음으로 iOS를 선택한다.

iOS 번들 ID는 중요하다. 보통 패키지라고 불리는데 모든 앱마다 고유한 패키지 정보를 가지고 있다. iOS와 안드로이드 모두 동일한 패키지를 사용하는게 좋을듯.

앱 닉네임까지 등록하고 "앱 등록"을 누른다.

앱이 등록되면 다음 단계를 진행할 필요가 없다.

왼쪽 상단에 보이는 "X"를 누르고 끈다.

iOS앱이 추가 된 것이 보이면, 이제 안드로이드를 추가해보도록 하자.

"앱 추가"를 누르고 안드로이드를 선택한다.

iOS에서 사용한 것과 동일한 패키지 이름을 작성했다. 달라도 상관없는데, Flutter에서 프로젝트를 생성하면 모두 동일하게 생성되니 그걸 염두해두고 동일하게 생성하는걸 다시 한번 추천한다.

역시나 앱 닉네임까지만 입력하고 "앱 등록"을 누른다.

나머진 진행하지 않아도 됨으로 왼쪽 상단에 보이는 "X"버튼을 눌러 종료한다.

이제 iOS와 안드로이드가 추가된 것을 보게 된다면 기본 설정은 끝이다.

이젠 전 단계에서 발급받은 키를 등록할 차례. iOS를 클릭하고 팝업 오른쪽에 보이는 기어 모양을 눌러 설정페이지로 들어간다.

 지금 바로 사용할 것은 Setting의 "클라우드 메시징" 부분이므로 바로 클릭한다.

 보이는 서버키는 Firebase 접속을 위해 꼭 필요한 정보이며, 외부에 공개되면 앱 전체에도 메시지를 보낼 수 있으므로 보안에 신경쓰도록 한다.

 일단 APN 인증 키 부분에 p8 파일과 키 ID, 팀 ID등을 입력해야 iOS환경이 마무리 된다.

APN 인증 키에 보이는 "업로드" 버튼을 클릭하면 다음과 같이 뜬다.

키를 생성하면서 다운받은 p8 파일을 등록하고 키 ID와 팀 ID를 입력, 그리고 "업로드"를 누른다.

이렇게 등록되어진다면, Firebase 세팅은 모두 완료 되었다.

그리고 상단에 보이는 탭을 "일반"으로 들어가면 하단에 내 앱에서 안드로이드와 iOS를 각각 클릭해서 구성 파일을 다운로드 받아 놓도록 한다.

추후 추가되어야 하니, 꼭 받아 놓도록 한다.

여기까지가 Firebase Cloud Messaging 을 사용하기 위한 설정을 마무리 했다.