Thanawat Wongchai

Posted on Jul 15 • Originally published at apidog.com

วิธีสร้าง Mock Server บนคลาวด์ที่แชร์ได้ด้วย Apidog

ทีมส่วนหน้าของคุณอาจติดขัดได้แม้ดีไซน์และหน้าจอจะพร้อมแล้ว หาก API ฝั่งหลังบ้านยังไม่เสร็จ UI ก็ไม่มีข้อมูลจริงให้เรียกใช้ การใช้ local mock ช่วยได้ระหว่างพัฒนา แต่ปลายทางจะหยุดทำงานทันทีเมื่อเจ้าของเครื่องปิดแล็ปท็อป

ลองใช้ Apidog วันนี้

Apidog แก้ปัญหานี้ด้วย Cloud Mock: URL สาธารณะที่โฮสต์บน mock.apidog.com และพร้อมใช้งานตลอด 24 ชั่วโมง ทีมส่วนหน้า, QA และพาร์ตเนอร์สามารถเรียกใช้ API จำลองที่ตรงกับสัญญา API ได้ก่อนเผยแพร่โค้ดส่วนหลังบ้าน หากต้องการทบทวนพื้นฐาน ให้ดู API mock คืออะไรและเมื่อไหร่ควรใช้ และอ่าน โมเดลคำขอ/การตอบกลับ HTTP ของ MDN เพื่อทำความเข้าใจรูปแบบการทำงานของ endpoint

Cloud Mock คืออะไร และ local mock จำกัดตรงไหน

Apidog สร้าง mock endpoint สำหรับ API ที่คุณออกแบบไว้ โดย local mock จะทำงานจากอินสแตนซ์ Apidog บนเครื่องของคุณ จึงตอบกลับได้เฉพาะตอนที่เครื่องและโปรแกรมยังทำงานอยู่ เหมาะกับการดีบักคนเดียว แต่ไม่เหมาะเมื่อทีมอื่นต้องพึ่งพา URL เดียวกัน

Cloud Mock คือ mock endpoint ที่โฮสต์แยกจากเครื่องของนักพัฒนา ต่อให้แล็ปท็อปของคุณปิดอยู่ Cloud Mock ก็ยังตอบกลับคำขอได้ตลอดเวลา

เวิร์กโฟลว์ที่ใช้งานได้จริงมีดังนี้:

ออกแบบ API contract และ response schema
เปิด Cloud Mock สำหรับโปรเจกต์
คัดลอก URL ของ endpoint
แชร์ URL ให้ทีม frontend, QA หรือพาร์ตเนอร์
ให้ทุกฝ่ายพัฒนาหรือเขียนเทสต์กับ response schema เดียวกัน

สำหรับทีมที่ทำงานข้ามเขตเวลา ดูแนวทางเพิ่มเติมได้ในบทความ การแชร์ mock servers และสภาพแวดล้อมกับทีมทั่วโลก

เปิด Cloud Mock และรับ URL สาธารณะ

ตัวอย่างนี้ใช้ API users ที่มี endpoint GET /users สำหรับคืนรายการลูกค้า

ขั้นตอนที่ 1: เปิด Cloud Mock

ใน Apidog ให้เปิดโปรเจกต์ แล้วไปที่:

Project Settings > Feature Settings > Mock Settings

เปิดสวิตช์ Cloud Mock

ตั้งค่านี้ทำเพียงครั้งเดียวต่อโปรเจกต์ หลังจากเปิดแล้ว endpoint ในโปรเจกต์จะมี Cloud Mock URL เพิ่มจาก local mock URL

ขั้นตอนที่ 2: คัดลอก Cloud Mock URL

เปิด endpoint ที่ต้องการแชร์ เช่น GET /users แล้วไปที่แท็บ Mock จากนั้นคัดลอก Cloud Mock URL

ตัวอย่าง URL:

https://mock.apidog.com/m1/2689726-0-default/users?apidogToken=GdfNrEm6lxM9nDGGIMCWC1OPSiZ6hGOi

