Clase 8

Firebase

Pricing
Features
Clientes
Documentación
Librerías y ayudas

Aprendiendo con Firebase 2.x

Firebase Docs
Firebase Open Data Sets (deprecated)
Firebase - GeoFire
Firebase - Backbone
Firebase - Angular
Firebase - Nodejs/js
Firebase - Ionic
Firebase - React
Firebase - Ember

Primeros pasos

Crear una cuenta:
- SignUp
Gestionar dependéncias en cliente:

  <script src="https://cdn.firebase.com/js/client/2.2.9/firebase.js"></script>

Gestionar dependéncias en Nodejs:

  npm install firebase -save

Limitaciones

Limitaciones técnicas
Conversión de Arrays

Guardando Datos

Guardando datos en Firebase
set() Almacena / remplaza los datos
update() Actualiza los datos
push() Alamacena los datos con un ID único.
transaction() Para datos complejos y cocurridos.
set():

  var ref = new Firebase("https://<<---URL--->>.firebaseio.com/fb-ejemplos/escritura");
  var usersRef = ref.child("users");
  usersRef.set({
    alanisawesome: {
      date_of_birth: "June 23, 1912",
      full_name: "Alan Turing"
    },
    gracehop: {
      date_of_birth: "December 9, 1906",
      full_name: "Grace Hopper"
    }
  });

  var ref = new Firebase("https://<<---URL--->>.firebaseio.com/fb-ejemplos/escritura");
  usersRef.child("alanisawesome").set({
    date_of_birth: "June 23, 1912",
    full_name: "Alan Turing"
  });
  usersRef.child("gracehop").set({
    date_of_birth: "December 9, 1906",
    full_name: "Grace Hopper"
  });

update():

  var hopperRef = usersRef.child("gracehop");
  hopperRef.update({
    "nickname": "Amazing Grace"
  });

push():

// update y Callback
  var dataRef = ref.child("IDs");
  dataRef.push("Guardando datos...", function(error) {
    if (error) {
      console.warn("No se han podido guardar los datos." + error);
    } else {
      console.info("Datos guardados con exito.");
    }
  });

Demo

Eventos

Evento (value):

  var ref = new Firebase("https://docs-examples.firebaseio.com/web/saving-data/fireblog/posts");
  
  ref.on("value", function(snapshot) {
    console.log(snapshot.val());
  }, function (errorObject) {
    console.log("Fallo en lectura de datos: " + errorObject.code);
  });

Evento (child_changed):

  var ref = new Firebase("https://<<--URL-->>.firebaseio.com/fb-ejemplos/escritura/users");
  
  ref.on("child_changed", function(snapshot) {
    var usersData = snapshot.val();
    console.log("Nuevos cambios(child_changed): ", usersData);
  });

Evento (child_removed):

  var ref = new Firebase("https://<<--URL-->>.firebaseio.com/fb-ejemplos/escritura/users");
  
  ref.on("child_removed", function(snapshot) {
    var usersData = snapshot.val();
    console.log("Usuario eliminado(child_removed): ", usersData);
  });

once() una vez:

var ref = new Firebase("https://<<--URL-->>.firebaseio.com/fb-ejemplos/escritura/users");

ref.once("child_changed", function(snapshot) {
  var usersData = snapshot.val();
  console.log("Nuevo cambio(once - child_changed): " + usersData);
});

Quitar evento (value):

  ref.off("value");

Quitar todos los eventos:

  ref.off();

Demo

Queries

orderByChild() Ordenar por hijo
orderByKey() Ordenar por Llave
orderByValue() Ordenar por valor
orderByPriority() Ordenar por prioridad
Documentación
orderByChild():

  var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
  ref.orderByChild("height").on("child_added", function(snapshot) {
    console.log(snapshot.key() + " was " + snapshot.val().height + " meters tall");
  });

orderByKey():

  var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
  ref.orderByKey().on("child_added", function(snapshot) {
    console.log(snapshot.key());
  });

