Cómo compilar una app para Android con Firebase y Jetpack Compose

1. Introducción

Última actualización: 16/11/2022

Cómo compilar una app para Android con Firebase y Jetpack Compose

En este codelab, compilarás una app para Android llamada Make It So. La IU de esta app está compilada completamente con Jetpack Compose, que es el moderno kit de herramientas de Android para compilar IU nativas. Es intuitiva y requiere menos código que escribir archivos .xml y vincularlos a actividades, fragmentos o vistas.

El primer paso para comprender qué tan bien funcionan juntos Firebase y Jetpack Compose es comprender la arquitectura moderna de Android. Una buena arquitectura hace que el sistema sea fácil de entender, desarrollar y mantener, ya que deja muy claro cómo se organizan y comunican los componentes entre sí. En Android, la arquitectura recomendada se denomina Modelo - Vista - ViewModel. El Modelo representa la capa que accede a los datos en la aplicación. La vista es la capa de la IU y no debería saber nada sobre la lógica empresarial. Y ViewModel es donde se aplica la lógica empresarial, que a veces requiere que ViewModel llame a la capa Modelo.

Te recomendamos que leas este artículo para comprender cómo se aplica Modelo - Vista - ViewModel a una app para Android compilada con Jetpack Compose, ya que facilitará la comprensión de la base de código y la realización de los siguientes pasos.

Qué compilarás

Make It So es una aplicación sencilla de listas de tareas pendientes que permite al usuario agregar y editar tareas, agregar marcas, prioridades y fechas límite, y marcar las tareas como completadas. Las siguientes imágenes muestran las dos páginas principales de esta aplicación: la página de creación de tareas y la página principal con la lista de tareas creadas.

Agregarás algunas funciones que faltan en esta app:

• Autentica usuarios con un correo electrónico y contraseña
• Agrega un objeto de escucha a una colección de Firestore y haz que la IU reaccione a los cambios
• Agrega seguimientos personalizados para supervisar el rendimiento de código específico en la app
• Crea un botón para activar o desactivar una función con Remote Config y usa el lanzamiento en etapas para iniciarla

Qué aprenderás

• Cómo usar Firebase Authentication, Performance Monitoring, Remote Config y Cloud Firestore en una aplicación para Android moderna
• Cómo hacer que las APIs de Firebase se ajusten a una arquitectura MVVM
• Cómo reflejar los cambios realizados con las APIs de Firebase en una IU de Compose

Requisitos

• Android Studio Flamingo+
• Android Emulator con API 21 o posterior
• Estar familiarizado con el lenguaje de programación Kotlin

2. Obtén la app de ejemplo y configura Firebase

Obtén el código de la app de ejemplo

Clona el repositorio de GitHub a partir de la línea de comandos:

git clone https://github.com/FirebaseExtended/make-it-so-android.git

Nota: La rama main contiene dos carpetas: start y final. Usarás la carpeta start para completar los pasos de este codelab. Si quieres ejecutar la app finalizada, deberás usar la carpeta final.

Cómo configurar Firebase

Lo primero que debes hacer es ir a Firebase console y crear un proyecto de Firebase haciendo clic en el botón "+ Agregar proyecto" como puedes ver a continuación:

Sigue los pasos que aparecen en la pantalla para completar la creación del proyecto.

Nota: Habilita Google Analytics cuando crees el proyecto. Si habilitas Google Analytics, se proporcionarán opciones de segmentación expandidas de Firebase Remote Config.

Dentro de cada proyecto de Firebase, puedes crear diferentes apps: para Android, iOS, la Web, Flutter y Unity. Elige la opción de Android, como se muestra aquí:

Luego, sigue estos pasos:

