Tugas 7 : Membuat Login Screen di Android Studio
Membuat Login Screen Page App
Nama: Rafi Aliefian Putra Ramadhani
NRP: 5025211234
Kelas: Pemrograman Perangkat Bergerak (G)
Pendahuluan
Aplikasi ini merupakan antarmuka login yang dirancang menggunakan Jetpack Compose untuk platform Android. Tujuan dari aplikasi ini adalah untuk memberikan pengalaman login yang sederhana, cepat, dan responsif bagi pengguna. Aplikasi ini juga dilengkapi dengan fitur untuk menyimpan kredensial pengguna dan dialog pemberitahuan saat login berhasil.
Fungsi dan Alur Login
Alur login dimulai dengan pengguna memasukkan email dan kata sandi mereka. Pengguna juga dapat memilih opsi untuk "Remember Me", yang menyimpan status login mereka untuk sesi berikutnya. Setelah itu, aplikasi melakukan verifikasi input dan menampilkan dialog keberhasilan login jika kredensial yang dimasukkan valid. Proses login melibatkan dua langkah utama:
- Input Pengguna: Pengguna diminta untuk memasukkan alamat email dan kata sandi.
- Verifikasi: Setelah tombol login ditekan, aplikasi memeriksa kredensial dan menampilkan dialog yang memberi tahu pengguna bahwa login berhasil.
Berikut adalah preview aplikasi Halaman Login Screen sebelum dijalankan di emulator:
Bagian-Bagian Kode
Berikut adalah penjelasan dari beberapa bagian kode yang ada pada aplikasi login ini:
1. Kolom Input Email dan Kata Sandi
Pada layar login, terdapat dua kolom input utama, yaitu untuk email dan kata sandi. Kedua kolom ini menggunakan komponen OutlinedTextField dari Jetpack Compose yang dilengkapi dengan ikon pada bagian kiri dan kanan kolom untuk memberikan pengalaman pengguna yang lebih intuitif.
2. Visibilitas Kata Sandi
Untuk kata sandi, terdapat fitur untuk menampilkan atau menyembunyikan kata sandi yang dimasukkan oleh pengguna. Ini diimplementasikan dengan menggunakan tombol trailingIcon yang memungkinkan pengguna untuk mengklik dan mengubah tampilan kata sandi antara tersembunyi atau terlihat.
3. Pilihan "Ingat Saya"
Aplikasi ini menyediakan pilihan untuk "Remember Me", yang menggunakan komponen Checkbox. Ketika opsi ini dipilih, statusnya disimpan dalam variabel rememberMe, yang bisa digunakan untuk mengingat preferensi pengguna pada sesi login berikutnya.
4. Dialog Keberhasilan Login
Setelah pengguna berhasil login, sebuah dialog berhasil akan ditampilkan. Dialog ini menggunakan komponen Dialog dari Jetpack Compose dan memberikan pesan konfirmasi kepada pengguna bahwa login mereka berhasil. Dialog ini juga dilengkapi dengan tombol untuk menutupnya.
5. Integrasi Sosial Login
Di bawah form login, terdapat opsi untuk login menggunakan media sosial seperti Google, Facebook, dan Twitter. Ini disertakan dengan menggunakan Image yang dapat diklik untuk memilih metode login yang diinginkan.
6. Desain Tampilan Responsif
Desain dari aplikasi ini sepenuhnya responsif. Semua elemen, seperti kolom input dan tombol, dapat menyesuaikan ukurannya dengan lebar layar perangkat. Pengguna juga diberikan pengalaman yang menyenangkan melalui penggunaan padding, margin, dan spacing yang konsisten.
Tampilan Aplikasi
Untuk melihat hasil aplikasi, berikut tampilan Login Screen yang dijalankan di emulator Android Studio:
Berikut adalah langkah-langkah yang dapat Anda ikuti:
- Buka emulator Android Studio dan jalankan aplikasi
- Masukkan email dan kata sandi yang valid, lalu klik tombol login
- Pilih opsi "Remember Me" jika Anda ingin menyimpan sesi login
Berikut link repository GitHub dari aplikasi Halaman Login Screen:
Kesimpulan
Aplikasi login ini memberikan pengalaman pengguna yang modern dan mudah digunakan. Dengan penggunaan Jetpack Compose, aplikasi ini memungkinkan pembuatan UI yang lebih deklaratif dan efisien. Fitur-fitur seperti visibilitas kata sandi, opsi "Remember Me", dan dialog konfirmasi memberikan kenyamanan dan interaksi yang lebih baik untuk pengguna.
Comments
Post a Comment