MVVM (Model-View-ViewModel) adalah salah satu arsitektur yang digunakan untuk memisahkan logika bisnis, logika presentasi, dan logika UI dalam aplikasi Android, termasuk dalam framework modern seperti Android Jetpack Compose. MVVM memberikan cara untuk menjaga kebersihan kode dan memisahkan tanggung jawab antar komponen dalam aplikasi.
Mari kita bahas secara rinci bagaimana MVVM diterapkan pada Android Compose dan bagaimana komponennya saling berinteraksi:
Komponen Utama MVVM :
Model:
- Berisi logika bisnis dan data dari aplikasi. Model biasanya terdiri dari repository atau data source yang mengambil data dari API, database, atau sumber lainnya.
- Tidak berhubungan langsung dengan UI.
- Contoh: Database, API, atau resource lain yang menyimpan data.
View (Ui dalam Compose)
- View adalah layer presentasi yang menampilkan data ke pengguna. Di Jetpack Compose, ini berupa fungsi-fungsi composable yang membangun UI.
- View mendengarkan perubahan dari ViewModel dan memperbarui UI berdasarkan perubahan data.
ViewModel
ViewModel bertindak sebagai jembatan antara Model dan View. Ini menyimpan data yang diperlukan UI dan menyiapkan data untuk ditampilkan ke View.
ViewModel tidak boleh memiliki referensi langsung ke View untuk menghindari kebocoran memori, dan hidup lebih lama dari Activity atau Fragment yang berhubungan dengannya.
Menggunakan LiveData atau State dalam Jetpack Compose untuk memicu perubahan UI saat data berubah.
Cara Penggunaan MVVM di Android Jetpack Compose:
Model (Menyediakan Data) Model biasanya mengelola data dari API atau database, seperti melalui repository.
class UserRepository {
fun getUserData(): List<String> {
// Logic untuk mendapatkan data user, bisa dari API atau database
return listOf("User1", "User2", "User3")
}
}
ViewModel (Logika Presentasi) ViewModel menyiapkan data untuk UI dan menggunakan State untuk membuat View berinteraksi dengan data secara reaktif.
class UserViewModel(private val userRepository: UserRepository) : ViewModel() {
// State untuk menyimpan data user
var userList by mutableStateOf(listOf<String>())
private set
init {
// Inisialisasi data
loadUsers()
}
private fun loadUsers() {
userList = userRepository.getUserData()
}
}
View (Composable Function) Fungsi composable bertindak sebagai View yang berinteraksi dengan ViewModel untuk mendapatkan data.
@Composable
fun UserListScreen(viewModel: UserViewModel = viewModel()) {
val users = viewModel.userList
Column {
Text("User List:")
// Menampilkan data user dari ViewModel
users.forEach { user ->
Text(text = user)
}
}
}
Integrasi dalam Activity Di sini, Anda akan mengikat ViewModel ke Composable di Activity.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// Menampilkan composable UserListScreen
UserListScreen()
}
}
}
Alur Kerja dari MVVM dalam Jetpack Compose:
1. Model menyediakan data dari sumber (API, database).
2. ViewModel memproses data dari Model dan menyimpannya dalam `State`. State ini digunakan untuk memicu perubahan di UI.
3. View (Composable) mendengarkan perubahan state dari ViewModel. Ketika state berubah, composable akan secara otomatis memperbarui UI.
