Tugas 11 - PPB G - 5025221005

☕ Laporan Tugas 11

Starbucks Mobile App dengan Kotlin Compose

Nama: Nabilah Atika Rahma

NRP: 5025221005

Mata Kuliah: Pemrograman Perangkat Bergerak G

Tahun: 2025

Android Studio Kotlin Jetpack Compose Material Design 3 State Management

📱 View on GitHub

📱Pendahuluan

Dalam tugas akhir ini, saya mengembangkan aplikasi mobile Starbucks yang menampilkan pengalaman berbelanja kopi yang premium dan user-friendly. Aplikasi ini dibangun menggunakan Kotlin dan Jetpack Compose dengan implementasi modern Android development practices.

🎯 Tujuan Pengembangan: Menciptakan aplikasi mobile yang mencerminkan brand experience Starbucks dengan fokus pada UI/UX yang premium, state management yang efisien, dan arsitektur yang clean.

✨Fitur Utama & Screenshots

Aplikasi Starbucks terdiri dari 5 screen utama yang masing-masing memiliki fungsi dan design yang berbeda:

Splash Screen dengan animasi

Home Screen dengan promo

Menu dengan quantity controls

Cart dengan total calculation

Profile dengan stats

Menu Scrolling

🏠 Home Dashboard

→

☕ Menu Catalog

→

🛒 Smart Cart

→

👤 User Profile

🏠 Home Dashboard

• Personal Greeting: Sambutan berdasarkan waktu dengan nama user
• Promo Banner: Special offers dengan design gradient yang menarik
• Quick Stats: Points, Orders, dan Rewards dalam card format
• Product Recommendations: Minuman terpilih dengan smooth scrolling

☕ Menu Catalog

• Premium Card Design: Gradient background dengan elevation effects
• Smart Add to Cart: Quantity controls yang intuitive
• Popular Badge: Label untuk item favorit
• Price Formatting: Format rupiah dengan locale Indonesia

🛒 Smart Shopping Cart

• Real-time Calculation: Total otomatis dengan item counter
• Empty State Handling: UI yang informatif saat cart kosong
• Order Summary: Detail pembayaran dengan estimasi waktu
• Checkout Integration: Button dengan icon dan responsive design

👤 Premium Profile

• Member Status: Gold Member badge dengan color coding
• Rewards System: Points tracker dengan progress indicator
• User Statistics: Orders, favorite drinks, dan savings
• Settings Menu: Clean interface dengan icon backgrounds

🎨Design System & Branding

🌈 Brand Color Palette

Primary Green: #00704A

Gold Accent: #D4AF37

Background: #F8F9FA

🔤 Typography Hierarchy

• Headlines: Bold fonts untuk emphasis dan brand identity
• Body Text: Medium weight untuk readability
• Price Display: Bold green untuk pricing prominence
• Captions: Light gray untuk secondary information

🎯 Component Design Principles

• Rounded Corners: 16-20dp untuk modern aesthetic
• Card Elevations: Subtle shadows untuk depth perception
• Gradient Backgrounds: Premium feel dengan brand colors
• Consistent Spacing: 8dp grid system untuk alignment

💻Implementasi Kode & Arsitektur

🏗️ Data Structure

Struktur data yang clean dan scalable untuk management produk dan pesanan:

data class DrinkItem( val id: Int, val title: String, val details: String, val price: Double, val imgRes: Int ) data class OrderEntry( val item: DrinkItem, var count: Int = 1 ) val sampleDrinks = listOf( DrinkItem(1, "Caramel Macchiato", "Espresso kental dengan sirup karamel dan susu hangat", 61000.0, R.drawable.caramel_macchiato), DrinkItem(2, "Caffe Latte", "Campuran lembut antara espresso dan susu panas", 48000.0, R.drawable.caffe_latte), DrinkItem(3, "Americano", "Kopi espresso yang diencerkan dengan air panas", 38000.0, R.drawable.americano), DrinkItem(4, "Caffè Mocha", "Espresso dengan cokelat mocha dan susu panas", 57000.0, R.drawable.caffe_mocha) )

🎮 State Management Implementation

Implementasi state yang efficient dengan reactive updates:

@Composable fun CoffeeHouseApp() { var showIntro by remember { mutableStateOf(true) } var currentTab by remember { mutableStateOf(0) } val cart = remember { mutableStateListOf<OrderEntry>() } if (showIntro) { SplashScreen { showIntro = false } } else { Scaffold( bottomBar = { NavigationBar { val tabs = listOf("Beranda", "Minuman", "Pesanan", "Akun") val icons = listOf(Icons.Default.Home, Icons.Default.LocalCafe, Icons.Default.ShoppingCart, Icons.Default.Person) tabs.forEachIndexed { index, label -> NavigationBarItem( selected = currentTab == index, onClick = { currentTab = index }, icon = { Icon(icons[index], contentDescription = label) }, label = { Text(label) } ) } } } ) { innerPadding -> Box(modifier = Modifier.padding(innerPadding)) { when (currentTab) { 0 -> WelcomeScreen() 1 -> DrinkMenuScreen(cart) 2 -> CartPage(cart) 3 -> UserProfileScreen() } } } } }

🛒 Smart Cart Logic

Logic untuk cart management yang responsive dan real-time:

