Unggulan

UTS - Aplikasi To Do Planner

Dokumentasi Aplikasi To-Do Planner

Nama : Christoforus Indra Bagus Pratama

NRP : 5025231124

Mata Kuliah : Pemrograman Perangkat Bergerak (C)

Tanggal : 25 April 2026

Pertemuan : Final Project (ETS)

Proyek : To-Do Planner - Aplikasi Manajemen Tugas Android

Kode : Link Github

Presentasi : Link Canva

Video : Link Youtube

1. Deskripsi Aplikasi

To-Do Planner adalah aplikasi manajemen tugas dan perencanaan jadwal harian yang dirancang dengan teknologi modern untuk meningkatkan produktivitas pengguna. Aplikasi ini dibangun sepenuhnya menggunakan Jetpack Compose, framework UI declarative terbaru dari Android yang memberikan pengalaman pengguna yang responsif, mulus, dan intuitif. Aplikasi ini memungkinkan pengguna untuk membuat, mengedit, menghapus, dan mengelola tugas mereka dengan cara yang efisien dan mudah digunakan.
Dengan antarmuka yang modern dan minimalis, To-Do Planner menggabungkan fungsionalitas manajemen tugas dengan visualisasi kalender interaktif. Pengguna dapat beralih antara tampilan daftar tugas dan tampilan kalender dengan mudah menggunakan navigasi swipe yang intuitif. Aplikasi ini juga mendukung tugas berulang dengan berbagai opsi pengulangan seperti harian, mingguan, bulanan, atau pada hari-hari spesifik yang dipilih pengguna.
Bahasa Antarmuka: Seluruh antarmuka aplikasi menggunakan bahasa Indonesia, sehingga mudah dipahami oleh pengguna lokal. Minimum SDK: Aplikasi kompatibel dengan Android 7.0 (API Level 24) dan versi Android yang lebih baru, memastikan jangkauan pengguna yang luas.

2. Fitur-Fitur Utama Aplikasi

2.1 Navigasi Mulus Berbasis Swipe
Fitur: Transisi menu antara dua layar utama dapat dilakukan dengan mengusap layar (swipe gesture) secara horizontal. Pengguna dapat dengan mudah beralih antara tampilan "Tugas" (Task List) dan "Kalender" (Calendar View) tanpa perlu mengetuk tombol navigasi yang konvensional.
Implementasi: Menggunakan HorizontalPager dari Jetpack Compose yang memberikan pengalaman navigasi yang halus dan responsif. Setiap page dapat diakses dengan swipe gesture yang natural.
Keuntungan: UX yang lebih modern dan intuitif, pengalaman navigasi yang lebih cepat, dan interface yang lebih rapi tanpa terlalu banyak tombol di layar.
2.2 Daftar Tugas Cerdas (Smart Task List)
Pengelompokan Otomatis: Daftar tugas secara otomatis dikelompokkan berdasarkan kategori waktu relatif terhadap hari sekarang:
  • Lewat Waktu: Menampilkan hanya tugas yang belum selesai tetapi sudah melewati tenggat waktu. Grup ini eksklusif dan membantu pengguna fokus pada prioritas tinggi.
  • Hari Ini: Menampilkan semua tugas yang memiliki tenggat waktu di hari sekarang.
  • Besok: Tugas dengan tenggat waktu di hari berikutnya.
  • Lusa: Tugas dengan tenggat waktu di dua hari ke depan.
  • Tanpa Tenggat: Tugas yang tidak memiliki tanggal tenggat waktu, kategori ini terbuka secara default agar mudah diakses.
Toggle Tampilan: Pengguna dapat menyembunyikan atau menampilkan daftar tugas yang sudah selesai dengan satu tombol toggle, memberikan fleksibilitas dalam melihat daftar tugas yang relevan.
2.3 Kalender Interaktif
Grid Bulanan: Menampilkan kalender bulanan dalam format grid yang intuitif, dengan setiap sel mewakili satu hari. Hari-hari yang memiliki tugas ditandai dengan indikator visual (titik penanda atau highlight khusus).
Daftar Tugas Per Tanggal: Ketika pengguna mengklik tanggal tertentu di kalender, aplikasi menampilkan semua tugas yang terkait dengan tanggal tersebut. Ini memudahkan pengguna untuk melihat apa yang harus dilakukan pada hari tertentu.
Tombol Tambah Tugas Instan: Di tampilan kalender, terdapat tombol (+) yang memungkinkan pengguna menambahkan tugas baru untuk tanggal yang sedang dipilih. Sistem secara otomatis mendeteksi tanggal yang dipilih dan mengaturnya sebagai tenggat waktu default untuk tugas baru.
Navigasi Bulan: Pengguna dapat navigasi ke bulan sebelumnya atau bulan berikutnya dengan gesture swipe horizontal, memberikan fleksibilitas dalam menjelajahi kalender.
2.4 Manajemen Tugas Lanjutan
Tenggat Waktu Detail: Aplikasi mendukung pengaturan tenggat waktu berdasarkan tanggal spesifik. Pengguna juga dapat menambahkan waktu spesifik (jam dan menit) untuk tugas mereka, sehingga tugas dapat dijadwalkan pada waktu tertentu.
Tugas Berulang (Recurring Tasks): Aplikasi menyediakan fitur untuk membuat tugas berulang otomatis dengan berbagai opsi:
  • Harian: Tugas berulang setiap hari
  • Mingguan: Tugas berulang setiap minggu pada hari yang sama
  • Bulanan: Tugas berulang setiap bulan pada tanggal yang sama
  • Hari Kustom: Pengguna dapat memilih hari-hari spesifik untuk pengulangan (misalnya: Senin dan Rabu setiap minggu)
Kontrol Pengulangan: Pengguna dapat menentukan berapa kali tugas akan diulang, atau membiarkan tugas berulang tanpa batas. Dengan fitur ini, pengguna memiliki kontrol penuh atas automasi tugas mereka.
Edit Tanpa Mengganggu Perulangan: Ketika mengedit tugas yang berulang, pengguna dapat mengubah judul, catatan, atau tanggal tanpa mempengaruhi siklus perulangan sebelumnya. Ini memberikan fleksibilitas dalam manajemen tugas.
2.5 Interaksi dan Gesture Modern
Swipe to Delete: Pengguna dapat menghapus tugas dengan gesture swipe ke samping. Fitur ini memberikan pengalaman yang smooth dan intuitif dalam mengelola daftar tugas.
Undo Delete: Setelah menghapus tugas, pengguna dapat membatalkan penghapusan melalui notifikasi Snackbar yang muncul di bagian bawah layar, memberikan jaminan keamanan bagi pengguna.
Splash Screen: Aplikasi menampilkan splash screen yang estetik dengan logo aplikasi di awal peluncuran, memberikan kesan profesional saat pengguna membuka aplikasi.
Checkbox dan Flag: Pengguna dapat menandai tugas sebagai selesai dengan checkbox, dan menandai tugas penting dengan fitur flag (bendera), memberikan kontrol penuh atas status tugas.

3. Arsitektur Aplikasi

Aplikasi To-Do Planner menggunakan arsitektur MVVM (Model-View-ViewModel), yang merupakan pola arsitektur modern yang direkomendasikan oleh Google untuk pengembangan aplikasi Android. Arsitektur ini memisahkan logika bisnis dari antarmuka pengguna, membuat kode lebih terstruktur, testable, dan mudah untuk di-maintain.

📱 UI Layer (Presentation)

Jetpack Compose, Material 3, Navigation, HorizontalPager

⬇️

🧠 ViewModel Layer (State Management)

StateFlow, ViewModel, State Management

⬇️

📦 Repository Layer (Data Abstraction)

TaskRepository, Dependency Injection

⬇️

💾 Data Layer (Local Storage)

Room Database, SQLite, Coroutines

3.1 Penjelasan Setiap Layer
Layer Deskripsi Tanggung Jawab
UI Layer Lapisan presentasi yang bertanggung jawab menampilkan antarmuka kepada pengguna. Menggunakan Jetpack Compose untuk UI deklaratif dan Material 3 untuk design system yang modern. Menampilkan data, menangkap input pengguna, navigasi antar layar
ViewModel Lapisan yang mengelola state (kondisi) aplikasi dan logika presentasi. Menggunakan StateFlow untuk reactive state management yang efficient. Mengelola state UI, menangani event dari UI, menyediakan data ke UI
Repository Lapisan abstraksi yang menghubungkan ViewModel dengan data layer. Menyembunyikan detail implementasi data access dari ViewModel. Menyediakan interface untuk akses data, logika bisnis tingkat tinggi
Data Layer Lapisan yang mengelola penyimpanan data lokal menggunakan Room Database (SQLite). Menggunakan Coroutines untuk operasi asynchronous yang aman dan efficient. Akses database, penyimpanan data, query data
3.2 Dependency Injection
Aplikasi menggunakan sistem Dependency Injection sederhana melalui AppModule yang bertanggung jawab untuk membuat instance dari repository dan komponen lainnya. Ini memastikan bahwa setiap komponen mendapatkan dependency yang benar dan singleton instances di-maintain dengan baik.

4. Struktur File dan Folder Proyek

Berikut adalah struktur direktori lengkap dari proyek To-Do Planner, dengan penjelasan fungsi setiap folder dan file penting:
📁 Struktur Proyek Lengkap
ETS-PPB/
├── app/
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/example/todolist/
│   │   │   │   ├── MainActivity.kt
│   │   │   │   │   → Entry point aplikasi, mengatur navigation dan UI
│   │   │   │   │
│   │   │   │   ├── domain/
│   │   │   │   │   ├── model/
│   │   │   │   │   │   ├── Task.kt → Entity Task model
│   │   │   │   │   │   └── RepeatMode.kt → Enum untuk pengulangan
│   │   │   │   │
│   │   │   │   ├── data/
│   │   │   │   │   ├── local/ → Room Database
│   │   │   │   │   │   ├── TaskDao.kt
│   │   │   │   │   │   └── TaskDatabase.kt
│   │   │   │   │   └── repository/
│   │   │   │   │       └── TaskRepository.kt
│   │   │   │   │
│   │   │   │   ├── ui/
│   │   │   │   │   ├── tasklist/ → Task List Screen
│   │   │   │   │   │   ├── TaskListScreen.kt
│   │   │   │   │   │   ├── AddTaskDialog.kt
│   │   │   │   │   │   └── TaskFilter.kt
│   │   │   │   │   ├── calendar/ → Calendar Screen
│   │   │   │   │   │   └── CalendarScreen.kt
│   │   │   │   │   └── theme/ → Material 3 Theme
│   │   │   │   │       └── Theme.kt
│   │   │   │   │
│   │   │   │   ├── viewmodel/
│   │   │   │   │   ├── TaskListViewModel.kt
│   │   │   │   │   └── TaskListViewModelFactory.kt
│   │   │   │   │
│   │   │   │   └── di/
│   │   │   │       └── AppModule.kt → Dependency Injection
│   │   │   │
│   │   │   ├── res/ → Resources
│   │   │   │   ├── drawable/ → Images & drawables
│   │   │   │   └── values/ → Strings & Colors
│   │   │   │
│   │   │   └── AndroidManifest.xml
│   │   │
│   │   ├── test/ → Unit Tests
│   │   └── androidTest/ → Integration Tests
│   │
│   └── build.gradle.kts → Module build config
│
├── build.gradle.kts → Root build config
├── settings.gradle.kts → Project settings
├── README.md → Project documentation
└── blogger.html → This file
4.1 Penjelasan Folder dan File Utama
📄 MainActivity.kt
File utama entry point aplikasi. Bertanggung jawab untuk inisialisasi aplikasi, mengatur theme, menampilkan splash screen, dan mengatur navigation antara layar Task List dan Calendar menggunakan HorizontalPager.
📁 domain/model/
Folder ini berisi entity model aplikasi. Task.kt mendefinisikan data class untuk Task dengan properti seperti id, title, notes, deadline, dan repeat settings. RepeatMode.kt adalah enum yang mendefinisikan mode pengulangan tugas (NONE, DAILY, WEEKLY, MONTHLY, CUSTOM_DAYS).
📁 data/local/
Folder ini berisi implementasi Room Database. TaskDao.kt mendefinisikan interface untuk operasi database (CRUD operations). TaskDatabase.kt mendefinisikan database class dan menyediakan instance singleton untuk database access di seluruh aplikasi.
📁 data/repository/
TaskRepository.kt mengimplementasikan repository pattern yang menyediakan interface abstrak untuk akses data. Repository ini menangani logika bisnis seperti filtering tasks by date, grouping, dan recurring task generation.
📁 ui/tasklist/
TaskListScreen.kt adalah composable utama untuk menampilkan daftar tugas dengan grouping berdasarkan waktu. AddTaskDialog.kt adalah dialog untuk menambah atau mengedit tugas, dengan fitur lengkap seperti date picker, time picker, repeat settings, dan notes. TaskFilter.kt berisi logic untuk filtering dan grouping tasks.
📁 ui/calendar/
CalendarScreen.kt adalah composable untuk menampilkan kalender bulanan interaktif dengan indikator hari yang memiliki tugas, dan menampilkan daftar tugas untuk tanggal yang dipilih.
📁 viewmodel/
TaskListViewModel.kt adalah ViewModel yang mengelola state aplikasi dan logika presentasi. Menggunakan StateFlow untuk reactive state management. TaskListViewModelFactory.kt adalah factory untuk membuat instance ViewModel dengan dependency injection yang tepat.
📁 di/
AppModule.kt adalah dependency injection container yang bertanggung jawab untuk membuat instance dari repository dan komponen lainnya, memastikan singleton pattern terjaga dengan baik.

5. Penjelasan Detil Kode MainActivity.kt

MainActivity.kt adalah file utama yang mengatur entry point aplikasi, navigation flow, dan integrasi berbagai komponen UI. File ini menggunakan Jetpack Compose untuk membangun UI secara deklaratif. Berikut adalah penjelasan detil dari setiap fungsi dan kode dalam MainActivity.kt.
5.1 MainActivity Class dan onCreate Function
🎯 MainActivity : ComponentActivity()
MainActivity adalah activity utama yang extends ComponentActivity (dari Jetpack Compose). Ini adalah entry point aplikasi yang akan dijalankan pertama kali saat user membuka aplikasi.
onCreate() Function
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    setContent {
        ToDoListTheme {
            var showSplash by remember { mutableStateOf(true) }
            
            LaunchedEffect(Unit) {
                kotlinx.coroutines.delay(1500)
                showSplash = false
            }

            if (showSplash) {
                SplashScreen()
            } else {
                MainScreen()
            }
        }
    }
}
Penjelasan:
  • super.onCreate(savedInstanceState): Memanggil super class untuk inisialisasi activity standar Android.
  • enableEdgeToEdge(): Mengaktifkan edge-to-edge rendering untuk menggunakan seluruh ruang layar, termasuk area di belakang system UI (status bar dan navigation bar).
  • setContent { }: Method yang menetapkan Compose UI untuk activity. Semua Composable UI didefinisikan di dalam lambda ini.
  • ToDoListTheme: Wrapper theme yang mengaplikasikan Material 3 theme dan color palette ke seluruh aplikasi.
  • var showSplash by remember { mutableStateOf(true) }: State variable yang melacak apakah splash screen harus ditampilkan. Diinisialisasi dengan nilai true.
  • LaunchedEffect(Unit): Side effect yang dijalankan saat composable pertama kali dirender. Menggunakan delay 1500ms (1.5 detik) sebelum menyembunyikan splash screen.
  • Conditional Rendering: Jika showSplash true, tampilkan SplashScreen. Jika false, tampilkan MainScreen (aplikasi utama).
5.2 MainScreen Composable Function
MainScreen() Composable
@Composable
fun MainScreen() {
    val pagerState = rememberPagerState(pageCount = { 2 })
    val coroutineScope = rememberCoroutineScope()

    Scaffold(
        bottomBar = {
            NavigationBar(
                containerColor = MaterialTheme.colorScheme.surface,
                tonalElevation = 8.dp
            ) {
                NavigationBarItem(
                    icon = { Icon(Icons.AutoMirrored.Filled.List, contentDescription = "Tugas") },
                    label = { Text("Tugas") },
                    selected = pagerState.currentPage == 0,
                    onClick = {
                        coroutineScope.launch {
                            pagerState.animateScrollToPage(0)
                        }
                    }
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.DateRange, contentDescription = "Kalender") },
                    label = { Text("Kalender") },
                    selected = pagerState.currentPage == 1,
                    onClick = {
                        coroutineScope.launch {
                            pagerState.animateScrollToPage(1)
                        }
                    }
                )
            }
        }
    ) { innerPadding ->
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.padding(innerPadding)
        ) { page ->
            if (page == 0) {
                ToDoListApp()
            } else {
                // Calendar Screen
            }
        }
    }
}
Penjelasan:
  • pagerState = rememberPagerState(pageCount = { 2 }): Membuat pager state untuk mengelola navigasi antara 2 page (Task List dan Calendar). PagerState melacak current page yang sedang ditampilkan.
  • coroutineScope = rememberCoroutineScope(): Membuat coroutine scope untuk menjalankan operasi async seperti animasi page scroll.
  • Scaffold: Layout komponen Material 3 yang menyediakan struktur dasar dengan berbagai slot (topBar, bottomBar, content, etc.).
  • NavigationBar: Bottom navigation bar yang menampilkan 2 item navigasi (Tugas dan Kalender).
  • selected = pagerState.currentPage == 0: Item dianggap selected jika index page sama dengan index item.
  • onClick dengan coroutineScope.launch { }: Saat user klik item navigation, animasi page scroll ke halaman yang sesuai menggunakan pagerState.animateScrollToPage().
  • HorizontalPager: Komponen yang mengimplementasikan horizontal swipe navigation dengan 2 page. User dapat swipe layar untuk berpindah halaman.
  • page == 0 → ToDoListApp(), page == 1 → CalendarScreen: Logic untuk menampilkan screen yang sesuai berdasarkan current page.
5.3 ToDoListApp Composable Function
ToDoListApp() Composable
@Composable
fun ToDoListApp() {
    val context = LocalContext.current
    val repository = remember(context) {
        AppModule.provideTaskRepository(context)
    }
    val taskListViewModel: TaskListViewModel = viewModel(
        factory = TaskListViewModelFactory(repository)
    )
    val uiState by taskListViewModel.uiState.collectAsState()

    TaskListScreen(
        tasks = uiState.tasks,
        groupedTasks = uiState.groupedTasks,
        showCompleted = uiState.showCompleted,
        onToggleShowCompleted = taskListViewModel::toggleShowCompleted,
        onTaskCheckedChange = taskListViewModel::onTaskCheckedChanged,
        onToggleFlagTask = { task, isImportant ->
            taskListViewModel.editTask(task.copy(isImportant = isImportant))
        },
        onAddTask = { title, notes, deadlineMillis, deadlineHasTime, repeatMode, repeatDays, repeatCount -> 
            taskListViewModel.addTask(title, notes, deadlineMillis, deadlineHasTime, repeatMode, repeatDays, repeatCount) 
        },
        onEditTask = taskListViewModel::editTask,
        onDeleteTask = taskListViewModel::deleteTask,
        onUndoDelete = taskListViewModel::undoDelete
    )
}
Penjelasan:
  • context = LocalContext.current: Mengambil context aplikasi untuk keperluan repository initialization.
  • repository = remember(context) { }: Membuat instance repository menggunakan AppModule. Remember function memastikan repository hanya dibuat sekali (singleton) dan tidak di-recreate saat recomposition.
  • taskListViewModel = viewModel(factory = TaskListViewModelFactory(repository)): Membuat instance ViewModel menggunakan factory pattern. Factory ini menerima repository sebagai dependency yang akan diinjeksikan ke ViewModel.
  • uiState = taskListViewModel.uiState.collectAsState(): Mengumpulkan StateFlow dari ViewModel sebagai Compose State. Setiap kali state berubah, UI akan recompose otomatis.
  • TaskListScreen(...): Menampilkan screen daftar tugas dengan meneruskan state dan callback ke child composable.
  • Callback Functions: Semua callback (onAddTask, onEditTask, dll) dihubungkan ke ViewModel methods, sehingga user interaction di UI akan memanggil ViewModel methods yang mengupdate state.
5.4 SplashScreen Composable Function
SplashScreen() Composable
@Composable
fun SplashScreen() {
    androidx.compose.foundation.layout.Box(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.surface),
        contentAlignment = androidx.compose.ui.Alignment.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.task_planner_logo),
            contentDescription = "App Logo",
            modifier = Modifier.size(200.dp)
        )
    }
}
Penjelasan:
  • Box(modifier = Modifier.fillMaxSize()): Container yang mengisi seluruh ruang layar dengan ukuran maksimal.
  • .background(MaterialTheme.colorScheme.surface): Mengatur background color menggunakan Material 3 surface color.
  • contentAlignment = Alignment.Center: Menempatkan content (logo) di tengah-tengah Box.
  • Image(painter = painterResource(id = R.drawable.task_planner_logo)): Menampilkan logo aplikasi dari resource drawable.
  • modifier = Modifier.size(200.dp): Mengatur ukuran image menjadi 200.dp x 200.dp.
5.5 Calendar Screen Integration
Calendar Screen di MainScreen
} else {
    val context = LocalContext.current
    val repository = remember(context) { AppModule.provideTaskRepository(context) }
    val taskListViewModel: TaskListViewModel = viewModel(
        factory = TaskListViewModelFactory(repository)
    )
    val uiState by taskListViewModel.uiState.collectAsState()

    CalendarScreen(
        tasks = uiState.tasks,
        onTaskCheckedChange = taskListViewModel::onTaskCheckedChanged,
        onToggleFlagTask = { task: Task, isImportant: Boolean ->
            taskListViewModel.editTask(task.copy(isImportant = isImportant))
        },
        onDeleteTask = taskListViewModel::deleteTask,
        onEditTask = taskListViewModel::editTask,
        onAddTask = { title: String, notes: String?, deadlineMillis: Long?, deadlineHasTime: Boolean, repeatMode: com.example.todolist.domain.model.RepeatMode, repeatDays: String?, repeatCount: Int? ->
            taskListViewModel.addTask(title, notes, deadlineMillis, deadlineHasTime, repeatMode, repeatDays, repeatCount)
        }
    )
}
Penjelasan:
  • Kondisi page == 1: Ketika user berada di page kedua (Kalender), kode ini akan dijalankan.
  • Repository dan ViewModel Initialization: Sama seperti ToDoListApp, dilakukan DI untuk mendapatkan repository dan ViewModel instance.
  • CalendarScreen(...): Menampilkan calendar screen dengan data dan callbacks yang sama seperti TaskListScreen.
  • Parameter Details: onAddTask callback menerima semua parameter termasuk title, notes, deadline, repeatMode, etc., memastikan fitur repeat dan deadline juga tersedia di calendar view.

6. Alur Eksekusi Aplikasi

Berikut adalah alur lengkap eksekusi aplikasi dari saat diluncurkan hingga siap digunakan:
1. Aplikasi Diluncurkan: User mengklik icon aplikasi di home screen atau launcher. Android system memanggil MainActivity.
2. onCreate() Dijalankan: Method onCreate di MainActivity dijalankan. enableEdgeToEdge() dipanggil untuk menggunakan full screen space. setContent { } didefinisikan dengan Compose UI.
3. Splash Screen Ditampilkan: showSplash state diset ke true, sehingga SplashScreen() composable dirender. Logo aplikasi ditampilkan di tengah layar.
4. Delay 1.5 Detik: LaunchedEffect menjalankan delay 1500ms, memberikan waktu user melihat splash screen.
5. Transisi ke Main Screen: Setelah delay selesai, showSplash diset ke false. UI recompose dan menampilkan MainScreen() sebagai gantinya.
6. Main Screen Diinisialisasi: MainScreen() membuat HorizontalPager dengan 2 page, merender NavigationBar dengan 2 menu item (Tugas dan Kalender). Page 0 (Tugas) ditampilkan secara default.
7. ViewModel dan Repository Initialization: ToDoListApp() membuat repository instance menggunakan AppModule, yang membuat/mengambil instance dari Room Database. ViewModel dibuat menggunakan factory pattern dengan repository dependency.
8. Data Dimuat dari Database: ViewModel mengakses repository untuk mengambil semua tasks dari database. StateFlow uiState di-update dengan data tasks, groupedTasks (tasks yang digroup berdasarkan waktu), dan showCompleted status.
9. TaskListScreen Dirender: TaskListScreen() menerima state dari ViewModel dan merender UI dengan daftar tugas yang dikelompokkan. UI siap untuk interaksi user.
10. User Dapat Berinteraksi: User dapat menambah tugas, mengedit, menghapus, atau beralih ke kalender dengan swipe atau menu navigation. Setiap interaksi memanggil ViewModel callback yang mengupdate state dan database.

