Navigasi Kondisional Android dengan Login

Codelab ini adalah bagian dari kursus Android Lanjutan di Kotlin. Anda akan mendapatkan manfaat maksimal dari kursus ini jika menyelesaikan codelab secara berurutan, tetapi ini tidak bersifat wajib. Semua codelab kursus tercantum di halaman landing codelab Android Lanjutan di Kotlin.

Codelab ini adalah bagian dari rangkaian yang memandu Anda dalam mendukung login bagi pengguna . Sebaiknya pelajari semua codelab secara berurutan, karena Anda perlu menyelesaikan setiap tugas langkah demi langkah.

Codelab dalam seri ini adalah:

• 6.1 Login Android dengan FirebaseUI
• 6.2 Navigasi Kondisional Android dengan Login

Codelab ini dibangun berdasarkan Menerapkan Login di Android dengan FirebaseUI. Meskipun Anda dapat mendownload kode awal untuk codelab ini jika belum menyelesaikan codelab sebelumnya, sebaiknya selesaikan codelab Menerapkan Login di Android dengan FirebaseUI terlebih dahulu.

Pengantar

Jika aplikasi Anda mendukung login, kasus penggunaan yang umum adalah mencadangkan bagian aplikasi hanya untuk pengguna yang login. Misalnya, Anda mungkin ingin mencadangkan layar Setelan aplikasi Anda untuk pengguna yang login.

Untuk kasus seperti itu, Anda dapat menggunakan navigasi bersyarat untuk mengarahkan pengguna ke layar yang sesuai berdasarkan status autentikasi mereka.

Dalam codelab ini, Anda akan membangun aplikasi yang sudah ada untuk menambahkan layar setelan yang hanya dapat diakses oleh pengguna jika mereka login. Anda akan menggunakan komponen navigasi Android untuk tugas ini.

Yang harus sudah Anda ketahui

• Komponen Navigation Android dan cara penggunaannya di aplikasi Android
• Cara login diterapkan di aplikasi Android Anda dengan library FirebaseUI. Jika Anda belum memahami konsep ini, Anda harus mempelajari codelab Menerapkan Login di Android dengan FirebaseUI.

Yang akan Anda pelajari

• Cara mengarahkan pengguna ke layar yang sesuai di aplikasi Anda berdasarkan apakah mereka login atau tidak.

Yang akan Anda lakukan

• Menangani navigasi pengguna ke layar yang benar dengan tepat setelah mereka berhasil login.
• Mencegah pengguna mengakses layar Setelan jika mereka tidak login, dan mengalihkan mereka ke layar Login.

Dalam codelab sebelumnya, Anda mengerjakan aplikasi yang menampilkan fakta Android. Aplikasi Anda juga mengizinkan pengguna untuk login dan logout. Untuk codelab ini, Anda akan menambahkan layar setelan ke aplikasi yang ada. Layar setelan hanya dapat diakses oleh pengguna jika mereka login.

Jika pengguna tidak login, saat mereka mencoba mengakses layar setelan, aplikasi akan mengalihkan mereka ke layar login. Setelah alur login berhasil diselesaikan, pengguna akan dikembalikan ke layar setelan yang awalnya ingin mereka akses.

Codelab ini dibangun berdasarkan Menerapkan Login di Android dengan FirebaseUI. Meskipun Anda dapat mendownload kode awal untuk codelab ini jika belum menyelesaikan codelab sebelumnya, sebaiknya selesaikan codelab Menerapkan Login di Android dengan FirebaseUI terlebih dahulu.

Untuk mendownload aplikasi contoh, Anda dapat melakukan:

Download Zip

... atau clone repositori GitHub dari command line dengan menggunakan perintah berikut dan beralih ke cabang start repositori:

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

Penting: Kode awal berada di cabang start dari repo yang didownload.

Setelah project dimuat di Android Studio:

1. Jalankan aplikasi di emulator atau perangkat fisik untuk memastikan lingkungan Anda telah berhasil disiapkan untuk memulai pengembangan.

Jika berhasil, Anda akan melihat layar utama yang menampilkan fakta menarik tentang Android dan tombol login di sudut kiri atas.

Fitur aplikasi awal saat ini:

• Jika pengguna tidak login, mengetuk tombol Login akan memulai alur login dan memungkinkan pengguna login dengan alamat email atau Akun Google.
• Jika pengguna login, tombol akan berubah menjadi tombol Logout yang memungkinkan pengguna logout.

Dalam tugas ini, Anda akan menambahkan tombol di layar utama yang memungkinkan pengguna membuka layar setelan. Layar setelan akan memungkinkan pengguna memilih jenis fakta menarik yang ingin mereka tampilkan di layar utama. Dari layar setelan, mereka dapat memilih untuk melihat fakta tentang Android atau fakta tentang negara bagian California.

1. Buka fragment_main.xml.
2. Di fragment_main.xml,, tambahkan tombol Setelan yang berada di dalam ConstraintLayout, dan posisikan di pojok kanan atas layar.

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. Buka nav_graph.xml.
4. Tambahkan tindakan di dalam mainFragment. id tindakan adalah action_mainFragment_to_customizeFragment, dan tujuannya adalah 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. Buka MainFragment.kt.
6. Di onViewCreated(), tetapkan onClickListener untuk settings_btn, sehingga mengetuk tombol akan mengarahkan pengguna ke customizeFragment.

MainFragment.kt

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

7. Jika Anda melihat error yang belum terselesaikan, kompilasi ulang aplikasi dari menu Build untuk membuat dan menggunakan tindakan navigasi baru yang Anda buat.
8. Luncurkan kembali aplikasi. Sekarang akan ada tombol Setelan yang berfungsi di pojok kanan atas.
9. Klik tombol yang akan mengarahkan Anda ke layar Setelan. Layar Setelan hanya memiliki satu opsi, untuk memungkinkan pengguna memilih jenis fakta menarik yang ingin mereka lihat ditampilkan di layar utama.
10. Klik tombol kembali perangkat Android untuk kembali ke layar utama.

Dalam tugas ini, Anda akan menambahkan kode untuk mengarahkan pengguna ke layar login jika mereka mencoba mengakses layar setelan saat mereka tidak login.

1. Buka SettingsFragment.kt.
2. Di onViewCreated(), amati authenticationState dan alihkan pengguna ke LoginFragment jika mereka belum diautentikasi.

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

Karena aplikasi mengarahkan pengguna ke layar login jika mereka mencoba mengakses layar setelan, aplikasi juga perlu menangani perilaku tombol kembali di layar login. Jika aplikasi tidak menyesuaikan penanganan perilaku tombol kembali, pengguna akan terjebak dalam loop tak terbatas saat mencoba kembali ke layar setelan, tetapi kemudian dialihkan ke layar login lagi.

3. Buka LoginFragment.kt.
4. Di onViewCreated(), tangani tindakan tombol kembali dengan membawa pengguna kembali ke 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. Luncurkan kembali aplikasi Anda dan konfirmasi bahwa jika Anda tidak login, upaya untuk mengakses layar setelan kini akan mengalihkan Anda ke alur login.

Meskipun Anda telah berhasil mengalihkan pengguna untuk login, Anda belum menangani apa yang terjadi setelah pengguna berhasil login, sehingga upaya untuk login akan tampak seolah-olah tidak berfungsi. Anda akan memperbaikinya di langkah berikutnya.

Sejauh ini, Anda telah berhasil menyiapkan aplikasi untuk mengalihkan pengguna ke layar login jika mereka mencoba mengakses layar setelan tanpa login.

Namun, setelah Anda menyelesaikan alur login, Anda akan kembali ke layar login. Hal ini bukan pengalaman pengguna yang baik dan dapat membingungkan.

Untuk memberikan pengalaman pengguna yang ideal, aplikasi harus mengarahkan pengguna kembali ke layar setelan setelah pengguna berhasil login.

1. Masih di LoginFragment.kt, di mana pun di onViewCreated(), amati authenticationState dan arahkan pengguna kembali ke SettingsFragment saat mereka berhasil diautentikasi.

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. Jalankan aplikasi Anda lagi dan konfirmasi bahwa sekarang saat Anda berhasil login, Anda akan diarahkan ke halaman Setelan, bukan halaman Login.

Menghapus data sebelumnya dengan popBackStack(): Saat pengguna berinteraksi dengan aplikasi, Android melacak layar yang mereka kunjungi. Saat pengguna menekan tombol kembali, aplikasi akan kembali ke layar yang dikunjungi secara berurutan.

Saat Anda mengeluarkan layar dari backstack, pada dasarnya Anda memberi tahu Android untuk melewati layar tersebut saat pengguna menekan tombol kembali.

Dalam hal ini, Anda menghapus layar saat ini dari tumpukan belakang sehingga saat pengguna menekan tombol kembali, aplikasi akan melewati layar ini dan kembali ke layar yang dikunjungi pengguna sebelum mengunjungi layar ini.

Dengan kata lain, saat pengguna menekan tombol kembali, aplikasi tidak kembali ke layar login, melainkan membuka layar yang dikunjungi pengguna sebelum membuka layar login.

Anda dapat melihat aplikasi lengkap dengan semua kode solusi di repo GitHub ini https://github.com/googlecodelabs/android-kotlin-login-navigation.

Dalam codelab ini, Anda telah mempelajari praktik terbaik tentang cara menciptakan pengalaman pengguna yang baik dalam aplikasi yang mendukung login. Dengan mengamati status autentikasi aplikasi, Anda dapat menentukan layar mana yang dapat diakses pengguna dan mengarahkannya ke layar login jika diperlukan.

Untuk mengetahui informasi selengkapnya tentang praktik terbaik Navigasi di Android, lihat referensi berikut:

Dokumentasi developer Android:

• Navigasi di Android
• Navigasi Bersyarat
• Tindakan Global navigasi

Codelab:

• Dasar-Dasar Android Kotlin: Menentukan jalur navigasi

Untuk mengetahui link ke codelab lain dalam kursus ini, lihat halaman landing codelab Android Lanjutan di Kotlin.