Setelah membangun beberapa aplikasi backend dan CLI, kita beralih ke platform mobile. Aplikasi Android Pencatat Keuangan adalah proyek pertama yang menyasar peranti mobile. Aplikasi ini memungkinkan pengguna mencatat pemasukan dan pengeluaran, melihat saldo, serta menavigasi antar layar daftar, tambah transaksi, dan dashboard ringkasan. Kita memakai Jetpack Compose untuk antarmuka, ViewModel untuk state, dan Room untuk database lokal. Proyek ini memperkenalkan konsep penting pengembangan Android modern: UI deklaratif berbasis composable, state hoisting, navigation dengan Compose Navigation, dan database lokal berbasis Room. Setiap Bagian menghasilkan aplikasi yang dapat dijalankan di emulator atau peranti fisik, sehingga kita dapat memverifikasi tampilan dan interaksi secara konkret.

Tujuan Proyek #

Aplikasi Android pencatat keuangan yang akan kita bangun mendukung fitur berikut:

  • Menampilkan daftar transaksi dalam LazyColumn dengan item composable.
  • Menambah transaksi pemasukan atau pengeluaran melalui form.
  • Menavigasi antar layar dengan Compose Navigation.
  • Menyimpan transaksi ke database lokal via Room (SQLite).
  • Menampilkan ringkasan saldo, total pemasukan, dan total pengeluaran.

Aplikasi mengikuti pola arsitektur single-activity, multiple composable screen dengan ViewModel sebagai pemegang state UI. State dipegang oleh ViewModel sehingga tetap bertahan saat konfigurasi berubah (rotasi layar, misalnya).

Perilaku yang Diharapkan #

Alur penggunaan tipikal pada peranti Android:

bash
# Pseudo interaksi pengguna
Buka aplikasi -> Dashboard saldo (Rp3.050.000)
Tap "Tambah" -> Form -> Pilih "Pengeluaran", 50000, Makan -> Simpan
Kembali ke Dashboard -> Saldo turun menjadi Rp3.000.000

Output yang Dihasilkan (dari demo konsep terminal):

text
[1] + Rp5.000.000 | Gaji - Gaji Januari
[2] - Rp750.000 | Makan - Makan siang
Pemasukan  : Rp5.000.000
Pengeluaran: Rp1.950.000
Saldo      : Rp3.050.000

Pada chapter ini kita mengekspresikan konsep dengan Kotlin murni yang dapat dijalankan di terminal. Composable sebenarnya membutuhkan Android SDK dan tidak dapat dijalankan langsung dengan kotlinc; kode di setiap Bagian memetakan logika domain dan state yang akan dipakai Compose di layer UI.

Teknologi dan Stack #

Proyek ini menggunakan peranti berikut:

KomponenVersiTujuan
BahasaKotlin 2.0.21Coroutines, null-safety, DSL Compose
UIJetpack Compose 1.5+UI deklaratif, reaktif terhadap state
StateViewModel + StateFlowBertahan saat rotasi, observable
NavigationCompose NavigationNavigasi antar composable
DatabaseRoom (SQLite)Abstraksi JDBC-like di Android
PengujianJUnit + Compose UI TestUnit test logic, UI test interaksi
Build toolGradle 8.x dengan Kotlin DSLPlugin Android, build APK

Proyek ini menggabungkan banyak pustaka Jetpack sekaligus. Untuk fokus pada konsep, kode contoh di setiap Bagian ditulis sebagai Kotlin murni yang dapat dijalankan di terminal, dengan pola yang sama persis dengan Compose di Android.

Prasyarat #

Pembaca diharapkan telah menyelesaikan chapter berikut:

  • Section Dasar-Dasar Kotlin: data class, enum class, sealed class, dan lambda,
  • Section Coroutines: suspend, launch, async, serta Flow untuk stream data,
  • Section Object-Oriented Programming: interface dan object untuk dependency injection,
  • Pola MVVM dan state management dasar,
  • SQL dan database (proyek REST API Manajemen Tugas dan Aplikasi Inventaris).

Untuk benar-benar menjalankan aplikasi di peranti, dibutuhkan Android Studio dengan SDK Android API 34 atau lebih baru. Namun, kode contoh di chapter ini dapat dijalankan dengan kotlinc biasa.

Arsitektur #

Aplikasi mengikuti pola unidirectional data flow yang direkomendasikan Google. Composable membaca state dari ViewModel melalui StateFlow<T>; aksi pengguna menjadi event yang mengubah state di ViewModel; state baru dipancarkan ke UI yang otomatis render ulang. Pola ini membuat alur data dapat dilacak dan diuji.

Pemisahan Repository dari ViewModel memungkinkan sumber data diganti (misalnya dari Room lokal ke API Ktor backend) tanpa mengubah ViewModel. State hoisting memindahkan kepemilikan state dari Composable ke ViewModel, sehingga Composable tetap stateless dan mudah di-preview maupun diuji.

Struktur Bagian #

Proyek ini dikerjakan dalam empat bagian berurutan:

BagianYang DikerjakanHasil yang Diharapkan
1. Desain AntarmukaLazyColumn, item composable, tema MaterialDaftar transaksi tampil dengan layout yang konsisten
2. State dan NavigationViewModel, StateFlow, Compose NavigationNavigasi antar layar daftar, form, dan dashboard dengan state yang bertahan
3. Database LokalRoom DAO, entity, repositoryTransaksi tersimpan persisten di SQLite dan dimuat saat aplikasi dibuka
4. Pengujian dan ReleaseUnit test ViewModel, Compose UI Test, build APK releaseLogika teruji otomatis; APK dapat diinstall di peranti

Mulailah dari Bagian 1 dan ikuti urutannya karena setiap Bagian dibangun di atas Bagian sebelumnya. Setelah Bagian 4 selesai, kita siap melangkah ke proyek Aplikasi Web Ktor yang membawa kita kembali ke backend, namun dengan struktur modular dan deployment siap produksi.

Referensi Lanjutan #