Proyek EAS

Nama : Made Nanda Wija Vahindra

NRP : 5025211160

Kelas : PBB - A

Proyek EAS

Deskripsi:

Proyek ini adalah pembuatan prototipe antarmuka pengguna (UI/UX) yang fungsional dari aplikasi mobile Starbucks. Aplikasi ini dibangun dari awal sebagai klon UI (UI Clone), yang berarti fokus utamanya adalah mereplikasi tampilan, nuansa, dan alur navigasi dari aplikasi Starbucks yang sesungguhnya. Proyek ini mencakup seluruh alur pengguna, mulai dari halaman login hingga konfirmasi pembayaran, namun tidak terhubung ke backend, database, atau API eksternal manapun. Semua data yang ditampilkan bersifat statis (dummy data) untuk keperluan demonstrasi UI.

Fitur-Fitur Utama:

Aplikasi ini memiliki serangkaian fitur yang mencerminkan fungsionalitas inti dari aplikasi pemesanan kopi, yang terbagi ke dalam beberapa layar:

Halaman Login: Antarmuka sederhana bagi pengguna untuk masuk ke aplikasi, menampilkan logo Starbucks dan input untuk email/password.
Halaman Home: Berfungsi sebagai dashboard utama. Menampilkan kartu promosi besar, daftar produk unggulan (Featured), dan ringkasan poin rewards pengguna.
Halaman Order: Katalog produk yang terorganisir. Pengguna dapat melihat berbagai kategori produk seperti "Featured", "Menu", "Previous", dll., melalui sistem tab.
Halaman Detail Item: Layar kustomisasi pesanan. Pengguna dapat memilih opsi seperti ukuran dan jenis susu (pilihan tunggal) serta menambahkan sirup atau topping (pilihan ganda).
Halaman All Orders (Keranjang): Menampilkan ringkasan dari semua item yang telah ditambahkan. Merinci subtotal, pajak, total, serta menyediakan opsi untuk memberikan tip sebelum melanjutkan ke pembayaran.
Halaman Scan & Pay: Fitur untuk pembayaran di toko. Menampilkan QR code statis yang dapat ditunjukkan kepada kasir, pengguna juga bisa mendapatkan bonus dari scan ini.
Halaman Gift: Memungkinkan pengguna untuk menukarkan (redeem) kartu hadiah atau mengklaim penawaran. Terdapat input untuk kode hadiah dan daftar penawaran yang tersedia.
Halaman Payment: Layar checkout akhir di mana pengguna dapat memilih metode pembayaran dari kartu yang tersimpan, mengisi detail kartu baru, dan melihat ringkasan pesanan final.
Halaman Payment Success: Layar konfirmasi yang muncul setelah pembayaran berhasil, memberikan pesan positif kepada pengguna dan tombol untuk kembali ke halaman utama.
Navigasi Utama: Dilengkapi dengan BottomNavigationBar yang persisten di sebagian besar layar, memberikan akses cepat ke halaman Home, Scan, Order, dan Gift.

Implementasi Teknis:

Bahasa & Framework:
- Kotlin: Digunakan sebagai bahasa pemrograman utama yang modern, aman, dan ringkas.
- Jetpack Compose: Seluruh antarmuka pengguna (UI) dibangun menggunakan Jetpack Compose. Pendekatan deklaratif ini mempercepat pengembangan, mengurangi jumlah kode boilerplate, dan memudahkan pengelolaan state UI.
Arsitektur UI & State Management:
- Composable Functions: Setiap layar, tombol, kartu, dan elemen UI lainnya dibangun sebagai fungsi @Composable yang independen dan dapat digunakan kembali.
- State Hoisting: State UI (seperti teks pada TextField atau item yang dipilih pada FilterChip) dikelola menggunakan remember { mutableStateOf(...) }. State ini diangkat (hoisted) ke level Composable induk terdekat yang relevan untuk menjaga alur data yang searah (unidirectional data flow).
- Reusable Components: Komponen yang digunakan di banyak layar, seperti BottomNavigationBar dan FeaturedItemView, diekstraksi ke dalam file terpisah (SharedComponents.kt) untuk mempromosikan prinsip Don't Repeat Yourself (DRY) dan menjaga konsistensi.
Navigasi:
- Jetpack Navigation Compose: Alur navigasi antar layar dikelola sepenuhnya oleh library ini.
- NavHost & NavController: Sebuah NavHost tunggal di AppNavigation.kt bertindak sebagai "peta" aplikasi, sementara NavController dioper ke setiap layar untuk memicu perintah navigasi.
- Type-Safe Routes: Rute (alamat) setiap layar didefinisikan secara terpusat dalam sebuah enum class Screen, yang menghilangkan kemungkinan error akibat salah ketik String dan membuat kode lebih mudah dibaca.
- Navigation Logic: Implementasi navigasi mencakup logika penting seperti popUpTo untuk membersihkan back stack setelah login atau pembayaran, serta restoreState pada BottomNavigationBar untuk menjaga state (misalnya, posisi scroll) saat berpindah tab.
Struktur Proyek:

Proyek diorganisir ke dalam package yang jelas (screens, ui.theme) untuk memisahkan antara logika tampilan, tema, dan komponen bersama. Struktur ini dirancang agar mudah diskalakan untuk penambahan fitur di masa depan.