สร้าง Response API ไม่ต้องรอ Backend ด้วย Mocki

ในการสร้าง mock API หรือ dummy endpoints มีวิธีในการสร้างหลายแบบนะคับ วันนี้จะลองพามาใช้ Free tool service ที่ชื่อว่า Mocki กัน

เริ่มแรกเข้าไปที่ https://mocki.io/ เลยคับ สามารถลองเล่นผ่านหน้าเว็บได้เลย เช่น ถ้าเราต้องการ Json response แบบไหน ก็สามารถใส่เข้าไป และ กดปุ่มCreate API ได้ตามในรูปคับ

ทดสอบ API ผ่านทางหน้าเว็บของ mocky.io

ในการใช้งานเพียงแค่ติดตั้งและรันคำสั่งเหล่านี้เลยคับ

1. ติดตั้ง mocki ด้วย npm

npm install -g mocki

2. สร้างไฟล์ config.yml และกำหนด configuration เข้าไปดังนี้

name: mocki 
port: 3000 
endpoints:  
- path: /hello   
  method: get   
  responses: 
    - statusCode: 200   
    body:   
      message: Hello from Mocki!

3. เซฟไฟล์เป็น config.yml และรันคำสั่งนี้ใน same directory as your config file.

mocki start --config config.yml

4. เพียงเท่านี้ก็จะสามารถสร้าง request ไปที่ http://localhost:3000/hello และได้ response กลับมาแบบนี้

{ 
  "message": "Hello from Mocki!" 
}

ต่อไปเราจะลองมาสร้าง Mocky locally service ไว้ใน Docker เพื่อให้สะดวกในการใช้งานสำหรับ Frontend

จะเห็นได้ว่าเราสามารถกำหนด response ที่ต้องการผ่านทาง yaml file ได้เลย

1. สร้าง config.yml ตาม response ที่เราต้องการทดสอบดังนี้

name: mocki
port: 3000

endpoints:
  - path: /login/
    method: post
    behavior: random
    responses:
      - statusCode: 200
        delay: 1000
        body:
          refresh: 1234567890
          access: 0987654321
          user:
            username: Grassroot Engineer
            email: grassroot@engineer.com
            first_name: GRASSROOT
            last_name: ENGINEER
      - statusCode: 401
        delay: 1000
        body:
          detail: No active account found with the given credentials

จาก yaml file เป็นกำหนดดังนี้

• port = 3000
• endpoint = /login/
• delay = 1000 หน่วงไว้นิดนึงให้เสมือน call real API
• behavior = random โดยจะมี 2 ตัวเลือกคือ จะ random return of status code ออกมาเป็น 200 หรือ 401
  (สำหรับ behavior สามารถมาดูเพิ่มเติมได้ ที่นี่ โดยจะมีอยู่ 3 แบบคือ
  undefined, conditional และ random).
• method = post

2. เขียน script ใน docker-compose.yml เพื่อไว้สร้าง Container หรือ service ของ mocki ขึ้นมาใช้งาน

version: "2.4"

services:
  mocki:
    image: node:14-alpine3.11
    volumes:
      - ./config.yml:/config.yml
    command: sh -c "npm install -g mocki && mocki run --path /config.yml"
    ports:
    - "3000:3000"

• กำหนด services ที่ชื่อว่า mocki
• กำหนด image ที่ต้องการใช้งาน ในที่นี่เลือก node:14-alpine3.11
  (ถ้าเราไม่ได้กำหนด image ใน docker-compose.yml สามารถกำหนด base image ที่จะใช้ในการ build ใน Dockerfile ได้เช่นเดียวกัน)

กรณีต้องการให้ build ใหม่จาก image ใน dockerfile

• Map volumes from current path to image โดยให้ map ไปที่ config.yml ที่เราได้สร้างไว้ในข้อ 1
• เมื่อเข้าไปใน docker image แล้วก้อให้รัน shell run command
  npm install -g mocki && mocki run --path /config.yml
  เพื่อติดตั้ง mocki ผ่าน npm, และ
