PPB G - Setubruk

 Nama : Muhammad Hafidh Rosyadi
NRP : 5025211013
Kelas  : PPB G
 
 
 
 
 
 
 
KODE : https://github.com/Hfdrsyd/Tugas-PPB/tree/main/Setubruk

☕ Membangun Aplikasi Setubruk: Clone Starbucks dengan Kotlin & Jetpack Compose

Setubruk adalah aplikasi pembelajaran Android yang terinspirasi dari Starbucks. Aplikasi ini dirancang untuk mensimulasikan pengalaman pengguna dalam memilih menu kopi, melakukan pemesanan, dan mengumpulkan reward. Dibangun menggunakan Kotlin dan Jetpack Compose, aplikasi ini cocok untuk belajar tentang arsitektur modern Android, state management, dan desain UI responsif berbasis Material Design 3.

🌟 Gambaran Umum Aplikasi

Aplikasi Setubruk memberikan simulasi pembelian kopi secara digital dengan fitur-fitur seperti:

  • 📋 Menampilkan daftar menu minuman beserta harga dan gambar

  • 🛒 Menambahkan menu ke dalam keranjang pesanan

  • 📦 Mengelola jumlah item pesanan

  • 🎁 Sistem poin dan reward yang dapat ditukar dengan hadiah

  • 🎨 UI modern yang responsif dan mendukung light/dark theme

✨ Fitur Utama

Fitur Penjelasan
🧾 Pemesanan Menu Pengguna dapat memilih berbagai menu kopi
📷 Gambar Produk Setiap menu memiliki gambar representatif
🧮 Jumlah & Harga Menampilkan harga dan jumlah pesanan secara dinamis
🎁 Reward Points Sistem poin untuk mendapatkan hadiah
💡 Theming Material 3 Mendukung light dan dark mode secara otomatis

🏗️ Struktur Model Data

1. MenuItem.kt 

data class MenuItem(
    val id: Int,
    val name: String,
    @DrawableRes val imageRes: Int,
    val price: Int
)

  • Digunakan untuk: Menyimpan data setiap minuman (kopi, teh, dll).

  • Properti penting:

    • id: Identifikasi unik menu

    • name: Nama minuman

    • imageRes: ID gambar minuman dari drawable

    • price: Harga item

2. OrderItem.kt 

data class OrderItem(
    val menu: MenuItem,
    var quantity: Int = 1
)

  • Digunakan untuk: Mewakili item dalam pesanan pengguna.

  • Properti penting:

    • menu: Objek dari MenuItem

    • quantity: Jumlah pesanan dari item tersebut (bisa bertambah/berkurang)

3. RewardItem.kt 

data class RewardItem(
    val id: Int,
    val name: String,
    @DrawableRes val imageRes: Int,
    val requiredPoints: Int
)

  • Digunakan untuk: Menyimpan data hadiah yang bisa ditukar dengan poin.

  • Properti penting:

    • name: Nama hadiah (misal: Mug, Diskon, dll)

    • imageRes: ID gambar hadiah

    • requiredPoints: Jumlah poin yang dibutuhkan untuk menukarkan hadiah

🧩 Komponen UI (Secara Umum)

Walau file UI belum dibagikan, berdasarkan struktur data dan pola aplikasi edukatif serupa, berikut struktur Compose yang umum:

SetubrukApp()

  • Fungsi utama yang memanggil seluruh bagian aplikasi

  • Menerapkan MaterialTheme dan Surface sebagai dasar tampilan

MenuScreen()

  • Menampilkan daftar kopi menggunakan LazyColumn

  • Menggunakan Card dan Image untuk setiap item menu

OrderScreen()

  • Menampilkan keranjang pesanan

  • Fitur tambah/kurangi jumlah

  • Hitung total harga otomatis dari quantity × price

RewardScreen()

  • Menampilkan daftar hadiah berdasarkan poin yang dikumpulkan

  • Fitur tukar poin (bisa menggunakan dialog konfirmasi)

🔁 Logika Inti Aplikasi

Sistem Pemesanan

  • Ketika pengguna memilih sebuah MenuItem, maka dibuat OrderItem.

  • Jika item sudah ada di keranjang, maka quantity akan ditambah.

  • Total harga = OrderItem.price × quantity, dijumlahkan seluruhnya.

Sistem Poin

  • Poin bertambah setiap kali melakukan pembelian

  • Reward hanya bisa ditukar jika userPoints >= requiredPoints

🎨 Theming & Desain

Material 3 Support

  • Menggunakan MaterialTheme dan skema warna yang konsisten

  • Mendukung dark/light theme berdasarkan preferensi sistem

  • Komponen UI seperti Card, TopAppBar, Text, dan Button digunakan dengan gaya modern

Desain Responsif

  • Gunakan WindowInsets, Modifier.padding() untuk kenyamanan pada berbagai ukuran layar

  • Gunakan Image dengan ContentScale.Crop untuk menjaga estetika gambar

🧠 Best Practices & Pembelajaran

Area Praktik Baik
✅ Model Separation Data model dipisah dari UI dengan jelas
📦 Reusability Komponen seperti MenuItemCard dan RewardItemCard dapat digunakan ulang
🧠 State Management Cocok menggunakan remember, rememberSaveable, atau ViewModel untuk menyimpan state
🔄 Composable Structure UI disusun secara modular dan fungsional
🔒 Validation Reward hanya ditukar jika poin mencukupi

Komentar

Posting Komentar

Postingan populer dari blog ini

PPB G - Image Scroll

Nama : Muhammad Hafidh Rosyadi NRP : 5025211013 Kelas  : PPB G Kode : https://github.com/Hfdrsyd/Tugas-PPB/tree/main/img_scroll 📜 Membangun Aplikasi Affirmations dengan Jetpack Compose Aplikasi Affirmations adalah proyek Android sederhana yang dirancang untuk menampilkan daftar afirmasi positif yang dikombinasikan dengan gambar visual yang memotivasi. Aplikasi ini dibangun menggunakan Kotlin dan Jetpack Compose , cocok bagi pemula yang ingin memahami dasar-dasar LazyColumn , Card , serta pengelolaan resources di Compose. 🎯 Tujuan Aplikasi Aplikasi ini menampilkan: ✅ Daftar afirmasi dalam bentuk teks positif (seperti "Saya percaya diri", "Saya kuat", dll). 🖼️ Gambar pendukung untuk setiap afirmasi. 📜 Daftar yang dapat di- scroll secara vertikal menggunakan LazyColumn . 📱 Layout yang responsive terhadap padding status bar dan mendukung layout direction (LTR/RTL). 🏗️ Struktur Proyek Proyek ini terdiri dari beberapa file utama: 1. Model: Af...
Baca selengkapnya

ETS - PPB G

Gambar
Nama : Muhammad Hafidh Rosyadi NRP : 5025211013 Kelas  : PPB G My Gallery App  MyGallery adalah aplikasi front-end untuk menampilkan galeri gambar dari perangkat lokal atau URL dummy. Aplikasi ini fokus pada tampilan gambar yang estetis, responsif di berbagai ukuran layar, serta mendukung mode terang dan gelap. Selain melihat gambar, pengguna dapat melakukan simulasi upload gambar ke galeri. MyGallery menawarkan navigasi yang sederhana, pengalaman pengguna yang halus, dan desain minimalis yang nyaman digunakan.   Fitur Utama: - Galeri Gambar (GridView/RecyclerView): Menampilkan gambar dalam grid rapi, responsif terhadap ukuran layar. - Halaman Detail Gambar: Menampilkan gambar dalam ukuran penuh dengan informasi tambahan. - Simulasi Upload Gambar: Pengguna dapat memilih gambar dan menambahkannya ke galeri secara dummy. - Desain Estetis dan Responsif: UI bersih, dukungan penuh untuk berbagai ukuran layar dan animasi transisi halus. - Mode Gelap: Otomatis mengikuti pengatu...
Baca selengkapnya

Pertemuan 3 - PPB G

 Nama : Muhammad Hafidh Rosyadi  NRP : 5025211013  Kelas  : PPB G     Membuat Aplikasi Happy Birthday dengan Composable Code: package com.example.happybirthday import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.c...
Baca selengkapnya