Thực hành: Thêm ViewModel vào Dessert Clicker

1. Trước khi bắt đầu

Giới thiệu

Dessert Clicker hoạt động với trạng thái và dữ liệu cùng dòng. Trong bài tập này, bạn sẽ xoá trạng thái, dữ liệu và logic cùng dòng khỏi MainActivity rồi chuyển nội dung đó vào ViewModel.

Việc tách logic ứng dụng khỏi khung hiển thị (view) và đưa vào ViewModel là phương pháp hiện đại để phát triển Android. Phương pháp này mang lại những lợi ích sau đây:

  • Các nhà phát triển khác có thể dễ đọc mã hơn.
  • Mã sẽ dễ kiểm thử hơn.
  • Nhiều nhà phát triển có thể làm việc đồng thời trên một ứng dụng mà không ảnh hưởng đến công việc của các nhà phát triển khác.

Chúng tôi sẽ cung cấp mã giải pháp ở phần cuối. Tuy nhiên, bạn nên giải bài tập trước khi xem đáp án. Hãy coi giải pháp này như một cách để triển khai ứng dụng.

Điều kiện tiên quyết

Những gì bạn cần

  • Máy tính có kết nối Internet và đã cài đặt Android Studio
  • Mã giải pháp cho ứng dụng Dessert Clicker

Sản phẩm bạn sẽ tạo ra

Trong các bài tập thực hành này, bạn sẽ cải thiện kiến trúc ứng dụng Dessert Clicker bằng cách thêm ViewModel để xử lý dữ liệu và logic ứng dụng.

Bài tập thực hành gồm nhiều phần, qua đó bạn sẽ hoàn thành từng bước sau đây:

  • Cập nhật và thêm phần phụ thuộc cần thiết.
  • Tạo lớp ViewModel.

2. Tải đoạn mã khởi đầu xuống

  1. Trong Android Studio, hãy mở thư mục basic-android-kotlin-compose-training-dessert-clicker.
  2. Mở mã ứng dụng Dessert Clicker trong Android Studio.

3. Thiết lập phần phụ thuộc

  1. Thêm biến sau đây vào tệp build.gradle của dự án:
buildscript {
   ext {
       ...
       lifecycle_version = '2.5.1'
   }
}
  1. Thêm phần phụ thuộc sau đây vào tệp app/build.gradle:
dependencies {
    ...implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version"
}

4. Tạo lớp trạng thái giao diện người dùng

Hiện tại, thành phần kết hợp (composable) DessertClickerApp() trong MainActivity có chứa dữ liệu và trạng thái điều khiển giao diện người dùng.

Hãy tạo một lớp dữ liệu chứa tất cả các dữ liệu cần thiết cho giao diện người dùng. Dữ liệu trong lớp này thay thế dữ liệu mà thành phần kết hợp DessertClickerApp() đang quản lý.

5. Tạo ViewModel

Tạo một lớp ViewModel bằng thành phần Jetpack ViewModel. Bạn sử dụng ViewModel để quản lý trạng thái giao diện người dùng.

6. Chuyển vị trí dữ liệu và logic ứng dụng sang ViewModel

Chuyển vị trí logic từ MainActivity sang ViewModel, đồng thời cho phép truy cập vào dữ liệu về trạng thái giao diện người dùng bằng lớp trạng thái giao diện người dùng mà bạn tạo. Xoá tất cả các dữ liệu và logic quản lý trạng thái khỏi MainActivity.

Hãy cố gắng tự thực hiện nhiệm vụ này. Nếu cần, vui lòng tham khảo lớp học lập trình ViewModel và Trạng thái trong Compose để xem hướng dẫn.

7. Gọi ViewModel

Sử dụng dữ liệu và phương thức do ViewModel cung cấp để điều khiển giao diện người dùng trong MainActivity.

8. Mã giải pháp