ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်
Real app တစ်ခုမှာ layer အလိုက် ခွဲထားရပါတယ် — UI layer (Composable screen), ViewModel layer (business logic, state management), Data layer (Room database, DAO)။ Todo app က CRUD operation အားလုံး (todo အသစ်ထည့်ခြင်း-Create, list ကြည့်ခြင်း-Read, done/undone toggle-Update, item ဖျက်ခြင်း-Delete) ကို layer သုံးခုစလုံးမှာ ချိတ်ဆက်ဆောင်ရွက်ရမှာပါ.
လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်
`TodoEntity`/`TodoDao`/`AppDatabase` (data layer) → `TodoViewModel` (Flow ဖြင့် DAO ကို observe, add/toggle/delete function) → `TodoListScreen`/`AddTodoScreen` (UI layer, LazyColumn + Navigation) ဆိုပြီး layer သုံးခုကို တစ်ဆင့်ချင်း ဆောက်ပါ — Navigation Compose ကို သုံးပြီး list screen ကနေ add screen ဆီ ကူးပြောင်းနိုင်အောင် ချိတ်ဆက်ပါ.
အတူတူ ကြည့်မယ်
// Full flow: UI calls ViewModel, ViewModel calls DAO
@Composable
fun TodoListScreen(viewModel: TodoViewModel = hiltViewModel(), onAddClick: () -> Unit) {
val todos by viewModel.todos.collectAsState()
Scaffold(
floatingActionButton = {
FloatingActionButton(onClick = onAddClick) { Icon(Icons.Default.Add, null) }
}
) { padding ->
LazyColumn(modifier = Modifier.padding(padding)) {
items(todos) { todo ->
Row {
Checkbox(
checked = todo.isDone,
onCheckedChange = { viewModel.toggleDone(todo.id) }
)
Text(todo.title)
IconButton(onClick = { viewModel.delete(todo.id) }) {
Icon(Icons.Default.Delete, null)
}
}
}
}
}
}Todo app ကို run ရင် — todo ထည့်နိုင်, done/undone toggle လုပ်နိုင်, delete လုပ်နိုင်, app restart လုပ်လည်း data ကျန်ရှိနေတာ တွေ့ရမည်။၅ မိနစ် စမ်းကြည့်
Todo app တစ်ခုလုံးကို layer ၃ ခု (Data/ViewModel/UI) ဖြင့် ကိုယ်တိုင် ဆောက်ကြည့်ပါ — CRUD operation ၄ ခုလုံး emulator ပေါ်မှာ အလုပ်လုပ်ကြောင်း verify လုပ်ကြည့်ပါ။
သတိလေးတစ်ချက်
Todo item ကို delete လုပ်တဲ့အခါ 'undo' option မထားဘဲ permanent delete လုပ်ရင် — user experience အတွက် Snackbar + 'Undo' button ကို ထည့်စဉ်းစားသင့်ပါတယ်။