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".

PPB Pertemuan 11 - Aplikasi Marketsiswa

Penerapan Material Design pada Aplikasi "MarketSiswa" dengan Jetpack Compose

Muhammad Risyad Himawan Putra - 5025231205

 

MarketSiswa adalah aplikasi marketplace sederhana berbasis Android yang dirancang untuk memudahkan siswa dalam melakukan jual-beli di lingkungan sekolah. Aplikasi ini dibangun dengan antarmuka modern Jetpack Compose dan menerapkan prinsip-prinsip Material Design 3 (Material You) untuk menciptakan UI yang konsisten, responsif, menarik secara visual, dan ramah pengguna.

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

 

1. Deskripsi & Fitur Utama Material Design

Aplikasi ini menganut pedoman Material Design untuk memastikan antarmuka yang terstruktur. Fitur dan implementasi utamanya meliputi:

• Material is the metaphor: UI mengadopsi konsep benda nyata. Penggunaan komponen Card memberikan efek bayangan (elevation) seperti kertas yang bertumpuk, ditambah dengan tombol "Jual" yang mengambang.
• Bold, graphic, intentional: Hierarki visual sangat tegas dengan font tebal (FontWeight.ExtraBold) serta warna kontras dari skema tema khusus agar tulisan mudah dibaca.
• Motion provides meaning: Efek animasi ripple otomatis ketika tombol disentuh, serta adanya indikator animasi memutar saat data sedang diproses untuk memberikan feedback visual.

---

2. Titik Masuk (Entry Point) & Tema

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

Penjelasan: Ini adalah fungsi utama Compose yang menggantikan setContentView pada Android tradisional. Kode ini memanggil MarketplaceTheme yang berfungsi menimpa warna bawaan perangkat dengan skema warna buatan kita (Primary: Ungu, Secondary: Teal).

---

3. Struktur Data (Entitas Produk)

data class Product( val id: Long = System.currentTimeMillis(), val name: String, val price: String, val description: String )

Penjelasan: Data class merupakan cara ringkas di Kotlin untuk membuat kerangka data. Setiap produk yang dibuat secara otomatis diberikan ID unik yang diambil dari System.currentTimeMillis() untuk membedakan antar item produk.

---

4. Layar Utama & Manajemen State (MainScreen)

• State Management: Menyimpan posisi halaman aktif menggunakan var currentScreen by remember { mutableStateOf("home") }. Jika nilainya diubah (misalnya menjadi "add"), maka Compose akan merender ulang tampilan secara dinamis secara instan.
• Inisialisasi Data Cerdas: Memanfaatkan blok LaunchedEffect untuk menjalankan eksekusi kode *hanya satu kali* saat aplikasi pertama kali terbuka, guna menyisipkan produk awalan (dummy data).
• Kerangka Scaffold: Bertindak sebagai kanvas tata letak Material. Secara otomatis menempatkan letak CenterAlignedTopAppBar (Judul di atas), NavigationBar (Menu di bawah), dan ExtendedFloatingActionButton di posisi standar agar rapi.
• Routing Halaman: Menggunakan blok statemen when (currentScreen) sebagai "saklar" penukar halaman (menukar Composable HomeScreen, AddProductScreen, dan ProfileScreen).

---

5. Komponen Dinamis & Form Input

• Menampilkan Daftar (LazyColumn): HomeScreen memakai LazyColumn—versi modern dan super ringan dari RecyclerView—untuk menampilkan deretan list produk tanpa menguras memori perangkat. Data produk dibaca satu per satu memakai items(products).
• Input Validasi (OutlinedTextField): Halaman form menangkap teks pengguna dan dilengkapi kondisi keamanan `enabled = name.isNotBlank() && price.isNotBlank()`. Tombol simpan akan dibekukan jika ada kolom yang dibiarkan kosong oleh pengguna.
• Simulasi Proses Server (Coroutine): Saat form disubmit, fungsi mengandalkan scope.launch dan memicu delay(1000) untuk menunda proses. Di momen singkat ini, tombol digantikan oleh animasi bulat lambang Loading, sebelum memunculkan notifikasi sukses pop-up menggunakan Snackbar.

 

Tampilan Aplikasi