Introducción a Firebase
Hugo Estévez
Hugo Estévez Rocha
Twitter: @hugoer85
Github: Hugoer
Introducción a Firebase
Email: hugoerdev@gmail.com
- Frontend developer en Sivsa
- Apasionado por el desarrollo web
Introducción a Firebase
- Freelance a tiempo parcial
¿Qué es Firebase?
- Firebase es la nueva y mejorada plataforma de desarrollo (¿móvil?) en la nube de Google.
- Mucho más que:
- una base de datos NoSQL
- Hosting
- API
- Integración con otras librerías / fwks en su github
Introducción a Firebase
Introducción a Firebase
¿Qué es Firebase?
Primeros pasos
Introducción a Firebase
Creamos la Aplicación en la consola de Firebase
Primeros pasos
Introducción a Firebase
Recuperamos la configuración de nuestro proyecto
Configuración \ general
Primeros pasos
Introducción a Firebase
Incluimos la configuración en nuestros ficheros js (Aplicación Web)
Primeros pasos
Introducción a Firebase
Configuramos los métodos de inicio de sesión (Pestaña Authentication)
Primeros pasos
Introducción a Firebase
Creamos un usuario desde la consola de Firebase
Primeros pasos
Introducción a Firebase
Ya tenemos la consola de firebase preparada para empezar a desarrollar!
¿Dónde busco información?
En su documentación (Es buenísima):
Operaciones básicas
Introducción a Firebase
Primero tenemos que generar una referencia al nodo de la base de datos
var jsVigoDatabase = firebase.database().ref('text');
Operaciones básicas
Introducción a Firebase
Para obtener el valor podemos suscribirnos al evento "value" de dos maneras; hacer una única petición, o dejando el socket abierto para poder escuchar los cambios)
Lectura
Operaciones básicas
Introducción a Firebase
Obtener los datos una única vez (método once)
Suscribirnos a cualquier cambio que se produzca en dicho nodo (método on)
jsVigoDatabase.on('value', function(snapshot) {
document.getElementsByTagName('h1')[0].innerHTML = snapshot.val();
}, function(err){
console.error(err);
}); jsVigoDatabase.once('value', function(snapshot) {
document.getElementsByTagName('h1')[0].innerHTML = snapshot.val();
}, function(err){
console.error(err);
});Lectura
Operaciones básicas
Introducción a Firebase
Lectura
jsVigoDatabase.ref('Info').on('value', function(snapshot) {
var _info = snapshot.val();
document.getElementById('Nombre').value = _info.Nombre;
document.getElementById('Apellidos').value = _info.Apellidos;
document.getElementById('Profesion').value = _info.Profesion;
}, function(err){
console.error(err);
}); 
Operaciones básicas
Introducción a Firebase
Lectura
Si hemos utilizado el método "on" (Ejecutar una función cada vez que se produzca un cambio) y queremos dejar de escuchar dichos cambios, podemos usar el método "off" (Siempre sobre la misma referencia)
var jsVigoDatabase = firebase.database().ref('text');
jsVigoDatabase.on('value', callback );
jsVigoDatabase.off('value');Operaciones básicas
Introducción a Firebase
Escritura - set
Al trabajar con JSON, podemos definir un JSON como value de un nodo, o directamente el valor "normal"
var infoObj = {},
_nombre = document.getElementById('nombreSet').value,
_apellidos = document.getElementById('apellidosSet').value,
_profesion = document.getElementById('profesionSet').value;
if ( !!_nombre ){
infoObj.Nombre = _nombre;
}
if ( !!_apellidos ){
infoObj.Apellidos = _apellidos;
}
if ( !!_profesion ){
infoObj.Profesion = _profesion;
}
jsVigoDatabase.ref('Info').set(infoObj);Operaciones básicas
Introducción a Firebase
Escritura - set
var _name = document.getElementById('nombrePartial').value;
jsVigoDatabase.ref('Info').child('Nombre').set(_name);var _name = document.getElementById('nombrePartial').value;
jsVigoDatabase.ref('Info/Nombre').set(_name);Maneras de acceder a una referencia, y actualizar su valor:
Operaciones básicas
Introducción a Firebase
Escritura - push
var _friend = {},
result = '';
_friend.nombre = document.getElementById('nombrePush').value;
_friend.apellidos = document.getElementById('apellidosPush').value;
result = jsVigoDatabase.ref('Friends').push(_friend);Operaciones básicas
Introducción a Firebase
Eventos
Cada cambio (creación, eliminación, actualización) en un nodo dispara un evento al que podemos suscribirnos
jsVigoDatabase.ref('Friends').on('child_added', function(snapshot){
_addFriendToView(snapshot.val(),snapshot.key);
});
jsVigoDatabase.ref('Friends').on('child_removed', function(snapshot){
_removeFriendToView(snapshot.key);
});Operaciones básicas
Introducción a Firebase
Eventos
En el evento child_changed recibimos cualquier actualización; ya sea la creación de un subnodo, cambio de un valor, o eliminación de un nodo
Nos envía un objeto "snapshot", que contiene el valor actual del nodo al que nos hemos suscrito, y su key.
jsVigoDatabase.ref('Friends').on('child_changed', function(snapshot){
var myText = 'El nodo con key: ' + snapshot.key
+ ' ahora tiene el valor: ' + JSON.stringify(snapshot.val()) );
console.log(myText);
});Operaciones básicas
Query
El filtrado lo utilizaremos cuando el valor de un nodo sea un array
Operaciones básicas
Query
Para realizar filtrados debemos usar los métodos:
- equalTo
- startAt
- endAt
Estos métodos tienen que ejecutarse siempre sobre una "reference" (nodo)
Operaciones básicas
Query
//Los registros hijos dentro del nodo random filtrados por el campo "integerFilter"
//y que su valor es exactamente 7
jsVigoDatabase.ref('random/').orderByChild('integerFilter').equalTo(7);
//y que su valor es menor o igual a 7
jsVigoDatabase.ref('random/').orderByChild('integerFilter').endAt(7);
//y que su valor es mayor o igual a 7
jsVigoDatabase.ref('random/').orderByChild('integerFilter').startAt(7);//Los registros hijos dentro del nodo random filtrados por el campo "stringFilter"
//y que su valor es exactamente 'hola'
//En búsquedas por textos, no se permite utilizar los métodos startAt ni endAt
jsVigoDatabase.ref('random/').orderByChild('stringFilter').equalTo('hola');Indices
Introducción a Firebase
Como en cualquier base de datos, podremos utilizar índices
Cuando Firebase considera oportuno crear un índice, nos lo avisa por la consola.
Suelen ser los campos por los que hemos hecho un orderByChild y tiene muchos elementos
Indices
Introducción a Firebase
Resultado - number
Indices
Introducción a Firebase
Resultado - text
Indices
Introducción a Firebase
¿Cómo creo un índice sencillo?
Indices
Introducción a Firebase
Los índices también pueden ser por los valores de un nodo tal que así:
Indices
Introducción a Firebase
¿Y si tenemos que generar un índice que dependa de un key generado por firebase?
Supongamos que "integerFilter" tiene otro nodo algo más complejo dentro y que necesitamos indexarlo
"rules": {
"random": {
"$groupid": {
".indexOn": "integerFilter"
}
}
}Permisos
Introducción a Firebase
Los permisos se gestionan en la misma sección del panel de control que los índices
Los permisos sólo son de escritura y de lectura
Permisos
Introducción a Firebase
Tenemos estos usuarios creados en el panel de control. El UID del usuario es el key del usuario
Permisos
Introducción a Firebase
Supongamos que los datos de cada usuario sólo los puede editar dicho usuario y que dichos datos los tenemos guardados de esta manera:
Los campos email y nombre no tienen que ver con los datos creados en la pestaña "authentication".
Permisos
Introducción a Firebase
Queremos que cualquier usuario pueda leer el nodo de otro usuario y que el usuario que se ha autenticado pueda modificar su información
Y ya de paso vemos cómo añadir un índice por el campo email
Permisos
Introducción a Firebase
Para poder restringir la lectura y escritura, no puede existir el siguiente nodo:
De existir dicho nodo, siempre que estemos logueados, se podrá leer y escribir.
Storage
Introducción a Firebase
"Firebase Storage ofrece la posibilidad de subir y descargar archivos de forma segura para tus apps de Firebase, independientemente de la calidad de la red. Puedes usarlo para almacenar imágenes, audio, video y otro contenido generado por el usuario. Firebase Storage está respaldado por Google Cloud Storage, un servicio potente, simple y rentable de almacenamiento de objetos."
Storage
Introducción a Firebase
Al igual que toda la base de datos, el acceso a los ficheros alojados en firebase, puede ser securizado.
Functions
Introducción a Firebase
Esta es la última novedad que ha incorporado google y aún está en Beta (Abril 2017)
API Rest
Introducción a Firebase
Firebase nos ofrece un SDK para poder trabajar más cómodamente, no obstante podemos usarlo con llamadas HTTP y haciendo uso de los verbos HTTP
¿Es todo tan maravilloso?
Introducción a Firebase
¡NO!
Observaciones
Introducción a Firebase
Aunque nos ofrezca un servicio a modo de API, debemos tener en cuenta que sólo deberíamos usarlo para aplicaciones CRUD
Observaciones
Introducción a Firebase
Número de campos a la hora de realizar la consulta
Ahora mismo sólo permite filtrar por uno. No obstante, está incluido en el roadmap de Firebase que vayan a incluir mejorar este punto.
Observaciones
Introducción a Firebase
Al hacer búsquedas por textos no permite filtrar por "contiene" ( like '%value%' )
Observaciones
Introducción a Firebase
Cuando trabajamos desde un nodo que contiene muchos datos, nos muestra este mensaje.
Haciendo click en un nodo concreto, podremos abrir sólo dicho nodo, y si no contiene muchos datos, volver a editarlo. Sino, siempre se puede abrir el nodo exacto donde queremos hacer la edición desde el navegador
Observaciones
Introducción a Firebase
Paginación
A día de hoy no se pueden pedir datos paginados. Puedes pedir los n primeros registros, o los n últimos, pero no se pueden combinar.
Si necesitamos obtener una cantidad enorme de datos, nos ofrecen la posibilidad de usar el parámetro "shallow" si usamos el API REST, pero tiene más limitaciones.