7. Interaksi User dan Event Flow

Aplikasi menggunakan event-driven architecture di mana user interactions di UI memanggil callback yang dihubungkan ke ViewModel methods. Berikut adalah contoh-contoh event flow yang terjadi dalam aplikasi:
📝 User Menambah Tugas Baru
Flow: User klik tombol "+" di TaskListScreen → Dialog AddTaskDialog terbuka → User input title, notes, deadline, repeat settings → User klik button "Simpan" → onAddTask callback dipanggil dengan semua parameter → ViewModel.addTask() dijalankan → Repository.addTask() dipanggil → Task disimpan ke Room Database → StateFlow uiState di-update dengan task baru → UI recompose menampilkan task baru.
✅ User Menyelesaikan Tugas
Flow: User klik checkbox pada task card → onTaskCheckedChange callback dipanggil dengan task dan isDone status → ViewModel.onTaskCheckedChanged() dijalankan → Repository.editTask() dipanggil → Task status di-update di database → StateFlow di-update → UI recompose menampilkan checkbox dalam state checked.
⭐ User Menandai Task Penting
Flow: User klik icon flag pada task card → onToggleFlagTask callback dipanggil dengan task dan isImportant boolean → ViewModel.editTask() dijalankan dengan task.copy(isImportant = isImportant) → Repository.editTask() dijalankan → Task isImportant property di-update → UI recompose menampilkan flag icon dalam state active/inactive.
🗑️ User Menghapus Tugas
Flow: User swipe task card ke kanan (atau klik delete button) → onDeleteTask callback dipanggil dengan task → ViewModel.deleteTask() dijalankan → Repository.deleteTask() dipanggil → Task dihapus dari database → ViewModel menyimpan deleted task untuk undo → Snackbar muncul dengan option "Undo" → Jika user klik Undo, task di-restore.
📅 User Beralih ke Kalender
Flow: User klik menu "Kalender" di bottom navigation atau swipe layar ke kiri → pagerState.animateScrollToPage(1) dijalankan → HorizontalPager melakukan animasi scroll ke page 1 → CalendarScreen() di-render dengan data dari ViewModel → User dapat melihat kalender bulanan dan tasks untuk tanggal tertentu.

8. Teknologi dan Dependencies

Aplikasi To-Do Planner menggunakan berbagai library dan framework modern dari Android ecosystem untuk membangun aplikasi yang robust dan efficient:
Teknologi Versi Kegunaan
Jetpack Compose Latest UI declarative framework untuk membangun UI secara deklaratif dengan Kotlin
Material 3 Latest Design system dan pre-built components (Button, TextField, Card, etc.)
Room Database Latest SQLite abstraction layer untuk penyimpanan data lokal yang aman dan efficient
ViewModel Latest Lifecycle-aware component untuk manajemen state dan UI logic
StateFlow Latest Flow implementation untuk reactive state management
Coroutines Latest Asynchronous programming untuk database operations
HorizontalPager Latest Composable untuk horizontal swipe navigation

9. Kesimpulan

Aplikasi To-Do Planner adalah contoh sempurna dari bagaimana menggunakan teknologi Android modern untuk membangun aplikasi produktivitas yang powerful, user-friendly, dan well-architected. Dengan menggunakan MVVM architecture, Jetpack Compose untuk UI, dan Room Database untuk data persistence, aplikasi ini memberikan foundation yang kuat untuk pengembangan lebih lanjut.
Fitur-fitur seperti smart task grouping, calendar integration, recurring tasks, dan modern gesture interactions membuat aplikasi ini valuable untuk user yang ingin meningkatkan produktivitas mereka. Struktur kode yang clean dan well-organized memastikan bahwa aplikasi mudah untuk di-maintain, di-test, dan di-extend dengan fitur-fitur baru.
Melalui dokumentasi ini, diharapkan developer dapat memahami dengan jelas bagaimana aplikasi ini bekerja, dari architecture-level hingga implementation-level. Setiap komponen memiliki tanggung jawab yang jelas, mengikuti SOLID principles dan best practices dalam pengembangan aplikasi Android modern.

Komentar

Postingan Populer