รูปแบบ path จะคล้ายกับ:

mock.apidog.com/m1/<projectId>-<num>-<env>/<path>

ไม่ควรประกอบ URL เอง ให้ใช้ URL ที่ Apidog สร้างและคัดลอกให้ เพราะเป็นค่าที่ถูกต้องสำหรับโปรเจกต์และ environment ของคุณ

ขั้นตอนที่ 3: ทดสอบ response ก่อนแชร์

ในแท็บ Mock เดียวกัน ให้ส่งคำขอทดสอบไปยัง mock URL เพื่อตรวจสอบว่า response ตรงกับ schema ที่คาดหวัง

ตัวอย่าง response สำหรับ GET /users:

[
  {
    "id": 1,
    "name": "Amelia Turner",
    "email": "amelia.turner@example.com",
    "city": "Portland"
  },
  {
    "id": 2,
    "name": "Marcus Bell",
    "email": "marcus.bell@example.com",
    "city": "Austin"
  }
]

Apidog ใช้ชื่อฟิลด์และชนิดข้อมูลจาก schema เพื่อสร้างข้อมูลตัวอย่างที่สอดคล้องกัน ทำให้ frontend สามารถพัฒนาตาราง, รายการ หรือหน้ารายละเอียดได้โดยไม่ต้องรอข้อมูลจริง

ขั้นตอนที่ 4: เรียกใช้ URL จากเบราว์เซอร์หรือโค้ด

สำหรับ GET คุณสามารถวาง Cloud Mock URL ลงในเบราว์เซอร์เพื่อดู JSON ได้ทันที

หากต้องการเรียกใช้จาก terminal:

curl "https://mock.apidog.com/m1/2689726-0-default/users?apidogToken=GdfNrEm6lxM9nDGGIMCWC1OPSiZ6hGOi"

จากนั้นแชร์ URL นี้ให้ทีมใช้งานต่อได้เลย

ป้องกัน mock ด้วย Token Authentication

Cloud Mock URL สะดวกต่อการแชร์ แต่บางกรณีคุณอาจไม่ต้องการให้ทุกคนเข้าถึงได้ เช่น mock ของฟีเจอร์ที่ยังไม่เปิดตัว หรือ API สำหรับทดสอบการเชื่อมต่อกับพาร์ตเนอร์

ไปที่:

Project Settings > Feature Settings > Mock Settings

แล้วตั้งค่าการเข้าถึงเป็น Token Authentication

หลังเปิดใช้งาน ทุกคำขอจะต้องส่ง apidogToken ที่ถูกต้อง มิฉะนั้นคำขอจะถูกปฏิเสธ

ส่ง token ผ่าน query string

Cloud Mock URL ที่คัดลอกจาก Apidog อาจมี token อยู่แล้ว:

curl "https://mock.apidog.com/m1/2689726-0-default/users?apidogToken=GdfNrEm6lxM9nDGGIMCWC1OPSiZ6hGOi"

ส่ง token ผ่าน request header

การส่งผ่าน header ช่วยไม่ให้ token อยู่ใน URL หรือถูกบันทึกใน URL logs:

curl "https://mock.apidog.com/m1/2689726-0-default/users" \
  -H "apidogToken: GdfNrEm6lxM9nDGGIMCWC1OPSiZ6hGOi"

ส่ง token จาก frontend

สำหรับโค้ด frontend ให้ใช้ header เพื่อแยก credential ออกจาก resource URL:

const res = await fetch(
  "https://mock.apidog.com/m1/2689726-0-default/users",
  {
    headers: {
      apidogToken: "GdfNrEm6lxM9nDGGIMCWC1OPSiZ6hGOi"
    }
  }
);

const users = await res.json();

คุณยังส่ง apidogToken ใน body ของคำขอ form-data หรือ x-www-form-urlencoded ได้ หากไคลเอนต์ของคุณส่งข้อมูลแบบฟอร์ม

