We looked at using HTTP to access data from an API end-point. In this section, we will look at how you could do the same with firebase.
Firebase is a web and mobile application development platform. It was originally developed by Firebase Inc., which was later acquired by Google. Firebase offers products for authentication, messaging, analytics, etc. Firebase on its own can be an end to end back end for a web or mobile application
In this tutorial, we will use firebase’s cloud database to store and retrieve data from our application. It is a documented oriented database. It is a JSON tree where you can store just about anything.
All the data that you store are called documents and documents grouped together are called collections.
In this example, we will store a collection of Courses. And each course will be stored as a document.
Login into google and navigate to https://console.firebase.google.com
You will see a list of firebase projects if you have any.
Create a new project with the name LMSDB
Skip Google Analytics and click on create project
Firebase takes a while and creates your project
You will land on this page, which is the project home page. Click on cloud firestore.
Click on create a database in the page that loads
In the wizard that launches, click on “Start in test mode”
Choose the location where your firestore will be hosted.
Once the Firestore is provisioned, go ahead and start a collection.
Add the fields that you will want in the Course collection. In this case, course, faculty and duration. You can then go on and add two or 3-course “documents”
With the database created, collection defined with documents, we are now almost set to let web and mobile applications to access this data. To do so, you will have to define a project which will your application the necessary information to be able to access the firestore
Click on the gear symbol to create a project
Scroll down to the section “Your Apps”
And click on the Web App icon. (The third icon marked </>). You will be directed to a wizard which lets you register an app.
You will be presented with the Firebase Config. Keep this handy. You will have to use this in your ionic application.
var firebaseConfig ={ apiKey:"From Firebase", authDomain:"From Firebase", databaseURL:"From Firebase", projectId:"From Firebase", storageBucket:"From Firebase", messagingSenderId:"From Firebase", appId:"From Firebase" };
We are now all set to let the ionic app access the firebase data.
We first install angular fire and firebase. AngularFire is the official angular library for firebase
We go ahead and create a file called app/credentials.ts and put in the config details from firebase.
We import Angular Fire & Angular FireStore into app.module.ts
In the component that is used to display courses, we import AngularFireStore, AngularFirestoreCollection and Observable and inject it into the constructor
We declare a variable for fetching the Collection and an “items” array to fetch data into. This variable is declared as observable firebase constantly pushes its contents when the value changes. We also use “async pipe” in the ng-for to access this from the HTML.
Inserting data
We have a form set up to insert data
Each text box in the form is bound to an attribute in the Course Object with attributes course, duration and faculty. On clicking submit, the onSubmit function is called.
We call the itemsCollection.add function and the record is inserted. The record is immediately displayed.
In summary, we have created a database in Firebase, installed the npm packages to access firebase, and accessed it from Ionic. We have fetched the data and the inserted data into the database.
Leave a Reply
Your email address will not be published. Required fields are marked *