top
Easter Sale

Search

Ionic Tutorial

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 applicationIn 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.Setting up a firebase databaseLogin 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 LMSDBSkip Google Analytics and click on create projectFirebase 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 loadsIn 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” Setting up the firebase app to be accessed by a web or mobile appWith 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 firestoreClick on the gear symbol  to create a projectScroll 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. Accessing the Firebase database from ionicWe first install angular fire and firebase. AngularFire is the official angular library for firebaseWe 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.tsIn the component that is used to display courses, we import AngularFireStore, AngularFirestoreCollection and Observable and inject it into the constructorWe 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 dataWe 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.  
logo

Ionic Tutorial

Using Firebase to Persist Data

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.

Setting up a firebase database

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” 

Setting up the firebase app to be accessed by a web or mobile app

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. 

Accessing the Firebase database from ionic

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 *