Trong bối cảnh ứng dụng di động có tính cạnh tranh cao hiện nay, việc thu hút người dùng ứng dụng của bạn một cách hiệu quả và cung cấp thông tin kịp thời là điều then chốt.
Firebase Cloud Messaging (FCM) là dịch vụ thông báo đẩy mạnh mẽ do Firebase cung cấp. Nó cung cấp một cách liền mạch để kết nối với người dùng ứng dụng của bạn và thu hút họ tham gia.
Trong hướng dẫn này, chúng ta sẽ đi sâu vào việc tích hợp FCM trong Flutter. Chúng tôi sẽ khám phá những lợi ích của nó và giới thiệu các ví dụ thực tế về cách nó có thể nâng cao mức độ tương tác của người dùng và cải thiện hiệu suất ứng dụng.
Nhắn tin qua đám mây Firebase (FCM) cung cấp kết nối đáng tin cậy và tiết kiệm pin giữa máy chủ và thiết bị của bạn. Nó cho phép bạn gửi và nhận tin nhắn cũng như thông báo trên iOS, Android và web miễn phí.
Trong hướng dẫn này, chúng ta sẽ khám phá quy trình thiết lập và sử dụng Firebase Cloud Messaging (FCM) trong Flutter bằng cách sử dụng Firebase làm dịch vụ phụ trợ. Mặc dù trọng tâm chính sẽ là triển khai trên Android nhưng cần lưu ý rằng quy trình này tương tự đối với iOS và Android (với một số khác biệt về cấu hình).
Đây là những gì chúng tôi sẽ đề cập:
- Cách tạo ứng dụng trong Firebase
- Cách thiết lập Firebase trong Flutter
- Cách triển khai thông báo đẩy bằng mã thông báo FCM
Trong hướng dẫn này, bạn sẽ tìm hiểu cách gửi thông báo đơn giản bằng Firebase đến ứng dụng chạy trong Flutter. Hãy bắt đầu.
Cách tạo ứng dụng trong Firebase
Tôi sẽ tạo một dự án mới trong bảng điều khiển Firebase để bắt đầu. Tôi sẽ hướng dẫn các bước cần thiết, bao gồm thiết lập dự án, cách định cấu hình Nhắn tin qua đám mây Firebase cũng như cách lấy thông tin xác thực và tệp cấu hình cần thiết cho ứng dụng Flutter của chúng tôi.
Trước khi tạo ứng dụng, bạn cần đăng ký bảng điều khiển Firebase nếu bạn chưa có tài khoản. Sau khi đăng ký, hãy thử tạo một dự án.
Tạo dự án trong Firebase
Sẽ mất một chút thời gian để tạo một dự án.
Tạo dự án trong Firebase
Sau khi tạo dự án, nó sẽ chuyển hướng bạn đến trang tổng quan dự án.
Tổng quan về dự án trong Bảng điều khiển Firebase
Sau khi bạn đã tạo dự án trong bảng điều khiển Firebase, đã đến lúc bắt đầu với ứng dụng Flutter của chúng tôi.
Cách thiết lập Firebase trong Flutter
Tôi đã tạo một dự án Flutter đơn giản bằng Visual Studio Code. Nếu bạn chưa quen với việc xây dựng dự án Flutter, bạn có thể tham khảo hướng dẫn trước đây của tôi. (Nếu bạn đã quen rồi thì có thể bỏ qua bước này.)
Ứng dụng Flutter đơn giản chạy trên thiết bị Android
Hãy tích hợp Firebase vào dự án Flutter của chúng ta. Để làm điều này, chúng ta cần một công cụ dòng lệnh Firebase CLI. Tôi đã cài đặt Firebase CLI. Nếu chưa thực hiện việc này, bạn có thể tham khảo tài liệu chính thức.
Sau đó, chúng ta cần đăng nhập vào Firebase bằng Firebase CLI.
firebase login
Đăng nhập vào Firebase bằng FirebaseCLI
Điều này sẽ điều hướng bạn đến trình duyệt để đăng nhập vào Firebase. Bạn sẽ được điều hướng trở lại sau khi quá trình xác thực hoàn tất thành công.
Sau khi đăng nhập thành công, chúng ta cần cài đặt FlutterFire CLI. Chúng ta có thể sử dụng FlutterFire CLI để định cấu hình các ứng dụng Flutter của mình nhằm kết nối với Firebase. Chạy lệnh sau để kích hoạt FlutterFire CLI:
dart pub global activate flutterfire_cli
FlutterFire CLI là một công cụ giao diện dòng lệnh giúp đơn giản hóa việc tích hợp các dịch vụ Firebase vào các ứng dụng Flutter. Nó cung cấp một cách thuận tiện để thêm, định cấu hình và quản lý plugin Firebase trong dự án Flutter của chúng tôi.
Cài đặt FlutterFireCLI
Bước tiếp theo là thêm firebase_core thư viện cho dự án Flutter của chúng tôi.
Lệnh sau sẽ tự động thêm firebase_core gói dưới dạng phần phụ thuộc trong pubspec.yaml của dự án của bạn tệp và tìm nạp phiên bản mới nhất của gói từ pub.dev . Sau khi chạy lệnh này, bạn có thể nhập firebase_core gói vào các tệp Dart và sử dụng dịch vụ Firebase trong ứng dụng Flutter của chúng tôi.
flutter pub add firebase_core
Cài đặt gói Firebase Core
flutterfire configure lệnh được sử dụng để định cấu hình các dịch vụ Firebase trong dự án Flutter của chúng tôi bằng FlutterFire CLI. Lệnh này giúp chúng tôi thiết lập xác thực Firebase, Firestore, Cloud Messaging và các dịch vụ Firebase khác một cách dễ dàng và hiệu quả.
flutterfire configure
Bước đầu tiên là chọn dự án,
Kết nối ứng dụng Flutter với ứng dụng Firebase
Việc tiếp theo là chọn nền tảng. Ở đây mình đang dùng cho Android nên chọn Android.
Chọn nền tảng
Sau khi định cấu hình thành công, Id ứng dụng Firebase sẽ được hiển thị.
Cuối cùng, chúng ta cần thêm một số thay đổi mã vào main.dart tập tin.
Nhập các gói sau:
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
Thêm cấu hình sau để khởi tạo cấu hình Firebase bên trong chức năng chính của main.dart tập tin.
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
Được rồi, chúng ta đã hoàn tất thành công cấu hình Firebase trong ứng dụng Flutter của mình! Chúng ta hãy dành một chút thời gian để ăn mừng cột mốc quan trọng này. Định cấu hình dịch vụ Firebase là một bước quan trọng trong việc xây dựng các ứng dụng mạnh mẽ và giàu tính năng.
Cách triển khai thông báo đẩy bằng mã thông báo FCM
Chúng tôi sẽ triển khai quy trình đăng ký thiết bị để nhận thông báo đẩy và truy xuất mã thông báo FCM duy nhất được gán cho từng thiết bị. Bước này rất quan trọng để gửi thông báo có mục tiêu đến các thiết bị cụ thể.
Chúng ta sẽ đi sâu vào việc triển khai gửi thông báo đẩy tới các thiết bị bằng Nhắn tin qua đám mây của Firebase. Chúng ta sẽ khám phá cách cấu trúc và gửi thông báo từ bảng điều khiển Firebase cũng như trình bày cách xử lý những thông báo này trong ứng dụng Flutter của chúng ta.
flutter pub add firebase_messaging
Cài đặt gói nhắn tin firebse
Tiếp theo, chúng ta cần kích hoạt setAutoInitEnabled chức năng cho phép tự động khởi tạo Nhắn tin qua đám mây Firebase (FCM) trong ứng dụng Flutter của chúng tôi. Điều này có nghĩa là FCM sẽ tự động khởi tạo và truy xuất mã thông báo thiết bị khi ứng dụng khởi động.
Thêm lệnh gọi hàm sau vào main phương pháp:
import 'package:firebase_messaging/firebase_messaging.dart';
...
...
await FirebaseMessaging.instance.setAutoInitEnabled(true);
Hãy chạy ứng dụng Flutter của chúng tôi và xác minh xem chúng tôi có nhận được thông báo hay không.
Điều hướng đến bảng điều khiển nhắn tin Firebase. Vì đây là thông báo đầu tiên của chúng tôi nên chúng tôi cần chọn "Tạo chiến dịch đầu tiên của bạn". Chọn "Thông báo thông báo Firebase" và nhấp vào "Tạo".
Mẫu tin nhắn thử nghiệm
Bây giờ chúng ta cần nhập tiêu đề thông báo, nội dung và tên cho tin nhắn.
Sau đó, chúng tôi có thể nhận mã thông báo FCM theo cách thủ công cho mục đích thử nghiệm bằng cách sử dụng mã bên dưới. Để truy xuất mã thông báo đăng ký hiện tại cho một phiên bản ứng dụng, hãy gọi getToken() trong main() phương pháp. Phương pháp này sẽ yêu cầu người dùng cấp quyền thông báo nếu quyền thông báo chưa được cấp. Ngược lại, nó sẽ trả về mã thông báo hoặc từ chối nếu có bất kỳ lỗi nào.
final fcmToken = await FirebaseMessaging.instance.getToken();
log("FCMToken $fcmToken");
Sao chép mã thông báo FCM được in trên bảng điều khiển và dán vào hộp nhập "Thêm mã thông báo đăng ký FCM".
Đã gửi tin nhắn kiểm tra bằng Mã thông báo FCM
Bấm vào nút Kiểm tra. Thiết bị khách được nhắm mục tiêu (có ứng dụng chạy nền) sẽ nhận được thông báo.
Đã nhận được thông báo đẩy trên thiết bị Android
Hoan hô! Chúng tôi đã nhận được thông báo trên thiết bị Android của mình. Nếu chúng ta nhấp vào thông báo, nó sẽ mở ứng dụng theo mặc định.
Khi chúng ta nhấn vào một thông báo, hành vi mặc định trên cả Android và iOS là mở ứng dụng. Nếu ứng dụng bị chấm dứt, nó sẽ được bắt đầu. Nếu nó ở chế độ nền thì nó sẽ được đưa lên nền trước.
Tại đây, chúng ta có thể thấy cấu hình cơ bản để khởi tạo thông báo 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");
}
Kết luận
Trong hướng dẫn này, chúng tôi đã trình bày các bước cần thiết để triển khai thông báo đẩy trong Flutter bằng cách sử dụng Firebase Cloud Messaging (FCM).
Bằng cách làm theo các bước đã nêu, bạn có thể thiết lập Firebase, tích hợp nó vào dự án Flutter của mình và triển khai chức năng thông báo đẩy.
Với khả năng gửi và nhận thông báo liền mạch, bạn có thể nâng cao trải nghiệm người dùng và tương tác với người dùng ứng dụng một cách hiệu quả. Hãy theo dõi các chủ đề và tính năng nâng cao hơn trong các hướng dẫn sau này.
Nếu bạn muốn tìm hiểu thêm về Flutter, hãy đăng ký nhận bản tin email của tôi (https://5minslearn.gogosoon.com/) và theo dõi tôi trên mạng xã hội.
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu