Pengumpulan Tugas Pemrograman Perangkat Bergerak G - Pertemuan 15 tugas 11

Dokumentasi Proyek Starbucks Rewards Redesign (Compose UI)

Selamat datang di Dokumentasi Proyek Starbucks Rewards Redesign!

Dokumen ini menyediakan gambaran umum, panduan setup, penjelasan kode, dan solusi umum untuk masalah yang mungkin Anda temui saat menjalankan proyek ini.

Daftar Isi

1. Pengantar Proyek

Proyek ini adalah upaya untuk meredesain antarmuka pengguna (UI) aplikasi Starbucks Rewards menggunakan Jetpack Compose, framework UI modern dari Android. Tujuannya adalah untuk meniru tampilan dan nuansa aplikasi Starbucks Rewards yang ada, dengan fokus pada sistem poin keanggotaan (Stars) dan alur kerja penukaran reward.

2. Fitur Utama

  • Tampilan Home Screen yang menunjukkan jumlah Stars.
  • Progress bar untuk melacak level Stars.
  • Daftar opsi redeem reward berdasarkan jumlah Stars yang dibutuhkan.
  • Simulasi alur kerja penukaran reward melalui beberapa layar ponsel.
  • Bottom navigation bar yang intuitif.
  • Penggunaan warna branding Starbucks untuk konsistensi visual.

3. Teknologi yang Digunakan

  • Bahasa Pemrograman: Kotlin
  • Framework UI: Jetpack Compose
  • Android Gradle Plugin (AGP): v8.4.0 (disarankan, atau yang kompatibel dengan API 35)
  • Android SDK: API Level 35
  • AndroidX Libraries: Material Design, Activity Compose, Core KTX, dll.

4. Prasyarat Sistem

Untuk menjalankan dan mengembangkan proyek ini, Anda membutuhkan:

  • Android Studio: Versi terbaru (misalnya, Giraffe, Hedgehog, atau Iguana).
  • Android SDK Platform 35: Pastikan Anda telah menginstalnya melalui SDK Manager di Android Studio (Tools > SDK Manager > SDK Platforms).
  • Pengetahuan Dasar: Pemahaman tentang Kotlin, dasar-dasar pengembangan Android, dan konsep Jetpack Compose akan sangat membantu.

5. Setup Proyek

Ikuti langkah-langkah di bawah ini untuk menyiapkan proyek di Android Studio Anda.

5.1. Update Android Gradle Plugin (AGP) dan SDK

Ini adalah langkah krusial untuk mengatasi masalah kompatibilitas dependensi.

  1. Update AGP di build.gradle (Project Level) atau settings.gradle:

    Buka file build.gradle di root folder proyek Anda (atau settings.gradle untuk proyek baru). Ubah versi com.android.application ke versi yang mendukung compileSdk 35 (misalnya, 8.4.0 atau yang lebih baru).

    
