[flutter] Firebase_core를 사용하여 플러터 앱에서 클라우드 메시징 구현하기

30 Nov 2023

flutter

Firebase는 많은 기능을 제공하는 플랫폼으로, 클라우드 메시징도 그 중 하나입니다. 클라우드 메시징을 사용하면 앱 사용자에게 푸시 알림을 보낼 수 있습니다. 이번 튜토리얼에서는 Firebase_core 패키지를 사용하여 플러터 앱에서 클라우드 메시징을 구현하는 방법에 대해 알아보겠습니다.

1. Firebase 프로젝트 설정

Firebase 콘솔에 가입하고 새 프로젝트를 만듭니다. 프로젝트 세팅에서 Firebase SDK 구성 파일을 다운로드합니다.

2. Firebase_core 패키지 추가하기

플러터 프로젝트의 pubspec.yaml 파일에 firebase_core 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.2.0

3. Android 설정

Firebase 콘솔에서 안드로이드 앱을 추가하고, 패키지명과 SHA-1 키를 입력합니다. 그 후에 google-services.json 파일을 프로젝트의 android/app 폴더에 추가합니다.

이어서 android/build.gradle 파일에서 buildscript 섹션에 다음 코드를 추가합니다.

dependencies {
    // ...
    classpath 'com.google.gms:google-services:4.3.10'
}

android/app/build.gradle 파일의 맨 아래에 다음 코드를 추가합니다.

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

4. iOS 설정

Firebase 콘솔에서 iOS 앱을 추가하고, Bundle Identifier를 입력합니다. 그 후에 GoogleService-Info.plist 파일을 프로젝트의 ios/Runner 폴더에 추가합니다.

5. 푸시 알림 보내기

Firebase 콘솔에서 “Cloud Messaging” 탭으로 이동하여 푸시 알림을 보낼 수 있는 서버 키를 확인합니다.

Firebase 콘솔에서 “Cloud Messaging” 탭으로 이동하여 알림을 보낼 수 있는 알림 양식 템플릿을 만듭니다.

플러터 앱에서 main.dart 파일을 열고 Firebase_core를 초기화합니다.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

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

Firebase 클라우드 메시징을 사용하여 푸시 알림을 보내고 받기 위해 firebase_messaging 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.2.0
  firebase_messaging: ^10.0.9

푸시 알림을 수신할 수 있도록 디바이스 토큰을 가져옵니다.

import 'package:flutter/material.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

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

class _MyHomePage extends State<MyHomePage> {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
  String? _token;

  @override
  void initState() {
    super.initState();
    _getToken();
  }

  void _getToken() async {
    String token = await _firebaseMessaging.getToken();
    setState(() {
      _token = token;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('푸시 알림 테스트'),
      ),
      body: Center(
        child: Text('디바이스 토큰: $_token'),
      ),
    );
  }
}

알림이 수신되면 알림을 처리하는 코드를 추가합니다.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    // 알림 수신 시 처리할 로직 작성
  });
  runApp(MyApp());
}

Firebase 콘솔에서 “Cloud Messaging” 탭으로 이동하여 푸시 알림을 보낼 수 있습니다.

결론

Firebase_core를 사용하여 플러터 앱에서 클라우드 메시징을 구현하는 방법을 알아보았습니다. Firebase 콘솔에서 푸시 알림을 생성하고, 플러터 앱에서 클라우드 메시징을 수신하도록 설정하면 앱 사용자에게 푸시 알림을 보낼 수 있습니다.

더 자세한 내용은 Firebase 공식 문서를 참조하세요.

목차

1. Firebase 프로젝트 설정

2. Firebase_core 패키지 추가하기

3. Android 설정

4. iOS 설정

5. 푸시 알림 보내기

결론