Sulap Spreadsheet Jadi Dashboard Keuangan Keluarga

Siapa sih yang nggak pernah bingung soal pengeluaran keluarga? Tahu-tahu uang habis, tapi kalau ditanya kemana aja, jawabannya selalu "ya buat ini itu." Nah, dari kebingungan itulah proyek Family CashFlow-Sheet ini muncul. Tujuannya sederhana banget: bikin tempat buat nyatat dan memantau keuangan keluarga bareng-bareng, tanpa perlu bayar aplikasi mahal.

Dan yang bikin unik dari proyek ini — penyimpan datanya pakai Google Sheets. Yup, spreadsheet biasa yang mungkin sehari-hari sudah sering kita pakai. Tapi di sini, Sheets bukan cuma buat catat-catat aja, dia jadi pusat data utama yang bisa dibuka kapan aja kalau mau ngecek angka-angka secara langsung.

Kenapa Google Sheets?

Mungkin terdengar agak aneh pakai spreadsheet sebagai tempat nyimpen data aplikasi. Tapi kalau dipikir-pikir lagi, ada beberapa alasan yang cukup masuk akal:

• Gratis total — nggak perlu sewa server database, nggak perlu bayar bulanan
• Semua orang bisa buka — anggota keluarga tinggal buka spreadsheet-nya kalau mau lihat data mentah, nggak perlu paham hal-hal teknis
• Sudah familiar — hampir semua orang pernah pakai spreadsheet, jadi kalau ada yang mau edit langsung pun nggak masalah
• Sudah ada jalur aksesnya — Google menyediakan cara untuk menghubungkan spreadsheet dengan aplikasi web, dan ini gratis untuk pemakaian normal

Tentu ada kekurangannya juga. Spreadsheet nggak secepat database beneran kalau data sudah banyak banget, dan ada batasan berapa kali boleh baca tulis per menit. Tapi buat skala keluarga yang nyatat belasan transaksi per hari, ini lebih dari cukup.

Apa Aja yang Bisa Dilakukan?

Dashboard yang dibangun dari proyek ini punya beberapa kemampuan yang lumayan lengkap:

Profil untuk Setiap Anggota Keluarga — Setiap orang punya profil sendiri. Tinggal pilih nama, dan tampilannya langsung berubah sesuai data orang tersebut. Mau tambah anggota baru? Bisa langsung dari pengaturan.

Ringkasan Keuangan dalam Satu Pandangan — Di bagian atas dashboard ada tiga kartu yang langsung menampilkan Saldo, Total Pemasukan, dan Total Pengeluaran. Designnya dibuat terasa premium dengan warna gradasi ungu-biru dan efek kaca yang keren.

Grafik yang Mudah Dipahami — Ada tiga jenis grafik: grafik garis untuk melihat tren pengeluaran harian, grafik donat untuk melihat pengeluaran berdasarkan kategori, dan grafik batang untuk membandingkan pengeluaran antar anggota keluarga. Semua grafik ini otomatis berubah sesuai filter yang dipilih.

Filter Waktu yang Fleksibel — Mau lihat data bulan ini, bulan lalu, atau tahun ini? Tinggal pilih. Bahkan bisa memilih bulan dan tahun tertentu secara spesifik.

Panel Pengaturan — Mengelola daftar anggota keluarga dan kategori pengeluaran/pemasukan bisa dilakukan langsung dari dashboard. Semua perubahan akan tersimpan otomatis ke spreadsheet.

Cerita di Balik Pembuatannya

Proyek ini nggak dibuat dalam semalam. Ada empat tahapan besar yang dilalui:

Tahap pertama — saya mulai dari bagian belakang layar dulu. Fokusnya adalah menghubungkan aplikasi ke Google Sheets dan membuat jalur-jalur supaya data bisa dibaca, ditulis, dan diringkas. Di sini juga saya siapkan berbagai peralatan bantu seperti pembuat kode unik untuk setiap transaksi, pengubah angka ke format Rupiah, dan pemeriksa data supaya input yang masuk selalu valid.