orderByValue():

  var scoresRef = new Firebase("https://dinosaur-facts.firebaseio.com/scores");
  scoresRef.orderByValue().on("value", function(snapshot) {
    snapshot.forEach(function(data) {
      console.log("The " + data.key() + " dinosaur's score is " + data.val());
    });
  });

Demo

Queries Avanzadas

limitToFirst() desde el primero...
limitToLast() desde el final...
startAt() empiezan por...
endAt() terminan por...
equalTo() igual a...

Queries Avanzadas (básicos)

limitToFirst():

  var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
  ref.orderByChild("height").limitToFirst(2).on("child_added", function(snapshot) {
    console.log(snapshot.key());
  });

limitToLast():

  var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
  ref.orderByChild("weight").limitToLast(2).on("child_added", function(snapshot) {
    console.log(snapshot.key());
  });

Queries Avanzadas (concatenando)

.orderByValue() y .limitToLast():

  var scoresRef = new Firebase("https://dinosaur-facts.firebaseio.com/scores");
  scoresRef.orderByValue().limitToLast(3).on("value", function(snapshot) {
    snapshot.forEach(function(data) {
      console.log("The " + data.key() + " dinosaur's score is " + data.val());
    });
  });

.orderByChild() y .startAt():

  var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
  ref.orderByChild("height").startAt(3).on("child_added", function(snapshot) {
    console.log(snapshot.key());
  });

.orderByKey() y .endAt():

  var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
  ref.orderByKey().endAt("pterodactyl").on("child_added", function(snapshot) {
    console.log(snapshot.key());
  });

.startAt() y .endAt() usando tilde:

var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
ref.orderByKey().startAt("b").endAt("b~").on("child_added", function(snapshot) {
  console.log(snapshot.key());
});

.equalTo():

  var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
  ref.orderByChild("height").equalTo(25).on("child_added", function(snapshot) {
    console.log(snapshot.key());
  });

Ejemplo: Busquemos un dinosaurio que sea mas pequeño que un Stegosaurus

  var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
  ref.child("stegosaurus").child("height").on("value", function(stegosaurusHeightSnapshot) {
    var favoriteDinoHeight = stegosaurusHeightSnapshot.val();
  
    var queryRef = ref.orderByChild("height").endAt(favoriteDinoHeight).limitToLast(2)
    queryRef.on("value", function(querySnapshot) {
        if (querySnapshot.numChildren() == 2) {
          // Data is ordered by increasing height, so we want the first entry
          querySnapshot.forEach(function(dinoSnapshot) {
            console.log("el dinosaurio más pequeño que el Stegosaurus es " + dinoSnapshot.key());
  
            // Returning true means that we will only loop through the forEach() one time
            return true;
          });
        } else {
          console.log("El Stegosaurus es el dinosaurio más pequeño");
        }
    });
  });

Demo

Trabajar Offline

Documentación
Realizando acciones al desconectarse:

  var presenceRef = new Firebase('https://<<--URL-->>.firebaseio.com/info/connectednow');
  presenceRef.onDisconnect().set("I disconnected!");

Social Login

User-auth con Firebase
Ejemplo en jsfiddle

Seguridad y Autorización

Ajustes de seguridad

Deploy

Deploy en Cloud
Deploy usando Node

Analicemos Código

Código Fuente demo de Velocidad
Curratelo
Raspberrypi system info data to Firebase
Calidad del Aire con Firebase
Agroduino
Aire Madrid
EMT Bus Live
Bitcoin price ticker with Arduino
MovieFire con Nodejs

Nuevo Firebase 3.x

Más info

Firebase expands to become a unified app platform
MIgration guide

Claves del cambio

Nueva Interfaz
Muchas funcionalidades Nuevas
Un enfoque amplio a desarrollo de apps nativas (Android e iOS)
Existe un asistente para migrar los proyectos a la nueva consola
Los nuevos proyectos ya no componen el nombre del dominio

Migración de FIrebase 2.x a 3.x

Nueva versión de las librerías

