Hey, Folks..I am back with my new article on Database. Do you know that you can manage your database in real-time using a platform called Firebase. Sounds great na….We will try this out today.

Before start working with Firebase. Let us first know What is it? What are its features?

What is Firebase?
Firebase is a mobile and web application platform with tools and and infrastructure designed to help developers build high-quality aps. Firebase is made up of complementary features that developers can mix-and-max to fit their needs.

Features:
It provides following features:

  • Realtime Database
  • Hosting
  • Authentication
  • Storage
  • Cloud Messaging
  • Remote Config
  • Test Lab
  • Crash Reporting
  • Notifications
  • App Indexing
  • Dynamic Links
  • Invites
  • AdWords
  • AdMob

Today, we will discuss about Realtime Database with Firebase using Ionic 2.

First of all let us first see how we can create a database in Firebase:
To start using Database into our Ionic project, we need to follow below steps:

1. Create a project and to know how to create a project in Firebase, you can follow this link and go through Step 1 and 2.

2. You now need to click on your project shown on the console. On clicking, a new window gets opened which is shown as below:

3. Click on Database on side Menu shown as below:

4. On Clicking on Database, again a new window will gets opened up.

The area highlighted above in Red colour shows our database.

Note:
In Firebase, you don’t need to create a database, it is automatically generated as shown above in green box.
In above image,
Blue box shows the name of the table.
Pink box shows the key. It can be taken as row of the table.
Black box shows the column of the row.

All the tables are created manually through coding in Ionic 2. So as soon as you will write code, all tables will be created and will be shown in hierarchical form as shown in above image.

This is all you have to do in Firebase.

6. Now, create a new Ionic 2 project or open already existing project in command prompt and install following:

    • Update your Ionic 2 with latest version. Type below command inside your project directory.
npm install -g ionic@latest
    • Install app scripts. Type:
npm install ionic/app-scripts@latest --save dev
    • Install types/request. Type:
npm install @typings/scripts@0.0.30 --save -dev --save -exact
    • Install firebase and angularfire 2:
npm install firebase angularfire2 --save

7. Open your project in Visual Studio Code.
8. Open app.module.ts file and import AngularFireModule.

import { AngularFireModule } from 'angularfire2';

9. Now, copy the script code generated while adding firebase into your web app. Your script code must be in the form of:

You have to copy only the code in red box into your app.module.ts file before @ngModule under Export class firebaseConfig as shown below:

Export class firebaseConfig =
  {apiKey: "AIzaSyDdQPigpjA0t-ZPD5Fowy5O6ctllM9dNRg",
    authDomain: "apply-cbc33.firebaseapp.com",
    databaseURL: "https://apply-cbc33.firebaseio.com",
    storageBucket: "apply-cbc33.appspot.com",
    messagingSenderId: "745925553315"
}
Note:
You will not have same script code as in the image. The script in above image is just a demo.
Also, you can reuse the same script code in your other projects too, but just remember, your table will be created in the database whose script code you have entered in your project.

10. Now, add below line in your imports:

imports: [
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig)
],

11. Import AngularFire in your .ts file.

import { AngularFire } from 'angularfire2';

Add it in constructor too:

Public angFire: AngularFire
Note : Steps 8 to 11 imports firebase into your project. Now you are ready to create tables and save your data in these tables.

I. Now, let us see how we can add our data into our firebase. Follow steps below:

1.Store each value in separate variables. Like below:

var Title = this.title;

2. Now, create a firebase reference and store data in it. For this, write code as below:

var firebaseRef = firebase.database().ref();
var SongsRef = firebaseRef.child('Songs');
SongsRef .push({
title:Title
});

Here,
var firebaseRef = firebase.database().ref();: This line is creating a firebase reference.
var SongsRef = firebaseRef.child(Songs); : This line says that a child name “Songs” is created and its reference is stored in SongsRef. Songs is the name of the table which will automatically be created.
Songs.push({.. });: This is used to push data into our table.

Finally, Print the data into your html file in the way you want and then run our application.On running the application, your database must look like this:

II. Update the data in firebase:

To update the data, pass the id/key of the song, variable name(say A) (whose value you have to change), variable(say B) (in which updated value is present) into the function.
Then store the value of B in variable A in the function definition using update function as follows:

this.songs.update(songId, {
title: data.title
});

III. Remove the data from database.

To remove the data, pass the id/key of the song into the function.
Remove song of passed id using function remove.

removeSong(songId: string){
this.songs.remove(songId);
}

These are the basic firebase functionalities in realtime database. Hope you have understood them. If not, don’t worry. Start reading again. Hope you will understand next time. Hehehe…. Well jokes apart, If you have any query, do comment on this article. Till then, enjoy because lots of things are still need to come.

Firebase Functionalities in Ionic 2

Most Popular

Have a Great startup Idea and want to make it possible? Looking for an extraordinary team to build a mobile or Web app for your idea to come into reality? Then you are at right place. I provide my services for mobile and web app development.

Copyright © 2019 CrocoCode. All rights reserved.

To Top