Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Cómo crear una aplicación de chat para Android usando Firebase

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Final product image
What You'll Be Creating

Con Firebase, crear aplicaciones de redes sociales en tiempo real es un trabajo sencillo. Y lo mejor de todo: no tienes que escribir una sola línea de código del lado del servidor.

En este tutorial te enseñaré cómo aprovechar Firebase UI para crear una aplicación de grupo de chat que puedes compartir con tus amigos.  Se trata de una aplicación muy sencilla con una sola sala de chat que estará abierta para todos los usuarios.

Como habrás adivinado, la aplicación dependerá de Firebase Auth para administrar el registro e inicio de sesión de los usuarios. También usará la base de datos de Firebase en tiempo real para almacenar los mensajes del grupo de chat.

Requisitos previos

Para poder seguir este tutorial paso a paso necesitarás lo siguiente:

Para obtener instrucciones sobre cómo crear una cuenta de Firebase y prepararte para el desarrollo con Firebase en Android Studio, consulta mi tutorial Cómo comenzar con Firebase para Android aquí en Envato Tuts+.

1. Crea un proyecto en Android Studio

Ejecuta Android Studio y crea una nuevo proyecto con una actividad vacía llamada MainActivity.

Add empty activity

Para configurar el proyecto para que use la plataforma Firebase, abre la ventana del Asistente de Firebase haciendo clic en Tools > Firebase (Herramientas > Firebase).

Al usar la plataforma Firebase por lo general es una buena idea añadir Firebase Analytics al proyecto. Por lo tanto, dentro de la ventana del Asistente de Firebase ve a la sección Analytics y presiona la opción Log an Analytics event (Registrar un evento de Analytics).

Firebase Assistant

A continuación presiona el botón Connect to Firebase (Conectar con Firebase) y asegúrate de que la opción Create new Firebase project (Crear nuevo proyecto de Firebase) esté seleccionada. Una vez que la conexión haya sido establecida presiona el botón Add Analytics to your app (Añadir Analytics a tu aplicación).

Press Add analytics to your app

En este punto el proyecto de Android Studio no solamente está integrado con Firebase Analytics, sino que también está listo para usar el resto de los servicios de Firebase.

2. Añade dependencias

Vamos a usar dos bibliotecas en este proyecto: Firebase UI y la biblioteca de soporte para diseño de Android. Por lo tanto, abre el archivo build.gradle del módulo app y agrega las siguientes dependencias compile:

Presiona el botón Sync Now (Sincronizar ahora) para actualizar el proyecto.

3. Define diseños

El archivo activity_main.xml, que ya está vinculado con MainActivity, define los contenidos de la pantalla de inicio de la aplicación. En otras palabras, representará a la sala de chat.

Al igual que la mayoría del resto de las aplicaciones de grupos de chat disponibles hoy en día, nuestra aplicación tendrá los siguientes elementos en la interfaz de usuario:

  • Una lista que muestre todos los mensajes del grupo de chat en orden cronológico
  • Un campo de entrada en el que el usuario pueda escribir un mensaje nuevo
  • Un botón que el usuario pueda presionar para publicar el mensaje

Por lo tanto, activity_main.xml debe tener un ListView, un EditText y un FloatingActionButton. Después de colocarlos dentro de un widget RelativeLayout, tu diseño en XML deberá verse así:

Toma en cuenta que he colocado el widget EditText dentro de un widget TextInputLayout. Al hacer esto se agrega una etiqueta flotante al EditText, que es importante si quieres cumplir con las pautas del Material Design.

Ahora que el diseño de la pantalla de inicio está listo podemos continuar creando un diseño para los mensajes del chat, que son elementos contenidos en un ListView. Comienza creando un nuevo archivo de diseño XML llamado message.xml, cuyo elemento raíz sea RelativeLayout.

El diseño debe tener widgets TextView para mostrar el texto del mensaje del chat, la hora a la que fue enviado y su autor. Siéntete en la libertad de colocarlos en cualquier orden. Este es el diseño que usaré:

4. Gestiona la autenticación del usuario

Permitir que los usuarios publiquen mensajes de forma anónima en la sala de chat sería una muy mala idea. Esto podría ocasionar spam, problemas de seguridad y una experiencia de chat poco deseable para los usuarios. Por lo tanto, vamos a configurar nuestra aplicación para que solamente los usuarios registrados puedan leer y publicar mensajes.

Comienza yendo a la sección Auth (Autorización) de la Consola de Firebase y habilitando Email/Password (Correo/Contraseña) como proveedor de inicio de sesión.

Siéntete en la libertad de habilitar proveedores de inicio de sesión OAuth 2.0 también. Sin embargo, FirebaseUI v0.6.0 solamente es compatible sin problemas con el inicio de sesión de Google y Facebook.

Paso 1: Gestiona el inicio de sesión del usuario

Tan pronto como la aplicación arranque, ésta debe verificar si el usuario ha iniciado sesión. Si es así, la aplicación debe continuar y mostrar el contenido de la sala de chat. De lo contrario, ésta debe redirigir al usuario ya sea a una pantalla de inicio de sesión o a una de registro. Con FirebaseUI, la creación de esas pantallas requiere mucho menos código del que podrías imaginar.

Dentro del método onCreate() de MainActivity, revisa si el usuario ya inició sesión verificando si el objeto FirebaseUser actual no es null. Si es null, debes crear y configurar un objeto Intent que abre una activity de inicio de sesión. Para hacer esto usa la clase SignInIntentBuilder. Una vez que el intent esté listo, debes ejecutar la activity de inicio de sesión usando el método startActivityForResult().

Toma en cuenta que la activity de inicio de sesión también permite el registro de nuevos usuarios. Por lo tanto no es necesario que escribas código adicional para gestionar el registro de usuarios.

Agrega el siguiente código al método onCreate():

Como puedes ver en el código anterior, si el usuario ya inició sesión primero mostramos un Toast que saludará al usuario, y posteriormente invocamos al método llamado displayChatMessages. Por ahora solamente crea el esqueleto del método. Vamos a añadirle código posteriomente.

Una vez que el usuario haya iniciado sesión, MainActivity recibirá un resultado en forma de un Intent. Para manejarlo, debes sobrescribir el método onActivityResult().

Si el código del resultado es RESULT_OK, esto significa que el usuario ha iniciado sesión con éxito. De ser así, debes invocar al método displayChatMessages() de nuevo. De lo contrario invoca finish() para cerrar la aplicación.

En este punto puedes ejecutar la aplicación y revisar las pantallas de registro y de inicio de sesión.

Sign up screen for new users

Paso 2: Gestiona el cierre de sesión del usuario

De forma predeterminada FirebaseUI usa el Bloqueo Inteligente para Contraseñas. Por lo tanto, una vez que los usuarios inicien sesión éstos permanecerán en ella incluso si reinician la aplicación. Para permitir que los usuarios cierren sesión agregaremos la opción correspondiente al menú de desbordamiento de MainActivity.

Crea un nuevo archivo de recursos de menú llamado main_menu.xml y agrégale un elemento item único cuyo atributo title tenga el valor Sign out (Cerrar sesión). El contenido del archivo debe verse así:

Para instanciar el recurso de menú dentro de MainActivity, sobrescribe el método onCreateOptionsMenu() e invoca al método inflate() del objeto MenuInflater.

A continuación, sobrescribe el método onOptionsItemSelected() para gestionar los eventos clic en el elemento del menú. Dentro del método puedes invocar a la función signOut() de la clase AuthUI para cerrar la sesión del usuario. Dado que la operación de cierre de sesión se ejecuta de forma asíncrona, también vamos a añadirle un OnCompleteListener.

Una vez que el usuario haya cerrado su sesión, la aplicación deberá cerrarse automáticamente. Esa es la razón por la que ves una llamada al método finish() en el código anterior.