1. Ingresa com.example.makeitso como el nombre del paquete y, de manera opcional, ingresa un sobrenombre. En este codelab, no necesitas agregar el certificado de firma de depuración.
2. Haz clic en Siguiente para registrar tu app y acceder al archivo de configuración de Firebase.
3. Haz clic en Download google-services.json para descargar el archivo de configuración y guardarlo en el directorio make-it-so-android/app.
4. Haz clic en Siguiente. Debido a que los SDK de Firebase ya se incluyen en el archivo build.gradle del proyecto de muestra, haz clic en Siguiente para pasar a la sección Próximos pasos.
5. Haz clic en Ir a la consola para finalizar.

Para que la app Make it So funcione correctamente, hay dos cosas que debes hacer en la consola antes de pasar al código: habilitar los proveedores de autenticación y crear la base de datos de Firestore. Primero, vamos a habilitar Authentication para que los usuarios puedan acceder a la app:

1. En el menú Compilación, selecciona Autenticación y, luego, haz clic en Comenzar.
2. En la tarjeta Método de acceso, selecciona Correo electrónico/Contraseña y habilítalo.
3. Luego, haz clic en Agregar proveedor nuevo y selecciona y habilita Anónimo.

A continuación, configura Firestore. Usarás Firestore para almacenar las tareas de los usuarios que hayan accedido a su cuenta. Cada usuario obtendrá su propio documento dentro de una colección de la base de datos.

1. En el menú Compilación, selecciona Firestore y, luego, haz clic en Crear base de datos.
2. Mantén habilitada la opción Iniciar en modo de producción y haz clic en Siguiente.
3. Cuando se te solicite, selecciona la ubicación en la que se almacenarán tus datos de Cloud Firestore. Cuando desarrolles una app de producción, te recomendamos que esté en una región cercana a la mayoría de los usuarios y en común con otros servicios de Firebase, como Functions. En este codelab, puedes conservar la región predeterminada o seleccionar la más cercana.
4. Haz clic en Habilitar para aprovisionar tu base de datos de Firestore.

Dediquemos un momento a compilar reglas de seguridad sólidas para la base de datos de Firestore. Abre el panel de Firestore y ve a la pestaña Reglas. Luego, actualiza las reglas de seguridad para que se vean de la siguiente manera:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow create: if request.auth != null;
      allow read, update, delete: if request.auth != null && resource.data.userId == request.auth.uid;
    }
  }
}

Básicamente, estas reglas indican que cualquier usuario que haya accedido a la app puede crear un documento para sí mismo dentro de cualquier colección. Luego, una vez creado el documento, solo el usuario que lo haya creado podrá verlo, actualizarlo o borrarlo.

Ejecuta la aplicación

Ya tienes todo listo para ejecutar la aplicación. Abre la carpeta make-it-so-android/start en Android Studio y ejecuta la app (puedes hacerlo con un Android Emulator o un dispositivo Android real).

Nota: Durante el desarrollo de una app o cuando pruebes Firebase, es muy recomendable usar Firebase Local Emulator Suite. Sin embargo, este codelab usa Firebase Performance Monitoring y Firebase Remote Config, que aún no son compatibles con los emuladores, por lo que deberás ejecutar esta aplicación en el proyecto de Firebase que creaste anteriormente.

3. Firebase Authentication

¿Qué función agregarás?

En el estado actual de la app de ejemplo Make It So, un usuario puede comenzar a usar la app sin tener que acceder primero. Para lograrlo, usa autenticación anónima. Sin embargo, las cuentas anónimas no permiten que los usuarios accedan a sus datos en otros dispositivos ni en sesiones futuras. Si bien la autenticación anónima es útil para una integración semicaliente, siempre debes ofrecer la opción para que los usuarios cambien a una forma de acceso diferente. Con esto en mente, en este codelab, agregarás autenticación con correo electrónico y contraseña a la app de Make It So.

¡Llegó la hora de programar!

Apenas el usuario crea una cuenta, ingresando un correo electrónico y una contraseña, necesitas pedirle a la API de Firebase Authentication una credencial de correo electrónico y, luego, vincular la credencial nueva a la cuenta anónima. Abre el archivo AccountServiceImpl.kt en Android Studio y actualiza la función linkAccount para que se vea de la siguiente manera:

