Pembukaan

Keuangan ibarat air yang mengalir, perlu diatur arusnya dan di kendalikan, arus deras bisa membuat bencana, tapi terlalu tenang juga membuat ekonomi tidak berjalan. Uang harus mengalir layaknya air.

Ide ini inisiatif dari istri saya, Nabilla Mauludina Mahmud. Ia ingin memiliki satu aplikasi yang dapat menyimpan arus kas keuangan dan memiliki dashboard untuk mendapatkan insight arus kas.

Ada banyak aplikasi manajemen uang yang ada di internet, mulai dari berbasis aplikasi, website, hingga mobile. Kami tidak berusaha bersaing dengan semua aplikasi tersebut, tetapi ingin menciptakan versi kami sendiri yang dapat disesuaikan dengan kebutuhan. Membangun dan menggunakan produk buatan sendiri memberikan kepuasan tersendiri, sekaligus menjadi bukti nyata kemampuan saya sebagai software developer.

Aplikasi manajemen keuangan ini haruslah bisa input transaksi dan memiliki dashboard statistika untuk mengetahui arus kas keuangan. Saya akan menjelaskan bagaimana proses development dan apa saja tantangan yang kami hadapi dan cara menghadapinya.

Planning Phase

Perencanaan dimulai dari perencanaan User Interface (UI). Desain UI dibuat oleh Nabilla, idenya adalah berbasis website tetapi Mobile friendly. Desainnya simpel dan sederhana tetapi padat informasi, memiliki navigation footer layaknya aplikasi mobile.

Analisa fitur yang harus tersedia adalah:

1. Membuat transaksi, menyimpan seluruh data transaksi disimpan dalam akun yang terhubung
2. Daftar transaksi, melihat seluruh data transaksi yang telah disimpan
3. Dashboard/Laporan, Laporan transaksi berupa grafik arus kas (Cash Flow)
4. Pengaturan Tags, Pelabelan tags terhadap transaksi
5. Upload Gambar, ada kemungkinan upload gambar struk transaksi

Pemilihan Teknologi

Akhir-akhir ini banyak framework (khususnya di lingkungan nodejs), seperti reactjs, vuejs, nextjs, nestjs, express, you name it. Tidak akan pernah ada penyelesaiannya jika kita ikuti. Saat aplikasi ini dibuat, nextjs sedang dalam masa jayanya, update terbarunya membuat semua developer terpana tetapi saya menemukan kekurangannya yaitu nextjs SANGAT BERAT, khususnya dalam fitur cache. Nextjs sangat menjual fitur cache ini karena sangat digunakan dalam website seperti blog. Karena itu, nextjs tidak menjadi pilihan framework frontend karena terlalu banyak fitur yang tidak digunakan.

Reactjs adalah framework frontend yang populer saat ini, penggunaan reactjs dan react router adalah pilihan yang bagus karena sederhana. Kebebasan dalam pemilihan teknologi ini membuat aplikasi menjadi ringan dan fleksibel.

Saya sebagai pengembang aplikasi akan memilih teknologi apa saja yang akan digunakan, ini sebenarnya lebih ke “pemilihan framework” karena berbasis website maka pastinya menggunakan CSS dan JS di frontend daripada menggunakan java untuk aplikasi mobile. Framework frontend yang akan digunakan adalah Reactjs, sedangkan Backend menggunakan framework backend dan database disimpan di SQlite.

Development Process

Awalnya saya gunakan preact karena terinsfluence oleh “ringan”-nya. Tetapi karena UI yang saya gunakan adalah Shadcn, Preact memberikan error yang tidak sedikit seperti tipe data ref yang ada pada komponen UI. Karena itu, saya langsung migrasi framework preact ke react.

Saya menemukan library react router untuk mengatasi router Single Page Application (SPA), library ini sangat mudah digunakan dan sangat low level. Bagian paling disuka adalah Action dan Loader. Ini memudahkan proses pengambilan data dan pengolahan data ke backend. Sehingga saya membuat repository sebagai starter projek menggunakan Reactjs + vite + React Router!, cek di repository ini React-Vite-Boilerplate.

Untuk memastikan performa tinggi dan efisiensi penglolaan data, saya memilih NestJS sebagai framework Backend, dipadukan dengan Prisma ORM untuk pengelolaan database yang intuitif. Proses dalam pengembangan backend tidak ada kendala apapun. Pembuatan API menggunakan Nestjs sangat cepat ditambah Prisma ORM yang intuitif, pembuatan query sangat mudah karena dibantu type data typescript digenerate oleh Prisma. Selain itu, Nestjs guard memudahkan pembuatan keamanan API seperti Authentication da Authorization. Karena kemudahan ini, saya kumpulkan semuanya dalam satu repository sebagai boilerplate projek kedepannya, periksa di repository ini Nestjs Boilerplate.

Aplikasi ini sangat bergantung pada data transaksi, desain database yang cocok untuk menyimpan data transaksi adalah

