Aplicación noBackend: Firebase

Hoy quiero compartir este servicio del almacenamiento y sincronización de aplicaciones llamado Firebase, “este es una plataforma especializada en el almacenamiento y sincronización de aplicaciones con la que los desarrolladores interesados pueden encontrar un entorno óptimo para la creación de apps de forma colaborativa usando solo con código front-end (Javascript)“.

Crear el primer Firebase

Lo primero que hay que hacer para empezar a trabajar con Firebase es registrarse para obtener una cuenta gratuita. Firebase crea automáticamente una nueva app para usted, no se preocupe que usted podrá crear otras desde su cuenta entrando al Dashboard.Su Firebase tendrá un URL propia que termina en firebaseIO.com, como se muestra a continuación:

Para ver y administrar los datos de su Firebase, ya sea que escriba el URL en la barra de direcciones o haga clic en el botón “Manage App ‘. Su Firebase estará vacío al principio y sera algo como la siguiente imagen:

La premisa de Firebase se centra en almacenar los datos de nuestras aplicaciones para que sean accesibles directamente gracias a JavaScript y fácilmente consumidas por los usuarios. ¿Qué supone esto? Básicamente, que podemos construir aplicaciones web ricas y potentes sin tener que preocuparnos de nuestras propias bases de datos o sitios web. Firebase convierte el tiempo real en un nuevo estándar donde reina la interactivida. En la segunda parte de este post vamos a ver como llenar y consumir este servicio.

A diferencia de Microsoft Azure Mobile Service que nos permite definir una estructuras de tablas para almacenar los datos, Firebase almacena la información en una estructura JSON que nosotros definimos por medio de nuestro código. A continuación presento una imagen de como va a quedar nuestros datos almacenados en firebase.

Incluir Firebase en nuestra aplicación Javascript

Para incluir la biblioteca de Firebase en nuestra aplicacion debemos añadir una etiqueta de script en nuestro archivo HTML. Se recomienda incluir la biblioteca directamente de los CDN de Firebase:

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

Utilizaremos la misma variable global llamada App que esta que utilizamos en el ejercicio de Mobile Services.

Instanciar servicio de Firebase:

En el código de JavaScript, agregue el siguiente código, que crea una instancia de Firebase.

this.myRootRef = new Firebase('https://incandescent-fire-8371.firebaseio.com/');

Almacenar datos en el servicio:

Para guardar datos en Firebase, como lo comente arriba, desde nuestro código estaremos definiendo la estructura, así que para guardarlo utilizaremos la siguiente linea de código:

save: function (item) {
// Esta linea es la que nos interesa
this.myRootRef.child("users").child(item.Id).set(item);
}

Lo que hacemos en estas lineas de código es pasar un objeto llamado item que contiene la siguiente estructura.

Item

Lo que definimos con this.myRootRef.child(“users”).child(item.Id) es que nuestro servicio de firebase va a tener un hijo/nodo llamado users, y dentro de este van a existir varios hijos cuyo nombre sera el ID del item que vamos a guardar y debajo de este estar todo el item completo almacenado, para una mejor ilustración de esto les dejo la siguiente imagen:

Eliminar datos en el servicio:

Para eliminar un hijo de nuestro servicio, basta con identificarlo y usar remove() desde la API de firebase, vamos a pasar a nuestra variable global App en su método remove, el ID que vamos a eliminar, que representaría nuestro nodo hijo de users.

remove: function(id){
this.myRootRef.child("users").child(id).remove();
}

Actualizar datos en el servicio:

Actualizar un item alojado en firebase es muy fácil y es similar al eliminar solo que cambiar una palabra, ¿cuál es? obvio update en vez de remove.

update: function(item){
this.myRootRef.child("users").child(item.Id).update(item);
}

Leer datos en el servicio:

Firebase es una base de datos en tiempo real, por lo que los datos nunca se leen de forma sincrónica. En su lugar, para leer los datos realizamos un callback a una referencia Firebase. La URL que se utiliza para crear esa referencia Firebase debe seguir la estructura JSON de los datos almacenados en Firebase. Así que si queremos recuperar todos los items que se han guardado, podemos hacer lo siguiente:

render: function(){
var html="";
this.myRootRef.on('value', function(snapshot) {
var usuarios = snapshot.val();
//Utilizamos un each de la librería underscore
_.each(usuarios['users'], function(v, i){
console.log(v.name);
});
});
}

En este caso utilizando la ayuda de la librería underscoreJS utilizado la estructura each.

Esto es todo por ahora, espero les sirva, si desean ver el código fuente de este proyecto pueden descargarlo desde acá: Aplicación noBackend: Firebase