Pertemuan 12 - Login MVVM

Nama                : Ahmad Fadhilah Mappisara
NRP                  : 5025221195
Mata Kuliah      : Pemrograman Perangkat Bergerak (C)

Login MVVM

1. Deskripsi Projek

Projek ini adalah aplikasi mobile berbasis Android yang mengimplementasikan fitur autentikasi dasar, yaitu pendaftaran pengguna baru (Register) dan masuk ke dalam akun (Login). Aplikasi ini dirancang dengan mengikuti praktik terbaik pengembangan modern Android menggunakan arsitektur MVVM (Model-View-ViewModel), penyimpanan lokal menggunakan Room Database, serta antarmuka deklaratif berbasis Jetpack Compose dengan desain modern (mengadopsi estetika gradasi dan efek glassmorphism).

2. Fitur-Fitur Utama

  • Pendaftaran Pengguna Baru (Register):
    • Validasi input: Username dan password tidak boleh kosong.
    • Validasi kekuatan password: Panjang password minimal harus 4 karakter.
    • Validasi keunikan username: Memeriksa apakah username sudah terdaftar di database untuk menghindari duplikasi data.
    • Penyimpanan aman data kredensial ke dalam database lokal Room.
  • Masuk Akun (Login):
    • Validasi input: Username dan password tidak boleh kosong.
    • Pencocokan kredensial: Memverifikasi username dan mencocokkan password dengan data yang tersimpan di database lokal.
    • Umpan balik interaktif: Menampilkan status sukses menggunakan Toast dan status gagal menggunakan banner pesan kesalahan yang dinamis.
  • Antarmuka Pengguna Modern & Responsif:
    • Efek visual gradasi latar belakang dan kartu semi-transparan untuk tampilan premium.
    • Animasi transisi untuk pesan kesalahan menggunakan komponen AnimatedVisibility.
    • Indikator pemuatan (CircularProgressIndicator) selama proses akses database berlangsung.
    • Penyelarasan otomatis status UI dengan status autentikasi melalui StateFlow.

3. Teknologi dan Library yang Digunakan

Teknologi / Library Versi / Detail Deskripsi & Fungsi
Kotlin JDK 17 / Kotlin 1.9.22 Bahasa pemrograman utama yang digunakan untuk logika aplikasi Android.
Jetpack Compose BOM 2023.10.01 (Material 3) Toolkit modern untuk membangun UI deklaratif Android secara native dengan komponen Material Design 3.
Room Database 2.6.1 Library abstraksi di atas SQLite untuk menyimpan data pengguna secara lokal dengan cara yang aman dan efisien.
Kotlin Coroutines & Flow Coroutines 1.7.3 / StateFlow Digunakan untuk menangani operasi asinkron (operasi database) di latar belakang (background thread) tanpa memblokir UI thread.
ViewModel (Compose) 2.7.0 Komponen arsitektur Android untuk mengelola dan memelihara status (state) UI agar tetap konsisten selama siklus hidup aplikasi berjalan.
KSP (Kotlin Symbol Processing) Terintegrasi dengan Room compiler Alat pemrosesan anotasi Kotlin berkinerja tinggi yang digunakan untuk menghasilkan kode boilerplate Room secara otomatis.

4. Arsitektur Aplikasi

Aplikasi ini dibangun menggunakan arsitektur MVVM (Model-View-ViewModel) yang membagi kode menjadi beberapa lapisan tanggung jawab:

  • Model (Data Layer):
    • User.kt: Kelas data (Entity) yang mendefinisikan tabel users di database.
    • UserDao.kt: Data Access Object yang berisi kueri SQLite untuk berinteraksi dengan database Room (Insert, Select).
    • AppDatabase.kt: Instansiasi database Room dengan implementasi pola Singleton untuk memastikan hanya ada satu instance database.
    • UserRepository.kt: Lapisan penengah (Repository) yang memediasi akses data antara ViewModel dan DAO.
  • ViewModel Layer:
    • LoginViewModel.kt: Menangani status form login/register (username, password), memproses logika validasi input, serta memanggil repositori secara asinkron menggunakan Coroutines. State UI diekspos melalui StateFlow<LoginUiState>.
  • View Layer (UI Layer):
    • MainActivity.kt: Titik masuk utama aplikasi, bertugas menginisialisasi database, membuat ViewModel via Custom Factory, dan merender tampilan Compose.
    • LoginScreen.kt: Layar UI deklaratif yang mengamati perubahan state dari ViewModel dan merender kolom teks, tombol login/register, status pemuatan, serta pesan kesalahan.

5. Skema Database

Penyimpanan lokal menggunakan Room Database dengan skema tabel tunggal berikut:

Tabel: users

Nama Kolom Tipe Data Keterangan
id INTEGER (PrimaryKey) Auto-generate (ID unik untuk setiap pengguna).
username TEXT Nama pengguna unik untuk proses login.
password TEXT Kata sandi rahasia untuk autentikasi.

6. Struktur File Projek

app/src/main/java/com/example/loginmvvm/
│
├── data/
│   ├── local/
│   │   ├── AppDatabase.kt (Inisialisasi Database Room)
│   │   ├── User.kt (Entitas Data Pengguna)
│   │   └── UserDao.kt (Kueri CRUD Database)
│   │
│   └── repository/
│       └── UserRepository.kt (Penyedia Data ke ViewModel)
│
├── ui/
│   └── login/
│       ├── LoginScreen.kt (Tampilan UI dengan Jetpack Compose)
│       └── LoginViewModel.kt (Pengatur Logika Bisnis & UI State)
│
├── LoginApplication.kt (Inisialisasi Database Level Aplikasi)
└── MainActivity.kt (Titik Masuk Utama & Pembuat ViewModel)

7. Alur Logika Bisnis (Workflow)

  1. Alur Registrasi: Pengguna memasukkan username & password -> Validasi input -> Cek duplikasi di database -> Simpan data user -> UI menampilkan status sukses -> Form direset untuk login.
  2. Alur Login: Pengguna memasukkan username & password -> Validasi input -> Cari user di database berdasarkan username -> Cocokkan password -> Jika sukses, tampilkan pesan sukses -> Jika gagal, tampilkan pesan error yang sesuai.

Hasil Preview


Link Repository:

Comments

Post a Comment

Trending This Week

EAS - CoffeeBliss

Image
Nama                     : Ahmad Fadhilah Mappisara NRP                        : 5025221195 Mata Kuliah         : Pemrograman Perangkat Bergerak (C) Aplikasi Coffee Bliss Digital Membership 1. Deskripsi Proyek Aplikasi Coffee Bliss Digital Membership adalah aplikasi Android modern yang dikembangkan untuk menggantikan sistem kartu member fisik (kertas/plastik) menjadi kartu member digital berbasis aplikasi. Aplikasi ini membantu pemilik toko kopi Coffee Bliss dalam mengelola loyalitas pelanggan, mencatat transaksi penjualan, melacak perolehan poin secara otomatis, serta menyediakan sistem penukaran poin hadiah (rewards) langsung dari genggaman pengguna. Melalui aplikasi ini, pelanggan dapat mendaftar dengan identitas unik mereka, memantau riwayat transaksi, menunjukkan kode QR keanggotaan mereka saat memesan kopi, serta ...
Read more

ETS - PPB

Image
Nama                     : Ahmad Fadhilah Mappisara NRP                        : 5025221195 Mata Kuliah         : Pemrograman Perangkat Bergerak (C) Mobile Front End — Artharum: Aplikasi Catatan Keuangan Pribadi Dalam artikel ini, saya ingin mendokumentasikan proses pengembangan aplikasi mobile sebagai bagian dari Evaluasi Tengah Semester (ETS). Kami memilih proyek aplikasi catatan keuangan pribadi dan mengembangkan sebuah aplikasi Android bernama Artharum . Nama Artharum berasal dari dua kata, yaitu Artha (bekal hidup yang bermartabat) dan Arum (harum yang berkesan). Filosofi ini menjadi dasar bahwa setiap rupiah yang dicatat bukan sekadar angka, tetapi memiliki makna. Deskripsi Aplikasi Artharum adalah aplikasi pencatatan keuangan pribadi berbasis Android yang mem...
Read more

Pertemuan 11 - Skoola Marketplace

Image
Nama                     : Ahmad Fadhilah Mappisara NRP                        : 5025221195 Mata Kuliah         : Pemrograman Perangkat Bergerak (C) Skoola Marketplace Aplikasi Marketplace Mahasiswa berbasis Android Native (Kotlin) dengan Clean Architecture & Jetpack Compose. 1. Deskripsi Proyek Skoola adalah platform marketplace digital mobile khusus untuk lingkungan sekolah dan kampus. Aplikasi ini memfasilitasi transaksi jual-beli barang bekas layak pakai (buku pelajaran, seragam, alat laboratorium, kalkulator scientific, alat tulis), penyewaan perlengkapan, serta penawaran jasa akademik/kreatif (les privat pemrograman, desain poster, jasa pembuatan PPT kelompok) antar siswa atau mahasiswa. Proyek ini dibangun menggunakan standar pengembangan Android modern terkini ( ...
Read more