Creando un To-Do List con Android y Firebase desde cero

Firebase es una plataforma que te permite crear aplicaciones móviles enfocándote en la experiencia del usuario. Se trata de una herramienta que también te permite almacenar datos y autenticar usuarios con pocas líneas de código. ¡Y en tiempo real! De esta manera, nos ayuda a optimizar procesos y ahorrar tiempo de desarrollo. En esta serie de artículos vamos a aprender cómo crear una aplicación para Android, utilizando Firebase para el almacenamiento de datos. La aplicación guardará una lista de tareas que se podrá editar en tiempo real. SDK (Software Development Kit): un conjunto de librerías y herramientas que permiten crear aplicaciones para un sistema específico. En este caso, usaremos el SDK de Android, que viene incluido en el IDE (Entorno de Desarrollo Integrado) que ofrece Google, Android Studio. Puedes descargarlo en el sitio oficial. Actividad: una pantalla que permite que el usuario realice ciertas acciones previamente especificadas. Las actividades se encargan de crear una ventana en la que un desarrollador configura una interfaz de usuario mediante el método setContentView(). View: también conocidas como vistas, son clases que representan el bloque de construcción básico para los componentes de la interfaz de usuario. RecyclerView: una vista que muestra una serie de elementos en una lista. Estos se obtienen de un objeto tipo BaseAdapter asociado al ListView. ¿Por que usar RecyclerView? La respuesta es clara, cuando usas ListView Android va renderizando todos y cada uno de los elementos de la lista. Esto toma más tiempo y consume más recursos del dispositivo. En cambio, RecyclerView recicla el contenido de los elementos y sólo renderiza los que están en el segmento visible. Además, optimiza este proceso mientras el usuario hace scroll.RecyclerView.ViewHolder: un ViewHolder describe la vista de un elemento y los metadatos sobre su lugar en el RecyclerView. RecyclerView.Adapter: un objeto que despacha las vistas necesarias para el RecyclerView. Generalización: es una técnica que se usa mediante el operador diamante ( < > ). Permite especificar el tipo de datos a tratar sin tener que implementar una clase. Este proceso facilita el desarrollo de software. Inflater: un objeto que busca un recurso XML (un layout) y lo convierte en una vista manipulable mediante código Java. Layout: una estructura visual para una interfaz de usuario. Tal como una actividad o un widget. Un layout puede ser declarado de dos maneras:

• Declarar elementos de la interfaz en lenguaje XML
• Instanciar elementos de diseño en tiempo de ejecución mediante el Lenguaje Java

Configurando el proyecto

Para la creación de nuestro proyecto, tendremos que seguir una serie de pasos que crearán la parte gráfica de nuestra aplicación.

1. Creemos nuestro proyecto en Android Studio

1.1. Abrimos Android Studio y oprimimos el botón “Crear nuevo proyecto de Android Studio” 1.2. Escribimos el nombre del proyecto y el dominio de nuestra organización. Android Studio hará el trabajo y generará el nombre del paquete correspondiente. 1.3. En la siguiente pantalla, debemos seleccionar la versión del SDK de Android que usaremos en nuestro proyecto. Ya que vamos a usar RecyclerView, debemos usar la versión 22 del API de Android. 1.4. Después, debemos seleccionar el tipo de actividad principal del proyecto. Para nuestro ejemplo, usaremos una actividad en blanco. La primera en el menú de opciones. 1.5. Luego, debemos asignarle un nombre a la actividad y finalizar el proceso de creación del proyecto.

2. Comencemos a adecuar el proyecto

2.1. Ahora veremos la pantalla principal que tiene una etiqueta con el texto “Hello world”

2.2. Lo primero que debemos hacer es agregar a las dependencias que necesitaremos. Como usaremos RecyclerListView, debemos agregar la dependencia com.android.support:recyclerview-v7:22.2.02.3. Eliminaremos la etiqueta y agregaremos un RecycleView y cambiaremos su identificador por “lvTareas”. 2.4. Ahora crearemos otro layout, que será el contenido de cada una de las celdas de nuestra lista de tareas. Esto se hace oprimiendo click secundario en la carpeta layout de los recursos del sistema. En el menú, seleccionaremos New (Nuevo), Layout Resource File (Archivo de recurso tipo layout). 2.5. Luego escribimos el nombre del layout. En este caso, lo llamaremos cell_tarea. 2.6. En el layout cell_tarea debemos agregar los elementos necesarios para cada tarea. Como el nombre, la descripción y un botón de chequeo. Este ultimo servirá para marcar la tarea como hecha. 2.7. Entonces, usamos un RelativeLayout con un espaciado exterior (o padding) de 5dp, esto permite ubicar libremente los elementos que contiene. De esta manera, podemos insertar un botón de chequeo con el identificador chkHecho y un LinearLayout con orientación vertical; que alojará en su interior el nombre y la descripción de la tarea con los identificadores txtTitulo y txtDescripcion, respectivamente.

3. Agregando funcionalidades con Java

3.1. Primero debemos crear un ViewHolder para el adaptador del RecyclerView. Se trata de un elemento que representa una vista y permite acceder a los sub-elementos de la misma. 3.2. Después debemos crear un adaptador para el RecyclerView. Este es un elemento que se encarga de crear las vistas correspondientes a cada fila. Esta clase se llamará TareasAdapter y heredará las características necesarias para interactuar con un RecyclerView. Recibirá una instancia de la actividad que lo crea (que hereda de la clase Context) y los datos que deseamos mostrar. 3.3. La clase TareasAdapter  debe usar una generalización de Java donde se especifica que el tipo de dato asociado a la vista será TareaViewHolder. También debemos implementar los métodos getItemCount, onCreateViewHolder y onBindViewHolder que retornan: la cantidad de datos, la vista vacía para el dato de una posición y la vista modificada a partir del dato de una posición, respectivamente. Además, en esta clase usamos un objeto de tipo Inflater, que llamamos ensamblador. Este toma un identificador de un layout y, a partir de esto, construye un elemento gráfico o vista. Así crearemos todas las instancias necesarias del layout cell_tarea. 3.4. Después, en la clase Inicio declaramos un objeto tipo RecyclerView, que asociaremos a la vista lvTareas. A este objeto le modificaremos el adaptador de datos para especificar qué debe mostrar. También debemos crear un LinearLayoutManager que asistirá al RecyclerView en el proceso de ubicación de los ítems de la vista.

Recuerda que esta es la primera parte de la serie, pronto llegaremos al almacenamiento de datos con Firebase. El código fuente del proyecto lo puedes encontrar en Github. Si este es tu primer acercamiento con Android y quieres aprender más del sistema operativo móvil más usado del mundo, no faltes al Curso de Programación en Android de Platzi. Ahí aprenderás a crear tus primeras aplicaciones, que después podrás vender en la Google Play Store.