clase11.md

Curso de JavaScript Avanzado para desarrolladores Front-end

POO con JS, ECMA6, Patrones de diseño, AJAX avanzado, HTML5 avanzado, APIs externas.

Clase 11

Firebase

• Pricing
• Features
• Clientes
• Documentación
  • Primeros Pasos
  • Referencia de la API
  • Ejemplos
• 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

Firebase: Primeros pasos

• Crear una cuenta

• 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

Firebase: Limitaciones

• Limitaciones técnicas
• Conversión de Arrays

Firebase: Guardando Datos

Demo Documentación

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

set()

const ref = new Firebase("https://<<---URL--->>.firebaseio.com/fb-ejemplos/escritura");
const 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"
  }
});

const 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()

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

push()

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

Firebase: Recuperación de datos con eventos

Demo Documentación: métodos

• on() fija un evento y disapra el callback con cada cambio
• once() devuelve los datos y elimina la suscripción
• off() elimina la suscripción Documentación: tipos de eventos
• value cualquier cambio y devuelve toda a información
• child_removed cuando se elimina un nodo y devuelve la información por nodo
• child_added cuando se añade un nodo y devuelve la información por nodo
• child_changed cuando se cambia un nodo y devuelve la información por nodo
• child_moved cuando se mueve el nodo (usando priority) y devuelve la información por nodo

Evento (value)

const ref = new Firebase("https://docs-examples.firebaseio.com/web/saving-data/fireblog/posts");

ref.on("value", snapshot => {
  console.log(snapshot.val());
}, errorObject => {
  console.log(`Fallo en lectura de datos: ${errorObject.code}`);
});

Evento (child_changed)

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

ref.on("child_changed", snapshot => {
  const usersData = snapshot.val();
  console.log("Nuevos cambios(child_changed): ", usersData);
});

Evento (child_removed)

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

ref.on("child_removed", snapshot => {
  const usersData = snapshot.val();
  console.log("Usuario eliminado(child_removed): ", usersData);
});

once()

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

ref.once("child_changed", snapshot => {
  const usersData = snapshot.val();
  console.log(`Nuevo cambio(once - child_changed): ${usersData}`);
});

Quitar evento (value)

ref.off("value");

Quitar todos los eventos

ref.off();

Firebase: Queries

Demo Documentación

• orderByChild() Ordenar por hijo
• orderByKey() Ordenar por Llave
• orderByValue() Ordenar por valor
• orderByPriority() Ordenar por prioridad

Recursos

• Firebase - Queries Part I
• Firebase - Queries Part II
• Firebase - Denormalizing is normal
• Firebase Docs - Ordenando Datos

orderByChild()

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

orderByKey()

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

orderByValue()

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

Firebase: Queries Avanzadas

Demo Documentación

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

Firebase: Queries Avanzadas (lo básico)

limitToFirst()

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

limitToLast()

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

Firebase: Queries Avanzadas (concatenando)

.orderByValue() y .limitToLast()

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

.orderByChild() y .startAt()

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

.orderByKey() y .endAt()

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

.startAt() y .endAt():

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

.equalTo()

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

Firebase: Queries Avanzadas (Ejemplo)

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

const ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
ref.child("stegosaurus").child("height").on("value", stegosaurusHeightSnapshot => {
  const favoriteDinoHeight = stegosaurusHeightSnapshot.val();

  const queryRef = ref.orderByChild("height").endAt(favoriteDinoHeight).limitToLast(2);
  queryRef.on("value", querySnapshot => {
      if (querySnapshot.numChildren() == 2) {
        // Data is ordered by increasing height, so we want the first entry
        querySnapshot.forEach(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");
      }
  });
});

Firebase: Trabajar Offline

Documentación

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

Firebase: Analicemos Código

Ejemplos

• 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

const 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
const config = {
  apiKey: "apiKey",
  authDomain: "projectId.firebaseapp.com",
  databaseURL: "https://databaseName.firebaseio.com"
};

firebase.initializeApp(config);

const rootRef = firebase.database().ref();

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

• Antes

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

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

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

• Ahora

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

// Query
const queryRef = query.ref;

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

Resumen Rápido: Realtime Database

Configurando las reglas de lectura/escritura

¿Cómo se estructuran los datos?

La base de datos es un simple JSON

{
  "users": {
    "alovelace": {
      "name": "Ada Lovelace",
      "contacts": { "ghopper": true },
    },
    "ghopper": { ... },
    "eclarke": { ... }
  }
}

Lectura/escritura de datos

var userRef = firebase.database().ref(`users/${userId}`);

// LEscuchar cambios en `users/${userId}`
userRef.on('value', (snapshot) => {
  console.log(snapshot.val());
});

// Escuchar una única vez cambios en `users/${userId}`
userRef.once('value', (snapshot) => {
  console.log(snapshot.val());
});

// Almacenar datos en `users/${userId}`
userRef.set({
  username: name,
  email: email,
  profile_picture : imageUrl
});

Actualizando varios datos simultáneamente

var updates = {
    'timestamp': new Date().getTime()
};

updates[`users/${userId}`] = {
  username: name,
  email: email,
  profile_picture : imageUrl
};

firebase.database().ref().update(updates);

¿Cómo borrar datos?

Las referencias tienen una función remove().

¿Cómo saber si se ha actualizado un dato?

Las funciones set y update devuelven promesas.

¿Cómo quitar un listener o una referencia?

Las referencias tienen una función off(listener). Si no se le pasa ningún parámetro elimina todos los listeners.

"Arrays" -> Listas

var userRef = firebase.database().ref(`users`);

// Almacenar datos en `users` (genera una clave aleatoria)
userRef.push({
  username: name,
  email: email,
  profile_picture : imageUrl
});

Escuchar cambios en las listas

var userRef = firebase.database().ref(`users`);

// Cuando se añade un elemento
userRef.on('child_added', (snapshot) => { /* ... */ });

// Cuando cambia un elemento
userRef.on('child_changed', (snapshot) => { /* ... */ });

// Cuando se elimina un elemento
userRef.on('child_removed', (snapshot) => { /* ... */ });

Recuperar todos los elementos de una lista

var userRef = firebase.database().ref(`users`);

// Cuando se añade un elemento
userRef.on('value', (snapshot) => {
    snapshot.forEach((childSnapshot) => {
        const element = childSnapshot.val();
    });
});

Ordenar una lista

const ref = firebase.database().ref(`users`);

// Ordena por el valor de una clave
ref.orderByChild('name');
ref.orderByChild('location/latitude');

// Ordena por el nombre de la clave
ref.orderByKey();

// Ordena por el valor de cada elemento
ref.orderByValue();

Filtrar una lista

const ref = firebase.database().ref(`users`);

// Limita el número de elementos de la lista desde el inicio hasta la cantidad de elementos indicada
ref.limitToFirst(10);

// Limita el número de elementos de la lista desde el final hasta la cantidad de elementos indicada
ref.limitToLast(5);

// Elementos mayores o iguales al valor indicado
ref.startAt(70);

// Elementos menores o iguales al valor indicado
ref.endAt();

// Elementos iguales al valor indicado
ref.equalTo();

Ejercicios

1 - Desarrolla una aplicación para gestionar las peliculas que te gustan. Incluyendo llamadas AJAX a la base de datos de IMBD para enriquecer los datos, usando OMDb API.

• Todas las películas que se introducen quedan guardadas en Firebase.
• Las peliculas pueden ser consulatadas.
• Las peliculas pueden ser eliminadas.
• Las peliculas pueden ser editadas desde el html.
• Opcional: puedes partir de este código arvindr21/movieFire(legacy)

Soluciones Solución Legacy Solución