ทำ Mock API ด้วย json-server
ปกติถ้าเราทำงาน Frontend การที่เราจะทำการดึงข้อมูล API เราจำเป็นต้องรอให้ฝั่ง Backend ทำ API ให้เสร็จ ถึงจะเทสได้ ทีนี้ ถ้าเราอยากเทส API เอง หรืออยากทำ Propotype ก่อน โดยที่ไม่ต้องพึ่งพา Backend เราก็ต้องหา Fake API / mock API ต่างๆ เช่น
แต่วันนี้จะมาแนะนำ json-server ซึ่งเป็นตัวเดียวกับที่ JSONPlaceholder ใช้นั่นเอง
typicode1. ติดตั้ง JSON Server
npm install -g json-server2. สร้าง db
ขั้นต่อมา ทำการสร้าง db เป็น JSON โดยสมมติ ตั้งชื่อว่า db.json ข้างใน มีข้อมูล 2 ส่วนคือ posts และ users ตัวอย่างข้อมูลใน db.json
{
"posts":
[
{
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"userId": 1
},
{
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
"id": 2,
"title": "qui est esse",
"userId": 1
},
{
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut",
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"userId": 1
},
{
"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit",
"id": 4,
"title": "eum et est occaecati",
"userId": 1
},
{
"body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque",
"id": 5,
"title": "nesciunt quas odio",
"userId": 1
}
],
"users":
[
{
"email": "Sincere@april.biz",
"id": 1,
"name": "Leanne Graham",
"username": "Bret"
},
{
"email": "Shanna@melissa.tv",
"id": 2,
"name": "Ervin Howell",
"username": "Antonette"
},
{
"email": "Nathan@yesenia.net",
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha"
},
{
"email": "Julianne.OConner@kory.org",
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne"
},
{
"email": "Lucio_Hettinger@annie.ca",
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren"
},
{
"email": "Karley_Dach@jasper.info",
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery"
},
{
"email": "Telly.Hoeger@billy.biz",
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles"
},
{
"email": "Sherwood@rosamond.me",
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow"
},
{
"email": "Chaim_McDermott@dana.io",
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine"
},
{
"email": "Rey.Padberg@karina.biz",
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton"
}
]
}3. Start Server
ทำการ start server โดย watch ที่ไฟล์ db.json
json-server --watch db.jsonจะเห็น output แสดง information ต่างๆ ของ json server
ตัว JSON Server มันจะ mapping resources จากข้อมูลใน db.json ของเรา ซึ่งเรามี array ของ posts และ users ทั้งสอง array ก็กลายเป็น url
- http://localhost:3000/posts
- http://localhost:3000/users
ส่วน ถ้าอยากเข้าถึง id ก็จะเป็น /posts/:id และ /users/:id
4. Basic CRUD
ตัวอย่าง resource สำหรับ CRUD จะถูก mapping เป็นแบบนี้
GET /posts -> รายชื่อ posts ทั้งหมด
GET /posts/:id -> ข้อมูล post by id
POST /posts -> เพิ่มข้อมูล post
PUT /posts/:id -> update post
DELETE /posts/:id -> ลบ post ด้วย id
// ของ users ก็เช่นเดียวกันกับ posts
GET /users
GET /users/:id
POST /users
PUT /users/:id
DELETE /users/:idGET
ทดลองยิง GET เพื่อดึงข้อมูล posts ทั้งหมด และ post by id
GET http://localhost:3000/posts
GET http://localhost:3000/posts/1POST
การยิง POST request ลองทดสอบผ่าน Postman หรือใช้ cURL โดยข้อมูลที่เป็น body payload ที่เราต้องการ ถ้าเราไม่ได้ใส่ id ตัว json server จะ auto generate id ให้เราเอง ตัวอย่าง สมมติ ผมอยากเพิ่มข้อมูล users ไปเพิ่ม ซึ่งมันมี schema แบบนี้
{
"email": "myemail@example.com",
"name": "Chuck Norris",
"username": "chuck"
}ทดลองส่ง POST เพื่อเพิ่มข้อมูล ผ่าน cURL (หรือใช้ Postman ก็ได้)
curl -L -X POST 'http://localhost:3000/users' \
-H 'Content-Type: application/json' \
--data-raw '{
"email": "myemail@example.com",
"name": "Chuck Norris",
"username": "chuck"
}'เมื่อเพิ่มข้อมูลแล้ว ลองทดสอบ ด้วยการ GET http://localhost:3000/users/11 เราจะเห็นข้อมูลที่เราเพิ่งเพิ่มลงไป
PUT
การอัพเดทข้อมูล เราก็ยิง PUT Requeset ไปที่ /users/:id ที่เราต้องการอัพเดท พร้อมด้วย body ที่เราต้องการอัพเดท ตัวอย่าง
curl -L -X PUT 'http://localhost:3000/users/11' \
-H 'Content-Type: application/json' \
--data-raw '{
"email": "chuck@norris.com",
"name": "Chuck Norris",
"note": "updated!"
}'DELETE
ลบข้อมูล ก็ใช้ DELETE ไปที่ /users/:id ตัวอย่าง
curl -X DELETE http://localhost:3000/users/13Filter & Pagination
เราสามารถ filter หรือทำ pagination ได้ด้วย โดยกำหนดว่า จะให้ return ข้อมูลทีละเท่าไหร่ page ไหน ตัวอย่าง การ filter ด้วยการใช้ query string ชื่อเดียวกับ json ของเรา
GET /posts?id=1&id=2
GET /users?email=chuck@norris.comตัวอย่างการทำ pagination โดยการส่ง query เป็น page และ limit
GET /users?_page=2
GET /users?_page=2&_limit=20สามารถใช้ Sort ก็ได้
GET /users?_sort=username&_order=ascหรือใช้ q เพื่อเป็น full text search
GET /posts?q=helloสรุป ตัวอย่างโพสนี้ ก็เป็นเพียงแค่ Mock API แบบง่ายๆ นะครับ เป็น CRUD จากไฟล์ JSON ไม่ได้มี validation หรือ authentication อะไร แต่ตัว json server รองรับ สามารถทำได้ ยังไง ก็ลองไปอ่าน และศึกษาเพิ่มเติมดูนะครับ
typicodeHappy Coding ❤️
