80 lines
5.9 KiB
Markdown
80 lines
5.9 KiB
Markdown
# 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._ |
|
|
|  |  |  |
|
|
|
|
*(PENTING: Ganti URL gambar di atas dengan screenshot aplikasi Anda. Anda bisa mengunggahnya ke layanan seperti [Imgur](https://imgur.com/upload) 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:
|
|
|