Slip-Buu

เจ้าของผลงานเล่าไว้แบบนี้

Slip scan for customer https://slip-buu.vercel.app # Slip-Buu — ระบบสแกนสลิปผ่าน LINE LIFF ระบบสแกนสลิปโอนเงินสำหรับลูกค้าผ่าน LINE Official Account โดยลูกค้าเข้าใช้งานผ่าน Rich Menu เท่านั้น ไม่สามารถเปิดผ่าน Browser โดยตรงได้ --- ## Tech Stack | Layer | เทคโนโลยี | |---|---| | Frontend (LIFF) | React + Vite + TailwindCSS | | Backend API | Node.js + Express | | ฐานข้อมูล | Supabase (PostgreSQL) | | AI / OCR | Google Gemini 2.5 Flash (Vision) | | Hosting Backend | Railway | | Hosting Frontend | Vercel | | LINE Integration | LINE LIFF SDK + Messaging API | --- ## สถาปัตยกรรมระบบ ``` [LINE OA Rich Menu] │ ▼ [LINE LIFF App - React] ←── ตรวจสอบ liff.isInClient() เสมอ │ ├── อัพโหลด / ถ่ายรูปสลิป │ ▼ [Node.js API Server] │ ├── ส่งรูปไป Gemini 2.5 Flash → แยก OCR ข้อมูลสลิป ├── ตรวจสอบสลิปซ้ำ (image hash + reference no.) ├── บันทึกลง Supabase └── ส่งสรุปผ่าน LINE Messaging API (Target Picker) ``` --- ## โครงสร้างโฟลเดอร์ ``` slip-buu/ ├── frontend/ # LIFF React App │ ├── src/ │ │ ├── pages/ │ │ │ ├── Home.jsx # หน้าหลัก: ถ่าย/เลือกรูป + อัพโหลดหลายสลิป + สรุปผล inline │ │ │ └── Report.jsx # รายงาน + กดดูรายละเอียด/แก้ไขสลิป │ │ ├── components/ui/ │ │ │ └── button.jsx │ │ ├── context/ │ │ │ └── ToastContext.jsx # ระบบ toast แจ้งเตือน │ │ ├── hooks/ │ │ │ └── useLiff.js # LIFF init + guard │ │ ├── lib/ │ │ │ ├── api.js # fetch helper + แนบ

โดย pipo0ntour · ดูโพสต์ต้นทาง