Firebase (II): Nuestra primera aplicación

En esta segunda entrada sobre Firebase vamos a explicar como montar nuestro entorno de trabajo y usaremos por primera vez la API para almacenar nuestros primeros objetos. Sí antes de empezar, queréis saber qué es esto de Firebase, no dudéis en leer la anterior entrada del blog.

Para ponernos manos a la obra, vamos a desarrollar una aplicación web que registre nuestra música favorita. Usaremos este ejemplo a partir de ahora para todas las entradas dedicadas a este servicio. El código podréis encontrarlo en mi cuenta de github.

Lo primero que tenemos que hacer, si no lo hicimos leyendo el post anterior, es registrarnos en la página web de Firebase. Una vez registrados tendremos acceso a un panel de control como el de la siguiente imagen. Como podéis ver, la interfaz es muy intuitiva y todo esta lleno de consejos y ayudas para que podamos sacar el mayor partido a la herramienta:

Captura

Lo siguiente que haremos será descargar en nuestro proyecto todas las dependencias necesarias para poder trabajar cómodamente. Utilizo Bower como gestor de dependencias. Desde él, descargamos Bootstrap para crear la interfaz de nuestra aplicación y Jquery para poder manejar fácilmente el DOM. La última librería que incluiré será Firebase con el siguiente comando:

Captura1

Una vez tengamos descargadas estas dependencias incluiremos en nuestro fichero index.html las siguientes referencias:

Captura2

Lo primero que he desarrollado para este primer ejemplo es el formulario donde insertaremos los datos de cada disco. Crearemos un formulario como el de la imagen. Por ahora no necesitaremos más.

Captura3

Queremos también que los datos sean guardados en la base de datos que nos proporciona Firebase para poder acceder a ellos tantas veces como desee el usuario. Para ello empezaremos a mostrar el código necesario que implementa la funcionalidad. En la imagen vemos todo el código necesario para guardar discos en nuestra base de datos.

Captura4

Si, lo siento, Firebase desprende magia :), con dos simples lineas de código hemos conseguido persistir los datos. Comentemos las dos lineas del script que nos interesa. Por ahora ignoremos la linea ‘evento.preventDefault’ por no aportarnos nada relevante para el ejemplo.

La primero que hacemos es crear un ‘mapeado’ del contenedor en el que queremos almacenar los datos. Para eso instanciamos un objeto de la clase Firebase indicándole por medio de una URL dónde se encuentra nuestra base de datos (https://boiling-fire-5083.firebaseio.com) y el contenedor que queremos ‘mapear’ (/discos).

Con esto ya tenemos todo lo necesario para interactuar con el contenedor y podremos empezar a trabajar guardando, modificando o borrando elementos. En el objeto fb, contamos con todas los métodos necesarios. Del resto se ocupará el servicio.

Lo segundo que haremos será guardar el objeto disco que hemos obtenido a partir del formulario. Esto lo realizamos con un simple fb.push(disco). Es decir, lo que le estamos queriendo decir a Firebase es que sobre el contenedor que hemos indicado en la URL nos inserte el objeto disco. No quiero detenerme ahora mismo en por qué usamos push en vez del método set por ejemplo, simplemente quiero que veáis la facilidad de uso y lo sencillo que puede llegar a ser.

Si ahora ejecutamos el ejemplo, obtendríamos en el panel de control de nuestro Firebase algo parecido a esto:

Captura5

Sin darnos cuenta hemos guardado un objeto JSON en tiempo real (El resto de usuarios ven el disco almacenado in situ) y con posibilidad de desconexión (si nos quedamos sin conexión los datos se almacenarían posteriormente).Si estáis ejecutando el ejemplo sobre vuestra base de datos, comprobaréis que antes no teníais ninguna referencia sobre el contenedor discos. Firebase se encarga de crear el contenedor JSON si comprueba que no existe y después inserta en su interior los objetos que le digamos.

En el próximo capitulo conoceremos todas las posibilidades con las que contamos para almacenar datos y las particularidades que tendremos que tener en cuenta para desarrollar con Firebase. Por ahora nos quedaremos aquí.

Nos leemos 🙂

Recursos: Music Collection v0.0.1

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s