ก่อนอื่นต้องเกริ่นก่อนว่าทำไมเราถึงต้องทำ Mockup API กัน ก็เนื่องจากในการทำงานจริงแทบจะเป็นไปไม่ได้เลยที่ทางฝั่ง API Dev จะทำ API มาให้ฝั่ง Front-end ได้ตั้งแต่ช่วงเริ่มโปรเจค แล้วจะทำยังไงล่ะ? Front-end ก็ต้องการ API มาใช้ ส่วนฝั่ง API Dev ก็ใช่ว่าจะเสกขึ้นมาได้ง่ายๆ จึงเป็นสาเหตุให้ต้องสร้าง Mockup API ขึ้นมานั่นเองงงง…!!

ต้องขอบอกก่อนว่าผมเป็นนักศึกษาฝึกงานกับบริษัทแห่งหนึ่ง ( เดี๋ยวจะมารีวิวอีกที ผมชอบที่นี่มาก ) ขณะทำโปรเจคผมได้ไปขอคำแนะนำจากพี่ในที่ฝึกงานว่าจะทำยังไงดี ผมอยากได้ JSON มาลองทำก่อน ถ้าให้รอฝั่ง API ผมคงทำไม่ทันแน่ๆ เพราะผมเพิ่งเคยเขียนภาษานี้ครั้งแรก พี่แกก็แนะนำให้ทำ Mockup นี่แหละครับ ตอนแรกก็ว่าจะใช้ Postman แต่มันก็มีข้อจำกัดบางอย่าง สุดท้ายหาไปหามาก็ไปเจอเว็บ mockapi.io ซึ่งเป็นเว็บที่ทำ Mockup ได้ง่ายมากๆ เหมาะสำหรับการทดสอบ API สุดๆ

เกริ่นไปซะยืดยาว เรามาเข้าเรื่องกันดีกว่า mockapi.io เป็นเว็บที่ใช้สำหรับทำ Mockup API ชื่อก็บอกอยู่แล้วเนอะ ฮ่าๆๆ เรามาเริ่มกันเลยดีกว่า ให้ทุกคนเข้าไปสมัครที่เว็บไซต์ mockapi.io พร้อมกับสร้างโปรเจคกันเลยนะครับ เมื่อเสร็จแล้วทุกคนจะได้หน้าตาแบบนี้

เมื่อสร้างโปรเจคเสร็จจะได้หน้าตาแบบนี้…

เมื่อสร้างโปรเจคแล้ว เราก็กดที่ New resource ได้เลยย เอ๊ะ…!! เดี๋ยวก่อนนน ขอแนะนำว่าก่อนจะสร้างโปรเจคควรไปตกลงกับฝั่งทีมเขียน API ก่อนนะว่า JSON จะมีแพทเทิร์นยังไง ในที่นี้ขออนุญาตเอาโปรเจค Bemoregift ซึ่งเป็นโปรเจคเล็กๆ ที่ทำอยู่มหาวิทยาลัยมาสาธิตให้ดูนะครับ สมมุติว่าเราตกลงกับทีม API ว่าจะเอา JSON แพทเทิร์นแบบนี้


[
  {
      "_id": "5c66f2e6e4b9d95080b3dee2",
      "name": "5th Avenue cafe มหาสารคาม",
      "category": "Food & Drink",
      "address": {
        "address": "131/7 ถนนเฉลิมพระเกียรติ ร9 ตำบลตลาด อำเภอเมือง เทศบาลเมืองมหาสารคาม",
        "province": "Maha Sarakham",
        "district": "Mueang Maha Sarakham"
      },
      "location": {
        "lat": 16.1901757,
        "lng": 103.287906
      },
      "rating": {
        "count": 0,
        "sum": 0
      },
      "images": [
        "1550250726729.jpg",
        "1550250726765.jpg",
        "1550250726767.jpg",
        "1550250726808.jpg"
      ]
    },
    {
      "_id": "5c3dda267963f82c6f5e79a1",
      "name": "Dino Khon Kaen  :  ไดโน่ ขอนแก่น ",
      "category": "Appliance",
      "address": {
        "address": "บริษัท ขอนแก่น ไมซ์ แมเนจเม้นท์ จำกัด 99 หมู่ 20 ต.บ้านเป็ด ",
        "province": "Khon Kaen",
        "district": "Mueang Khon Kaen"
      },
      "location": {
        "lat": 16.46026342472845,
        "lng": 102.78665343072316
      },
      "rating": {
        "count": 0,
        "sum": 0
      },
      "images": [
        "1547557412335.jpg",
        "1547557412427.jpg",
        "1547557412858.jpg",
        "1547557413197.jpg",
        "1547557413367.jpg",
        "1547557413538.jpg",
        "1547557413754.jpg",
        "1547557596901.jpg",
        "1547557597473.jpg",
        "1547557597848.jpg",
        "1547557598183.jpg",
        "1547557598443.jpg"
      ]
    }
]

หลังจากตกลงกันเรียบร้อยแล้วเราก็มาทำ Mockup กันเล้ยยย โดยที่จิ้มที่ New resource เบาๆหนึ่งทีจะพบว่าจะมีช่องให้เราสร้าง Endpoint เมื่อสร้างแล้วข้างล่างจะอธิบายว่าเราจะสามารถ GET, POST,PUT และ DELETE ยังไง

การสร้าง Endpoint


เมื่อเราเลื่อนลงไปอีกนิดจะเจอหน้าให้ใส่ Template ดังนี้ เราสามารถก็อปปี้แพทเทิร์นที่เราตกลงกับทีม API ลงไปใส่ได้เลย และสังเกตุตรง Schema ในส่วนของ id เราสามารถเปลี่ยนเป็น _id ตามที่ได้ตกลงกับทีม API ได้ โดยที่ให้ _id เป็น Object ที่ถูกระบบสร้างขึ้นมาให้เอง และในส่วน Schema อื่นๆที่ไม่จำเป็นนั้น เราสามารถลบทิ้งไปได้เลย

สร้าง JSON API เสร็จแล้วววว

หลังจากนั้นเราก็สามารถมาคลิ๊กที่ Data เพื่อเพิ่มข้อมูลใน JSON API ของเราได้เลย

หลังจากกด Update แล้วเราก็มาเริ่มทดสอบกันเล้ยยยย โดยเริ่มจากไปเอาลิงค์ที่

ลิงค์ที่เราจะใช้เป็น Mockip API JSON

ในที่นี้จะเป็น https://5d051bc74068c50014e081b6.mockapi.io/listing ซึ่งเราก็อย่ารอช้า ทำการทดสอบ JSON API ของเราด้วย Postman กันเล้ยยย

  1. GET ด้วย Postman


เฮ้ยยย เรา GET ได้นี่หว่าาา ว้าวววว แค่นั้นยังไม่พอ ไหนมาลอง Post กันซิ

2. Post ด้วย Postman

เราจะลอง Post ข้อมูลด้วย # รัวๆกันดังภาพ และให้ _id เป็น String เปล่า เนื่องจากระบบจะ Gen มาให้อยู่แล้ว


หลังจาก Post แล้ว ไหนเราลองเข้าลิงค์ API ของเราไปดูกันซิ

เฮ้ยยยย Post ได้ด้วยโว้ยยยย เจ๋งดี แต่เดี๋ยวก่อน เรามาลอง PUT เพื่อแก้ไขข้อมูลลองดูซิ ถ้าทุกคนสังเกตุตรงนี้จะเห็นว่ามันบอกวิธีการ GET, POST, PUT, DELETE อยู่


3. PUT ด้วย Postman

วิธีการ PUT ก็ใช้ง่ายๆ โดยการเติม _id ไปที่ท้ายลิงค์ API ของเราเพื่อทำการแก้ไขได้เลย มาลองกันนนน

ในที่นี้จะเปลี่ยนข้อมูลของ _id ที่เท่ากับ 6 ที่เราเพิ่ง Post ไป จาก # รัว ให้เป็น % รัวๆ ดังภาพด้านบน หลังจากกด Send แล้วเรากลับเข้ามาดูในลิงค์ API เราซักหน่อยว่าเป็นยังไง

น่อววว ก็จะเห็นได้ว่าข้อมูลได้เปลี่ยนไปแล้ว เราก็ไม่รอช้ามาทำการ Delete กันเลย

4. DELETEด้วย Postman

การ Delete ก็ทำได้ง่ายๆ คือ ถ้าเราต้องการลบข้อมูลอะไรก็ให้ใส่ _id ของตัวนั้นไปเลยยยยย ในที่นี้จะลบ _id ที่เท่ากับ 6 ที่เราเพิ่งแก้ไขไป

หลังจากนั้นลองมาดูในลิงค์ API ของเรา ท๊าด๊าาาาา

จะพบว่าข้อมูลของ _id = 16 ก็ได้หายไปแล้ว

เป็นไงกันบ้างครับ ถ้าเราทำ Mockup แล้ว ทาง Front-end ก็ไม่ต้องรอ ฝั่งทีมทำ API ก็ Happy การทำงานก็ลุล่วงไปได้ด้วยดี

มาสรุปข้อดี ข้อเสียกันซักหน่อย

ข้อเสีย ( ขอเริ่มจากข้อเสียก่อน ฮ่าๆๆ )

  1. สร้างได้แค่โปรเจคเดียว โปรเจคถัดไปต้องจ่ายเงิน

ข้อดี

  1. ใช้งานง่ายมาก สร้าง JSON API ได้ในไม่ถึง 1 นาที
  2. ถึงจะสร้างได้แค่โปรเจคเดียว แต่ใน 1 โปรเจคนั้นสามารถสร้างได้หลาย Endpoint เราจึงสามารถใช้ประโยชน์จากตรงนี้สร้าง API สำหรับเป็น Mockup ได้

ก็จบไปแล้วนะครับสำหรับการทำ Mockup JSON API ง่ายๆ ในบทความต่อไปเราจะมาลองใช้งาน JSON API กับ Angular 8 กันนะครับ ซึ่งขอบอกเลยว่าการใช้งาน API ผ่าน Angular 8 นี่ง่ายมากๆเหมือนเสกขึ้นมากันเลยทีเดียวครับ ยังไงก็ฝากเนื้อฝากตัวด้วยนะครับ ผมเพิ่งฝึกเขียน Blog ครั้งแรก แหะๆ =^^=