ETS PPB (Pertemuan 8)

ETS PPB - MyWallet

Anggota Kelompok : 
- Stefanus Yosua Mamamoba (5025231066) (Link)
- Nathanael Valen Susilo (5025231099)

Link App Download : Drive
Link Presentasi : Canva
Link Demo : Youtube

Deskripsi Aplikasi MyWallet : 

Aplikasi MyWallet adalah aplikasi mobile untuk pencatatan finansial pribadi penggunanya. Pengguna dapat mencatat pengeluaran ataupun pemasukan ke dalam aplikasi sehingga memudahkan penggunanya dalam melacak transaksi yang pernah dilakukan. Aplikasi ini dibangun dengan android studio menggunakan bahasa Kotlin.

Struktur Repositori

com.example.mywallet/
├── data/
│   ├── FinanceRepository.kt
│   └── TransactionFactory.kt
├── model/
│   └── FinanceModels.kt
├── ui/
│   ├── components/
│   │   ├── dashboard/
│   │   │   └── DashboardSections.kt
│   │   ├── report/
│   │   │   ├── ReportCategoryComponents.kt
│   │   │   ├── ReportChartComponents.kt
│   │   │   └── ReportFilterComponents.kt
│   │   ├── BottomNavigationBar.kt
│   │   ├── CategoryUiConfig.kt
│   │   ├── TransactionActionSheet.kt
│   │   └── TransactionComponents.kt
│   ├── screens/
│   │   ├── DashboardScreen.kt
│   │   ├── HistoryScreen.kt
│   │   └── ReportScreen.kt
│   ├── theme/
│   │   ├── Color.kt
│   │   ├── Theme.kt
│   │   └── Type.kt
│   ├── utils/
│   │   ├── Formatters.kt
│   │   └── InputParsers.kt
│   └── MyWalletApp.kt
└── MainActivity.kt

1. data/ (Data Layer)
Folder ini bertanggung jawab mengelola data aplikasi, baik dari penyimpanan lokal maupun logika bisnis data.
  • FinanceRepository.kt: Pusat kendali data. Di sini tempat penyimpanan (SharedPreferences), pengambilan, pemfilteran, dan penghitungan saldo dilakukan.
  • TransactionFactory.kt: Digunakan untuk membuat data awal atau dummy data untuk keperluan testing atau inisialisasi aplikasi.
2. model/ (Domain Models)
Berisi definisi data murni (Data Classes dan Enums) yang digunakan di seluruh aplikasi.
  • FinanceModels.kt: Mendefinisikan apa itu "Transaksi" (WalletTransaction), jenis transaksi (TransactionType), kategori (FinanceCategory), dan ringkasan keuangan (WalletSummary).
3. ui/ (User Interface - Jetpack Compose)
Folder terbesar yang berisi semua kode tampilan aplikasi.
  • components/: Berisi komponen UI kecil yang bisa digunakan kembali (reusable).
    - dashboard/ & report/: Komponen spesifik untuk layar tertentu agar kode tidak menumpuk di satu file.
    - TransactionActionSheet.kt: Dialog/Bottom sheet untuk input transaksi baru.
    - BottomNavigationBar.kt: Navigasi utama di bagian bawah aplikasi.

  • screens/: Berisi "Halaman" utama aplikasi (Dashboard, Histori, dan Laporan).

  • theme/: Tempat mengatur tampilan global seperti warna (Color.kt), tipografi/font (Type.kt), dan tema sistem (Theme.kt).

  • utils/: Fungsi bantuan untuk UI, seperti memformat angka ke Rupiah (Formatters.kt) atau memproses input teks dari user.

  • MyWalletApp.kt: Struktur utama aplikasi yang mengatur navigasi antar halaman.
4. MainActivity.kt
Entry point atau gerbang utama saat aplikasi dijalankan di Android. File ini yang memanggil MyWalletApp untuk ditampilkan ke layar user.

Komponen Halaman Dashboard

