บันทึกรายรับ-รายจ่าย

เว็บแอปจดเงินเข้าออกรายเดือน ใช้ตั้งงบรวมและงบรายหมวด ลงรายการประจำให้อัตโนมัติ จดผ่านแชท LINE ได้ และใช้ได้ตอนไม่มีเน็ต

เปิดใช้: expense-tracker-seven-red-52.vercel.app (ฟรี ไม่มีโฆษณา ใช้ได้ทั้งมือถือและคอม)

เริ่มใช้

1. เปิดลิงก์ด้านบน
2. กด เข้าสู่ระบบด้วย LINE หรือกด สมัครสมาชิก ด้วยอีเมลกับรหัสผ่าน (อย่างน้อย 6 ตัว)
3. ระบบพาเข้าหน้าหลักทันที ไม่ต้องรอยืนยันอีเมล

ถ้า login ด้วย LINE ระบบจะเปิดหน้าเพิ่มเพื่อนบอทให้ด้วย พอเพิ่มเพื่อนแล้วก็จดผ่านแชทได้เลย ส่วนคนที่สมัครด้วยอีเมล ควรใช้อีเมลจริง เพราะลิงก์รีเซ็ตรหัสผ่านจะส่งไปที่อีเมลนั้น

จดผ่านแชท LINE

พิมพ์รายการกับจำนวนเงินในแชทบอท ข้อความเดียวใส่ได้หลายรายการ (ไม่เกิน 10)

ค่าข้าวตอนกลางวัน 50 บาท ค่าน้ำ 100 บาท ค่าเน็ต 20 บาท

บอทจะตอบเป็นการ์ดที่แยกรายการพร้อมหมวดที่เดาได้ แล้วถามว่าเป็นของวันไหน ให้กด วันนี้, เมื่อวาน หรือ เลือกวัน… รายการที่บันทึกแล้วจะขึ้นในหน้าเว็บทันที

ระบุวันในข้อความ: ถ้าพิมพ์วันไว้ต้นข้อความ บอทจะบันทึกทันทีโดยไม่ถาม

พิมพ์	ได้วันที่
เมื่อวาน ค่าแท็กซี่ 120	เมื่อวาน (ใช้ วันนี้ และ เมื่อวานซืน ได้ด้วย)
12/10 ค่าข้าว 50	12 ต.ค. ปีนี้ ถ้าวันนั้นยังไม่ถึง จะนับเป็นปีที่แล้ว
12 ต.ค. ค่าข้าว 50	เดือนพิมพ์แบบ ต.ค., ตค หรือ ตุลาคม ก็ได้
12/10/2569 ค่าข้าว 50	ใส่ปีเป็น พ.ศ. หรือ ค.ศ. ก็ได้

วันในอนาคตจะบันทึกไม่ได้

จำนวนเงิน: เขียนได้หลายแบบ เช่น 50, 50บ., 50.-, ฿50, 1,200, 1.5k (เท่ากับ 1,500) และเลขไทย ๕๐

รายรับ: บอทนับเป็นรายรับเมื่อคำบอกหมวดรายรับ เช่น เงินเดือน 25000 หรือ โบนัส 5000 หรือเมื่อขึ้นต้นด้วย ได้ / รับ เช่น ได้ค่าจ้าง 3000 หรือเมื่อมี + หน้าตัวเลข เช่น +500 ขายของ

คำที่บอทไม่รู้จัก: เช่น ค่าแมว 300 บอทจะให้คุณเลือกหมวดเอง แล้วจำคำนั้นไว้ ครั้งหน้าพิมพ์คำเดิมจะเข้าหมวดเดิมโดยไม่ถาม ถ้าบอทเดาหมวดผิด กด แก้หมวด บนการ์ด บอทก็จะจำหมวดที่แก้ไว้เหมือนกัน (แต่ละคนมีคำที่สอนบอทแยกกัน)

ย้อนรายการ: กด เลิกทำ บนการ์ด รายการทั้งหมดจากข้อความนั้นจะถูกลบ ปุ่มบนการ์ดกดได้ภายใน 7 วัน

คำสั่ง:

• สรุป หรือ เดือนนี้ ดูรายรับ รายจ่าย ยอดคงเหลือ และงบที่เหลือของเดือนนี้
• วิธีใช้ ดูตัวอย่างการพิมพ์

บอทรับข้อความได้คนละ 20 ครั้งต่อนาทีและ 300 ครั้งต่อวัน (นับรวมการกดปุ่ม) ถ้าเกิน บอทจะเตือนครั้งเดียวแล้วไม่ตอบจนกว่าจะเริ่มนับรอบใหม่ บอทตอบเฉพาะแชทส่วนตัว ถ้าส่งในกลุ่มบอทจะไม่ตอบ

มีบัญชีอีเมลอยู่แล้ว: อย่ากด login ด้วย LINE เพราะระบบจะสร้างบัญชีใหม่ที่ว่างเปล่า ให้ login ด้วยอีเมล แล้วไปที่ ตั้งค่า → LINE ใส่รหัสผ่านแล้วกด เชื่อมบัญชี LINE หลังจากนั้นรายการที่จดในแชทจะเข้าบัญชีเดิม

ลองเล่น 5 นาที

ทำตามลำดับนี้แล้วจะเห็นฟีเจอร์หลักครบ

#	ทำ	จะเห็น
1	ส่วน งบประมาณ → กด ตั้งงบ → ใส่ 15000 → ติ๊ก "ใช้เป็นงบเริ่มต้นทุกเดือน" → บันทึก	แถบงบ และ "ใช้ได้อีกวันละ ... ฿" นับเป็นใบแบงก์
2	กด จดรายการ (มือถือ: ปุ่มเขียวล่างจอ / คอม: ปุ่มเขียวท้ายคอลัมน์ซ้าย) → รายจ่าย 60 หมวด อาหาร บันทึก กาแฟ → กด เพิ่มรายการ แล้วทำซ้ำอีกครั้ง	ปุ่มจดด่วน กาแฟ 60 ฿ ขึ้นข้างปุ่มจดรายการ
3	แตะรายการใดก็ได้ → กด ลบ แล้วกด "เลิกทำ" ที่ด้านล่างจอ	รายการกลับมา
4	เปลี่ยนวันที่ในฟอร์มเป็นเดือนที่แล้ว แล้วเพิ่มรายจ่ายสัก 2–3 รายการ	ส่วน เทียบกับเดือนก่อน และกราฟ 6 เดือน
5	ส่วน หมวดหมู่ → กด ตั้งงบหมวด → ใส่ อาหาร 3000	แถบคืบหน้าของหมวด แตะหมวดเพื่อดูเฉพาะรายการในหมวดนั้น
6	ส่วน รายการประจำ (กดเพื่อเปิด) → เพิ่มรายการประจำ "ค่าเน็ต" 599 ทุกวันที่ 1	แอปลงรายการเดือนนี้ให้เอง มีไอคอนลูกศรวนต่อท้าย
7	พิมพ์ ค่าข้าว 50 ค่าน้ำ 100 ในแชทบอท LINE แล้วกด วันนี้	สองรายการขึ้นในหน้าเว็บ
8	กดไอคอนพระจันทร์ มุมขวาบน	โหมดมืด

บนมือถือ ลองติดตั้งเป็นแอป (วิธีติดตั้ง) แล้วเปิดโหมดเครื่องบิน แอปยังเปิดและจดรายการได้ พอกลับมาออนไลน์ ข้อมูลจะซิงค์ขึ้นไปเอง

ทำอะไรได้บ้าง

• จดรายรับ-รายจ่าย เลือกหมวด ย้อนวันที่ได้ และเขียนบันทึกสั้นๆ ได้ ทั้งในเว็บและในแชท LINE
• ตั้งงบรายเดือน จะใช้ค่าเดียวทุกเดือนหรือตั้งแยกเดือนก็ได้
• ตั้งงบรายหมวด เช่น อาหาร 6,000 ฿
• ตั้งรายการประจำ เช่น ค่าเช่า ค่าเน็ต เงินเดือน แอปลงให้ทุกเดือน
• เทียบรายจ่ายกับเดือนก่อน และบอกหมวดที่เปลี่ยนมากที่สุด
• ดูกราฟสัดส่วนตามหมวด และรายจ่าย 6 เดือนย้อนหลังเทียบกับงบ
• จดด่วนจากปุ่มลัดของรายการที่จดบ่อย และกดเลิกทำได้ทุกครั้งที่เพิ่มหรือลบ
• ค้นหารายการ และดาวน์โหลดเป็น CSV เปิดใน Excel ได้
• ใช้ตอนออฟไลน์ได้ ติดตั้งบนมือถือได้ และมีโหมดมืด

