Android Jetpack : ViewModel & LiveData

Hi Coder !

Seperti dalam artikel sebelumnya kita akan melanjutkan part dari Android Jetpack. Kita akan membahas tentang ViewModel yang merupakan dari Archcitecture part of Android Jetpack dan dalam artikel ini coder akan belajar beberapa point seperti berikut ini :

  1. What’s ViewModel ?
  2. What’s LiveData ?
  3. How to Implementation it ?

Setelah kita tau apa itu ViewModel coder di sini akan belajar juga bagaimana mengimplementasikan ke dalam code dalam pengembangan Aplikasi Android. Dalam studi kasus nya nanti kita akan membuat Aplikasi Matematika dengan menggunakan ViewModel & LiveData. Dan untuk starter projectnya silahkan cek repository github berikut ini : https://github.com/syntaxxxxx/TutorialViewModel

  1. What’s ViewModel ?

ViewModel adalah sebuah object yang menyediakan data untuk komponen yang ada di UI dan akan mempertahankan data jika ada perubahan konfigurasi layar.

Pernah kah kalian mengalam kesulitan untuk menjaga data anda pada UI ? Contoh nya seperti anda menampilkan data dalam bentuk tipe data string dan jika ada perubahan perubahan konfigurasi layar? Seperti gambar berikut ini :





Pada gambar diatas ketika terjadi perubahan konfigurasi layar kalian akan kehilangan data string tersebut yang memiliki nilai di awal adalah 23 menjadi kosong. Dan bagaimana cara menjaga data nya supaya tidak hilang ? Kalian bisa menggunakan pendekatan code seperti ini untuk menjaga data nya :

// menggunakan savedInstanceState untuk menjaga data
if (savedInstanceState != null) {
...
}
override fun onSaveInstanceState(outState: Bundle) {
super.onSaveInstanceState(outState)
...
}

Bagaimana data nya dalam jumlah banyak yang harus kalian jaga pada state UI komponen nya? Jika kalian menggunakan pendekatan code diatas kalian akan tidak efisien, mengalami memory leaks dan bahkan crash pada aplikasi anda dan ViewModel adalah jawaban nya.

https://developer.android.com/topic/libraries/architecture/viewmodel

2. What’s LiveData ?

LiveData adalah sebuah class data holder yang artinya LiveData memegang peranan penting untuk menyampaikan data ke UI dalam ViewModel. Jika ada ada perubahan data LiveData akan memberikan notifikasi kepada UI bahwa ada update data terbaru yang secara bersamaan bekerja dengan class ViewModel. LiveData tau aktifitas lifecycle dari UI pada aplikasi android. Jadi dia paham betul kapan harus menyampaikan data nya. Perhatikan pada gambar berikut ini :

ViewModel & LiveData works

Gambar diatas menunjukkan bahwa LiveData tidak akan menyampaikan data ke UI jika dari UI tersebut tidak active dan sebaliknya, jika UI active LiveData akan secara ototmatis menyampaikan data nya ke UI melalui class ViewModel yang sebelumnya sudah berkomunikasi dengan UI.

https://developer.android.com/topic/libraries/architecture/livedata

3. How to Implementation it ?

Sekarang kita akan mengimplementasikan bagaimana ViewModel dan LiveData bekerja secara bersamaan.

Class ViewModel :

Buat satu class ViewModel yang extending ke class ViewModel seperti contoh dibawah ini :

class MainViewModel : ViewModel() {
}

Satu buah class dikatakan sebagai ViewModel apabila class tersebut extending class ViewModel seperti approach code diatas. Dan dalam class MainViewModel tambahkan approach code berikut ini :

val liveData = MutableLiveData<Result>() // => can change value
// fungsi ini akan melakukan kalkulasi perhitungan
fun setHitung(panjang: String, lebar: String): LiveData<Result> {
val p = panjang.toDouble()
val l = lebar.toDouble()
val tampung = p * l
val result = Result(tampung.toString())
liveData.postValue(result)
return liveData
}
// fungsi ini akan mengembalikan data hasil kalkulasi pada fungsi diatas dalam livedata
fun getHitung(): LiveData<Result> {
return liveData
}

NOTED :

  • LiveData bersifat read-only
  • MutableLiveData dapat merubah value dari data nya (setValue||postValue)

Selanjutnya adalah pada class MainActivity buat approach code nya seperti ini :

class MainActivity : AppCompatActivity() {

// deklarasi ViewModel
lateinit var viewModel: MainViewModel

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
/**
* communication your activity/fragment with MainViewModel
* */
viewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)
/**
* get value from your live data into MainViewModel
* */
viewModel.getHitung().observe(this, getHitung) // => asynchronous

btn_hitung.setOnClickListener {
hitung(edt_panjang.text.toString().trim(), edt_panjang.text.toString().trim())
}
}
fun hitung(panjang: String, lebar: String) {
if (panjang.isEmpty() || lebar.isEmpty()) {
toast("kosong cuy")
} else {
viewModel.setHitung(edt_panjang.text.toString().trim(), edt_lebar.text.toString().trim())
}
}
/**
* SUBSCRIBE
* call this if you want get your data when function gethitung() to do observe
* */
val getHitung = Observer<Result> {
it
.let {
tv_result.text = it?.result
}
}
}

Jika sudah silahkan run approach code diatas. Dan jika dijalankan coba lakukan kalkulasi perhitungan nya. Setelah itu coba rubah konfigurasi layar pada aplikasi temen-temen dan temen-temen akan melihat data nya akan terjaga pada state UI temen-temen dan tidak akan kehilangan pada kalkulasi perhitungan pada data kalian di UI.

Kesimpulan

  1. Memahami apa itu ViewModel.
  2. Memahami api itu LiveData.
  3. Memahami ViewModel & LiveData works.
  4. Memahami bagaimana ViewModel menjaga data jika ada perubahan konfigurasi pada layar.
  5. Memahami cara mengimplementasikan ViewModel & LiveData.

Untuk full project nya silahkan cek repository berikut ini : https://github.com/syntaxxxxx/TutorialViewModel

Jika temen-temen masih belum paham dan ada pertanyaan silahkan tinggalkan komentar dibawah ini ya

Happy Coding !

Open chat
1
Hello, welcome to IMA Studio 🙌
Chat with us ! We are ready to help you :-)
Powered by