DEV Community

Cover image for Apidog เลือกโหมดไหนดี Spec-First หรือ Design-First
Thanawat Wongchai
Thanawat Wongchai

Posted on • Originally published at apidog.com

Apidog เลือกโหมดไหนดี Spec-First หรือ Design-First

โมดูล API ของ Apidog ให้คุณสร้างสัญญา API ได้ 2 วิธี: ใช้ฟอร์มแบบภาพใน Design-First Mode หรือแก้ไขไฟล์ OpenAPI/Swagger โดยตรงใน Spec-First Mode ที่เชื่อมกับ Git ทั้งสองโหมดสร้าง OpenAPI ที่ถูกต้องเหมือนกัน ความต่างคือ workflow การทำงานของทีมคุณ

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

คู่มือนี้ช่วยให้คุณเลือกโหมดที่เหมาะกับทีม: แต่ละโหมดทำงานอย่างไร, จัดการ Git แบบไหน, และควรใช้ในสถานการณ์ใด คุณสามารถสลับโหมดได้จากปุ่มที่มุมล่างซ้ายของโมดูล API ดังนั้นการเลือกนี้ไม่ถาวร แต่การตั้งค่าเริ่มต้นให้ถูกจะช่วยลด friction ในงานประจำวัน

สองแนวคิดหลัก

ทั้ง Design-first และ Spec-first มีหลักการเดียวกัน: กำหนดสัญญา API ก่อนเขียน implementation สัญญา API คือ source of truth ที่ใช้สร้างโค้ด, mocks, tests และ docs ต่อไป

Design-first คืออะไร

Design-first หมายถึงการออกแบบ API ผ่าน UI ที่มีโครงสร้าง เช่น:

  • เพิ่ม endpoint ผ่านฟอร์ม
  • เลือก HTTP method
  • กำหนด path
  • เพิ่ม query/path parameters
  • สร้าง request/response schema ผ่าน tree editor
  • แนบตัวอย่าง response

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

Spec-first คืออะไร

Spec-first หรือ contract-first หมายถึงการเขียนสัญญา API โดยตรงในไฟล์ spec เช่น YAML หรือ JSON:

openapi: 3.0.3
info:
  title: Example API
  version: 1.0.0
paths:
  /users:
    get:
      summary: List users
      responses:
        "200":
          description: OK
Enter fullscreen mode Exit fullscreen mode

ใน workflow นี้ ไฟล์ OpenAPI/Swagger คือพื้นที่ทำงานหลัก และถูกจัดการเหมือน source code

หมายเหตุ: ใน Apidog ทั้งสองโหมดเป็น contract-first ทั้งคู่ เพราะสัญญา API มาก่อนโค้ด ความต่างคือคุณแก้ไขสัญญาผ่าน UI หรือผ่านไฟล์ spec

ถ้าต้องการมองภาพรวมเรื่องการจัดการ API spec แบบมี version control อ่านเพิ่มเติมได้ที่ เวิร์กโฟลว์ API ที่ใช้ Git เป็นหลัก

โหมด Apidog Design-First

Design-First Mode คือ visual API designer ใน Apidog เหมาะเมื่อทีมต้องการสร้าง API contract อย่างรวดเร็วโดยไม่ต้องเขียน YAML/JSON เอง

ขั้นตอนการทำงานทั่วไป:

  1. เปิดโมดูล APIs
  2. สร้าง endpoint ใหม่
  3. เลือก method เช่น GET, POST, PUT, DELETE
  4. ระบุ path เช่น /users/{id}
  5. เพิ่ม path/query/header parameters
  6. สร้าง request body และ response schema
  7. เพิ่ม examples
  8. ให้ Apidog สร้าง OpenAPI spec ให้เบื้องหลัง

โหมดนี้เหมาะกับทีมส่วนใหญ่ เพราะไม่ต้องจำ syntax ของ OpenAPI เอง ตัวแก้ไข schema ช่วยบังคับโครงสร้างและลดข้อผิดพลาด เช่นวงเล็บผิด, indentation ผิด, หรือ type ไม่ตรง

