Mengenal arsitektur Model View ViewModel (MVVM) di Android — Bagian 1
Model View ViewModel (MVVM) merupakan salah satu architectural pattern yang dipakai dalam pengembangan perangkat lunak berbasis Graphical User Interface (GUI), arsitektur ini memisahkan business logic dengan GUI. Pada Android SDK sendiri, telah tersedia library Data Binding dari API level 7+.
Beberapa layer pada arsitektur MVVM :
Model
Model / entity adalah representasi dari data yang digunakan pada business logic, dapat berupa Plain Old Java Object (POJO), Kotlin Data Classes, dll.
View
Representasi UI dari sebuah aplikasi, pada Android sendiri view ini dapat berupa Activity atau Fragment.
ViewModel
Layer yang berinteraksi langsung dengan Model, serta menyajikan data untuk View layer.
Ok, langsung saja kita coba mengimplementasikan MVVM dengan menggunakan Android Studio 3.0 dan bahasa pemrograman Kotlin.
Buat project baru seperti biasa, dan jangna lupa centang opsi “Include Kotlin support” pada Android Studio. Tambahkan modul kapt, data binding, dan Android architecture component pada modul gradle seperti berikut :
apply plugin: 'kotlin-kapt' // kapt moduleandroid {
----
----
----
dataBinding {
enabled = true
}
}dependencies {
----
----
----
implementation "android.arch.lifecycle:extensions:1.0.0"
implementation 'com.android.support:design:26.1.0'
kapt 'com.android.databinding:compiler:3.0.1'
}
Buat sebuah Kotlin class yang merupakan sub class dari Activity atau AppCompatActivity dan sebuah file yang merupakan sub class dari package android.arch.lifecycle.ViewModel. Pada contoh ini nama activity nya class activity dan view model nya adalah MainActivity.kt & MainViewModel.kt.
Kita mulai dari class MainViewModel dulu, tambahkan ObservableField dengan type String. ObservableField ini “membungkus” variable biasa menjadi observable, observable sendiri adalah sebuah data yang memberikan event kepada oberver, jadi jika kita ingin mengubah UI, kita cukup men set ulang value dari variable tersebut . Untuk lebih lengkapnya mengenai Observer Pattern, dapat dilihat di link ini. Berikut contoh codingan nya :
package com.github.syafdia.sample.androidmvvm
import android.arch.lifecycle.ViewModel
import android.databinding.ObservableField
import android.os.Handler
class MainViewModel : ViewModel() {
val content = ObservableField<String>("Hello")
init {
Handler().postDelayed({
content.set("Data binding awesome !!!")
}, 3_000)
}
}Berikut nya pada file activity_main.xml, kita akan melakukan property binding dari class MainViewModel, dengan menambahkan tag data seperti berikut:
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<data>
<import type="android.view.View" />
<variable
name="viewModel"
type="com.github.syafdia.sample.androidmvvm.MainViewModel"
/>
</data><!-- Start main layout --><TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textSize="24sp"
android:layout_gravity="center_vertical"
android:text="@{viewModel.content}"
/><!-- End main layout --></layout>
Pada contoh diatas, property dari MainViewModel::content di bind ke layout activity_main.xml. Ketika value dari MainViewModel::content berubah, maka UI aplikasi juga akan ikut berubah.
Berikutnya masuk ke step terakhir, disini kita membuat instance dari class MainViewModel, dan mem bind instance tersebut di dalam MainActivity.
package com.github.syafdia.sample.androidmvvm
import android.databinding.DataBindingUtil
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import com.github.syafdia.sample.androidmvvm.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val viewDataBinding = DataBindingUtil
.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
viewDataBinding.viewModel = MainViewModel()
}
}Tinggal jalankan aplikasi pada Android emulator, dan teks pada MainActivity akan berubah jika kita men set ObservableField dengan value yang baru.
Sampai disini kita sudah membuat ViewModel dan View untuk aplikasi Android ini. Pada artikel selanjutnya, saya akan membahas pengintegrasian Model , Repository, ViewModelFactory, dan Live Data pada arsitektur MVVM.
*Source code dari project di atas, dapai dilihat di repo ini:
