Aplicación noBackend: Firebase (Parte 2)

Como desarrollador web
Quiero consumir el servicio Firebase utilizando HTML5/JavaScript
Para comprender mejor el concepto del noBackend.

En la primera parte de este post conocimos el servicio Firebase, en esta segunda parte lo que veremos es como consumir este servicio con sus funciones mas básicas.

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 type='text/javascript' 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

Anuncios