UI Aplikasi Starbucks ☕

on

  Furstin Aprilavia Putri - 5025221234 - PPB D

Membangun UI Aplikasi Starbucks dengan Kotlin Android Studio 📱

1. Pendahuluan 

Pada proyek ini, saya membuat tampilan antarmuka (UI) untuk aplikasi Starbucks versi demo menggunakan Kotlin Android Studio. Fokus utama adalah menciptakan pengalaman pengguna yang modern dan konsisten dengan identitas brand Starbucks, seperti dominasi warna hijau, penggunaan logo khas, serta desain UI berbasis Material Design.

Fitur Utama:

  • Welcome Screen dengan animasi dan branding yang kuat
  • Login Screen dengan validasi form yang elegant
  • Register Screen dengan multi-step form (Phone → OTP → Personal Info)
  • Autentikasi sederhana dengan hardcoded credentials
  • Design system yang konsisten menggunakan warna brand Starbucks
2. UI Aplikasi
Perbandingan dengan UI Starbucks App yang asli

3. Penjelasan

🔐 Autentikasi dengan Validasi Lengkap
Aplikasi menerapkan sistem autentikasi awal menggunakan kombinasi email dan password. Validasi dilakukan untuk memastikan pengguna tidak mengosongkan kolom input, serta memastikan kecocokan data yang telah ditentukan.

private fun validateLogin(email: String, password: String): Boolean {
    if (email.isEmpty()) {
        binding.etEmail.error = "Email tidak boleh kosong"
        return false
    }
    if (password.isEmpty()) {
        binding.etPassword.error = "Password tidak boleh kosong"
        return false
    }
    if (!android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
        binding.etEmail.error = "Format email tidak valid"
        return false
    }
    return true
}
Fungsi ini memastikan input user sah secara format sebelum login diproses, serta memberikan umpan balik langsung berupa error pada masing-masing field jika terjadi kesalahan.

📲 Verifikasi OTP 
Dalam proses registrasi, aplikasi menyediakan fitur simulasi pengiriman OTP ke nomor HP pengguna. Setelah pengguna mengisi nomor HP dan menekan tombol "Send OTP", aplikasi akan:
  • Menampilkan form OTP
  • Menampilkan form data diri
  • Mengganti teks tombol menjadi “RESEND OTP”
binding.btnSendOtp.setOnClickListener {
    val phoneNumber = binding.etPhoneNumber.text.toString()
    if (phoneNumber.isNotEmpty()) {
        isOtpSent = true
        binding.btnSendOtp.text = "RESEND OTP"
        binding.tilOtp.visibility = View.VISIBLE
        binding.llPersonalInfo.visibility = View.VISIBLE
        Toast.makeText(this, "OTP sent to $phoneNumber", Toast.LENGTH_SHORT).show()
    } else {
        binding.etPhoneNumber.error = "Phone number is required"
    }
}

✅ Validasi Formulir Pendaftaran
Saat proses registrasi, aplikasi mengecek bahwa seluruh data telah diisi dan password yang diketik cocok dengan konfirmasi password.

if (password != confirmPassword) {
    binding.etConfirmPassword.error = "Passwords do not match"
    return false
}
Validasi ini mencegah kesalahan umum seperti ketidaksesuaian password, serta memberikan feedback real-time kepada pengguna.

4. Isi Keseluruhan Aplikasi

1. WelcomeActivity
Menampilkan logo Starbucks di tengah layar dengan background hijau.
Tombol “GET STARTED” akan mengarahkan ke halaman login.

2. LoginActivity
Menggunakan TextInputLayout untuk input modern.
Validasi login sederhana:
Email: admin@starbucks.com
Password: admin123
Jika sukses, muncul Toast sukses, jika gagal, muncul error.
Tombol “Sign Up” untuk berpindah ke halaman Register.

3. RegisterActivity
UI form bertahap: nomor telepon → OTP → data pribadi.

4. Styling & Resources
Warna disesuaikan dengan brand Starbucks (#00704A, putih, coklat muda).
File styles.xml, colors.xml, dan drawable diatur untuk keselarasan desain.

5. View Binding
Menggunakan viewBinding untuk akses layout yang lebih aman dan efisien.

5. Video Presentasi 


Comments

Post a Comment