Tugas 11 (Membuat Aplikasi Autentikasi)

Aplikasi Autentikasi

    Pada kesempatan kali ini, diberikan tugas untuk mencoba aplikasi starbuck dan membuat dengan versi sendiri. Berikut akan saya lampirkan hasil pengerjaannya

Readable Source Code

  • Main Activity

    • Komponen utama Android (ComponentActivity) yang memanggil fungsi OTPApp() untuk memulai UI dengan tema OtpTheme.

    • enableEdgeToEdge() membuat tampilan UI menyatu dengan layar penuh.

  • Fungsi OTPApp()

    • Ini adalah inti logika aplikasi. Terdapat beberapa state dan kontrol navigasi antar layar:

      • currentScreen: Mengatur tampilan layar yang aktif saat ini (Login, Register, OTPVerification, PersonalData, Welcome).

      • registerData: Menyimpan data dari layar Register.

      • personalData: Menyimpan data pribadi user setelah registrasi.

      • user: Menyimpan semua informasi user secara keseluruhan.

      • currentOTP: Menyimpan OTP yang digenerate untuk verifikasi.

      • isFromLogin: Flag untuk membedakan apakah pengguna berasal dari login atau registrasi.

    • Fungsi Utility

      • generateOTP(): Membuat angka 6 digit random sebagai OTP.

      • showToast(message): Menampilkan pesan toast di layar.

      • showSnackbar(message): Menampilkan snackbar.

      • showOTPForDemo(otp, phoneNumber): Debug OTP - menampilkan OTP ke Toast & Snackbar untuk keperluan demo

  • Navigasi Antar Layar
    •   AppScreen.Login

      • Menampilkan layar login.

      • Jika email cocok dengan user yang sudah terdaftar → berhasil login dan pindah ke WelcomeScreen.

      • Jika gagal → muncul toast error.

      • Tombol “Daftar” → pindah ke RegisterScreen.

      AppScreen.Register

      • Menampilkan form registrasi awal (email, password, nomor telepon).

      • Setelah submit:

        • Simpan datanya.

        • Generate OTP.

        • Pindah ke OTPVerificationScreen.

      AppScreen.OTPVerification

      • Menampilkan input OTP.

      • Jika OTP cocok → lanjut ke PersonalDataScreen.

      • Jika gagal → bisa resend OTP (generate ulang).

      • Tombol kembali → kembali ke register.

      AppScreen.PersonalData

      • Form data diri tambahan: nama, tanggal lahir, dsb.

      • Setelah diisi:

        • Simpan ke user.

        • Tandai user sudah register dan verifikasi.

        • Pindah ke WelcomeScreen.

      AppScreen.Welcome

      • Layar selamat datang dengan ucapan personal.

      • Jika berasal dari login → beri pesan selamat datang.

      • Jika berasal dari register → arahkan untuk login ulang.

Tampilan Output






Source Code : Tugas 11 Starbuck

Video Presentasi






Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 8 (Aplikasi Woof)

Gambar
 Aplikasi Woolf      Pada pertemuan kai ini, perkuliahan dilakukan secara online dan diberikan penugasan untuk membuat sebuah aplikasi woolf. Tugas ini merupakan tugas ke-8 yang diberikan selama perkuliahan berlangsung. Readable Source Code class MainActivity : ComponentActivity() { override fun onCreate (savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContent { WoofTheme { // A surface container using the 'background' color from the theme Surface ( modifier = Modifier. fillMaxSize () ) { WoofApp () } } } } } Sebagai entry point aplikasi Android: onCreate() dipanggil saat aplikasi pertama kali dibuat setContent { ... } mengatur UI menggunakan Compose WoofTheme { Surface { WoofApp() } } : Menetapkan tema dan permukaan latar belakang, lalu memanggil UI utama WoofApp() @Composable...
Baca selengkapnya

EAS Pemograman Perangkat Bergerak

Gambar
NdangFit - EAS Kelompok 14 EAS Kelompok 14: Muhammad Zien Zidan   5025211122 Ariella Firdaus Imata   5025211138 Jawahirul Wildan   5025211150 Deskripsi Aplikasi Dalam penugasan EAS kali ini, kami memutuskan untuk membuat sebuah aplikasi Sport dengan nama "NdangFit" . “NdangFit” adalah aplikasi pengelola yang dirancang untuk membantu pengguna dalam melakukan kegiatan berolahraga, khususnya olahraga di rumah. Dengan fitur-fitur yang mudah digunakan, pengguna dapat menjaga kebugaran tubuh tanpa harus pergi ke pusat kebugaran. Fitur - Fitur Sign Up & Login Target Pribadi Track Aktivitas Progress Foto Beranda UI Intuitif & Responsive Notifikasi Pengingat Profile Tampilan Awal Infografis Aplikasi Infografis NdangFit oleh Kelompok 14 Tampilan UI ...
Baca selengkapnya

Tugas 7 (Halaman Login)

Gambar
 Halaman Login Pada pertemuan ke-7 dilakukan secara asynchronus dan diberikan tugas untuk membuat sebuah halaman login, pada kesempatan ini, saya mencoba membuat halaman login seperti tugas yang diberikan lalu saya lakukan modifikasi agar lebih relevan dan lebih menarik Tampilan Halaman Login Tampilan Halaman Setelah Modifikasi Modifikasi yang saya lakukan sebagai berikut : Mengubah warna background agar lebih menarik Menambahkan kotak pada page pengisian login user agar lebih relevan Menambahkan logo email dan password agar lebih menarik Readable Source Code @Composable fun LoginScreen () { var email by remember { mutableStateOf ( "" ) } var password by remember { mutableStateOf ( "" ) } Box ( modifier = Modifier . fillMaxSize () . background ( brush = Brush.verticalGradient( colors = listOf ( Color ( 0xFF6A11CB ), Color ( 0xFF2575FC )) ) ) . padd...
Baca selengkapnya