Mi primer app con Firebase y Android (Parte 1)

Firebase

Firebase es una plataforma de backend para construir aplicaciones móviles y web, se encarga del manejo de la infraestructura permitiendo que el desarrollador se enfoque en otros aspectos de la aplicación. Entre sus características se incluye base de datos de tiempo real, autenticación de usuarios y almacenamiento(hosting) estático. La idea de usar Firebase es no tener que escribir código del lado del servidor y aprovechar al máximo las características que nos provee la plataforma.

Para utilizar Firebase con Android disponemos de un SDK, lo que nos permitirá integrarlo fácilmente a nuestra aplicación. Para este ejemplo vamos a construir un listado de cosas por hacer usando la base de datos de tiempo real de Firebase como backend y autenticación con email/password y Twitter. El contenido se divide en tres partes, en esta primera parte de la guía haremos un app simple para probar enviar y recibir datos con Firebase.

Creando un app de Firebase

El primer paso es crear nuestra cuenta de Firebase, una vez está lista veremos la pantalla del Dashboard donde es posible visualizar nuestras aplicaciones y crear nuevas. Cada aplicación, además de un nombre tendrá un URL asignado en el dominio firebaseIO.com que será la referencia que utilizaremos más adelante. Además, de forma opcional, podemos confirar hosting bajo el dominio firebaseapp.com. En este ejemplo no haremos uso del hosting y nuestro app URL será http://to-do-list-ykro.firebaseIO.com

Todas las aplicaciones por defecto se encuentran en modo desarrollo y bajo el plan gratis que soporta hasta 100 conexiones concurrentes, 1GB de almacenamiento y 10GB de transferencia en el backend. Luego de creada el app, nos dirigimos a ver sus detalles haciendo click en el botón de Manage App, esto nos lleva a la pantalla de administración de esta aplicación.

Estructura de datos

Firebase almacena los datos en formato JSON, es decir, no es relacional por lo que es importante entender como se accede a los datos almacenados para construir un diseño eficiente. Es posible realizar hasta 32 niveles de datos anidados pero es una mala idea diseñar para anidar porque al obtener una referencia cualquiera, también se obtienen todos los nodos hijos, de allí que se sugiera tener una estructura lo más plana posible y se manejen índices.

En el caso de nuestra aplicación de cosas por hacer, por cada elemento vamos a guardar la descripción del ítem, si ya está hecho o no y el usuario que lo ha agregado. Tendremos un solo listado colaborativo compartido entre los diferentes usuarios y haremos uso de la función push() de Firebase para que genere un identificador único para cada elemento guardado de tal forma que múltiples usuarios puedan escribir al mismo tiempo y no haya ningún conflicto.

Referencias

Es importante notar en la estructura de datos que cada uno de los elementos hijos en la jerarquía tiene su propio URL y se puede acceder utilizándola al listado, ítem específico o valor guardado dentro del ítem.

De la misma forma cada uno de sus elementos hijos se puede acceder haciendo uso de la URL correspondiente.

En código de Java al trabajar con Android, cada una de estos URLs puede ser utilizado como referencia para leer y escribir datos además de tener cada uno un key asociado.

Android

Vamos a trabajar un app muy simple como prueba de concepto para interactuar con Firebase, envía y recibe datos. Cuando el usuario ingresa algún texto y oprime enviar, este texto se guarda en Firebase y cuando es modificado se muestra un mensaje con el texto nuevo y se escribe al Log de la aplicación.

Creando un proyecto

Vamos a empezar creando un proyecto nuevo con una actividad vacía(Empty Activity) si ya conoces el proceso puedes continuar al siguiente paso. Trabajaremos con Android Studio 1.4 (built del 28 de septiembre 2015) si tienes otra versión, es posible que las pantallas del ayudante (wizard) se vean ligeramente distintas y sean necesarios algunos ajustes.

Para crear el nuevo proyecto, hacemos uso del asistente de Android Studio, la primera pantalla nos pregunta el nombre de aplicación y el dominio para generar de forma inversa el paquete de nuestra app.

Luego corresponde seleccionar para que tipo de dispositivo es nuestra aplicación, Teléfono y Tablet en nuestro caso, y la versión del SDK base a utilizar. Vamos a trabajar con el API 15, Android 4.0.3 (ICS) porque aproximadamente cubre un 94% de los dispositivos disponibles en el mercado.

A continuación seleccionamos si queremos agregar alguna actividad y que tipo, para nuestro proyecto vamos a trabajar con una actividad vacía (Empty Activity)

Por último, especificamos los datos de nuestra actividad (MainActivity) y su respectivo archivo de layout (activity_main)

Agregando soporte a Firebase

Para agregar la librería del SDK de Firebase haremos uso de Gradle, editamos el archivo build.gradle del módulo de la aplicación para agregarlo como dependencia. Aun que no es material de esta guía, es importante aclarar que también haremos uso de ButterKnife, una librería que nos ayudará haciendo vínculo a vistas a través de anotaciones para eliminar el uso de findViewById.

Diseño

Nuestra aplicación tendrá dos elementos en la parte de diseño, un EditText para poder ingresar datos y un Button para enviarlos, ambos bajo un RelativeLayout.

Funcionalidad

Para el código de la funcionalidad del app, definimos como variables globales la URL a utilizar y el descendiente(child) en la jerarquía. Además agregamos el EditText con los datos y nos apoyamos en las anotaciones de ButterKnife.

Luego, en el método onCreate posterior a indicarle cuál es la vista que vamos a usar y de inicializar ButterKnife, indicamos cuál es el contexto que puede utilizar Firebase y asignamos valor a la variable previamente declarada.

Para enviar datos a Firebase, haremos uso del método setValue sobre el objeto Firebase declarado antes que guarda la referencia a nuestra app de Firebase. Declaramos un método con la anotación de ButterKnife que permite se invoque cuando se haga click sobre el botón y dentro de este método, obtenemos el texto del EditText y llamamos a setValue. Posteriormente limpiamos el texto del EditText

Para obtener datos de Firebase, hacemos uso de un ValueEventListener que provee el método onDataChange para realizar alguna acción ante el evento de un cambio en los datos. Este objeto lo asignaremos a la referencia a nuestra app de Firebase con una llamada a addValueEventListener. Dentro de este método, obtenemos el texto y lo mostramos en un Toast y en el Log.

Para probarlo, vamos a la ventana del Dashboard y haciendo click sobre el valor de test, lo modificamos y al hacerlo, deberíamos ver en nuestra app un mensaje conteniendo el nuevo valor y verlo también en un mensaje en el Log.

Si estamos trabajando con múltiple descendencia, en vez de ValueEventListener también podemos utilizar ChildEventListener que provee métodos para realizar alguna acción ante los distintos posibles eventos sobre los datos. De una manera similar, puede asignarse a la referencia de Firebase usando addChildEventListener. Los métodos asociados a eventos disponibles son onChildChanged, onChildAdded, onChildRemoved, onChildMoved, onCancelled

El código completo de la actividad está disponible en

Conclusiones

En esta guía hemos aprendido sobre Firebase y como integrarlo en un proyecto con Android Studio y Gradle. Además hemos construido un app simple de prueba de concepto para enviar y recibir datos utilizando Firebase como backend, el código que hemos escrito es totalmente del lado del cliente. El proyecto está disponible en Github.

En la siguiente entrega vamos a crear el listado de cosas por hacer haciendo uso de RecyclerView y la librería Firebase-UI.