หากเปิด Token Authentication หลังจากแชร์ URL แบบไม่มี token ไปแล้ว ให้แจ้งผู้ใช้ทุกคนล่วงหน้า เพราะคำขอเดิมจะเริ่มล้มเหลวจนกว่าจะเพิ่ม token

สร้าง mock data ที่สมจริงด้วย locale

mock ที่คืนค่า "name": "string" ทุกครั้งอาจตรวจสอบโครงสร้าง response ได้ แต่ไม่ช่วยตรวจจับปัญหา UI มากนัก ข้อมูลอย่างชื่อ ที่อยู่ หรือหมายเลขโทรศัพท์ที่ดูสมจริงช่วยให้ทีมเห็นปัญหาจริง เช่น:

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

Apidog ใช้ Faker.js สำหรับสร้างข้อมูล mock และรองรับการกำหนด locale

ใช้ locale เริ่มต้นของโปรเจกต์

ค่าเริ่มต้นจะอิงจากภาษาของโปรเจกต์ที่ตั้งไว้ใน:

Project Settings > Basic Settings

หากตั้งภาษาโปรเจกต์เป็นภาษาฝรั่งเศส ข้อมูล mock เช่นชื่อหรือที่อยู่จะใช้รูปแบบภาษาฝรั่งเศสตามค่าเริ่มต้น

กำหนด locale ทั้งโปรเจกต์

หากต้องการให้ mock data ใช้ locale ที่ต่างจากภาษาของโปรเจกต์ ให้ไปที่:

Project Settings > Feature Settings > Mock Settings

จากนั้นเลือก Faker locale ที่ต้องการ การตั้งค่านี้จะแทนที่ค่าเริ่มต้นจาก Basic Settings สำหรับฟิลด์ mock ทั้งโปรเจกต์

ตัวอย่าง use case:

ทดสอบ UI สำหรับตลาดญี่ปุ่น
ตรวจสอบการรองรับชื่อและที่อยู่ภาษาเยอรมัน
จำลองข้อมูลลูกค้าตามภูมิภาคเป้าหมาย

ดูรายละเอียดการสร้างข้อมูลจาก schema ได้ใน Smart mock ของ Apidog และวิธีที่มันอ่านสกีมาของคุณ

กำหนด locale เฉพาะฟิลด์

หากบางฟิลด์ต้องใช้ locale ต่างจากค่าเริ่มต้นของโปรเจกต์ ให้ระบุ locale ใน mock expression:

{{$person.fullName(locale='ja')}}

ตัวอย่างนี้สร้างชื่อภาษาญี่ปุ่น เช่น:

田中 太郎

ลำดับความสำคัญของ locale คือ:

locale ระดับฟิลด์
locale ระดับโปรเจกต์ใน Mock Settings
ภาษาเริ่มต้นใน Basic Settings

ใช้การกำหนดระดับฟิลด์เฉพาะเมื่อเป็นข้อยกเว้น เช่น ระบบที่มีข้อมูลลูกค้าหลายประเทศใน response เดียวกัน

ก่อนใช้ locale สำหรับภูมิภาคใหม่ ควรตรวจสอบรหัสที่รองรับจาก เอกสาร Apidog และ เอกสาร locale ของ Faker.js

ตั้งค่าเขตเวลาให้ตรงกับข้อมูลจำลอง

สำหรับฟิลด์เวลา เช่น createdAt หรือ updatedAt คุณสามารถตั้งค่าเขตเวลาเริ่มต้นได้ที่:

Project Settings > Feature Settings > Mock Settings

และกำหนดทับต่อฟิลด์ผ่าน timeZone parameter ใน mock expression

การตั้งค่า locale และเขตเวลาร่วมกันช่วยให้ข้อมูล mock สะท้อนผู้ใช้ในภูมิภาคที่ต้องการได้ดีขึ้น เช่น ญี่ปุ่น เยอรมนี หรือกลุ่มผู้ใช้หลายประเทศ ดูตัวอย่าง use case เพิ่มเติมได้ที่ กรณีการใช้งานจริงของ API mocking

Cloud Mock เทียบกับ self-hosted mock