Cliente

  <!-- Antes -->
  <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
  <!-- Ahora -->
  <script src="https://www.gstatic.com/firebasejs/3.0.4/firebase.js"></script>

NPM

  npm uninstall firebase --save
  npm install firebase --save

Obtener una referencia de la base de datos

Antes

  var ref = new Firebase("https://databaseName.firebaseio.com");

Ahora

// See https://firebase.google.com/docs/web/setup#project_setup for how to auto-generate this config
  var config = {
    apiKey: "apiKey",
    authDomain: "projectId.firebaseapp.com",
    databaseURL: "https://databaseName.firebaseio.com"
  };
  
  firebase.initializeApp(config);
  
  var rootRef = firebase.database().ref();

Los métodos de obtención sin argumento son propiedades solo de lectura

Antes

// Reference
  var key = ref.key();
  var rootRef = ref.root();
  var parentRef = ref.parent();

// Query
  var queryRef = query.ref();

// DataSnapshot
  ref.on("value", function(snapshot) {
    var dataRef = snapshot.ref();
    var dataKey = snapshot.key();
  });

Ahora

// Reference
  var key = ref.key;
  var rootRef = ref.root;
  var parentRef = ref.parent;

// Query
  var queryRef = query.ref;

// DataSnapshot
  ref.on("value", function(snapshot) {
    var dataRef = snapshot.ref;
    var dataKey = snapshot.key;
  });

Actualización de tu código de autenticación

Antes

  ref.authWithOAuthPopup("twitter", function(error, authData) {
    if (error) {
      // An error occurred
      console.error(error);
    } else {
      // User signed in!
      var uid = authData.uid;
    }
  });

Ahora

  var auth = firebase.auth();
  
  var provider = new firebase.auth.TwitterAuthProvider();
  auth.signInWithPopup(provider).then(function(result) {
    // User signed in!
    var uid = result.user.uid;
  }).catch(function(error) {
    // An error occurred
  });

Obtener el token de acceso

Antes

  ref.onAuth(function(authData) {
    if (authData) {
      var accessToken = authData.providerData[authData.provider].accessToken;
    }
  });

Ahora

  var auth = firebase.auth();
  
  var provider = new firebase.auth.GoogleAuthProvider();
  auth.signInWithPopup(provider).then(function(result) {
    var accessToken = result.credential.accessToken;
  });

Controlar el estado de autenticación

Antes

  ref.onAuth(function(authData) {
    if (authData) {
      // User signed in!
      var uid = authData.uid;
    } else {
      // User logged out
    }
  });

Ahora

  var auth = firebase.auth();
  
  auth.onAuthStateChanged(function(user) {
    if (user) {
      // User signed in!
      var uid = user.uid;
    } else {
      // User logged out
    }
  });

Ejercicios

1 - Crea un nuevo formulario que nos permita registrarnos en Firebase.

Objetivos:

Comprobar si ese mismo usuario ya esta registrado (Email como ID), para evitar multiples inscripciones.
Incluiremos en la página los usuarios que se van sumando.

Solución:

Firebase 2.x
Firebase 3.x

2 - Partiendo del ejercicio anterior... realizaremos un nuevo formulario que nos permita registrarnos usando nuestra cuenta de Github.

Objetivos Opcionales:
- Subir los datos proporcionados por Github a nuestra base de datos.
- Incluir parte de los datos como el avatar y el nombre del usuario en el html
Documentación:
- GitHub User Authentication

Solución:

Firebase 2.x
Firebase 3.x

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

clase8.md

clase8.md

Clase 8

Firebase

Aprendiendo con Firebase 2.x

Analicemos Código

Nuevo Firebase 3.x

Migración de FIrebase 2.x a 3.x

Ejercicios

Files

clase8.md

Latest commit

History

clase8.md

File metadata and controls

Clase 8

Firebase

Aprendiendo con Firebase 2.x

Analicemos Código

Nuevo Firebase 3.x

Migración de FIrebase 2.x a 3.x

Ejercicios