Pertemuan 7 - Login Screen

 Nama                : Ahmad Fadhilah Mappisara

NRP                  : 5025221195

Mata Kuliah      : Pemrograman Perangkat Bergerak (C)

Aplikasi Login Android dengan Jetpack Compose

Pada tugas ini, saya membuat sebuah aplikasi login sederhana berbasis Jetpack Compose. Aplikasi ini menampilkan form login modern lengkap dengan input email, password, serta dukungan social login dan logo dari internet.

---

Deskripsi Aplikasi

Aplikasi ini merupakan halaman login sederhana dengan beberapa fitur utama:

• Form input email dan password
• Tombol Login
• Teks interaktif “Forgot Password?”
• Ikon login sosial (Facebook, Google, Twitter)
• Logo yang diambil dari internet menggunakan Coil (AsyncImage)
  

---

Prasyarat

Sebelum mulai, pastikan sudah menyiapkan:

• Android Studio versi terbaru
• JDK 11
• Koneksi internet (untuk dependency dan load gambar)
• Android SDK (compileSdk 36, minSdk 24)

---

Membuat Project Baru

Langkah awal pembuatan project:

1. Buka Android Studio
2. Klik New Project
3. Pilih template Empty Activity (Compose)
4. Isi konfigurasi:
   • Name: Login
   • Package: com.example.login
   • Minimum SDK: 24
5. Klik Finish

---

Konfigurasi Dependency

Agar dapat menampilkan gambar dari internet, digunakan library Coil.

1. Tambahkan pada Version Catalog

Buka file gradle/libs.versions.toml, lalu tambahkan:

[versions]
coilCompose = "2.7.0"

[libraries]
coil-compose = { group = "io.coil-kt", name = "coil-compose", version.ref = "coilCompose" }

2. Tambahkan ke Module App

Buka app/build.gradle.kts, lalu tambahkan:

implementation(libs.coil.compose)

---

Menambahkan Izin Internet

Karena aplikasi mengambil gambar dari URL, diperlukan permission internet.

Buka file AndroidManifest.xml, lalu tambahkan:

<uses-permission android:name="android.permission.INTERNET" />

---

Implementasi UI Login

Seluruh UI dibuat dalam file:

MainActivity.kt

Struktur Utama

Pada onCreate(), panggil composable utama:

setContent {
    MaterialTheme {
        LoginScreen()
    }
}

---

Membuat LoginScreen()

Composable LoginScreen() berisi beberapa komponen utama:

• Column sebagai layout utama
• AsyncImage untuk logo
• Text untuk judul dan deskripsi
• OutlinedTextField untuk email
• OutlinedTextField untuk password
• Button untuk login
• Text clickable untuk “Forgot Password?”
• Row berisi ikon social login

---

Contoh Struktur UI

Berikut gambaran sederhana:

Column {
    AsyncImage(...) // Logo

    Text("Login")
    Text("Welcome back")

    OutlinedTextField(...) // Email
    OutlinedTextField(...) // Password

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

    Text("Forgot Password?")

    Row {
        AsyncImage(...) // Facebook
        AsyncImage(...) // Google
        AsyncImage(...) // Twitter
    }
}

---

Menambahkan Preview

Untuk melihat tampilan tanpa menjalankan aplikasi:

@Preview(showBackground = true)
@Composable
fun LoginScreenPreview() {
    MaterialTheme {
        LoginScreen()
    }
}

---

Menjalankan Aplikasi

Menggunakan Android Studio

1. Klik Sync Project with Gradle Files
2. Pilih emulator atau device
3. Klik Run

Menggunakan Terminal

.\gradlew.bat :app:assembleDebug

---

Troubleshooting

1. Error “Unresolved reference: AsyncImage”

Solusi:

• Pastikan dependency Coil sudah ditambahkan
• Lakukan sync ulang Gradle

---

2. Gambar Tidak Tampil

Solusi:

• Pastikan permission INTERNET sudah ditambahkan
• Cek koneksi internet
• Pastikan URL gambar valid

---

3. Build Gagal Setelah Tambah Dependency

Solusi:

• Lakukan Clean Project
• Kemudian Rebuild Project
• Pastikan tidak ada konflik versi dependency