Users CRUD

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:

src/app/firebase/crud/user/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 for this Firebase CRUD can be found in the FirebaseCrudService in src/app/firebase/crud/firebase-crud.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 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.‌

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.

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

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.