Nawigacja warunkowa na Androidzie z logowaniem

Te warsztaty są częścią kursu Zaawansowany Android w Kotlinie. Najwięcej korzyści z tego kursu uzyskasz, jeśli przejdziesz wszystkie ćwiczenia w kolejności, ale nie jest to obowiązkowe. Wszystkie ćwiczenia z tego kursu znajdziesz na stronie docelowej ćwiczeń z zaawansowanego Androida w Kotlinie.

Te warsztaty są częścią serii, która pomaga w obsłudze logowania użytkowników . Zalecamy wykonywanie wszystkich ćwiczeń w kolejności, ponieważ zadania są w nich przedstawiane krok po kroku.

W tej serii znajdziesz te codelaby:

• 6.1. Logowanie na Androidzie za pomocą FirebaseUI
• 6.2 Nawigacja warunkowa na Androidzie z logowaniem

Te ćwiczenia z programowania są kontynuacją wdrażania logowania na Androidzie za pomocą FirebaseUI. Jeśli nie masz jeszcze za sobą poprzednich ćwiczeń, możesz pobrać kod początkowy. Warto jednak najpierw wykonać ćwiczenia Wdrażanie logowania na Androidzie za pomocą FirebaseUI.

Wprowadzenie

Jeśli Twoja aplikacja obsługuje logowanie, często zdarza się, że niektóre jej części są dostępne tylko dla zalogowanych użytkowników. Możesz na przykład chcieć zarezerwować ekran Ustawienia w aplikacji dla zalogowanych użytkowników.

W takich przypadkach możesz użyć nawigacji warunkowej, aby przekierowywać użytkowników na odpowiedni ekran w zależności od ich stanu uwierzytelniania.

W tym laboratorium kodowania rozbudujesz istniejącą aplikację, dodając do niej ekran ustawień, który będzie dostępny tylko dla zalogowanych użytkowników. Do tego zadania użyjesz komponentów nawigacji Androida.

Co warto wiedzieć

• Komponent nawigacji Androida i sposób jego używania w aplikacjach na Androida
• Jak logowanie jest zaimplementowane w aplikacji na Androida za pomocą biblioteki FirebaseUI. Jeśli nie znasz tego pojęcia, zapoznaj się z samouczkiem Implementowanie logowania na Androidzie za pomocą FirebaseUI.

Czego się nauczysz

• Jak kierować użytkowników do odpowiednich ekranów aplikacji w zależności od tego, czy są zalogowani.

Jakie zadania wykonasz

• Prawidłowe przekierowywanie użytkowników na odpowiedni ekran po zalogowaniu się.
• Uniemożliwia użytkownikom dostęp do ekranu Ustawienia, jeśli nie są zalogowani, i zamiast tego przekierowuje ich na ekran Logowanie.

W poprzednim laboratorium kodowania pracowaliśmy nad aplikacją, która wyświetlała ciekawostki o Androidzie. Aplikacja umożliwiała też użytkownikom logowanie się i wylogowywanie. W tym laboratorium dodasz do istniejącej aplikacji ekran ustawień. Będzie on dostępny dla użytkownika tylko wtedy, gdy jest on zalogowany.

Jeśli użytkownik nie jest zalogowany, podczas próby uzyskania dostępu do ekranu ustawień aplikacja przekieruje go na ekran logowania. Po pomyślnym zakończeniu procesu logowania użytkownik wróci do ekranu ustawień, do którego pierwotnie próbował uzyskać dostęp.

To ćwiczenie z programowania jest kontynuacją ćwiczenia Wdrażanie logowania na Androidzie za pomocą FirebaseUI. Jeśli nie masz jeszcze za sobą poprzednich ćwiczeń, możesz pobrać kod początkowy. Warto jednak najpierw wykonać ćwiczenia Wdrażanie logowania na Androidzie za pomocą FirebaseUI.

Pobierz przykładową aplikację. Możesz to zrobić na 2 sposoby:

Pobierz plik ZIP

… lub sklonuj repozytorium GitHub z wiersza poleceń, używając tego polecenia, i przejdź do gałęzi start repozytorium:

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

Ważne: kod początkowy znajduje się w gałęzi start pobranego repozytorium.

Gdy projekt zostanie wczytany w Android Studio:

1. Uruchom aplikację w emulatorze lub na urządzeniu fizycznym, aby sprawdzić, czy środowisko zostało prawidłowo skonfigurowane do rozpoczęcia programowania.

Jeśli się uda, powinien pojawić się ekran główny z ciekawostką o Androidzie i przyciskiem logowania w lewym górnym rogu.

Obecne funkcje aplikacji startowej:

• Jeśli użytkownik nie jest zalogowany, kliknięcie przycisku Zaloguj się rozpoczyna proces logowania i umożliwia zalogowanie się za pomocą adresu e-mail lub konta Google.
• Jeśli użytkownik jest zalogowany, przycisk zmienia się w przycisk Wyloguj się, który umożliwia wylogowanie się.

W tym zadaniu dodasz na ekranie głównym przycisk, który umożliwi użytkownikowi przejście do ekranu ustawień. Na ekranie ustawień użytkownik może wybrać, jakie ciekawostki mają być wyświetlane na ekranie głównym. Na ekranie ustawień mogą wybrać, czy chcą zobaczyć fakty dotyczące Androida czy stanu Kalifornia.

1. Otwórz pokój fragment_main.xml.
2. W fragment_main.xml, dodaj przycisk Ustawienia zagnieżdżony w ConstraintLayout i umieść go w prawym górnym rogu ekranu.

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. Otwórz pokój nav_graph.xml.
4. Dodaj działanie w mainFragment. id działania to action_mainFragment_to_customizeFragment, a miejsce docelowe to 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. Otwórz pokój MainFragment.kt.
6. W onViewCreated() ustaw onClickListener dla settings_btn, aby po kliknięciu przycisku użytkownik został przekierowany do customizeFragment.

MainFragment.kt

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

7. Jeśli widzisz nierozwiązane błędy, ponownie skompiluj aplikację w menu Build, aby wygenerować i użyć utworzonych przez siebie nowych działań nawigacyjnych.
8. Uruchom ponownie aplikację. W prawym górnym rogu powinien teraz znajdować się działający przycisk Ustawienia.
9. Kliknij przycisk, który powinien przenieść Cię do ekranu Ustawienia. Na ekranie Ustawienia jest tylko jedna opcja, która pozwala użytkownikowi wybrać rodzaj ciekawostki, jaką chce wyświetlać na ekranie głównym.
10. Aby wrócić do ekranu głównego, kliknij przycisk Wstecz na urządzeniu z Androidem.

W tym zadaniu dodasz kod, który przekieruje użytkownika na ekran logowania, jeśli spróbuje on otworzyć ekran ustawień bez zalogowania się.

1. Otwórz pokój SettingsFragment.kt.
2. W przypadku onViewCreated() obserwuj authenticationState i przekieruj użytkownika do LoginFragment, jeśli nie jest uwierzytelniony.

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

Gdy użytkownik próbuje otworzyć ekran ustawień, aplikacja przekierowuje go na ekran logowania, dlatego musi też obsługiwać działanie przycisku Wstecz na ekranie logowania. Jeśli aplikacja nie dostosuje obsługi przycisku Wstecz, użytkownik utknie w nieskończonej pętli prób powrotu do ekranu ustawień, ale będzie przekierowywany z powrotem do ekranu logowania.

3. Otwórz pokój LoginFragment.kt.
4. W onViewCreated() obsłuż działania przycisku Wstecz, przenosząc użytkownika z powrotem do 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. Uruchom ponownie aplikację i sprawdź, czy w przypadku braku zalogowania próby uzyskania dostępu do ekranu ustawień będą teraz przekierowywać Cię do procesu logowania.

Udało Ci się przekierować użytkownika do logowania, ale nie udało Ci się określić, co ma się stać po zalogowaniu. Dlatego próby logowania będą wyglądać tak, jakby nie działały. Naprawisz to w następnym kroku.

Do tej pory udało Ci się skonfigurować aplikację tak, aby przekierowywała użytkownika na ekran logowania, jeśli spróbuje on uzyskać dostęp do ekranu ustawień bez zalogowania się.

Jednak po przejściu procesu logowania wracasz ponownie na ekran logowania. Nie jest to wygodne dla użytkowników i może być mylące.

Aby zapewnić użytkownikom jak najlepsze wrażenia, po zalogowaniu aplikacja powinna przekierować ich z powrotem na ekran ustawień.

1. W LoginFragment.kt, w dowolnym miejscu w onViewCreated(), obserwuj authenticationState i po udanym uwierzytelnieniu przekieruj użytkownika z powrotem do 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"
       )
   }
})

2. Uruchom ponownie aplikację i sprawdź, czy po zalogowaniu się wyświetla się strona Ustawienia, a nie strona Logowanie.

Usuwanie elementów z listy wstecznej za pomocą metody popBackStack(): gdy użytkownik korzysta z aplikacji, Android śledzi odwiedzane przez niego ekrany. Gdy użytkownik naciśnie przycisk Wstecz, aplikacja będzie kolejno wracać do odwiedzonych ekranów.

Gdy usuniesz ekran z listy wstecznej, w zasadzie mówisz Androidowi, aby pominął ten ekran, gdy użytkownik naciśnie przycisk Wstecz.

W tym przypadku usuwasz bieżący ekran ze stosu wstecznego, aby po naciśnięciu przycisku Wstecz aplikacja pominęła ten ekran i wróciła do ekranu, który użytkownik odwiedził przed nim.

Innymi słowy, gdy użytkownik naciśnie przycisk Wstecz, aplikacja nie wróci do ekranu logowania, ale przejdzie do ekranu, który użytkownik odwiedził przed ekranem logowania.

Pełną aplikację z kodem rozwiązania znajdziesz w tym repozytorium GitHub: https://github.com/googlecodelabs/android-kotlin-login-navigation.

Z tych ćwiczeń z programowania dowiesz się, jak tworzyć aplikacje z funkcją logowania, które zapewniają użytkownikom dobre wrażenia. Obserwując stan uwierzytelniania aplikacji, możesz określić, do których ekranów użytkownik ma dostęp, i w razie potrzeby przekierować go na ekran logowania.

Więcej informacji o sprawdzonych metodach dotyczących nawigacji na Androidzie znajdziesz w tych materiałach:

Dokumentacja dla deweloperów aplikacji na Androida:

• Nawigacja na Androidzie
• Nawigacja warunkowa
• Działania globalne nawigacji

Codelabs:

• Podstawy Androida w Kotlinie: definiowanie ścieżek nawigacji

Linki do innych ćwiczeń z tego kursu znajdziesz na stronie docelowej ćwiczeń z zaawansowanego Androida w Kotlinie.