วิธีใช้หน้าเว็บ

เข้าสู่ระบบ

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

เลือกเดือน

ปุ่ม ‹ › ด้านบนเลื่อนไปเดือนก่อนหรือเดือนถัดไป ยอดคงเหลือ งบ กราฟ และรายการจะแสดงเฉพาะเดือนที่เลือก กด "กลับไปเดือนปัจจุบัน" เพื่อกลับมาเดือนนี้

ตั้งงบประมาณ

ในส่วน งบประมาณ กด "ตั้งงบ" แล้วใส่จำนวนเงิน ติ๊ก "ใช้เป็นงบเริ่มต้นทุกเดือน" ถ้าอยากให้ทุกเดือนใช้งบเท่ากัน ถ้าไม่ติ๊ก งบนั้นจะใช้เฉพาะเดือนที่เลือก

แถบงบบอกสถานะทั้งสีและข้อความ คือ อยู่ในงบ (เขียว), ใกล้เต็มงบ เมื่อใช้เกิน 80% (ทอง) และ เกินงบแล้ว (แดง) ในเดือนปัจจุบัน ขีดดำบนแถบคือวันนี้ ใช้ดูว่าเงินออกเร็วกว่าวันที่ผ่านไปหรือเปล่า แอปบอกด้วยว่าเหลือใช้ได้อีกวันละเท่าไหร่

จดรายการ

กด จดรายการ เลือก รายจ่าย หรือ รายรับ ใส่จำนวนเงิน (ทศนิยมได้ เช่น 45.50) แตะเลือกหมวด เปลี่ยนวันที่ถ้าเป็นรายการย้อนหลัง จะใส่บันทึกหรือไม่ใส่ก็ได้ แล้วกด เพิ่มรายการ แอปจำประเภท หมวด และวันที่ไว้ให้ จดหลายรายการติดกันจึงเร็วขึ้น

รายการที่หมวด จำนวนเงิน และบันทึกตรงกัน ถ้าจดซ้ำตั้งแต่ 2 ครั้งใน 60 วัน จะกลายเป็นปุ่ม จดด่วน ข้างปุ่มจดรายการ กดครั้งเดียวลงรายการของวันนี้

แตะรายการเพื่อแก้ไขหรือลบ ช่องวันที่มีปุ่ม วันนี้ / เมื่อวาน ให้กดเร็ว ทุกครั้งที่เพิ่มหรือลบรายการ ปุ่ม "เลิกทำ" จะขึ้นที่ล่างจอประมาณ 5 วินาที

ตั้งงบรายหมวด

ในส่วน หมวดหมู่ กด "ตั้งงบหมวด" แล้วใส่งบเฉพาะหมวดที่อยากคุม หมวดที่เว้นว่างไว้จะไม่จำกัดงบ งบรายหมวดใช้ค่าเดียวทุกเดือน หมวดที่ใกล้เต็มหรือเกินงบจะขึ้นบนสุด

ตั้งรายการประจำ

ใช้กับรายการที่เกิดทุกเดือน เช่น ค่าห้อง ค่าโทรศัพท์ หรือเงินเดือน กดหัวข้อ รายการประจำ แล้วกด "เพิ่มรายการประจำ" ใส่ชื่อ จำนวนเงิน หมวด และวันที่ของทุกเดือน ถ้าเดือนนี้จดรายการนั้นไปแล้ว ให้ติ๊ก "เริ่มเดือนหน้า" จะได้ไม่ลงซ้ำ

พอถึงวันที่ตั้งไว้ แอปจะลงรายการให้ตอนคุณเปิดแอป

