Firebase in your Ionic 5 app
Firebase is a group of back-end solutions such as Real-Time database, Cloud Storage, Authentication&User management, Dynamic Links, Push Notifications… Firebase will let us create our app without the hassle of actually coding back-end services and having the infrastructure to support them. Firebase is owned by Google and it’s being used in big names apps such as Spotify, Halfbrick… They work like a charm and the learning curve is quick and easy.
Why should we use it? Honestly if you want to deliver cloud projects with a good quality in an acceptable time scale and get them working… Welcome to Firebase.
Why shouldn’t we use it? Well if you are working in a top secret government intelligent corporation with classified UFO’s reports and they cannot leave your onsite infra, yes this service is not for you as it’s a cloud service. That’s the only reason I can think I would not use it but if you are reading this it’s unlikely you are part of that top gov secret program about UFOs so get down to this!
By the way! if you like or you think this article is good for you don’t forget to clap & subscribe!. You can also help me joining me on Patreon inviting me to a coffee or beer so I can keep producing these articles.
What do we need?
We will need:
- Firebase Project & Firestore.
- Ionic Blank Instance.
- AngularFire and Firebase.
Firebase
Let’s start with Firebase, basically we need to create an account and create a project, so just go to Firebase console and create your account.
Once that’s ready you should be able to create projects, just click on Add projects and follow the screenshots.
Let’s choose a name for your project and follow the steps.
That will trigger it!
And Once we see that console, we are ready to go!!! Our project is ready to use. What to do now, well we need to add our ionic instance so let’s Add an app to this project, so far we will add the web app so just click on the icon with the </> tag
And follow the steps.
Ok! IMPORTANT that’s your connection to firebase and that’s what we need to set up in our app in order to connect our Ionic 5 App to the Firebase Project, don’t worry if you close this, you can retrieve it later on, but keep it handy.
Yes, it’s a bit long but it’s worth it. Now we have our project ready, let’s set up our Ionic app and code for retrieval of Firestore, which is a NoSQL Database service in firebase.
Firestore
We will need Firestore Service up and running on the project. So let’s enable it. just go back to your Firebase console and go to the DB menu just right below under users and just follow the create database process
For now we are going to start in test mode but make sure you swap and write , don’t worry I will cover that topic later on with some useful examples.
If you are new to NoSQL, these databases are basically set up with no relationships as you understand them in SQL so expect no Primary Keys, Foreign keys etc… bury that in the deepest whole you can imagine because it will only slow you down. Instead think of these databases as a Directory Tree with its files and apply the same concept to Collection (directories) and Documents(files).
We are going to create a document in a collection in the way below.
So we end up with something simple as the scheme below.
That’s it! let’s go to our favourite console and start an ionic project!
Start Ionic Project and install the firebase dependancies.
ionic start Ion5Fire tabs --type angularnpm i @angular/firenpm i firebase
We are going to use the official Angular library for Firebase.
Let’s code
Yes I know it has been tough but it’s far easier than deploy your server, allocate resources and install and configure your DB instance, right?
So as usual we have our root directory of our ionic project the first thing we need to do is add our Firebase config to our environment variables.
So first thing we are going to ./src/environments/environment.ts and add the config we got from Firebase when we add the web app.
Great! now let’s initialize the Firebase connection in our app.module.ts
Our app is ready to perform Firestore ops! so let’s get some object from the Firestore and show it in our Tab1, so basically we will code a subscription to a document in Firestore and we will display the content.
So let’s grab the Document ‘1' allocated in the collection named ‘/Test/’ . We are calling the firestore.doc and we will use the ValueChanges() method. Once that we will subscribe to the response and save it in the variable ‘doc’.
We will also display in the console the content of the document.
Now it’s time to show this document in our Tab1.page.html view.
We just simply called the variable doc and its .text field. We add a ? because we need to make it async as we are waiting for something to download from the cloud…
And that’s it! we should be ready to go… We will reserve the other tabs for future articles about operations such Auth ops, Cloud Storage etc….
For CRUD operations there is another article you may want to checkout
Troubleshooting.
It’s likely an error like the one below comes up during your ionic serve it has an easy fix and I’m sure angular and firebase sort it out soon but in case it happens to you there is a solution below.
ERROR in node_modules/@angular/fire/angularfire2.d.ts:37:49 - error
TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
[ng] 37 [K in FunctionPropertyNames<T>]: ReturnType<T[K]> extends Promise<any> ? K : never;
[ng] ~~~~
...
...
...
Easy fix just go to your tsconfig.json and add a small line to sort this error. just add “skipLibCheck”: true, in the “compilerOptions” as per the snippet below.
Let’s Test!
Let’s just do a quick check to see that everything is settle.
ionic serveIf everything went well we should be able to see
By the way! if you like or you think this article is good for you don’t forget to clap & subscribe!. You can also help me joining me on Patreon inviting me to a coffee or beer so I can keep producing these articles.
Conclusion.
Yes it has been a long path to get to show cloud content in our app, however this has no limits right now… in following articles we will take this as the base to get into complex CRUD operations, auth operations, links, notifications… the limit is the sky!
If you want to move forward with CRUD operations check this out!
