Beranda / Android / Belajar Android Architecture – MVVM (Model View ViewModel)

Belajar Android Architecture – MVVM (Model View ViewModel)

Salah satu cara untuk mengembangkan aplikasi dengan arsitektur yang baik adalah dengan menerapkan arsitektur pattern Model View ViewModel. Kenapa sih kita haru menggunakan arsitektur pattern MVVM ini apa keungtunganya. Yuk Kita pelajari sama - sama.

Pertama kita cari tau apa itu MVVM. Yuk buka wikipedia disini.

MVVM facilitates a separation of development of the graphical user interface - be it via a markup language or GUI code - from development of the business logic or back-end logic (the data model).

Intinya MVVM ini adalah fasilitas yang menjembatani antara tampilan dan juga proses. Dengan MVVM ini memungkinkan kita untuk melakukan binding data langsung ke View.

Kenapa kita harus coba MVVM ini? Salah satu yang saya suka adalah dengan MVVM ini kita tidak lagi lagi terlalu menggunakan class interface yang terlalu banyak seperti jika kita menggunakan MVP, dan di MVVM ini juga kita menggunakan Data Binding ke view sehingga tidak perlu lagi kita melakukan findViewById atau setText misalnya.

Data Binding Android

Untuk mengimplementasikan MVVM ini kita perlu paham data binding dulu agar nanti kita bisa dengan mudah untuk lanjut ke step berikunya. Seperti sudah saya singgung di atas dengan data binding ini memungkinkan kita untuk tidak melakukan findViewById dan setText. Dengan begitu kita bisa melakukan coding yang lebih rapih.

Ok setelah itu langsung aja buat project untuk latihan nya. Lalu aktifkan fitur Data Binding di android studio lewat gradle seperti beriku ini.

Setelah itu kita buat model yang akan di binding dalam layout xml yang akan kita buat.

Selanjutnya sekarang buat seperti ini untuk xml nya :

Sudah model dan view nya sekarang waktunya melakukan binding di activity. Begini cara bindingnya :

Nah secara default android studio akan mengenerate class ContentMainBinding ini disesuaikan dengan nama xml yang kita buat. Jika tidak muncul class ContentMainBinding ini coba build->rebuild project.

Gimana cukup mudah bukan? Untuk lebih lanjut silahkan buka dokumentasi data binding disini.

Komponen MVVM

Ok apasih yang ada di MVVM ini dan apa gunanya? Nah seperti kepanjanganya disini MVVM memiliki 3 komponen :

  1. Model : Data model yang berisi bisnis logic dan validasi
  2. View : Yang mendifinisikan sturkur tampilan dalam hal ini layout yang biasa kita tulis di xml
  3. ViewModel : Nah untuk view model ini adalah sebagai penghubung antara Data dan Tampilan atau View dan Model

image from https://erikcaffrey.github.io

MVVM Real Action

Ok disini kita akan coba membuat aplikasi untuk menampilkan jadwal bioskop kita akan menggunakan API dari http://ibacor.com/. Disini juga kita akan menggunakan retrofit dan rxandroid untuk restapi nya.

Ada dua endpoint dari aplikasi yang akan

  1. http://ibacor.com/api/jadwal-bioskop
  2. http://ibacor.com/api/jadwal-bioskop?id={id}

Nah sekarang langkah pertama silahkan tambahkan dependency dari library yang akan kita gunakan seperti berikut ini :

Define Model

Selanjutnya kita buat untuk modelnya. Disini modelyang pertama akan ditapilkan adala data kota yang memiliki bioskop, nah untuk modelnya mengexstends Observable.

Create View

Nah sekarang kita buat view disini kita akan membuat dua view yang pertama untuk recyclerview nya dan yang kedua item_kota yang akan kita tampilkan di dalam recyclerview. Nah di view seperti ini kita bisa memasukkan class model dan membuatkan nya variable untuk di binding kedalam view yang telah kita buat.

Kemudian ini untuk layout item kota yang akan kita tampilkan di recyclerview :

Api Services

Sekarang kita masuk untuk API services nya

Kemudian ApiInteractorImpl yang akan kita buat dengan rx

Setup RecyclerView

Sekarang kita setup untuk adapter recyclerview. Yang pertama kita buat ViewHoldernya

Sudah dengan view holder sekarang ke adapternya

Nah sekarang eksekusi semua yang telah kita buat di activity

Nah untuk yang di endpoint yang kedua tidak lebih sama seperti yang pertama.

Kesimpulan

Diawal mencoba MVVM ini akan sedikit tricky cuman sebenarnya dengan MVVM ini tidaklah terlalu sulit. Intinya dengan metode MVVM ini kita membuat ViewModel sebagai tempat untuk melakukan prosessing. Dengan metode MVVM ini kita lebih cepat untuk proses menampilkan data di kedalam layout interface dari user. Ada banyak sekali metode pengembangan aplikasi android silahkan teman — teman melakukan percobaan dimana yang paling di suka dan mana yang paling membuat kamu lebih productif. Disini saya sedikit mengenalkan salah satu dari metode pengembanganya mudah — mudahan bisa membantu dan menambah wawasan temen — temen semua.

Yaps sampai ketemu di tutorial berikutnya keep Learning ya guys. Untuk projet latihan ini bisa di cek disini.

Github Project

Credit Post : https://medium.com/@ocittwo/ayo-cobain-model-view-view-model-576ff0cdab7b#.4deey0xqj

Tentang gookkis

Cuma tukang ketik di Gookkis.com, semoga tulisan jelek ini bermanfaat.

Baca Juga

Android Studio – Gak lagi make “findViewById”

Halo salam pokoknya ngoding,,,, Eh lama Gookkis Studi lama ga update nih yah, maklum lagi …

MonLis (Monitoring Listrik) Intel Edison dan Android

Tagihan listrik seringkali menjadi masalah utama masyarakat, karena masyarakat kurang sadar akan hemat energi. Karena …

Leave a Reply

Your email address will not be published. Required fields are marked *