Tugas 7 PPB G 2025 - Farhan Dwi Putra 5025211093

Nama : Farhan Dwi Putra

NRP : 5025211093

Kelas : Pemrograman Perangkat Bergerak (G)


Tugas Pertemuan 7


Laporan Tugas – Login Page Sederhana dengan Jetpack Compose

Deskripsi Tugas

Pada tugas kali ini, saya diminta membuat halaman login sederhana untuk aplikasi Android menggunakan Jetpack Compose. Tujuan dari tugas ini adalah untuk memahami cara menyusun tampilan form login, mengatur input pengguna, serta menambahkan logika navigasi antar layar login dan registrasi (sign up).

Struktur Umum Program

Program ini dibangun menggunakan pendekatan Composable Function, yang artinya setiap bagian UI dibuat dalam bentuk fungsi terpisah untuk mempermudah pengelolaan dan pembacaan kode.

Terdapat tiga bagian utama dalam program ini:

1. LoginScreen()

Fungsi ini merupakan tampilan utama dari halaman login dan sign-up. Di sinilah seluruh elemen UI seperti tombol, formulir, dan animasi transisi ditampilkan.

  • State isSignUp: Digunakan untuk menentukan apakah saat ini pengguna sedang berada di mode login atau sign-up.

  • Animasi Flip: Menggunakan animateFloatAsState untuk menghasilkan efek rotasi 180 derajat saat berpindah antar mode. Animasi ini memberikan pengalaman visual yang lebih halus dan menarik.

  • graphicsLayer + cameraDistance: Digunakan untuk menciptakan efek 3D flip, di mana layar login tampak seperti membalik ke tampilan sign-up, dan sebaliknya.

2. LoginCard()

Bagian ini adalah tampilan untuk form login.

  • Input Email & Password: Terdapat dua kolom isian untuk email dan kata sandi. Ada pula ikon mata untuk menyembunyikan atau menampilkan karakter pada kolom kata sandi.

  • Fitur Tambahan:

    • Remember Me: Checkbox untuk menyimpan informasi login.

    • Lupa Password: Tautan untuk masuk ke proses pemulihan akun.

  • Tombol Login: Ketika ditekan, akan menjalankan logika validasi dan autentikasi.

  • Login dengan Sosial Media: Terdapat opsi login menggunakan akun Google atau Facebook.

  • Tautan Registrasi: Kalimat “Belum punya akun? Daftar” berfungsi untuk berpindah ke tampilan sign-up menggunakan animasi flip.

3. SignUpCard()

Fungsi ini bertugas untuk menampilkan halaman registrasi pengguna baru.

  • Form Registrasi: Pengguna diminta mengisi nama lengkap, email, kata sandi, dan konfirmasi kata sandi.

  • Persetujuan Syarat & Ketentuan: Checkbox untuk menyatakan bahwa pengguna menyetujui kebijakan layanan sebelum membuat akun.

  • Tombol Daftar (Create Account): Di sinilah nantinya logika untuk menyimpan data pengguna baru bisa diimplementasikan.

  • Tautan Kembali ke Login: Kalimat “Sudah punya akun? Masuk” mengembalikan tampilan ke form login.

Alur Jalannya Aplikasi

  1. Saat aplikasi dijalankan, akan muncul tampilan LoginScreen.

  2. Pengguna dapat memilih untuk login atau berpindah ke halaman daftar.

  3. Saat menekan tombol login atau daftar, akan dijalankan validasi data input.

  4. Jika semua data valid, maka akan diarahkan ke halaman selanjutnya (misalnya DashboardScreen).

Hasil


Source Code : Github


Comments

Post a Comment

Popular posts from this blog

EAS PPB G 2025 - Kelompok Doa Ibu

Image
Kelompok Doa Ibu Anggota : Arfi Raushani Fikra (5025211084) Farhan Dwi Putra (5025211093) Rafi Aliefian Putra Ramadhani ( 5025211234) Kelas : Pemrograman Perangkat Bergerak (G) Evaluasi Akhir Semester Nama Aplikasi EFPE: Aplikasi M-Banking Simpel dan Praktis.   Deskripsi Aplikasi              EFPE  adalah aplikasi mobile banking ( m-banking ) yang dikembangkan menggunakan Android Studio dan ditujukan untuk membantu pengguna mengelola keuangan secara digital dengan cara yang praktis dan efisien. Aplikasi ini cocok digunakan oleh siapa saja yang ingin melakukan transaksi keuangan langsung dari smartphone, tanpa harus repot datang ke bank atau ATM. Dengan tampilan UI yang sederhana dan mudah dipahami, EFPE dirancang agar nyaman digunakan oleh pengguna dari berbagai kalangan, termasuk mereka yang baru pertama kali menggunakan aplikasi keuangan digital.   Tujuan Pengembangan Aplikasi EFPE  dikembangkan sebagai so...
Read more

EAS PPB G 2025 - Farhan Dwi Putra 5025211093

Image
Kelompok Doa Ibu Anggota : Arfi Raushani Fikra (5025211084) Farhan Dwi Putra (5025211093) Rafi Aliefian Putra Ramadhani ( 5025211234) Kelas : Pemrograman Perangkat Bergerak (G) Evaluasi Akhir Semester Nama Aplikasi EFPE: Aplikasi M-Banking Simpel dan Praktis.   Deskripsi Aplikasi             EFPE adalah aplikasi mobile banking ( m-banking ) yang dikembangkan menggunakan Android Studio dan ditujukan untuk membantu pengguna mengelola keuangan secara digital dengan cara yang praktis dan efisien. Aplikasi ini cocok digunakan oleh siapa saja yang ingin melakukan transaksi keuangan langsung dari smartphone, tanpa harus repot datang ke bank atau ATM. Dengan tampilan UI yang sederhana dan mudah dipahami, EFPE dirancang agar nyaman digunakan oleh pengguna dari berbagai kalangan, termasuk mereka yang baru pertama kali menggunakan aplikasi keuangan digital.   Tujuan Pengembangan Aplikasi EFPE dikembangkan sebagai solus...
Read more

Tugas 11 PPB G 2025 - Farhan Dwi Putra 5025211093

Image
Nama : Farhan Dwi Putra NRP : 5025211093 Kelas : Pemrograman Perangkat Bergerak (G) Tugas Pertemuan 11 Redesain Aplikasi Starbucks Deskripsi Singkat Aplikasi ini merupakan hasil pengembangan ulang dari aplikasi Starbucks yang dibangun untuk platform Android. Proyek ini menggunakan Kotlin dan Jetpack Compose, serta mengintegrasikan layanan dari Firebase Authentication dan Cloud Firestore. Fokus utama aplikasi ini adalah pada proses autentikasi berbasis OTP (One-Time Password) dan penyimpanan data profil pengguna secara real-time. Tujuan Aplikasi Tujuan utama dari pengembangan aplikasi ini adalah untuk memberikan pengalaman login dan registrasi yang lebih aman serta nyaman bagi pengguna, menggunakan Firebase Phone Authentication. Selain itu, aplikasi ini juga menampilkan informasi profil pengguna yang telah tersimpan di Firebase Firestore. Komponen Aplikasi 1. MainActivity.kt Merupakan entry point dari aplikasi. Di dalamnya dilakukan inisialisasi Firebase dan pemanggilan AppNav...
Read more