Trong bối cảnh ứng dụng mobile cạnh tranh cao ngày nay, thu hút hiệu quả user và доставка thông tin đúng lúc là chìa khóa.
Firebase Cloud Messaging (FCM) là dịch vụ push notification mạnh mẽ do Firebase cung cấp. Nó cung cấp cách seamless kết nối với user app và giữ họ engaged.
Trong tutorial này, chúng ta sẽ đi sâu tích hợp FCM trong Flutter. Khám phá lợi ích và showcase ví dụ thực tế cách nó nâng cao user engagement và cải thiện hiệu suất app.
Firebase Cloud Messaging (FCM) cung cấp kết nối tin cậy và tiết kiệm pin giữa server và thiết bị. Cho phép gửi và nhận message/notification trên iOS, Android, và web hoàn toàn miễn phí.
Trong tutorial này, chúng ta sẽ khám phá quá trình setup và dùng FCM trong Flutter dùng Firebase làm backend service. Mặc dù focus chính là Android, quá trình tương tự cho iOS và Android (với vài khác biệt config).
Nội dung bao gồm:
- Cách tạo app trong Firebase
- Cách setup Firebase trong Flutter
- Cách implement push notification dùng FCM token
Trong tutorial này, bạn sẽ học cách gửi notification đơn giản dùng Firebase đến app chạy Flutter. Bắt đầu nào.
Cách tạo app trong Firebase
Tôi tạo project mới trong Firebase console để bắt đầu. Sẽ đi qua các bước cần thiết: setup project, cấu hình Firebase Cloud Messaging, và lấy credentials và file config cần thiết cho Flutter app.
Trước khi tạo app, cần signup Firebase console nếu chưa có account. Sau signup, thử tạo project.
Tạo Project trong Firebase
Sẽ mất chút thời gian tạo project.
Đang tạo project trong Firebase
Sau khi tạo project, nó redirect đến dashboard project.
Tổng quan Project trong Firebase Console
Sau khi tạo project Firebase console, đến lúc bắt đầu với Flutter app.
Cách setup Firebase trong Flutter
Tôi tạo Flutter project đơn giản dùng Visual Studio Code. Nếu chưa quen build Flutter project, tham khảo tutorial trước. (Nếu đã quen, bỏ qua bước này.)
Flutter App đơn giản chạy trên thiết bị Android
Hãy tích hợp Firebase vào Flutter project. Cần Firebase CLI command line tool. Tôi đã cài Firebase CLI. Nếu chưa, tham khảo tài liệu chính thức.
Sau đó cần login Firebase dùng Firebase CLI.
firebase login Login Firebase dùng FirebaseCLI
Sẽ navigate đến browser login Firebase. Quay lại sau khi authentication thành công.
Sau login thành công, cần cài FlutterFire CLI. Dùng FlutterFire CLI config Flutter app kết nối Firebase. Chạy lệnh sau activate FlutterFire CLI:
dart pub global activate flutterfire_cli FlutterFire CLI là tool command-line interface đơn giản hóa tích hợp Firebase service vào Flutter app. Cung cấp cách tiện lợi add, config, manage Firebase plugin trong Flutter project.
Cài FlutterFireCLI
Bước tiếp theo thêm thư viện firebase_core vào Flutter project.
Lệnh sau tự động thêm package firebase_core làm dependency trong pubspec.yaml và fetch phiên bản mới từ pub.dev. Sau chạy lệnh, bạn import firebase_core vào file Dart và dùng Firebase service trong Flutter app.
flutter pub add firebase_core Cài package Firebase Core
Lệnh flutterfire configure dùng config Firebase service trong Flutter project dùng FlutterFire CLI. Lệnh này giúp setup Firebase auth, Firestore, Cloud Messaging, và service Firebase khác dễ dàng hiệu quả.
flutterfire configure Bước đầu chọn project,
Kết nối Flutter App với Firebase app
Bước tiếp chọn platform. Tôi dùng Android ở đây, nên chọn Android.
Chọn platform
Sau config thành công, Firebase App Id hiển thị.
Cuối cùng, cần thêm code vào file main.dart.
Import package sau:
import 'package:firebase_core/firebase_core.dart'; import 'firebase_options.dart'; Thêm config sau khởi tạo Firebase config trong hàm main của main.dart.
await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); Good, chúng ta đã hoàn thành config Firebase trong Flutter app! Hãy chúc mừng milestone này. Config Firebase service là bước quan trọng xây dựng app mạnh mẽ và giàu tính năng.
Cách implement Push Notification dùng FCM Token
Chúng ta sẽ implement quá trình đăng ký thiết bị nhận push notification và lấy FCM token duy nhất gán cho mỗi thiết bị. Bước này quan trọng để gửi notification nhắm mục tiêu đến thiết bị cụ thể.
Chúng ta sẽ đi sâu implement gửi push notification đến thiết bị dùng FCM. Khám phá cách cấu trúc và gửi notification message từ Firebase console và demo cách handle message trong Flutter app.
flutter pub add firebase_messaging Cài package firebase messaging
Tiếp theo, cần trigger hàm setAutoInitEnabled bật tự động khởi tạo FCM trong Flutter app. Nghĩa là FCM tự động init và lấy device token khi app start.
Thêm gọi hàm sau trong method main:
import 'package:firebase_messaging/firebase_messaging.dart'; ... ... await FirebaseMessaging.instance.setAutoInitEnabled(true); Chạy Flutter app và verify nhận notification.
Điều hướng đến Firebase messaging console. Vì là tin nhắn đầu, chọn "Create your first campaign". Chọn "Firebase Notification messages" và bấm "Create".
Template test messaging mẫu
Giờ nhập title, text, và tên cho message.
Sau đó lấy FCM token thủ công cho test dùng code dưới. Để lấy registration token hiện tại cho app instance, gọi getToken() trong main(). Method này hỏi permission notification nếu chưa granted. Ngược lại, trả token hoặc reject nếu lỗi.
final fcmToken = await FirebaseMessaging.instance.getToken(); log("FCMToken $fcmToken"); Copy FCM token in trên console và dán vào ô "Add an FCM registration token".
Gửi test message dùng FCM Token
Bấm nút Test. Thiết bị client target (với app ở background) sẽ nhận notification.
Nhận push notification trên thiết bị android
Hurray! Chúng ta nhận notification trên Android device. Click notification sẽ mở app mặc định.
Khi tap notification, hành vi mặc định trên Android và iOS là mở app. Nếu app terminated, sẽ start. Nếu background, sẽ bring to foreground.
Ở đây, thấy config cơ bản khởi tạo Firebase messaging.
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"); } Kết luận
Trong tutorial này chúng ta đã cover bước thiết yếu implement push notification trong Flutter dùng Firebase Cloud Messaging (FCM).
Bằng cách follow các bước outlined, bạn có thể setup Firebase, tích hợp vào Flutter project, và implement chức năng push notification.
Với khả năng gửi và nhận notification seamless, bạn có thể nâng cao trải nghiệm user và engage hiệu quả với user app. Hẹn gặp lại chủ đề nâng cao hơn trong tutorial tương lai.
Nếu muốn học thêm về Flutter, đăng ký bản tin email (https://5minslearn.gogosoon.com/) và theo dõi tôi trên mạng xã hội.
Học lập trình miễn phí. Chương trình mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm developer. Bắt đầu ngay