Navigazione condizionale di Android con accesso

Questo codelab fa parte del corso Advanced Android in Kotlin. Per ottenere il massimo valore da questo corso, ti consigliamo di seguire i codelab in sequenza, ma non è obbligatorio. Tutti i codelab del corso sono elencati nella pagina di destinazione dei codelab Advanced Android in Kotlin.

Questo codelab fa parte di una serie che ti guida nell'implementazione dell'accesso per gli utenti . Ti consigliamo di svolgere tutti i codelab in ordine, perché le attività vengono eseguite passo dopo passo.

I codelab di questa serie sono:

• 6.1 Accesso Android con FirebaseUI
• 6.2 Navigazione condizionale di Android con accesso

Questo codelab si basa su Implementazione dell'accesso su Android con FirebaseUI. Anche se puoi scaricare il codice iniziale per questo codelab se non hai svolto il codelab precedente, ti consigliamo di completare prima il codelab Implementare l'accesso su Android con FirebaseUI.

Introduzione

Se la tua app supporta l'accesso, un caso d'uso comune è riservare parti dell'app solo agli utenti che hanno eseguito l'accesso. Ad esempio, potresti voler riservare la schermata Impostazioni della tua app agli utenti che hanno eseguito l'accesso.

In questi casi, puoi utilizzare la navigazione condizionale per indirizzare gli utenti alla schermata appropriata in base al loro stato di autenticazione.

In questo codelab, creerai un'app esistente per aggiungere una schermata delle impostazioni accessibile agli utenti solo se hanno eseguito l'accesso. Per questa attività utilizzerai i componenti di navigazione di Android.

Cosa devi già sapere

• Il componente di navigazione di Android e il modo in cui viene utilizzato nelle app per Android
• Come viene implementato l'accesso nella tua app per Android con la libreria FirebaseUI. Se non hai familiarità con questo concetto, ti consigliamo di seguire il codelab Implementazione dell'accesso su Android con FirebaseUI.

Obiettivi didattici

• Come indirizzare gli utenti alle schermate appropriate della tua app in base all'accesso o meno.

In questo lab proverai a:

• Gestire correttamente la navigazione degli utenti alla schermata corretta dopo l'accesso.
• Impedisci agli utenti di accedere alla schermata Impostazioni se non hanno eseguito l'accesso e reindirizzali invece alla schermata Accesso.

Nel codelab precedente hai lavorato a un'app che mostrava curiosità su Android. La tua app consentiva anche agli utenti di accedere e uscire. Per questo codelab, aggiungerai una schermata delle impostazioni all'app esistente. La schermata delle impostazioni sarà accessibile all'utente solo se ha eseguito l'accesso.

Se l'utente non ha eseguito l'accesso, quando tenta di accedere alla schermata delle impostazioni, l'app lo reindirizza alla schermata di accesso. Una volta completata correttamente la procedura di accesso, l'utente tornerà alla schermata delle impostazioni a cui aveva inizialmente tentato di accedere.

Questo codelab si basa su Implementazione dell'accesso su Android con FirebaseUI. Anche se puoi scaricare il codice iniziale per questo codelab se non hai svolto il codelab precedente, ti consigliamo di completare prima il codelab Implementare l'accesso su Android con FirebaseUI.

Scarica l'app di esempio:

Scarica zip

… o clona il repository GitHub dalla riga di comando utilizzando il seguente comando e passa al branch start del repository:

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

Importante: il codice iniziale si trova nel ramo start del repository scaricato.

Una volta caricato il progetto in Android Studio:

1. Esegui l'app su un emulatore o un dispositivo fisico per assicurarti che l'ambiente sia stato configurato correttamente per iniziare lo sviluppo.

Se l'operazione ha esito positivo, dovresti vedere la schermata Home con una curiosità divertente su Android e un pulsante di accesso nell'angolo in alto a sinistra.

Funzionalità attuali dell'app iniziale:

• Se l'utente non ha eseguito l'accesso, toccando il pulsante Accedi si avvia il flusso di accesso e l'utente può accedere con un indirizzo email o un Account Google.
• Se l'utente ha eseguito l'accesso, il pulsante diventa Esci e consente all'utente di uscire.

In questa attività, aggiungerai un pulsante nella schermata Home che consente all'utente di accedere alla schermata delle impostazioni. La schermata delle impostazioni consente all'utente di scegliere il tipo di curiosità da visualizzare nella schermata Home. Nella schermata delle impostazioni, possono scegliere di visualizzare fatti su Android o sullo stato della California.

1. Apri fragment_main.xml.
2. In fragment_main.xml, aggiungi un pulsante Impostazioni nidificato in ConstraintLayout e posizionalo nell'angolo in alto a destra dello schermo.

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

