Self-Order POS — Sistem Pemesanan Mandiri Restoran

Sebuah sistem kasir (Point of Sale) modern untuk restoran yang memungkinkan pelanggan memesan langsung dari meja mereka melalui web — tanpa perlu memanggil pelayan. Pembayaran digital terintegrasi (QRIS, GoPay), dan staf dapur langsung menerima notifikasi pesanan baru secara otomatis di aplikasi mobile mereka. Dibangun secara menyeluruh (end-to-end) sebagai Full-Stack Engineer (Laravel & Flutter) — merancang backend API yang melayani dua sisi sekaligus: halaman web untuk pelanggan dan aplikasi mobile untuk staf operasional restoran.

---

Ringkasan Proyek

• Kategori: Proyek Pribadi / Portofolio Showcase
• Peran: Full-Stack Engineer (Backend Laravel & Mobile Flutter)
• Teknologi Backend: PHP, Laravel 12, Filament 3 (Admin Panel), Midtrans SDK, Firebase Cloud Messaging, Laravel Sanctum, Simple QR Code
• Teknologi Frontend (Mobile Staff): Flutter, Dart, BLoC Pattern, Firebase Messaging, Bluetooth Thermal Printer, SQLite (Local Storage)
• Teknologi Frontend (Web Customer): Laravel Blade Templates, Tailwind CSS, Vite

---

Latar Belakang & Motivasi

Self-Order POS lahir dari masalah nyata yang sering terjadi di restoran: antrian panjang saat jam sibuk, kesalahan pencatatan pesanan karena komunikasi verbal antara pelanggan dan pelayan, serta keterlambatan informasi dari meja ke dapur. Pada banyak restoran, proses pemesanan masih bergantung sepenuhnya pada interaksi manual — pelanggan harus menunggu pelayan tersedia, pelayan mencatat pesanan lalu menyampaikannya ke dapur, dan jika terjadi kesalahan di tengah jalan, seluruh alur harus diulang.

Self-Order POS direkayasa sebagai solusi operasional restoran sekaligus showcase teknis full-stack:

• Memberikan pelanggan kendali penuh atas pesanan mereka — mulai dari melihat menu, memilih item, hingga membayar — langsung dari smartphone mereka sendiri, tanpa mengunduh aplikasi apapun.
• Mengotomatiskan seluruh alur dari meja ke dapur: begitu pelanggan menyelesaikan pembayaran, pesanan langsung muncul di aplikasi staf sebagai notifikasi real-time, siap untuk diproses.
• Menyediakan visibilitas operasional lengkap bagi pemilik restoran melalui admin dashboard dan laporan penjualan yang dapat diakses kapan saja.

---

Kontribusi Full-Stack Saya

Halaman Web Pemesanan Mandiri untuk Pelanggan

• Merancang alur pemesanan berbasis web yang dapat diakses pelanggan cukup dengan memindai QR code di meja mereka — tanpa login, tanpa unduh aplikasi.
• Membangun halaman menu interaktif yang menampilkan seluruh produk beserta gambar, deskripsi, dan harga, lengkap dengan filter berdasarkan kategori.
• Mengimplementasikan keranjang belanja berbasis sesi (session-based cart) yang terikat per meja, sehingga setiap meja memiliki keranjang belanjanya masing-masing secara independen.
• Menyediakan halaman detail produk di mana pelanggan dapat menambahkan catatan khusus per item (misalnya "tanpa es", "pedas ekstra") sebelum memasukkannya ke keranjang.

Integrasi Pembayaran Digital (Midtrans)

• Mengintegrasikan Midtrans Core API untuk menyediakan pembayaran QRIS dan GoPay langsung di halaman checkout pelanggan.
• Setelah checkout, sistem secara otomatis menampilkan QR code pembayaran yang dapat langsung dipindai pelanggan menggunakan aplikasi e-wallet mereka.
• Mengimplementasikan webhook callback dari Midtrans yang secara otomatis memperbarui status pesanan menjadi "paid" begitu pembayaran dikonfirmasi oleh penyedia layanan pembayaran — tanpa perlu konfirmasi manual dari staf.

Notifikasi Pesanan Real-Time ke Staf (Firebase Cloud Messaging)

• Mengintegrasikan Firebase Cloud Messaging (FCM) sehingga begitu pesanan baru masuk dan pembayaran dikonfirmasi, staf restoran yang sedang login di aplikasi mobile langsung menerima notifikasi push secara instan.
• Memastikan notifikasi tetap diterima bahkan ketika aplikasi dalam keadaan background atau tertutup, sehingga tidak ada pesanan yang terlewat.