5. Crea un modelo

Para almacenar los mensajes de chat en la base de datos de Firebase en tiempo real, debes crear un modelo para ellos. El diseño del mensaje de chat, que creamos anteriormente en este tutorial, tiene tres vistas. Para poder llenar esas vistas, el modelo también debe tener al menos tres campos.

Crea una nueva clase de Java llamada ChatMessage.java y agrégale tres variables miembro: messageTextmessageUser y messageTime. Además agrega un constructor para inicializar esas variables.

Para que el modelo sea compatible con FirebaseUI, también debes añadirle un constructor predeterminado junto con funciones get y set para todas las variables miembro.

En este punto, la clase ChatMessage debe verse así:

6. Publica un mensaje de chat

Ahora que el modelo está listo, podemos añadir fácilmente nuevos mensajes de chat a la base de datos de Firebase en tiempo real.

Para publicar un mensaje nuevo el usuario presionará el FloatingActionButton. Por lo tanto debes añadirle un OnClickListener.

Dentro del listener, primero debes obtener un objeto DatabaseReference usando el método getReference() de la clase FirebaseDatabase. Después puedes hacer llamadas a los métodos push() y setValue() para añadir nuevas instancias de la clase ChatMessage a la base de datos en tiempo real.

Desde luego, las instancias ChatMessage deben ser inicializadas usando los contenidos del EditText y el nombre para mostrar del usuario registrado actualmente.

En consecuencia, agrega el siguiente código al método onCreate():

Los datos de la base de datos de Firebase en tiempo real siempre se almacenan como pares clave-valor. Sin embargo, si observas el código anterior podrás ver que estamos invocando a setValue() sin especificar una clave. Esto se permite solamente debido a que la llamada al método setValue() está precedida por una llamada al método push(), quien genera una nueva clave automáticamente.

7. Muestra los mensajes de chat

FirebaseUI tiene una clase muy útil llamada FirebaseListAdapter, que reduce dramáticamente el esfuerzo requerido para llenar un ListView usando datos que se encuentran presentes en la base de datos de Firebase en tiempo real. Vamos a usarla ahora para recuperar y mostrar todos los objetos ChatMessage que estén presentes en la base de datos.

Añade un objeto FirebaseListAdapter como una nueva variable miembro de la clase MainActivity.

Dentro del método displayChatMessages() inicializa el adaptador usando su constructor, el cuál espera los siguientes argumentos:

  • Una referencia a la Activity
  • La class (clase) del objeto en el que estés interesado
  • El diseño de los elementos de la lista
  • Un objeto DatabaseReference

FirebaseListAdapter es una clase abstracta y tiene un método populateView() abstracto que debe sobrescribirse.

Como su nombre sugiere, populateView() se usa para llenar las vistas de cada elemento de la lista. Si estás familiarizado con la clase ArrayAdapter, puedes pensar en populateView() como una alternativa al método getView().

Dentro del método, primero debes usar findViewById() para obtener referencias a cada TextView que esté presente en el archivo de diseño message.xml. Después puedes invocar a sus métodos setText() y llenarlos usando las funciones get de la clase ChatMessage.

En este punto, el contenido del método displayChatMessages() debe verse así:

La aplicación de grupo de chat está lista. Ejecútala y publica nuevos mensajes para verlos aparecer inmediatamente en el ListView. Si compartes la aplicación con tus amigos podrás ver sus mensajes también tan pronto como los publiquen.

Conclusión

En este tutorial aprendiste cómo usar Firebase y FirebaseUI para crear una aplicación de grupo de chat muy sencilla. También viste lo fácil que es trabajar con las clases disponibles en FirebaseUI para crear nuevas pantallas rápidamente e implementar funcionalidad compleja.

Para aprender más sobre Firebase y FirebaseUI revisa la documentación oficial. ¡O también puedes revisar algunos de nuestros otros tutoriales de Firebase aquí en Envato Tuts+!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.