Firebase Integration

Firebase CRUD and filtering

This feature is only available in the PRO version.

The code for this integration is under the following folder: src/app/firebase

Set up

We are going to use angularfire2 plugin in order to connect our Ionic application with a Firebase Firestore database.‌

In order to install the plugin we have to run the following command in our ionic project: npm install firebase angularfire2 --save

Now, you need a firebase project to connect to this app. Go to firebase console and start a new project (or select an existing one). Once you have created the firebase project you will be redirected to the following menu:‌

Click on "Add Firebase to your web app" to see your new Firebase application’s credentials. We’ll specify these credentials to tell our Ionic application to communicate with our Firebase application.‌

The next step will be to add our Firebase credentials to our Ionic application. For this we’ll go to our Ionic project, which we created in the previous step, and add the following code in the environment.ts file located in src/environments/:

environment.ts
export const environment = {
production: false,
firebase: {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_SENDER_ID"
}
};

Keep in mind that you have to replace the constants with your own values.‌

Users CRUD

In this app you will find all the pages needed for a CRUD (create, read, update and delete).‌

Our User model has the following attributes:

src/app/firebase/firebase-user.model.ts
export class FirebaseUserModel {
id: string;
avatar: string;
name: string;
lastname: string;
email: string;
phone: number;
age?: number;
birthdate: number; // timestamp
skills: Array<string>;
languages: {
spanish: number,
english: number,
french: number
}
}

All the logic to interact with Firebase can be found in the FirebaseService in src/app/firebase/firebase-integration.service.ts

Firestore Database

‌Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your business.

Cloud Firestore is a fast, fully managed, serverless, cloud-native NoSQL document database that simplifies storing, syncing, and querying data for your mobile, web, and IoT apps at global scale. Its client libraries provide live synchronization and offline support, while its security features and integrations with Firebase and Google Cloud Platform (GCP) accelerate building truly serverless apps. (Definition from https://cloud.google.com/firestore/)

To learn more about Firestore in Ionic 4 apps check this guide.​‌

Our Database has 3 collections:‌

  • Skills

  • Avatars

  • Users

To try the CRUD from Ionic 4 Full Starter app using you own new database you need to create at least 1 skill and 1 avatar from the firebase console. Then you can create users from within the app.‌

Creating the Database

To create the DB go to yo project and click Database. You will see the following screen:‌

Then click Create Database. The following modal will open. Select Start it test mode. You can change this later.‌

Create Skills Collection

‌Now click + Add collection.‌

And use the collection ID: skills‌

Click next and add a name filed of type string and assign it some value. In this case we used Ionic.‌

In our example, the skills will represent the technology user skills such as Angular, Ionic, Firebase, Mongo, Node, React, etc.‌

For this example we use autogenerated ids, however, you can set your own IDs if you prefer.‌

Then click Save.‌

Now add a few more documents to this collection to create a few skills.‌

Create Avatars Collection

Repeat the process of creating a new Collection but using the avatars collection name.‌

Our avatars will just have a link field with the value of a profile picture link.‌

Again, create some avatars in your collection.‌

Ok, now you are ready to start creating Users from the app. Open the app in the browser by running ionic serve and add your first User.‌

Filters

We are going to explain how to query data using Firestore. In the app you will see two filters:‌

  • by age range

  • by name

We want to be able to use both filters at the same time so our searchList() method from src/app/firebase/firebase-listing/firebase-listing.page.ts performs both filters at the same time. Let's see an example:‌

Filter by age range

For this use case we created a searchUsersByAge(lower: number, upper: number): Observable<FirebaseListingModel>method in src/app/firebase/firebase-integration.service.ts

Filter by name‌

For this filter, we wanted a query that returns all the Users whose name contains the search query. For example:

all users whose name contains an 'a'‌

Firebase Restrictions

There are some restrictions when it comes to query data with Firebase.‌

Firestore does not provide a contains function so the searching always filters by the entire name, let see an example:‌

Imagine we have a person called Robert and the followings cases:‌

Search: Rob

Robert is present in the results‌

Search: Bert

The result is empty because there’s no one which names start with Bert.‌

The second problem we had was that searches are not case sensitive, it means that the results of searching Robert and robert are not equal.‌

That's why we decided to implement this functionality in the client side using a basic arrow function. I know that if you have thousands of results, filtering them in the client side isn't ideal so you may need to find a workaround.‌

Feel free to find more information about querying collections in Angular Fire to create the specific query you need.

For more information about queries in Firestore read the docs.