Tugas 11 PPB G - Melakukan Redesign Aplikasi Starbucks Menggunakan Jetpack Compose

Tugas Pertemuan 15 (secara urutan pertemuan)

Tugas Pertemuan 11 (secara spreadsheet)  

Kelas PPB G 2025

oleh : Arfi Raushani Fikra (5025211084)

Proyek ini adalah sebuah redesign sederhana dari aplikasi Starbucks Indonesia, yang dibuat menggunakan Jetpack Compose di Android Studio. Tujuan utamanya adalah menyederhanakan tampilan, meningkatkan user experience, serta menyesuaikan fitur-fitur penting dalam satu aplikasi mobile minimalis. Aplikasi ini diberi nama Setorbicks. Penggantian nama ini merupakan bentuk pengambilan sikap saya terkait konflik di Palestina yaitu dengan memboikot brand produk yang diduga terafiliasi dengan zionis. Saya juga mengganti logonya dengan desain saya sendiri.

desain logo Setorbicks


Source code dapat dilihat disini

A. Fitur Utama

Berikut fitur-fitur utama yang saya implementasikan:

  1. Home Screen

    • Menampilkan daftar menu Starbucks dengan gambar dan harga.

    • Setiap menu bisa ditambahkan ke keranjang menggunakan tombol "+ Tambah".

  2. Order Screen

    • Menampilkan daftar menu yang telah ditambahkan oleh pengguna.

    • Dilengkapi dengan kuantitas setiap item dan total harga otomatis.

  3. Reward Screen

    • Menampilkan total star points yang dimiliki pengguna.

    • Terdapat 3 pilihan reward yang bisa ditukar dengan poin, seperti “Free Latte” atau “Tumbler”.

  4. Profile Screen

    • Menampilkan profil pengguna berupa gambar, nama, nomor telepon, dan email.

    • Tidak terdapat interaksi, hanya tampilan statis.


B. Struktur Folder Proyek

Berikut struktur folder pada proyek ini


C. Metode dan Teknologi

Berikut beberapa teknologi yang digunakan untuk pembuatan proyek ini

  • Kotlin dengan Jetpack Compose

  • Android Studio Flamingo / Hedgehog

  • Material 3 Design

  • ViewModel untuk state management sederhana

  • LazyColumn, LazyVerticalGrid untuk UI layout dinamis

  • Drawable resources untuk gambar menu dan reward


D. Tampilan Hasil

Berikut hasil dari aplikasinya (ditampilkan melalui virtual device di Andoid Studio)

  • Home Screen

            Pada halaman ini ditampilkan menu yang dapat ditambahkan ke pesanan
  • Order Screen
   
          Pesanan dari Home Screen akan ditampilkan di halaman ini beserta jumlah, subtotal                  harga, dan total harganya.
  • Reward Screen

          Jika tombol tukar poin di-klik, maka akan mengurangi star points yang ada di paling atas
  • Profile Screen


Proyek ini memberikan pengalaman berharga bagi saya dalam membangun UI/UX aplikasi mobile secara modular. Dengan Jetpack Compose, pengembangan terasa lebih cepat dan intuitif. Hasil redesign ini dirancang agar lebih sederhana dalam penggunaannya. Redesign ini dapat terus dikembangkan, misalnya dengan fitur autentikasi, integrasi API, dan sistem pembayaran real-time di masa depan.

                                            
                                                                        
                                                                       
                                                                            ~ Terima Kasih ~





Comments

Post a Comment

Popular posts from this blog

Tugas 1 Presentasi Evolusi Teknologi Bergerak PPB G

Image
Tugas Pertemuan 1 PPB G 2025 oleh : Arfi Raushani Fikra (5025211084) Pada pertemuan ke-1 ini, kami diminta untuk membuat presentasi tentang evolusi teknologi perangkat bergerak. Penjelasan ini terbagi ke dalam beberapa periodisasi. Setiap periodisasi memiliki peningkatan teknologinya masing-masing. Pemaparan dibahas pada video berikut. Link Video Youtube Presentasi Evolusi Teknologi Bergerak Terima Kasih
Read more

Tugas 5 PPB G - Membuat Aplikasi Kalkulator Sederhana Menggunakan Jetpack Compose

Image
  Tugas Pertemuan 5 PPB G 2025 oleh : Arfi Raushani Fikra (5025211084) Pada pertemuan ke-5 ini, kami diminta membuat aplikasi Kalkulator sederhana.  Aplikasi ini adalah kalkulator sederhana yang dibuat menggunakan Jetpack Compose di Android Studio dengan Kotlin . Pengguna dapat memasukkan dua angka dan memilih operasi matematika dasar ( penjumlahan, pengurangan, perkalian, dan pembagian ) untuk mendapatkan hasilnya. Source Code dapat dilihat  disini Berikut penjelasan kodenya a. MainActivity.kt Kelas MainActivity bertindak sebagai titik masuk utama aplikasi. Di dalamnya, UI dikonstruksi dengan fungsi setContent { CalculatorApp() } , yang memanggil fungsi Composable utama. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CalculatorA...
Read more

ETS PPB G - Membuat Aplikasi Centry: Money Tracker App Menggunakan Jetpack Compose

Image
  Evaluasi Tengah Semester PPB G 2025 oleh :  Arfi Raushani Fikra (5025211084) Farhan Dwi Putra (5025211093) Pada Evaluasi Tengah Semester ini, kami membuat a plikasi android Centry.  Centry Money Tracker adalah aplikasi Android sederhana untuk membantu pengguna dalam mencatat dan melacak pemasukan dan pengeluaran harian mereka. Proyek ini dikembangkan menggunakan Kotlin dan Jetpack Compose. Source Code dapat dilihat  disini a. Fitur Utama Tambah pemasukan dan pengeluaran dengan mudah Lihat histori transaksi UI modern menggunakan Jetpack Compose b. Struktur Proyek centry/ ├── ui/ │ ├── screens/ │ │ ├── HomeScreen.kt │ │ └── AddTransactionScreen.kt │ │ └── AnalyticsScreen.kt │ ├── components/ │ │ └── TransactionItem.kt │ │ └── TransactionGroupCard.kt │ ├── theme/ │ │ └── Color.kt │ │ └── Theme.kt │ │ └── Type.kt ├── model/ │ └── Transaction.kt │ └── TransactionType.kt ├── viewmodel/ │ └── TransactionViewModel.kt ├─...
Read more