Cette page a été traduite par l'API Cloud Translation.

Navigation conditionnelle Android avec connexion

Cet atelier de programmation fait partie du cours Développement Android avancé en Kotlin. Vous tirerez pleinement parti de ce cours en suivant les ateliers de programmation dans l'ordre, mais ce n'est pas obligatoire. Tous les ateliers de programmation du cours sont listés sur la page de destination des ateliers de programmation Android avancé en Kotlin.

Cet atelier de programmation s'appuie sur l'atelier Implémenter la connexion sur Android avec FirebaseUI. Vous pouvez télécharger le code de démarrage de cet atelier de programmation si vous n'avez pas suivi l'atelier de programmation précédent. Toutefois, il peut être utile de suivre d'abord l'atelier de programmation Implémenter la connexion sur Android avec FirebaseUI.

Introduction

Si votre application prend en charge la connexion, il est courant de réserver certaines parties de l'application aux utilisateurs connectés. Par exemple, vous pouvez réserver l'écran Paramètres de votre application aux utilisateurs connectés.

Dans ce cas, vous pouvez utiliser la navigation conditionnelle pour rediriger les utilisateurs vers l'écran approprié en fonction de leur état d'authentification.

Dans cet atelier de programmation, vous allez vous appuyer sur une application existante pour ajouter un écran de paramètres qui ne sera accessible aux utilisateurs que s'ils sont connectés. Pour cette tâche, vous allez utiliser les composants de navigation d'Android.

Ce que vous devez déjà savoir

Le composant Navigation d'Android et son utilisation dans les applications Android
Comment la connexion est implémentée dans votre application Android avec la bibliothèque FirebaseUI. Si vous ne connaissez pas ce concept, nous vous recommandons de suivre l'atelier de programmation Implémenter la connexion sur Android avec FirebaseUI.

Points abordés

Comment rediriger les utilisateurs vers les écrans appropriés de votre application selon qu'ils sont connectés ou non.

Objectifs de l'atelier

Gérez correctement la navigation des utilisateurs vers l'écran approprié une fois qu'ils se sont connectés.
Empêchez les utilisateurs d'accéder à l'écran Paramètres s'ils ne sont pas connectés et redirigez-les vers l'écran Connexion.

Dans l'atelier de programmation précédent, vous avez travaillé sur une application qui affichait des informations sur Android. Votre application permettait également aux utilisateurs de se connecter et de se déconnecter. Pour cet atelier de programmation, vous allez ajouter un écran de paramètres à l'application existante. L'utilisateur ne pourra accéder à l'écran de paramètres que s'il est connecté.

Si l'utilisateur n'est pas connecté, l'application le redirige vers l'écran de connexion lorsqu'il tente d'accéder à l'écran des paramètres. Une fois le processus de connexion terminé, l'utilisateur est redirigé vers l'écran des paramètres auquel il essayait d'accéder.

Pour télécharger l'application exemple, vous pouvez :

Télécharger le fichier ZIP

... ou clonez le dépôt GitHub à partir de la ligne de commande à l'aide de la commande suivante, puis passez à la branche start du dépôt :

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

Une fois le projet chargé dans Android Studio :

Exécutez l'application sur un émulateur ou un appareil physique pour vous assurer que votre environnement a été correctement configuré pour commencer le développement.

Si l'opération réussit, l'écran d'accueil doit afficher une anecdote amusante sur Android et un bouton de connexion en haut à gauche.

Fonctionnalités actuelles de l'application de démarrage :

Si l'utilisateur n'est pas connecté, il peut appuyer sur le bouton Se connecter pour lancer le processus de connexion et se connecter avec une adresse e-mail ou un compte Google.
Si l'utilisateur est connecté, le bouton devient un bouton Déconnexion qui lui permet de se déconnecter.

Dans cette tâche, vous allez ajouter un bouton sur l'écran d'accueil qui permet à l'utilisateur d'accéder à l'écran des paramètres. L'écran des paramètres permettra à l'utilisateur de choisir le type d'anecdotes amusantes qu'il souhaite afficher sur l'écran d'accueil. Sur l'écran des paramètres, ils peuvent choisir d'afficher des informations sur Android ou sur l'État de Californie.

Ouvrez fragment_main.xml.
Dans fragment_main.xml,, ajoute un bouton Settings imbriqué dans ConstraintLayout et positionne-le en haut à droite de l'écran.

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"/>

Ouvrez nav_graph.xml.
Ajoutez une action dans mainFragment. Le id de l'action est action_mainFragment_to_customizeFragment et la destination est 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>

Ouvrez MainFragment.kt.
Dans onViewCreated(), définissez un onClickListener pour settings_btn afin que l'utilisateur soit redirigé vers customizeFragment lorsqu'il appuie sur le bouton.

MainFragment.kt

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

Si des erreurs non résolues s'affichent, recompilez l'application à partir du menu Build (Compilation) pour générer et utiliser les nouvelles actions de navigation que vous avez créées.
Relancez l'application. Un bouton Paramètres fonctionnel devrait maintenant s'afficher en haut à droite.
Cliquez sur le bouton qui devrait vous rediriger vers l'écran Paramètres. L'écran Paramètres ne comporte qu'une seule option, qui permet à l'utilisateur de choisir le type d'anecdote amusante qu'il souhaite voir s'afficher sur l'écran d'accueil.
Cliquez sur le bouton Retour de l'appareil Android pour revenir à l'écran d'accueil.

Dans cette tâche, vous allez ajouter du code pour rediriger l'utilisateur vers l'écran de connexion s'il tente d'accéder à l'écran des paramètres alors qu'il n'est pas connecté.

Ouvrez SettingsFragment.kt.
Dans onViewCreated(), observez authenticationState et redirigez l'utilisateur vers LoginFragment s'il n'est pas authentifié.

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"
           )
       }
   })
}

Étant donné que l'application redirige l'utilisateur vers l'écran de connexion s'il tente d'accéder à l'écran des paramètres, elle doit également gérer le comportement du bouton Retour sur l'écran de connexion. Si l'application ne personnalise pas la gestion du comportement du bouton Retour, l'utilisateur est bloqué dans une boucle infinie où il essaie de revenir à l'écran des paramètres, mais est redirigé vers l'écran de connexion.

Ouvrez LoginFragment.kt.
Dans onViewCreated(), gérez les actions du bouton "Retour" en ramenant l'utilisateur à 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)
}

Relancez votre application et vérifiez que, si vous n'êtes pas connecté, les tentatives d'accès à l'écran des paramètres vous redirigent désormais vers le flux de connexion.

Vous avez bien redirigé l'utilisateur vers la page de connexion, mais vous n'avez pas géré ce qui se passe une fois qu'il s'est connecté. Les tentatives de connexion sembleront donc ne pas fonctionner. Vous corrigerez ce problème à l'étape suivante.

Jusqu'à présent, vous avez configuré votre application pour rediriger l'utilisateur vers l'écran de connexion s'il tente d'accéder à l'écran des paramètres sans être connecté.

Toutefois, une fois le processus de connexion terminé, vous êtes redirigé vers l'écran de connexion. Cela ne permet pas d'offrir une bonne expérience utilisateur et peut être source de confusion.

Pour offrir une expérience utilisateur idéale, l'application doit rediriger l'utilisateur vers l'écran des paramètres une fois qu'il s'est connecté.

Toujours dans LoginFragment.kt, n'importe où dans onViewCreated(), observez authenticationState et redirigez l'utilisateur vers SettingsFragment lorsqu'il est authentifié.

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"
       )
   }
})

Exécutez à nouveau votre application et vérifiez que, lorsque vous vous connectez, vous êtes redirigé vers la page Paramètres au lieu de la page Connexion.

Supprimer la pile "Retour" avec popBackStack() : à mesure que l'utilisateur progresse dans une application, Android enregistre les écrans qu'il consulte. Lorsque l'utilisateur appuie sur le bouton "Retour", l'application revient en arrière dans l'ordre des écrans visités.

Lorsque vous retirez un écran de la pile de retour, vous demandez à Android d'ignorer cet écran lorsque l'utilisateur appuie sur le bouton "Retour".

Dans ce cas, vous supprimez l'écran actuel de la pile "Retour" afin que, lorsque l'utilisateur appuie sur le bouton "Retour", l'application ignore cet écran et revient à l'écran que l'utilisateur a consulté avant celui-ci.

En d'autres termes, lorsque l'utilisateur appuie sur le bouton "Retour", l'application ne revient pas à l'écran de connexion, mais à l'écran que l'utilisateur a consulté avant d'accéder à l'écran de connexion.

Vous pouvez consulter l'application complète avec tout le code de solution dans ce dépôt GitHub : https://github.com/googlecodelabs/android-kotlin-login-navigation.

Dans cet atelier de programmation, vous avez découvert les bonnes pratiques pour créer une expérience utilisateur de qualité dans une application compatible avec la connexion. En observant l'état d'authentification de l'application, vous avez pu déterminer les écrans auxquels l'utilisateur peut accéder et le rediriger vers l'écran de connexion si nécessaire.

Pour en savoir plus sur les bonnes pratiques concernant la navigation dans Android, consultez les ressources suivantes :

Documentation pour les développeurs Android :

Ateliers de programmation :

Principes de base d'Android en Kotlin : Définir des chemins de navigation

Pour accéder aux autres ateliers de programmation de ce cours, consultez la page de destination des ateliers de programmation "Développement Android avancé en Kotlin".