Tugas Week 15 - PPB G - 5025221040

 

Tugas 11: Membuat Re-Design Aplikasi Starbucks

Nama    : Genta Putra Prayoga

NRP      : 5025221040

Kelas     : G

Link Github: raymrichigat/ppb-g-tugas11

Membuat UI Starbucks App dengan Jetpack Compose: Panduan Lengkap

Dalam tutorial kali ini, kita akan membahas bagaimana membuat aplikasi mobile yang meniru tampilan aplikasi Starbucks menggunakan Jetpack Compose di Android. Aplikasi ini menggunakan desain modern dengan tema gelap dan efek glassmorphism yang menarik.

🎨 Konsep Desain

Aplikasi ini mengadopsi beberapa konsep desain modern:

• Dark Theme: Menggunakan latar belakang gelap untuk tampilan yang elegan
• Glassmorphism: Efek kaca buram pada card-card tertentu
• Modern UI Components: Menggunakan Material 3 design system
• Gradient Effects: Efek gradien radial untuk visual yang menarik

🏗️ Struktur Aplikasi

1. MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            StarbucksappTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = DarkBackground
                ) {
                    StarbucksApp()
                }
            }
        }
    }
}

MainActivity adalah entry point aplikasi yang mengatur tema dan memanggil komponen utama StarbucksApp().

2. Komponen Utama StarbucksApp

@Composable
fun StarbucksApp() {
    Scaffold(
        containerColor = Color.Transparent,
        bottomBar = { BottomNavigationBar() },
        floatingActionButton = { PayButton() },
        floatingActionButtonPosition = FabPosition.End
    ) { paddingValues ->
        // Konten utama dalam Column dengan scroll
    }
}

Menggunakan Scaffold sebagai struktur dasar dengan:

• Bottom navigation bar
• Floating action button untuk "Pay"
• Scrollable content area

📱 Komponen-Komponen UI

1. Top Header

Menampilkan sapaan personal dan nama pengguna:

@Composable
fun TopHeader() {
    Box(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
        Column {
            Text("Good Afternoon,", color = TextGray)
            Text("Genta Putra", color = TextWhite, fontWeight = FontWeight.Bold)
        }
    }
}

2. Star Balance Section (Glassmorphism Effect)

Bagian ini menggunakan efek glassmorphism dengan card transparan:

Card(
    colors = CardDefaults.cardColors(
        containerColor = Color.White.copy(alpha = 0.1f)
    ),
    border = BorderStroke(1.dp, Color.White.copy(alpha = 0.2f))
) {
    // Konten balance dan quick action buttons
}

Fitur utama:

• Menampilkan saldo stars (0)
• Quick action buttons (Profile, Inbox)
• Efek kaca transparan dengan border

3. Action Buttons

Dua tombol utama untuk interaksi:

• Details: Button dengan background gelap
• Redeem: Button hijau Starbucks dengan icon star

4. Promotional Card (Highlight Utama)

Card promosi dengan desain yang menarik:

Box(
    modifier = Modifier
        .fillMaxSize()
        .background(
            brush = Brush.radialGradient(
                colors = listOf(
                    StarbucksGreenDarkTheme.copy(alpha = 0.5f), 
                    DarkBackground
                ),
                center = Offset(x = 50f, y = -50f),
                radius = 400f
            )
        )
)

Fitur desain:

• Radial gradient dari hijau Starbucks ke background gelap
• Icon kopi di pojok kanan atas sebagai "stempel"
• Text "Coffee Treat" dengan typography yang besar
• Call-to-action button "Get 30% OFF REWARD"

5. News Section

Section berita dengan card yang dapat diklik:

Card(
    onClick = {},
    colors = CardDefaults.cardColors(containerColor = DarkSurface)
) {
    Row {
        // Icon placeholder
        // Text content
    }
}

6. Bottom Navigation

Navigation bar dengan 5 menu utama:

• Home (selected)
• Card
• Order
• Reward
• Store

Menggunakan NavigationBarItem dengan custom colors untuk selected/unselected state.

7. Floating Action Button

Tombol "Pay" yang mengambang di pojok kanan bawah:

FloatingActionButton(
    onClick = { },
    containerColor = StarbucksGreenDarkTheme,
    contentColor = Color.Black,
    modifier = Modifier.size(64.dp),
    shape = CircleShape
)

🎨 Color Scheme

Aplikasi menggunakan skema warna yang konsisten:

• DarkBackground: Latar belakang utama
• StarbucksGreenDarkTheme: Hijau khas Starbucks untuk dark theme
• TextWhite: Text utama
• TextGray: Text sekunder
• DarkSurface: Surface untuk card dan komponen

✨ Fitur UI/UX Modern

1. Glassmorphism Effect

Menggunakan transparansi dan border untuk menciptakan efek kaca:

containerColor = Color.White.copy(alpha = 0.1f)
border = BorderStroke(1.dp, Color.White.copy(alpha = 0.2f))

2. Gradient Background

Gradient radial pada promotional card untuk visual yang menarik:

Brush.radialGradient(
    colors = listOf(color1, color2),
    center = Offset(x, y),
    radius = radius
)

3. Rounded Corners

Semua komponen menggunakan rounded corners dengan berbagai radius untuk konsistensi desain.

4. Proper Spacing

Menggunakan Spacer dan padding yang konsisten untuk tata letak yang rapi.

🚀 Kesimpulan

Kode ini mendemonstrasikan implementasi UI modern dengan Jetpack Compose yang mencakup:

1. Material 3 Design System
2. Dark Theme Implementation
3. Glassmorphism Effects
4. Custom Color Schemes
5. Modern Typography
6. Interactive Components
7. Responsive Layout

Aplikasi ini bisa menjadi referensi yang baik untuk membuat aplikasi dengan desain modern dan user experience yang menarik. Setiap komponen dirancang dengan perhatian terhadap detail visual dan konsistensi brand Starbucks.

📝 Tips Pengembangan

1. Konsistensi Warna: Gunakan color scheme yang terdefinisi dengan baik
2. Spacing System: Gunakan ukuran padding dan margin yang konsisten
3. Typography Hierarchy: Atur hierarki teks dengan jelas
4. Interactive Feedback: Berikan feedback visual untuk interaksi user
5. Accessibility: Pastikan kontras warna yang baik untuk readability

Dengan mengikuti prinsip-prinsip ini, Anda dapat membuat aplikasi yang tidak hanya indah secara visual, tetapi juga memberikan pengalaman pengguna yang optimal.