Questa pagina è stata tradotta dall'API Cloud Translation.

Navigazione condizionale Android con accesso

Questo codelab fa parte del corso Advanced Android in Kotlin. Otterrai il massimo valore da questo corso se lavori in sequenza nei codelab, ma non è obbligatorio. Tutti i codelab del corso sono elencati nella pagina di destinazione avanzata per i codelab di Android in Kotlin.

Questo codelab si basa sulla Implementare l'accesso su Android con FirebaseUI. Puoi scaricare il codice di avvio di questo codelab se non l'hai mai fatto, ma prima potrebbe essere utile completare il codelab sull'implementazione dell'accesso su Android con FirebaseUI.

Introduzione

Se la tua app supporta l'accesso, è un caso d'uso comune per prenotare parti dell'app solo per gli utenti che hanno eseguito l'accesso. Ad esempio, potresti voler prenotare la schermata Impostazioni della tua app per gli 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, utilizzerai un'app esistente per aggiungere una schermata di impostazioni accessibile solo agli utenti che eseguono l'accesso. Utilizzerai i componenti di navigazione di Android per questa attività.

Informazioni importanti

Componente Navigazione Android e relativa modalità di utilizzo nelle app Android
Come viene implementato l'accesso nella tua app Android con la libreria FirebaseUI. Se non hai familiarità con questo concetto, consulta il codelab sull'implementazione dell'accesso su Android con FirebaseUI.

Obiettivi didattici

Come indirizzare gli utenti alle schermate appropriate dell'app a seconda che abbiano eseguito o meno l'accesso.

In questo lab proverai a:

Dopo aver eseguito correttamente l'accesso, gestisci correttamente la navigazione degli utenti sulla schermata corretta.
Impedisci agli utenti di accedere alla schermata Impostazioni se non hanno eseguito l'accesso e reindirizzali alla schermata Accesso.

Nel codelab precedente hai lavorato su un'app che mostrava informazioni su Android. La tua app ha anche consentito agli utenti di accedere e uscire. Per questo codelab, aggiungerai una schermata delle impostazioni all'app esistente. La schermata delle impostazioni sarà accessibile solo all'utente 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 completato il flusso di accesso, l'utente verrà reindirizzato alla schermata delle impostazioni a cui aveva originariamente eseguito l'accesso.

Questo codelab si basa sul passaggio Implementare l'accesso su Android con FirebaseUI. Puoi scaricare il codice di avvio di questo codelab se non l'hai mai fatto, ma prima potrebbe essere utile completare il codelab sull'implementazione dell'accesso su Android con FirebaseUI.

Per scaricare l'app di esempio, puoi:

Scarica Zip

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

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

Una volta che il progetto è stato caricato in Android Studio:

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

In caso di esito positivo, dovresti visualizzare la schermata Home con una curiosità 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 viene avviato il flusso di accesso e l'utente può accedere con un indirizzo email o con un Account Google.
Se l'utente ha eseguito l'accesso, il pulsante diventa Logout che consente all'utente di uscire.

In questa attività dovrai aggiungere un pulsante nella schermata Home per consentire all'utente di accedere alla schermata delle impostazioni. La schermata delle impostazioni consente all'utente di scegliere quale tipo di informazioni divertenti visualizzare nella schermata Home. Dalla schermata delle impostazioni, possono scegliere di visualizzare informazioni su Android o sulla California.

Apri fragment_main.xml.
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"/>

Apri nav_graph.xml.
Aggiungi un'azione all'interno di mainFragment. 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>

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

Fragment.kt principale

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

In caso di errori non risolti, ricompila l'app dal menu Build per generare e utilizzare le nuove azioni di navigazione che hai creato.
Riavvia l'app. Ora dovrebbe essere presente un pulsante Impostazioni funzionante nell'angolo in alto a destra.
Fai clic sul pulsante che dovrebbe reindirizzarti alla schermata Impostazioni. La schermata Impostazioni ha una sola opzione per consentire all'utente di scegliere il tipo di divertimento divertente che vuole vedere nella schermata Home.
Fai clic sul pulsante Indietro del dispositivo Android per tornare alla schermata Home.

In questa attività, dovrai aggiungere codice per indirizzare l'utente alla schermata di accesso se tenta di accedere alla schermata delle impostazioni quando non è connesso.

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

ImpostazioniFragment.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, l'app deve gestire anche il comportamento del pulsante Indietro nella schermata di accesso. Se l'app non personalizza il funzionamento del comportamento del pulsante Indietro, l'utente rimarrà bloccato in una serie infinita di tentativi prima di tornare alla schermata delle impostazioni, ma poi verrà reindirizzato di nuovo alla schermata di accesso.

Apri LoginFragment.kt.
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)
}

Riavvia l'app e conferma che, se non hai eseguito l'accesso, i tentativi di accesso alla schermata delle impostazioni ti reindirizzeranno al flusso di accesso.

Anche se hai reindirizzato correttamente l'utente, non hai gestito nulla di ciò che accade dopo che l'utente ha eseguito l'accesso, pertanto i tentativi di accesso verranno visualizzati come se non funzionasse. Lo risolverai nel passaggio successivo.

Finora hai configurato l'app in modo che l'utente venga reindirizzato alla schermata di accesso se tenta di accedere alla schermata delle impostazioni senza aver effettuato l'accesso.

Tuttavia, dopo aver eseguito la procedura di accesso, tornerai di nuovo alla schermata di accesso. Non si tratta di una buona esperienza utente e può confondere l'utente.

Per offrire un'esperienza utente ottimale, l'app deve riportare l'utente alla schermata delle impostazioni dopo che l'utente ha eseguito l'accesso.

Sempre nel LoginFragment.kt, ovunque in onViewCreated(), osserva il authenticationState e torna all'utente una volta completata l'autenticazione con SettingsFragment.

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

Esegui di nuovo l'app e verifica che ora, quando esegui correttamente l'accesso, venga visualizzata la pagina Impostazioni anziché la pagina Accesso.

Con lo stack in pop-up con popBackStack(): man mano che l'utente avanza attraverso 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 apri una schermata fuori dallo stack, stai dicendo ad Android di saltare questa schermata quando l'utente preme il pulsante Indietro.

In questo caso, stai rimuovendo la schermata corrente dalla pila posteriore in modo che, quando l'utente preme il pulsante Indietro, l'app salti questa schermata e torni alla schermata visitata dall'utente prima di visitare questa.

In altre parole, quando l'utente preme il pulsante Indietro, l'app non torna alla schermata di accesso, bensì alla schermata visitata dall'utente prima di accedere alla schermata di accesso.

Puoi consultare l'app completa con tutto il codice di 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 ulteriori informazioni sulle best practice per la navigazione in Android, consulta le seguenti risorse:

Documentazione per gli sviluppatori Android:

Codelab:

Concetti fondamentali di Android Kotlin: definizione dei percorsi di navigazione

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