MVVM adalah singkatan dari Model-View-ViewModel, sebuah pola arsitektur yang membantu dalam memisahkan logika presentasi dan logika bisnis dalam pengembangan aplikasi. MVVM membuat kode lebih terstruktur, mudah diuji, dan lebih mudah dipelihara.
Komponen dalam MVVM:
- Model
- Berisi data dan logika bisnis aplikasi.
- Biasanya berupa data class atau repository yang menangani data dari network/database.
- View
- Bagian UI dari aplikasi (Activity, Fragment, atau Compose UI).
- Bertanggung jawab untuk menampilkan data ke pengguna dan menerima input pengguna.
- ViewModel
- Menghubungkan View dan Model.
- Menyimpan dan mengelola data UI dalam lifecycle-aware manner (tidak hilang saat rotasi layar).
- Menggunakan LiveData atau StateFlow untuk mengamati data.
Kenapa Menggunakan MVVM di Android?
- Memisahkan logic dan UI → kode jadi lebih bersih
- Mendukung lifecycle-aware components
- Mudah di-maintain dan scalable
- Mempermudah testing unit (karena logic terpisah dari UI)
Contoh Sederhana Implementasi MVVM di Kotlin
Buatlah sebuah struktur data model, view, dan viewmodel seperti contoh pada gambar dibawah ini:
Kemudian buatlah sebuah coding sederhana untuk model dengan contoh kasus aplikasi kalkulator penjumlahan. Buat file CalculatorModel.kt dengan tipe Data Class pada package model, kemudian masukan kode dibawah:
package com.trisnasejati.mvvmtesting.model
data class CalculatorModel(
val number1: Int,
val number2: Int,
val result: Int
)
Kemudian buat juga ViewModel yang berisi logic dari aplikasi. Buat file dengan nama CalculatorViewModel.kt pada package viewmodel, kemudian masukan kode dibawah:
package com.trisnasejati.mvvmtesting.viewmodel
import androidx.lifecycle.ViewModel
import com.trisnasejati.mvvmtesting.model.CalculatorModel
class CalculatorViewModel: ViewModel() {
fun calculate(number1: Int, number2: Int): CalculatorModel{
val result = number1 + number2
return CalculatorModel(number1, number2, result)
}
}Ubah kode dalam layout main_activity.xml, seperti kode dibawah ini:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="14dp"
tools:context=".view.MainActivity">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Silahkan isi..."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/input_layout_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="@id/text">
<EditText
android:id="@+id/number_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Number 1"
android:inputType="number"/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/input_layout_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="@id/input_layout_1">
<EditText
android:id="@+id/number_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Number 1"
android:inputType="number"/>
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="@+id/btn_calculate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
app:layout_constraintTop_toBottomOf="@id/input_layout_2"
android:text="Jumlahkan" />
</androidx.constraintlayout.widget.ConstraintLayout>Setelah itu, file MainActivity yang berada di package root, pindahkan ke dalam package view. Kemudian masukan kode dibawah ini:
package com.trisnasejati.mvvmtesting.view
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.ViewModelProvider
import com.trisnasejati.mvvmtesting.R
import com.trisnasejati.mvvmtesting.viewmodel.CalculatorViewModel
class MainActivity : AppCompatActivity() {
private lateinit var calculatorViewModel: CalculatorViewModel
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
calculatorViewModel = ViewModelProvider(this).get(CalculatorViewModel::class.java)
val text: TextView = findViewById(R.id.text)
val number1: EditText = findViewById(R.id.number_1)
val number2: EditText = findViewById(R.id.number_2)
val btnCalculate: Button = findViewById(R.id.btn_calculate)
btnCalculate.setOnClickListener {
val num1: Int = number1.text.toString().toIntOrNull() ?: 0
val num2: Int = number2.text.toString().toIntOrNull() ?: 0
val res = calculatorViewModel.calculate(num1, num2)
text.text = "${res.result}"
}
}
}MVVM adalah arsitektur yang sangat direkomendasikan dalam pengembangan aplikasi Android modern. Dengan kombinasi Kotlin dan fitur Android Jetpack seperti ViewModel, LiveData, dan Data Binding, kita bisa membuat aplikasi yang bersih, scalable, dan lebih mudah diuji. Di artikel selanjutnya, kamu bisa mulai membangun aplikasi Android dengan arsitektur MVVM secara lengkap.
Pada artikel selanjutnya akan dibahas lebih detail tentang MVVM pada Bahasa Pemrograman Kotlin untuk Android. Sampai jumpa di artikel selanjutnya