• ถ้าไม่ได้เปิดแอปหลายเดือน แอปจะลงย้อนหลังให้ไม่เกิน 12 เดือน
• ถ้าตั้งวันที่ 29–31 เดือนที่ไม่มีวันนั้นจะลงวันสุดท้ายของเดือนแทน
• ถ้ากดหยุดชั่วคราวแล้วเปิดใหม่ แอปจะไม่ลงเดือนที่หยุดไว้ย้อนหลัง
• การแก้ไขมีผลตั้งแต่เดือนถัดไป และการลบไม่ลบรายการที่ลงไปแล้ว

กราฟและสรุป

• เทียบกับเดือนก่อน บอกว่ารายจ่ายเพิ่มหรือลดกี่บาทและกี่เปอร์เซ็นต์ พร้อม 3 หมวดที่เปลี่ยนมากที่สุด ถ้าเป็นเดือนปัจจุบัน แอปจะเทียบช่วงวันเดียวกันของเดือนก่อน เช่น วันที่ 1–15 กับ 1–15
• หมวดหมู่ บอกยอดและสัดส่วนของแต่ละหมวด
• รายจ่ายรายเดือน เทียบ 6 เดือนล่าสุด เส้นประคืองบ แท่งที่เกินงบเป็นสีแดง แตะแท่งกราฟเพื่อไปดูเดือนนั้น

ค้นหาและส่งออก

ในส่วน รายการ กรองดูทั้งหมด เฉพาะรายจ่าย หรือเฉพาะรายรับได้ และค้นจากชื่อหมวด บันทึก หรือจำนวนเงินได้ กด CSV เพื่อดาวน์โหลดรายการของเดือนนั้น ส่วนการดาวน์โหลดทุกเดือนอยู่ที่หน้าตั้งค่า

ใช้ตอนไม่มีเน็ต

คุณจดรายการได้ตามปกติ แอปจะขึ้นแถบ ออฟไลน์อยู่ แล้วซิงค์ให้เมื่อกลับมาออนไลน์ เครื่องนั้นต้องเคยเปิดแอปตอนออนไลน์มาก่อนอย่างน้อยครั้งหนึ่ง การจดผ่านแชท LINE ต้องใช้เน็ต

ติดตั้งเป็นแอปบนมือถือ

• Android (Chrome): กดเมนู ⋮ แล้วเลือก "ติดตั้งแอป" หรือ "เพิ่มลงในหน้าจอหลัก"
• iPhone (Safari): กดปุ่มแชร์ แล้วเลือก "เพิ่มไปยังหน้าจอโฮม"

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

ตั้งค่าบัญชี

กดปุ่มเฟืองมุมขวาบน

• โปรไฟล์ เปลี่ยนชื่อที่แสดง และดูสถานะยืนยันอีเมล
• LINE เชื่อมหรือยกเลิกการเชื่อม LINE และมีปุ่มเพิ่มเพื่อนบอท การเชื่อมต้องใส่รหัสผ่านก่อน บัญชีที่ login ด้วย LINE อย่างเดียวยกเลิกการเชื่อมไม่ได้ เพราะ LINE เป็นทางเข้าบัญชีทางเดียว
• เปลี่ยนรหัสผ่าน ต้องใส่รหัสผ่านปัจจุบัน (เฉพาะบัญชีอีเมล)
• ส่งออกข้อมูลทั้งหมด ดาวน์โหลดทุกรายการเป็น CSV
• ลบบัญชี ลบบัญชีและข้อมูลทั้งหมดถาวร รวมถึงการเชื่อม LINE และคำที่สอนบอท ต้องพิมพ์ "ลบบัญชี" และต้องต่อเน็ต บัญชีอีเมลต้องใส่รหัสผ่านด้วย ส่วนบัญชี LINE ถ้า login มานานกว่า 4 นาที แอปจะให้กด เข้าสู่ระบบด้วย LINE อีกครั้ง ก่อน

ข้อมูลของคุณ

• รายการของคุณเห็นได้เฉพาะบัญชีของคุณ ผู้ใช้คนอื่นอ่านไม่ได้
• ข้อมูลเก็บบน Google Firebase จะเปลี่ยนเครื่องหรือล้างเบราว์เซอร์ก็ได้ แค่ login บัญชีเดิม
• ลบบัญชีได้ที่ ตั้งค่า → ลบบัญชี และส่งออกเป็น CSV ได้ที่หน้าตั้งค่า
• รายการที่คุณพิมพ์หาบอท ระบบเก็บไว้ให้ปุ่มบนการ์ดใช้ได้ 7 วัน พอหมดอายุแล้ว ระบบจะลบตอนคุณส่งข้อความครั้งถัดไป หรือตอนคุณลบบัญชี