Halaman dashboard adalah halaman utama aplikasi yang memberikan informasi umum terkait finansial pengguna, seperti saldo yang tersedia, aksi untuk menambah pemasukan atau pengeluaran, dan juga beberapa histori transaksi terbaru. Halaman ini menggunakan pola State-Driven UI, di mana tampilan akan otomatis diperbarui ketika data di FinanceRepository berubah.

Komponen Utama:
  • WalletQuickSummary: Komponen ini menerima objek WalletSummary. Di dalamnya terdapat logika progres bar untuk pengeluaran bulanan:

    Logika Kode WalletQuickSummary (DashboardSections.kt)
    val progress = if (summary.limitMonthly > 0)
    summary.spentMonthly.toFloat() / summary.limitMonthly.toFloat()
    else 0f
    // Ini digunakan untuk memberikan peringatan visual jika pengeluaran mendekati limit.
  • ActionButtons: Menggunakan callback onActionClick untuk memicu Bottom Sheet (input transaksi) yang ada di MainActivity.
  • TransactionCard: Komponen modular yang menampilkan ikon kategori, judul, catatan, dan nominal uang.
Potongan Kode (DashboardScreen.kt)
@Composable
fun DashboardScreen(onActionClick: (TransactionAction) -> Unit) {
    // Data Fetching: Mengambil data ringkasan dan 6 transaksi terakhir
    val summary = FinanceRepository.walletSummaryForCurrentMonth()
    val latestTransactions = FinanceRepository.latestTransactions(limit = 6)

    LazyColumn(...) {
        // Header & Summary: Menampilkan informasi saldo
        item { WalletQuickSummary(summary = summary, ...) }
        
        // Conditional Rendering: Jika kosong tampilkan 'EmptyState', jika ada tampilkan list
        if (latestTransactions.isEmpty()) {
            item { EmptyTransactionsState() }
        } else {
            items(latestTransactions) { transaction ->
                TransactionCard(transaction = transaction) // Reusable component
            }
        }
    }
}

Tampilan User Interface


Komponen Halaman Histori

Halaman ini berfungsi untuk menampilkan seluruh daftar transaksi yang pernah dilakukan pengguna, dikelompokkan berdasarkan tanggal. 

Komponen Utama:
  • Grouping logic: Menggunakan allTransactions.groupBy { ... } untuk memisahkan transaksi per tanggal agar lebih mudah dibaca.
  • LazyColumn: Digunakan karena daftar transaksi bisa sangat panjang, sehingga hanya merender item yang terlihat di layar.
  • EmptyHistoryState: Tampilan visual (ikon & teks) jika user belum pernah mencatat transaksi sama sekali.
  • TransactionCard: Komponen modular yang menampilkan ikon kategori, judul, catatan, dan nominal uang.
Potongan Kode (HistoryScreen.kt)
@Composable
fun HistoryScreen() {    val allTransactions = FinanceRepository.allTransactions()
    // Mengelompokkan transaksi berdasarkan tanggal (misal: "12 April 2026")
    val groupedByDate = allTransactions.groupBy { formatDate(it.timestampMillis) }

    LazyColumn(...) {
        groupedByDate.forEach { (date, transactions) ->
            item { Text(text = date) } // Header Tanggal
            items(transactions) { transaction ->
                TransactionCard(transaction = transaction)
            }
        }
    }
}

Tampilan User Interface

Komponen Halaman Laporan

Halaman ini menyajikan data keuangan dalam bentuk grafik dan persentase untuk membantu user menganalisis pengeluaran.

Komponen Utama:
  • TransactionTypeSelector: Filter untuk memilih "Pemasukan" atau "Pengeluaran".
  • ReportPeriodSelector: Filter waktu (Minggu, Bulan, atau Tahun).
  • DonutReportCard: Grafik lingkaran (Donut Chart) yang menunjukkan total uang dan porsi tiap kategori.
  • ReportCategoryGrid: Daftar kategori yang diurutkan dari yang paling besar pengeluarannya beserta persentasenya.
Potongan Kode (ReportScreen.kt)
@Composable
fun ReportScreen() {
    // State untuk filter
    var selectedType by remember { mutableStateOf<TransactionType?>(TransactionType.INCOME) }
    var selectedPeriod by remember { mutableStateOf(ReportPeriod.MONTH) }

    // Filter data berdasarkan pilihan user
    val filteredTransactions = FinanceRepository.filterTransactions(...)
        .filter { it.type == selectedType }

    LazyColumn(...) {
        item { TransactionTypeSelector(selected = selectedType, ...) }
        item { ReportPeriodSelector(selected = selectedPeriod, ...) }
        item { 
            DonutReportCard(
                reportItems = reportItems, // Data untuk grafik
                totalFlow = totalFlow
            ) 
        }
        item { ReportCategoryGrid(reportItems = reportItems) }
    }
}

Tampilan User Interface



Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas PPB Pertemuan 12

Gambar
Nathanael Valen Susilo 5025231099 Aplikasi Login dengan Arsitektur MVVM Source Code:   https://github.com/Kirytsu/Mobile-Programming-B/tree/main/LoginMVVM Aplikasi Login User - MVVM  Project ini adalah aplikasi Android sederhana untuk studi kasus login dan register user. Aplikasi dibuat dengan Kotlin, Jetpack Compose, arsitektur MVVM, dan Room Database sebagai penyimpanan lokal. Fitur utama: - Register user memakai username, password, dan konfirmasi password. - Login user memakai username dan password. - Validasi input kosong, password minimal 4 karakter, dan konfirmasi password. - Pesan berhasil atau gagal ditampilkan langsung di UI. - Data user disimpan di Room Database. - Password disimpan sebagai hash SHA-256, bukan teks mentah. Struktur Folder com.example.loginmvvm | |-- data |   |-- local |       |-- dao |       |   |-- UserDao.kt |       |-- database |       |  ...
Baca selengkapnya

Tugas PPB Pertemuan 1

Gambar
Nathanael Valen Susilo 5025231099 Perkembangan Teknologi Perangkat Bergerak Awal Perkembangan Ponsel (1993 - 2007) Pada awal tahun 1990-an hingga awal tahun 2000-an, fungsionalitas pada ponsel umumnya  masih sangat terbatas. Perilisan IBM Simon pada tahun 1994 menjadi satu kemajuan signigikan pada ponsel dengan menawarkan layar sentuh serta aplikasi seperti email dan faks, walaupun dengan jangkauan yang terbatas. Rilisan ponsel seperti IBM Simon ini kemudian diikuti oleh perusahaan lainnya seperti Motorola, Nokia, Sony, BBM, dan yang lainnya. Fitur pada perangkat-perangkat tersebut masih terbatas pada  aplikasi bawaan seperti kalender, permainan sederhana seperti  Snake , aplikasi kalkulator, dan fitur SMS. Aplikasi ini bersifat statis, memiliki interaktivitas minimal, dan beroperasi tanpa koneksi internet karena keterbatasan perangkat keras yang ada. Ponsel-ponsel yang muncul pada era ini hanya memiliki aplikasi bawaan dari pabrik. Tidak ada fitur yang memungkinkan pengg...
Baca selengkapnya

Tugas PPB Pertemuan 7

Gambar
Nathanael Valen Susilo 5025231099 Link Repository :  https://github.com/Kirytsu/Mobile-Programming-B/tree/main/LoginPage   Membuat Halaman Login Sederhana Halaman login ini dibuat dengan beberapa komponen utama: mutable textfield  sebagai lokasi input pengguna yakni email dan juga password, tombol untuk login dan beberapa image untuk mendukung tampilan halaman. Halaman ini sifatnya juga hanya berupa UI sederhana karena kode untuk penyimpanan data pengguna belum ditambahkan. Kelas MainActivity class MainActivity : ComponentActivity() { override fun onCreate (savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContent { LoginScreen () } } } Kelas ini dipanggil saat aplikasi pertama dijalankan, dimana akan memanggil fungsi LoginScreen yang memuat seluruh konten yang akan ditampilkan pada halaman login pengguna. Fungsi LoginScreen  @Composable fun LoginScreen (){ var email by remember { mutableStat...
Baca selengkapnya