Toko Alat Tulis Agung — Toko Online, QRIS & Chatbot RAG

Tantangan

Toko Alat Tulis Agung sudah punya website profil dan aplikasi kasir sederhana dari versi pertama yang saya buat. Kebutuhan berikutnya lebih besar: pelanggan bisa memesan dan membayar sendiri lewat QRIS lalu tinggal mengambil barang di toko, admin bisa memverifikasi pembayaran dan mengekspor laporan, dan pertanyaan yang berulang soal stok, harga, atau jam buka bisa terjawab tanpa dibalas satu per satu.

Peran saya

Saya mengerjakan kedua versinya sebagai full-stack developer: skema database, alur belanja dan pembayaran, panel admin, chatbot RAG, keamanan, sampai pengujian.

Proses

Versi pertama (September 2025) berisi landing page toko, dashboard, kelola barang, kasir, dan laporan. Pada Juli–Agustus 2026 saya mengembangkannya jadi versi kedua dalam satu proyek Next.js: halaman dan API berjalan bersama sebagai fungsi serverless, dengan PostgreSQL di Supabase yang sekaligus menyimpan vektor embedding lewat pgvector. Skemanya dikelola lewat empat berkas migrasi SQL supaya database bisa dibangun ulang dari nol.

Keputusan terpenting ada di alur pembayaran. Stok baru dikurangi saat admin menyetujui pembayaran, bukan saat checkout, supaya stok tidak tertahan oleh pesanan yang batal dibayar. Belakangan saya merapikan tampilan HP (belanja, checkout, dan menu admin) dan menyambungkan katalog di halaman depan langsung ke database.

Solusi

Belanja online & checkout: katalog dari database, keranjang, dan validasi stok di server. Browser hanya mengirim ID barang dan jumlah; harga selalu dibaca ulang dari database dengan penguncian baris.
Pembayaran QRIS: pembeli memindai QRIS toko, mengunggah bukti (tipe file dicek dari isinya, maks. 2 MB), lalu admin menyetujui atau menolak dengan alasan. Kalau ditolak, pembeli bisa mengunggah ulang.
Chatbot RAG: mencari dulu di data toko lewat kata kunci dan pencarian semantik (embedding 768 dimensi), baru menjawab lewat LLM. Kalau tidak ada konteks yang cocok, chatbot menolak dengan kalimat baku, bukan mengarang. Admin bisa menanyakan omzet dan stok, sedangkan pertanyaan yang sama dari pembeli tidak membuka data itu.
Laporan: transaksi, stok, dan pembayaran per rentang tanggal, diekspor ke PDF atau Excel dari satu struktur data.
Dashboard admin: ringkasan, grafik penjualan, produk terlaris, kasir, dan riwayat chatbot lengkap dengan sumber jawabannya.
Keamanan: password di-hash dengan scrypt, sesi cookie httpOnly yang bisa dicabut, akun terkunci 15 menit setelah 5 kali gagal login, dan semua query memakai parameter.

Hasil

Kebutuhan	Solusinya di aplikasi
Pelanggan tidak antre	Pesan dan bayar QRIS dari HP, lalu ambil barang di toko
Stok tetap akurat	Stok berkurang saat pembayaran disetujui dan tidak bisa minus
Pertanyaan yang berulang	Chatbot menjawab stok, harga, dan jam buka dari data toko
Pembukuan	Laporan transaksi, stok, dan pembayaran ke PDF atau Excel

97 unit test di 7 berkas lulus, mencakup login, keranjang, chatbot, laporan, dan validasi upload.
25 skenario black-box disiapkan untuk menguji alur dari sisi pengguna.

Pelajaran

Aturan “jangan percaya browser” ternyata membentuk hampir seluruh desain: harga, stok, dan peran pengguna selalu dibaca ulang di server. Untuk chatbot, bagian tersulit bukan memanggil LLM, tetapi memastikan ia diam saat tidak tahu dan tidak membocorkan data admin ke pembeli. Menggabungkan pencarian kata kunci dan semantik juga terbukti perlu. Kata kunci tepat untuk nama barang yang persis, sedangkan embedding menangkap pertanyaan seperti “alat buat gambar” yang tidak menyebut nama produknya.