Thuta Learning
ရှာဖွေရန်
ProjectsMobile Developmentintermediate

Project — Todo App (CRUD + Room + ViewModel)

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

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

  • Project — Todo App (CRUD + Room + ViewModel) ကို ကြောက်စရာမလိုအောင် နားလည်မယ်
  • ကိုယ်တိုင် Android Studio/Compose code ကို run ကြည့်တတ်မယ်
  • Real project ထဲမှာ ဒီ concept ကို ချက်ချင်း အသုံးချတတ်မယ်

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

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 ဆီ ကူးပြောင်းနိုင်အောင် ချိတ်ဆက်ပါ.

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

kotlin
// 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)
                    }
                }
            }
        }
    }
}
You should see
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 ကို ထည့်စဉ်းစားသင့်ပါတယ်။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

  • Delete confirmation dialog မထားဘဲ item ကို instant delete ခြင်း — user accidental tap ကြောင့် data ပျောက်နိုင်ပါတယ်
  • Empty state (todo list ဗလာနေတဲ့အခါ) ကို handle မလုပ်ဘဲ blank screen ချန်ထားခြင်း — UX ကောင်းတဲ့ app တွေက 'No todos yet' message ပြပေးလေ့ရှိပါတယ်

အခု ကိုယ်တိုင် စမ်းကြည့်

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

You'll know it worked when: Todo app ကို run ရင် — todo ထည့်နိုင်, done/undone toggle လုပ်နိုင်, delete လုပ်နိုင်, app restart လုပ်လည်း data ကျန်ရှိနေတာ တွေ့ရမည်။

Project — Todo App (CRUD + Room + ViewModel) | Thuta Learning