fcbk
Conéctate con TwitterConéctate con Facebook
0

Creando un To-Do List con Android y Firebase desde cero (Parte 2)

398Puntos

hace 2 años

Firebase es una plataforma que nos permite crear aplicaciones enfocándose en la experiencia de usuario. Además, si usamos esta plataforma, podremos tener interacción en tiempo real y con pocas líneas de código. En el artículo anterior, empezamos a construir un To-Do List con Android. Hoy vamos a conectar lo que hicimos con Firebase. ¡Empecemos!

Configurando Firebase

Lo primero que debemos hacer es configurar Firebase así: 1. Entrar a la página oficial de Firebase. Captura de pantalla 2015-07-06 a las 6.47.18 p.m.2. Después, es necesario llevar a cabo el registro Captura de pantalla 2015-07-06 a las 6.47.26 p.m.3. Luego debemos crear un proyecto Captura de pantalla 2015-07-06 a las 6.47.57 p.m.Captura de pantalla 2015-07-06 a las 6.49.22 p.m.Captura de pantalla 2015-07-07 a las 11.45.36 p.m.   Firebase nos ofrece un entorno de administración. Aquí es posible ver y administrar los datos agregados. Captura de pantalla 2015-07-08 a las 12.15.03 a.m.

Enlazando nuestra aplicación con Firebase

Hasta este punto logramos crear el proyecto. Ahora vamos a enlazar nuestra aplicación Android con Firebase. 1. En el menú contextual del proyecto ingresamos a la configuración Captura de pantalla 2015-07-08 a las 12.24.18 a.m. Veremos la siguiente ventana: Captura de pantalla 2015-07-08 a las 12.24.37 a.m. Ahora seleccionamos la pestaña Dependencias en la parte superior: Captura de pantalla 2015-07-08 a las 12.24.55 a.m. Y ahí, buscamos el símbolo de más ( + ) y seleccionamos la opción de agregar una librería como dependenciaCaptura de pantalla 2015-07-08 a las 12.25.12 a.m.   Entonces veremos la ventana donde buscaremos la librería Firebase com.firebase:firebase-client-android:2.3.1+. Debemos seleccionarla y, después, Gradle descargará las dependencias. Captura de pantalla 2015-07-08 a las 12.25.31 a.m. 2. Ahora en nuestro código debemos agregar, en el método onCreate de la clase Inicio la inicialización de la conexión con Firebase usando la línea: [sourcecode language="java" wraplines="false" collapse="false"] Firebase.setAndroidContext(this); [/sourcecode] Después, cambiamos el método getDatos; para reemplazar la lógica que habíamos puesto antes por una llamada asíncrona. Esta se ejecuta cada vez que Firebase envía la notificación de cambio de información; ahí modificaremos los datos actuales del adaptador y notificaremos que estos cambiaron. [sourcecode language="java" wraplines="false" collapse="false"] public void getDatos(){ Firebase myFirebaseRef = new Firebase("https://taskerapp.firebaseio.com/"); myFirebaseRef.child("tasks").addValueEventListener(new ValueEventListener() { @Override public void onDataChange(DataSnapshot snapshot) { Map<Object, Map<String, Object>> data = (Map<Object, Map<String, Object>>) snapshot.getValue(); adaptador.setDatos(data); adaptador.notifyDataSetChanged(); } @Override public void onCancelled(FirebaseError error) { } }); } [/sourcecode] Es importante resaltar una de las grandes ventajas de Firebase: actualización de datos en tiempo real. Es decir, si se cambia algo desde el entorno de administración, esto se verá reflejado automáticamente en la aplicación móvil. Captura de pantalla 2015-07-24 a las 7.42.00 a.m. Siguiendo con nuestra configuración, también es necesario modificar el adaptador. En este cambiaremos setDatos y onBindViewHolder para manejar un Mapa que entrega Firebase donde están los datos almacenados. De ahí extraemos los datos así: [sourcecode language="java" wraplines="false" collapse="false"] @Override public void onBindViewHolder(TareaViewHolder holder, int position) { Map<String, Object> dato = (Map<String, Object>) this.datos.get(this.keys[position]); if(dato!=null) { holder.titulo.setText(dato.get("name").toString()); holder.descripcion.setText(dato.get("description").toString()); holder.hecho.setChecked(Boolean.parseBoolean(String.valueOf(dato.get("done")))); } } public void setDatos(Map<Object, Map<String, Object>> datos) { this.datos = datos; this.keys = datos.keySet().toArray(); } [/sourcecode] Captura de pantalla 2015-07-24 a las 7.42.34 a.m. Y así terminamos la configuración. Recuerda que esta es la segunda parte de la serie, en el próximo artículo aprenderemos a almacenar y modificar datos en Firebase desde nuestra aplicación. Puedes ver el código fuente del proyecto 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, regístrate 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
Oscar
Oscar
@oagranada

398Puntos

hace 2 años