Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드

오늘날 경쟁이 치열한 모바일 앱 환경에서는 앱 사용자를 효과적으로 참여시키고 적시에 정보를 제공하는 것이 중요합니다.

FCM(Firebase 클라우드 메시징)은 Firebase에서 제공하는 강력한 푸시 알림 서비스입니다. 이는 앱 사용자와 연결하고 참여를 유지하는 원활한 방법을 제공합니다.

이 튜토리얼에서는 FCM을 Flutter에 통합하는 방법을 살펴보겠습니다. 그 이점을 살펴보고 사용자 참여를 강화하고 앱 성능을 향상시킬 수 있는 실제 사례를 소개하겠습니다.

FCM(Firebase 클라우드 메시징)은 서버와 장치 간에 안정적이고 배터리 효율적인 연결을 제공합니다. iOS, Android, 웹에서 메시지와 알림을 무료로 전달하고 받을 수 있습니다.

이 튜토리얼에서는 Firebase를 백엔드 서비스로 사용하여 Flutter에서 FCM(Firebase Cloud Messaging)을 설정하고 사용하는 프로세스를 살펴보겠습니다. 주요 초점은 Android 구현에 있지만 프로세스가 iOS와 Android에서 유사하다는 점은 주목할 가치가 있습니다(몇 가지 구성 차이 있음).

우리가 다룰 내용은 다음과 같습니다:

Firebase에서 앱을 만드는 방법
Flutter에서 Firebase를 설정하는 방법
FCM 토큰을 사용하여 푸시 알림을 구현하는 방법

이 튜토리얼에서는 Firebase를 사용하여 Flutter에서 실행 중인 앱에 간단한 알림을 보내는 방법을 알아봅니다. 시작해 보겠습니다.

Firebase에서 앱을 만드는 방법

시작하려면 Firebase 콘솔에서 새 프로젝트를 생성하겠습니다. 프로젝트 설정, Firebase 클라우드 메시징 구성 방법, Flutter 앱에 필요한 자격 증명 및 구성 파일을 가져오는 방법 등 필요한 단계를 살펴보겠습니다.

계정이 없다면 앱을 만들기 전에 Firebase 콘솔에 가입해야 합니다. 회원가입 후 프로젝트를 만들어 보세요.

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 Firebase에서 프로젝트 만들기

프로젝트를 생성하는데 약간의 시간이 소요됩니다.

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 Firebase에서 프로젝트 생성

프로젝트를 생성하면 프로젝트 대시보드로 리디렉션됩니다.

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 Firebase 콘솔의 프로젝트 개요

Firebase 콘솔에서 프로젝트를 생성했다면 이제 Flutter 앱을 시작할 차례입니다.

Flutter에서 Firebase를 설정하는 방법

Visual Studio Code를 사용하여 간단한 Flutter 프로젝트를 만들었습니다. Flutter 프로젝트 구축에 익숙하지 않다면 이전 튜토리얼을 참조하세요. (이미 익숙하신 분들은 이 단계를 건너뛰셔도 됩니다.)

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 Android 기기에서 실행되는 간단한 Flutter 애플리케이션

Flutter 프로젝트에 Firebase를 통합해 보겠습니다. 이를 위해서는 Firebase CLI 명령줄 도구가 필요합니다. 이미 Firebase CLI를 설치했습니다. 아직 해보지 않았다면 공식 문서를 참고하세요.

그런 다음 Firebase CLI를 사용하여 Firebase에 로그인해야 합니다.

firebase login

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 FirebaseCLI를 사용하여 Firebase에 로그인

그러면 Firebase에 로그인할 수 있는 브라우저로 이동됩니다. 인증이 성공적으로 완료되면 다시 돌아오게 됩니다.

로그인에 성공하면 FlutterFire CLI를 설치해야 합니다. FlutterFire CLI를 사용하여 Flutter 앱을 Firebase에 연결하도록 구성할 수 있습니다. FlutterFire CLI를 활성화하려면 다음 명령을 실행하세요:

dart pub global activate flutterfire_cli

FlutterFire CLI는 Firebase 서비스를 Flutter 애플리케이션에 간편하게 통합하는 명령줄 인터페이스 도구입니다. Flutter 프로젝트에서 Firebase 플러그인을 추가, 구성, 관리하는 편리한 방법을 제공합니다.

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 FlutterFireCLI 설치

다음 단계는 firebase_core를 추가하는 것입니다. Flutter 프로젝트에 라이브러리를 추가하세요.

다음 명령은 firebase_core를 자동으로 추가합니다. 프로젝트의 pubspec.yaml에 종속성으로 패키지합니다. 파일을 다운로드하고 pub.dev에서 최신 버전의 패키지를 가져옵니다. . 이 명령을 실행한 후 firebase_core를 가져올 수 있습니다. Dart 파일에 패키징하고 Flutter 앱에서 Firebase 서비스를 사용하세요.

flutter pub add firebase_core

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 Firebase Core 패키지 설치

flutterfire configure 명령은 FlutterFire CLI를 사용하여 Flutter 프로젝트에서 Firebase 서비스를 구성하는 데 사용됩니다. 이 명령은 Firebase 인증, Firestore, 클라우드 메시징 및 기타 Firebase 서비스를 쉽고 효율적으로 설정하는 데 도움이 됩니다.

flutterfire configure

첫 번째 단계는 프로젝트를 선택하는 것입니다.

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 Flutter 앱을 Firebase 앱과 연결

