MyHabits - Implementasi Jetpack Compose dalam Aplikasi Habit Tracker
Anggota Kelompok 7 |
1. Widian Sasi Disertasiani (5025211024) 2. Anggara Saputra (5025211241) 3. Aida Fitrania Prabasati (5025211033) |
Mata Kuliah | Pengembangan Perangkat Bergerak D |
Kelompok

📱 Deskripsi Aplikasi
MyHabits adalah aplikasi Android untuk melacak kebiasaan (habit tracker) yang dibangun menggunakan Jetpack Compose dan Kotlin. Aplikasi ini memungkinkan pengguna untuk membuat, mengelola, dan melacak kebiasaan harian, mingguan, dan bulanan dengan antarmuka yang intuitif dan modern.
🛠 Teknologi yang Digunakan
- Jetpack Compose - Modern UI toolkit untuk Android
- Kotlin - Bahasa pemrograman utama
- Material Design 3 - Design system
- SharedPreferences + Gson - Local data storage
- Java Time API - Date/time handling
UI Aplikasi



✅ Status Implementasi Requirement
Requirement | Implementation | Status |
---|---|---|
Penggunaan Jetpack Compose | Semua UI menggunakan Compose components | ✅ Complete |
Penggunaan Kotlin | 100% Kotlin, no Java code | ✅ Complete |
Login/Logout | Complete authentication system | ✅ Complete |
Checkbox | Day selection dalam Weekly habits | ✅ Complete |
Komponen Button | Multiple button types & styles | ✅ Complete |
ViewModel & State in Compose | Menggunakan ViewModel dan mutableStateOf | ✅ Complete |
Activity & Intent | SplashActivity ke MainActivity via Intent | ✅ Complete |
Filter berdasarkan Status | All, Completed, Skipped filter | ✅ Complete |
🎯 Fitur Utama Aplikasi
🔐 Sistem Autentikasi
- Login/Register dengan validasi form
- Logout functionality
- Persistent session menggunakan SharedPreferences
- Multi-user support dengan data terpisah per user
📋 Manajemen Habit
- CRUD Operations lengkap untuk habits
- 3 Tipe Pengulangan:
- Daily - Setiap hari
- Weekly - Hari-hari tertentu dalam seminggu
- Monthly - Tanggal tertentu setiap bulan
- Color Customization dengan 12 pilihan warna
- Description dan Title untuk setiap habit
📊 Tracking & Monitoring
- 3 Tab Utama:
- Today: Habit untuk hari ini dengan aksi Complete/Skip
- Weekly: Habit harian & mingguan dengan jadwal
- Monthly: Khusus habit bulanan dengan tanggal
- Status Tracking: Completed, Skipped, atau Pending
- Progress Visualization dengan progress bar
- Filter System: All, Completed, Skipped
🚀 Implementasi SplashActivity & Intent
SplashActivity
adalah Activity awal yang ditampilkan selama beberapa detik sebelum berpindah ke MainActivity
menggunakan Explicit Intent. Hal ini mendemonstrasikan pemahaman konsep Activity & Intent.
class SplashActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) Handler(Looper.getMainLooper()).postDelayed({ val intent = Intent(this, MainActivity::class.java) startActivity(intent) finish() }, 2000) } }
🔍 ViewModel & Compose State
Aplikasi ini menggunakan MainViewModel untuk mengelola state seperti status login, daftar kebiasaan, dan filtering. ViewModel membantu memisahkan logic dari UI.
class MainViewModel : ViewModel() { var habits by mutableStateOf(listOf()) private set fun loadHabits(context: Context) { habits = HabitRepository(context).getAllHabits() } }
🏗 Implementasi Jetpack Compose
📱 UI Components
// Contoh implementasi komponen utama @Composable fun HabitListScreen( habitRepository: HabitRepository, onCreateHabit: () -> Unit, onEditHabit: (Habit) -> Unit, onLogout: () -> Unit ) { // UI state management var selectedTab by remember { mutableIntStateOf(0) } var selectedFilter by remember { mutableStateOf(HabitFilter.ALL) } // Layered UI structure Column(modifier = Modifier.fillMaxSize()) { TopAppBar() TabRow() FilterSection() ContentArea() } }
🎨 Compose Components yang Digunakan
- Card - Untuk display habit items
- Button - Complete, Skip, dan navigasi
- DropdownMenu - Filter dan menu options
- OutlinedTextField - Input forms
- LazyColumn - Efficient list rendering
- Icon - Material Design icons
- Surface - Layer dan elevation effects
✅ Checkbox Implementation
// Day selection sebagai checkbox concept @Composable fun DaySelectionSection( selectedDays: List<Int>, onDaysChanged: (List<Int>) -> Unit ) { Row { dayNames.forEachIndexed { index, day -> Box( modifier = Modifier .clickable { // Toggle selection logic val newDays = if (isSelected) selectedDays - dayNumber else selectedDays + dayNumber onDaysChanged(newDays) } .background( if (isSelected) selectedColor else unselectedColor ) ) { Text(day) } } } }
🔄 State Management
// Menggunakan Compose state pattern @Composable fun Screen() { // Local state var data by remember { mutableStateOf(initialValue) } // Side effects LaunchedEffect(Unit) { data = repository.getData() } // State hoisting ke parent ChildComponent( data = data, onDataChange = { newData -> data = newData } ) }
🗃 Data Management
// Repository pattern implementation class HabitRepository(context: Context) { private val prefs: SharedPreferences private val gson = Gson() fun saveHabit(habit: Habit) { val habits = getAllHabits().toMutableList() // Update or add logic saveAllHabits(habits) } fun getAllHabits(): List<Habit> { val habitsJson = prefs.getString("habits", "[]") return gson.fromJson(habitsJson, type) } }
🚀 Step-by-Step Pengembangan
Phase 1: Foundation
- Setup project dengan Compose
- Configure dependencies (Compose, Material3, Gson)
- Create data models (User, Habit, HabitEntry)
- Implement repository layer
Phase 2: Authentication
- LoginScreen implementation dengan form validation
- Session management dengan SharedPreferences
- Multi-user support
Phase 3: Core Features
- CreateHabitScreen dengan color picker
- Habit display dengan tab navigation
- Action buttons (Complete/Skip)
- Repeat type selection (Daily/Weekly/Monthly)
Phase 4: Advanced Features
- Status tracking implementation
- Filter system (All/Completed/Skipped)
- Progress visualization
- Empty states dan error handling
📁 Struktur File
app/src/main/java/com/example/myhabits/ ├── MainActivity.kt // Entry point utama ├── SplashActivity.kt // Splash screen + Intent ├── MainViewModel.kt // ViewModel untuk state management ├── Screen.kt // Composable utama ├── LoginScreen.kt // UI Login ├── HabitListScreen.kt // Dashboard utama ├── CreateHabitScreen.kt // Form tambah/edit habit ├── HabitRepository.kt // Layer penyimpanan data ├── Habit.kt // Data model └── ui/theme/ // Konfigurasi tema
📊 Design Patterns
1. Repository Pattern
Abstraction layer untuk data access dan centralized data management
2. State Hoisting
Mengangkat state ke parent component untuk better composition
3. Composition Pattern
Menggunakan composable parameters untuk flexibility
🎥 Video Presentasi
Berikut adalah video presentasi mengenai implementasi Jetpack Compose dalam proyek MyHabits:
💻 Kode Sumber
Anda dapat melihat kode sumber proyek ini melalui repositori GitHub berikut:
🚀 Future Improvements
- Enhanced ViewModel - More comprehensive state management
- Multiple Activities - Settings dan detail activities
- Advanced Intents - Implicit intents untuk sharing
- Notifications - Habit reminders
- Data Export/Import - Backup functionality
- Statistics - Advanced analytics
📚 Referensi
🎯 Kesimpulan
Aplikasi MyHabits berhasil mengimplementasikan semua requirement yang diminta dengan menggunakan Jetpack Compose dan Kotlin. Dengan penambahan ViewModel dan SplashActivity dengan Intent, aplikasi ini mendemonstrasikan penggunaan modern Android development practices dengan UI yang responsive dan fungsionalitas yang lengkap untuk habit tracking.
Komentar
Posting Komentar