ทำ Mock API ด้วย json-server
![ทำ Mock API ด้วย json-server](/_vercel/image?url=%2Fimages%2F2023%2F04%2Fjson-server.webp&w=828&q=80)
ปกติถ้าเราทำงาน Frontend การที่เราจะทำการดึงข้อมูล API เราจำเป็นต้องรอให้ฝั่ง Backend ทำ API ให้เสร็จ ถึงจะเทสได้ ทีนี้ ถ้าเราอยากเทส API เอง หรืออยากทำ Propotype ก่อน โดยที่ไม่ต้องพึ่งพา Backend เราก็ต้องหา Fake API / mock API ต่างๆ เช่น
แต่วันนี้จะมาแนะนำ json-server ซึ่งเป็นตัวเดียวกับที่ JSONPlaceholder ใช้นั่นเอง
1. ติดตั้ง JSON Server
npm install -g json-server
2. สร้าง db
ขั้นต่อมา ทำการสร้าง db เป็น JSON โดยสมมติ ตั้งชื่อว่า db.json
ข้างใน มีข้อมูล 2 ส่วนคือ posts และ users ตัวอย่างข้อมูลใน db.json
1{2 "posts": [3 {4 "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",5 "id": 1,6 "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",7 "userId": 18 },9 {10 "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",11 "id": 2,12 "title": "qui est esse",13 "userId": 114 },15 {16 "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",17 "id": 3,18 "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",19 "userId": 120 },21 {22 "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",23 "id": 4,24 "title": "eum et est occaecati",25 "userId": 126 },27 {28 "body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque",29 "id": 5,30 "title": "nesciunt quas odio",31 "userId": 132 }33 ],34 "users": [35 {36 "email": "Sincere@april.biz",37 "id": 1,38 "name": "Leanne Graham",39 "username": "Bret"40 },41 {42 "email": "Shanna@melissa.tv",43 "id": 2,44 "name": "Ervin Howell",45 "username": "Antonette"46 },47 {48 "email": "Nathan@yesenia.net",49 "id": 3,50 "name": "Clementine Bauch",51 "username": "Samantha"52 },53 {54 "email": "Julianne.OConner@kory.org",55 "id": 4,56 "name": "Patricia Lebsack",57 "username": "Karianne"58 },59 {60 "email": "Lucio_Hettinger@annie.ca",61 "id": 5,62 "name": "Chelsey Dietrich",63 "username": "Kamren"64 },65 {66 "email": "Karley_Dach@jasper.info",67 "id": 6,68 "name": "Mrs. Dennis Schulist",69 "username": "Leopoldo_Corkery"70 },71 {72 "email": "Telly.Hoeger@billy.biz",73 "id": 7,74 "name": "Kurtis Weissnat",75 "username": "Elwyn.Skiles"76 },77 {78 "email": "Sherwood@rosamond.me",79 "id": 8,80 "name": "Nicholas Runolfsdottir V",81 "username": "Maxime_Nienow"82 },83 {84 "email": "Chaim_McDermott@dana.io",85 "id": 9,86 "name": "Glenna Reichert",87 "username": "Delphine"88 },89 {90 "email": "Rey.Padberg@karina.biz",91 "id": 10,92 "name": "Clementina DuBuque",93 "username": "Moriah.Stanton"94 }95 ]96}
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
ส่วน ถ้าอยากเข้าถึง id ก็จะเป็น /posts/:id
และ /users/:id
4. Basic CRUD
ตัวอย่าง resource สำหรับ CRUD จะถูก mapping เป็นแบบนี้
GET /posts -> รายชื่อ posts ทั้งหมดGET /posts/:id -> ข้อมูล post by idPOST /posts -> เพิ่มข้อมูล postPUT /posts/:id -> update postDELETE /posts/:id -> ลบ post ด้วย id
// ของ users ก็เช่นเดียวกันกับ postsGET /usersGET /users/:idPOST /usersPUT /users/:idDELETE /users/:id
GET
ทดลองยิง GET เพื่อดึงข้อมูล posts ทั้งหมด และ post by id
GET http://localhost:3000/postsGET http://localhost:3000/posts/1
POST
การยิง POST request ลองทดสอบผ่าน Postman หรือใช้ cURL โดยข้อมูลที่เป็น body payload ที่เราต้องการ ถ้าเราไม่ได้ใส่ id ตัว json server จะ auto generate id ให้เราเอง ตัวอย่าง สมมติ ผมอยากเพิ่มข้อมูล users ไปเพิ่ม ซึ่งมันมี schema แบบนี้
1{2 "email": "myemail@example.com",3 "name": "Chuck Norris",4 "username": "chuck"5}
ทดลองส่ง 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/13
Filter & Pagination
เราสามารถ filter หรือทำ pagination ได้ด้วย โดยกำหนดว่า จะให้ return ข้อมูลทีละเท่าไหร่ page ไหน ตัวอย่าง การ filter ด้วยการใช้ query string ชื่อเดียวกับ json ของเรา
GET /posts?id=1&id=2GET /users?email=chuck@norris.com
ตัวอย่างการทำ pagination โดยการส่ง query เป็น page และ limit
GET /users?\_page=2GET /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 รองรับ สามารถทำได้ ยังไง ก็ลองไปอ่าน และศึกษาเพิ่มเติมดูนะครับ
Happy Coding ❤️
- Authors
-
Chai Phonbopit
เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust