202310715066-NABILA-SUWANDIRA/uts_nabila_202310715066
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
uts_nabila_202310715066/README.md
nabilasuwandira 8a81707bc9 README.md
2025-11-07 13:53:10 +07:00

5.9 KiB
Raw Blame History

Kalkulator BMI - Aplikasi Android Modern dengan Jetpack Compose

Selamat datang di repositori Kalkulator BMI, sebuah aplikasi Android yang dirancang untuk menghitung Indeks Massa Tubuh (Body Mass Index) dengan antarmuka yang modern, bersih, dan interaktif. Aplikasi ini dibangun dari dasar menggunakan Jetpack Compose dan Kotlin, menunjukkan implementasi praktik terbaik dalam pengembangan UI Android modern.

Proyek ini tidak hanya berfungsi sebagai alat praktis, tetapi juga sebagai studi kasus dalam penggunaan Material 3, navigasi, manajemen state, dan animasi dalam ekosistem Jetpack Compose.

🎨 Galeri Aplikasi

Halaman Login Halaman Kalkulator (Input) Halaman Kalkulator (Hasil)
Tampilan awal untuk autentikasi pengguna yang elegan. Antarmuka input yang bersih dengan ikon yang intuitif. Hasil BMI ditampilkan dengan umpan balik visual berwarna.
Halaman Login Halaman Kalkulator Hasil BMI

(PENTING: Ganti URL gambar di atas dengan screenshot aplikasi Anda. Anda bisa mengunggahnya ke layanan seperti Imgur untuk mendapatkan link).

✨ Fitur Utama dan Implementasi Teknis

Aplikasi ini dirancang dengan fokus pada pengalaman pengguna (UX) dan kejelasan kode.

1. Antarmuka Pengguna Modern dengan Material 3

  • Tema Kustom Pink & Putih: Aplikasi mengimplementasikan tema lightColorScheme kustom yang didominasi warna pink dan putih, memberikan nuansa yang lembut dan konsisten di seluruh layar.
  • Komponen Material 3: Menggunakan komponen M3 terbaru seperti Card, OutlinedTextField, Button, OutlinedButton, dan Icon untuk tampilan yang sesuai dengan pedoman desain Google.
  • Latar Belakang Gradien: Box utama setiap layar menggunakan Brush.verticalGradient untuk transisi warna halus dari warna primer tema ke warna latar belakang, menciptakan kedalaman visual.

2. Manajemen State yang Efektif

  • State Hoisting: Menggunakan remember { mutableStateOf(...) } untuk mengelola state lokal seperti nilai input (tinggiBadan, beratBadan), hasil kalkulasi (bmiResult, bmiCategory), dan warna kartu hasil (bmiColor).
  • State-Driven UI: Antarmuka pengguna bersifat reaktif. Perubahan pada variabel state (misalnya, setelah menekan tombol "Hitung") secara otomatis memicu recomposition pada UI untuk menampilkan hasil terbaru tanpa manipulasi manual.

3. Umpan Balik Visual dan Animasi Halus

  • AnimatedVisibility untuk Hasil: Kartu hasil BMI tidak muncul secara tiba-tiba. Komponen ini dibungkus dalam AnimatedVisibility dengan efek fadeIn dan slideInVertically untuk transisi yang elegan saat bmiResult tidak lagi null.
  • Warna Kartu Hasil Dinamis: Card yang menampilkan hasil BMI mengubah warnanya (containerColor) berdasarkan kategori:
    • Hijau (#4CAF50): Berat badan normal.
    • Kuning (#FFC107): Kelebihan berat badan.
    • Merah (dari tema): Berat badan kurang (error) atau Obesitas (errorContainer). Ini memberikan umpan balik instan yang mudah dipahami oleh pengguna.

4. Navigasi Type-Safe dengan Navigation Compose

  • NavHost: Mengatur alur navigasi aplikasi dari LoginScreen ke MainScreen.
  • NavController: Digunakan untuk memicu navigasi, seperti navController.navigate("login") saat pengguna menekan tombol "Keluar".
  • Manajemen Back Stack: popUpTo(0) digunakan saat keluar untuk membersihkan back stack, memastikan pengguna tidak bisa kembali ke halaman kalkulator setelah logout dengan menekan tombol kembali.

5. Pengalaman Pengguna yang Ditingkatkan (UX)

  • Ikon pada Input Field: OutlinedTextField untuk tinggi dan berat badan dilengkapi dengan leadingIcon (Height dan MonitorWeight), mempermudah identifikasi field.
  • Manajemen Keyboard:
    • KeyboardOptions diatur untuk menampilkan keyboard numerik (KeyboardType.Number).
    • imeAction diatur ke ImeAction.Next dan ImeAction.Done untuk alur pengisian yang lancar.
    • LocalFocusManager digunakan untuk menyembunyikan keyboard secara otomatis (focusManager.clearFocus()) saat tombol "Hitung" ditekan, mencegah keyboard menutupi hasil.

🛠️ Teknologi, Library, dan Arsitektur

Proyek ini memanfaatkan ekosistem modern Android untuk pengembangan yang efisien dan dapat dipelihara.

  • Bahasa Pemrograman: Kotlin
  • Toolkit UI: Jetpack Compose (BOM 2024.05.00)
    • androidx.compose.ui: Komponen UI fundamental.
    • androidx.compose.material3: Komponen Material Design 3.
    • androidx.compose.animation: API untuk animasi UI.
    • androidx.compose.foundation: Blok bangunan dasar dan layout.
  • Navigasi: Navigation Compose (androidx.navigation:navigation-compose:2.7.7) untuk navigasi deklaratif antar Composable.
  • Ikon: Material Icons Extended (androidx.compose.material:material-icons-extended) untuk akses ke set ikon yang lebih luas.
  • Core Libraries: androidx.core:core-ktx dan androidx.activity:activity-compose:1.9.0.
  • Arsitektur: Mengadopsi arsitektur UI satu arah (Unidirectional Data Flow - UDF) pada tingkat layar. State mengalir ke bawah (dari MainScreen ke komponen di dalamnya), dan events mengalir ke atas (dari onClick pada Button untuk memanggil fungsi calculateBmi).

🚀 Panduan Menjalankan Proyek

Ikuti langkah-langkah ini untuk meng-clone dan menjalankan aplikasi di lingkungan pengembangan Anda.

  1. Prasyarat

    • Android Studio Iguana | 2023.2.1 atau yang lebih baru.
    • JDK 17 atau yang lebih baru.

  2. Clone Repositori Buka terminal atau Git Bash, lalu jalankan perintah berikut: