Example MVVM-ViewModel-LiveData-Retrofit2-RX-Kotlin

1298

Chào các bạn đã một thời gian khá dài mình không viết bài trên blog.
Hôm nay mình sẽ đem đến cho các bạn 1 example về MVVM-ViewModel-LiveData-Retrofit2 trong quá trình mình tìm hiểu với mục đích chính để các bạn mới bắt đầu như mình dễ hiểu hơn
Oke chúng ta sẽ bắt đầu 😀

  1. Khái quát về MVVM (Model – View – ViewModel) Pattern


MVVM được tạo thành từ ba thành phần cốt lõi, mỗi thành phần đều có vai trò riêng :

  • Model – mô hình dữ liệu đối tượng giúp truy xuất và thao tác trên dữ liệu thực sự.
  • View – Xác định cấu trúc, bố trí và sự xuất hiện của một view trên màn hình
  • ViewModel – liên kết giữa View và Model, xử lý view logic
  1. Khái quát về ViewModel- LiveData
    Khi làm việc với android chắc chắn nhiều bạn sẽ gặp phải trường hơp dữ liệu bị mất đi xoay activity vì vòng đời của nó sẽ khởi tạo lại.
    Để giải quyết vấn đề trên 1 cách đơn giản nhất chúng ta sẽ implement:
    – ViewModel là lớp được cung cấp bởi lifecycle. Nó là cầu nối giữa ModelUI và nó khá thông minh khi có thể giữ lại đc dữ liệu cho trường hợp ở trên vì cơ bản nó tách biệt với lớp UI.
    LiveData là một lớp dùng để lưu trữ dữ liệu và cho phép chúng ta có thể theo dõi sự thay đổi của nó và kịp thời cập nhật data lên UI. Và đặc biệt LiveData có thể nhận biết được vòng đời của activies, fragments, services để đảm bảo rằng LiveData chỉ gọi update  khi mà thành phần trên đó còn hoạt động.
  2. Example
    Lưu ý trong example này mình sẽ không sử dụng DataBinding vì một lý do đơn giản là mình chưa dùng nó bao giờ =))))

3.1 Môi Trường
– Ở example này mình sử dụng android studio 3.2 bản mới nhất.
– Các bạn tạo project include Kotlin vào nhé.

3.2 Config project
Các bạn mở file build.gradle lên và update các thư viện như sau:

– Các thư viện mình tích hợp sẵn như: retrofit, rx, gson,lifecycle…

3.3 Cấu Trúc Project/Cây thư mục

3.4 Start coding
Example này sẽ có 2 chức năng chính:
+ Get UserInfo
+ Get List Repository show List.

3.4.1 Model
Tương ứng với các chức năng mình sẽ tạo 2 model:
UserEntity.kt

RepositoriesEntity.kt

Với kotlin tạo model đúng quá đơn giản và ngắn gọn 😀

3.4.2 Config retrofit để gọi api
Khởi tạo ApiBuilder.kt  

Khởi tạo ApiInterface.kt  gồm 2 api kết hợp sử dụng RxJava.

Khởi tạo 1 class BaseResponse.kt để xử lý lỗi api.

3.4.3 Code viewmodel

Để hỗ trợ việc xử lý progress ở đây mình tạo 1 file Event wrapper  Event.kt giúp việc quản lý xự kiện rõ ràng hơn. (Tham Khảo phần cuối bài viết tại đây)

Tiếp theo khởi tạo class: BaseViewModel.kt class này để các class khác kế thừa một vài hàm cần thiết.

 

Khởi tạo class: UserViewModel.kt  class này fetch data và giao tiếp với UI.
Gồm 2 hàm loadUserInfo () và loadRepositories() để fetch data.
Hàm userResponse trả về 1 LiveData từ loadUserInfo ().
Và hàm repositoriesResponse trả về 1 LiveData từ loadRepositories()

Note: Mình có kết hợp xử dụng RX để code ngắn gọn hơn.

3.4.4 Code trên lớp View

Mình có 1 MainFragment.kt với nhiệm vụ:
+ setup ViewModel
+ gọi api xử lý hiện thị dữ liệu.

Mình có thêm hàm: setObserveLive(viewModel)
Hàm này mình dùng để xử lý progress/error/failure trong BaseFragment.

main_fragment.xml

MainActivity.kt

main_activity.xml

2 Class BaseActivityBaseFragment phần code progress bar các bạn check trong git nhé chủ yếu là 3 hàm abstract để dùng chung thôi:

4. Test

Xong xong chúng ta thử test xem nó hoạt động như nào nhé.

  • Các bạn sẽ thấy khi xoay màn hình dữ liệu sẽ không mất đi.

Bài viết còn nhiều thiếu xót, mình rất hoàn nghênh các bạn góp ý để hoàn thiện hơn nhé.

Source GitHub.