Micro-SaaS POS & Kasir UMKM

Selamat datang di Real Project Unggulan. Proyek ini dirancang khusus bagi kamu yang ingin membangun aplikasi komersial nyata (Micro-SaaS) yang bisa langsung kamu jual atau tawarkan ke ribuan pemilik UMKM, warung kopi, atau toko retail di sekitarmu.

Arsitektur Sistem

Aplikasi ini menggunakan arsitektur modern tanpa server fisik (serverless edge) yang bisa berjalan gratis di Cloudflare hingga ribuan transaksi per hari:

1. Frontend Kasir: Antarmuka responsif tablet & mobile (grid produk, pencarian instan, dan kalkulator diskon).
2. Database SQLite (Cloudflare D1): Menyimpan master data barang, harga modal, harga jual, dan riwayat pesanan.
3. Payment Engine (Midtrans): Membuat kode QRIS dinamis yang bisa di-scan dari BCA, GoPay, OVO, ShopeePay, atau Bank Mandiri.
4. Receipt Dispatcher: Merakit format teks struk belanja otomatis yang langsung membuka aplikasi WhatsApp kasir untuk dikirimkan ke nomor pembeli.

Langkah 1: Merancang Skema Database (D1 SQLite)

Buka OpenCode dan berikan prompt arsitektur database berikut:

Buatkan skema database SQLite untuk aplikasi POS Kasir UMKM di file schema.sql:

1. Tabel products:
   - id: integer primary key autoincrement
   - name: text not null
   - sku: text unique
   - price: integer not null (harga jual dalam rupiah)
   - cost_price: integer not null (harga modal)
   - stock: integer default 0
   - category: text
   - image_url: text

2. Tabel transactions:
   - id: text primary key (format TRX-YYYYMMDD-XXXX)
   - total_amount: integer not null
   - payment_method: text (cash / qris / transfer)
   - status: text (paid / pending / cancelled)
   - customer_name: text
   - customer_phone: text
   - created_at: datetime default current_timestamp

3. Tabel transaction_items:
   - id: integer primary key autoincrement
   - transaction_id: text foreign key
   - product_id: integer
   - product_name: text
   - quantity: integer
   - unit_price: integer
   - subtotal: integer

Langkah 2: Membangun Antarmuka Kasir (UI Grid & Cart)

Minta asisten membuat halaman kasir utama dengan layout dua kolom (layar laptop) atau tab bawah (layar HP):

Buatkan halaman kasir interaktif di src/pages/pos.astro:
- Sisi kiri: Grid kartu produk dengan fitur live-search nama barang dan filter kategori tombol pill.
- Sisi kanan: Panel keranjang belanja aktif.
  - Menampilkan daftar barang yang dipilih, tombol (+) dan (-), subtotal, dan pajak/diskon jika ada.
  - Tombol Bayar Tunai (dengan kalkulator kembalian instan).
  - Tombol Bayar QRIS (memunculkan modal barcode).
  - Tombol Kirim Struk WhatsApp (meminta nomor WA pelanggan).
Pastikan desain menggunakan tema bersih, font JetBrains Mono untuk angka, dan interaksi tanpa reload halaman.

Langkah 3: Integrasi Pembayaran QRIS

Untuk menerima pembayaran nontunai, kita menghubungkan API Midtrans Snap:

Buatkan endpoint API backend di src/pages/api/create-qris.ts:
- Menerima payload: transactionId, grossAmount, customerName.
- Menghubungi Midtrans API dengan Server Key dari environment variable MIDTRANS_SERVER_KEY.
- Mengembalikan snapToken dan redirectUrl untuk menampilkan barcode QRIS langsung di layar kasir.
- Simpan status transaksi di database D1 sebagai 'pending'.

Langkah 4: Format Struk Digital WhatsApp

Daripada membeli printer thermal yang mahal, UMKM modern lebih menyukai struk digital:

// Cuplikan generator URL WhatsApp Struk
function generateWhatsAppReceipt(order) {
  const text = `
*--- STRUK PEMBELIAN ---*
*TOKO MAJU JAYA BERKAH*
No: ${order.id}
Tgl: ${new Date().toLocaleDateString('id-ID')}
-------------------------
${order.items.map(it => `${it.name} x${it.qty} = Rp ${it.subtotal.toLocaleString('id-ID')}`).join('\n')}
-------------------------
*TOTAL: Rp ${order.total.toLocaleString('id-ID')}*
Metode: ${order.paymentMethod.toUpperCase()}
Status: LUNAS

Terima kasih atas kunjungan Anda!
  `.trim();

  return `https://wa.me/${order.customerPhone}?text=${encodeURIComponent(text)}`;
}

Unduh Starter Kit & Source Code