FCM setup in Firebase - Mini Project: Build & Apply

FCM setup

📖 Scenario: You are building a simple notification system for a mobile app using Firebase Cloud Messaging (FCM). You want to set up the basic configuration to send notifications to users.

🎯 Goal: Set up Firebase Cloud Messaging by creating the initial Firebase configuration, adding the server key, initializing the messaging service, and enabling message handling.

📋 What You'll Learn

Create a Firebase configuration object with the exact keys and values

Add a variable for the FCM server key

Initialize Firebase messaging using the configuration

Add a message handler to receive notifications

💡 Why This Matters

🌍 Real World

Setting up Firebase Cloud Messaging is essential for sending push notifications to mobile app users, improving engagement and communication.

💼 Career

Cloud engineers and mobile developers often configure FCM to enable real-time notifications in apps, a common requirement in many projects.

1

Create Firebase configuration object

Create a variable called firebaseConfig as a dictionary with these exact entries: apiKey set to "AIzaSyA-ExampleKey12345", authDomain set to "example-app.firebaseapp.com", projectId set to "example-app", storageBucket set to "example-app.appspot.com", messagingSenderId set to "1234567890", and appId set to "1:1234567890:web:abcdef123456".

Firebase

# Create the firebaseConfig dictionary with the exact keys and values
# Your code here

Need a hint?

Think of firebaseConfig as a dictionary holding all the keys Firebase needs to connect your app.

2

Add FCM server key variable

Create a variable called serverKey and set it to the string "AAAAaExampleServerKey1234567890".

Firebase

firebaseConfig = {
    "apiKey": "AIzaSyA-ExampleKey12345",
    "authDomain": "example-app.firebaseapp.com",
    "projectId": "example-app",
    "storageBucket": "example-app.appspot.com",
    "messagingSenderId": "1234567890",
    "appId": "1:1234567890:web:abcdef123456"
}
# Create the serverKey variable with the exact string
# Your code here

Need a hint?

The serverKey is a secret string used to authorize sending messages.

3

Initialize Firebase messaging

Write code to initialize Firebase messaging by calling firebase.initializeApp(firebaseConfig) and then create a variable called messaging by calling firebase.messaging().

Firebase

firebaseConfig = {
    "apiKey": "AIzaSyA-ExampleKey12345",
    "authDomain": "example-app.firebaseapp.com",
    "projectId": "example-app",
    "storageBucket": "example-app.appspot.com",
    "messagingSenderId": "1234567890",
    "appId": "1:1234567890:web:abcdef123456"
}

serverKey = "AAAAaExampleServerKey1234567890"
# Initialize Firebase app and create messaging variable
# Your code here

Need a hint?

First initialize the Firebase app with your config, then get the messaging service.

4

Add message handler

Add a message handler by calling messaging.onMessage with a function that takes a parameter called payload. Inside the function, assign payload to a variable called receivedMessage.

Firebase

firebaseConfig = {
    "apiKey": "AIzaSyA-ExampleKey12345",
    "authDomain": "example-app.firebaseapp.com",
    "projectId": "example-app",
    "storageBucket": "example-app.appspot.com",
    "messagingSenderId": "1234567890",
    "appId": "1:1234567890:web:abcdef123456"
}

serverKey = "AAAAaExampleServerKey1234567890"

firebase.initializeApp(firebaseConfig)
messaging = firebase.messaging()
# Add a message handler using messaging.onMessage
# Your code here

Need a hint?

The message handler listens for incoming messages and saves the payload.