1. Jumlah transaksi, tipe data integer
2. Tags, untuk melabeli transaksi
3. Judul/title, opsional karena dari tags saja sudah cukup
4. Note, catatan
5. Item transaksi, Kadang sebuah transaksi tidak cukup hanya nominal akhir saja, perlu kejelasan item-item didalamnya.

Selain data diatas, perlu adanya file management karena ada fitur upload file. Data file ini perlu disimpan dan siapa yang melakukan aksi upload. Akses terhadap file juga perlu dibatasi sehingga hanya pengguna yang menguploadnya yang bisa membukanya.

Design dan User Experience

Bagian yang menantang dalam pembuatan aplikasi adalah User Interface. Masalah pertama dalam fitur sistem manajemen uang ini adalah form pembuatan transaksi. Disini terdapat beberapa data yang harus di-input oleh pengguna yaitu jumlah transaksi, judul, deksripsi, tanggal transaksi dan kantong yang digunakan. Saat digunakan pertama kali, tidak ada masalah dalam penggunaannya, saya sebagai pengguna bisa memasukkan data dengan baik. Tetapi setelah digunakan beberapa kali dan dianalisa, asumsi saya ada yang salah disini. Saya mencoba untuk mengidentifikasi kembali apa tujuan dari fitur ini. Awalnya hanya bertujuan untuk “memasukkan data transaksi”, maka tampilan ini sudah memenuhi tujuan tersebut, tapi setelah dianalisa kembali tujuannya adalah “Menyimpan JUMLAH transaksi dan melabelinya”. Merubah tujuan ini membuat saya menganalisis kembali desain user interface ini, maka desain ini tidak cocok untuk tujuan tersebut karena pengguna harus memasukkan SETIAP formulir walaupun tidak tertulis apa yang mandatory atau yang tidak.

Dengan merubah tujuan ini menjadi lebih sempit dan lebih spesifik. kita bisa mengeliminasi formulir yang tidak penting dan jangan takut untuk merubah ukuran dari formulir. Ukuran form “jumlah transaksi” diubah menjadi besar dan ditempatkan paling atas agara mata lebih fokus. Tinggalkan Form “tags” dan “kantong” di depan untuk memudahkan pelabelan transaksi. Sedangkan formulir lainnya disembunyikan dalam tab untuk menyederhanakan tampilan. Pengguna bisa memasukkan transaksi dengan cepat karena fokus pada formulir yang penting saja. Nabilla merasa “lega otaknya” setelah melihat desain baru ini.

Saya merasa cukup lega sekaligus menyenangkan ketika bisa mengimprove aplikasi baik secara penggunaan dan performa. Pelajaran yang bisa diambil adalah kadang apa yang biasa dilihat belum berarti itu paling optimal untuk digunakan, perlu menentukan tujuan dari alat yang diciptakan agar dapat menciptakan bentuk alat yang dapat memecahkan masalah dengan efektif.

Selain pembuatan Formulir transaksi, saya juga membuat halaman daftar transaksi, dashboard dan pengaturan lainnya. List transaksi menampilkan semua transaksi berdasarkan filter bulan-tahun dan jenis dompet. Saya membuat beberapa penyempurnaan seperti membuat “card account”, disini menunjukkan balance akun (a.k.a kantong), jumlah income (pemasukan) dan jumlah expense (pengeluaran).

Animasi dapat memberikan kesan yang lebih hidup dan interaktif pada sebuah website. Dengan menggunakan Library Motion, anda bisa dengan mudah menciptakan efek menarik seperti

1. Transisi halaman yang halus
2. Interaksi Makro
3. Efek rotasi dinamis
4. Masuk dan keluar elemen secara aktraktif

Disini saya menambahkan beberapa animasi pada beberapa elemen, cukup membuat aplikasi menjadi lebih menarik dan nyaman dilihat. Menjaga tidak terlalu banyak animasi agar tidak membuat distraksi perhatian.

Rencana Masa Depan

Aplikasi ini masih digunakan secara pribadi dan private oleh kami berdua. Belum ada rencana untuk mempublikasikan ke khalayak umum karena hanya saya sendiri developer disini, tidak punya banyak sumber daya untuk mengembangkan dan menjaga agar nyaman digunakan untuk banyak orang. Jika kamu tertarik dengan aplikasi ini untuk digunakan secara personal, silahkan hubungi saya lewat email [email protected]. Masih banyak yang perlu dilakukan dan ditingkatkan, 1-2 bulan pengembangan tidak akan cukup dan ini adalah perjalanan panjang.

Penutup

Membuat aplikasi bukanlah hal sederhana, saya membuat ini bukanlah karena mudah tetapi karena tantangan dan ingin menciptakan sebuah karya yang dibuat dengan tangan sendiri. Pengalaman dalam pembuatannya, jerih payah itu lebih berharga dan membuat diri menjadi lebih hidup. Banyak pelajaran yang bisa diambil dalam setiap proses. Satu tulisan ini hanya sebagian kecil dari perjalanan yang saya alami. Terima kasih sudah membaca dan semoga sehat selalu.