{"id":2215,"date":"2018-06-11T20:07:29","date_gmt":"2018-06-11T20:07:29","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2215"},"modified":"2020-10-15T22:55:17","modified_gmt":"2020-10-15T22:55:17","slug":"building-ionic-apps-with-firestore","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/building-ionic-apps-with-firestore","title":{"rendered":"Building Ionic Apps with Firestore"},"content":{"rendered":"

\n This is a guest post from Jorge Vegara. Check out his courses covering Ionic, PWAs, and Firebase over at https:\/\/jsmobiledev.com<\/a>.\n<\/p><\/blockquote>\n

Firestore is a fully managed NoSQL document-based database for mobile and web. It’s designed to store and sync app data easily. Today, we’ll go over how to manage data from an Ionic app, using Firestore<\/a>.<\/p>\n

<\/p>\n

What is a Document-oriented database?<\/h2>\n

Before we jump into things, we need to know how to use it and how it differs from the real-time database.<\/p>\n

FireStore is a NoSQL document-oriented database. It’s a big difference from the Real-time database (referred to as RTDB from now on<\/em>) which is also NoSQL. The RTDB is a gigantic JSON tree where anything goes, and you can set up the information however you want. Simply put, the RTDB let’s developers put what ever data they want, where ever they want.<\/p>\n

Firestore, however, is a document-oriented database that offers much more structure than the RTDB. All of your data is stored in objects called documents and these documents can have any number of entries inside (booleans, strings, or even other objects<\/em>). When grouped together, documents are referred to as collections<\/strong>.<\/p>\n

For example, let’s imagine we want to store user information in the database: We would create a collection called users<\/code>. Inside the collection we’d find objects that hold the information to each user’s profile. Those user profiles are the documents in our database.<\/p>\n

A crucial thing to note is that documents can’t have other documents stored inside of them. For example, the user javebratt<\/code> can’t have a user of booya<\/code> as one of its properties. But documents can store other sub-collections inside. For example, the user javebratt<\/code> can have a collection of tasks<\/code> as one of its properties, and that sub-collection can hold all of the tasks documents.<\/p>\n

Setup and Configuration<\/h2>\n

Now that we have some more insight as to what Firestore is, let’s install it into our Ionic app. The first thing we’ll need to do is install the Firebase SDK.
\nWe could install just the Firebase JS SDK, but since we’re using Angular, we’ll install AngularFire2 as it gives us a nice Observable-based API to work with.<\/p>\n

Open your terminal, navigate to your app’s directory and run:<\/p>\n

$ npm install angularfire2 firebase --save\n<\/code><\/pre>\n
After installed, we need to initialize Firebase. For that go to src\/app\/app.module.ts<\/code> and import everything we’ll need:<\/p>\n
import { AngularFireModule } from 'angularfire2';\nimport { AngularFirestoreModule } from 'angularfire2\/firestore';\nimport { firebaseConfig } from '.\/credentials';\n<\/code><\/pre>\n
The AngularFire modules are so that we can access firestore, and the firebaseConfig<\/code> module is a file we’re using to keep our credentials out of source control.<\/p>\n
All you need to do is create the file src\/app\/credentials.ts<\/code> and populate it with:<\/p>\n
export const firebaseConfig = {\n  apiKey: 'Your Firebase Credentials Here',\n  authDomain: 'Your Firebase Credentials Here',\n  databaseURL: 'Your Firebase Credentials Here',\n  projectId: 'Your Firebase Credentials Here',\n  storageBucket: 'Your Firebase Credentials Here',\n  messagingSenderId: 'Your Firebase Credentials Here'\n};\n<\/code><\/pre>\n
These credentials are available inside your Firebase Console.<\/p>\n
\n  By the way, while you’re in the Firebase Console, go into the Database Tab<\/strong> and select Cloud Firestore<\/strong>. Tell it to allow read\/write since we’re going to be in development. Keep in mind that you need to set up proper security rules before going to production.\n<\/p><\/blockquote>\n
Once we import everything, add it to the imports<\/code> array inside the @NgModule<\/code> declaration:<\/p>\n
@NgModule({\n  declarations: [...],\n  imports: [\n    BrowserModule,\n    IonicModule.forRoot(MyApp),\n    AngularFireModule.initializeApp(firebaseConfig),\n    AngularFirestoreModule\n  ],\n  bootstrap: [...],\n  entryComponents: [...],\n  providers: [...]\n})\n<\/code><\/pre>\n
Now that we got the setup work done, we can access our database inside the app.<\/p>\n
Reading Data from FireStore<\/h2>\n
To read data from the database, we have two options: We can either (1) get a collection of items (think of it as an array of object<\/em>), or (2) get a specific document from the database (a single object<\/em>).<\/p>\n
To read an object from the database, all you need to do is to create a reference pointing to that document:<\/p>\n
constructor(private fireStore: AngularFirestore) {\n  this.userDoc = fireStore.doc<any>('userProfile\/we45tfgy8ij');\n}\n<\/code><\/pre>\n
Then in our HTML:<\/p>\n
<ion-content>\n <pre>{{userDoc | json | async}}<\/pre>\n<\/ion-content>\n<\/code><\/pre>\n
\n  The async<\/code> pipe here is a special pipe in Angular that will automatically handle subscribing and unsubscribing from an observable when the component is created and destroyed.\n<\/p><\/blockquote>\n
In our example, we’re pointing to the document with the ID of we45tfgy8ij<\/code> inside the userProfile<\/code> collection. If you want to fetch the entire user collection, we could do:<\/p>\n
constructor(private fireStore: AngularFirestore) {\n  this.userProfileCollection = fireStore.collection<any>('userProfile');\n}\n<\/code><\/pre>\n
You can also query users based on specific properties. Let’s say our users have a property called teamAdmin<\/code> and we want to fetch the profiles of all the users who are admins of a team.<\/p>\n
constructor(private fireStore: AngularFirestore) {\n  this.teamAdminCollection = fireStore.collection<any>('userProfile', ref =>\n    ref.where('teamAdmin', '==', true));\n}\n<\/code><\/pre>\n
Adding data to FireStore<\/h2>\n
We are however getting a little be ahead of ourselves, as we first need data in database before we can read.
\nTo push objects to the database we have two main options.<\/p>\n
If we want to have a specific ID for the documented we can do:<\/p>\n
constructor(private fireStore: AngularFirestore) {\n  this.userDoc = fireStore.doc<any>('userProfile\/we45tfgy8ij');\n  this.userDoc.set({\n    name: 'Jorge Vergara',\n    email: 'j@javebratt.com',\n    \/\/ Other info you want to add here\n  })\n}\n<\/code><\/pre>\n
If we don’t care about ID, we can just push the documents to the collection and let Firebase auto-generate the ID for us.<\/p>\n
constructor(private fireStore: AngularFirestore) {\n  this.userProfileCollection = fireStore.collection<any>('userProfile');\n\n  this.userProfileCollection.push({\n    name: 'Jorge Vergara',\n    email: 'j@javebratt.com',\n    \/\/ Other info you want to add here\n  });\n}\n<\/code><\/pre>\n
Updating data from FireStore<\/h2>\n
So far we’ve seen that the database API is fairly approachable for new devs and seasoned pros.
\nTo read data, we grab a reference to a collection or document.
\nTo write data, we call set()<\/code> and pass the data we want to write.
\nNow can you guess what the method is going to be called to update existing data?<\/p>\n
… Dramatic Silence<\/em> …<\/p>\n
Correct, it’s .update()<\/code>!<\/p>\n
Let’s say a user update some piece of information, we’d first want to grab a reference to that user document, then we’d want to call update()<\/code> and make any changes needed.<\/p>\n
constructor(private fireStore: AngularFirestore) {\n  this.userDoc = fireStore.doc<any>('userProfile\/we45tfgy8ij');\n\n  this.userDoc.update({\n    name: 'Jorge Vergara',\n    email: 'j@javebratt.com',\n    \/\/ Other info you want to add here\n  })\n}\n<\/code><\/pre>\n
Remove data from FireStore<\/h2>\n
For removing data, we have a few different options:<\/p>\n