MyHabits - Implementasi Jetpack Compose dalam Aplikasi Habit Tracker

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

Screenshot 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

Screenshot 1 Screenshot 2 Screenshot 3

✅ 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:

🔗 Klik di sini untuk melihat kode sumber MyHabits App

🚀 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

Postingan populer dari blog ini

Tugas 2 - PPB D

Tugas 5 - Simple Calculator