ตัวอย่างสิ่งที่ทำได้ง่ายใน Design-First Mode:

  • สร้าง schema กลาง เช่น Error
  • reuse schema เดิมในหลาย endpoint
  • เพิ่ม common headers
  • สร้าง response examples
  • review การเปลี่ยนแปลงผ่านมุมมองแบบโครงสร้าง

Design-First Mode ยังรองรับ branch ภายใน Apidog ทำให้ทีมสามารถออกแบบ API หลายเวอร์ชันพร้อมกัน แล้วค่อย review หรือ merge ภายหลังได้

ข้อจำกัดคือ หากคุณคุ้นกับ OpenAPI อยู่แล้ว การคลิกผ่านฟอร์มอาจรู้สึกช้ากว่าการแก้ไฟล์ spec โดยตรง

โหมด Apidog Spec-First

Spec-First Mode ซึ่งขณะนี้อยู่ในช่วงเบต้า เหมาะกับทีมที่ต้องการให้ API spec อยู่ใน Git repository เหมือนไฟล์ source code อื่น ๆ

แทนที่จะใช้ฟอร์ม คุณจะแก้ไข OpenAPI หรือ Swagger spec โดยตรงใน editor แบบ IDE ด้วย YAML หรือ JSON

ฟีเจอร์หลักของ editor:

  • syntax highlighting
  • inline validation
  • auto-completion สำหรับ OpenAPI/Swagger schema
  • แถบด้านซ้ายที่ parse paths และ components อัตโนมัติ
  • ตัวบ่งชี้สถานะ sync กับ Git repository

ตัวอย่างโครงสร้าง OpenAPI ที่คุณอาจแก้ใน Spec-First Mode:

paths:
  /users/{id}:
    get:
      summary: Get user by ID
      parameters:
        - name: id
          in: path
          required: true
          schema:
            type: string
      responses:
        "200":
          description: User found
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/User"
Enter fullscreen mode Exit fullscreen mode

จุดเด่นของ Spec-First Mode คือ Git sync แบบสองทาง

คุณสามารถ:

  1. เชื่อมต่อ GitHub, GitLab หรือ Azure DevOps ผ่าน Generic Git Connection
  2. แก้ไฟล์ spec ใน Apidog แล้ว commit/push จากแอป
  3. หรือแก้ไฟล์จาก code editor แล้ว push ไปยัง repo
  4. ดึงการเปลี่ยนแปลงกลับมาใน Apidog

ไฟล์ spec จึงเป็น source of truth เดียวกันทั้งใน repository และใน Apidog อ่านขั้นตอนการตั้งค่าเพิ่มเติมได้ที่ เอกสาร Spec-First Mode

โหมดนี้เหมาะกับทีมที่ review API change ผ่าน pull request, ทำ spec linting ใน CI หรือจัด version ของ API contract ควบคู่กับ service code

อ่านแนวคิดเพิ่มเติมได้ที่ API spec as code

เปรียบเทียบ Design-First กับ Spec-First

ทั้งสองโหมดสร้าง OpenAPI เหมือนกัน และนำไปใช้ต่อกับ mocking, testing และ documentation ได้ ความต่างหลักคือวิธีเขียนและจัด version ของ spec

หัวข้อ Design-First Mode Spec-First Mode (เบต้า)
ตัวแก้ไข ฟอร์มแบบภาพและ schema tree editor YAML/JSON แบบ IDE
รูปแบบ spec OpenAPI ที่ Apidog สร้างให้ OpenAPI/Swagger ที่เขียนเอง
Git workflow รองรับ branch ภายใน Apidog sync สองทางกับ GitHub, GitLab, Azure DevOps ผ่าน Git Connection
การตรวจสอบ ควบคุมผ่านฟอร์ม inline validation และ auto-completion
การนำทาง endpoint list และ folder outline ที่ parse จากไฟล์ spec
learning curve ต่ำ สูงกว่า ต้องเข้าใจ OpenAPI
เหมาะกับ ทีมหลายบทบาท, onboarding เร็ว ทีมวิศวกรที่จัดการ spec เหมือนโค้ด

ควรเลือกโหมดไหน

