EAS PPB - Mora Wallet
Aplikasi Mobile Multi-Currency Wallet
Mora Wallet
Anggota Kelompok : - Stefanus Yosua Mamamoba (5025231066) (Link)- Nathanael Valen Susilo (5025231099)
Anggota Kelompok :
- Stefanus Yosua Mamamoba (5025231066) (Link)
- Nathanael Valen Susilo (5025231099)
Link Repositori: https://github.com/Kirytsu/morawallet
Deskripsi Aplikasi
MoraWallet adalah aplikasi pencatat keuangan pribadi berbasis Android yang dibuat untuk membantu pengguna mengelola dompet, transaksi, laporan, nilai tukar mata uang, hingga berita finansial dalam satu aplikasi. Aplikasi ini cocok digunakan oleh pengguna yang memiliki lebih dari satu sumber dana, sering mencatat pemasukan dan pengeluaran, atau membutuhkan pantauan nilai tukar antar mata uang.
Berbeda dari aplikasi pencatat keuangan sederhana yang hanya menyimpan transaksi, MoraWallet dirancang sebagai aplikasi multi-currency. Artinya, pengguna dapat membuat dompet dengan mata uang berbeda, mencatat transaksi berdasarkan dompet tersebut, lalu melihat gambaran portofolio secara lebih rapi melalui dashboard, grafik, dan laporan kategori.
Transaksi di dalam aplikasi dibagi menjadi tiga jenis utama:
- Income, yaitu pemasukan.
- Expense, yaitu pengeluaran.
- Transfer, yaitu perpindahan saldo antar dompet.
Dengan pembagian tersebut, pengguna dapat memantau alur uang secara lebih jelas. Data transaksi juga dapat dilihat berdasarkan kategori, rentang tanggal, jenis transaksi, dan dompet tertentu.
Selain pencatatan keuangan, MoraWallet juga menyediakan halaman Markets untuk melihat nilai tukar mata uang secara langsung. Pengguna dapat membuka grafik riwayat kurs, membandingkan base currency dan quote currency, serta menggunakan converter untuk menghitung konversi nilai mata uang.
Tampilan aplikasi dibuat menggunakan Jetpack Compose dengan pendekatan komponen reusable. Desainnya memakai Material 3, palet warna biru dan cyan, serta warna semantik berbeda untuk income, expense, transfer, kategori, dan chart.
Fitur Utama
1. Dashboard Keuangan
Dashboard menjadi halaman utama setelah pengguna login. Di halaman ini pengguna dapat melihat ringkasan kondisi keuangan secara cepat, seperti total portofolio, daftar wallet, laporan income dan expense, transaksi terbaru, serta pratinjau nilai tukar.
Beberapa elemen penting pada dashboard:
- Portfolio card untuk menampilkan total saldo semua dompet.
- Quick add untuk menambahkan income, expense, atau transfer dengan cepat.
- Wallet row untuk menampilkan daftar wallet secara ringkas.
- Income dan expense report untuk melihat arus uang.
- Category breakdown untuk melihat distribusi transaksi berdasarkan kategori.
- Recent records untuk menampilkan transaksi terbaru.
- Exchange-rate preview untuk membuka informasi market.
2. Manajemen Wallet
Fitur Wallet digunakan untuk membuat dan mengelola dompet. Setiap wallet dapat memiliki nama, saldo, mata uang, dan warna visual. Pengguna dapat membuka detail wallet untuk melihat saldo, grafik kategori, serta daftar transaksi yang terkait dengan wallet tersebut.
Fitur pada bagian wallet:
- Menambah wallet baru.
- Mengedit wallet yang sudah ada.
- Menghapus wallet.
- Melihat detail saldo.
- Melihat breakdown kategori dengan donut chart.
- Melihat riwayat transaksi per wallet.
3. Pencatatan Transaksi
Halaman Records atau Transactions digunakan untuk melihat seluruh transaksi yang sudah dicatat. Pengguna dapat memfilter transaksi berdasarkan jenis, tanggal, dan wallet.
Jenis transaksi yang tersedia:
- Income untuk pemasukan.
- Expense untuk pengeluaran.
- Transfer untuk perpindahan saldo antar wallet.
Pada form transaksi, pengguna dapat memasukkan nominal, memilih wallet, memilih kategori, menulis catatan, dan menyimpan transaksi. Waktu transaksi dicatat otomatis saat data disimpan.
4. Laporan dan Grafik
MoraWallet menyediakan tampilan laporan agar data keuangan tidak hanya berbentuk daftar transaksi. Aplikasi menampilkan laporan berbasis kategori, total pemasukan, total pengeluaran, dan grafik visual.
Komponen grafik yang digunakan:
- Donut chart untuk breakdown kategori.
- Bar chart untuk laporan per periode.
- Line chart untuk grafik nilai tukar.
- Interactive line chart untuk grafik kurs yang dapat disentuh atau digeser.
5. Markets dan Kurs Mata Uang
Halaman Markets menampilkan nilai tukar mata uang secara langsung. Data kurs diambil menggunakan Frankfurter API. Pengguna dapat memilih pasangan mata uang, membuka detail grafik, dan melihat riwayat nilai tukar.
Fitur menarik pada bagian Markets adalah smart base/quote inversion. Ketika mata uang dengan nilai kecil seperti IDR digunakan sebagai base dan menghasilkan angka kurs yang terlalu kecil, aplikasi dapat membalik base dan quote agar grafik lebih mudah dibaca.
Fitur pada halaman Markets:
- Daftar nilai tukar mata uang.
- Header market dengan pilihan base currency.
- Rate card untuk setiap pasangan kurs.
- Grafik historis kurs.
- Garis high dan low pada chart.
- Crosshair interaktif saat pengguna menyentuh grafik.
- Currency converter untuk menghitung konversi mata uang.
6. Berita Finansial
Halaman News menyediakan daftar berita finansial. Pengguna dapat mencari artikel, melihat kartu berita, membuka detail artikel, dan membaca ringkasan informasi.
Data berita berasal dari NewsAPI.org. Jika API key belum diatur, aplikasi akan menampilkan pesan setup sehingga aplikasi tetap aman dan tidak crash.
7. Pengaturan Aplikasi
Halaman Settings digunakan untuk mengatur preferensi pengguna. Beberapa pengaturan yang tersedia meliputi base currency, perubahan password, dan aksi logout.
Struktur Repo
Berikut adalah gambaran struktur utama repository MoraWallet:
```text
MoraWallet/
app/ Modul utama aplikasi Android
build.gradle.kts Konfigurasi Gradle untuk app, Compose, Firebase, Retrofit, dan dependency lain
proguard-rules.pro Aturan ProGuard untuk build release
src/
main/
AndroidManifest.xml Deklarasi activity, permission, dan konfigurasi aplikasi
java/com/example/morawallet/
MainActivity.kt Activity utama yang menjalankan Compose app
MoraApp.kt Application class untuk membuat AppContainer
core/
ui/components/ Komponen UI reusable
util/ Helper untuk format mata uang, tanggal, kategori, validasi, HTML text, dan laporan
data/
auth/ Integrasi Google Sign-In dengan Credential Manager
firebase/ Referensi koleksi Cloud Firestore
model/ Model data seperti Wallet, Transaction, User, ExchangeRate, dan NewsArticle
remote/ Interface Retrofit untuk Frankfurter API dan NewsAPI
repository/ Repository untuk auth, user, wallet, transaction, market, dan news
di/ Dependency container manual melalui AppContainer
feature/
auth/ Halaman splash, login, register, dan logic autentikasi
dashboard/ Halaman ringkasan portofolio, laporan, wallet, transaksi, dan kurs
markets/ Halaman kurs, grafik historis, dan currency converter
news/ Halaman daftar berita dan detail artikel finansial
settings/ Halaman pengaturan akun, base currency, dan logout
transaction/ Halaman daftar transaksi, form transaksi, filter, laporan, dan detail transaksi
wallet/ Halaman daftar wallet, form wallet, dan detail wallet
navigation/ Route, NavHost, top bar, bottom bar, dan root scaffold
ui/theme/ Warna, typography, spacing, shape, dan konfigurasi Material theme
res/
drawable/ Asset drawable seperti logo dan launcher background
font/ Font aplikasi
mipmap-*/ Icon launcher berbagai resolusi
values/ Resource warna, dan string
test/
java/com/example/morawallet/ Unit test untuk formatter dan input nominal
gradle/ Gradle wrapper dan version catalog
build.gradle.kts Konfigurasi Gradle level project
settings.gradle.kts Konfigurasi nama project dan modul
README.md Dokumentasi utama project
```
Detail Halaman Utama
1. Splash dan Autentikasi
Secara umum, MoraWallet memiliki alur halaman yang dimulai dari splash screen dan autentikasi. Saat aplikasi dibuka, sistem akan memeriksa apakah pengguna sudah login atau belum. Jika pengguna sudah memiliki sesi aktif, aplikasi langsung masuk ke halaman utama. Jika belum, pengguna akan diarahkan ke halaman login atau register. Pada bagian autentikasi ini, MoraWallet mendukung login menggunakan email/password dan Google Sign-In.
2. Dashboard
Halaman utama pertama adalah Dashboard. Halaman ini menjadi pusat ringkasan keuangan pengguna. Di dalamnya terdapat total portofolio, ringkasan pemasukan dan pengeluaran, daftar dompet, transaksi terbaru, serta pratinjau kurs mata uang. Dashboard dibuat agar pengguna bisa langsung memahami kondisi keuangan tanpa harus membuka setiap menu satu per satu.
3. Wallets
Halaman Wallets digunakan untuk mengelola daftar dompet. Pengguna dapat membuat dompet baru, melihat saldo tiap dompet, membuka detail dompet, mengubah data dompet, dan menghapus dompet jika sudah tidak digunakan. Setiap dompet dapat memiliki mata uang berbeda, sehingga aplikasi tetap fleksibel untuk pengguna yang menyimpan dana dalam beberapa currency.
4. Records
Halaman Records berfungsi sebagai pusat pencatatan transaksi. Semua pemasukan, pengeluaran, dan transfer antar dompet dapat dilihat dari halaman ini. Pengguna juga dapat memfilter transaksi berdasarkan jenis, wallet, dan rentang tanggal. Selain menampilkan daftar transaksi, halaman ini juga membantu pengguna membaca pola keuangan melalui laporan dan grafik kategori.
5. Markets
6. News
Halaman News berisi berita finansial yang diambil dari NewsAPI.org. Pengguna dapat membaca daftar artikel, mencari berita berdasarkan kata kunci, lalu membuka detail artikel yang ingin dibaca. Kehadiran halaman ini membuat aplikasi terasa lebih informatif karena pengguna bisa mengikuti perkembangan finansial langsung dari aplikasi.
7. Settings
Halaman Settings digunakan untuk mengatur preferensi aplikasi dan akun. Di halaman ini pengguna dapat mengubah base currency, mengganti password, dan logout. Settings dibuat sebagai tempat pengaturan tambahan agar halaman utama tetap fokus pada aktivitas keuangan pengguna.
Teknologi yang Digunakan
Beberapa teknologi utama pada MoraWallet:
- Kotlin sebagai bahasa utama.
- Jetpack Compose untuk membangun UI deklaratif.
- Material 3 untuk komponen dan design system.
- MVVM sebagai pola arsitektur halaman.
- Repository layer untuk memisahkan akses data dari UI.
- Firebase Authentication untuk login email/password.
- Google Sign-In menggunakan AndroidX Credential Manager.
- Cloud Firestore untuk penyimpanan data wallet, user, dan transaksi.
- Retrofit dan OkHttp untuk komunikasi API.
- kotlinx.serialization untuk parsing JSON.
- DataStore Preferences untuk menyimpan preferensi lokal.
- Coil untuk memuat thumbnail berita.
- Custom Canvas untuk chart seperti line chart, bar chart, dan donut chart.
Tahapan Pengerjaan
1. Inisialisasi Project
Tahap awal dimulai dengan membuat project Android menggunakan Kotlin dan Jetpack Compose. Setelah itu, konfigurasi Gradle disiapkan untuk mendukung Compose, Material 3, Firebase, Retrofit, DataStore, Coil, dan dependency lain yang dibutuhkan.
Konfigurasi :
- `compileSdk` 36.
- `targetSdk` 36.
- `minSdk` 24.
- Kotlin 2.2.10.
- Android Gradle Plugin 9.1.1.
- Compose BOM 2024.09.00.
2. Membuat Theme dan Komponen Dasar
Setelah project siap, tahap berikutnya adalah membuat fondasi UI. Bagian ini meliputi warna, typography, spacing, shape, button, text field, card, dialog, snackbar, picker, dan komponen chart.
Tujuannya adalah agar setiap halaman memiliki tampilan yang konsisten dan mudah dikembangkan.
3. Menyiapkan Navigasi Aplikasi
Navigasi dibuat menggunakan Navigation Compose. Aplikasi memiliki alur autentikasi dan alur halaman utama. Splash screen menjadi pintu awal untuk menentukan apakah pengguna masuk ke Login atau langsung ke Dashboard.
Bottom navigation berisi lima menu utama: Home, Wallets, Records, Markets, dan News.
4. Integrasi Firebase Authentication
Tahap berikutnya adalah membuat fitur login dan register. Autentikasi dibuat menggunakan Firebase Authentication dengan email/password. Selain itu, aplikasi juga mendukung login Google melalui Credential Manager.
Pada tahap ini dibuat:
- `AuthRepository`
- `FirebaseAuthRepository`
- `GoogleAuthClient`
- `LoginViewModel`
- `RegisterViewModel`
- `SplashViewModel`
5. Menyiapkan Firestore dan Model Data
Setelah autentikasi siap, aplikasi membutuhkan struktur data. Model utama yang dibuat adalah user, wallet, transaction, exchange rate, dan news article.
Firestore digunakan untuk menyimpan data berdasarkan user. Dengan struktur seperti ini, setiap pengguna hanya mengakses data miliknya sendiri.
6. Membuat Repository Layer
Repository layer dibuat untuk memisahkan logika data dari UI. ViewModel tidak langsung berkomunikasi dengan Firebase atau API, tetapi melalui repository.
Repository utama:
- `AuthRepository`
- `UserRepository`
- `WalletRepository`
- `TransactionRepository`
- `ExchangeRateRepository`
- `NewsRepository`
7. Membuat Fitur Wallet
Fitur wallet dibuat untuk menambah, mengedit, menghapus, dan melihat dompet. Pada tahap ini juga dibuat komponen wallet card, wallet summary, wallet form, dan wallet detail.
Wallet menjadi data dasar untuk transaksi dan perhitungan portofolio.
8. Membuat Fitur Transaksi
Setelah wallet siap, fitur transaksi dibuat. Transaksi mendukung income, expense, dan transfer. Form transaksi dirancang agar dapat digunakan untuk tambah dan edit data.
Pada tahap ini dibuat juga filter transaksi, detail transaksi, kategori, dan tampilan laporan transaksi.
9. Membuat Dashboard
Dashboard dibuat setelah wallet dan transaksi tersedia. Halaman ini menggabungkan data dari beberapa sumber untuk menghasilkan ringkasan keuangan.
Perhitungan penting pada dashboard:
- Total saldo wallet.
- Konversi saldo ke base currency.
- Total income dan expense.
- Breakdown kategori.
- Transaksi terbaru.
- Preview nilai tukar.
10. Integrasi Exchange Rate
Fitur Markets dibuat dengan mengambil data dari Frankfurter API. Data kurs ditampilkan dalam bentuk daftar dan grafik historis.
Pada tahap ini dibuat:
- `ExchangeRateApi`
- `FrankfurterExchangeRateRepository`
- `MarketsViewModel`
- `RateChartViewModel`
- `ConverterViewModel`
11. Membuat Chart Interaktif
Chart dibuat menggunakan Canvas agar tampilan grafik dapat disesuaikan dengan kebutuhan aplikasi. Donut chart digunakan untuk kategori, bar chart untuk laporan, dan interactive line chart untuk riwayat kurs.
Chart kurs juga mendukung high/low line dan drag crosshair agar pengguna bisa membaca data pada titik tertentu.
12. Integrasi NewsAPI
Fitur News dibuat dengan Retrofit dan NewsAPI.org. Halaman News menampilkan daftar artikel, pencarian, thumbnail dengan Coil, dan detail artikel.
Jika `NEWS_API_KEY` belum diisi, aplikasi menampilkan pesan setup. Pendekatan ini membuat aplikasi tetap aman saat API key belum tersedia.
13. Membuat Settings dan Preferensi
Settings dibuat untuk mengelola preferensi pengguna seperti base currency dan theme. Data preferensi disimpan menggunakan DataStore Preferences.
Selain itu, halaman ini juga menyediakan aksi akun seperti mengganti password dan logout.
14. Pengujian dan Dokumentasi
Tahap akhir adalah melakukan pengujian dan dokumentasi. Repository sudah memiliki beberapa unit test untuk helper penting seperti formatter mata uang, input nominal, HTML text, dan agregasi laporan.
Contoh test yang tersedia:
- `CurrencyFormatterTest`
- `AmountInputTest`
- `HtmlTextTest`
- `ReportAggregationsTest`
Build debug dapat dijalankan dengan perintah:
```powershell
.\gradlew.bat assembleDebug
```
Unit test dapat dijalankan dengan perintah:
```powershell
.\gradlew.bat testDebugUnitTest
```
Kesimpulan
MoraWallet adalah aplikasi pencatat keuangan pribadi yang tidak hanya berfokus pada input transaksi, tetapi juga pada pengalaman membaca data keuangan. Dengan dukungan multi-currency, dashboard ringkas, laporan kategori, grafik interaktif, kurs mata uang, berita finansial, dan Firebase sebagai backend, aplikasi ini dapat menjadi fondasi yang kuat untuk pengembangan aplikasi finance tracker yang lebih lengkap.
Dari sisi pengembangan, project ini juga memperlihatkan penggunaan Jetpack Compose modern, Material 3, MVVM, repository pattern, Firebase, Retrofit, DataStore, dan custom chart berbasis Canvas dalam satu aplikasi Android yang terstruktur.
Komentar
Posting Komentar