• สุดท้าย map port ไปที่ 3000

3. Run Mock API Server

• Start Mocki service.
  docker-compose up -d mocki
• Restart Mocki when having some updates.
  docker-compose restart mocki

นี่คือ ผลลัพธ์ของ Mock API ที่เราสร้างขึ้นมาแบบ random response นะคับ 😎

Response from service mocki in Docker.

Files structure.

ต่อไปเราจะมาลองทดสอบ API แบบต่างๆดูบ้าง ซึ่งจาก docs จะพบว่าเราสามารถ simulate ได้หลายแบบดังนี้

• Simulated failures
• Simulated delays
• Randomized reponses
• Conditional resposes
• Fake data generation

ผมจะลอง Integrate หลายๆแบบมาทดสอบดูคับ

behavior: conditional เมื่อต้องการสร้างเงื่อนไขในการ return

behavior: random เมื่อต้องการ random response ตามค่าที่เราได้กำหนดไว้

ใช้ !Fake เมื่อต้องการให้ mocki จำลอง json name ออกมาให้เอง

ใช้ Responses แบบ references เมื่อต้องการให้ return ออกมาเป็น Arrays ตามที่เรากำหนดไว้

เข้าถึง Array ด้วย id ได้, เมื่อกำหนด mock response เป็น Array.

Applied to mock of login API โดยมีการตรวจเช็ค request ของ body ก่อนที่จะ return.

ทดลอง custom API แบบที่ต้องการจริงๆ โดยยกเอา response ทั้งดุ้นของ json มาใส่ใน yml เลย (แต่ต้องระวังเรื่อง indent ให้ดีนะ ใช้ auto format code อาจยังไม่ผ่าน)

Sample ของ yml สามารถเข้าไปดูได้ที่นี่เลยคับ

สำหรับจุดที่ผมคิดว่ายังเป็น Pain point ที่ผมยังคิดว่าไม่ work กับการใช้ Mocki คือ

1. ไม่สามารถแยก Method ได้ เช่น ใน endpoint เดียวกัน ถ้าเราต้องการแยกให้เป็น GET และ POST มันจะทำไม่ได้นะคับ คือ มองเห็นเป็นแค่ GET เท่านั้น และ return Response ออกมาได้เพียงแบบเดียวต่อ endpoint เดียว เช่น
   - ถ้าเราต้องการให้ POST จะ return ออกมาแค่ {"detail": "OK"} และ GET จะให้ return ออกมาเป็น List ของ json เยอะๆเลย มันจะทำไม่ได้
2. ไม่สามารถใช้กับ ? ได้ เช่น ถ้าเราต้องการสร้าง endpoint ที่มี queryString ด้วยจะทำไม่ได้ พังเลย เมื่อมีการเรียก
   path: /mocki/backend/api/activities/?date=2022–02–08
แบบนี้จะใช้ไม่ได้นะ เพราะมี ? ใน endpoint ด้วย
3. ส่วนเรื่องการสร้าง Logic สามารถทำได้แค่แบบง่ายๆเท่านั้น เช่น เช็คว่ามี request ส่งเข้ามาเป็นด้วย key ที่ชื่อ user ไหม เป็นต้น ดังรูปด้านบน (ถ้าเช็คมากกว่า 1 เงื่อนไข จะไม่ได้ล่ะ)

If you think it’s useful a bit for you, just clap your hands 👏 as you wish to be encouraged me to write and develop myself for helping the world as I can.

แล้วพบกันใหม่คับ
GRASSROOT ENGINEER 😘

References:
https://mocki.io/
https://github.com/adalyte/mocki/blob/master/.mocki/config.yml
https://odero.hashnode.dev/test-your-front-end-with-mocky-a-free-tool-to-create-dummy-endpoints