model/service/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String) {
    val credential = EmailAuthProvider.getCredential(email, password)
    auth.currentUser!!.linkWithCredential(credential).await()
}

Ahora, abre SignUpViewModel.kt y llama a la función linkAccount del servicio dentro del bloque launchCatching de la función onSignUpClick:

screens/sign_up/SignUpViewModel.kt

launchCatching {
    accountService.linkAccount(email, password)
    openAndPopUp(SETTINGS_SCREEN, SIGN_UP_SCREEN)
}

Primero, intenta autenticarse y, si la llamada se realiza correctamente, pasa a la siguiente pantalla (SettingsScreen). A medida que ejecutas estas llamadas dentro de un bloque launchCatching, si hay un error en la primera línea, se detectará y manejará la excepción, y no se alcanzará la segunda línea.

En cuanto se vuelva a abrir SettingsScreen, debes asegurarte de que las opciones Acceder y Crear cuenta desaparecieron, porque ahora el usuario ya se autenticó. Para ello, hagamos que el SettingsViewModel escuche el estado del usuario actual (disponible en AccountService.kt) para comprobar si la cuenta es anónima o no. Para ello, actualiza uiState en SettingsViewModel.kt para que se vea de la siguiente manera:

screen/settings/SettingsViewModel.kt

val uiState = accountService.currentUser.map {
    SettingsUiState(it.isAnonymous)
}

Lo último que debes hacer es actualizar uiState en SettingsScreen.kt para recopilar los estados emitidos por SettingsViewModel:

screen/settings/SettingsScreen.kt

val uiState by viewModel.uiState.collectAsState(
    initial = SettingsUiState(false)
)

Ahora, cada vez que cambie el usuario, se recompondrá el objeto SettingsScreen para mostrar las opciones según el nuevo estado de autenticación del usuario.

¡Es hora de probarlo!

Ejecuta Make it So y navega a la configuración haciendo clic en el ícono de ajustes en la esquina superior derecha de la pantalla. Allí, haz clic en la opción Crear cuenta:

Escribe una dirección de correo electrónico válida y una contraseña segura para crear tu cuenta. Debería funcionar, y se te debería redireccionar a la página de configuración, donde verás dos opciones nuevas: salir y borrar tu cuenta. Para verificar la cuenta nueva creada en el panel de Authentication de Firebase console, haz clic en la pestaña Usuarios.

4. Cloud Firestore

¿Qué función agregarás?

En el caso de Cloud Firestore, agregarás un objeto de escucha a la colección de Firestore que almacena los documentos que representan las tareas que se muestran en Hacerlo así. Una vez que agregues este objeto de escucha, recibirás todas las actualizaciones realizadas a esta colección.

¡Llegó la hora de programar!

Actualiza los Flow disponibles en StorageServiceImpl.kt para que se vean de la siguiente manera:

model/service/impl/StorageServiceImpl.kt

override val tasks: Flow<List<Task>>
    get() =
      auth.currentUser.flatMapLatest { user ->
        firestore.collection(TASK_COLLECTION).whereEqualTo(USER_ID_FIELD, user.id).dataObjects()
      }

Este código agrega un objeto de escucha a la colección de tareas basada en el user.id. Cada tarea se representa con un documento de una colección llamada tasks, y cada una de ellas tiene un campo llamado userId. Ten en cuenta que se emitirá un nuevo Flow si cambia el estado de currentUser (por ejemplo, si sales de la cuenta).

Ahora, debes hacer que Flow en TasksViewModel.kt refleje lo mismo que en el servicio:

screens/tasks/TasksViewModel.kt

val tasks = storageService.tasks

Y lo último será hacer que composable function en TasksScreens.kt, que representa la IU, tenga en cuenta este flujo y lo recopile como un estado. Cada vez que cambie el estado, la función de componibilidad se recompondrá automáticamente y mostrará al usuario el estado más reciente. Agrega lo siguiente a TasksScreen composable function:

