ทำ Mock API ด้วย json-server
ปกติถ้าเราทำงาน Frontend การที่เราจะทำการดึงข้อมูล API เราจำเป็นต้องรอให้ฝั่ง Backend ทำ API ให้เสร็จ ถึงจะเทสได้ ทีนี้ ถ้าเราอยากเทส API เอง หรืออยากทำ Propotype ก่อน โดยที่ไม่ต้องพึ่งพา Backend เราก็ต้องหา Fake API / mock API ต่างๆ เช่น
แต่วันนี้จะมาแนะนำ json-server ซึ่งเป็นตัวเดียวกับที่ JSONPlaceholder ใช้นั่นเอง
1. ติดตั้ง JSON Server
2. สร้าง db
ขั้นต่อมา ทำการสร้าง db เป็น JSON โดยสมมติ ตั้งชื่อว่า db.json
ข้างใน มีข้อมูล 2 ส่วนคือ posts และ users ตัวอย่างข้อมูลใน db.json
3. Start Server
ทำการ start server โดย watch ที่ไฟล์ db.json
จะเห็น output แสดง information ต่างๆ ของ json server
ตัว JSON Server มันจะ mapping resources จากข้อมูลใน db.json
ของเรา ซึ่งเรามี array ของ posts และ users ทั้งสอง array ก็กลายเป็น url
ส่วน ถ้าอยากเข้าถึง id ก็จะเป็น /posts/:id
และ /users/:id
4. Basic CRUD
ตัวอย่าง resource สำหรับ CRUD จะถูก mapping เป็นแบบนี้
GET
ทดลองยิง GET เพื่อดึงข้อมูล posts ทั้งหมด และ post by id
POST
การยิง POST request ลองทดสอบผ่าน Postman หรือใช้ cURL โดยข้อมูลที่เป็น body payload ที่เราต้องการ ถ้าเราไม่ได้ใส่ id ตัว json server จะ auto generate id ให้เราเอง ตัวอย่าง สมมติ ผมอยากเพิ่มข้อมูล users ไปเพิ่ม ซึ่งมันมี schema แบบนี้
ทดลองส่ง POST เพื่อเพิ่มข้อมูล ผ่าน cURL (หรือใช้ Postman ก็ได้)
เมื่อเพิ่มข้อมูลแล้ว ลองทดสอบ ด้วยการ GET http://localhost:3000/users/11 เราจะเห็นข้อมูลที่เราเพิ่งเพิ่มลงไป
PUT
การอัพเดทข้อมูล เราก็ยิง PUT Requeset ไปที่ /users/:id
ที่เราต้องการอัพเดท พร้อมด้วย body ที่เราต้องการอัพเดท ตัวอย่าง
DELETE
ลบข้อมูล ก็ใช้ DELETE ไปที่ /users/:id
ตัวอย่าง
Filter & Pagination
เราสามารถ filter หรือทำ pagination ได้ด้วย โดยกำหนดว่า จะให้ return ข้อมูลทีละเท่าไหร่ page ไหน ตัวอย่าง การ filter ด้วยการใช้ query string ชื่อเดียวกับ json ของเรา
ตัวอย่างการทำ pagination โดยการส่ง query เป็น page และ limit
สามารถใช้ Sort ก็ได้
หรือใช้ q เพื่อเป็น full text search
สรุป
สรุป ตัวอย่างโพสนี้ ก็เป็นเพียงแค่ Mock API แบบง่ายๆ นะครับ เป็น CRUD จากไฟล์ JSON ไม่ได้มี validation หรือ authentication อะไร แต่ตัว json server รองรับ สามารถทำได้ ยังไง ก็ลองไปอ่าน และศึกษาเพิ่มเติมดูนะครับ
Happy Coding ❤️
- Authors
-
Chai Phonbopit
เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust