Remake Wang! dari Rails ke Padrino
Setelah rewrite personal website dan Kanyaah dari Rails ke Padrino, saatnya memasuki (mudah-mudahan) saga terakhir dari rewrite-rewrite-an ini, yaitu rewrite Wang! ke Padrino.
Sebagai konteks untuk teman-teman yang belum tahu, saya mengembangkan aplikasi sejuta umat: pencatatan keuangan. Awalnya aplikasi ini saya buat karena saya ingin punya sampingan berupa SaaS. Tapi, setelah sadar biaya akuisisi user untuk aplikasi jenis ini sangat tinggi, saya disable fitur berlangganannya, dan saya pakai untuk kepentingan pencatatan keuangan keluarga saja.
Rewrite kali ini bukan sembarang rewrite, tapi sekalian revamp. Sama seperti personal website saya sih sebenarnya. Hanya saja, saya ingin UX-nya sangat mendekati native apps seperti Wang! versi lama, tanpa harus pakai framework frontend yang njelimet macam React dan Vue. Untuk itu, saya memutuskan untuk menggunakan HTMX dan AlpineJS.
Jadi, apa saja yang diubah, dihilangkan, dam ditambahkan di Wang! versi rewrite?
Revamp Tampilan Total
Wang! versi lama saya koding sendiri tanpa AI, dan tanpa UI library. Hasilnya ya begini:
Di versi revamp ini, sebenarnya tanpa UI library juga, tapi kali ini saya memakai TailwindCSS ketimbang no build seperti di Wang! versi lama. Saya serahkan semuanya ke Deepseek V4 Flash dengan prompt "rewrite old Wang! project to Padrino with no mistake, make it aesthetic, and ask me if you need some confirmation". Dan... ya, Deepseek meminta beberapa konfirmasi sebelum eksekusi, dan benar-benar mengeksekusinya dengan no mistake, dan lebih bagus dari tampilan buatan saya. Saya benar-benar merasa cooked melihat hasilnya, haha.
Tidak langsung 100% sempurna secara tampilan, hanya perlu dipoles sedikit saka supaya semakin sesuai dengan keinginan saya. Kalau begini hasilnya, mau Deepseek naik harga pun tidak terlalu masalah.
Hasilnya begini:
Jauh lebih clean dan compact!
YAGNI 1: Fitur Alokasi Pengeluaran per Kategori
Sebelum meminta Deepseek eksekusi rewrite, saya bertanya kepada istri tentang beberapa fitur yang ada di Wang!, apakah masih dipakai atau tidak. Saya sendiri tidak pakai fitur alokasi pengeluaran per kategori, karena meskipun pengeluaran kami melewati batas pengeluaran yang telah dialokasikan, informasi tersebut belum cukup kuat untuk memotivasi saya untuk mengurangi pengeluaran di kategori tersebut. Yang ada, saya hanya ingin terus menambah alokasinya.
Rupanya, istri saya pun tidak menggunakannya. Karena tidak ada yang menggunakannya, saya meminta Deepseek untuk menghapus fitur tersebut saat rewrite.
YAGNI 2: Import dan Export Data Transaksi
Saat meminta Deepseek untuk hapus fitur alokasi, Deepseek juga meminta konfirmasi untuk menghapus fitur import dan export transaksi serta pencarian transaksi. Setelah dievaluasi ulang, fitur import dan export tersebut bahkan tidak pernah dipakai sama sekali, baik oleh saya maupun oleh istri.
Saya buat fitur itu awalnya untuk memudahkan user untuk menambahkan data transaksi yang sudah ada ke Wang!, saat Wang! masih mau dijadikan SaaS. Karena sekarang skemanya berbeda, fitur ini jadi kurang relevan. Ditambah lagi, baik istri dan saya sama-sama sepakat untuk menulis transaksi dari 0 lagi, jadi saya menyetujui permintaan Deepseek.
Fitur search masih diperlukan, meskipun jarang, tapi beberapa kali saya menggunakannya untuk mengecek transaksi yang sudah lama dibuat. Sangat membantu proses pencarian transaksi yang sudah lama sekali tanpa harus scroll secara manual.
YAGNI 3: Halaman Kebijakan Privasi dan S&K
Lagi, halaman Syarat dan Ketentuan dan Kebijakan Privasi ini merupakan sisa-sisa pengembangan Wang! di awal rilis. Saya minta Deepseek untuk menghapus halaman ini, karena penggunanya juga hanya saya dan istri, jadi buat apa. YAGNI.
Yang Ditambahkan: Beberapa Pengaturan
Di versi rewrite, ada beberapa pengaturan yang ditambahkan di halaman Pengaturan.
- Mode gelap. Di versi Wang! yang lama, hanya tersedia versi terang. Di versi rewrite, tersedia opsi untuk memilih antara mode gelap dan terang.
- Sembunyikan nominal transaksi. Ini pengaturan default saat buka aplikasi. Bisa ditimpa dengan mengklik tombol Tampilkan Nominal di halaman Beranda selama sesi berlangsung.
- API token. Token ini digunakan untuk integrasi dengan aplikasi pihak ketiga. Saya pakai untuk integrasi dengan bot saya: Superbot. Dengan bot ini saya bisa bulk-add transaksi dengan lebih sederhana.
- Backup database. Baik Wang! versi lama maupun versi rewrite keduanya sama-sama menggunakan SQLite. Karena berupa file, proses backupnya sederhana: cukup upload file tersebut ke layanan penyimpanan eksternal. Oh ya, hanya user dengan role admin saja yang bisa melakukan ini. Saya sengaja menyimpannya di halaman Pengaturan supaya saya yang pegang kontrol kapan backup akan dilakukan.
Yang Ditambahkan: Target Nominal di Rekening
Beberapa rekening bisa punya target nominal tertentu yang harus dicapai, sementara beberapa lainnya hanya bersifat untuk menampung dana. Oleh karena itu, saya menambahkan satu kolom baru yang bersifat opsional untuk menyimpan nilai target nominal.
Dengan adanya target nominal, fitur rekening ini jadi bisa digunakan untuk mencatat utang piutang juga. Bagi saya enhancement itu itu benar-benar sekali mendayung, dua pulau terlewati, hehe.
Kalau suatu rekening ada target nominalnya, di card rekening akan ada mini progress bar tepat di bawah nominal, serta full progress bar di halaman detail seperti ini:
Yang Ditambahkan: AI Insight
Jujur, ini salah satu fitur yang sudah ada di roadmap Wang! versi lama, tapi baru sempat diimplementasi sekarang. Hanya saja, implementasinya cukup berbeda.
Di rencana awal, implementasi AI Insight ini akan berupa laporan bulanan yang dikirim secara otomatis ke email. Yang saat ini diimplementasi, AI Insight punya satu tempat sendiri di navbar, dan bisa di-generate secara on demand sesuai tanggal yang dipilih. Tadinya malah saya mau sisipkan saja di halaman Laporan, tapi menambahkannya di navbar saya rasa lebih pas, karena kita bisa melihat insight-insight lampau.
Fitur ini saya perlukan untuk mengevaluasi pola pemasukan dan pengeluaran saya dan istri, serta mendapatkan rekomendasi bagaimana sebaiknya kami mengatur keuangan berdasarkan riwayat data transaksi. Saat ini baru mendukung provider OpenAI dan OpenAI-compatible. Claude masih belum didukung karena YAGNI. Saya langganan OpenCode Go, jadi nanti kalau suatu saat ada yang beli Wang! (aamiin) dan perlu Claude sebagai providernya, tinggal di-enhance saja.
Apa Selanjutnya?
Sebelum saga rewrite ini dimulai, saya sewa dua VPS. 1 VPS dengan RAM 4 GB dan 2vCPU saya gunakan untuk hosting Kanyaah dan Wang versi Rails app, dan Umami untuk tracking. 1 VPS dengan RAM 2 GB dan 1vCPU saya gunakan untuk hosting personal website versi Rails. Biaya sewa server per bulannya sekitar Rp250.000. Jujur saja, mengeluarkan biaya operasional sebesar itu di kondisi ekonomi sekarang ini dan di kondisi penghasilan saya dari project-project ini masih sangat kecil, lumayan terasa.
Setelah rewrite Wang! selesai, sekarang semua project saya sudah berada di dalam satu VPS mungil dengan spesifikasi RAM 1 GB dan 1 vCPU. Biaya bulanannya sekitar Rp65.000. Hemat 74%! Goals saya untuk mengurangi biaya operasional akhirnya tercapai.
Target saya selanjutnya adalah mendapatkan sales secara organik dari ngonten. Tidak muluk-muluk, satu dulu saja. Jadi, kemungkinan tidak akan ngoding dulu, kecuali mini enhancement yang tidak terlalu memerlukan banyak waktu dan tenaga. Tulisan ini pun termasuk salah satu konten saya, hehe.
Kali ini saya tidak menjualnya sebagai SaaS, tapi sebagai produk sekali beli. Kalau kamu concern dengan kepemilikan data, dan ingin punya aplikasi pencatatan keuangan yang jalan di server kamu sendiri, beli Wang saja di sini:
Lumayan panjang juga ya, ternyata. Terima kasih sudah membaca!