EP.3 เชื่อม Supabase + สร้างหมวดหมู่รายรับ–รายจ่าย

หลังจาก EP.2 เราได้สร้าง Front-end ของระบบบันทึกรายรับ–รายจ่ายจากภาพ UI ด้วย Codex กันไปแล้ว ใน EP.3 เราจะเริ่มทำให้ระบบสามารถใช้งานกับข้อมูลจริงได้ โดยเชื่อมต่อกับ Supabase และสร้างระบบจัดการ หมวดหมู่รายรับ–รายจ่าย

Supabase จะเข้ามาทำหน้าที่เป็น Backend และ Database สำหรับจัดเก็บข้อมูลของระบบ ก่อนที่เราจะนำไปต่อยอดกับฟีเจอร์ AI อ่านข้อมูลจากสลิปอัตโนมัติ ในขั้นตอนถัดไป

🚀 ใน EP.3 จะทำอะไรบ้าง?

✅ สร้างและตั้งค่าโปรเจกต์ Supabase
✅ เชื่อมต่อ Front-end เข้ากับ Supabase
✅ ออกแบบ Table สำหรับจัดเก็บหมวดหมู่
✅ เพิ่ม แก้ไข และจัดการข้อมูลหมวดหมู่
✅ ดึงข้อมูลจาก Supabase มาแสดงบน Front-end
✅ เตรียมโครงสร้างข้อมูลสำหรับนำไปใช้กับระบบ AI อ่านสลิป

💡 ทำไมต้องสร้างหมวดหมู่ก่อนทำ AI อ่านสลิป?

เมื่อ AI อ่านข้อมูลจากสลิปได้ เช่น ชื่อร้านค้า จำนวนเงิน และวันที่ ระบบยังต้องรู้ว่ารายการนั้นควรถูกจัดอยู่ในหมวดหมู่ใด เช่น

🍜 อาหารและเครื่องดื่ม
🚗 การเดินทาง
🛍️ ช้อปปิ้ง
🏠 ที่อยู่อาศัย
💼 เงินเดือน / รายได้

การเตรียมระบบหมวดหมู่ไว้ก่อนจึงช่วยให้ในขั้นตอนต่อไป เราสามารถนำข้อมูลที่ AI อ่านจากสลิปมาเชื่อมกับข้อมูลในระบบได้ง่ายขึ้น