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.

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
Hola Cristian me gusto tu publicación sobre Firebase de tal forma que me puse a trabajar en una App simple mi problema es que deseo añadir una imagen a firebase, mi pregunta es como lo puedo hacer?? convertirlo a base64 o existe otra forma para subir una imagen ??
muchas gracias por tus contribuciones estare pendiente de tus actualizaciones (Y)
Lo mas recomendable es subir imagenes pequeñas menor a 10mb para esto se deben codificar en base64, ya existe un proyecto en GitHub que te muestra como hacerlo https://github.com/firebase/firepano