MVVM Deseni
Görünüm, görünüm modeli ve model sorumluluklarını ayırın.
MVVM Deseni, CoddyKit'te ücretsiz bir Swift Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Swift Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Swift Academy kursu toplamda 4 dersten oluşur.
MVVM Nedir?
MVVM, Model-Görünüm-ViewModel ifadesinin kısaltmasıdır. Uygulamanızı, her birinin tek ve açık bir sorumluluğa sahip olduğu üç katmana ayıran bir mimari kalıptır.
- Model — veriler ve iş kuralları
- Görünüm — kullanıcının gördükleri
- ViewModel — Model verilerini Görünüm için hazırlayan köprü
Amaç sorumlulukların ayrılmasıdır: her katman diğerlerinden bağımsız olarak yalnızca kendi nedeni doğrultusunda değişir.
Model Katmanı
Model, ham verilerinizi ve bunları yöneten kuralları tutar. Ekran veya öğelerin nasıl görüntülendiği hakkında hiçbir şey bilmez.
Modeller genellikle yalın yapılardan veya alan nesnelerinden oluşur. Kullanıcı arayüzü bağımlılıkları olmadığından kolayca sınanabilirler.
struct User {
let id: UUID
let firstName: String
let lastName: String
let isPremium: Bool
}
struct Order {
let items: [String]
let total: Decimal
}Görünüm Katmanı
Görünüm tamamen sunuma yöneliktir. SwiftUI'da bu, View yapılarınız; UIKit'te ise UIViewController ve alt görünümleridir.
İyi bir Görünüm, iş mantığı içermez. Yalnızca durumu görüntüler ve kullanıcı eylemlerini ViewModel'e iletir.
struct ProfileView: View {
@StateObject var viewModel: ProfileViewModel
var body: some View {
VStack {
Text(viewModel.displayName)
if viewModel.showBadge {
Text("Premium")
}
}
}
}ViewModel Katmanı
ViewModel, Model ile Görünüm arasında bulunur. Ham Model verilerini alır ve bunları Görünümün doğrudan gösterebileceği sunuma hazır değerlere dönüştürür.
Ayrıca kullanıcı etkileşime girdiğinde Görünümün çağırdığı istekleri (yöntemleri) sunar.
final class ProfileViewModel: ObservableObject {
@Published var displayName: String
@Published var showBadge: Bool
init(user: User) {
displayName = user.firstName + " " + user.lastName
showBadge = user.isPremium
}
}Sorumlulukları Neden Ayırmalı?
Biçimlendirme, ağ iletişimi ve görüntüleme bir görünüm denetleyicisinin içinde birbirine karıştığında, bu dosya devasa ve sınanamayan bir yığına dönüşür.
Sorumlulukları ayırarak:
- Model ekranlar arasında yeniden kullanılabilir
- ViewModel kullanıcı arayüzü olmadan birim sınamasından geçirilebilir
- Görünüm küçük ve bildirimsel kalır
Model'e Ait Olanlar
Model'e şunları koyun:
- Alan varlıkları (
User,Product) - İş doğrulama kuralları
- Kalıcılık ve ağ iletişimi soyutlamaları (genellikle ViewModel'in çağırdığı hizmetler aracılığıyla)
Asla kullanıcı arayüzü metinlerini, renklerini veya biçimlendirmesini Model'e koymayın.
ViewModel'e Ait Olanlar
ViewModel, sunum mantığını yönetir:
- Tarihleri, para birimlerini ve adları görüntüleme metinlerine biçimlendirme
- Hangi kullanıcı arayüzü durumlarının görünür olduğuna karar verme (yükleniyor, hata, boş)
- Hizmet çağrılarını koordine etme ve sonuçları sunma
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) ?? "-"
}
}Görünüme Ait Olanlar
Görünüm yalnızca şunları yapmalıdır:
- Kullanıcı arayüzü öğelerini düzenlemek ve görüntülemek
- ViewModel'den yayımlanmış durumu okumak
- ViewModel yöntemlerini çağırarak dokunma ve hareketleri iletmek
Bir Görünümün içinde iş kurallarına karar veren bir if görürseniz, bu mantık muhtemelen ViewModel'e aittir.
MVVM'de Veri Akışı
Veri akışı tek yönde, eylemlerin akışı ise ters yöndedir:
- Model -> ViewModel -> Görünüm veri için
- Görünüm -> ViewModel kullanıcı istekleri için
Görünüm, Model ile doğrudan iletişim kurmaz. Bu, bağımlılıkların alanınıza doğru içe yönelmesini sağlar.
MVVM ile MVC Karşılaştırması
Klasik MVC'de denetleyici, biçimlendirme, ağ iletişimi ve görünüm bağlantılarını aynı anda üstlendiği için çoğu zaman devasa hâle gelir.
MVVM, bu sunum mantığını ViewModel'e çıkararak denetleyiciyi (veya SwiftUI Görünümünü) yalın bırakır. ViewModel, kullanıcı arayüzü çerçevesinden bağımsızdır; bu nedenle sınanması çok daha kolaydır.
Eksiksiz Bir Kesit
Katmanları birbirine bağlayan küçük ama eksiksiz bir MVVM kesiti aşağıda verilmiştir.
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) }
}Hızlı Kontrol
MVVM sorumluluklarına ilişkin anlayışınızı sınayın.
Özet
MVVM'nin üç katmanını ve aralarındaki sınırları öğrendiniz:
- Model — kullanıcı arayüzü içermeyen ham veriler ve iş kuralları
- ViewModel — sunum mantığı ve istekler
- Görünüm — ViewModel durumunun yalnızca görüntülenmesi
Bu sorumlulukları ayrı tutmak kodunuzu sınanabilir, yeniden kullanılabilir ve anlaşılması kolay hâle getirir. Sırada bağlamalarla bir ViewModel'i Görünüme bağlayacaksınız.
Sıkça Sorulan Sorular
“MVVM Deseni” dersi ücretsiz mi?
Evet — “MVVM Deseni” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Swift Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Swift Academy kursu toplamda 4 dersten oluşur.
“MVVM Deseni” dersinde ne öğreneceğim?
Görünüm, görünüm modeli ve model sorumluluklarını ayırın. Swift Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Swift Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Swift Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“MVVM Deseni” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Swift Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Swift Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.