Paging 2 dengan RXJava, MVVM, Injection, Retrofit
Halo ini adalah pertama kali saya menulis di Medium. Nama saya Bintang Poetra. Saya adalah mahasiswa Teknik Informatika. Pada story kali kita akan belajar cara menggunakan Paging 2 dengan menggunakan library RXJava, dan Retrofit. Untuk project ini kita akan menggunakan architecture MVVM.
Apa itu MVVM ?
MVVM adalah salah satu Architectural Patterns yang terdiri dari 3 bagian yaitu
- Model adalah komponen yang digunakan untuk mempresentasikan dan menyediakan data yang dibutuhkan
- View adalah komponen yang berhubungan dengan UI. Seperti menampilkan button, loading, dialog, dll.
- ViewModel adalah komponen inti pada Architectural Pattern MVVM ini. Karena data yang diterima akan disimpan dan akan ditampilkan pada View
Yuk mulai Ngoding
Kali ini kita akan menggunakan REST API dari JSONPlaceHolder dan melakukan HTTP Request ke JSONPlaceHolder. Beginilah aplikasi sederhana yang akan kita buat.
Setelah membuat project baru, kita harus menambahkan dependency yang akan kita pakai dalam project kali ini.
API Endpoint
https://jsonplaceholder.typicode.com/posts → Akan menghasilkan data posts.
Struktur Folder
API Service
Buat class dengan nama RetrofitApp. Dan tulis seperti kode dibawah ini.
Lalu buat interface dengan nama PostsService, dan tulis kode seperti dibawah ini. Pada fungsi getPosts() kita lihat bahwa Observable<> digunakan sebagai return untuk mengobserve data dengan RxJava
Entity atau Model
Seperti penjelasan diatas sebelumnya, saya menyebutkan bahwa model digunakan untuk mempresentasikan data. Yang dimaksud mempresentasikan disini adalah kita menuliskan setiap Field yang ada pada Response API yang aka kita pakai.
Seperti yang bisa kita lihat bahwa terdapat 4 field pada response tersebut. Yaitu userId, id, title, dan body
Untuk mempresentasikan data, kita juga harus menyesuaikan tipe data dengan response API tersebut.
Network State
Buat class baru dengan nama NetworkState.kt. Lalu tulis kode seperti dibawah ini.
Network State ini akan kita gunakan untuk menghandle response dari request yang kita buat. Contoh, jika user mencoba melihat data posts tapi gagal, karena mereka offline, jadi pada Activity/Fragment user tidak dapat melihat data tersebut, yang berarti mereka akan melihat tampilan yang kosong.
Data Source dan Data Source Factory
Data source adalah sumber utama dimana data berasal. Seperti gambar dibawah dapat dilihat bahwa data yang diperoleh dari web service dengan perantara Retrofit akan ditampung pada Data Source.
Buat temen-temen yang udah sering pakai RXJava pasti udah sering menggunakan Composite Disposable. Composite Disposable adalah kelas memudahkan dalam penggabungan beberapa disposable. Disposable sendiri jika kita artikan di https://translate.google.com/?sl=en&tl=id&op=translate artinya sekali pakai. Secara umum Composite Disposable digunakan untuk menangani HTTP Request. Jadi contoh, kalau dalam suatu activity/fragment terdapat suatu request API, dengan menggunakan compositeDisposable.add(getDataPosts) artinya kita menambahkan 1 request ini ke dalam CompositeDisposable dan nanti kita tinggal clear di dalam onCleared()pada ViewModel saat kita pindah Activity/Fragment untuk menghindari memory leaks/force close yang terjadi karena perbedaan thread.
Lalu buat class baru dengan nama PostsDataSourceFactory.kt, dan tulis kode seperti di bawah ini.
Repository
Setelah data diterima oleh Data Source, data akan akan diolah di Repository. Semua proses penyimpanan data, update data, menghapus data atau mencari data semua akan dilakukan di Repository
Untuk mengkonfigurasi LiveData<PagedList<Posts>> kita juga dapat menentukan konfigurasi Paging kita sendiri. Secara khusus terdapat 3 atribut seperti berikut
- Ukuran Halaman
Digunakan untuk menentukan jumlah item di setiap halaman - Jarak Pengambilan Data
Dengan memperhitungkan item terlihat terakhir di UI aplikasi, jumlah item di luar item terakhir yang harus diambil oleh Library Paging terlebih dahulu. Nilai ini harus beberapa kali lebih besar daripada ukuran halaman. - Placeholder
Digunakan untuk menentukan apakah UI akan menampilkan placeholder untuk item daftar yang belum selesai dimuat.
Pada fungsi getNetworkState() kita gunakan untuk mengambil Network State yang telah diolah didalam class Data Source. Keseluruhan file PostsRepository akan menjadi seperti ini.
Dependency Injection (DI)
Dependency Injection adalah teknik yang digunakan untuk menyediakan kebutuhan untuk class lain. Di kasus ini, Dependency Injection yang kita buat, akan dipakai untuk menyediakan ViewModel dan Repository yang akan digunakan untuk pembuatan ViewModelFactory.
ViewModel dan ViewModelFactory
Setelah membangun Repository, kita akan lanjut membangun ViewModel. ViewModel secara langsung akan berkomunikasi dengan Repository untuk mendapatkan data, perubahan data, dan melakukan update terhadap data yang dimiliki. Data yang didapat dari Repository akan disimpan dalam bentuk LiveData yang nanti akan diobservasi oleh View.
Buat class baru dengan PostsViewModel, dan tulis kode seperti dibawah ini
Seperti yang sudah saya katakan untuk menghindari memory leaks dan force close, pada onCleared() kita melakukan compositeDisposable.clear()
Untuk ViewModelFactory kalian bisa tuliskan kode seperti dibawah ini.
View
View adalah bagian yang dilihat secara langsung user dalam arti lain View bisa diartikan sebagai UI. Pada project ini kita akan menerapkan Single Activity Architecture. Dengan menggunakan library Navigation dari Android Jetpack. Kita akan menggunakan Activity yang sudah terbuild saat pembuatan project yaitu MainActivity.
Lalu ubah activity_main.xml menjadi seperti berikut.
Konfigurasi Navigation
Buat resource file baru, dengan aturan format seperti berikut, untuk namanya bebas asalkan untuk Resource typenya harus Navigation.
Lalu buka file Navigation yang sudah kita buat. Kemudian klik “New Destination”, dan pilih Fragment yang akan kita buat.
Layout
Pertama, buat layout untuk list item yang digunakan pada RecyclerView
Lalu buat layout untuk shimmer. Shimmer disini akan kita gunakan sebagai pengganti progress bar pada saat proses Loading pengambilan data terjadi.
Setelah layout item dan placeholder selesai kita buat. Kita akan lanjut membuat layout untuk fragment posts.
Membuat View Menjadi Reactive
Setelah membuat layoutnya, sekarang kita akan memberi logic di Fragment. Pertama kita buat dulu PostsFragment.
Seperti yang bisa kita lihat, sekarang kita menggunakan fitur data binding. Pada kode diatas terdapat variabel postViewModel yang dimana pada variabel tersebut kita membuat instance baru dari PostViewModel.
private fun showData() {
postsViewmodel.getListDataPost().observe(viewLifecycleOwner, { dataPost ->
dataPostPagedListAdapter.submitList(dataPost)
})
postsViewmodel.networkState.observe(viewLifecycleOwner, { network ->
if (postsViewmodel.listIsEmpty() && network == NetworkState.LOADING){
binding?.shimmerViewContainer?.startShimmer()
} else {
binding?.shimmerViewContainer?.stopShimmer()
binding?.shimmerViewContainer?.visibility = View.GONE
}
})
}Pada baris kode diatas, kita bisa lihat bahwa terdapat 2 proses pengambilan data dari ViewModel. Yang pertama pengambilan data Posts, yang dimana data tersebut akan di submit ke dalam Adapter yang akan kita gunakan sebagai adaptor Recycler . Yang kedua pengambilan Network State yang sudah diolah di dalam Data Source dengan perantara Repository. Di dalam proses pengecekan network state, apabila status network state adalah Loading maka shimmer yang kita buat tadi akan memulai animasi shimmer tersebut. Apabila status network state telah Loaded, maka shimmer akan berhenti.
Setelah itu, kita bakal membuat class untuk Adapter. Buat class baru dengan nama DataPostPagedListAdapter.kt
Dan, TADAAA, selesai. Tapi sebelum kita coba Run, jangan lupa untuk menambahkan uses-permission di dalam Manifest.
<uses-permission android:name="android.permission.INTERNET"/>End of story
Yeay. Aplikasi sederhana dengan architecture MVVM dan library RXJava, Retrofit, dan Injection udah selesai nih. Banyak yang udah kita pelajari bareng-bareng, Mulai dari beberapa prinsip SOLID, cara nerapin MVVM, dan lain-lain.
Akhir kata, semoga ilmu yang saya sampaikan di story ini bisa kalian bagikan juga ke temen-temen kalian. Ilmu kalo cuma dipakai sendiri buat apa, lebih seru kalo kita bagikan dengan sekitar kita.
Thank you, terimakasih, matur nuwun.
Bintang Poetra
