Tugas 7

Penjelasan dan Dokumentasi: Login Page Sederhana dengan Android Compose

Yusuf Hasan Nazila

NRP: 5025211225

Penjelasan dan Dokumentasi: Login Page Sederhana dengan Android Compose

Fungsi Utama Potongan Kode

Program ini dibagi menjadi beberapa komponen (Composable) utama, masing-masing dengan tugas spesifik:

  • LoginScreen()

    Ini adalah fungsi Composable utama yang bertanggung jawab atas tata letak seluruh halaman. Ia mengelola logika untuk beralih antara tampilan login dan sign-up, serta menjalankan animasi putar 3D (flip card).

    • Variabel isSignUp: Mengontrol apakah pengguna sedang melihat formulir sign-up atau login.
    • Animasi animateFloatAsState: Menciptakan efek putaran 180 derajat yang mulus saat transisi antara kartu login dan sign-up. Animasi ini membuat pengalaman pengguna menjadi lebih dinamis dan modern.
    • Penggunaan graphicsLayer dengan rotationY dan cameraDistance: Ini adalah inti dari efek flip 3D. Properti ini memanipulasi bagaimana kartu terlihat di ruang 3D, memberikan ilusi putaran yang realistis.

  • LoginCard()

    Composable ini bertugas merender tampilan formulir login.

    • Bidang Input: Menyediakan kolom untuk memasukkan **email** dan **kata sandi**. Ada juga ikon mata yang memungkinkan pengguna menampilkan atau menyembunyikan kata sandi untuk kenyamanan dan keamanan.
    • Opsi Tambahan: Termasuk *checkbox* "Remember me" untuk menyimpan kredensial dan tautan "Forgot Password?" untuk alur pemulihan akun.
    • Tombol "Sign In": Ini adalah tempat di mana Anda akan mengimplementasikan logika autentikasi pengguna, seperti memverifikasi kredensial ke server backend.
    • Opsi Login Sosial: Bagian "OR" dengan tombol "Google" dan "Facebook" menyiratkan integrasi login pihak ketiga untuk kemudahan pengguna.
    • Tautan "Sign Up": Teks "Don't have an account? Sign Up" berfungsi sebagai pemicu (melalui onToggleMode()) untuk mengalihkan ke tampilan SignUpCard dengan animasi flip yang sudah dijelaskan.

  • SignUpCard()

    Composable ini bertanggung jawab untuk merender tampilan formulir registrasi (sign-up).

    • Bidang Input: Menyediakan kolom untuk **nama lengkap**, **email**, **kata sandi**, dan **konfirmasi kata sandi**. Sama seperti login, ada opsi untuk menampilkan/menyembunyikan kata sandi.
    • Persetujuan Syarat & Ketentuan: *Checkbox* "I agree to Terms & Conditions" adalah elemen standar yang memastikan pengguna menyetujui kebijakan aplikasi sebelum mendaftar.
    • Tombol "Create Account": Di sinilah Anda akan menambahkan logika untuk mendaftarkan pengguna baru ke sistem Anda.
    • Tautan "Sign In": Teks "Already have an account? Sign In" berfungsi sebagai pemicu untuk mengalihkan kembali ke tampilan LoginCard, kembali dengan animasi flip yang elegan.

Singkatnya, kode ini adalah contoh implementasi UI yang interaktif dan modern untuk alur autentikasi pengguna di aplikasi Android menggunakan Jetpack Compose, menonjolkan transisi antar formulir login dan sign-up dengan animasi yang mulus dan menarik.

Tampilan Aplikasi

Berikut adalah tangkapan layar dari halaman login dan sign-up:

Tampilan Halaman Sign-Up

Tampilan Halaman Login

Video Demo

Lihat demo halaman login ini beraksi dalam video berikut:

Repositori GitHub

Login-Page-Sederhana

Komentar

Posting Komentar

Postingan populer dari blog ini

ETS -- Do Everything - Aplikasi To-Do List

Gambar
Laporan Proyek – Do Everything ETS Do Everything – Aplikasi To-Do List Personal Nama NRP Yusuf Hasan Nazila 5025211225 Deskripsi Aplikasi Do Everything adalah aplikasi to-do list Android berbasis Jetpack Compose yang membantu pengguna dalam mencatat, mengatur, dan menyelesaikan tugas harian secara efisien. Fitur Aplikasi Menambahkan tugas dengan deadline Menandai tugas sebagai selesai Penyortiran berdasarkan deadline atau status Menggunakan UI modern berbasis Material Design 3 Desain Aplikasi Desain aplikasi dibuat sederhana dan intuitif, dengan gaya modern berbasis Material Design 3. Tampilan mencakup input tugas, daftar tugas aktif dan selesai, serta tombol tambah tugas. Tools yang Digunakan Android Studio ...
Baca selengkapnya

Tugas 6 - Kalkulator Konversi Uang

Gambar
Dokumentasi Aplikasi Konversi Mata Uang Nama NRP Hasan Nazila 5025201247 Aplikasi Konversi Mata Uang Aplikasi ini dibuat menggunakan Jetpack Compose untuk melakukan konversi antara berbagai mata uang secara real-time. Tampilan Aplikasi Fitur Utama Input jumlah uang Dropdown untuk memilih mata uang asal dan tujuan Konversi real-time berdasarkan nilai tukar tetap Tampilan hasil konversi secara langsung Langkah Pembuatan Buka Android Studio dan buat project baru dengan Jetpack Compose. Edit file MainActivity.kt dan tambahkan UI serta logic konversi. Buat fungsi getConversionRate() untuk menyediakan nilai tukar tetap antar mata uang. Gunakan TextField untuk input jumlah, OutlinedButton dan DropdownMenu untuk pilihan mata uang. Gunakan LaunchedEffect untuk menjalankan perhitungan otomatis saat nilai berubah. Penjelasan Kode Kotlin ...
Baca selengkapnya

TUGAS 4 - YUSUF HASAN NAZILA

Gambar
Modifikasi Aplikasi Sederhana dengan Menerapkan Button Component Modifikasi Aplikasi Sederhana dengan Menerapkan Button Component Nama NRP Yusuf Hasan Nazila 5025211225 Dice Roller adalah aplikasi sederhana untuk melempar dadu secara digital. Awalnya, Dice Roller hanya mengganti gambar dadu setiap kali tombol Roll ditekan. Untuk membuat aplikasi lebih menarik, kita akan memodifikasi proyek ini: dari hanya mengganti gambar menjadi ada animasi dadu yang melayang, berputar, dan jatuh. Tahapan Pembuatan Dice Roller 1. Membuat Dice Roller Sederhana Pada tahap awal, aplikasi Dice Roller hanya: Menampilkan gambar dadu menggunakan komponen Image. Menyediakan tombol menggunakan komponen Button untuk Roll. Saat tombol ditekan, gambar dadu langsung berubah secara instan. Kode Dasar: @Composable fun DiceWithButtonAndImage(modifier: Modifier = Modifier) { var result by remember { mutableSt...
Baca selengkapnya