Tugas 11 - Membuat Aplikasi Authentication

Membuat Aplikasi Authentication

Ricardo Supriyanto - 5025221218

Pada proyek kali ini, saya membangun sebuah aplikasi Android fungsional yang mengadopsi alur registrasi dan login, terinspirasi dari aplikasi Starbucks. Proyek ini bertujuan untuk memperdalam pemahaman mengenai integrasi layanan backend modern ke dalam aplikasi Android. Fokus utama pengembangan adalah pada implementasi sistem otentikasi pengguna yang lengkap dan aman menggunakan Firebase, dengan antarmuka pengguna (UI) yang dibangun sepenuhnya secara deklaratif menggunakan Jetpack Compose dan pengelolaan state yang efisien melalui arsitektur MVVM (Model-View-ViewModel).

Aplikasi "Starbucks Clone" ini dirancang sebagai aplikasi utilitas yang menangani salah satu alur pengguna paling fundamental: otentikasi. Pengguna dapat membuat akun baru menggunakan email dan password, di mana data pribadi mereka seperti nama lengkap dan tanggal lahir akan disimpan secara aman di Cloud Firestore. Setelah terdaftar, pengguna dapat login ke dalam aplikasi. Sistem akan mengingat sesi login mereka, sehingga pengguna tidak perlu login kembali setiap kali membuka aplikasi. Arsitektur aplikasi ini dibangun di atas prinsip Unidirectional Data Flow (UDF), memastikan bahwa UI selalu merupakan representasi dari state yang ada di ViewModel, menghasilkan aplikasi yang robust, mudah dikelola, dan dapat diuji.

Fitur-fitur utama yang berhasil diimplementasikan meliputi:

Registrasi Pengguna: Sistem pendaftaran menggunakan email dan password melalui Firebase Authentication.
Penyimpanan Data Tambahan: Informasi pengguna (nama, tanggal lahir) disimpan di Cloud Firestore dan ditautkan ke akun Authentication mereka.
Login Pengguna: Sistem login aman menggunakan email dan password.
Manajemen Sesi Persisten: Aplikasi dapat mengingat status login pengguna bahkan setelah ditutup sepenuhnya.
Halaman Profil Pengguna: Sebuah halaman khusus untuk menampilkan data pengguna yang diambil langsung dari Cloud Firestore.
Fitur Lupa Password: Fungsionalitas untuk mengirim link reset password ke email pengguna terdaftar.
UI Modern dengan Jetpack Compose: Seluruh antarmuka dibangun menggunakan toolkit UI deklaratif terbaru dari Android.
Arsitektur MVVM: Pemisahan yang jelas antara UI (View), state dan logika (ViewModel), dan sumber data (Model/Firebase), memastikan kode yang bersih dan terstruktur.

Selain fungsionalitas dasar tersebut, saya juga melakukan beberapa pengembangan signifikan untuk meningkatkan pengalaman pengguna (UX) dan kualitas kode:

Validasi Input Real-time: Menambahkan sistem validasi pada form registrasi yang memberikan pesan error spesifik di bawah setiap kolom input (misalnya: "Invalid email format"), bukan hanya notifikasi umum.
Date Picker Interaktif: Menggantikan input teks standar untuk tanggal lahir dengan komponen DatePickerDialog yang lebih intuitif dan ramah pengguna.
Theming dan Branding Kustom: Mengimplementasikan skema warna kustom yang terinspirasi dari brand Starbucks dan menambahkan logo pada halaman login untuk memberikan identitas visual yang lebih kuat pada aplikasi.
Refaktor Arsitektur: Secara sadar melakukan refaktorisasi dari logika yang tercampur di UI menjadi arsitektur ViewModel yang bersih, sebuah praktik penting dalam pengembangan perangkat lunak profesional.

Berikut merupakan sedikit demo dari aplikasi "Starbucks Clone" yang telah saya buat:

Kode Program Modifikasi:

package com.starbucksapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.google.firebase.auth.FirebaseAuth
import com.starbucksapp.screens.HomeScreen
import com.starbucksapp.screens.LoginScreen
import com.starbucksapp.screens.ProfileScreen
import com.starbucksapp.screens.RegisterScreen
import com.starbucksapp.ui.theme.StarbucksAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            StarbucksAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    AppNavigation()
                }
            }
        }
    }
}

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    val auth = FirebaseAuth.getInstance()

    val startDestination = if (auth.currentUser != null) {
        "home"
    } else {
        "login"
    }

    Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
        NavHost(
            navController = navController,
            startDestination = startDestination,
            modifier = Modifier.padding(innerPadding)
        ) {
            composable("login") {
                LoginScreen(navController = navController)
            }
            composable("register") {
                RegisterScreen(navController = navController)
            }
            composable("home") {
                HomeScreen(navController = navController)
            }
            composable("profile") {
                ProfileScreen(navController = navController)
            }
        }
    }
}