// build.gradle (Project: your_project_name) atau settings.gradle
plugins {
    id 'com.android.application' version '8.4.0' apply false // <-- ...="" apply="" as="" atau="" baru="" code="" disarankan="" false="" id="" ini="" jika="" lebih="" oleh="" org.jetbrains.kotlin.android="" pastikan="" sesuaikan="" versi="" version="" yang="">
  2. Update compileSdk dan targetSdk di build.gradle (Module: app):

    Buka file build.gradle yang berada di dalam folder app. Ubah nilai compileSdk dan targetSdk menjadi 35.

    
// build.gradle (Module: app)
android {
    namespace 'com.example.starbuck_redesign'
    compileSdk 35 // <-- ...="" 35="" code="" defaultconfig="" ke="" targetsdk="" ubah="">
  3. Sinkronisasi Gradle:

    Klik tombol "Sync Now" di Android Studio (biasanya muncul setelah perubahan Gradle) atau pergi ke File > Sync Project with Gradle Files.

5.2. Tambahkan Aset Drawable

Proyek ini menggunakan beberapa aset gambar kustom yang perlu Anda tempatkan di folder res/drawable/. Ini termasuk ikon panah, ilustrasi kopi, dan ikon reward.

  1. Buat ic_arrow_right.xml:

    Klik kanan pada folder res/drawable > New > Vector Asset. Pilih ikon panah kanan dan beri nama ic_arrow_right. Atau, salin kode XML berikut:

    


  
      android:pathData="M8.59,16.59L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.59Z"/>
  2. Tambahkan Ilustrasi Kustom (PNG/WebP/Vector Drawable):

    Anda perlu mendapatkan atau membuat gambar-gambar berikut dan menyimpannya di folder app/src/main/res/drawable/ dengan nama yang persis sama:

    • coffee_bag.png (atau `.webp`, `.xml`)
    • coffee_cup.png (atau `.webp`, `.xml`)
    • coffee_beans.png (atau `.webp`, `.xml`)
    • espresso_shot.png (atau `.webp`, `.xml`)
    • coffee_croissant.png (atau `.webp`, `.xml`)
    • grande_drink.png (atau `.webp`, `.xml`)

    Jika Anda tidak memiliki aset ini, Anda bisa membuat placeholder sederhana (misalnya, persegi atau lingkaran berwarna) sebagai Vector Drawable XML untuk setiap nama file agar proyek dapat dikompilasi.

5.3. Pastikan Import Kotlin dan Compose

Pastikan file MainActivity.kt memiliki semua import yang diperlukan untuk ikon Material Design dan Modifier Compose.


// Dalam MainActivity.kt
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
// ... (ikon filled lainnya yang Anda gunakan)
import androidx.compose.material.icons.outlined.PersonOutline // Penting untuk PersonOutline
import androidx.compose.ui.draw.rotate // Penting untuk fungsi .rotate()

// Pastikan dependensi ini di build.gradle (Module: app)
// implementation "androidx.compose.material:material-icons-extended:1.X.X"
// (Ganti 1.X.X dengan versi Compose UI yang Anda gunakan, atau gunakan Compose BOM)

5.4. Clean & Rebuild Proyek

Setelah semua perubahan di atas, lakukan langkah-langkah ini untuk membersihkan cache dan membangun ulang proyek:

  1. Build > Clean Project
  2. Build > Rebuild Project
  3. Jika masih ada masalah, coba File > Invalidate Caches / Restart... lalu pilih Invalidate and Restart.

6. Penjelasan Struktur Kode (MainActivity.kt)

Kode proyek ini terstruktur menggunakan Jetpack Compose, dengan setiap bagian UI direpresentasikan sebagai fungsi Composable.

6.1. Warna Kustom

Beberapa warna kustom didefinisikan untuk mencocokkan branding Starbucks:

  • StarbucksGreen: Latar belakang hijau muda.
  • StarbucksDarkGreen: Hijau gelap untuk teks dan tombol.
  • StarbucksGold: Emas untuk bintang dan level.

val StarbucksGreen = Color(0xFFE0F2E7)
val StarbucksDarkGreen = Color(0xFF006121)
val StarbucksGold = Color(0xFFC79800)

6.2. StarbucksRewardsScreen

Ini adalah Composable utama yang menampung seluruh tampilan aplikasi Starbucks Rewards. Ini mengatur tata letak vertikal (Column) untuk logo, headline, alur kerja ponsel, dan ilustrasi akhir.


@Composable
fun StarbucksRewardsScreen() {
    Surface(modifier = Modifier.fillMaxSize(), color = StarbucksGreen) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(top = 32.dp, bottom = 16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // ... Logo, Headline, LazyRow of PhoneWorkflowStep, Final Illustration
        }
    }
}

6.3. PhoneWorkflowStep dan PhoneFrame

  • PhoneFrame: Sebuah Composable yang menggambar bingkai ponsel generik dengan sudut membulat dan notch sederhana. Konten di dalamnya (layar aplikasi) dapat disuntikkan melalui parameter content.
  • PhoneWorkflowStep: Menggabungkan PhoneFrame dengan deskripsi teks di bawahnya, mewakili satu langkah dalam alur kerja visual. Digunakan dalam LazyRow untuk memungkinkan scrolling horizontal.

@Composable
fun PhoneFrame(content: @Composable () -> Unit) { /* ... */ }

@Composable
fun PhoneWorkflowStep(phoneContent: @Composable () -> Unit, description: String, modifier: Modifier = Modifier) { /* ... */ }

6.4. HomeScreenContent

Mensimulasikan tampilan layar utama aplikasi Starbucks Rewards, menampilkan:

  • Saldo Stars pengguna.
  • Progress bar menuju level Stars berikutnya.
  • Tombol "Details" dan "Redeem".
  • Bagian "Mobile Order" (contoh).
  • Navigasi bawah.

@Composable
fun HomeScreenContent(isInitial: Boolean = true) { /* ... */ }

6.5. RewardOptionsScreenContent

Mensimulasikan tampilan layar opsi reward, menampilkan daftar reward yang tersedia dan biaya Stars untuk setiap reward.


@Composable
fun RewardOptionsScreenContent() { /* ... */ }

Menggunakan RewardItemCard sebagai komponen individu untuk setiap reward.


@Composable
fun RewardItemCard(title: String, description: String, starsRequired: Int, image: Painter) { /* ... */ }

6.6. RefreshedRewardsScreenContent

Mensimulasikan tampilan layar rewards setelah di-refresh (misalnya, setelah penukaran), menunjukkan saldo Stars yang diperbarui, status keanggotaan, dan daftar reward.


@Composable
fun RefreshedRewardsScreenContent() { /* ... */ }

6.7. BottomNavBar

Komponen navigasi bawah yang digunakan di berbagai layar ponsel untuk konsistensi UI.


@Composable
fun BottomNavBar(selectedTab: String = "Home") { /* ... */ }

@Composable
fun NavBarItem(icon: ImageVector, text: String, isSelected: Boolean) { /* ... */ }

7. Troubleshooting Masalah Umum

7.1. "Unresolved reference" (Drawable, Icon, Modifier)

Pesan ini berarti compiler tidak dapat menemukan definisi untuk nama yang Anda gunakan. Penyebab umum:

  • Drawable: File gambar (PNG/WebP) atau Vector Drawable (XML) dengan nama yang direferensikan (misalnya R.drawable.coffee_bag) belum ada di folder app/src/main/res/drawable/.
    Solusi: Pastikan semua file drawable yang disebutkan di bagian 5.2 ada di folder tersebut, lalu lakukan Clean & Rebuild Project.
  • Icon (misal: PersonOutline, Home): Ikon dari Material Design Icons membutuhkan import yang spesifik (misalnya Icons.Outlined.PersonOutline bukan Icons.Default.PersonOutline) dan dependensi material-icons-extended.
    Solusi: Tambahkan implementation "androidx.compose.material:material-icons-extended:1.X.X" di build.gradle (Module: app) dan pastikan import di MainActivity.kt sudah benar (misalnya import androidx.compose.material.icons.outlined.PersonOutline).
  • Modifier (misal: rotation): Fungsi seperti .rotate() adalah extension function pada Modifier dan membutuhkan import import androidx.compose.ui.draw.rotate. Kesalahan "receiver type mismatch" sering menyertai ini jika import hilang atau ada masalah cache.
    Solusi: Pastikan import androidx.compose.ui.draw.rotate ada. Lakukan Clean & Rebuild Project, atau Invalidate Caches / Restart jika masalah berlanjut.

7.2. "Dependency requires compileSdk 35"

Ini terjadi karena versi dependensi AndroidX yang Anda gunakan sudah memerlukan API level 35, sementara proyek Anda masih mengkompilasi di API level 34, dan Android Gradle Plugin Anda juga terlalu lama.

Solusi: Ikuti semua langkah di bagian 5.1. Update Android Gradle Plugin (AGP) dan SDK secara berurutan.

8. Pengembangan Selanjutnya

Proyek ini dapat dikembangkan lebih lanjut dengan menambahkan fitur-fitur seperti:

  • Integrasi dengan API nyata untuk data Stars dan Rewards yang dinamis.
  • Animasi yang lebih kompleks dan transisi antar layar.
  • Fungsionalitas interaktif penuh (misalnya, tombol "Redeem" yang benar-benar memicu aksi).
  • Penanganan status dengan State Management (misalnya, ViewModel dan StateFlow).
  • Unit testing dan UI testing.

Terima kasih telah menggunakan dokumentasi ini. Semoga proyek Anda berjalan lancar!

Comments

Post a Comment