Firebase

An Introduction to using Firebase with Ionic

Who Am I ?

Sani Yusuf

• Software Engineer
• Keen Glass Explorer
• Ionic Evangelist
• Currently consulting for Huddlebuy 
• Writer / Trainer on mobile 
• I love Avatar (Im even learning Navi)

@saniyusuf

Looking For Co Founders

Why Im Here Today

• Tell you about Firebase
• Focus on AngularFire Library
• Show you how quick it is to set a back-end with Firebase
• Demo some super duper cool Firebase features like
  • 3 way data binding
  • Structuring your Firebase
  • Easy authentication 
• Security

3, 2, 1, Lets Fly 

Data!

• It is the single most important part of any application

  • Web

  • Mobile
  • TV
  • Wearable
• Its all about presenting data. 

Storing Data

​Classic Procedure Of Storing Data

• Pay hosting provider
• Create a server
• Create a database
• Create a service to communicate 
• Do al that load balancing mumbo jumbo 
• Worry about performance forever and constantly fix all above as they always break

If you have a million dollar revenue making company then, this kind of makes sense

Unfortunately I am not, you are likely not too.

If you are let me know if you need a mobile developer :) 

Backend As A Service Is The New Trend

My Point?

Creating A Backend Should Not Suck

What We Want?

• Easily deployable solution

• Quickly save and access data via CRUD operations

• Authentication provision 

• Integration with our already existing tools

• Should not have to worry about all the specifics

Introducing

What Is Firebase?

A powerful technology for real-time data storage.

• Very fast
• Automatically updates in real-time 
• Requires no set-up 
• NOSQL by nature
• Part of Google services since 2014

Yes And There Is More

Features

Integrates with you favourite framework

• Gives one heck of a free entry package

• Upgrades are cheap
• Authentication 
• Security 

How Well Does It Work With Ionic?

Super Duper Well Thanks To Angular & AngularFire

Angular-Fire

• Ionic is built on Angular

• Firebase <3 Ionic

• Firebase has an Angular Library called Angular Fire
• Angular Fire Encapsulated as a service 

• $firebaseObject
• $firebaseArray
• $firebaseAuth

Contains 3 Services

$firebaseObject

• Used to Sync Object to Firebase
• Creates a 3 way data-binding
• Can perform CRUD operations

app.controller("MyCtrl", ["$scope", "$firebaseObject",
  function($scope, $firebaseObject) {
     var ref = new Firebase(URL);

     var obj = $firebaseObject(ref);

     // to take an action after the data loads, use the $loaded() promise
     obj.$loaded().then(function() {
        console.log("loaded record:", obj.$id, obj.someOtherKeyInData);

       // To iterate the key/value pairs of the object, use angular.forEach()
       angular.forEach(obj, function(value, key) {
          console.log(key, value);
       });
     });

     // To make the data available in the DOM, assign it to $scope
     $scope.data = obj;

     // For three-way data bindings, bind it to the scope instead
     obj.$bindTo($scope, "data");
  }
]);

$firebaseArray

• Used To Sync an array
• creates a 3 way data binding
• Lets you perform CRUD operations

Demo Time

May the demo gods be with us

Now You Believe Me?

Still no server, no PHP (I Hate), No Nothing

Authentication

• The award for the fastest auth process ever goes to Firebase. If you find something better tell me
• Lets you create classic sign up 
• You can also you login providers

User/Pass Auth

app.controller("MyAuthCtrl", ["$scope", "$firebaseAuth",
  function($scope, $firebaseAuth) {
    var ref = new Firebase("https://<your-firebase>.firebaseio.com");
    $scope.authObj = $firebaseAuth(ref);


    $scope.authObj.$authWithPassword({
      email: "my@email.com",
      password: "mypassword"
    }).then(function(authData) {
      console.log("Logged in as:", authData.uid);
    }).catch(function(error) {
      console.error("Authentication failed:", error);
    });

  }




]);

Sign Up User

    $scope.authObj.$createUser({
      email: "my@email.com",
      password: "mypassword"
    }).then(function(userData) {
      console.log("User " + userData.uid + " created successfully!");
    
      return $scope.authObj.$authWithPassword({
        email: "my@email.com",
        password: "mypassword"
      });
    }).then(function(authData) {
      console.log("Logged in as:", authData.uid);
    }).catch(function(error) {
      console.error("Error: ", error);
    });

Provider Auth

    $scope.authObj.$authWithOAuthPopup("google").then(function(authData) {
      console.log("Logged in as:", authData.uid);
    }).catch(function(error) {
      console.error("Authentication failed:", error);
    });

Other Auth

• Custom Tokens
• Anonymous login

Structure Data

• NOSQL By Nature
• Dont think SQL think JSON Object 
• Denormalise your data

Security

• Expressive
• Can express based on the following
  • Auth Permissions
  • Authentication Permission
  • Validation

Roundup

• We still don't have a server (take that back-end dev)
• Very quick to do powerful stuff
• Not always the best approach for you, works great for real-time apps 
• Ties in perfectly with Ionic

Questions