Se usó la API de Cloud Translation para traducir esta página.

Navegación condicional de Android con acceso

Este codelab es parte del curso Aspectos avanzados de Android en Kotlin. Aprovecharás al máximo este curso si trabajas con los codelabs de forma secuencial, aunque no es obligatorio. Todos los codelabs del curso se indican en la página de destino de los codelabs de Aspectos avanzados de Android en Kotlin.

Este codelab se basa en el codelab Implementing Login on Android with FirebaseUI. Si bien puedes descargar el código de partida para este codelab si no hiciste el codelab anterior, te recomendamos que primero completes el codelab Cómo implementar el acceso en Android con FirebaseUI.

Introducción

Si tu app admite el acceso, es un caso de uso común reservar partes de la app solo para los usuarios que accedieron. Por ejemplo, es posible que desees reservar la pantalla de Configuración de tu app para los usuarios que accedieron.

En esos casos, puedes usar la navegación condicional para llevar a los usuarios a la pantalla adecuada según su estado de autenticación.

En este codelab, compilarás una app existente para agregar una pantalla de configuración a la que solo podrán acceder los usuarios que hayan accedido. Para esta tarea, usarás los componentes de navegación de Android.

Conocimientos que ya deberías tener

El componente Navigation de Android y cómo se usa en las apps para Android
Cómo se implementa el acceso en tu app para Android con la biblioteca de FirebaseUI Si no conoces este concepto, debes completar el codelab Implementar el acceso en Android con FirebaseUI.

Qué aprenderás

Cómo dirigir a los usuarios a las pantallas adecuadas de tu app según si accedieron o no.

Actividades

Controlar correctamente la navegación de los usuarios a la pantalla correcta después de que acceden correctamente
Evita que los usuarios accedan a la pantalla de Configuración si no accedieron y, en su lugar, redirígelos a la pantalla de Acceso.

En el codelab anterior, trabajaste en una app que mostraba datos sobre Android. Tu app también permitía que los usuarios accedieran y salieran. En este codelab, agregarás una pantalla de configuración a la app existente. El usuario solo podrá acceder a la pantalla de configuración si accedió a su cuenta.

Si el usuario no accedió, cuando intente acceder a la pantalla de configuración, la app lo redireccionará a la pantalla de acceso. Una vez que se complete correctamente el flujo de acceso, se redireccionará al usuario a la pantalla de configuración a la que intentó acceder originalmente.

Para descargar la app de ejemplo, puedes hacer lo siguiente:

Download Zip

… o clona el repositorio de GitHub desde la línea de comandos con el siguiente comando y cambia a la rama start del repositorio:

$  git clone https://github.com/googlecodelabs/android-kotlin-login-navigation

Una vez que hayas cargado el proyecto en Android Studio, haz lo siguiente:

Ejecuta la app en un emulador o dispositivo físico para asegurarte de que tu entorno se haya configurado correctamente para comenzar el desarrollo.

Si se realiza correctamente, deberías ver la pantalla principal con un dato curioso sobre Android y un botón de acceso en la esquina superior izquierda.

Funciones actuales de la app de partida:

Si el usuario no accedió, cuando presione el botón Acceder, se iniciará el flujo de acceso y se le permitirá acceder con una dirección de correo electrónico o una Cuenta de Google.
Si el usuario accedió, el botón cambia a Cerrar sesión, lo que le permite salir de la cuenta.

En esta tarea, agregarás un botón en la pantalla principal que le permita al usuario navegar a la pantalla de configuración. La pantalla de configuración permitirá que el usuario elija qué tipo de datos curiosos quiere que se muestren en la pantalla principal. En la pantalla de configuración, pueden elegir ver datos sobre Android o sobre el estado de California.

Abre fragment_main.xml.
En fragment_main.xml,, agrega un botón Configuración anidado en ConstraintLayout y colócalo en la esquina superior derecha de la pantalla.

fragment_main.xml

<TextView
       android:id="@+id/settings_btn"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_margin="@dimen/text_margin"
       android:background="@color/colorAccent"
       android:padding="10dp"
       android:text="@string/settings_btn"
       android:textColor="#ffffff"
       android:textSize="20sp"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"/>

Abre nav_graph.xml.
Agrega una acción dentro de mainFragment. El id de la acción es action_mainFragment_to_customizeFragment y el destino es customizeFragment.

nav_graph.xml

<fragment
       android:id="@+id/mainFragment"
       android:name="com.example.android.firebaseui_login_sample.MainFragment"
       android:label="MainFragment">
   <action
           android:id="@+id/action_mainFragment_to_settingsFragment"
           app:destination="@id/settingsFragment"/>
</fragment>

Abre MainFragment.kt.
En onViewCreated(), configura un onClickListener para settings_btn, de modo que, cuando se presione el botón, se dirija al usuario a customizeFragment.

MainFragment.kt

binding.settingsBtn.setOnClickListener {
   val action = MainFragmentDirections.actionMainFragmentToSettingsFragment()
   findNavController().navigate(action)
}

Si ves errores sin resolver, vuelve a compilar la app desde el menú Build para generar y usar las nuevas acciones de navegación que creaste.
Vuelve a iniciar la app. Ahora debería haber un botón Configuración funcional en la esquina superior derecha.
Haz clic en el botón que te llevará a la pantalla Configuración. La pantalla Configuración solo tiene una opción, que permite al usuario elegir qué tipo de dato curioso quiere ver en la pantalla principal.
Haz clic en el botón Atrás del dispositivo Android para volver a la pantalla principal.