다음은 플랫폼을 선택하는 것입니다. 여기는 안드로이드용으로 사용하고 있어서 안드로이드를 선택했습니다.

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 플랫폼 선택

구성이 성공적으로 완료되면 Firebase 앱 ID가 표시됩니다.

마지막으로 main.dart에 몇 가지 코드 변경 사항을 추가해야 합니다. 파일입니다.

다음 패키지를 가져옵니다:

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

main.dart의 기본 기능 내에서 Firebase 구성을 초기화하려면 다음 구성을 추가하세요. 파일입니다.

await Firebase.initializeApp(
 options: DefaultFirebaseOptions.currentPlatform,
);

좋습니다. Flutter 앱에서 Firebase 구성을 성공적으로 완료했습니다! 이 이정표를 축하하는 시간을 가져보겠습니다. Firebase 서비스 구성은 강력하고 기능이 풍부한 애플리케이션을 구축하는 데 있어 중요한 단계입니다.

FCM 토큰을 사용하여 푸시 알림을 구현하는 방법

푸시 알림을 위해 장치를 등록하고 각 장치에 할당된 고유한 FCM 토큰을 검색하는 프로세스를 구현하겠습니다. 이 단계는 특정 장치에 타겟 알림을 보내는 데 중요합니다.

Firebase 클라우드 메시징을 사용하여 기기에 푸시 알림을 보내는 구현을 살펴보겠습니다. Firebase 콘솔에서 알림 메시지를 구성하고 보내는 방법을 살펴보고 Flutter 앱 내에서 이러한 메시지를 처리하는 방법을 보여 드리겠습니다.

flutter pub add firebase_messaging

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 firebse 메시징 패키지 설치

다음으로 setAutoInitEnabled를 트리거해야 합니다. Flutter 앱에서 FCM(Firebase Cloud Messaging)의 자동 초기화를 활성화하는 기능입니다. 이는 앱이 시작될 때 FCM이 자동으로 기기 토큰을 초기화하고 검색한다는 것을 의미합니다.

main에 다음 함수 호출을 추가합니다. 방법:

import 'package:firebase_messaging/firebase_messaging.dart';
...
...
await FirebaseMessaging.instance.setAutoInitEnabled(true);

Flutter 앱을 실행하고 알림을 받았는지 확인해 보겠습니다.

Firebase 메시징 콘솔로 이동합니다. 첫 번째 메시지이므로 '첫 번째 캠페인 만들기'를 선택해야 합니다. 'Firebase 알림 메시지'를 선택하고 '만들기'를 클릭하세요.

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 샘플 테스트 메시지 템플릿

이제 메시지의 알림 제목, 텍스트, 이름을 입력해야 합니다.

그런 다음 아래 코드를 사용하여 테스트 목적으로 FCM 토큰을 수동으로 얻을 수 있습니다. 앱 인스턴스의 현재 등록 토큰을 검색하려면 getToken()를 호출하세요. main()에서 방법. 이 메소드는 알림 권한이 부여되지 않은 경우 사용자에게 알림 권한을 요청합니다. 그렇지 않으면 토큰을 반환하거나 오류가 있으면 거부합니다.

final fcmToken = await FirebaseMessaging.instance.getToken();
log("FCMToken $fcmToken");

콘솔에 인쇄된 FCM 토큰을 복사하여 "FCM 등록 토큰 추가" 입력 상자에 붙여넣습니다.

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 FCM 토큰을 사용하여 테스트 메시지를 보냈습니다

테스트 버튼을 클릭하세요. 타겟 클라이언트 장치(백그라운드에 앱이 있는)가 알림을 받아야 합니다.

Flutter에 Firebase 클라우드 메시징 통합:단계별 가이드 안드로이드 기기에서 푸시 알림을 받았습니다

만세! Android 기기에서 알림을 받았습니다. 알림을 클릭하면 기본적으로 앱이 열립니다.

알림을 탭하면 Android와 iOS 모두에서 기본 동작은 애플리케이션을 여는 것입니다. 애플리케이션이 종료되면 시작됩니다. 배경에 있으면 전경으로 가져옵니다.

여기서는 Firebase 메시징을 초기화하기 위한 기본 구성을 볼 수 있습니다.

main.dart


import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'firebase_options.dart';
void main() async {
 runApp(const MyApp());
 await Firebase.initializeApp(
 options: DefaultFirebaseOptions.currentPlatform,
 );
 final fcmToken = await FirebaseMessaging.instance.getToken();
 await FirebaseMessaging.instance.setAutoInitEnabled(true);
 log("FCMToken $fcmToken");
}

결론

이 튜토리얼에서는 FCM(Firebase Cloud Messaging)을 사용하여 Flutter에서 푸시 알림을 구현하는 필수 단계를 다루었습니다.

간략한 단계에 따라 Firebase를 설정하고, Flutter 프로젝트에 통합하고, 푸시 알림 기능을 구현할 수 있습니다.

원활하게 알림을 보내고 받는 기능을 통해 사용자 경험을 향상하고 앱 사용자와 효과적으로 소통할 수 있습니다. 향후 튜토리얼에서 더 많은 고급 주제와 기능을 기대해 주세요.

Flutter에 대해 더 자세히 알아보고 싶다면 내 이메일 뉴스레터(https://5minslearn.gogosoon.com/)를 구독하고 소셜 미디어에서 나를 팔로우하세요.

무료로 코딩을 배우세요. freeCodeCamp의 오픈 소스 커리큘럼은 40,000명 이상의 사람들이 개발자로 취업하는 데 도움을 주었습니다. 시작하세요