Aplikasi Mobile Staf Restoran (Flutter)

• Membangun aplikasi mobile native menggunakan Flutter yang berfungsi sebagai pusat kendali operasional bagi staf restoran.
• Menyediakan tampilan pesanan berdasarkan status (Paid → Cooking → Completed), sehingga staf dapur dan kasir dapat mengelola alur pesanan secara terstruktur.
• Mengimplementasikan fitur cetak struk melalui printer thermal Bluetooth langsung dari aplikasi, tanpa memerlukan perangkat kasir tambahan.
• Menyediakan halaman laporan penjualan yang menampilkan ringkasan pendapatan dan produk terlaris berdasarkan rentang tanggal yang dapat dipilih.

Admin Dashboard (Filament)

• Membangun panel admin berbasis web menggunakan Filament yang memungkinkan pemilik restoran mengelola seluruh data operasional: produk, kategori, meja, pesanan, dan pengguna.
• Menyediakan tampilan monitoring pesanan langsung dari dashboard admin, termasuk status pembayaran dan status pemrosesan setiap pesanan.

Integrasi Webhook Eksternal (n8n Automation)

• Menghubungkan alur checkout dengan platform otomasi n8n melalui webhook, memungkinkan pengiriman notifikasi tambahan (misalnya ke WhatsApp) setiap kali ada pesanan baru — memperluas jangkauan notifikasi di luar aplikasi mobile.

---

Fitur Produk Inti

Pemesanan Mandiri via QR Code

• Pelanggan cukup memindai QR code di meja untuk langsung mengakses menu digital restoran — tanpa perlu login atau mengunduh aplikasi.
• Menu lengkap dengan gambar, deskripsi, harga, dan filter kategori. Pelanggan dapat menambahkan catatan khusus untuk setiap item pesanan.
• Keranjang belanja yang otomatis terpisah per meja, sehingga pesanan dari meja yang berbeda tidak akan tercampur.

Pembayaran Digital Terintegrasi

• Mendukung pembayaran QRIS (semua e-wallet & mobile banking) dan GoPay langsung dari halaman checkout pelanggan.
• QR code pembayaran ditampilkan otomatis setelah checkout, dengan halaman konfirmasi pembayaran yang langsung memperbarui status pesanan secara otomatis.

Notifikasi Pesanan Real-Time

• Staf restoran menerima notifikasi push instan di aplikasi mobile mereka setiap kali ada pesanan baru yang sudah dibayar — memastikan pesanan langsung diproses tanpa delay.

Manajemen Pesanan Staf (Aplikasi Mobile)

• Staf dapat melihat dan mengelola pesanan berdasarkan status: Paid (siap dimasak), Cooking (sedang diproses), dan Completed (selesai).
• Alur status pesanan yang jelas dan terstruktur dari awal hingga akhir.

Cetak Struk via Bluetooth

• Staf dapat mencetak struk pesanan langsung dari aplikasi mobile ke printer thermal Bluetooth — tanpa perangkat kasir tradisional.

Laporan Penjualan

• Ringkasan total pendapatan dan jumlah item terjual berdasarkan rentang tanggal yang dipilih.
• Laporan produk terlaris untuk membantu keputusan bisnis dan pengelolaan stok.

Admin Dashboard

• Panel admin berbasis web untuk mengelola produk, kategori, meja, pesanan, dan pengguna.
• Visibilitas penuh terhadap seluruh operasi restoran dalam satu tempat.

---

Teknologi & Arsitektur (Tech Stack)

Self-Order POS disusun sebagai sistem full-stack yang terdiri dari tiga komponen utama: backend API, halaman web pelanggan, dan aplikasi mobile staf.

