Xin chào các bạn! Ngày hôm nay mình sẽ hướng dẫn các bạn cách gửi thông báo từ Firebase Cloud Messaging về ứng dụng mobile bằng ngôn ngữ Flutter. Rất đơn giản và hiệu nghiệm, theo mình nào.

1. Tác dụng của Notification (thông báo)

Điều này rõ ràng mang một tác động to lớn đối với một phần mềm hay ứng dụng mobile. Dù bạn ở đây, bất kể khi nào thì notification vẫn phải gửi đến tay của bạn một cách nhanh nhất.

Sự tham gia của người dùng là rất quan trọng đối với sự thành công của bất kỳ ứng dụng di động nào. Thông báo giúp thu hút sự chú ý của người dùng và khi được triển khai đúng cách & song song với những nội dung có chất lượng cao, nó góp phần lớn vào thành công của việc tiếp cận thị trường.

Vì vậy, ứng dụng của bạn cần và nên làm đầy đủ & mạnh mẽ cho việc gửi và nhận thông báo liên tục về máy người dùng.

2. Bước khởi đầu

Ở bài viết dưới đây, mình sẽ hướng dẫn cụ thể các bạn sử dụng Firebase Cloud Messaging (FCM) để gửi thông báo về thiết bị. FCM là một dịch vụ tuyệt vời, miễn phí hoàn toàn do Google cung cấp, bạn không phải lo cơ sở hạ tầng gì hết mọi thứ cứ để anh Gồ lo.

Theo dõi các bài viết về Flutter trên type.vn tại đây.

2.1 Thế nào là push notifications?

Nếu bạn sử dụng điện thoại thông minh, bạn chắc chắn nhận thông báo mỗi ngày. Push Notification là các thông báo bật lên, có thể nhấp được xuất hiện trên thiết bị của người dùng, bất kể họ có đang sử dụng ứng dụng cụ thể đó hay không. Ngay cả khi thiết bị không hoạt động hoặc người dùng đang sử dụng ứng dụng khác, họ cũng sẽ nhận được thông báo miễn là thiết bị đó đang trực tuyến và quyền thông báo đã được cấp.

Trong hướng dẫn này, mình sẽ sử dụng FCM để gửi thông báo.

2.1 Tạo dự án Firebase

Phần này cực quan trọng, các bạn hãy theo dõi tiến trình cài đặt một dự án trên Firebase bằng hình ảnh & video dưới đây:

• 

• 

• 

• 

• 

2.2 Tích hợp Firebase vô Flutter app của bạn

Bây giờ, dự án của mình đã sẵn sàng để tích hợp vào ứng dụng của bạn. Trong bài viết này mình sẽ sử dụng VS Code để làm việc trực tiếp với mã nguồn notify dưới đây.

2.3 Tích hợp vô Android

• 

• 

• 

• 

2.4 Tích hợp vô iOS

Viêc tích hợp vô iOS cũng tương đối khá đơn giản, bạn tiếp tục làm theo các bước sau:

• 

• 

• 

• 

• 

2.5 Những Plugin nào sử dụng cho dự án Flutter của bạn

Những plugin sử dụng trong dự án này:

• firebase_core, which is required to use any Firebase service with Flutter
• firebase_messaging, which is used for receiving notifications in the app
• overlay_support, which builds overlay UI

Tất cả đều có sẵn trên pub.dev, bạn chỉ cần chạy:

flutter pub get

Câu lệnh trên giúp bạn cài đặt các plugin cho dự án này. Những plugin này nằm trong pubspec.yaml của dự án notify

dependencies:
  firebase_core: ^1.2.0
  firebase_messaging: ^10.0.0
  overlay_support: ^1.2.1

2.6 Thiết kế giao diện app

Giao diện được thể hiện thật đơn giản trong dự án này. Bao gồm: 1 cái Appbar, một vài Text widget nằm trong một cái Column để hiển thị nội dung notification.

2.7 Sử dụng Firebase Cloud Messaging

Bắt đầu bằng những đoạn mã sau:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Notify',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

Ở đây, chúng ta có một Scaffold chứa một AppBar và một Column. Cột chứa một vài Text widget, theo sau là NotificationBadge để hiển thị tổng số thông báo nhận được.

Chi tiết cụ thể mình comment trong mã nguồn notify, các bạn có thể tải mã nguồn bằng cách gửi mail yêu cầu vào email type.vn@gmail.com

2.8 Tiếp nhận thông báo

Làm gì khi notification được gửi về? Để hiển thị thông báo trên giao diện người dùng, bạn có thể sử dụng plugin overlay_support mà mình đã giới thiệu trước đó. Bạn có thể dễ dàng tạo hiệu ứng giao diện người dùng tùy chỉnh hoặc đơn giản khi có bất kỳ thông báo nào đến trên thiết bị.

2.9 Nhận thông báo ở dạng nền (background)

Để xử lý các thông báo nền, chúng ta phải xác định một hàm cấp cao nhất được gọi là _firebaseMessagingBackgroundHandler() và chuyển nó tới onBackgroundMessage() bên trong phương thức registerNotification().

Bạn có thể định nghĩa hàm _firebaseMessagingBackgroundHandler() như sau:

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  print("Handling a background message: ${message.messageId}");
}

Hãy nhớ rằng bạn phải xác định đây là một hàm cấp cao nhất, có nghĩa là nó phải nằm ngoài bất kỳ lớp nào.

Gọi phương thức onBackgroundMessage():

void registerNotification() async {
  await Firebase.initializeApp();
  _messaging = FirebaseMessaging.instance;

  // Add the following line
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  // ...
}

Chi tiết cụ thể mình comment trong mã nguồn notify, các bạn có thể tải mã nguồn bằng cách gửi mail yêu cầu vào email type.vn@gmail.com

2.10 Thử nhiệm trên Android và iOS

Và bây giờ là lúc chúng ta thực nghiệm việc cài đặt và viết mã cho ứng dụng, đơn giản và hiệu nghiệm mời các bạn xem video dưới đây:

3. Tổng kết

Như vậy là qua bài viết trên, mình đã hướng dẫn các bạn cách thức để gửi và nhận thông báo từ từ Firebase Cloud Messaging (FCM). Mã nguồn của ứng dụng này các bạn vui lòng liên hệ tới email: typevn@gmail.com để nhận link download.

Cuối cùng, chúc các bạn thành công!