Hướng Dẫn Tích Hợp Thông Báo Đẩy Firebase trong Ứng Dụng React Native CLI cho Android 📱🔔

Nếu bạn đang phát triển một ứng dụng React Native CLI và muốn tích hợp thông báo đẩy Firebase cho Android, bạn đã đến đúng nơi. Hướng dẫn này sẽ dẫn bạn qua từng bước mà tôi đã thực hiện khi triển khai thông báo đẩy trong dự án của mình - từ việc thiết lập Firebase đến việc xử lý các thông báo trong trạng thái nền và nền với Notifee.

Mục Lục

1. Tạo một Dự án Firebase
2. Tích hợp SDK Firebase cho Android
3. Cài đặt các Gói Firebase
4. Yêu cầu Quyền Thông báo (Android 13+)
5. Lấy FCM Token
6. Xử lý Thông báo trong Trạng thái Nền
7. Cài đặt Notifee để Hiển Thị Thông báo trong Trạng thái Nền
8. Thông báo trong Trạng thái Nền và Khi Tắt Ứng Dụng
9. Gửi Thông báo qua Postman
10. Tóm tắt
11. Mã nguồn trên GitHub
12. Demo Trực Tiếp
13. Mẹo Chuyên Nghiệp

📌 1. Tạo một Dự án Firebase

Bắt đầu bằng cách truy cập Firebase Console và tạo một dự án mới.

• Đặt tên cho dự án của bạn.
• Đăng ký ứng dụng Android của bạn với tên gói đúng (ví dụ: com.yourappname).
• Tải xuống tệp google-services.json và đặt nó vào thư mục ứng dụng Android của bạn: android/app/google-services.json.

⚙️ 2. Tích hợp SDK Firebase cho Android

Chỉnh sửa dự án Android của bạn:

• android/build.gradle

buildscript {
  dependencies {
    classpath("com.google.gms:google-services:4.4.2") // Đảm bảo rằng phiên bản này cập nhật
  }
}

• android/app/build.gradle

apply plugin: "com.google.gms.google-services"

dependencies {
    // mã của bạn
    implementation(platform("com.google.firebase:firebase-bom:33.11.0"))
    implementation("com.google.firebase:firebase-analytics")
    // mã của bạn
}

📦 3. Cài đặt các Gói Firebase

Cài đặt các thư viện Firebase bằng npm:

npm install --save @react-native-firebase/app
npm install --save @react-native-firebase/messaging

Sau đó, xây dựng lại ứng dụng của bạn:

npx react-native run-android

🔐 4. Yêu cầu Quyền Thông báo (Android 13+)

Do Android 13 yêu cầu quyền thời gian thực cho thông báo:

import {PermissionsAndroid} from 'react-native';

const requestPermissionAndroid = async () => {
  const granted = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
  );

  console.log(granted === PermissionsAndroid.RESULTS.GRANTED
    ? '✔ Quyền đã được cấp'
    : '❌ Quyền bị từ chối');
};

Gọi hàm này trong useEffect khi ứng dụng tải.

  useEffect(() => {
    if (Platform.OS === 'android') {
      requestPermissionAndroid();
    } else {
      console.log('Hệ điều hành này không được hỗ trợ.');
    }
  }, []);

🔑 5. Lấy FCM Token

Token này định danh duy nhất thiết bị. Bạn có thể gửi thông báo đến token này bằng Firebase.

import messaging from '@react-native-firebase/messaging';

const getFCMToken = async () => {
  const token = await messaging().getToken();
  console.log('FCM Token:', token);
};

🧩 6. Xử lý Thông báo trong Trạng thái Nền

useEffect(() => {
  const unsubscribe = messaging().onMessage(async remoteMessage => {
    Alert.alert('Thông báo FCM Mới', JSON.stringify(remoteMessage));
  });

  return unsubscribe;
}, []);

📲 7. Cài đặt Notifee để Hiển Thị Thông báo trong Trạng thái Nền

Cài đặt Notifee:

npm install --save @notifee/react-native

Hiển thị thông báo trong trạng thái nền bằng Notifee:

import notifee from '@notifee/react-native';

const onDisplayNotification = async (remoteMessage) => {
  const channelId = await notifee.createChannel({
    id: 'default',
    name: 'Kênh Mặc định',
  });

  await notifee.displayNotification({
    title: remoteMessage.notification.title,
    body: remoteMessage.notification.body,
    android: {
      channelId,
      pressAction: { id: 'default' },
    },
  });
};

useEffect(() => {
    const unsubscribe = messaging().onMessage(async remoteMessage => {
    onDisplayNotification(remoteMessage);
});

📳 8. Thông báo trong Trạng thái Nền và Khi Tắt Ứng Dụng

Trong index.js, đăng ký trình xử lý thông báo nền:

import messaging from '@react-native-firebase/messaging';

messaging().setBackgroundMessageHandler(async remoteMessage => {
  console.log('Thông báo nền:', remoteMessage);
});

Bây giờ, ngay cả khi ứng dụng bị tắt hoặc ở trạng thái nền, nó vẫn ghi lại và ghi lại thông báo.

💻 9. Gửi Thông báo qua Postman

• Lấy Token Truy cập của dự án Firebase của bạn bằng cách sử dụng tệp JSON của tài khoản dịch vụ.
• Gửi yêu cầu tại điểm cuối này từ Postman:

POST https://fcm.googleapis.com/v1/projects/<project-id>/messages:send

• Sử dụng FCM token trong phần thân yêu cầu để nhắm mục tiêu vào thiết bị của bạn.

🎯 Tóm tắt

Bạn đã thành công trong việc tích hợp thông báo đẩy Firebase vào ứng dụng React Native CLI cho Android. Từ việc yêu cầu quyền và lấy token đến việc xử lý thông báo trong tất cả các trạng thái (trong nền, nền, tắt), mọi thứ đã được đề cập trong hướng dẫn này.

📄 Mã nguồn trên GitHub

Bạn muốn khám phá mã nguồn đầy đủ của việc tích hợp Thông báo Đẩy Firebase trong React Native CLI?

Kiểm tra dự án hoàn chỉnh trên GitHub:
👉 GitHub Repository: React Native Firebase Notifications
Hãy để lại sao ⭐ cho repo nếu nó hữu ích cho bạn!

📺 Demo Trực Tiếp: Nhận Thông Báo Đẩy Firebase trên Android

Bạn muốn thấy nó hoạt động? Đây là một video ghi lại cách thông báo đẩy Firebase được gửi đến thiết bị Android bằng React Native CLI. Video cho thấy:

• Nhận thông báo khi ứng dụng đang ở trạng thái nền.
• Xử lý thông báo trong trạng thái nền và khi tắt ứng dụng.
• Tùy chỉnh giao diện thông báo bằng Notifee.
  Xem cách tích hợp hoạt động liền mạch trong một kịch bản thực tế:

💡 Mẹo Chuyên Nghiệp

• Sử dụng Notifee để kiểm soát tốt hơn về giao diện và hành vi của thông báo.
• Kiểm tra trên cả trình giả lập và thiết bị thực tế.
• Đảm bảo AndroidManifest của bạn có đủ dịch vụ và quyền cần thiết.

✉️ Chúc bạn lập trình vui vẻ với React Native và Firebase!