Firebase – Introduction

Firebase is the product of Google. To create new Firebase projects, you need a Google account. Firebase projects can be created and managed using the Firebase console (https://firebase.google.com/console/). Firebase provides different SDKs for mobile and web apps to interact with its database. Ionic apps should use the web SDK (https://firebase. google.com/docs/web/setup).

Note: Ionic apps should use the web SDK (https://firebase. google.com/docs/web/setup).

Why Firebase?

Firebase has made the life of developers easier as they don’t have to spend time building backend server to build simple APIs. We can easily do all CRUD operations with minimum effort and with Web socket supports it’s super fast in syncing data. Also, Firebase offers offline sync, user authentication, and features or securing the data with sets of rules.

Firebase provides user authentication for multiple platforms: Custom – for integrating with existing authentication systems

• E-mail – register and authenticate users by e-mail and password.
• Anonymous – for guest accounts without any personal information required
• Facebook
• Google
• Twitter
• GitHub

Firebase provides many options such as Analytics, Authentication, Database, Storage, Hosting, Notification and many other options. All Firebase database data is stored as JSON objects and no relational tables exist.

Database Structure

Firebase has a unique database structure that is different from other databases. Each Firebase database is stored as a tree-like JSON object. This tree structure is very flexible for all kinds of data. You can organize the app’s data in a way suits most for your app. For an e-commerce app, its database can be organized as below

{
	"products": {
		"00001": {
			"name": "iPhone 6s plus",
			"price": 613.50
		},
		"00002": {
			"name": "LG Nexus 5",
			"price": 187.99
		}
	},
	"customers": {
		"00001": {
			"firstName": "Alex",
			"lastName": "Cheng",
			"email": "alex@example.com"
		}
	},
	"orders": {
		"00001": {
			"customer": "00001",
			"items": {
				"00001": true,
				"00002": true
			},
			"shippingCost": 5.00
		}
	}
}

The property products is a map of product id to its properties. The property customers is a map of customer id to its properties. The property orders is a map of order id to its properties.

Each data value in the database has a unique path to identify it. If you think of the whole JSON object as a file directory, then the path describes how to navigate from the root to a data value. For example, the path of the price of the product with id 00001 is /products/00001/price. The path /orders represent all orders. The path is used when reading or writing data, as well as configuring security rules.

Adding Firebase database to Ionic

We have to create new project and Google will display three platform option as Android, ISO, and the web. The Ionic is web based so we have to choose to add Firebase to the web app. Add Firebase to your web app shows a dialog with code ready to be copied into the HTML file.

Google Place id

addPlaces(places) {
  places.forEach((place) => {
    this.db.object('/locations/' + place.place_id).valueChanges().subscribe(data => {
      place.reviewsAvg = data && data['reviewsAvg'] || 0;
      place.reviewsCount = data && data['reviewsCount'] || 0;
    });
    this.places.push(place);
  });
}

this.locationRef = db.object('/locations/' + navParams.data.place_id);
this.location = this.locationRef.valueChanges().subscribe(data => {
  this.reviewsAvg = data && data.reviewsAvg || 0;
  this.reviewsCount = data && data.reviewsCount || 0;
});
thi

 profileRef = {} as ProfileRef;  

this.db.object('/profiles/' + this.navParams.get('userId')).valueChanges().subscribe(data => {
      console.log("profile data : ", data);
      this.profileRef = <ProfileRef> data;
      
    },
    err => console.log("error in retrieving user from profile : "+err),
    () => console.log("user profile key retrieve successful"));

Taking review From single user 

this.reviews = db.list('/reviews', ref => 
  
 ref.orderByChild('uid').equalTo(navParams.data.userId)).valueChanges();