JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing
- Presentación Firebase
- Pricing
- Features
- Clientes
- Documentación
- Librerías y ayudas
- Montar una App CRUD con Firebase
- Firebase Docs
- Firebase Open Data Sets (deprecated)
- Firebase - GeoFire
- Firebase - Backbone
- Firebase - Angular
- Firebase - Nodejs/js
- Firebase - Ionic
- Firebase - React
- Firebase - Ember
-
Gestionar dependéncias en cliente:
<script src="https://cdn.firebase.com/js/client/x.x.x/firebase.js"></script>
- Gestionar dependéncias en Nodejs:
npm install firebase -save
set()
Almacena / remplaza los datosupdate()
Actualiza los datospush()
Alamacena los datos con un ID único.transaction()
Para datos complejos y cocurridos.
set()
// Antes
const ref = new Firebase("https://<<---URL--->>.firebaseio.com/fb-ejemplos/escritura");
const usersRef = ref.child("users");
// Ahora
var ref = firebase.database().ref("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.");
}
});
on()
fija un evento y disapra el callback con cada cambioonce()
devuelve los datos y elimina la suscripciónoff()
elimina la suscripción Documentación: tipos de eventosvalue
cualquier cambio y devuelve toda a informaciónchild_removed
cuando se elimina un nodo y devuelve la información por nodochild_added
cuando se añade un nodo y devuelve la información por nodochild_changed
cuando se cambia un nodo y devuelve la información por nodochild_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();
orderByChild()
Ordenar por hijoorderByKey()
Ordenar por LlaveorderByValue()
Ordenar por valororderByPriority()
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()}`);
});
});
limitToFirst()
desde el primero...limitToLast()
desde el final...startAt()
empiezan por...endAt()
terminan por...equalTo()
igual a...
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());
});
.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());
});
const presenceRef = new Firebase('https://<<--URL-->>.firebaseio.com/info/connectednow');
presenceRef.onDisconnect().set("I disconnected!");
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
Más info
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
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;
});
Configurando las reglas de lectura/escritura
Descargar archivo de configuración
¿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();
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