플러터에서 파이어베이스 FCM 초보자용 사용방법 가이드

안녕하세요! 오늘은 플러터에서 파이어베이스 FCM(Firebase Cloud Messaging)을 사용하는 방법에 대해 자세히 알아보겠습니다. FCM은 모바일 앱에 푸시 알림을 전송하는 데 사용되는 무료 클라우드 서비스입니다.

이 가이드에서는 FCM을 사용하여 플러터 앱에 푸시 알림을 설정하는 방법, 알림 수신 및 처리, 그리고 알림 커스터마이징 방법까지 단계별로 안내해 드리겠습니다.

 

1. 프로젝트 설정

먼저, 플러터 앱과 FCM 프로젝트를 설정해야 합니다.

 

1.1 플러터 앱 설정

• 새로운 플러터 프로젝트 만들기:
  • Android Studio 또는 VSCode를 사용하여 새로운 플러터 프로젝트를 만듭니다.
  • 프로젝트 이름, Flutter SDK 버전, 최소 SDK 버전 등을 설정합니다.

1.2 파이어베이스 프로젝트 만들기

• 파이어베이스 콘솔에 접속합니다: https://console.firebase.google.com/
• 새로운 프로젝트를 만듭니다.
• 프로젝트 이름과 지역을 설정합니다.

2. FCM 설정

 

2.1 FCM 추가하기

• 파이어베이스 콘솔에서 왼쪽 메뉴에서 "Cloud Messaging"을 선택합니다.
• "앱 추가" 버튼을 클릭합니다.
• 플랫폼으로 "Android"와 "iOS"를 선택합니다.
• 각 플랫폼에 대한 설정을 완료합니다.

2.2 서버 키 얻기

• 파이어베이스 콘솔에서 "Cloud Messaging" > "프로젝트 설정" 메뉴로 이동합니다.
• "서버 키" 탭에서 "서버 키"를 복사합니다.
• 이 키는 나중에 앱에서 사용할 것입니다.

3. 플러터 앱에 FCM 추가하기

3.1 FCM 패키지 추가하기

• pubspec.yaml 파일에 다음 종속성을 추가합니다.

dependencies:
  firebase_core: ^1.10.0
  firebase_messaging: ^10.0.0

 

• pub get 명령어를 실행하여 패키지를 설치합니다.

3.2 FCM 설정하기

• main.dart 파일에 다음 코드를 추가합니다.

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // FCM 토큰 얻기
  final String fcmToken = await FirebaseMessaging.instance.getToken();
  print("FCM 토큰: $fcmToken");

  // FCM 알림 수신
  FirebaseMessaging.onMessageOpenedApp.listen((message) {
    print("알림 수신: ${message.notification.title}");
  });

  // FCM 알림 수신
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print("알림 수신: ${message.data['message']}");
  });
}

 

4. 알림 수신 및 처리

 

4.1 알림 수신

• 앱이 실행 중일 때 FCM 알림을 수신하면 onMessageOpenedApp 또는 onMessage 콜백 함수가 호출됩니다.
• 이 함수에서 알림 데이터에 액세스하고 적절한 처리를 수행할 수 있습니다.

4.2 알림 처리

• 알림 데이터를 사용하여 앱 UI를 업데이트하거나 백그라운드 작업을 트리거할 수 있습니다.
• 예를 들어, 새 메시지가 도착했음을 사용자에게 알리거나 새로운 데이터를 동기화할 수 있습니다.

5. 알림 커스터마이징

5.1 알림 제목 및 내용 설정하기

• FCM 콘솔에서 알림 제목, 내용 및 아이콘을 설정할 수 있습니다.
• 이 설정은 앱에 전송되는 알림의 모양과 느낌을 결정합니다.

5.2 알림 우선순위 설정하기

• FCM 콘솔에서 알림 우선순위를 설정할 수 있습니다.
• 알림 우선순위는 알림이 기기 화면에 표시되는 방식을 결정합니다.
• 높은 우선순위 알림은 낮은 우선순위 알림보다 더 눈에 띄게 표시됩니다.

5.3 알림 소리 및 진동 설정하기

• FCM 콘솔에서 알림 소리 및 진동을 설정할 수 있습니다.
• 이 설정은 알림이 수신될 때 재생되는 소리와 진동을 결정합니다.

6. 심화 기능

• 토픽: 특정 그룹의 사용자에게 알림을 전송하는 데 사용할 수 있습니다.
• 그룹 알림: 여러 기기에 동시에 알림을 전송하는 데 사용할 수 있습니다.
• 데이터 메시징: 알림에 사용자 정의 데이터를 포함하는 데 사용할 수 있습니다.

7. 참고자료

• 플러터에서 파이어베이스 FCM 사용하기 [유효하지 않은 URL 삭제됨]
• 파이어베이스 Cloud Messaging

8. 그대로 따라하기

1. pubspec.yaml에 들어가셔서 패키지 세팅을 해줍니다.

flutter pub add firebase_messaging

import 'package:firebase_messaging/firebase_messaging.dart';

flutter pub add flutter_local_notifications

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

 

fcm.dart

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:tester_share_app/widget/w.notification.dart';

class FcmManager {
  static void requestPermission() {
    //IOS Permission 대응
    FirebaseMessaging.instance.requestPermission();
  }

//FCM 초기화
  static void initialize() async {
    //FCM 토큰 가지고 오고 서버로 보내기
    final token = await FirebaseMessaging.instance.getToken();
    print('FCMtoken : $token');
    //Forground
    FirebaseMessaging.onMessage.listen((message) {
      final title = message.notification?.title;
      if (title == null) {
        return;
      }
      FlutterLocalNotification.showNotification(
          message.notification!.title, message.notification!.body);
    });

    //Background
    FirebaseMessaging.onMessageOpenedApp.listen((message) {
      final title = message.notification?.title;
      if (title == null) {
        return;
      }
      FlutterLocalNotification.showNotification(
          message.data['title'], message.data['body']);
    });

    // Not running -> initial lanch
    final firstMessage = await FirebaseMessaging.instance.getInitialMessage();
    if (firstMessage == null) {
      return;
    }
    FlutterLocalNotification.showNotification(
        firstMessage.data['title'], firstMessage.data['body']);
  }
}

Main.dart

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  FcmManager.initialize()
}

 

그대로 복사 붙여넣기 하면 간단히 구현될 거예요.

 

주의 : 파이어베이스 메시지 보내기에서 플러터인 경우 키: 값을 넣어야 정상 동작을 합니다.

주의 : 파이어베이스 에서 메시지를 보낼경우 키와 값을 반드시 설정을 해야 합니다.

( 키: click_action , 값: FLUTTER_NOTIFICATION_CLICK )

 

9. 마무리

 

이 가이드를 통해 플러터 앱에서 파이어베이스 FCM을 사용하는 방법을 익혔기를 바랍니다. 

FCM은 모바일 앱에 푸시 알림을 전송하는 강력한 도구이며, 이 가이드를 통해 앱에 알림 기능을 추가하는 데 도움이 되었으면 좋겠습니다.

궁금한 점이나 도움이 필요한 부분이 있으면 언제든지 질문해주세요.

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

나비일기장 [수발일기장] - Google Play 앱

 

 

 

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