Tugas Pertemuan ke-11 [Starbucks App]

June 24, 2025

Tugas Pertemuan ke-11 [Starbucks App]

Starbucks App Clone - OTP Authentication System

Starbucks App Clone adalah aplikasi mobile yang mereplikasi tampilan dan fungsionalitas aplikasi Starbucks resmi dengan fokus pada implementasi sistem OTP (One-Time Password) untuk proses sign up dan autentikasi. Aplikasi ini mendemonstrasikan UI/UX design yang menarik dan sistem keamanan modern untuk verifikasi pengguna.

☕ Custom Project: Starbucks Clone dengan OTP Authentication

OTP Authentication Implementation

class OTPViewModel : ViewModel() {
    private val _otpState = MutableStateFlow(OTPState())
    val otpState: StateFlow<OTPState> = _otpState.asStateFlow()

    private val _phoneNumber = MutableStateFlow("")
    val phoneNumber: StateFlow<String> = _phoneNumber

    fun sendOTP(phoneNumber: String) {
        _otpState.value = _otpState.value.copy(
            isLoading = true,
            errorMessage = null
        )
        
        // Simulate OTP sending
        viewModelScope.launch {
            delay(2000)
            _otpState.value = _otpState.value.copy(
                isLoading = false,
                isOTPSent = true,
                otpSentTime = System.currentTimeMillis()
            )
        }
    }
}

🔐 OTP System

OTPViewModel mengelola state untuk proses pengiriman dan verifikasi OTP. Menggunakan StateFlow untuk reactive updates dan ViewModelScope untuk asynchronous operations yang aman.

Phone Number Validation

data class OTPState(
    val isLoading: Boolean = false,
    val isOTPSent: Boolean = false,
    val isOTPVerified: Boolean = false,
    val errorMessage: String? = null,
    val otpSentTime: Long = 0L,
    val remainingTime: Int = 60
)

fun validatePhoneNumber(phone: String): Boolean {
    val phonePattern = "^(\\+62|62|0)8[1-9][0-9]{6,9}$"
    return phone.matches(phonePattern.toRegex())
}

fun formatPhoneNumber(input: String): String {
    val cleaned = input.replace(Regex("[^\\d]"), "")
    return when {
        cleaned.startsWith("08") -> "+62${cleaned.substring(1)}"
        cleaned.startsWith("62") -> "+$cleaned"
        else -> cleaned
    }
}

📱 Phone Validation

Sistem validasi nomor telepon Indonesia dengan format yang tepat. Otomatis mengformat nomor ke format internasional (+62) dan memvalidasi pattern nomor telepon yang valid.

OTP Verification UI

@Composable
fun OTPVerificationScreen(
    otpViewModel: OTPViewModel
) {
    val otpState by otpViewModel.otpState.collectAsState()
    var otpCode by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        OTPInputField(
            value = otpCode,
            onValueChange = { 
                if (it.length <= 6) otpCode = it 
            },
            modifier = Modifier.fillMaxWidth()
        )
        
        AnimatedVisibility(
            visible = otpState.remainingTime > 0
        ) {
            Text(
                text = "Resend OTP in ${otpState.remainingTime}s",
                style = MaterialTheme.typography.bodySmall
            )
        }
    }
}

⌨️ OTP Input UI

Interface untuk input kode OTP dengan validasi panjang karakter. Menggunakan AnimatedVisibility untuk countdown timer dan state management untuk reactive UI updates.

Starbucks UI Components

@Composable
fun StarbucksButton(
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true
) {
    Button(
        onClick = onClick,
        enabled = enabled,
        modifier = modifier
            .fillMaxWidth()
            .height(56.dp),
        colors = ButtonDefaults.buttonColors(
            containerColor = Color(0xFF00704A),
            contentColor = Color.White
        ),
        shape = RoundedCornerShape(28.dp)
    ) {
        Text(
            text = text,
            fontSize = 16.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

🎨 Custom Components

Komponen UI kustom yang mengikuti design language Starbucks dengan warna hijau khas dan rounded corners. Memberikan konsistensi visual di seluruh aplikasi.

App Features

Authentication Flow

Phone number input & validation
OTP code generation & sending
OTP verification with timer
Secure user registration

UI/UX Design

Starbucks brand colors
Smooth animations
Responsive layouts
User-friendly interface

Fungsi Utama OTP System

1. Secure Authentication

Sistem OTP memberikan layer keamanan tambahan dengan verifikasi nomor telepon yang valid dan real-time.
2. User Experience

Interface yang intuitif dengan countdown timer, error handling, dan feedback visual untuk user guidance.
3. State Management

Mengelola complex authentication flow dengan multiple states menggunakan ViewModel dan StateFlow pattern.

Technical Components

🔐

OTP System

One-Time Password generation dan verification

📱

Phone Validation

Format dan validasi nomor telepon Indonesia

⏱️

Timer System

Countdown timer untuk resend OTP functionality

🎨

Starbucks UI

Custom components dengan brand identity

Kesimpulan: Starbucks App Clone mendemonstrasikan implementasi sistem OTP yang aman dan user-friendly dengan design yang menarik. Aplikasi ini mengkombinasikan aspek keamanan modern dengan pengalaman pengguna yang optimal.

Tampilan Aplikasi