Development

Use Firebase Cloud Function to Notify App Users (Tutorial)

Pinterest LinkedIn Tumblr

Maintaining a server is expensive and Google knows better than your wallet. 😀

Thuswise, Google acquired Firebase that provides amazing features to the developers who would be spending money on buying expensive subscription-based services and blaming the government. 😂

Firebase revolutionized the development world providing more than a dozen useful features. Among many features, Cloud Function is one fo them that lets you write and deploy code that responds to events from Google Cloud services.

The best part?

All your code runs on Google servers who bears all your computing processing power.

Besides this, it makes your app ultra secured from being hacked and other detrimental tactics to distress your app.

As said, you spend more time on making your app wonderful to users, and less time on maintaining sophisticated servers.

How It Works

You’ll make an app that shows notifications to the end-users upon inserting the date in the Firestore database.

Ready? Let’s get started.

Firebase Cloud Function to Notify App Users – Step by Step

So let’s start deploying your first cloud function.

Here we will write a function in TypeScript running in the Node.js environment. TypeScript is just like JavaScript, but better.

If you don’t know about JavaScript or TypeScript, let’s jump into the ocean to learn something new.

Step 1 – Install Node

If you previously not installed node on your computer, visit nodejs.org and install.

Install Node JS

Confused? Don’t worry.

You can also check your node version on your system by entering the “node -v” in cmd prompt and for npm “npm -v” as shown in the below screenshot.

Node Version Check

You should have at least version 6 for node and npm version 5 or later.

Related: How to Upload a Static Website to Firebase Hosting (Tutorial)

After installing Node.js, you need to install the Firebase CLI.

How?

You can install the Firebase CLI with NPM by copy the below cmd:

and paste in the cmd prompt and hit Enter.

After installing, you can also check it’s a version with “firebase –version” cmd

Install Firebase CLI

Step 2 – Create a New Project in Android Studio

  • Now Create a New Project in Android Studio.
  • Next Go to Tools -> Firebase from the top bar. It’ll open a new window on the right side.
  • Just scroll down and click on FireStore -> Read and write a document with Cloud Firestore.

Click on Firestore

  • Afterward, click on Connect to Firebase
  • A dialog box appears you can create a new project or choose as an existing project. Did I say I used an existing project?

Connect To Firebase

  • Next click on connect to Firebase.
  • Now, you have to add dependencies that’s why to click on Add cloud Firestore to your app. Now a popup box appears and clicks on Accept changes.

Add dependencies to app

Step 3 – Initialize Firebase

  • Now create an empty folder where you want to store your function files.
  • Afterward, open folder and type “cmd” on the search bar and hit Enter. It will open a cmd prompt with a folder address.

cmd open

  • Now copy below cmd and paste in the cmd prompt and hit Enter.

  • Now press and hit Enter.
  • As you know that you are working with the function just move the arrow key down select Function and press space bar a little (*) appears and hit Enter.
  • Then you have to select “Use an existing Project“.

Firebase Init

  • Afterward, select your project.
  • Select Function “TypeScript“.
  • Press “Y” and hit Enter.
  • Now you can see Firebase initialization successfully

Firebase init successful

Step 4 – Write Function

  • Now you can see some files have been added in your app folder.
  • Then open Visual Studio Editor and drag your Function folder in it.

Function file

If you don’t have VS Editor go to code.visualstudio.com to download and install. It’s a piece of cake, isn’t?

  • Now type the following function on index.ts file.

One more thing is that Cloud Function runtime actually requires JavaScript code to run.

But I’m using TypeScript so it has to be compiled first into JavaScript before deployment.

Well, you don’t need to worry about it at all, Firebase CLI will do it automatically when you run the deploy cmd.

Moreover, it will automatically make the JavaScript files in the lib folder.

If you want to learn more about the function, click here to get more samples at GitHub. 👍

 

Step 5 – Create a Firestore Database

console project demo

  • Then click on the Database from the left side.
  • Now click on Create Database.
  • Now a popup box appears to select “Start in test mode” because we are creating this app for an educational purpose. But if you want to implement this feature in your app, you can select production mode as well.
  • And click Next.

Create Firestore Database

  • Now select cloud Firestore Location and click done.

This will take time to load your database project.

  • Now click on Start Collection
  • A popup box appears Enter Collection Id and clicks Next

Collection id

  • Now click on Auto-ID to generate the automatic id.
  • Afterward, you can Enter title, body and click save.

title body

Now your Firestore looks like this.

Firestore database look like

Step 6 – Deploy the function

Now everything works fine. It’s time to deploy the function.

After that, you need to go to the cmd prompt. Copy below cmd and paste in the cmd prompt and Hit Enter

function deployment successful

Next, go to Console -> Function -> Dashboard you can see a function is added successfully

function deployed in console

Step 7 – Set up Firebase Cloud Messaging (FCM)

  • To set up FCM, go back to the android studio.
  • Next, go to Firebase assistant -> Cloud Messaging -> Set up Firebase Cloud Messaging

Firebase assistant cloud messaging

  • Next, click on Add FCM to your app 
  • A popup box appears to click on Accept changes it will add a dependency in the build gradle (app) file.

add cloud Messaging dependency

After setting up dependency correctly, type the below code in onCreate() in MainActivity.java

This will get the instance of FirebaseMessaging and send notification using subscribe to topic methods.

You can also check complete documentation regarding topics.

Here is the complete code of MainActivity.java

Step 8 – Run the app

Hurray! Everything is done successfully. Just run the app and check you can see in the image below. Notification will come when the app in the foreground or in the background or even the app is killed.

Whenever the new record is added in the database, then a notification is generated. You can add some codes in your project to add data dynamically from the users.

Notification sent

Ask any questions below, we’ll be delighted to answer.

Author