screens/tasks/TasksScreen.kt

val tasks = viewModel
    .tasks
    .collectAsStateWithLifecycle(emptyList())

Una vez que la función de componibilidad tenga acceso a estos estados, puedes actualizar el LazyColumn (que es la estructura que usas para mostrar una lista en la pantalla) para que se vea de la siguiente manera:

screens/tasks/TasksScreen.kt

LazyColumn {
    items(tasks.value, key = { it.id }) { taskItem ->
        TaskItem( [...] )
    }
}

¡Es hora de probarlo!

Para probar que funcionó, agrega una nueva tarea con la app (haz clic en el botón Agregar en la esquina inferior derecha de la pantalla). Una vez que termines de crear la tarea, debería aparecer en la colección de Firestore en la consola de Firestore. Si accedes a Make it So en otros dispositivos con la misma cuenta, podrás editar tus tareas pendientes y ver cómo se actualizan en todos los dispositivos en tiempo real.

5. Performance Monitoring

¿Qué función agregarás?

Es muy importante prestar atención al rendimiento, ya que es muy probable que los usuarios dejen de usar tu app si el rendimiento no es bueno y tardan demasiado en completar una tarea simple con ella. Por eso, a veces resulta útil recopilar algunas métricas sobre un recorrido específico que realiza un usuario en tu aplicación. Y para ayudarte con eso, Firebase Performance Monitoring ofrece seguimientos personalizados. Sigue los pasos que se indican a continuación para agregar seguimientos personalizados y medir el rendimiento por diferentes fragmentos de código en Make it So.

¡Llegó la hora de programar!

Si abres el archivo Performance.kt, verás una función intercalada llamada trace. Esta función llama a la API de Performance Monitoring para crear un seguimiento personalizado y pasar el nombre del seguimiento como parámetro. El otro parámetro que ves es el bloque de código que deseas supervisar. La métrica predeterminada que se recopila para cada seguimiento es el tiempo que tarda en ejecutarse completamente:

model/service/Performance.kt

inline fun <T> trace(name: String, block: Trace.() -> T): T = Trace.create(name).trace(block)

Puedes elegir qué partes de la base de código crees que es importante medir y agregarle seguimientos personalizados. A continuación, se muestra un ejemplo de cómo agregar un seguimiento personalizado a la función linkAccount que viste antes (en AccountServiceImpl.kt) en este codelab:

model/service/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String): Unit =
  trace(LINK_ACCOUNT_TRACE) {
      val credential = EmailAuthProvider.getCredential(email, password)
      auth.currentUser!!.linkWithCredential(credential).await()
  }

Ahora, es tu turno. Agrega algunos seguimientos personalizados a la app de Make it So y continúa con la siguiente sección para probar si funcionó como se esperaba.

¡Es hora de probarlo!

Cuando termines de agregar los seguimientos personalizados, ejecuta la app y asegúrate de usar las funciones que quieras medir varias veces. Luego, ve a Firebase console y ve al Panel de rendimiento. En la parte inferior de la pantalla, verás tres pestañas: Solicitudes de red, Seguimientos personalizados y Renderización de pantalla.

Ve a la pestaña Seguimientos personalizados y verifica que se muestren allí los seguimientos que agregaste a la base de código y que puedas ver cuánto tiempo suele tardar en ejecutarse estos fragmentos de código.

6. Remote Config

¿Qué función agregarás?

Hay una gran cantidad de casos de uso para Remote Config, desde cambiar la apariencia de tu aplicación de forma remota hasta configurar diferentes comportamientos para distintos segmentos de usuarios. En este codelab, usarás Remote Config para crear un botón de activación de función que oculte o muestre la nueva función de edición de tarea en la app de Make it So.

¡Llegó la hora de programar!

Lo primero que debes hacer es crear la configuración en Firebase console. Para hacerlo, debes navegar al panel de Remote Config y hacer clic en el botón Agregar parámetro. Completa los campos según la imagen de abajo:

Una vez que hayas completado todos los campos, puedes hacer clic en el botón Guardar y, luego, en Publicar. Ahora que el parámetro está creado y disponible para tu base de código, debes agregar el código que recuperará los valores nuevos de tu app. Abre el archivo ConfigurationServiceImpl.kt y actualiza la implementación de estas dos funciones:

model/service/impl/ConfigurationServiceImpl.kt

override suspend fun fetchConfiguration(): Boolean {
  return remoteConfig.fetchAndActivate().await()
}

override val isShowTaskEditButtonConfig: Boolean
  get() = remoteConfig[SHOW_TASK_EDIT_BUTTON_KEY].asBoolean()

La primera función recupera los valores del servidor y se le llama en cuanto se inicia la app, en SplashViewModel.kt. Es la mejor manera de garantizar que los valores más actualizados estén disponibles en todas las pantallas desde el principio. No es una buena experiencia del usuario si cambias la IU o el comportamiento de la app más adelante, cuando el usuario está haciendo algo.

La segunda función muestra el valor booleano que se publicó para el parámetro que acabas de crear en la consola. Para recuperar esta información en TasksViewModel.kt, agrega lo siguiente a la función loadTaskOptions:

screens/tasks/TasksViewModel.kt

fun loadTaskOptions() {
  val hasEditOption = configurationService.isShowTaskEditButtonConfig
  options.value = TaskActionOption.getOptions(hasEditOption)
}

Recuperarás el valor en la primera línea y lo usarás para cargar las opciones del menú de los elementos de la tarea en la segunda línea. Si el valor es false, significa que el menú no contendrá la opción de edición. Ahora que tienes la lista de opciones, debes hacer que la IU la muestre correctamente. Cuando compilas una app con Jetpack Compose, debes buscar el composable function que declara cómo debería verse la IU de TasksScreen. Para ello, abre el archivo TasksScreen.kt y actualiza LazyColum para que apunte a las opciones disponibles en TasksViewModel.kt:

screens/tasks/TasksScreen.kt

val options by viewModel.options

LazyColumn {
  items(tasks.value, key = { it.id }) { taskItem ->
    TaskItem(
      options = options,
      [...]
    )
  }
}

El TaskItem es otro composable function que declara cómo debería verse la IU de una sola tarea. Además, cada tarea tiene un menú con opciones que se muestra cuando el usuario hace clic en el ícono de tres puntos al final.

¡Es hora de probarlo!

Ya está todo listo para que ejecutes la app. Verifica que el valor que publicaste con Firebase console coincida con el comportamiento de la app:

• Si es false, solo deberías ver dos opciones cuando hagas clic en el ícono de tres puntos.
• Si es true, deberías ver tres opciones cuando hagas clic en el ícono de tres puntos.

Intenta cambiar el valor un par de veces en la consola y reinicia la app. Así de fácil es lanzar funciones nuevas en tu app con Remote Config.

7. Felicitaciones

¡Felicitaciones! Compilaste correctamente una app para Android con Firebase y Jetpack Compose.

Agregaste Firebase Authentication, Performance Monitoring, Remote Config y Cloud Firestore a una app para Android totalmente compilada con Jetpack Compose para la IU y lograste que se adaptara a la arquitectura de MVVM recomendada.

Lecturas adicionales

• Cómo compilar una app para Android con Firebase y Compose
• Cómo agregar Firebase Authentication a una app de Jetpack Compose
• Cómo agregar Cloud Firestore a una app de Jetpack Compose
• Cómo agregar corrutinas y flujo a una app para Android compilada con Firebase y Compose
• Cómo agregar Firebase Performance Monitoring a una app de Jetpack Compose
• Cómo agregar Firebase Remote Config a una app de Jetpack Compose

Documentos de referencia

• Firebase Authentication
• Cloud Firestore
• Performance Monitoring
• Remote Config