Firebase를 이용한 Messaging/Admob 설정
Firebase를 이용한 Messaging 구현하기
1. FCM(Firebase Clous Messaging)의 이해
1. 푸시 알림(push notification)의 다양한 사용
- 이메일 도착을 알리기 위해 처음 시작
- 정보 제공의 기능을 넘어 강력한 마케팅 도구로 주목받음
- 이벤트, 쿠폰, 신상품, 메시지 등 앱의 새로운 소식을 실시간으로 알림
- 앱의 참여율이나 매출을 높일 수 있음
2. FCM(Firebase Cloud Messaging) 서비스란?
Firebase에서 제공하는 푸시 알림 서비스
- FCM의 SDK를 이용해 앱에서 푸시 알림을 받을 수 있게 구현
- Firebase에 푸시 알림을 등록하면 사용자의 기기에 전송
2. Firebase를 이용한 Messaging 구현
1. Messaging 패키지 추가
pubspec.yaml 파일을 열고 dependencies 항목에 Firebase Messaging 패키지 추가
firebase_messaging: ^10.0.1
2. Firebase.initalizeApp 선언
main.dart로 이동하여 home에 FutureBuilder 위젯을 이용, Firebase.initalizeApp을 실행
3. _initFirebase Messaging(context) 호출
ConnectionState.done 완료 후 초기화 함수 _initFirebase Messaging(context) 호출
4. 토큰 이용하기
initFirebaseMessaging() 함수 아래에 _getToken() 함수 추가, 호출
앱 실행 후, 로그창에서 토큰 확인
=> 앱과 통신하는 토큰
=> 토큰을 이용하여 개별 푸시 메시지를 보낼 수 있음
=> 맞춤 푸시도 이런 방식으로 보내게 됨
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'memoPage.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
static FirebaseAnalytics analytics = FirebaseAnalytics();
static FirebaseAnalyticsObserver observer =
FirebaseAnalyticsObserver(analytics: analytics);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Firebase Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
navigatorObservers: <NavigatorObserver>[observer],
home: FutureBuilder(
future: Firebase.initializeApp(), // 선언해야 할 함수
builder: (context, snapshot) {
if (snapshot.hasError) { // 만약 선언 시 에러가 나면 출력될 위젯
return Center(
child: Text('Error'),
);
}
// 선언 완료 후 표시할 위젯
if (snapshot.connectionState == ConnectionState.done) {
_getToken();
_initFirebaseMessaging(context);
return MemoPage();
}
// 선언되는 동안 표시할 위젯
return Center(
child: CircularProgressIndicator(),
);
},
),
);
}
_getToken() async {
FirebaseMessaging messaging = FirebaseMessaging.instance;
print("messaging.getToken() , ${await messaging.getToken()}");
}
_initFirebaseMessaging(BuildContext context) {
FirebaseMessaging.onMessage.listen((RemoteMessage event) {
print(event.notification!.title);
print(event.notification!.body);
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("알림"),
content: Text(event.notification!.body!),
actions: [
TextButton(
child: Text("Ok"),
onPressed: () {
Navigator.of(context).pop();
},
)
],
);
});
});
FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {});
}
}
Firebase를 이용한 Admob 구현하기
1. Google Admob 알아보기
1. Google Admob이란?
구글에서 앱 개발자들이 광고를 앱에 넣어서 수익을 얻을 수 있도록 제공하는 광고 플랫폼
2. Firebase를 이용한 Admob 구현
1. Admob 가입하기
Firebase 콘솔 접속 -> 왼쪽 메뉴에 '참여 -> AdMob'클릭 -> AdMob 가입하기
*구글 계정에 생년월일 정보가 빠져있다면, 중간에 생년월일을 입력하는 과정을 거쳐야 가입 가능
2. Admob 새 앱 설정
플랫폼과 현재 앱 스토어에 등록되어있는지 여부 설정
플랫폼 : 'andriod', 지원되는 앱 스토어에 앱이 등록되어 있나요? '아니오' 선택
앱 이름과 사용자 측정 항목을 설정
3. 앱 ID 확인
앱에서 애드몹 광고를 연결할 때 필요한 앱 ID를 확인
왼쪽 메뉴에서 '앱 설정' -> 앱 ID를 확인하고 별도로 기록해 두기
4. 광고 형식 선택 : 배너 광고 만들기
Admob이 제공하는 광고 형식 : 배너, 전면, 리워드, 네이티브 고급 광고, 앱 열기(베타) 등 총 5가지
5. 광고 단위 설정 구성
Admob 메뉴에서 '앱 -> 광고 단위' 선택 (광고 단위가 없으면 '시작하기')
-> '배너' 선택 -> 광고 단위 이름 : '하단 배너'로 설정 -> '광고 단위 만들기'
6. 안드로이드 프로젝트에 코드 입력
firebase_example 프로젝트의 pubspec.yaml파일을 열고 Firebase Admob 패키지를 추가
google_mobile_ads: ^0.13.0 # 파이어베이스 애드몹 패키지
app/src/main 폴더 아래에 있는 AndroidManifest.xml 파일에 다음 코드를 추가
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-4874780746681507~9421048506"/> //애드몹 앱 ID
</application>
7. 플러터 프로젝트에 코드 입력
main.dart 파일을 열고 Admob 패키지 import
main() 함수에서 Admob 초기화 함수 호출
