Pertemuan 12 - PPB

Nama               : Amanda Illona Farrel
NRP                : 5025221056
Mata Kuliah    : Pemrograman Perangkat Bergerak (C)

Penerapan MVVM pada Halaman Login

Dalam artikel kali ini, saya ingin berbagi hasil eksplorasi saya dalam membuat aplikasi login Android menggunakan MVVM Architecture dan Room Database. Aplikasi ini saya beri nama Flo Login, sebuah aplikasi autentikasi user sederhana.

Langkah awal dimulai dengan membuat proyek baru menggunakan template Empty Activity di Android Studio. Saya membuat form login yang sederhana dengan input username dan password, tombol submit, dan pesan error/sukses. Berikut hasilnya:


Kemudian, saya melakukan eksplorasi dengan memodifikasi dan mengembangkan kode tersebut secara bertahap. Saya menerapkan MVVM Architecture dengan memisahkan layer: UI (Jetpack Compose), ViewModel (state management), Repository (data abstraction), dan Room Database (persistent storage).

Adapun fitur-fitur yang saya implementasikan adalah sebagai berikut:

  1. Login dengan validasi username dan password terhadap database
  2. Register user baru dengan validasi username unik (minimum 3 karakter) dan password (minimum 5 karakter)
  3. Konfirmasi password harus cocok sebelum mendaftar
  4. Welcome screen yang menampilkan username setelah login berhasil
  5. Fungsi logout untuk kembali ke login screen
  6. Show/hide password toggle dengan icon mata dari Material Icons
  7. Loading state dengan CircularProgressIndicator saat proses login/register
  8. Real-time form validation dengan error message yang informatif
  9. Room Database untuk menyimpan user secara persistent di SQLite
  10. MVVM Architecture dengan proper separation of concerns
  11. Modern UI dengan Jetpack Compose dan Material Design 3
  12. Tema ungu profesional yang konsisten di semua screen 

Implementasi ini melibatkan pembuatan beberapa file penting:

  • Entity User dengan kolom id, username (unique), dan password
  • DAO (UserDao) dengan query insert, login, dan findByUsername
  • AppDatabase configuration dengan Singleton pattern
  • UserRepository sebagai abstraction layer untuk data access
  • LoginViewModel untuk mengelola state dan business logic
  • LoginViewModelFactory untuk dependency injection
  • Tiga screen UI: LoginScreen, RegisterScreen, dan WelcomeScreen
  • MainActivity dengan navigasi logic berdasarkan app state

Untuk testing aplikasi, saya menyediakan default account dengan username "admin" dan password "12345" yang otomatis di-insert saat app pertama kali dibuka. User juga dapat membuat akun baru melalui halaman register, dan data semua user tersimpan persistent di database SQLite.



Melalui project Flo Login ini, saya mempelajari banyak hal penting dalam Android development: bagaimana memisahkan concern antara UI dan business logic, menggunakan ViewModel untuk state management yang reactive, menerapkan Repository pattern untuk data abstraction yang lebih fleksibel, mengintegrasikan Room Database untuk persistent storage yang type-safe, dan menggunakan Kotlin Coroutines untuk operasi async yang clean dan readable. Untuk melihat update database secara real-time, buka App Inspection di Android Studio dan navigasi ke tab Database Inspector. Berikut demo aplikasi Flo Login:

Hasil pembelajaran saya tersebut dapat dilihat pada resource berikut. Demikian hasil eksplorasi saya. Terima kasih sudah menyimak :)


Link:

Komentar

Posting Komentar

Postingan populer dari blog ini

Pertemuan 3 - PPB

Gambar
Nama               : Amanda Illona Farrel NRP                 : 5025221056 Mata Kuliah    : Pemrograman Perangkat Bergerak (C) Membuat Aplikasi Ulang Tahun Pada kesempatan kali ini, saya mendapatkan pengalaman baru untuk mengenal Composable dan Komponen Text dalam mobile programming . Di tugas sebelumnya saya hanya mengikuti panduan dasar untuk membuat teks "Hello Android", sementara di tugas ini terdapat tantangan baru. Berikut langkah-langkah sederhana untuk membuat aplikasi Ulang Tahun menggunakan Android Studio: Pertama, saya membuat project baru di Android Studio dengan memilih template Empty Activity , lalu mengisi konfigurasi project seperti Name , Package name , Save location , Minimum SDK , dan Build configuration language sesuai kebutuhan sebelum menekan tombol Finish .  Kemudian, saya mengatur layar utama aplikasi pada MainActivity dengan menggunakan komponen Surface di...
Baca selengkapnya

ETS - PPB

Gambar
Nama        : Amanda Illona Farrel NRP          : 5025221056 Mata Kuliah : Pemrograman Perangkat Bergerak (C) Mobile Front End - Artharum Dalam artikel kali ini, saya ingin berbagi hasil pengerjaan proyek bersama rekan saya, Ahmad Fadhilah Mappisara , yang ditujukan untuk memenuhi Evaluasi Tengah Semester (ETS). Kami memilih Proyek 4: Aplikasi Catatan Keuangan Pribadi dan bersama-sama mengembangkan aplikasi mobile bernama Artharum . Artharum berasal dari Artha (bekal hidup bermartabat) dan Arum (harum yang membekas) — pengingat bahwa setiap rupiah yang dicatat adalah penghargaan terhadap kehidupan. 1. Deskripsi Aplikasi Sebelum masuk ke detail teknis, izinkan kami memperkenalkan Artharum secara lebih mendalam. Artharum adalah aplikasi catatan keuangan pribadi berbasis Android yang dirancang untuk membantu pengguna merekam, meng...
Baca selengkapnya

Pertemuan 1 - PPB

Nama               : Amanda Illona Farrel NRP                     : 5025221056 Mata Kuliah     : Pemrograman Perangkat Bergerak (C) Eksplorasi Perkembangan Teknologi Perkembangan teknologi perangkat mobile tidak hanya terjadi pada perangkat keras, tetapi juga pada sistem operasi yang digunakan untuk menjalankan berbagai aplikasi. Sistem operasi berfungsi sebagai penghubung antara perangkat keras dengan perangkat lunak sehingga pengguna dapat menjalankan berbagai layanan digital. Saat ini sistem operasi tidak hanya digunakan pada smartphone , tetapi juga pada smartwatch , smart TV , perangkat Internet of Things (IoT), hingga kendaraan pintar. Berikut merupakan contoh-contohnya: Tabel 1. Detail Teknologi No Device OS Dibuat oleh Negara Tahun Fungsi Programming Link Gambar/Video 1 iPhone iOS Apple Amerika Serikat 2007 Smartphone untu...
Baca selengkapnya