Using Firebase Cloud Functions in an Ionic application

This tutorial is similar to the one on the AWS API Gateway. At the end you will be able to choose between the AWS or the Firebase way.
Firebase has many services we can use like Authentication, Real-Time Database, Crash Reports, etc. If we want something custom, Cloud Functions for Firebase allows us to create our own functions and call them in our Ionic applications.

Installation

The principle is simple:

  1. We create the functions locally
  2. Push them to Firebase
  3. Use them

In order to communicate with Firebase, we need to globally install one library:

Ok, we can now create our Ionic project:

Just like the previous tutorials, we need a Firebase project and it all starts there.
ionic firebase angularfire login

I’ll re-use my previous Firebase TODO project:
ionic firebase angularfire create project

Login into Firebase:

And setting up Firebase at the root of the project:

This will trigger the following script:

ionic firebase angularfire installation

Telling the script to use the TODO Firebase project and installing every npm libraries we will need.
Two new files and one folder are created at the root of our Ionic project:

ionic firebase angularfire rootThe .firebaserc which contains the name of our Firebase project:

The firebase.json file is empty for now, we need to tell Firebase in which folder our functions are located:

This functions folder contains:

ionic firebase angularfire functions

  1. The index.js file is where the functions will be written
  2. The node_modules folder will have the libraries we potentially need like moment.js, lodash, etc.
  3. The package.json will contain some information about the project, libraries, etc.

All we have to do now is to create the functions. Syntax-wise its Node.js: export, req, res, send, etc.

Just a test function

Let’s create our first basic function:

We can now deploy using the following command:

ionic firebase deploy functions

Keep this URL under the hand, we will call it in a few moments.

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

We can now head to our Ionic project!

We start by adding the HttpModule to the app.module.ts file:

Moving on to the home.ts file:

The Http Service is injected then used to call the Firebase Cloud Function. All we do here is subscribing and waiting for the data.

Launching our Ionic application:

Right here CORS should be an issue.
This is not a problem when developing on mobile, only in the browser.
The Allow-Control-Allow-Origin: * Google Chrome plugin can fix it, it’s available there.

Here is our result:

ionic firebase call

Great! Our data is in the body.
The first basic function is created and available.

Using other Firebase services

Now let’s spice this one a bit, we are going to use the Firebase database from the TODO application tutorial and count the number of tasks in the database.

Back to the index.js file!

We will need some privileges now, in order to acquire them, at the top of the file we add the following lines:

We can now create a new function named countTasks:

The database is stocked in a variable named db and  we grab the reference to our tasks root.
The once method will return a snapshot of our data and we can count the number of children using the numChildren method.
Finally we send a response with the status 200 (all good) and some json that includes the count.

Using the following command, the countTasks method is deployed without redeploying the test method:

ionic firebase deploy last function

One last stop at the home.ts file:

The URL we have to query is updated and a new count property is set to show the results on the screen.

A quick update to the home.html file:

And Voila!
We have our data:

ionic firebase deploy last function data

BONUS CONTENT
Enter your email address in the box below to get access to this tutorial (and others) source code.

Conclusion

We have seen how we can go serverless by creating and calling different functions using Cloud Functions for Firebase.
All we need is a Firebase project, installing the Firebase CLI, login in using a Google account, initializing the Firebase functions, modifying them as we need and finally deploying to the Cloud.
This is quite useful if you don’t want to handle a server, in my past experience I encountered many issues setting up Node.js servers on Heroku & Cie, here it takes 5 minutes and every Firebase services are at hand.

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *

1 Shares