Cloud Mock เหมาะกับทีมที่ต้องการ endpoint ที่เปิดใช้งานได้ทันทีและไม่ต้องดูแลโครงสร้างพื้นฐานเอง

แต่หากองค์กรมีนโยบายที่ไม่อนุญาตให้ส่ง test traffic ผ่านคลาวด์ของผู้ให้บริการ คุณสามารถเลือกโฮสต์ mock service บน infrastructure ของตัวเองได้

เปรียบเทียบโดยสรุป:

ทางเลือก	เหมาะกับ	ข้อแลกเปลี่ยน
Cloud Mock	ทีมที่ต้องการ URL พร้อมใช้และดูแลน้อย	ใช้บริการโฮสต์ของ Apidog
Self-hosted mock	องค์กรที่มีข้อกำหนดด้านข้อมูลหรือเครือข่าย	ต้องติดตั้งและดูแลบริการเอง

หากต้องการโฮสต์เอง ดู การโฮสต์ Apidog mock server ด้วยตัวเอง และดูภาพรวมตัวเลือกอื่นได้จาก การเปรียบเทียบเครื่องมือ API mocking ออนไลน์

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

ทำให้ workflow ต่อเนื่องด้วย Apidog CLI

Cloud Mock เป็นความสามารถของ GUI และบริการคลาวด์ โดย mock response ถูกสร้างจาก endpoint schema และให้บริการโดยระบบของ Apidog ไม่ใช่สิ่งที่ Apidog CLI เริ่มให้จาก terminal

ดังนั้น Apidog CLI ไม่ได้ใช้สำหรับรัน mock server โดยตรง แต่ช่วยให้ API specification และ schema ของคุณอัปเดตอยู่เสมอ

เมื่อ endpoint หรือ schema เปลี่ยน Cloud Mock จะใช้ schema ล่าสุดเป็นข้อมูลตั้งต้นสำหรับสร้าง mock response ซึ่งช่วยลดงานแก้ mock ด้วยมือ

หลังจาก backend พร้อมแล้ว ให้ใช้ scenario เดียวกันเพื่อตรวจสอบ implementation จริงผ่าน CLI:

apidog run -t <scenario_id> -e <env_id> -r cli

คำสั่งนี้รัน scenario ที่บันทึกไว้กับ environment ที่ระบุ และรายงานผลการทดสอบ

แนวทางที่แนะนำคือ:

ออกแบบ API contract
เปิด Cloud Mock เพื่อให้ frontend เริ่มงาน
สร้าง scenario ทดสอบตาม contract เดียวกัน
พัฒนา backend ให้ผ่าน scenario
รัน scenario ใน CI/CD

เมื่อสร้างคำสั่งจากหน้า scenario ของ Apidog ระบบจะเติม -t สำหรับ scenario ID และ -e สำหรับ environment ID ให้แล้ว ลดโอกาสใส่ค่าไม่ตรงกัน ดูวิธีต่อเข้ากับ pipeline ได้ใน การเรียกใช้ Apidog ใน CI/CD pipeline

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

URL ของ Cloud Mock ยังทำงานเมื่อปิด Apidog หรือไม่?

ใช่ Cloud Mock ทำงานบนโครงสร้างพื้นฐานของ Apidog จึงยังตอบกลับคำขอได้แม้คุณปิด Apidog หรือปิดเครื่องแล้ว

เปิด Cloud Mock URL ในเบราว์เซอร์ได้หรือไม่?

ได้สำหรับคำขอ GET วาง URL เต็มลงในแถบที่อยู่ แล้วเบราว์เซอร์จะแสดง JSON response

หากต้องการใช้ method อื่น หรือไม่ต้องการให้ token อยู่ในประวัติ URL ให้ใช้ curl, API client หรือ frontend code และส่ง token ผ่าน header

ถ้าไม่ได้ส่ง token จะเกิดอะไรขึ้น?

เมื่อเปิด Token Authentication คำขอที่ไม่มี apidogToken ที่ถูกต้องจะถูกปฏิเสธ คุณส่ง token ได้ผ่าน:

query string
request header
request body สำหรับ form request

จะสร้าง mock data ให้ตรงกับประเทศที่ต้องการได้อย่างไร?

เลือกได้ 3 ระดับ:

ตั้งค่าภาษาโปรเจกต์ใน Basic Settings
ตั้งค่า Faker locale ทั้งโปรเจกต์ใน Mock Settings
ระบุ locale ใน mock expression ของฟิลด์นั้น

ตัวอย่าง:

{{$person.fullName(locale='ja')}}

การตั้งค่าระดับฟิลด์จะมีลำดับความสำคัญสูงกว่าการตั้งค่าระดับโปรเจกต์ ดูตัวอย่างเพิ่มเติมได้ใน คู่มือ Smart Mock

ควรใช้ Cloud Mock หรือ headless mock tool?

ใช้ Cloud Mock เมื่อทีมต้องการ endpoint ที่โฮสต์ให้พร้อมใช้ เชื่อมโยงกับ API design และไม่ต้องดูแล server เอง

หากต้องการ mock ที่ฝังอยู่ใน build automation โดยไม่มี GUI ให้พิจารณา เครื่องมือ headless mock โดย specification ที่ชัดเจนตามแนวทางของ OpenAPI Initiative จะช่วยให้ทั้งสองแนวทางทำงานได้ดีขึ้น

สรุป

local mock ช่วยให้คนเดียวพัฒนาต่อได้ แต่ Cloud Mock เปลี่ยน mock ให้เป็น URL สาธารณะบน mock.apidog.com ที่ทั้งทีมเรียกใช้ร่วมกันได้

เริ่มต้นด้วยขั้นตอนนี้:

ออกแบบ endpoint และ response schema
เปิด Cloud Mock
ทดสอบ response
แชร์ URL ให้ frontend และ QA
เปิด Token Authentication หากต้องจำกัดการเข้าถึง
ตั้ง locale และเขตเวลาเพื่อให้ข้อมูล mock ใกล้เคียงผู้ใช้จริง

เมื่อ frontend ใช้งาน mock ได้ทันที ทีมก็ไม่ต้องรอ backend ทุกครั้งที่เริ่มพัฒนาฟีเจอร์ใหม่ ดาวน์โหลด Apidog เพื่อสร้าง Cloud Mock ที่แชร์กับทีมได้

DEV Community

วิธีสร้าง Mock Server บนคลาวด์ที่แชร์ได้ด้วย Apidog

Cloud Mock คืออะไร และ local mock จำกัดตรงไหน

เปิด Cloud Mock และรับ URL สาธารณะ

ขั้นตอนที่ 1: เปิด Cloud Mock

ขั้นตอนที่ 2: คัดลอก Cloud Mock URL

ขั้นตอนที่ 3: ทดสอบ response ก่อนแชร์

ขั้นตอนที่ 4: เรียกใช้ URL จากเบราว์เซอร์หรือโค้ด

ป้องกัน mock ด้วย Token Authentication

ส่ง token ผ่าน query string

ส่ง token ผ่าน request header

ส่ง token จาก frontend

สร้าง mock data ที่สมจริงด้วย locale

ใช้ locale เริ่มต้นของโปรเจกต์

กำหนด locale ทั้งโปรเจกต์

กำหนด locale เฉพาะฟิลด์

ตั้งค่าเขตเวลาให้ตรงกับข้อมูลจำลอง

Cloud Mock เทียบกับ self-hosted mock

ทำให้ workflow ต่อเนื่องด้วย Apidog CLI

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

URL ของ Cloud Mock ยังทำงานเมื่อปิด Apidog หรือไม่?

เปิด Cloud Mock URL ในเบราว์เซอร์ได้หรือไม่?

ถ้าไม่ได้ส่ง token จะเกิดอะไรขึ้น?

จะสร้าง mock data ให้ตรงกับประเทศที่ต้องการได้อย่างไร?

ควรใช้ Cloud Mock หรือ headless mock tool?

สรุป

Top comments (0)