Scan to Order.
Hệ thống đặt món qua mã QR tại bàn toàn diện, đồng bộ thời gian thực giữa Khách hàng, Phục vụ và Nhà bếp nhằm tối ưu hóa quy trình vận hành và nâng cao trải nghiệm ăn uống.
Chi tiết dự án (START)
Câu chuyện dự án
Situation - Bối cảnh
Trong các nhà hàng truyền thống, quy trình gọi món thủ công thường xuyên gặp điểm nghẽn vào giờ cao điểm: khách chờ lâu, waiter ghi nhầm đơn, bếp nhận đơn trễ, gây ảnh hưởng trực tiếp đến hiệu suất quán ăn và trải nghiệm dịch vụ khách hàng.
Task - Nhiệm vụ
Xây dựng hệ thống đặt món tự động đầu-cuối (end-to-end) hoạt động trực tiếp trên trình duyệt di động mà không cần cài app, đồng bộ real-time giữa Khách hàng, Phục vụ, Nhà bếp, đồng thời đảm bảo bảo mật cô lập phiên (Session Isolation) giữa các lượt khách và tự động tạo mã QR thanh toán VietQR qua cổng SePay.
Action - Quyết định & Thực thi
Tôi đã thiết kế hệ thống chia làm 3 phân hệ tương tác riêng biệt: Khách hàng (Mobile-first), Phục vụ (Dashboard quản lý bàn), và Bếp (Board trạng thái chế biến). Sử dụng Socket.io để truyền phát sự kiện đồng bộ tức thời. Triển khai cơ chế bảo mật 'Session Isolation' bằng cách gán mã Session ID độc nhất cho mỗi lượt quét QR để cô lập giỏ hàng và đơn hàng giữa các lượt ngồi bàn ăn. Ngoài ra, tích hợp trợ lý ảo AI RAG sử dụng model nhúng BGE-M3 để tư vấn món ăn phù hợp với ngân sách của khách và kết nối webhook VietQR để xác thực giao dịch tự động.
Result - Kết quả đạt được
Hệ thống đã vận hành hoàn chỉnh với luồng hoạt động khép kín từ đặt món đến thanh toán. Cơ chế Socket.io giúp đồng bộ đơn hàng chỉ trong dưới 1 giây, loại bỏ hoàn toàn hiện tượng trễ. Hệ thống cô lập phiên hoạt động ổn định, ngăn chặn 100% việc rò rỉ thông tin giữa các lượt khách. Quy trình thanh toán tự động qua VietQR giúp giảm 70% thời gian xử lý thủ công của thu ngân.
Takeaway - Bài học kinh nghiệm
Dự án giúp tôi làm chủ kỹ năng thiết kế hệ thống thời gian thực quy mô trung bình và giải quyết bài toán đồng bộ trạng thái phức tạp (State Machine). Tôi cũng rút ra bài học sâu sắc về tầm quan trọng của bảo mật dữ liệu ở mức phiên (Session-level security) và cách tối ưu hóa hiệu năng cơ sở dữ liệu PostgreSQL khi xử lý nhiều truy vấn đồng thời trong môi trường nhà hàng bận rộn.
Preview & Trải nghiệm thực tế
Mỗi màn hình đi kèm phần mô tả chi tiết để làm rõ luồng hoạt động và trải nghiệm người dùng thực tế.
màn hình chính
Giao diện trang chủ chào đón thực khách ngay sau khi quét mã QR tại bàn, hiển thị lời mời món ăn đặc trưng nổi bật của quán.
hình ảnh menu
Thực đơn trực quan dạng lưới hỗ trợ lọc theo danh mục, hiển thị món ăn đi kèm hình ảnh sắc nét, giá bán và các nhãn trạng thái món ăn.
màn hình detail món ăn
Giao diện chi tiết món ăn cho phép thực khách tùy chỉnh kích cỡ (Size), thêm món đi kèm (Toppings) và nhập ghi chú chế biến gửi xuống bếp.
màn hình giỏ hàng
Giỏ hàng thông minh tự động cộng dồn số lượng, tính toán tổng tiền tạm tính và cho phép cập nhật số lượng món ăn trực quan.
màn hình qr thanh toán
Mã QR thanh toán động VietQR tự động tích hợp chính xác số tiền cần trả và mã đơn hàng của phiên (Session) hiện tại thông qua cổng SePay.
màn hình xác nhận thanh toán
Màn hình chờ giao dịch đang được xử lý bởi backend thông qua webhook ngân hàng hoặc kiểm tra định kỳ (polling), hiển thị loader vòng tròn.
xác nhận gọi món thành công
Màn hình xác nhận đặt món thành công đi kèm thanh tiến trình trực quan giúp thực khách dễ dàng theo dõi thời gian thực trạng thái nấu nướng.
hình ảnh chatbot popup
Trợ lý ảo Bé Bảy (AI Chatbot) sử dụng cơ sở tri thức RAG để tư vấn món ăn phù hợp với khẩu vị, tự động bỏ giỏ và kích hoạt SOS gọi nhân viên.
màn hình đánh giá
Trang thu thập đánh giá ẩn danh của thực khách sau khi thanh toán thành công, giúp nhà quản lý nắm bắt chất lượng món ăn và phục vụ tức thì.
màn hình gửi yêu cầu
Giao diện gửi yêu cầu phục vụ nhanh tại bàn như gọi đá, đũa ăn, nước lọc, hoặc nút SOS hỗ trợ khẩn cấp, gửi tín hiệu Socket.io tức thời.
màn hình nhắc nhở
Thông báo cảnh báo bàn trống tự động xuất hiện khi bàn ăn không phát sinh thao tác trong thời gian dài, bảo vệ phiên hoạt động của khách.
cook trang chủ
Bảng điều khiển của nhà bếp hiển thị trực quan hàng đợi các món cần nấu phân chia theo thứ tự thời gian đặt, hỗ trợ cập nhật một chạm.
waiter trang chủ
Sơ đồ bàn thời gian thực dành cho nhân viên phục vụ, hiển thị trạng thái màu sắc của bàn (đang trống, đang ăn, chờ thanh toán, SOS).
waiter màn hình chi tiết bàn
Bảng điều khiển chi tiết bàn ăn của Waiter cho phép cộng thêm món, gộp/chuyển bàn và xác nhận phê duyệt thanh toán tiền mặt thủ công.
Trải nghiệm dự án
Source Code & Demo
Xem toàn bộ mã nguồn trên GitHub hoặc mở bản demo hoạt động thực tế.