Tahap kedua — ini bagian yang paling seru karena hasilnya langsung kelihatan di layar. Saya bangun tampilan dashboard-nya satu per satu, mulai dari kartu ringkasan keuangan, grafik-grafik, formulir input transaksi, sampai modal pengaturan. Tema warnanya pakai mode gelap dengan efek kaca dan gradasi warna ungu-biru yang terasa modern dan premium.

Tahap ketiga — aplikasi dikemas supaya bisa dijalankan di mana aja tanpa perlu ribet. Proses pengemasannya dibikin efisien, jadi ukuran paketnya kecil dan ringan. Cukup satu perintah, aplikasi sudah bisa jalan.

Tahap keempat — langkah terakhir adalah menyiapkan cara untuk menjalankan aplikasi ini di lingkungan yang lebih proper, cocok buat latihan sebelum menyebarkan aplikasi ke internet sungguhan.

Pelajaran yang Didapat

Selama proses pembuatan, ada beberapa hal yang jadi pelajaran berharga:

Spreadsheet punya kelakuan uniknya sendiri. Misalnya, waktu baca data dari spreadsheet, urutan baris kadang nggak sesuai harapan kalau baris judul belum dikunci posisinya. Data baru yang baru dimasukkan malah nimpa baris judul. Solusinya harus bikin mekanisme otomatis yang bisa mendeteksi di mana baris judul berada.

Teknologi baru butuh waktu adaptasi. Proyek ini pakai versi terbaru dari SvelteKit (framework untuk bikin tampilan web). Ada cara baru dalam mengelola data yang ditampilkan di layar, dan butuh waktu beberapa hari untuk terbiasa. Tapi begitu sudah nyaman, kode yang ditulis jadi jauh lebih rapi dan mudah diperbaiki kalau ada masalah.

Pengemasan aplikasi yang benar itu penting. Dengan memisahkan proses pembuatan dan proses menjalankan, ukuran paket akhir bisa jauh lebih kecil. File-file yang cuma dibutuhkan saat pembuatan nggak ikut masuk ke paket yang dijalankan, jadi lebih aman dan hemat sumber daya.

Latihan di lingkungan lokal dulu sebelum naik ke internet. Sebelum menyebarkan aplikasi ke dunia luar, bisa simulasi dulu di komputer sendiri. Ini menghemat waktu dan biaya, sekaligus mengurangi kemungkinan masalah saat sudah live.

Jangan pernah berasumsi pengguna akan setup manual. Bikin alat bantu yang bisa menyiapkan semua kebutuhan awal secara otomatis — mulai dari struktur data, baris judul, sampai pengaturan bawaan. Ini menghemat banyak waktu dan mencegah masalah-masalah yang susah dilacak.

Kesimpulan

Proyek Family CashFlow-Sheet ini membuktikan bahwa kita nggak harus selalu pakai alat-alat yang rumit dan mahal untuk membuat aplikasi yang berguna. Kadang, hal-hal yang sudah familiar justru jadi solusi paling tepat — apalagi kalau penggunanya adalah keluarga sendiri yang nggak semuanya terbiasa dengan perangkat digital yang kompleks.

Di sisi pribadi, proyek ini jadi wahana belajar yang sangat lengkap. Mulai dari membangun tampilan web modern, menghubungkan dengan layanan pihak ketiga, mengemas aplikasi supaya portable, sampai menjalankannya di lingkungan yang mendekati kondisi nyata. Semua proses itu dilalui dari awal sampai selesai.

Yang paling penting, proyek ini lahir dari masalah nyata sehari-hari. Bukan karena latah ikut-ikutan tren, tapi karena memang butuh. Dan justru dari kebutuhan yang sederhana itulah sering kali lahir solusi yang paling berkesan.

Kalau tertarik untuk melihat atau mencoba sendiri, kode sumbernya terbuka dan bisa diakses di sini:

🔗 Repository: https://github.com/stayrelevantid/cashflow-sheet

Semoga cerita ini bisa menginspirasi dan jadi pengingat bahwa side project terbaik itu yang berangkat dari masalah nyata, diselesaikan dengan cara yang paling masuk akal, dan prosesnya dinikmati.