Profile
Fatih
Profile

Fatih

Kontak
  • fatihaljabar@gmail.com
  • fatihaljabar.com
Bahasa
🇬🇧 English
🇮🇩 Indonesia
Beranda
Tentang
Pencapaian
Proyek
Kontak
Kembali

SplitBill

Membagi tagihan bersama tanpa hitung-hitungan yang merepotkan. Foto struk, OCR membaca item dan harga, tentukan siapa makan apa, lalu bagikan hasilnya lewat satu tautan pendek.

Teknologi :
GitHub Demo Langsung
SplitBill

Timeline: Agustus – Agustus 2026

Ringkasan

SplitBill menyelesaikan bagian paling merepotkan dari membagi tagihan bersama: menghitung siapa harus bayar berapa. Foto struk, OCR di perangkat langsung membaca item dan harga, setiap orang menandai apa yang ia pesan, dan aplikasi menghasilkan satu tautan pendek berisi rincian yang tepat. Tanpa login, tanpa instalasi, tanpa hitung manual.

Ini produk nyata yang sudah production, aktif di splitbills.site, dibangun untuk pasar Indonesia dengan dukungan dwibahasa (Bahasa Indonesia + Inggris) dan OCR yang disetel khusus untuk format struk Indonesia.

Masalah yang Diselesaikan

Prototipe awalnya sudah berfungsi, tapi ada satu pintasan yang diam-diam meruntuhkan empat janjinya sendiri: tidak pernah menyimpan apa pun di server. Semua data tagihan, termasuk item, harga, dan nama peserta, dikemas langsung di dalam URL.

DijanjikanYang Sebenarnya Terjadi
Tautan berbagi pendekTautan menjadi sangat panjang karena seluruh tagihan di-encode di URL
Tagihan privat (orang lain tidak bisa lihat jumlahmu)Siapa pun yang punya tautan bisa membaca seluruh isinya
Pembuat tagihan bisa lihat siapa yang sudah bayarStatus pembayaran tidak pernah tersinkron antar perangkat, hanya tersimpan di browser yang mengubahnya
Otomatis terhapus setelah 24 jamTidak ada yang bisa dihapus. Datanya adalah tautan itu sendiri, dan masa berlaku hanya dicek di sisi klien sehingga mudah dilewati

Memperbaikinya berarti butuh backend sungguhan: database untuk menyimpan status tagihan, kode pendek yang di-resolve di server, dan penegakan privasi yang tidak bisa dikalahkan hanya dengan mengubah URL, semuanya sambil menjaga tampilan, alur, dan akurasi OCR tetap identik piksel demi piksel dengan versi yang sudah tervalidasi oleh pengguna asli.

Fitur Utama

  • Pindai struk: unggah dari kamera atau galeri, OCR (tesseract.js, disetel ind+eng) berjalan sepenuhnya di sisi klien. Foto tidak pernah meninggalkan perangkat.
  • Tinjau sebelum dihitung: setiap hasil pindai masuk ke layar peninjauan yang bisa diedit terlebih dahulu. Tidak ada yang masuk ke tagihan tanpa dicek.
  • Pembagian fleksibel: rata, per item, per persentase, atau jumlah kustom, dengan satu item bisa dibagi ke sembarang kombinasi orang.
  • Biaya tambahan ditangani dengan benar: pajak, biaya layanan, diskon, dan biaya tambahan lain dalam bentuk persentase atau nominal tetap, dengan pembulatan opsional.
  • Rupiah selalu pas: jumlah bagian setiap peserta selalu sama persis dengan total keseluruhan, bahkan saat pembagian menyisakan angka desimal.
  • Tautan berbagi pendek: splitbills.site/s/AB12CD34, berlaku 24 jam, lengkap dengan kode QR dan berbagi lewat WhatsApp.
  • Mode publik dan privat: tagihan publik menampilkan rincian lengkap ke semua orang, tagihan privat hanya mengirim jumlah masing-masing peserta, ditegakkan di sisi server, dengan tautan pribadi opsional per peserta.
  • Pelacakan pembayaran lintas perangkat: peserta menandai diri sudah bayar dari ponsel masing-masing, dan pembuat tagihan melihat perubahannya secara real-time.
  • Otomatis kedaluwarsa: setiap tagihan dihapus 24 jam setelah dibuat. Tidak bisa diatur ulang, memang disengaja. Ini jaminan privasi, bukan sekadar pengaturan.
  • Tumpukan Teknologi

    LapisanPilihan
    FrontendVue 3.5 + TypeScript, Vite 7, Tailwind CSS 4, vue-router 4
    Statereactive() composable biasa, tanpa Pinia; bentuk state aplikasi ini tidak membutuhkannya
    BackendHono + @hono/node-server, satu proses yang melayani API sekaligus frontend hasil build
    DatabaseMySQL 8 lewat Drizzle ORM
    OCRTesseract.js (data terlatih ind+eng), aset di-hosting sendiri
    TestingPlaywright untuk end-to-end, test runner bawaan Node untuk unit test
    ToolingBiome untuk lint dan format

    Cara Kerjanya

    1. Pindai atau isi manual. Alur kamera membutuhkan HTTPS (getUserMedia tidak berjalan tanpanya) dan menjalankan OCR sepenuhnya di browser. Tidak ada gambar yang pernah diunggah untuk diproses.
    2. Tinjau, selalu. Hasil OCR, termasuk item, harga, kuantitas, pajak, biaya layanan, dan total, mengisi layar yang bisa diedit. Pengguna mengonfirmasi atau mengoreksi sebelum apa pun disimpan.
    3. Tetapkan dan bagi. Setiap item bisa ditetapkan ke sembarang kombinasi peserta; metode pembagian (rata, per item, persentase, kustom) menentukan bagian masing-masing orang, dengan pembulatan yang diatur agar bagian selalu berjumlah sama dengan total yang tepat.
    4. Buat tautan pendek. Tagihan yang selesai ditulis ke database dan diberi kode pendek yang tidak mudah ditebak. Tagihan publik menampilkan rincian lengkap ke siapa pun yang punya tautannya; tagihan privat dibatasi di sisi server, per peserta.
    5. Bagikan dan lunasi. Penerima membuka tautan, mencari namanya, menyalin rekening bank pembuat tagihan, dan menandai diri sudah bayar, langsung terlihat oleh pembuat tagihan dari perangkat mana pun.
    6. Kedaluwarsa. 24 jam setelah dibuat, tagihan dan seluruh isinya dihapus di sisi server.

    Privasi Sejak Awal Desain

    • Foto struk diproses di perangkat dan tidak pernah diunggah ke mana pun.
    • Aset OCR disajikan dari domain aplikasi sendiri, tanpa satu pun permintaan ke CDN pihak ketiga saat proses pindai.
    • Tidak ada analytics, tidak ada cookie pelacak, tidak ada skrip pihak ketiga dalam bentuk apa pun.
    • Data tagihan hanya tersimpan di server selama jendela waktu 24 jam, lalu dihapus sepenuhnya.

    Pengujian

    Dua lapis pengujian, masing-masing membuktikan hal yang tidak bisa dibuktikan oleh yang lain:

    • Unit test (node --test, tanpa browser) menguji logika uang di modul kalkulasi bersama, khususnya kasus pembulatan yang bisa membuat pembagian naif kehilangan atau menambah satu Rupiah.
    • End-to-end test (Playwright) menjalankan browser sungguhan melalui seluruh alur: membuat tagihan, menetapkan item, membuat tautan, lalu membuka tautan itu di konteks browser terpisah yang mensimulasikan perangkat lain tanpa state lokal milik pembuat tagihan, kemudian menandainya sudah dibayar. Rangkaian test ini juga memverifikasi langsung pada payload API bahwa tagihan privat tidak pernah membocorkan jumlah peserta lain, bahwa pembayaran dari bukan peserta ditolak, dan bahwa kode pendek selalu unik dan tidak mudah ditebak.

    Rangkaian e2e ini berjalan melawan build server produksi, bukan dev server, karena dua hal yang benar-benar perlu dibuktikan, yaitu uang yang dihitung di server dan status pembayaran yang tersinkron antar perangkat, tidak akan ada tanpa backend sungguhan yang terlibat.

    Tautan

    • Aplikasi live: splitbills.site
    • Source code: github.com/fatihaljabar/splitbill