Trang này được dịch bởi Cloud Translation API.

Điều hướng có điều kiện trên Android khi đăng nhập

Lớp học lập trình này nằm trong khoá học Kotlin nâng cao cho Android. Bạn sẽ nhận được nhiều giá trị nhất qua khoá học này nếu thực hiện các lớp học lập trình theo trình tự, nhưng đó không phải là yêu cầu bắt buộc. Tất cả các lớp học lập trình của khoá học đều được liệt kê trên trang đích của lớp học lập trình Kiến thức nâng cao về cách tạo ứng dụng Android bằng Kotlin.

Lớp học lập trình này được xây dựng dựa trên lớp học lập trình Triển khai tính năng đăng nhập trên Android bằng FirebaseUI. Mặc dù có thể tải mã khởi đầu cho lớp học lập trình này xuống nếu chưa hoàn thành lớp học lập trình trước đó, nhưng bạn nên hoàn thành lớp học lập trình Triển khai tính năng đăng nhập trên Android bằng FirebaseUI trước.

Giới thiệu

Nếu ứng dụng của bạn hỗ trợ đăng nhập, thì trường hợp sử dụng phổ biến là chỉ dành riêng một số phần của ứng dụng cho người dùng đã đăng nhập. Ví dụ: bạn có thể muốn dành riêng màn hình Cài đặt của ứng dụng cho người dùng đã đăng nhập.

Trong những trường hợp như vậy, bạn có thể dùng thao tác điều hướng có điều kiện để đưa người dùng đến màn hình phù hợp dựa trên trạng thái xác thực của họ.

Trong lớp học lập trình này, bạn sẽ tạo một màn hình cài đặt dựa trên một ứng dụng hiện có. Màn hình này chỉ có thể truy cập được nếu người dùng đã đăng nhập. Bạn sẽ sử dụng các thành phần điều hướng của Android cho nhiệm vụ này.

Kiến thức bạn cần có

Thành phần điều hướng của Android và cách sử dụng thành phần này trong các ứng dụng Android
Cách triển khai tính năng đăng nhập trong ứng dụng Android bằng thư viện FirebaseUI. Nếu chưa quen với khái niệm này, bạn nên xem lớp học lập trình Triển khai tính năng đăng nhập trên Android bằng FirebaseUI.

Kiến thức bạn sẽ học được

Cách chuyển người dùng đến màn hình thích hợp của ứng dụng dựa trên việc họ đã đăng nhập hay chưa.

Bạn sẽ thực hiện

Xử lý đúng cách việc chuyển hướng người dùng đến màn hình chính xác sau khi họ đăng nhập thành công.
Ngăn người dùng truy cập vào màn hình Cài đặt nếu họ chưa đăng nhập, thay vào đó, hãy chuyển hướng họ đến màn hình Đăng nhập.

Trong lớp học lập trình trước, bạn đã làm việc trên một ứng dụng hiển thị các thông tin về Android. Ứng dụng của bạn cũng cho phép người dùng đăng nhập và đăng xuất. Trong lớp học lập trình này, bạn sẽ thêm một màn hình cài đặt vào ứng dụng hiện có. Người dùng chỉ có thể truy cập vào màn hình cài đặt nếu đã đăng nhập.

Nếu người dùng chưa đăng nhập, thì khi họ cố gắng truy cập vào màn hình cài đặt, ứng dụng sẽ chuyển hướng họ đến màn hình đăng nhập. Sau khi hoàn tất quy trình đăng nhập, người dùng sẽ được đưa trở lại màn hình cài đặt mà họ đã cố gắng truy cập ban đầu.

Để tải ứng dụng mẫu xuống, bạn có thể:

Tải tệp Zip xuống

... hoặc sao chép kho lưu trữ GitHub từ dòng lệnh bằng cách sử dụng lệnh sau và chuyển sang nhánh start của kho lưu trữ:

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

Sau khi bạn tải dự án trong Android Studio:

Chạy ứng dụng trên trình mô phỏng hoặc thiết bị thực để đảm bảo bạn đã thiết lập thành công môi trường để bắt đầu phát triển.

Nếu thành công, bạn sẽ thấy màn hình chính hiển thị một thông tin thú vị về Android và một nút đăng nhập ở góc trên cùng bên trái.

Các tính năng hiện tại của ứng dụng khởi động:

Nếu người dùng chưa đăng nhập, việc nhấn vào nút Đăng nhập sẽ bắt đầu quy trình đăng nhập và cho phép người dùng đăng nhập bằng địa chỉ email hoặc Tài khoản Google.
Nếu người dùng đã đăng nhập, nút này sẽ thay đổi thành nút Đăng xuất để người dùng có thể đăng xuất.

Trong nhiệm vụ này, bạn sẽ thêm một nút trên màn hình chính để cho phép người dùng chuyển đến màn hình cài đặt. Màn hình cài đặt sẽ cho phép người dùng chọn loại thông tin thú vị mà họ muốn hiển thị trên màn hình chính. Trên màn hình cài đặt, họ có thể chọn xem thông tin về Android hoặc thông tin về tiểu bang California.

Mở fragment_main.xml.
Trong fragment_main.xml,, hãy thêm nút Cài đặt được lồng trong ConstraintLayout và đặt nút này ở góc trên cùng bên phải của màn hình.

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

Mở nav_graph.xml.
Thêm một thao tác bên trong mainFragment. id của thao tác là action_mainFragment_to_customizeFragment và đích đến là 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>

Mở MainFragment.kt.
Trong onViewCreated(), hãy đặt một onClickListener cho settings_btn để khi nhấn vào nút này, người dùng sẽ được chuyển đến customizeFragment.

MainFragment.kt

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

Nếu bạn thấy lỗi chưa được giải quyết, hãy biên dịch lại ứng dụng từ trình đơn Build (Bản dựng) để tạo và sử dụng các thao tác điều hướng mới mà bạn đã tạo.
Khởi chạy lại ứng dụng. Giờ đây, sẽ có một nút Cài đặt hoạt động ở góc trên cùng bên phải.
Nhấp vào nút này để chuyển đến màn hình Cài đặt. Màn hình Cài đặt chỉ có một lựa chọn, đó là cho phép người dùng chọn loại thông tin thú vị mà họ muốn xem trên màn hình chính.
Nhấp vào nút quay lại của thiết bị Android để quay lại màn hình chính.

Trong nhiệm vụ này, bạn sẽ thêm mã để chuyển người dùng đến màn hình đăng nhập nếu họ cố gắng truy cập vào màn hình cài đặt khi chưa đăng nhập.

Mở SettingsFragment.kt.
Trong onViewCreated(), hãy quan sát authenticationState và chuyển hướng người dùng đến LoginFragment nếu họ chưa được xác thực.

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

Vì ứng dụng sẽ đưa người dùng đến màn hình đăng nhập nếu họ cố gắng truy cập vào màn hình cài đặt, nên ứng dụng cũng cần xử lý hành vi của nút quay lại trên màn hình đăng nhập. Nếu ứng dụng không tuỳ chỉnh cách xử lý hành vi của nút quay lại, thì người dùng sẽ bị mắc kẹt trong một vòng lặp vô hạn khi cố gắng quay lại màn hình cài đặt, nhưng sau đó lại được chuyển hướng đến màn hình đăng nhập.

Mở LoginFragment.kt.
Trong onViewCreated(), hãy xử lý các thao tác của nút quay lại bằng cách đưa người dùng quay lại 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)
}

Khởi chạy lại ứng dụng và xác nhận rằng nếu bạn chưa đăng nhập, thì những lần truy cập vào màn hình cài đặt sẽ chuyển hướng bạn đến quy trình đăng nhập.

Mặc dù bạn đã chuyển hướng người dùng đến trang đăng nhập thành công, nhưng bạn chưa xử lý những gì xảy ra sau khi người dùng đăng nhập thành công, vì vậy, các lần đăng nhập sẽ xuất hiện như thể không hoạt động. Bạn sẽ khắc phục vấn đề này trong bước tiếp theo.

Đến đây, bạn đã thiết lập thành công ứng dụng để chuyển hướng người dùng đến màn hình đăng nhập nếu họ cố gắng truy cập vào màn hình cài đặt mà chưa đăng nhập.

Tuy nhiên, sau khi thực hiện quy trình đăng nhập, bạn sẽ được đưa trở lại màn hình đăng nhập. Đây không phải là trải nghiệm tốt cho người dùng và có thể gây nhầm lẫn.

Để mang lại trải nghiệm lý tưởng cho người dùng, ứng dụng sẽ đưa người dùng quay lại màn hình cài đặt sau khi người dùng đăng nhập thành công.

Vẫn ở trong LoginFragment.kt, ở bất kỳ vị trí nào trong onViewCreated(), hãy quan sát authenticationState và điều hướng người dùng quay lại SettingsFragment khi họ được xác thực thành công.

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

Chạy lại ứng dụng và xác nhận rằng giờ đây, khi đăng nhập thành công, bạn sẽ chuyển đến trang Cài đặt thay vì trang Đăng nhập.

Xoá ngăn xếp lui bằng popBackStack(): Khi người dùng thao tác trong một ứng dụng, Android sẽ theo dõi những màn hình mà họ truy cập. Khi người dùng nhấn nút quay lại, ứng dụng sẽ quay lại các màn hình đã truy cập theo thứ tự.

Khi bật một màn hình khỏi ngăn xếp lui, về cơ bản, bạn đang yêu cầu Android bỏ qua màn hình đó khi người dùng nhấn nút quay lại.

Trong trường hợp này, bạn đang xoá màn hình hiện tại khỏi ngăn xếp lui để khi người dùng nhấn nút quay lại, ứng dụng sẽ bỏ qua màn hình này và quay lại màn hình mà người dùng đã truy cập trước khi truy cập vào màn hình này.

Nói cách khác, khi người dùng nhấn nút quay lại, ứng dụng sẽ không quay lại màn hình đăng nhập mà sẽ chuyển đến màn hình mà người dùng đã truy cập trước khi chuyển đến màn hình đăng nhập.

Bạn có thể xem ứng dụng hoàn chỉnh cùng với tất cả mã giải pháp tại kho lưu trữ Github này https://github.com/googlecodelabs/android-kotlin-login-navigation.

Trong lớp học lập trình này, bạn đã tìm hiểu các phương pháp hay nhất để tạo trải nghiệm người dùng tốt trong một ứng dụng hỗ trợ đăng nhập. Bằng cách quan sát trạng thái xác thực của ứng dụng, bạn có thể xác định những màn hình mà người dùng có thể truy cập và chuyển hướng họ đến màn hình đăng nhập khi cần.

Để biết thêm về các phương pháp hay nhất về Thành phần điều hướng trong Android, hãy xem các tài nguyên sau:

Tài liệu dành cho nhà phát triển Android:

Lớp học lập trình:

Kiến thức cơ bản về Kotlin cho Android: Xác định đường dẫn điều hướng

Để biết đường liên kết đến các lớp học lập trình khác trong khoá học này, hãy xem trang đích của các lớp học lập trình trong khoá học Kiến thức nâng cao về cách tạo ứng dụng Android bằng Kotlin.