Project — Todo App (CRUD + SwiftData + MVVM)

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

Real app တစ်ခုမှာ layer အလိုက် ခွဲထားရပါတယ် — View layer (SwiftUI screen), ViewModel layer (business logic, ObservableObject), Data layer (SwiftData model)။ Todo app က CRUD operation အားလုံး (todo အသစ်ထည့်ခြင်း-Create, list ကြည့်ခြင်း-Read, done/undone toggle-Update, item ဖျက်ခြင်း-Delete) ကို layer သုံးခုစလုံးမှာ ချိတ်ဆက်ဆောင်ရွက်ရမှာပါ.

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

`TodoItem` (@Model, data layer) → `TodoViewModel` (ObservableObject, add/toggle/delete function) → `TodoListScreen`/`AddTodoScreen` (View layer, List + NavigationStack) ဆိုပြီး layer သုံးခုကို တစ်ဆင့်ချင်း ဆောက်ပါ — NavigationStack ကို သုံးပြီး list screen ကနေ add screen ဆီ ကူးပြောင်းနိုင်အောင် ချိတ်ဆက်ပါ, `List`'s built-in swipe-to-delete ကို delete operation အတွက် သုံးနိုင်ပါတယ်.

Data layer (SwiftData) → ViewModel layer (ObservableObject) → View layer (SwiftUI) ဆိုတဲ့ layer ခွဲထားခြင်း
CRUD operation ၄ ခုလုံး (Create/Read/Update/Delete) ကို layer အားလုံးမှာ ချိတ်ဆက်ခြင်း
NavigationStack ဖြင့် list screen ↔ add screen ကူးပြောင်းနိုင်ခြင်း, List's swipe-to-delete ကို အသုံးချခြင်း

အတူတူ ကြည့်မယ်

swift

struct TodoListScreen: View {
    @Query private var todos: [TodoItem]
    @Environment(\.modelContext) private var modelContext
    @State private var showingAddScreen = false

    var body: some View {
        NavigationStack {
            List {
                ForEach(todos) { todo in
                    HStack {
                        Image(systemName: todo.isDone ? "checkmark.circle.fill" : "circle")
                            .onTapGesture { todo.isDone.toggle() }
                        Text(todo.title)
                    }
                }
                .onDelete { indices in
                    for index in indices { modelContext.delete(todos[index]) }
                }
            }
            .navigationTitle("Todos")
            .toolbar {
                Button("Add") { showingAddScreen = true }
            }
        }
    }
}

You should see

Todo app ကို run ရင် — todo ထည့်နိုင်, done/undone toggle လုပ်နိုင်, swipe-to-delete လုပ်နိုင်, app restart လုပ်လည်း data ကျန်ရှိနေတာ တွေ့ရမည်။

၅ မိနစ် စမ်းကြည့်

Todo app တစ်ခုလုံးကို layer ၃ ခု (Data/ViewModel/View) ဖြင့် ကိုယ်တိုင် ဆောက်ကြည့်ပါ — CRUD operation ၄ ခုလုံး Simulator ပေါ်မှာ အလုပ်လုပ်ကြောင်း verify လုပ်ကြည့်ပါ။

သတိလေးတစ်ချက်

Todo item ကို delete လုပ်တဲ့အခါ 'undo' option မထားဘဲ permanent delete လုပ်ရင် — user experience အတွက် alert dialog ဒါမှမဟုတ် undo gesture ကို ထည့်စဉ်းစားသင့်ပါတယ်။