3. Apri nav_graph.xml.
4. Aggiungi un'azione all'interno di mainFragment. Il id dell'azione è action_mainFragment_to_customizeFragment e la destinazione è 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>

5. Apri MainFragment.kt.
6. In onViewCreated(), imposta un onClickListener per settings_btn, in modo che toccando il pulsante l'utente venga indirizzato a customizeFragment.

MainFragment.kt

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

7. Se vedi errori non risolti, ricompila l'app dal menu Build per generare e utilizzare le nuove azioni di navigazione che hai creato.
8. Riavvia l'app. Ora dovrebbe essere presente un pulsante Impostazioni funzionante nell'angolo in alto a destra.
9. Fai clic sul pulsante che dovrebbe portarti alla schermata Impostazioni. La schermata Impostazioni ha una sola opzione, che consente all'utente di scegliere il tipo di curiosità da visualizzare nella schermata Home.
10. Fai clic sul pulsante Indietro del dispositivo Android per tornare alla schermata Home.

In questa attività, aggiungerai il codice per indirizzare l'utente alla schermata di accesso se tenta di accedere alla schermata delle impostazioni senza aver eseguito l'accesso.

1. Apri SettingsFragment.kt.
2. In onViewCreated(), osserva authenticationState e reindirizza l'utente a LoginFragment se non è autenticato.

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

Poiché l'app porta l'utente alla schermata di accesso se tenta di accedere alla schermata delle impostazioni, deve anche gestire il comportamento del pulsante Indietro nella schermata di accesso. Se l'app non personalizza la gestione del comportamento del pulsante Indietro, l'utente rimarrà bloccato in un ciclo infinito di tentativi di tornare alla schermata delle impostazioni, ma verrà reindirizzato di nuovo alla schermata di accesso.

3. Apri LoginFragment.kt.
4. In onViewCreated(), gestisci le azioni del pulsante Indietro riportando l'utente 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)
}

5. Riavvia l'app e verifica che, se non hai eseguito l'accesso, i tentativi di accedere alla schermata delle impostazioni ti reindirizzino ora al flusso di accesso.

Anche se hai reindirizzato correttamente l'utente alla pagina di accesso, non hai gestito cosa succede dopo che l'utente ha eseguito l'accesso, quindi i tentativi di accesso sembreranno non funzionare. Lo correggerai nel passaggio successivo.

Finora, hai configurato correttamente l'app per reindirizzare l'utente alla schermata di accesso se tenta di accedere alla schermata delle impostazioni senza aver eseguito l'accesso.

Tuttavia, dopo aver completato il flusso di accesso, tornerai alla schermata di accesso. Questa non è una buona esperienza utente e può creare confusione.

Per offrire un'esperienza utente ideale, l'app deve riportare l'utente alla schermata delle impostazioni dopo l'accesso.

1. Ancora in LoginFragment.kt, in qualsiasi punto di onViewCreated(), osserva authenticationState e riporta l'utente a SettingsFragment quando l'autenticazione è stata eseguita correttamente.

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

2. Esegui di nuovo l'app e verifica che ora, quando accedi correttamente, visualizzi la pagina Impostazioni anziché la pagina Accesso.

Rimozione dello stack precedente con popBackStack(): man mano che l'utente avanza in un'app, Android tiene traccia delle schermate che visita. Quando l'utente preme il pulsante Indietro, l'app torna indietro attraverso le schermate visitate in ordine.

Quando estrai una schermata dal backstack, in pratica stai dicendo ad Android di saltarla quando l'utente preme il pulsante Indietro.

In questo caso, rimuovi la schermata corrente dallo stack precedente in modo che, quando l'utente preme il pulsante Indietro, l'app salti questa schermata e torni a quella visitata in precedenza.

In altre parole, quando l'utente preme il pulsante Indietro, l'app non torna alla schermata di accesso, ma alla schermata visitata prima di arrivare alla schermata di accesso.

Puoi consultare l'app completa con tutto il codice della soluzione in questo repository GitHub https://github.com/googlecodelabs/android-kotlin-login-navigation.

In questo codelab hai imparato le best practice per creare una buona esperienza utente in un'app che supporta l'accesso. Osservando lo stato di autenticazione dell'app, hai potuto determinare a quali schermate può accedere l'utente e reindirizzarlo alla schermata di accesso quando necessario.

Per saperne di più sulle best practice per la navigazione in Android, consulta le seguenti risorse:

Documentazione per sviluppatori Android:

• Navigazione in Android
• Navigazione condizionale
• Azioni globali di navigazione

Codelab:

• Android Kotlin Fundamentals: Define navigation paths

Per i link ad altri codelab di questo corso, consulta la pagina di destinazione dei codelab Advanced Android in Kotlin.