Case Study: TaskMilestone – Mobile App Pengingat Deadline Tugas Kuliah

Nama Aplikasi: TaskMilestone Pengembang: Wira Syahbandi (Role: Mobile Software Developer & System Architect) Teknologi: Flutter, Dart, Material 3, Android Studio Metode Pengerjaan:Vibe Coding (Iterasi pengembangan terstruktur berbasis AI Pair Programming).

Sebagai mahasiswa teknik dan ilmu komputer, manajemen beban tugas perkuliahan sering kali menjadi tantangan besar. Banyak mahasiswa kesulitan memprioritaskan tugas mana yang mendesak, memantau seberapa banyak tugas yang sudah selesai, serta sering terlewat batas pengumpulan (deadline).

Aplikasi to-do list umum di pasaran sering kali terlalu kompleks atau kurang memiliki visualisasi capaian yang memotivasi. Dari permasalahan ini, lahirlah TaskMilestone, sebuah aplikasi mobile berbasis Flutter yang dirancang khusus untuk membantu mahasiswa mengorganisasi tugas kuliah secara visual, fokus pada prioritas, dan memberikan kepuasan psikologis saat melihat capaian progres tugas mereka.

Dalam proyek ini, saya memposisikan diri sebagai System Architect dan Code Reviewer yang menerapkan metodologi Vibe Coding:

• Structured Prompting: Merancang prompt teknis yang presisi, mencakup spesifikasi fungsional, hierarki visual antarmuka, hingga batasan arsitektur (bebas dari error render overflow dan modular).
• Iterative Refinement: Mengembangkan aplikasi melalui siklus iteratif bertahap:
  1. Siklus 1 (Foundation & UI/UX): Membangun layout responsif, komponen Header, kartu progres tugas (Progress Bar), dan kartu to-do list dengan sistem Badge Prioritas.
  2. Siklus 2 (Interactivity & State Management): Menghubungkan perubahan status checklist to-do dengan perhitungan persentase penyelesaian tugas secara real-time.
  3. Siklus 3 (Feature Expansion): Mengimplementasikan fitur formulir Modal Bottom Sheet dinamis untuk penambahan tugas baru lengkap dengan Date Picker dan validasi input.
• Code Review & Quality Assurance: Memastikan struktur kode mematuhi prinsip Clean Code, penamaan variabel semantik, pemisahan komponen (separation of concerns), serta kepatuhan standar Flutter Material 3.

Fitur Utama Aplikasi

Personalized Header & Profile Avatar:

• Menampilkan kartu sambutan personal (“Halo, Wira Syahbandi”) dengan avatar inisial melingkar, indikator notifikasi, dan gradien warna modern Indigo-Violet.

Dynamic Progress Milestone Card:

• Menggabungkan indikator Circular Progress dan Linear Progress Bar yang secara otomatis menghitung persentase tugas selesai terhadap total tugas aktif.

Color-Coded Priority Badges:

• Sistem pelabelan visual dengan 3 tingkatan prioritas: Tinggi (Merah), Sedang (Oranye), dan Rendah (Hijau), memudahkan pengambilan keputusan cepat terkait urgensi tugas.

Smart Filter Tabs:

• Kemudahan navigasi untuk menyortir tugas berdasarkan tab Semua, Aktif, dan Selesai.

Interactive Task Management & Creation:

• Checklist to-do list interaktif dengan animasi coret (strikethrough).
• Formulir penambahan tugas baru menggunakan Modal Bottom Sheet, pemilih tanggal kalender (Date Picker), serta tombol aksi cepat untuk menghapus tugas.

Spesifikasi & Arsitektur Teknis

• Framework: Flutter SDK 3.x (Dart 3.x)
• Desain UI: Flat Modern Design dengan rounded corner 12px–16px, palet warna Indigo (#4F46E5), dan micro-shadows yang halus.
• Layouting: Menggunakan CustomScrollView dan Slivers (SliverList, SliverToBoxAdapter) untuk performa rendering yang mulus (60 FPS), responsif di berbagai resolusi layar HP, dan bebas dari kendala overflow.
• State Management: Menggunakan reactive StatefulWidget dengan arsitektur mutable data model yang efisien.

Pembelajaran & Kesimpulan (Key Takeaways)

Melalui pengembangan aplikasi TaskMilestone ini, saya berhasil:

1. Membuktikan efektivitas kolaborasi manusia dan AI (AI-Assisted Engineering) untuk mempercepat siklus pembuatan prototipe aplikasi mobile tanpa mengorbankan kualitas arsitektur kode.
2. Memperdalam kemampuan dalam UI/UX engineering Flutter, penanganan state dinamis, serta pengujian antarmuka di lingkungan Android Studio dan browser.
3. Menghasilkan solusi perangkat lunak yang fungsional, estetik, dan relevan dalam menjawab masalah produktivitas mahasiswa sehari-hari.

Aktivitas:

• Mahasiswa menerima lembar penugasan praktikum: Topik No. 6, TaskMilestone (Pengingat Deadline Tugas) atas nama Wira Syahbandi (T0123008).
• Menyiapkan dapur kerja: Mengatur jalur Flutter SDK di komputer (D:\src\flutter), menyiapkan Android Studio, serta mengarahkan penyimpanan proyek ke drive D:\ agar rapi dan tidak membebani drive C.

Aktivitas:

• Merumuskan Prompt Awal terstruktur kepada AI Assistant: Menentukan arsitektur antarmuka, warna dasar modern (Indigo & Violet), rounded corner 12px–16px, dan data dummy perkuliahan yang realistis.
• Membangun kerangka dasar (Scaffolding):
  • Header: Tulisan “Halo, Selamat Datang! 👋” dengan nama “Wira Syahbandi” dan avatar foto profil melingkar.
  • Badge Prioritas: Memberi bumbu warna: Merah untuk Tinggi, Oranye untuk Sedang, dan Hijau untuk Rendah.
  • Progress Bar: Menampilkan persentase pencapaian tugas kuliah yang sedang dikerjakan.

Aktivitas:

• Menjalankan perintah kompilasi cepat menggunakan Chrome: powershellD:\src\flutter\bin\flutter.bat run -d chrome
• Inspeksi Tampilan: Menekan F12 lalu mengubah tampilan ke simulasi layar smartphone (Toggle Device Toolbar).
• Di tahap ini, aplikasi sudah bisa menampilkan daftar tugas kuliah, checklist bisa dicentang, dan progress bar bergerak naik/turun sesuai jumlah tugas yang diselesaikan.

Aktivitas & Problem Solving:

• Saat mencoba membuat paket APK Android, muncul kendala: proses build sempat macet lama karena Android SDK dan lisensi belum terhubung dengan Flutter.
• Sebagai System Architect, saya menganalisis akar masalahnya: menghubungkan jalur SDK yang tepat (D:\Sdk) ke konfigurasi Flutter menggunakan flutter config --android-sdk.
• Memastikan Android Studio terhubung sempurna sehingga proyek siap dijalankan di emulator atau HP Android fisik.

Aktivitas:

• Menambahkan fitur interaktif yang sebelumnya masih kosong: Tombol Tambah Tugas (+).
• Begitu tombol ditekan, muncul formulir modern (Modal Bottom Sheet) dari bawah layar yang dilengkapi:
  • Input nama tugas & mata kuliah.
  • Fitur kalender interaktif (Date Picker) untuk memilih tanggal deadline.
  • Pilihan tombol prioritas warna-warni.
  • Tombol hapus (tempat sampah) untuk membersihkan tugas yang sudah tidak diperlukan.

Hasil Akhir:

• Aplikasi TaskMilestone selesai secara paripurna: bebas error render overflow, responsif di layar kecil maupun besar, dan semua logika bisnisnya (checklist, progress, tambah tugas, filter) bekerja secara real-time.
• Kode tersusun rapi di Android Studio, siap di-build menjadi file .apk untuk dipasang di smartphone Android, serta didokumentasikan ke dalam laporan praktikum dan portofolio.