Tugas 11 - Pemrograman Perangkat Bergerak G - Redesign Starbucks App

---

📱 Starbucks Redesign App

Nama: Rakha Fathin Izzan Consetta

NRP: 5025221156

Kelas: Pemrograman Perangkat Bergerak G

Link Github: https://github.com/skedaddlers/starbucks-redesign/tree/main

Di blog kali ini, saya akan membahas proyek aplikasi yang saya buat dengan Jetpack Compose bertema Starbucks Redesign. Aplikasi ini saya rancang ulang dengan gaya modern, smooth, dan tentunya mobile-friendly ☕📱

---

🏠 1. Home Screen – Sambutan & Item Unggulan

Pada halaman awal atau Home Screen, pengguna langsung disambut dengan tampilan hangat dari banner selamat datang dan daftar minuman unggulan (featured items). Tujuannya adalah agar pengguna bisa cepat menemukan menu populer tanpa harus mencari satu-satu.

✅ Fitur yang tersedia di Home Screen:

• Banner Selamat Datang: Menampilkan sapaan kepada pengguna.

• Featured Items List: Produk-produk yang sedang dipromosikan atau populer ditampilkan dalam bentuk horizontal scroll.

• Tombol Add to Cart: Setiap produk memiliki tombol keranjang agar pengguna bisa langsung menambahkan item ke keranjang belanja.

📸 Cuplikan UI:

@Composable
fun FeaturedItemsList(items: List<MenuItem>, onAddToCart: (MenuItem) -> Unit) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("Featured Items", style = MaterialTheme.typography.titleMedium)
        Spacer(modifier = Modifier.height(8.dp))
        LazyRow {
            items(items) { item ->
                FeaturedItemCard(item = item, onAdd = { onAddToCart(item) })
            }
        }
    }
}

Tampilan UI didesain agar elegan namun tetap ramah pengguna, dengan padding dan spasi yang cukup untuk kenyamanan visual.

---

☕ 2. Menu Screen – Filter Menu Berdasarkan Kategori

Menu Screen berfungsi sebagai halaman utama untuk melihat semua produk Starbucks, lengkap dengan fitur filter berdasarkan kategori seperti:

• Coffee ☕

• Tea 🍵

• Frappuccino ❄️

• Food 🍪

🎯 Fitur Utama di Menu Screen:

• Kategori Filter (FilterChips): Pengguna bisa memilih kategori, dan daftar produk akan difilter secara otomatis.

• Tampilan List Produk: Produk ditampilkan dalam list vertikal, lengkap dengan nama, harga, dan tombol add to cart.

• State Management: Menggunakan remember dan mutableStateOf untuk mengatur kategori yang sedang dipilih.

Cuplikan kode filter:

val filteredItems = if (selectedCategory == "All") {
    menuItems
} else {
    menuItems.filter { it.category == selectedCategory }
}

Dengan memanfaatkan LazyColumn, produk akan dimuat secara efisien dan tetap ringan walaupun daftar menunya panjang.

---

🧺 3. Cart Screen – Ringkasan Pesanan

Cart Screen menampilkan semua item yang telah ditambahkan ke keranjang oleh pengguna. Setiap item ditampilkan lengkap dengan nama produk, harga satuan, jumlah pesanan (quantity), dan total harga per item.

✅ Fitur yang tersedia:

• Daftar Item Keranjang: Menampilkan semua item dengan detail yang rapi.

• Tombol Tambah/Kurang: Pengguna bisa menambah atau mengurangi jumlah produk dengan ikon ➕ dan ➖.

• Total Harga Otomatis: Total belanja dihitung secara dinamis dari seluruh isi keranjang.

• Checkout Button: Ketika ditekan, pengguna akan melihat notifikasi popup bahwa checkout berhasil dan mendapatkan poin!

💬 Notifikasi Checkout:

Kami menggunakan SnackbarHost untuk memberikan umpan balik visual setelah checkout berhasil. Setelah checkout:

• Keranjang dikosongkan.

• Poin pengguna bertambah (1 poin setiap Rp10.000).

• Snackbar muncul dengan pesan: “Checkout berhasil! Kamu dapat X poin.”

LaunchedEffect(snackbarMessage) {
    snackbarMessage?.let {
        snackbarHostState.showSnackbar(it)
        snackbarMessage = null
    }
}

---

📈 4. State Management dan ViewModel

Keranjang dikelola oleh CartViewModel, sehingga data tetap konsisten antar layar. Setiap interaksi seperti tambah/kurangi item, ataupun checkout, langsung mengupdate mutableStateListOf<CartItem>.

Kode berikut mengatur penambahan item:

fun addToCart(menuItem: MenuItem) {
    val existing = _cartItems.find { it.menuItem.id == menuItem.id }
    if (existing != null) {
        _cartItems[index] = existing.copy(quantity = existing.quantity + 1)
    } else {
        _cartItems.add(CartItem(menuItem, 1))
    }
}

---

🌟 5. Status Membership – Regular & Gold Member

Aplikasi ini memiliki dua status utama:

• 🟢 Regular Member: Status default saat poin pengguna masih di bawah 100.

• 🟡 Gold Member: Didapatkan setelah pengguna mengumpulkan 100 poin atau lebih.

Status ini ditampilkan di Profile Screen secara otomatis berdasarkan total poin, menggunakan logika:

val membershipStatus: String
    get() = if (points >= 100) "Gold Member" else "Regular Member"

---

🎯 6. Perhitungan Poin & Kemajuan

Poin dikalkulasi dari transaksi checkout:

• 1 poin per Rp10.000

• Misalnya: Checkout senilai Rp45.000 → dapat 4 poin

Di halaman profil, kami menampilkan:

• Total poin pengguna saat ini

• Status membership terkini

• "X poin lagi menuju Gold Member" jika belum mencapai 100 poin

val pointsNeeded = maxOf(0, 100 - cartViewModel.points)
if (pointsNeeded > 0) {
    Text("Hanya $pointsNeeded poin lagi menuju Gold Member!")
}

---

🎁 7. Bonus Khusus Member

Kami juga menambahkan teks dinamis yang menunjukkan manfaat berdasarkan status:

• Regular Member:

  “Dapatkan 1 poin tiap belanja Rp10.000. Naik ke Gold Member untuk bonus eksklusif!”

• Gold Member:

  “Sebagai Gold Member, kamu mendapatkan minuman gratis setiap 50 poin dan akses promo spesial!”

  
  
   

---

✨ UX & UI Highlights

• UI yang bersih dan personal: Menunjukkan status dengan warna yang berbeda (mis. emas untuk Gold Member).

• User motivation: Ada dorongan psikologis agar pengguna terus belanja demi meng-upgrade status.

• Interaktif: Setiap kali checkout, poin langsung update dan terlihat di halaman profil.