นี่เป็นโปรเจกต์ส่วนตัว ไม่ใช่บริการเชิงพาณิชย์ อย่าใส่ข้อมูลอ่อนไหว เช่น เลขบัญชีธนาคารหรือเลขบัตร ในช่องบันทึก

คำถามที่พบบ่อย

LINE ที่คุณใช้แชทยังไม่ได้ผูกกับบัญชีในแอป ถ้าคุณใช้บัญชีอีเมล ให้ไปที่ ตั้งค่า → LINE → เชื่อมบัญชี LINE ถ้ายังไม่มีบัญชี ให้กด เข้าสู่ระบบด้วย LINE ที่หน้าเว็บ

LINE หนึ่งบัญชีผูกกับบัญชีแอปได้บัญชีเดียว ส่วนใหญ่เกิดจากเคยกด login ด้วย LINE จนได้บัญชีแยกมาอีกบัญชี ให้ login ด้วย LINE เข้าบัญชีนั้น แล้วลบบัญชีนั้นทิ้งที่หน้าตั้งค่า จากนั้นกลับมาเชื่อม LINE กับบัญชีอีเมลใหม่

ดูในโฟลเดอร์ Spam ก่อน ถ้าไม่เจอ ไปที่ ตั้งค่า → ส่งอีเมลยืนยัน ระหว่างนั้นแอปใช้ได้ทุกฟีเจอร์

ได้ login บัญชีเดียวกันบนมือถือและคอมได้ ข้อมูลอัปเดตตรงกันทันที

ตอนนี้รองรับเฉพาะเงินบาท

เปิด Issue ใน repo นี้ได้ บอกด้วยว่าใช้มือถือหรือคอม และเบราว์เซอร์อะไร

---

สำหรับนักพัฒนา

เทคโนโลยี

หน้าเว็บใช้ React 19, React Router 7, Bootstrap 5, Chart.js, Firebase Auth กับ Firestore ไอคอนจาก Lucide และฟอนต์ Anuphan กับ Trirong ผ่าน Fontsource

ฝั่ง server (LINE Login และบอท) อยู่ในโฟลเดอร์ api/ เป็น Vercel Functions แบบ ESM (.mjs) ใช้ firebase-admin ออก custom token และเขียน Firestore บอทตอบด้วย reply message ของ LINE อย่างเดียว ไม่ใช้ push จึงไม่กินโควตาข้อความ ตัวแยกข้อความใช้กฎกับพจนานุกรมคำ (api/_lib/parse.mjs, dictionary.mjs) ไม่ได้ใช้ AI

รันบนเครื่อง

ต้องใช้ Node.js 24 (repo ตรึงไว้ใน .nvmrc และ engines ถ้าใช้ nvm หรือ fnm ให้รัน nvm use หรือ fnm use)

npm install
npm start             # หน้าเว็บที่ http://localhost:3000 (ไม่มี /api)
npx vercel dev        # หน้าเว็บพร้อม /api (ใส่ค่าลับไว้ใน .env.local)
npm test              # เทสต์หน้าเว็บ (Jest)
npm run test:server   # เทสต์ฝั่ง server (node --test)
npm run build         # build สำหรับขึ้นเว็บจริง

ถ้าจะลอง webhook บนเครื่อง ต้องเปิด tunnel เช่น cloudflared tunnel --url http://localhost:3000 แล้วชี้ Webhook URL ไปที่ tunnel

Vercel build ด้วย CI=true ESLint warning จะทำให้ build พัง ให้รัน npm run build ก่อน push ทุกครั้ง

ตั้งค่า Firebase

1. สร้างโปรเจกต์ที่ Firebase Console เปิด Authentication แบบ Email/Password และสร้าง Firestore Database
2. คัดลอก config ของเว็บแอปไปใส่ใน src/firebase/config.js
3. คัดลอก firestore.rules ไปวางที่ Firestore → Rules แล้วกด Publish ถ้าข้ามขั้นนี้ ข้อมูลของผู้ใช้แต่ละคนจะไม่ถูกแยกจากกัน และการลบบัญชีจะพัง
4. สร้าง composite index 2 ตัวที่ Firestore → Indexes: transactions (userId ↑, date ↑) และ lineDrafts (userId ↑, expiresAt ↑)
5. สร้างคีย์ service account ที่ Project settings → Service accounts → Generate new private key (อย่าเก็บไฟล์นี้ไว้ใน repo)

ตั้งค่า LINE

1. สร้าง LINE Official Account ที่ manager.line.biz แล้วเปิด Messaging API ตอนเปิดจะต้องเลือก Provider
2. ใน OA Manager ปิด Auto-reply messages และ Greeting messages เปิด Webhook และปิดการให้บัญชีเข้ากลุ่ม
3. ที่ LINE Developers Console สร้าง LINE Login channel (App type: Web app) ใต้ Provider เดียวกับบอท ถ้าคนละ Provider ระบบจะไม่รู้ว่าแชทเป็นของบัญชีไหน และย้าย channel ภายหลังไม่ได้
4. LINE Login channel → แท็บ LINE Login → Callback URL ใส่ https://<โดเมน>/api/auth/line/callback ของทุกโดเมนที่ใช้ (production, URL ของ branch preview และ http://localhost:3000) LINE ไม่รับ wildcard จึงต้องใส่ทีละ URL ให้ตรงทุกตัวอักษร
5. LINE Login channel → Linked LINE Official Account เลือก OA ของบอท (ถ้าไม่ผูก หน้าเพิ่มเพื่อนจะไม่ขึ้นตอน login)
6. Messaging API channel → Webhook URL ใส่ https://<โดเมน>/api/line/webhook กด Verify แล้วเปิด Use webhook และออก Channel access token (long-lived)
7. ก่อนเปิดให้คนอื่นใช้ เปลี่ยน LINE Login channel จาก Developing เป็น Published ระหว่างที่ยังเป็น Developing มีแค่ admin ของ channel ที่ login ได้

Environment Variables (Vercel)

ชื่อ	ค่า
LINE_LOGIN_CHANNEL_ID / LINE_LOGIN_CHANNEL_SECRET	จาก LINE Login channel
LINE_CHANNEL_SECRET / LINE_CHANNEL_ACCESS_TOKEN	จาก Messaging API channel
FIREBASE_SERVICE_ACCOUNT	เนื้อหาไฟล์ JSON ของ service account ทั้งไฟล์
AUTH_COOKIE_SECRET	สุ่มด้วย node -e "console.log(require('crypto').randomBytes(32).toString('base64url'))"
REACT_APP_LINE_ADD_FRIEND_URL	ลิงก์เพิ่มเพื่อนบอท เช่น https://line.me/R/ti/p/@xxxx
LINE_LIMIT_PER_MINUTE / LINE_LIMIT_PER_DAY	ไม่ใส่ก็ได้ ค่าเริ่มต้น 20 และ 300

ค่า REACT_APP_* ถูกฝังตอน build ถ้าแก้ env ต้อง redeploy ใหม่

ถ้าอยากปรับเกณฑ์จำกัดของผู้ใช้คนเดียว ให้เพิ่ม field limitPerDay หรือ limitPerMinute (ตัวเลข) ในเอกสาร lineUsage/{uid} ใน Firestore ถ้าใส่ 0 คนนั้นจะใช้บอทไม่ได้

นำขึ้นเว็บจริง (Vercel)

1. Push ขึ้น GitHub แล้วเลือก repo ที่ vercel.com/new Vercel ตรวจเจอ Create React App เอง
2. ทำขั้นตั้งค่า Firebase และ LINE ด้านบนให้ครบ ใส่ Environment Variables แล้วค่อย deploy
3. ทุกครั้งที่ push ขึ้น main Vercel จะ deploy production ให้เอง ส่วน branch อื่นจะได้ preview

ทุกโดเมนที่ใช้ LINE Login ต้องเพิ่มไว้ 3 ที่ ไม่อย่างนั้น login จะพัง:

