PPB Pertemuan 12 - Aplikasi Login

Penerapan Room Database dan Jetpack Compose pada Aplikasi "AplikasiLogin" dengan Pola MVVM

Muhammad Risyad Himawan Putra - 5025231205

 

AplikasiLogin adalah aplikasi autentikasi berbasis Android yang mengimplementasikan penyimpanan lokal secara aman menggunakan Room Database dan antarmuka pengguna modern deklaratif berbasis Jetpack Compose. Proyek ini dirancang menggunakan arsitektur bersih MVVM (Model-View-ViewModel) dengan pola Repository, memastikan pemisahan logika bisnis dari komponen antarmuka untuk menghasilkan kode yang modular, efisien, dan mudah dipelihara.

Akses Project:
Source Code: https://github.com/MRHP1/Mobile-Programming/tree/main/AplikasiLogin

 

1. Deskripsi & Fitur Utama Arsitektur Aplikasi

Aplikasi ini dirancang dengan komponen Android modern untuk memastikan performa maksimal dan UI yang responsif. Fitur dan implementasi utamanya meliputi:

• Room Database & SQLite: Menyimpan kredensial pengguna secara lokal. Room menyediakan lapisan abstraksi di atas SQLite untuk memungkinkan akses database yang lebih lancar dan aman menggunakan objek Kotlin.
• Kotlin Coroutines: Menjalankan operasi database (baca dan tulis) secara asinkron di background thread agar aplikasi tetap responsif tanpa memblokir UI thread utama (Main Thread).
• Pola MVVM (Model-View-ViewModel): Memisahkan UI reaktif (View/Compose) dari data entity (Model) dengan menggunakan ViewModel sebagai jembatan pemrosesan state dan validasi autentikasi.

---

2. Titik Masuk (Entry Point) & Inisialisasi Database

class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val database = AppDatabase.getDatabase(this) val repository = UserRepository(database.userDao()) val factory = LoginViewModelFactory(repository) setContent { val viewModel: LoginViewModel = viewModel(factory = factory) androidx.compose.runtime.LaunchedEffect(Unit) { viewModel.insertDummyUser() } LoginScreen(viewModel) } } }

Penjelasan: MainActivity bertindak sebagai pintu masuk utama aplikasi. Pada siklus hidup onCreate, database Room diinisialisasi melalui Singleton AppDatabase, lalu dioper ke UserRepository dan LoginViewModel. Kita juga menggunakan LaunchedEffect(Unit) untuk otomatis menyisipkan satu data pengguna default (akun admin dummy) ke dalam database saat pertama kali aplikasi dibuka agar pengujian login dapat dilakukan secara langsung.

---

3. Entitas Data Pengguna (User Entity)

@Entity(tableName = "users") data class User( @PrimaryKey(autoGenerate = true) val id: Int = 0, val username: String, val password: String )

Penjelasan: Objek User dideklarasikan dengan anotasi Room @Entity untuk mendefinisikan struktur tabel bernama users di database SQLite lokal. Atribut id dikonfigurasi sebagai PrimaryKey dengan opsi autoGenerate = true, sementara username dan password disimpan sebagai kolom teks sederhana.

---

4. Data Access Object (DAO Interface)

@Dao interface UserDao { @Insert suspend fun insert(user: User) @Query("SELECT * FROM users WHERE username = :username AND password = :password") suspend fun login( username: String, password: String ): User? }

Penjelasan: Interface UserDao memetakan operasi SQL ke dalam fungsi Kotlin. Fungsi insert ditandai dengan @Insert untuk menyimpan record pengguna baru. Fungsi login beranotasi @Query menjalankan pencarian baris pengguna yang memiliki kecocokan username dan password. Keduanya dideklarasikan sebagai suspend fun agar aman dijalankan di dalam Coroutine.

---

5. Logika Autentikasi & State Management (LoginViewModel)

class LoginViewModel( private val repository: UserRepository ) : ViewModel() { var loginState by mutableStateOf("") private set fun login(username: String, password: String) { viewModelScope.launch { val user = repository.login(username, password) loginState = if (user != null) { "Login Berhasil" } else { "Username atau Password Salah" } } } }

Penjelasan: LoginViewModel mengontrol logika validasi login secara terpisah dari UI. Menggunakan mutableStateOf untuk mendeteksi perubahan state pesan hasil login (loginState). Saat fungsi login dipicu oleh UI, coroutine diluncurkan dalam lingkup viewModelScope untuk menanyakan database via UserRepository secara asinkron. UI Compose yang mengamati loginState akan segera merender teks hasil autentikasi secara dinamis dan real-time.

---

6. Pembuatan UI Reaktif (LoginScreen dengan Jetpack Compose)

Antarmuka dibuat sepenuhnya menggunakan framework modern Jetpack Compose pada file LoginScreen.kt:

• Deklarasi State Lokal: Menggunakan remember { mutableStateOf("") } untuk menyimpan input teks dinamis pada kolom Username dan Password secara lokal di dalam screen.
• Outlined Text Field: Memanfaatkan komponen TextField Compose yang interaktif untuk menangkap ketikan pengguna lengkap dengan label teks di atasnya.
• Login Action: Menyediakan komponen Button yang ketika diklik akan secara instan memicu pemanggilan fungsi viewModel.login(username, password).
• Reaktivitas Penuh: Bagian paling bawah memuat komponen Text(viewModel.loginState) yang secara otomatis menampilkan pesan "Login Berhasil" atau "Username atau Password Salah" berdasarkan respon reaktif database.

---

Demonstrasi & Tampilan Aplikasi

Berikut adalah demonstrasi visual dari alur jalannya AplikasiLogin pada perangkat:

1. Antarmuka Login Awal
Tampilan bersih dengan form Username dan Password yang siap diinput.

2. Login Gagal
Hasil validasi ketika data salah. Menampilkan pesan error "Username atau Password Salah".

3. Login Berhasil
Autentikasi sukses dengan data cocok di Room DB. Menampilkan pesan "Login Berhasil".