ChatGPT와 FCM 개발 - 푸시 알림 전송

86. 푸시 알림 전송

다음과 같은 과정을 거처 푸시 알림 서비스를 개발합니다.

1. 알림 수신 허가를 받고 Token 얻기
2. Token을 firestore에 저장하기
3. firebase functions cloud 함수를 이용하여 알림 보내기
4. 웹앱에서 알림을 받아 나타내기

ChatGPT에게 물었습니다.

Create a function to send push notifications in firebase functions.

firebase functions에서 푸시 알림을 보내는 기능을 만들어 줘.

ChatGPT

To create a function to send push notifications using Firebase Functions, follow these steps. This involves setting up Firebase Functions, integrating with Firebase Admin SDK to send messages, and deploying the function.

Firebase Functions를 사용하여 푸시 알림을 보내는 함수를 만들려면 다음 단계를 따르세요. 여기에는 Firebase Functions 설정, Firebase Admin SDK와 통합하여 메시지 보내기, 함수 배포가 포함됩니다.

1. Set Up Firebase Functions

1. Firebase 기능 설정

First, make sure you have the Firebase CLI installed. If not, install it:
먼저 Firebase CLI가 설치되어 있는지 확인하세요. 그렇지 않은 경우 설치하십시오.

npm install -g firebase-tools

 

Then, initialize Firebase Functions in your project:
그런 다음 프로젝트에서 Firebase Functions를 초기화합니다.

firebase init functions

2. Install Firebase Admin SDK

2. Firebase Admin SDK 설치

Inside your functions directory, install the Firebase Admin SDK:
'functions' 디렉터리 내에 Firebase Admin SDK를 설치합니다.

npm install firebase-admin

3. Write the Cloud Function to Send Push Notifications

3. 푸시 알림을 보내는 Cloud 함수 작성

In your functions/index.js file, write the following function to send push notifications:
functions/index.js 파일에서 푸시 알림을 보내려면 다음 함수를 작성하세요.

const functions = require('firebase-functions');
const admin = require('firebase-admin');

// Initialize Firebase Admin
admin.initializeApp();

// Reference to Firestore
const db = admin.firestore();

// Cloud Function to send push notifications
exports.sendPushNotification = functions.https.onRequest(async (req, res) => {
  try {
    // Retrieve the FCM token(s) from Firestore or request body
    const userId = req.body.userId;
    const tokenSnapshot = await db.collection('fcmTokens').doc(userId).get();

    if (!tokenSnapshot.exists) {
      return res.status(404).send('FCM Token not found');
    }

    const fcmToken = tokenSnapshot.data().token;

    // Define the message payload
    const message = {
      notification: {
        title: 'New Notification',
        body: 'You have a new message!',
      },
      token: fcmToken,
    };

    // Send the notification
    const response = await admin.messaging().send(message);

    console.log('Successfully sent message:', response);
    return res.status(200).send('Notification sent successfully');
  } catch (error) {
    console.error('Error sending notification:', error);
    return res.status(500).send('Failed to send notification');
  }
});

4. Explanation of the Code

4. 코드 설명

• admin.initializeApp(): Initializes the Firebase Admin SDK.
  admin.initializeApp(): Firebase Admin SDK를 초기화합니다.
• db.collection('fcmTokens').doc(userId).get(): Retrieves the FCM token from Firestore based on the provided userId.
  db.collection('fcmTokens').doc(userId).get(): 제공된 userId를 기반으로 Firestore에서 FCM 토큰을 검색합니다.
• message: Defines the message payload, including the notification title and body.
  메시지: 알림 제목과 본문을 포함한 메시지 페이로드를 정의합니다.
• admin.messaging().send(message): Sends the push notification to the specified FCM token.
  admin.messaging().send(message): 지정된 FCM 토큰으로 푸시 알림을 보냅니다.

5. Deploy the Function

5. 함수 배포

Deploy the Firebase Function to your Firebase project: Firebase 프로젝트에 Firebase 함수를 배포합니다.

firebase deploy --only functions

6. Triggering the Function

6. 기능 트리거

You can trigger this function by making an HTTPS request to the endpoint generated after deployment. For example, you could trigger it from your Vue.js application like this:

배포 후 생성된 엔드포인트에 HTTPS 요청을 하여 이 기능을 트리거할 수 있습니다. 예를 들어 다음과 같이 Vue.js 애플리케이션에서 이를 트리거할 수 있습니다.

async function triggerNotification(userId) {
  try {
    const response = await fetch('https://your-project-id.cloudfunctions.net/sendPushNotification', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ userId: userId }),
    });

    if (response.ok) {
      console.log('Notification sent successfully');
    } else {
      console.error('Failed to send notification');
    }
  } catch (error) {
    console.error('Error:', error);
  }
}

 

7. Usage Example

7. 사용 예

In your Vue.js component, you could have a button to trigger the notification:
Vue.js 구성 요소에는 알림을 트리거하는 버튼이 있을 수 있습니다.

export default {
  name: 'NotificationComponent',
  methods: {
    async sendNotification() {
      const userId = 'user123';  // Replace with the actual user ID
      await triggerNotification(userId);
    }
  }
};

 

Template:

<template>
  <div>
    <button @click="sendNotification">Send Notification</button>
  </div>
</template>

Summary 요약

• Firebase Functions: Create a function using functions.https.onRequest to handle incoming requests and send notifications.
  Firebase 함수: functions.https.onRequest를 사용하여 수신 요청을 처리하고 알림을 보내는 함수를 만듭니다.
• Firebase Admin SDK: Use admin.messaging().send() to send push notifications to the specified FCM token.
  Firebase Admin SDK: admin.messaging().send()를 사용하여 지정된 FCM 토큰에 푸시 알림을 보냅니다.
• Deploy: Deploy the function with firebase deploy --only functions and trigger it via HTTPS requests.
  배포: 'firebase 배포 --전용 함수'를 사용하여 함수를 배포하고 HTTPS 요청을 통해 트리거합니다.

This setup allows you to send push notifications to specific users stored in Firestore using Firebase Functions.
이 설정을 사용하면 Firebase Functions를 사용하여 Firestore에 저장된 특정 사용자에게 푸시 알림을 보낼 수 있습니다.