Tugas 5 PPB

 

TUGAS 5 PPB

SIMPLE LOGIN PAGE

Nama: Muhammad Lintang Panjerino

NRP: 5025201045

Kelas: PPB I

Tahun: 2024

Link Github: Tugas 5 - Simple Login Page

Pada Tugas 5 PPB kali ini, diberikan tugas untuk membuat proyek berupa halaman login sederhana dengan menggunakan Jetpack Compose pada Android Studio. Halaman login sederhana yang dibuat hanya berfokus pada tampilan pengguna, tidak mencakup tentang database dan backend. Proyek ini bertujuan untuk mempelajari lebih dalam tentang konsep Composable, Image, Text, Text Field, Button, Text Button, Row, dan Column pada Jetpack Compose. Selain itu, proyek ini juga mencakup implementasi tentang materi Modifier, Alignment, Arrangement, Spacer, remember, Style Text, dan clickable.

Untuk memulai pengerjaan proyek, langkah awal yang dilakukan adalah membuat proyek baru. Pada Android Studio, pilih "New Project" > pilih "Phone and Tablet" > pilih "Empty Activity" > pilih "Next". Kemudian pada window Empty Activity isi nama aplikasi yang akan dibuat, contohnya pada proyek ini judul aplikasi adalah "Simple Login Page" dengan Minimum SDK berupa API 24 (Nougat).

Pada file MainActivity.kt, hapus fungsi Greeting dan pemanggilan fungsi Greeting sehingga hanya menyisakan fungsi onCreate dengan lambda setContent yang kosong. Setelah itu, buat file Kotlin di dalam folder yang sama dengan file MainActivity.kt dengan cara klik kanan pada folder > pilih "New" > pilih "Kotlin Class File" > isi nama file dengan "LoginScreen.kt". Di dalam file LoginScreen.kt buat fungsi baru bernama LoginScreen yang diberi anotasi Composable. Kemudian kembali pada file MainActivity.kt, panggil fungsi tersebut di dalam lambda setContent.

Langkah selanjutnya adalah memasukkan semua asset yang diperlukan untuk halaman login ke dalam folder res > drawable. Adapun file gambar yang akan digunakan merupakan file gambar dengan format PNG yang meliputi 1 file untuk gambar utama halaman login dan 3 file untuk sign in dengan cara lain antara lain logo Microsoft, logo Google, dan logo Github.

Secara keseluruhan, halaman login terbagi menjadi 4 bagian, yaitu gambar latar belakang login dan text judul, text field untuk email dan password, button login dan text lupa kata sandi, dan login dengan cara lain seperti menggunakan akun Microsoft, Google, atau Github. Semua bagian ini terbungkus pada satu kolom dengan menggunakan fungsi Column.

• Pada bagian pertama, memanggil fungsi composable Image dengan ukuran 200 dp dan menggunakan gambar dengan nama login_image.png dari folder drawable. Text "Welcome Back" dibuat dengan ukuran 20 sp dengan style bold dan terdapat spasi sebelum text "Login to your account" dengan memanggil fungsi Spacer dengan ukuran 4 dp.
• Pada bagian kedua, membuat text field dengan memanggil fungsi OutlinedTextField dengan value sementara string kosong dan label berupa "Email" untuk text field email dan "Password" untuk text field password.
• Pada bagian ketiga, membuat tombol dengan memanggil fungsi Button dengan text "Login" dan fungsi onClick untuk sementara masih kosong. Text lupa kata sandi dibuat dengan memanggil fungsi Text dengan isi "Forgot password?" yang diberi tambahan modifier clickable supaya teks tersebut dapat diklik.
• Pada bagian keempat, terdapat tiga logo akun yang dapat digunakan untuk login dengan cara lain. Ketiga logo akun tersebut dibungkus menjadi satu menggunakan fungsi Row dengan padding 40 dp, fungsi fillMaxWidth supaya memenuhi lebar kontainer, dan arrangement horizontal dengan nilai Arrangement.SpaceEvenly supaya ketiga logo memiliki jarak yang sesuai. Di setiap logo memanggil fungsi Image dengan ukuran 50 dp dan juga diberi tambahan modifier clickable supaya gambar logo tersebut dapat diklik.

Bagian 1

Bagian 2

Bagian 3

Bagian 4

Halaman login sederhana terlihat sudah jadi, namun pengguna masih belum bisa untuk mengetik pada text field email maupun password. Oleh karena itu, diperlukan beberapa hal yaitu membuat variabel email dan password di sebelum fungsi Column. Kedua variabel tersebut masing-masing menggunakan by remember yang berisi mutableStateOf dengan value string kosong. Kemudian pada text field email, nilai value yang sebelumnya kosong diisi oleh variabel email dan nilai onValueChange diisi dengan nilai composable email = it. Sedangkan pada text field password, nilai value yang sebelumnya kosong diisi oleh variabel password dan nilai onValueChange diisi dengan nilai composable password = it. Selain itu, untuk memastikan bahwa text field email dan password dapat berfungsi dengan baik ketika tombol "Login" diklik, salah satu cara yang dapat dilakukan adalah dengan memasukkan variabel email dan password ke dalam log supaya tercatat. Pada fungsi Button "Login", nilai onClick yang sebelumnya kosong diisi dengan fungsi Log.i untuk menyimpan nilai variabel email dan password ke dalam log. Fungsi Log.i mempunyai 2 argumen, yaitu tag dan msg yang secara berurutan diisi dengan nilai "Credential" dan "Email: $email; Password: $password".

Berikut adalah tampilan hasil akhir dari aplikasi halaman login sederhana.

Berikut adalah video demo yang menunjukkan aplikasi halaman login sederhana termasuk proses menyimpan Credential (email dan password) ke dalam Logcat ketika tombol "Login" diklik.

Berikut adalah potongan kode sumber file MainActivity.kt dan LoginScreen.kt