Firebase CRUD
Create, Read, Update and Delete data from your Ionic app using Firebase Firestore Database.
Last updated
Create, Read, Update and Delete data from your Ionic app using Firebase Firestore Database.
Last updated
This feature is only available in PRO version.
Follow Set up instructions before reading this page
In this app you will find all the logic and code needed for a CRUD (create, read, update and delete).
Our User model has the following attributes:
All the logic for this Firebase CRUD can be found in the FirebaseCrudService in src/app/firebase/crud/firebase-crud.service.ts
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 apps check this guide.
Our Database has 3 collections:
Skills
Avatars
Users
To try the CRUD from Ionic 5 Full Starter app using you own new database you need to create at least one skill and one avatar from the firebase console. Then you can create users from within the app.
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.
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.
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.
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.
For this use case we created a searchUsersByAge(lower: number, upper: number): Observable<FirebaseListingModel>method in src/app/firebase/firebase-integration.service.ts
For this filter, we wanted a query that returns all the Users whose name contains the search query. For example
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.