• Backend: Laravel 12 sebagai fondasi server-side, menyediakan RESTful API untuk aplikasi mobile sekaligus merender halaman web untuk pelanggan. Laravel Sanctum menangani otentikasi API berbasis token untuk keamanan komunikasi antara aplikasi mobile dan server.
• Admin Panel: Filament 3 sebagai dashboard admin yang langsung terintegrasi dengan backend Laravel, memungkinkan pengelolaan data (produk, kategori, meja, pesanan, pengguna) melalui antarmuka yang intuitif tanpa perlu membangun halaman admin dari awal.
• Pembayaran: Midtrans Core API untuk pemrosesan pembayaran digital (QRIS & GoPay), dengan webhook callback untuk pembaruan status pesanan secara otomatis.
• Notifikasi: Firebase Cloud Messaging (FCM) sebagai penghubung notifikasi real-time antara server dan aplikasi mobile staf.
• Halaman Web Pelanggan: Laravel Blade templates yang dirender di sisi server, memberikan pengalaman pemesanan yang cepat dan ringan tanpa memerlukan framework JavaScript yang berat.
• Aplikasi Mobile Staf: Flutter dengan arsitektur BLoC (Business Logic Component) untuk pemisahan logika bisnis yang bersih, dilengkapi konektivitas Bluetooth untuk printer thermal dan penyimpanan lokal SQLite untuk data pengaturan printer.

---

Tantangan & Solusi

Memastikan Setiap Pesanan Sampai ke Dapur Tanpa Terlewat

• Tantangan: Dalam operasi restoran yang sibuk, pesanan yang masuk harus segera terlihat oleh staf dapur. Jika ada pesanan yang terlewat, pelanggan menunggu terlalu lama dan pengalaman mereka terganggu.
• Solusi: Mengintegrasikan Firebase Cloud Messaging sehingga setiap pesanan baru memicu notifikasi push instan ke seluruh staf yang sedang login — baik saat aplikasi terbuka, di background, maupun tertutup. Ditambah webhook ke n8n untuk notifikasi cadangan melalui saluran lain (seperti WhatsApp).

Menghindari Pesanan Ganda atau Status Pembayaran yang Tidak Akurat

• Tantangan: Webhook pembayaran dari Midtrans bisa dikirim lebih dari sekali (misalnya jika jaringan bermasalah), yang berpotensi menyebabkan pesanan dicatat ganda atau status pembayaran tidak konsisten.
• Solusi: Menggunakan kode pesanan unik sebagai pengenal utama dan memeriksa status pesanan yang sudah ada sebelum melakukan pembaruan — sehingga webhook yang diterima berulang kali hanya diproses sekali dan tidak menghasilkan efek samping ganda.

Menjaga Keranjang Belanja Tetap Terpisah Antar Meja

• Tantangan: Karena halaman web pemesanan diakses banyak pelanggan secara bersamaan dari meja yang berbeda, keranjang belanja harus benar-benar terisolasi agar pesanan antar meja tidak tercampur.
• Solusi: Mengimplementasikan keranjang belanja berbasis sesi yang dikunci berdasarkan nomor meja, sehingga setiap meja memiliki keranjang yang sepenuhnya independen — tidak saling memengaruhi.

Mencetak Struk Tanpa Perangkat Kasir Tradisional

• Tantangan: Banyak restoran kecil tidak memiliki perangkat kasir khusus tetapi tetap memerlukan struk fisik untuk pelanggan dan dokumentasi internal.
• Solusi: Mengintegrasikan konektivitas Bluetooth langsung di aplikasi mobile Flutter, memungkinkan staf mencetak struk ke printer thermal portabel — cukup dengan smartphone dan printer kecil, tanpa investasi perangkat keras kasir yang mahal.

---

Pembelajaran & Poin Kunci

• Merancang dan membangun sistem full-stack end-to-end yang melayani dua tipe pengguna sekaligus (pelanggan via web dan staf via mobile) dari satu backend terpusat — memahami bagaimana satu API harus melayani kebutuhan yang sangat berbeda secara konsisten.
• Mengintegrasikan payment gateway (Midtrans) secara langsung, termasuk menangani webhook callback dan memastikan keandalan pemrosesan pembayaran — sebuah pengalaman yang langsung dapat diterapkan di proyek e-commerce manapun.
• Mempraktikkan integrasi notifikasi push real-time menggunakan Firebase Cloud Messaging lintas platform (server Laravel ke mobile Flutter), memastikan pesan terkirim bahkan saat aplikasi tidak aktif.
• Mendapatkan pengalaman langsung dengan integrasi perangkat keras (printer Bluetooth) melalui aplikasi mobile — memahami tantangan konektivitas perangkat, format data cetak, dan pengelolaan koneksi Bluetooth.
• Membangun admin dashboard operasional yang siap digunakan menggunakan Filament, membuktikan bahwa sistem manajemen data yang lengkap dapat dibangun secara efisien di atas ekosistem Laravel.