ภาพรวมระบบ Time Clock → Google Calendar

1. ขอบเขตระบบ

ระบบที่ออกแบบนี้ครอบคลุมเฉพาะฝั่ง Frontend โดยใช้เทคโนโลยี:

• Framework: Next.js v14 (App Router)
• ภาษา: JavaScript (ESM)
• รูปแบบการสื่อสารกับ Google Calendar ผ่าน API

ผู้พัฒนาคือ Dev เพียง 1 คน สามารถติดตั้ง ทดสอบ และ deploy ได้ด้วยตนเอง

2. วัตถุประสงค์

สร้างฟอร์มลงเวลา (Time Clock) แบบง่าย โดยให้ผู้ใช้งานเลือก:

• ชื่อ-นามสกุล
• รหัสพนักงาน (employeeCode)
• ชนิดการลงเวลา: เข้างาน (Check-in) หรือ ออกงาน (Check-out)

เมื่อกดยืนยัน ระบบจะ:

• ดึงเวลาปัจจุบัน (timestamp) ฝั่ง server (Asia/Bangkok)
• ส่งข้อมูลไปบันทึกเป็น Event ใหม่ใน Google Calendar ที่เตรียมไว้

3. โครงสร้างข้อมูลที่ส่งไป Google Calendar

Field	Type	หมายเหตุ
fullName	String	ชื่อ-นามสกุลของพนักงาน
employeeCode	String	รหัสพนักงาน (ตัวเลขหรือตัวอักษร)
action	Enum ('Check-in', 'Check-out')	ประเภทการลงเวลา
timestamp	String (ISO-8601)	เวลาที่กดบันทึก โดย server จะ generate

Event ที่สร้างจะมี:

• Summary เช่น สมชาย ใจดี (E123) – Check-in
• เวลาเริ่มต้นและสิ้นสุด: Timestamp เดียวกัน หรือเพิ่ม 1 นาที

4. Google Calendar เป็น Data-store หลัก

Google Calendar ใช้เป็นที่เก็บข้อมูลลงเวลา ไม่ต้องสร้าง Database เพิ่มเติมในระบบนี้

• ใช้ Service Account เชื่อมต่อ API
• ลงเวลาทุกรายการเป็น 1 Event ใหม่ใน Calendar เดียวกัน
• สามารถดูย้อนหลังได้ง่ายผ่าน Google Calendar Interface

5. การจัดการ Timezone

เนื่องจากพนักงานอยู่ในประเทศไทย จึงต้องกำหนด timezone เป็น Asia/Bangkok ทั้งฝั่ง client และ server:

• Server จะบันทึก timestamp ตาม Asia/Bangkok
• Client อาจดึง timezone จาก Intl.DateTimeFormat().resolvedOptions().timeZone
• ป้องกันปัญหาเวลาเพี้ยนข้ามประเทศ

6. การเชื่อมต่อ Google Calendar API

การยืนยันตัวตนเลือกใช้:

• OAuth 2.0 ผ่าน Service Account (ไม่ใช้ OAuth Consent Screen แบบ User Authorization)
• ข้อดี: ไม่ต้องให้ผู้ใช้กดยินยอมทีละคน / ใช้ได้ในระบบอัตโนมัติ / ควบคุมได้ง่าย
• Calendar ต้อง แชร์สิทธิ์ ให้กับ Email ของ Service Account แบบ "Make changes to events"

7. Roadmap 9 บทถัดไป

1. ตั้งค่า Google Cloud Console และ Service Account สำหรับ Calendar API
2. สร้างโปรเจกต์ Next.js และตั้งค่าเบื้องต้น
3. เชื่อมต่อ Google Calendar API จากฝั่ง server ด้วย Service Account
4. เขียน API Endpoint สำหรับลงเวลาที่สร้าง Event ใหม่
5. พัฒนา Form UI สำหรับเลือกชื่อ, เลือกลงเวลา, และกดส่งข้อมูล
6. จัดการ Timezone และ Validate ข้อมูลก่อนส่ง
7. Debug และเขียนแนวทางการตรวจสอบข้อผิดพลาด
8. Deploy ขึ้น Vercel พร้อมตั้ง Environment Variables
9. แนวทางบำรุงรักษาและ Feature เพิ่มเติมในอนาคต

---

หมายเหตุ: เพื่อความแม่นยำสูงสุดในการพัฒนา โปรดอ้างอิงเอกสารล่าสุดจาก Google Calendar API Documentation และ Next.js Documentation ระหว่างดำเนินงาน