Devahoy Logo
PublishedAt

API

ทำ Mock API ด้วย json-server

ทำ Mock API ด้วย json-server

ปกติถ้าเราทำงาน Frontend การที่เราจะทำการดึงข้อมูล API เราจำเป็นต้องรอให้ฝั่ง Backend ทำ API ให้เสร็จ ถึงจะเทสได้ ทีนี้ ถ้าเราอยากเทส API เอง หรืออยากทำ Propotype ก่อน โดยที่ไม่ต้องพึ่งพา Backend เราก็ต้องหา Fake API / mock API ต่างๆ เช่น

แต่วันนี้จะมาแนะนำ json-server ซึ่งเป็นตัวเดียวกับที่ JSONPlaceholder ใช้นั่นเอง

1. ติดตั้ง JSON Server

Terminal window
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": 1
8
},
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": 1
14
},
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": 1
20
},
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": 1
26
},
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": 1
32
}
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

Terminal window
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 เป็นแบบนี้

Terminal window
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/:id

GET

ทดลองยิง GET เพื่อดึงข้อมูล posts ทั้งหมด และ post by id

Terminal window
GET http://localhost:3000/posts
GET 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 ก็ได้)

Terminal window
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 ที่เราต้องการอัพเดท ตัวอย่าง

Terminal window
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 ตัวอย่าง

Terminal window
curl -X DELETE http://localhost:3000/users/13

Filter & Pagination

เราสามารถ filter หรือทำ pagination ได้ด้วย โดยกำหนดว่า จะให้ return ข้อมูลทีละเท่าไหร่ page ไหน ตัวอย่าง การ filter ด้วยการใช้ query string ชื่อเดียวกับ json ของเรา

Terminal window
GET /posts?id=1&id=2
GET /users?email=chuck@norris.com

ตัวอย่างการทำ pagination โดยการส่ง query เป็น page และ limit

Terminal window
GET /users?\_page=2
GET /users?\_page=2&\_limit=20

สามารถใช้ Sort ก็ได้

Terminal window
GET /users?\_sort=username&\_order=asc

หรือใช้ q เพื่อเป็น full text search

Terminal window
GET /posts?q=hello

สรุป

สรุป ตัวอย่างโพสนี้ ก็เป็นเพียงแค่ Mock API แบบง่ายๆ นะครับ เป็น CRUD จากไฟล์ JSON ไม่ได้มี validation หรือ authentication อะไร แต่ตัว json server รองรับ สามารถทำได้ ยังไง ก็ลองไปอ่าน และศึกษาเพิ่มเติมดูนะครับ

Happy Coding ❤️

Authors
avatar

Chai Phonbopit

เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust