Tugas Pertemuan 7 PPB - Membuat aplikasi login page sederhana

-
Nama Akmal Sulthon Fathulloh
NRP 5025211047
Kelas PPB - D

Pada pertemuan kali ini, kita diminta untuk membuat sebuah aplikasi login page sederhana. Berikut adalah dokumentasi dan hasil pekerjaan yang telah dibuat.

Fungsi LoginScreen()

Bagian utama LoginScreen() ini merupakan fungsi Composable yang bertugas merender tampilan antarmuka halaman login dalam arsitektur Jetpack Compose. Fungsi ini menyusun berbagai elemen UI seperti logo, teks, input email dan password, serta tombol login dalam satu kolom (Column), sehingga semua komponen tertata secara vertikal dan berada di tengah layar. Tata letaknya diatur menggunakan properti seperti padding, fillMaxSize, dan Alignment.CenterHorizontally. Pada awal fungsi, terdapat dua state: email dan password. Keduanya dideklarasikan dengan remember { mutableStateOf("") }, yang artinya Compose akan mengingat nilainya selama recomposition berlangsung. Ini memungkinkan field input bisa memperbarui tampilannya secara otomatis saat user mengetik. Selanjutnya, terdapat beberapa elemen penting:

  • Image digunakan untuk menampilkan logo aplikasi.
  • Text menampilkan tagline aplikasi.
  • OutlinedTextField digunakan dua kali, masing-masing untuk input email dan password. Khusus field password, digunakan PasswordVisualTransformation() untuk menyembunyikan karakter input.
  • TextButton dengan label "Forgot password?" berada di sisi kanan sebagai opsi bantuan jika pengguna lupa sandi.
  • Button utama bertuliskan "Continue" adalah titik masuk utama pengguna untuk melakukan login, meskipun saat ini aksinya masih kosong (TODO).
  • Setelah itu, terdapat pemisah teks "or continue with" dan dua IconButton untuk login menggunakan akun Google dan Facebook, masing-masing menampilkan logo mereka.
  • Di bagian paling bawah, terdapat teks persetujuan terhadap Terms of Service dan Privacy Policy, sebagai informasi hukum dan kebijakan aplikasi.
Secara keseluruhan, fungsi ini menyusun tampilan login dengan pendekatan deklaratif dan modern khas Compose, dengan pengelolaan state yang efisien dan styling yang konsisten menggunakan MaterialTheme.

Berikut adalah hasil running aplikasi pada Android Virtual Device.

Video Presentasi

Berikut adalah video presentasi demonstrasi aplikasi yang telah saya buat.

Kode Sumber

Kode sumber dapat dilihat pada repositori GitHub berikut.

Referensi

https://kuliahppb.blogspot.com/2024/03/studi-kasus-membuat-halaman-login.html

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas Pertemuan 2 PPB - Membuat aplikasi sederhana dengan Jetpack Compose

-
Gambar
Nama Akmal Sulthon Fathulloh NRP 5025211047 Kelas PPB - D Pada pertemuan kali ini, kita diminta untuk belajar menggunakan Jetpack Compose dan membuat aplikasi pertama sederhana yang mencetak tulisan "Hello World". Dalam mengerjakan ini, saya mengikuti dokumentasi resmi mengenai Dasar-Dasar Jetpack Compose . Berikut adalah dokumentasi dan hasil aplikasi yang telah dibuat. Memulai Project Compose Baru Untuk memulai project Compose baru, buka Android Studio. Jika baru memulai di jendela Welcome to Android Studio , klik Start a new Android Studio project . Jika sudah membuka project Android Studio, pilih File > New > New Project dari panel menu. Untuk project baru, pilih Empty Activity dari template yang tersedia. Saat memilih template Empty Activity , kode berikut akan dibuat secara otomatis dalam project: Project sudah dikonfigurasi untuk menggunakan Com...
Read more »

Tugas Pertemuan 4 PPB - Membuat aplikasi Dice Roller interaktif

-
Gambar
Nama Akmal Sulthon Fathulloh NRP 5025211047 Kelas PPB - D Pada pertemuan kali ini, kita diminta untuk membuat aplikasi Dice Roller interaktif menggunakan Jetpack Compose. Dalam mengerjakan ini, saya mengacu pada dokumentasi Codelabs Membuat aplikasi Dice Roller interaktif . Berikut adalah dokumentasi dan hasil pekerjaan yang telah dibuat. Restrukturisasi sample code Kita perlu mengubah beberapa sintaks dari sample code untuk membuat tampilan gambar dadu dan tombol untuk melemparnya. Kita akan menyusun fungsi composable untuk mencerminkan arsitektur ini. Hapus fungsi GreetingPreview() dan buat fungsi DiceWithButtonAndImage() dengan anotasi @Composable . Fungsi composable ini mewakili komponen UI tata letak dan juga menampung logika klik tombol dan tampilan gambar. Kemudian, hapus fungsi Greeting(name: String, modifier: Modifier = Modifier) , dan buat fungsi DiceRollerApp() denga...
Read more »

Tugas Pertemuan 3 PPB - Membangun aplikasi sederhana dengan Composable Teks

-
Gambar
Nama Akmal Sulthon Fathulloh NRP 5025211047 Kelas PPB - D Pada pertemuan kali ini, kita diminta untuk belajar menggunakan Jetpack Compose untuk membangun aplikasi Android sederhana yang menampilkan pesan ulang tahun di layar. Dalam mengerjakan ini, saya mengacu pada dokumentasi resmi mengenai Membangun aplikasi sederhana dengan composable teks . Berikut adalah dokumentasi dan hasil aplikasi yang telah dibuat. Menyiapkan aplikasi Happy Birthday Setelah mengikuti langkah-langkah dari dokumentasi codelab, kita akan mendapatkan aplikasi yang menampilkan pesan ulang tahun sederhana. Berikut adalah hasil aplikasi yang telah dibuat. Berikut adalah hasil running aplikasi pada Android Virtual Device. Modifikasi Saya melakukan beberapa modifikasi dan penyesuaian pada kode sebelumnya. Berikut adalah perubahan yang saya lakukan. Menambahkan beberapa komponen baru sep...
Read more »