ไอเดีย #78: ระบบ mock API สำหรับทีม frontend

ทีม frontend พร้อมทำหน้าจอแล้ว แต่ API ฝั่ง backend ยังไม่เสร็จ ทุกคนเลยต้องเขียนข้อมูลปลอมฝังในโค้ดกันคนละแบบ พอ API จริงมาก็พบว่าชื่อฟิลด์ไม่ตรงกัน ต้องแก้กันอีกรอบ ระบบ mock API สำหรับทีมช่วยให้ทั้งสองฝั่งตกลง "สัญญา" ของ API กันก่อน แล้ว frontend เรียก endpoint ปลอมที่หน้าตาเหมือนของจริงได้ทันที รวมถึงจำลองความช้าและ error ได้ด้วย

ใครจะใช้

• นักพัฒนา frontend/mobile — เรียก mock endpoint ระหว่างพัฒนา จำลองกรณีต่าง ๆ
• นักพัฒนา backend — กำหนด schema และตัวอย่าง response ตามที่ตกลงกัน
• QA — จำลอง error และสถานการณ์ขอบ ๆ เพื่อทดสอบ UI

ฟีเจอร์ขั้นต่ำ (MVP)

• สร้าง endpoint ปลอม: method, path (รองรับ path param เช่น /users/:id), status, header และ body
• นำเข้า OpenAPI spec แล้วสร้าง mock ให้อัตโนมัติจาก schema และ example
• สร้างข้อมูลปลอมตาม schema เช่น ชื่อไทย เบอร์โทร วันที่ (ไม่ใช้ข้อมูลคนจริง)
• ตั้ง delay และอัตราการ error เพื่อทดสอบ loading state และ retry
• หลาย scenario ต่อ endpoint เลือกด้วย header หรือ query เช่น ?scenario=empty
• Request log ดูว่า frontend ส่งอะไรมา
• แชร์ workspace กันในทีม แต่ละโปรเจกต์มี base URL ของตัวเอง

ต่อยอดได้อีก

• โหมด stateful: POST แล้ว GET เจอข้อมูลที่เพิ่งสร้าง
• ตรวจ request ว่าตรง schema ไหม แล้วตอบ 400 พร้อมบอกว่าผิดตรงไหน
• Proxy ไป API จริงสำหรับ endpoint ที่เสร็จแล้ว และ mock เฉพาะที่ยังไม่เสร็จ
• Contract test ตรวจว่า API จริงยังตรงกับ spec

โครงข้อมูลตั้งต้น

• workspace — id, name, slug
• mock_endpoint — id, workspace_id, method, path_pattern, description
• mock_response — id, endpoint_id, scenario, status_code, headers_json, body_template, delay_ms, error_rate, is_default
• schema_def — id, workspace_id, name, json_schema
• request_log — id, workspace_id, method, path, headers_json, body, matched_response_id, created_at

ระดับความยาก และสิ่งที่จะได้เรียนรู้

ปานกลาง

• เขียน router ที่จับคู่ path pattern และดึง parameter
• อ่านและใช้งาน OpenAPI/JSON Schema
• ทำ template engine เล็ก ๆ สำหรับ response แบบ dynamic
• ตั้งค่า CORS ให้ frontend เรียกจาก localhost ได้

ข้อควรระวัง

• อย่าใช้ข้อมูลจริงจาก production มาเป็นตัวอย่างใน mock เพราะ mock มักถูกแชร์กว้างกว่าที่คิด
• ถ้าเปิดบนอินเทอร์เน็ต ต้องมีการยืนยันตัวตนต่อ workspace และ rate limit กันคนเอาไปใช้เป็นที่ฝากไฟล์
• template engine ห้ามรันโค้ดอิสระบนเซิร์ฟเวอร์ ต้องจำกัดความสามารถ (sandbox)

ทีมคุณเริ่มจาก spec ก่อน (API-first) หรือเขียน backend แล้วค่อย generate เอกสาร? และ mock ควรอยู่ในเครื่องนักพัฒนาแต่ละคน หรือเป็นเซิร์ฟเวอร์กลางของทีมดีกว่า มาคุยกันครับ ทำแล้วเอามาแชร์ในกระทู้ได้เลย