Navigasi Kondisional Android dengan Login

Codelab ini adalah bagian dari kursus Lanjutan Android di Kotlin. Anda akan mendapatkan manfaat maksimal dari kursus ini jika Anda mengerjakan codelab secara berurutan, tetapi ini tidak 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 Anda melakukan semua codelab secara berurutan, karena codelab ini menangani tugas secara bertahap.

Codelab dalam seri ini adalah:

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

Codelab ini dibuat berdasarkan Mengimplementasikan Login di Android dengan FirebaseUI. Meskipun Anda dapat mendownload kode awal untuk codelab ini jika belum menyelesaikan codelab sebelumnya, akan sangat bermanfaat jika Anda menyelesaikan codelab Mengimplementasikan Login di Android dengan FirebaseUI terlebih dahulu.

Pengantar

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

Untuk kasus tersebut, Anda dapat menggunakan navigasi bersyarat untuk mengarahkan pengguna ke layar yang sesuai berdasarkan status autentikasinya.

Dalam codelab ini, Anda akan membuat aplikasi yang 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 Navigasi Android dan cara penggunaannya di aplikasi Android
• Cara login diterapkan di aplikasi Android Anda dengan library FirebaseUI. Jika tidak terbiasa dengan konsep ini, Anda harus membaca codelab Mengimplementasikan Login di Android dengan FirebaseUI.

Yang akan Anda pelajari

• Cara menavigasi pengguna ke layar aplikasi yang sesuai berdasarkan apakah mereka masuk atau tidak.

Yang akan Anda lakukan

• Tangani navigasi pengguna dengan benar ke layar yang benar setelah mereka berhasil login.
• Cegah pengguna mengakses layar Setelan jika mereka tidak login, lalu alihkan mereka ke layar Login.

Dalam codelab sebelumnya, Anda telah mengerjakan aplikasi yang menampilkan fakta Android. Aplikasi Anda juga memungkinkan pengguna untuk login dan logout. Untuk codelab ini, Anda akan menambahkan layar setelan ke aplikasi yang sudah 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 diarahkan kembali ke layar setelan yang sebelumnya ingin mereka akses.

Codelab ini dibuat berdasarkan Mengimplementasikan Login di Android dengan FirebaseUI. Meskipun Anda dapat mendownload kode awal untuk codelab ini jika belum menyelesaikan codelab sebelumnya, akan sangat bermanfaat jika Anda menyelesaikan codelab Mengimplementasikan Login di Android dengan FirebaseUI terlebih dahulu.

Download aplikasi contoh, Anda dapat:

Download Zip

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

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

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

Setelah Anda memuat project di Android Studio:

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

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

Fitur saat ini dari aplikasi awal:

• Jika pengguna tidak login, mengetuk tombol Login akan memulai alur login dan memungkinkan pengguna untuk 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 untuk membuka layar setelan. Layar setelan akan memungkinkan pengguna memilih jenis fakta menarik yang ingin ditampilkan 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 Settings yang bertingkat di ConstraintLayout, dan posisikan di sudut 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 untuk 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(), setel 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 ulang aplikasi. Seharusnya sekarang ada tombol Setelan fungsional 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 pada 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 tidak 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 membawa pengguna ke layar login jika mereka mencoba mengakses layar setelan, aplikasi juga harus menangani perilaku tombol kembali di layar login. Jika aplikasi tidak menyesuaikan penanganan perilaku tombol kembali, pengguna akan terjebak dalam pengulangan terus-menerus 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 ulang aplikasi Anda dan konfirmasikan bahwa jika Anda tidak login, upaya untuk mengakses layar setelan sekarang akan mengalihkan Anda ke alur login.

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

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

Namun, setelah melalui alur login, Anda akan diarahkan kembali ke layar login. Ini bukanlah 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 saja 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 konfirmasikan bahwa setelah berhasil login, Anda akan diarahkan ke halaman Settings, bukan halaman Login.

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

Saat memunculkan layar dari data sebelumnya, pada dasarnya Anda meminta Android untuk melewati layar tersebut saat pengguna menekan tombol kembali.

Dalam hal ini, Anda menghapus layar saat ini dari data sebelumnya 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 akan kembali ke layar login, melainkan membuka layar yang dikunjungi pengguna sebelum masuk ke layar login.

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

Dalam codelab ini, Anda telah mempelajari praktik terbaik tentang cara membuat pengalaman pengguna yang baik di aplikasi yang mendukung login. Dengan mengamati status autentikasi aplikasi, Anda dapat menentukan layar mana yang dapat diakses oleh pengguna dan mengalihkan mereka ke layar login saat diperlukan.

Untuk mengetahui praktik terbaik selengkapnya tentang 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 link ke codelab lainnya dalam kursus ini, lihat halaman landing codelab Android Lanjutan di Kotlin.