เลือก Design-First Mode ถ้า:

  • ทีมมี PM, QA หรือสมาชิกที่ไม่ถนัด OpenAPI
  • ต้องการสร้าง API ใหม่จากศูนย์อย่างรวดเร็ว
  • ต้องการลด syntax error
  • ต้องการ review สัญญา API แบบอ่านง่าย
  • ยังไม่จำเป็นต้องผูก spec กับ Git repo โดยตรง

เลือก Spec-First Mode ถ้า:

  • มีไฟล์ OpenAPI/Swagger อยู่แล้ว
  • ต้องการเก็บ spec ใน Git repository
  • ทีม review API changes ผ่าน pull request
  • มี CI สำหรับ lint หรือ validate spec
  • ต้องการให้ YAML/JSON เป็น contract หลักที่ใช้ร่วมกับเครื่องมืออื่น

แนวทางที่ใช้งานได้จริงสำหรับหลายทีมคือ:

  1. เริ่มออกแบบ endpoint ใหม่ใน Design-First Mode เพื่อความเร็ว
  2. เมื่อ API เริ่มนิ่ง ให้ย้ายไป Spec-First Mode
  3. ใช้ Git review และ CI เพื่อควบคุมการเปลี่ยนแปลงในระยะยาว

ทั้งสองโหมดไม่ใช่คู่แข่งกัน แต่เป็นสองวิธีในการแก้ไขสัญญา API เดียวกัน

วิธีสลับโหมดใน Apidog

การสลับโหมดทำได้จากปุ่มเดียว:

  1. เปิดโปรเจกต์ใน Apidog
  2. เข้าโมดูล APIs
  3. มองหาปุ่มสลับโหมดที่มุมล่างซ้าย
  4. เลือก Design-First หรือ Spec-First
  5. ตรวจสอบว่า endpoint, schema และ examples ยังอยู่ครบ

สิ่งที่ควรรู้ก่อนสลับ:

  • สัญญา API พื้นฐานเป็นชุดเดียวกัน คุณเปลี่ยน editor ไม่ใช่สร้าง API ใหม่
  • endpoint, schema และ examples จะถูกใช้ร่วมกันระหว่างโหมด
  • หากต้องใช้ Git sync ใน Spec-First Mode ให้เชื่อมต่อ repository ก่อน
  • เมื่อเชื่อม Git แล้ว ให้ดูตัวบ่งชี้ sync เพื่อเช็กว่า local changes ถูก commit/push แล้วหรือยัง
  • เนื่องจาก Spec-First Mode ยังเป็นเบต้า ควรทดลองกับโปรเจกต์ที่ไม่ critical ก่อนใช้กับ production contract

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

Spec-first เหมือนกับ contract-first หรือไม่?

โดยทั่วไปใช่ ทั้งสองคำหมายถึงการกำหนด API contract ก่อน implementation และถือว่า spec เป็น source of truth

ใน Apidog, Spec-First Mode คือ workflow แบบ contract-first ที่ใช้ไฟล์ OpenAPI หรือ Swagger ที่เขียนด้วยมือและ sync กับ Git

Spec-First Mode ใช้กับ GitLab และ Azure DevOps ได้หรือไม่?

ได้ Spec-First Mode รองรับ Git sync สองทางกับ GitHub และ GitLab โดยตรง ส่วน Azure DevOps ใช้งานผ่าน Generic Git Connection เพื่อ sync ไฟล์ spec กับ repository ที่โฮสต์บน Azure

สลับจาก Design-First ไป Spec-First แล้วงานจะหายไหม?

ไม่หาย ทั้งสองโหมดอ่านและเขียนสัญญา API ชุดเดียวกัน เมื่อสลับโหมด endpoint, schema และ examples จะยังอยู่ครบ คุณเปลี่ยนแค่พื้นผิวการแก้ไข

สรุป

ถ้าทีมต้องการความเร็วและ collaboration ระหว่างหลายบทบาท ให้เริ่มจาก Design-First Mode

ถ้าทีมต้องการ Git-based workflow, pull request review และจัดการ spec เหมือน code ให้ใช้ Spec-First Mode

วิธีตัดสินใจที่เร็วที่สุดคือเปิดโมดูล APIs ใน Apidog แล้วลองสร้าง endpoint เดียวกันทั้งสองโหมด จากนั้นเลือก workflow ที่เข้ากับทีมมากที่สุด

Top comments (0)