// Add to Cart with Quantity Control Box( modifier = Modifier .size(44.dp) .background(Color(0xFF00704A), shape = RoundedCornerShape(22.dp)) .clickable { cart.add(OrderEntry(drink, 1)) }, contentAlignment = Alignment.Center ) { Icon(Icons.Default.Add, contentDescription = "Add to cart", tint = Color.White, modifier = Modifier.size(24.dp)) } // Real-time Total Calculation val total = cart.sumOf { it.item.price * it.count } val formatter = NumberFormat.getNumberInstance(Locale("in", "ID")) Text("Rp ${formatter.format(total.toInt())}", style = MaterialTheme.typography.headlineSmall.copy(fontSize = 24.sp, fontWeight = FontWeight.Bold), color = Color(0xFF1E3932))

🎨 Premium UI Components

Custom composable dengan design system yang consistent:

@Composable fun DrinkCard(item: DrinkItem) { Card( modifier = Modifier.fillMaxWidth().clickable { }, shape = RoundedCornerShape(20.dp), elevation = CardDefaults.cardElevation(defaultElevation = 8.dp), colors = CardDefaults.cardColors(containerColor = Color.White) ) { Box { Row(modifier = Modifier.padding(16.dp).fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) { // Gradient Image Container Box(modifier = Modifier.size(85.dp) .background(brush = androidx.compose.ui.graphics.Brush.radialGradient( colors = listOf(Color(0xFF00704A).copy(alpha = 0.1f), Color(0xFF00704A).copy(alpha = 0.05f)), radius = 100f), shape = RoundedCornerShape(16.dp)) .clip(RoundedCornerShape(16.dp))) { Image(painter = painterResource(id = item.imgRes), contentDescription = item.title, modifier = Modifier.fillMaxSize().padding(8.dp), contentScale = ContentScale.Crop) } // Content & Price Section // ... (additional UI components) } } } }

⚙️Fitur Teknis & Optimasi

🚀 Performance Optimizations

• LazyColumn Implementation: Efficient scrolling untuk large datasets
• State Management: Minimal recomposition dengan proper state handling
• Memory Management: Efficient image loading dan caching
• Responsive Design: Adaptive layouts untuk berbagai screen sizes

📱 Modern Android Development

• Jetpack Compose: Declarative UI dengan modern toolkit
• Material Design 3: Latest design system compliance
• Kotlin Best Practices: Clean code dengan type safety
• Modular Architecture: Scalable dan maintainable code structure

💡 Key Technical Achievements:
• Real-time cart management dengan state synchronization
• Custom gradient backgrounds untuk premium aesthetic
• Indonesian locale integration untuk currency formatting
• Responsive navigation dengan bottom tab implementation
• Empty state handling untuk better UX

👥User Experience & Interface Design

🎯 Target User Experience

Aplikasi dirancang untuk memberikan pengalaman yang premium dan intuitive bagi pengguna Starbucks:

• Coffee Enthusiasts: Interface yang menarik untuk pecinta kopi
• Starbucks Loyalists: Brand experience yang authentic
• Mobile-First Users: Optimized untuk penggunaan mobile
• Premium Experience Seekers: UI/UX yang sophisticated

✨ Interaction Design

• Smooth Transitions: Hover effects dan animations yang subtle
• Intuitive Navigation: Bottom tab dengan clear iconography
• Visual Feedback: Button states dan loading indicators
• Gesture Support: Touch-friendly dengan proper hit targets

🎨 Design Principles Applied

• Consistency dalam color scheme dan typography
• Hierarchy yang jelas dengan proper spacing
• Accessibility dengan proper contrast ratios
• Brand alignment dengan Starbucks visual identity
• Performance optimization untuk smooth interactions
• Responsive design untuk various device sizes

✨Kesimpulan & Refleksi

Pengembangan aplikasi Starbucks Mobile App ini telah memberikan pembelajaran yang mendalam tentang modern Android development menggunakan Jetpack Compose. Implementasi design system yang consistent, state management yang efficient, dan user experience yang premium menjadi fokus utama dalam pengembangan.

🔑 Key Learnings & Achievements:
• Mastery of Jetpack Compose untuk declarative UI development
• Implementation of Material Design 3 dengan custom theming
• Advanced state management dengan reactive programming
• Brand-focused design system development
• Performance optimization untuk mobile applications
• Clean architecture principles dalam Android development

🚀 Technical Skills Gained

• Kotlin Expertise: Advanced language features dan best practices
• Compose Mastery: Custom components dan complex layouts
• State Management: Efficient data flow dan reactive updates
• UI/UX Design: Premium interface design principles
• Performance Optimization: Memory management dan rendering efficiency

📈 Future Enhancements

Aplikasi ini dapat dikembangkan lebih lanjut dengan fitur-fitur advanced seperti:

• Integration dengan payment gateways untuk real checkout
• Push notifications untuk promo dan order updates
• Location-based services untuk store finder
• User authentication dan cloud synchronization
• Analytics integration untuk user behavior tracking

Project ini membuktikan bahwa dengan Jetpack Compose dan modern Android development tools, kita dapat menciptakan aplikasi mobile yang tidak hanya functional tetapi juga memberikan user experience yang exceptional dan sesuai dengan brand identity yang kuat.

📚 Referensi & Resources

Android Development Documentation: