Pola MVVM
Pisahkan tanggung jawab view, view model, dan model.
Pola MVVM adalah pelajaran Swift Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Swift Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Swift Academy mencakup 4 pelajaran total.
Apa Itu MVVM?
MVVM adalah singkatan dari Model-Tampilan-ViewModel. Ini adalah pola arsitektur yang memisahkan aplikasi Anda menjadi tiga lapisan, masing-masing dengan satu tanggung jawab yang jelas.
- Model — data dan aturan bisnis
- Tampilan — hal yang dilihat pengguna
- ViewModel — penghubung yang menyiapkan data Model untuk Tampilan
Tujuannya adalah pemisahan tanggung jawab: setiap lapisan berubah karena alasannya sendiri, secara terpisah dari lapisan lainnya.
Lapisan Model
Model menyimpan data mentah dan aturan yang mengaturnya. Model tidak mengetahui apa pun tentang layar atau cara sesuatu ditampilkan.
Model biasanya berupa struktur biasa atau objek domain. Model mudah diuji karena tidak memiliki dependensi antarmuka pengguna.
struct User {
let id: UUID
let firstName: String
let lastName: String
let isPremium: Bool
}
struct Order {
let items: [String]
let total: Decimal
}Lapisan Tampilan
Tampilan hanya bertugas menyajikan. Dalam SwiftUI, tampilan berupa struktur View Anda; dalam UIKit, tampilan berupa UIViewController beserta subview-nya.
Tampilan yang baik tidak memiliki logika bisnis. Tampilan hanya merender status dan meneruskan tindakan pengguna ke ViewModel.
struct ProfileView: View {
@StateObject var viewModel: ProfileViewModel
var body: some View {
VStack {
Text(viewModel.displayName)
if viewModel.showBadge {
Text("Premium")
}
}
}
}Lapisan ViewModel
ViewModel berada di antara Model dan Tampilan. ViewModel mengambil data mentah dari Model dan mengubahnya menjadi nilai yang siap ditampilkan secara langsung oleh Tampilan.
ViewModel juga menyediakan maksud pengguna (metode) yang dipanggil Tampilan saat pengguna berinteraksi.
final class ProfileViewModel: ObservableObject {
@Published var displayName: String
@Published var showBadge: Bool
init(user: User) {
displayName = user.firstName + " " + user.lastName
showBadge = user.isPremium
}
}Mengapa Tanggung Jawab Dipisahkan?
Saat pemformatan, komunikasi jaringan, dan penampilan tercampur di dalam pengendali tampilan, berkas tersebut menjadi gumpalan besar yang tidak dapat diuji.
Dengan membagi tanggung jawab:
- Model dapat digunakan kembali di berbagai layar
- ViewModel dapat diuji secara unit tanpa antarmuka pengguna
- Tampilan tetap kecil dan deklaratif
Apa yang Termasuk dalam Model
Masukkan hal-hal berikut ke dalam Model:
- Entitas domain (
User,Product) - Aturan validasi bisnis
- Abstraksi persistensi dan jaringan, biasanya melalui layanan yang dipanggil ViewModel
Jangan pernah memasukkan teks antarmuka pengguna, warna, atau pemformatan ke dalam Model.
Apa yang Termasuk dalam ViewModel
ViewModel menangani logika penyajian:
- Memformat tanggal, mata uang, dan nama menjadi teks tampilan
- Menentukan status antarmuka pengguna yang terlihat, seperti pemuatan, kesalahan, atau kosong
- Mengoordinasikan pemanggilan layanan dan menyediakan hasilnya
final class CartViewModel: ObservableObject {
@Published var totalText: String = ""
func update(with order: Order) {
let formatter = NumberFormatter()
formatter.numberStyle = .currency
totalText = formatter.string(from: order.total as NSNumber) ?? "-"
}
}Apa yang Termasuk dalam Tampilan
Tampilan seharusnya hanya:
- Menata dan merender elemen antarmuka pengguna
- Membaca status yang dipublikasikan dari ViewModel
- Meneruskan ketukan dan gestur dengan memanggil metode ViewModel
Jika Anda menemukan if yang menentukan aturan bisnis di dalam Tampilan, logika tersebut kemungkinan seharusnya berada di dalam ViewModel.
Aliran Data dalam MVVM
Alirannya satu arah untuk data dan berlawanan arah untuk tindakan:
- Model -> ViewModel -> Tampilan untuk data
- Tampilan -> ViewModel untuk maksud pengguna
Tampilan tidak pernah berkomunikasi langsung dengan Model. Dengan demikian, dependensi mengarah ke dalam, menuju domain Anda.
MVVM vs MVC
Dalam MVC klasik, pengendali sering menjadi sangat besar karena menangani pemformatan, jaringan, dan perangkaian tampilan sekaligus.
MVVM memindahkan logika penyajian tersebut ke dalam ViewModel, sehingga pengendali (atau Tampilan SwiftUI) tetap tipis. ViewModel tidak bergantung pada kerangka kerja antarmuka pengguna sehingga jauh lebih mudah diuji.
Satu Bagian Lengkap
Berikut bagian MVVM kecil namun lengkap yang menghubungkan semua lapisan.
struct Account { let balance: Decimal }
final class AccountViewModel: ObservableObject {
@Published var balanceText: String
init(account: Account) {
balanceText = "$" + "\(account.balance)"
}
}
struct AccountView: View {
@StateObject var viewModel: AccountViewModel
var body: some View { Text(viewModel.balanceText) }
}Pemeriksaan Singkat
Uji pemahaman Anda tentang tanggung jawab dalam MVVM.
Ringkasan
Anda telah mempelajari tiga lapisan MVVM beserta batasannya:
- Model — data mentah dan aturan bisnis, tanpa antarmuka pengguna
- ViewModel — logika penyajian dan maksud pengguna
- Tampilan — perenderan murni status ViewModel
Memisahkan tanggung jawab ini membuat kode Anda mudah diuji, dapat digunakan kembali, dan mudah dipahami. Selanjutnya, kita akan menghubungkan ViewModel ke Tampilan dengan pengikatan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pola MVVM” gratis?
Ya — teks lengkap “Pola MVVM” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Swift Academy, upgrade ke CoddyKit PRO. Kursus Swift Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pola MVVM”?
Pisahkan tanggung jawab view, view model, dan model. Kamu berlatih Swift Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Swift Academy?
Tidak diperlukan pengalaman sebelumnya. Swift Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Pola MVVM” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Swift Academy ini?
Ya. Setiap pelajaran Swift Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.