Tugas Week 7 - PPB G - 5025221040

 

Tugas 7: Membuat Simple Login Page

Nama    : Genta Putra Prayoga

NRP      : 5025221040

Kelas     : G

Link Github: raymrichigat/ppb-g-tugas7

Membuat Login Screen Modern dengan Jetpack Compose di Android

Dalam era pengembangan aplikasi mobile yang semakin maju, antarmuka pengguna yang menarik dan fungsional menjadi kunci kesuksesan sebuah aplikasi. Salah satu komponen penting yang hampir selalu ada di setiap aplikasi adalah halaman login. Pada artikel ini, kita akan membahas implementasi login screen yang modern menggunakan Jetpack Compose untuk Android.

Mengapa Jetpack Compose?

Jetpack Compose adalah toolkit UI modern dari Google untuk membangun antarmuka pengguna Android secara native. Dengan menggunakan paradigma deklaratif, Compose membuat pengembangan UI menjadi lebih sederhana, intuitif, dan mudah dipelihara dibandingkan dengan sistem View tradisional.

Struktur Aplikasi

Aplikasi login ini terdiri dari dua file utama:

1. MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LoginScreen()
        }
    }
}

MainActivity berfungsi sebagai entry point aplikasi yang langsung menampilkan LoginScreen ketika aplikasi dibuka.

2. LoginScreen Composable

LoginScreen adalah komponen UI utama yang dibangun menggunakan Jetpack Compose dengan berbagai elemen interaktif.

Fitur-Fitur Login Screen

1. State Management

var email by remember { mutableStateOf(value = "") }
var password by remember { mutableStateOf(value = "") }

Aplikasi menggunakan remember dan mutableStateOf untuk mengelola state dari input email dan password. Ini memungkinkan UI untuk otomatis ter-update ketika pengguna mengetik.

2. Layout yang Responsif

Login screen menggunakan Column dengan pengaturan:

• fillMaxSize() - mengisi seluruh layar
• verticalArrangement = Arrangement.Center - memusatkan konten secara vertikal
• horizontalAlignment = Alignment.CenterHorizontally - memusatkan konten secara horizontal

3. Elemen Visual Menarik

Logo/Ilustrasi

Image(
    painter = painterResource(id = R.drawable.loginsvg), 
    contentDescription = "login image",
    modifier = Modifier.size(200.dp)
)

Menampilkan gambar login dengan ukuran 200dp sebagai elemen visual utama.

Typography

Text(
    text = "Welcome Back", 
    fontSize = 28.sp, 
    fontWeight = FontWeight.Bold
)

Judul "Welcome Back" dengan font besar dan tebal untuk memberikan kesan profesional.

4. Form Input

Input Email

OutlinedTextField(
    value = email, 
    onValueChange = { email = it }, 
    label = { Text(text = "Email Address") }
)

Input Password

OutlinedTextField(
    value = password, 
    onValueChange = { password = it }, 
    label = { Text(text = "Password") }, 
    visualTransformation = PasswordVisualTransformation()
)

Password field menggunakan PasswordVisualTransformation() untuk menyembunyikan karakter yang diketik.

5. Tombol dan Interaksi

Tombol Login

Button(onClick = {}) {
    Text(text = "Login")
}

Forgot Password

Text(
    text = "Forgot Password?", 
    modifier = Modifier.clickable { }
)

6. Social Media Login

Aplikasi menyediakan opsi login menggunakan platform media sosial:

• Facebook
• Twitter
• Google

Row(
    modifier = Modifier.fillMaxWidth().padding(40.dp),
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    // Social media icons with clickable modifiers
}

Kelebihan Implementasi Ini

1. User Experience yang Baik

• Layout yang bersih dan terorganisir
• Spacing yang konsisten menggunakan Spacer
• Elemen visual yang menarik

2. Modern UI Design

• Menggunakan Material3 design system
• OutlinedTextField untuk input yang modern
• Icon social media untuk kemudahan akses

3. Responsif dan Interaktif

• State management yang proper
• Clickable elements untuk interaksi user
• Password masking untuk keamanan

4. Mudah Dikustomisasi

• Struktur kode yang bersih
• Modular design dengan Composable functions
• Easy theming dengan Material3

Area untuk Pengembangan Lebih Lanjut

Meskipun implementasi ini sudah bagus sebagai foundation, beberapa enhancement yang bisa ditambahkan:

1. Validasi Input - Menambahkan validasi email dan password
2. Error Handling - Menampilkan pesan error
3. Loading State - Indikator loading saat proses login
4. Navigation - Navigasi ke halaman utama setelah login sukses
5. API Integration - Koneksi dengan backend untuk autentikasi
6. Accessibility - Menambahkan content description yang lebih lengkap

Kesimpulan

Login screen ini mendemonstrasikan kekuatan Jetpack Compose dalam membangun UI yang modern, responsif, dan user-friendly. Dengan menggunakan paradigma deklaratif, kode menjadi lebih mudah dibaca dan dipelihara.

Implementasi ini cocok sebagai starting point untuk aplikasi Android modern yang membutuhkan sistem autentikasi. Dengan sedikit modifikasi dan penambahan fitur, login screen ini bisa langsung digunakan dalam aplikasi production.

Jetpack Compose terus berkembang dan menjadi standar baru dalam pengembangan UI Android. Investasi waktu untuk mempelajari Compose akan sangat bermanfaat untuk pengembangan aplikasi Android di masa depan.