ที่	ถ้าลืม
Callback URL ของ LINE Login channel	LINE ขึ้น Invalid redirect_uri
Google Cloud → APIs & Services → Credentials → browser API key → Website restrictions	หน้าเว็บขึ้น auth/requests-from-referer-...-are-blocked
Google Cloud → reCAPTCHA → key ของ App Check → Domains	App Check ขึ้น recaptcha-error

ใช้ URL ที่ไม่เปลี่ยน คือโดเมน production หรือ URL ของ branch (<โปรเจกต์>-git-<branch>-<ทีม>.vercel.app) ส่วน URL ของ deploy แต่ละครั้งที่มีรหัสสุ่มจะใช้ LINE Login ไม่ได้ ถ้าเปิด Vercel Authentication ไว้ใน Deployment Protection ระบบจะกัน webhook ของ LINE ด้วย ต้องปิดก่อนทดสอบบน preview

vercel.json ส่งทุก path ยกเว้น /api ไปที่ index.html ไม่ cache service-worker.js และตั้ง header ความปลอดภัยรวมถึง CSP

ความปลอดภัย

ค่า apiKey ใน src/firebase/config.js เปิดเผยได้ตามปกติของ Firebase ถ้า GitHub แจ้งเตือนเรื่องนี้ไม่ต้องตกใจ ข้อมูลได้รับการป้องกันจาก:

1. Firestore Rules ผู้ใช้อ่านได้เฉพาะข้อมูลตัวเอง และหน้าเว็บเขียนคอลเลกชันของ LINE ไม่ได้
2. การจำกัด API key ตามโดเมน ที่ Google Cloud Console
3. ฝั่ง server ตรวจลายเซ็น webhook ของ LINE, ใช้ state กับ nonce ตอน login, ผูก token กับเบราว์เซอร์ที่กดเริ่ม และบังคับให้ login ใหม่ภายใน 5 นาทีก่อนเชื่อม LINE

ใช้ firebase-admin เวอร์ชัน 13 ไว้ก่อน เพราะเวอร์ชัน 14 ดึง jose@6 ที่เป็น ESM อย่างเดียว และตัวโหลดของ Vercel Functions require() ไม่ได้ ทุก endpoint ใน /api จะพัง api/_lib/deps.test.mjs เทสต์เรื่องนี้ไว้

โครงสร้างโปรเจกต์

src/
├── pages/            Login, Register, Dashboard, Settings, LineCallback (/auth/line)
├── components/       ส่วนประกอบของหน้าเว็บ เช่น BudgetCard, TransactionForm, LineButton, LineSection
├── utils/            โหลดข้อมูล, รายการประจำ, เทียบเดือน, CSV, จัดรูปแบบ, ตัวช่วย LINE Login
├── constants/        รายชื่อหมวดหมู่ (ต้องตรงกับ api/_lib/categories.mjs มีเทสต์คุม)
├── context/          สถานะ login และ toast
└── firebase/         config, ข้อความ error, เพิ่ม/ลบรายการ, เริ่ม LINE Login
api/
├── auth/line/        start.mjs และ callback.mjs ของ LINE Login
├── line/webhook.mjs  รับข้อความจากบอท
└── _lib/             ตรรกะทั้งหมด (parse, bot, messages, store, rateLimit ฯลฯ) และเทสต์ *.test.mjs
public/service-worker.js
firestore.rules

ข้อมูลใน Firestore

Collection	เก็บอะไร
transactions/{id}	userId, type (income/expense), amount, category, date, note, recurringId (ถ้ามาจากรายการประจำ)
budgets/{uid}	budget (งบเริ่มต้น), monthly (งบเฉพาะเดือน เช่น {"2026-10": 15000}), categories (งบรายหมวด)
recurring/{id}	userId, type, amount, category, note, day, startMonth, lastPosted, active
lineLinks/{lineUserId}	การผูก LINE กับบัญชี: userId, displayName, linkedAt
lineDicts/{uid}	คำที่ผู้ใช้สอนบอท: words เช่น {"ค่าแมว": "other"}
lineDrafts/{messageId}	ข้อความจากแชทที่รอเลือกวันหรือหมวด และ id ของรายการที่บันทึกแล้ว (หมดอายุ 7 วัน)
lineUsage/{uid}	ตัวนับจำกัดการใช้บอท (หน้าเว็บอ่านไม่ได้)