Using Firebase to make Personalized App

Firebase is NoSql database to create fully managed platform for building iOS, android and web apps that provides data synchronization, authentication services, messaging, file storage and more. I am exploring firebase services to develop nutritional app(Nutrition Box) in project and would like to share some touchpoints of firebase that are really helpful while developing.

Firebase provides many services enabling us to build apps in fastest ways. Some of the services are:

• Authentication
• Realtime Database
• Storage
• Cloud messaging
• Hosting, etc.

In our project, we are using Apache cordova framework in Visual Studio for development. Here I would like to talk about some services of firebase and their features that I found quite helpful.

Authentication

Firebase authentication helps to add users to app. The user can authenticate with email&password, phone, Google, Facebook, Twitter, GitHub or anonymous. In our project, we are authenticating anonymous users for early testing. Setting up authentication is easy and there are many tutorials in firebase documents for authentication. But here I would like to talk about one of firebase authentication feature that I think is wonderful. It is a triggering function that enables us to know who is current user and thus display every data related to that user on every page he/she visit on app.

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    // Store user's id as uid to use further for database reference.
    uid = user.uid;
  } else {
    // No user is signed in.
  }
});
=============================== OR =================================
var user = firebase.auth().currentUser;
var uid;
if (user) {
  // User is signed in.
  // Store user's id as uid to use further for database reference.
    uid = user.uid;
} else {
  // No user is signed in.
}

As in our project, after sign-in user can view pages like profile, calorie counter, food log, workout, etc where data should come from realtime database corresponding to that user. So these functions can trigger logged-in user and display content on each page for that user. Whereas in PHP/SQL framework, we have to pass on user id as variable uid in url of each page to connect user to his data and is bit confusing. For example:

Code:
<a class="ref" href="level1.php?uid=<?php echo $id ?>">Level1</a>
Url:
https://codepattern.azurewebsites.net/level1.php?uid=6

Realtime Database

Firebase realtime database is NoSql database where we can store data in json format. CRUD(Create, Read, Update, Delete) operation on firebase database are quite simple. Here are some sample examples of CRUD operations:

CREATE:
firebase.database().ref('user/'+uid).set({
    FirstName:  first_name.value,
    LastName:  last_name.value,
    Height :  height.value,
    Weight: weight.value,
  });

Here I am creating a database entry corresponding to user during sign-up with ID = uid extracted during authentication.

READ:
firebase.database().ref('user/'+uid).once('value', function(snapshot) {      snapshot.forEach(function(childSnapshot) {
                  
      var firstname = childSnapshot.val().FirstName;
      var lastname = childSnapshot.val().LastName;
      var height = childSnapshot.val().Height;
      var weight = childSnapshot.val().Weight;
// These variables can be inserted into html of profile page 
});

Here data is read from database and displayed in user’s profile. Reference is being given to user currently logged-in by triggering function discussed above in authentication.

Similarly, Update and Delete operation are simple where we can refer to user database through uid and can update or remove user data. Update operation use set() to overwrite data at specified reference. set() function can be used to either create data or overwrite existing data at specified reference.

There are some event-triggers that can be used while CRUD operations. These event triggers help to update list of data in app without refreshing page.

var firedata = firebase.database();
During CREATE:
firedata.ref('user/'+uid).on('child_added', function() {
  read();       // call read function with READ operation.
});
During UPDATE:
firedata.ref('user/'+uid).on('child_changed', function(data) {
  read();       // call read function with READ operation.
});
During DELETE:
firedata.ref('user/'+uid).on('child_removed', function(data) {
  read();       // call read function with READ operation.
});

Storage

Firebase storage can enable user to add media(images or videos) in app. In our project we are using storage bucket to store user’s image to be displayed in user’s profile.

edit.addEventListener('click', function(e){
    
    var file = e.target.files[0];
    firebase.storage().ref(uid+'/'+file.name).put(file);
});

Here whenever user clicks on edit button in user profile, he/she is able to choose image from local gallery and can upload it as his/her profile image. The image is stored in firebase storage with folder name = uid.

Hosting

Firebase also features a hosting service through which we can deploy our app and view it in domain generated. To deploy app, firstly we need to install firebase CLI and then open project directory through cd and run firebase init command and then following through steps by choosing public directory(in my case public directory was www in visual studio project), run the following command:

$ firebase deploy

This command will generate hosting url where project get deployed. After making more changes in project, we can run same command again to deploy changes.

Thus I am able to explore and share with you all these above listed services of firebase. However there is many more to be learned about firebase and its featured services. In future, we are looking forward to explore cloud messaging and notification hub for our app.

Resources:

Firebase Docs: https://firebase.google.com/docs/