En esta tarea, agregarás código para dirigir al usuario a la pantalla de acceso si intenta acceder a la pantalla de configuración cuando no accedió.

Abre SettingsFragment.kt.
En onViewCreated(), observa el authenticationState y redirecciona al usuario a LoginFragment si no está autenticado.

SettingsFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
   super.onViewCreated(view, savedInstanceState)
   val navController = findNavController()
   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
       when (authenticationState) {
           LoginViewModel.AuthenticationState.AUTHENTICATED -> Log.i(TAG, "Authenticated")
           // If the user is not logged in, they should not be able to set any preferences,
           // so navigate them to the login fragment
           LoginViewModel.AuthenticationState.UNAUTHENTICATED -> navController.navigate(
               R.id.loginFragment
           )
           else -> Log.e(
               TAG, "New $authenticationState state that doesn't require any UI change"
           )
       }
   })
}

Dado que la app lleva al usuario a la pantalla de acceso si intenta acceder a la pantalla de configuración, la app también debe controlar el comportamiento del botón Atrás en la pantalla de acceso. Si la app no personaliza el comportamiento del botón Atrás, el usuario quedará atrapado en un bucle infinito en el que intentará volver a la pantalla de configuración, pero se lo redireccionará a la pantalla de acceso nuevamente.

Abre LoginFragment.kt.
En onViewCreated(), controla las acciones del botón Atrás llevando al usuario de vuelta a MainFragment.

LoginFragment.kt

// If the user presses the back button, bring them back to the home screen
requireActivity().onBackPressedDispatcher.addCallback(viewLifecycleOwner) {
   navController.popBackStack(R.id.mainFragment, false)
}

Reinicia tu app y confirma que, si no accediste, los intentos de acceder a la pantalla de configuración ahora te redireccionarán al flujo de acceso.

Si bien redireccionaste correctamente al usuario para que acceda, no controlaste lo que sucede después de que el usuario accede correctamente, por lo que los intentos de acceso parecerán no funcionar. Corregirás esto en el siguiente paso.

Hasta ahora, configuraste correctamente tu app para redireccionar al usuario a la pantalla de acceso si intenta acceder a la pantalla de configuración sin haber accedido.

Sin embargo, después de completar el flujo de acceso, se te redirecciona nuevamente a la pantalla de acceso. Esta no es una buena experiencia del usuario y puede ser confusa.

Para brindar la experiencia del usuario ideal, la app debe llevar al usuario de vuelta a la pantalla de configuración después de que acceda correctamente.

Aún en LoginFragment.kt, en cualquier lugar de onViewCreated(), observa el authenticationState y navega al usuario de vuelta a SettingsFragment cuando se autentique correctamente.

LoginFragment.kt

// Observe the authentication state so we can know if the user has logged in successfully.
// If the user has logged in successfully, bring them back to the settings screen.
// If the user did not log in successfully, display an error message.
viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
   when (authenticationState) {
      // Since our login flow is only one screen instead of multiple 
      // screens, we can utilize popBackStack(). If our login flow 
      // consisted of multiple screens, we would have to call 
      // popBackStack() multiple times.
       LoginViewModel.AuthenticationState.AUTHENTICATED -> navController.popBackStack()
       else -> Log.e(
           TAG,
           "Authentication state that doesn't require any UI change $authenticationState"
       )
   }
})

Vuelve a ejecutar la app y confirma que, ahora, cuando accedas correctamente, llegarás a la página Configuración en lugar de la página Acceder.

Cómo quitar elementos de la pila de actividades con popBackStack(): A medida que el usuario avanza en una app, Android realiza un seguimiento de las pantallas que visita. Cuando el usuario presiona el botón Atrás, la app vuelve a las pantallas visitadas en orden.

Cuando quitas una pantalla de la pila de actividades, básicamente le indicas a Android que omita esa pantalla cuando el usuario presione el botón Atrás.

En este caso, quitas la pantalla actual de la pila de actividades para que, cuando el usuario presione el botón Atrás, la app omita esta pantalla y vuelva a la que el usuario visitó antes de esta.

En otras palabras, cuando el usuario presiona el botón Atrás, la app no vuelve a la pantalla de acceso, sino que va a la pantalla que el usuario visitó antes de llegar a la pantalla de acceso.

Puedes consultar la app completa con todo el código de la solución en este repositorio de GitHub: https://github.com/googlecodelabs/android-kotlin-login-navigation.

En este codelab, aprendiste las prácticas recomendadas para crear una buena experiencia del usuario en una app que admite el acceso. Al observar el estado de autenticación de la app, pudiste determinar a qué pantallas puede acceder el usuario y redireccionarlo a la pantalla de acceso cuando sea necesario.

Para obtener más información sobre las prácticas recomendadas de Navigation en Android, consulta los siguientes recursos:

Documentación para desarrolladores de Android:

Codelabs:

Android Kotlin Fundamentals: Define navigation paths (Aspectos básicos de Kotlin para Android: Cómo definir rutas de navegación)

Para obtener vínculos a otros codelabs de este curso, consulta la página de destino de los codelabs de Aspectos avanzados de Android en Kotlin.