มาจำลอง REST API ไว้ใช้งานด้วย json-server กันเถอะ

สถานการณ์นี้เคยเกิดขึ้นกับคุณหรือทีมของคุณหรือไม่ ระบบประกอบด้วย Front-end และ Back-end แยกออกจากกัน แน่นอนว่า Developer ก็แยกออกเป็นสองทีมเช่นกัน ทีม Front และ Back ประชุมกันอย่างดีว่า API ของเราหน้าตาควรเป็นอย่างไร หลังประชุมเสร็จทีม Front-end ก็แยกกลับมาที่โต๊ะทำงาน... ก้นยังไม่ทันหย่อนลงเก้าอี้ จึงนึกได้ว่า เดี๋ยวนะ ทีม Back ยังไม่ทำ API ให้นี่หว่า แล้วข้าพเจ้าจะเทสกับอะไร?

เหตุการณ์สมมตินี้มีทางออก เพราะตั้งอยู่บนฐานที่ว่า เราออกแแบบ API กันคร่าวๆพอให้เห็นภาพแล้ว ฉะนั้นถ้า API ของจริงฝั่ง Back-end ยังไม่คลอดออกมา Front-end อย่างเราก็นั่งเทียนจำลองขึ้นตามข้อตกลงที่คุยกันไว้

อย่าสร้าง API เสมือนตนเป็น Back-end เสียเอง

เมื่อไม่มี API เราก็สร้างมันซะเลย ไม่เห็นยาก! ใช่ครับมันไม่ยากแต่มันเป็นงานที่ทับซ้อนกับฝั่ง Backend ทุกครั้งที่ API เปลี่ยนเราต้องมานั่งแก้ตามสเป็คใหม่ สงสารทีม Backend เขาครับ ถ้าเราทำมันทุกอย่างทีมนั้นคงตกงานกันพอดี

แค่ Mock ก็พอ

สิ่งที่เราควรทำคือจำลองข้อมูลเสมือนเป็นก้อนข้อมูลจริง ในบทความนี้จะนำเสนอการใช้งาน json-server เพื่อจำลอง REST API ขึ้นมาใช้งาน

เจ้าเครื่องมือตัวนี้ต้องติดตั้งผ่าน NPM ดังนี้ครับ

1$ npm install -g json-server

เราต้องการจำลอง API เราก็ต้องมีก้อนข้อมูลที่จะให้เจ้าเครื่องมือตัวนี้ส่งกลับไปที่ client ด้วยการสร้างไฟล์ json ขึ้นมาซักไฟล์ชื่อ db.json

1{
2  "users": [
3    { "id": 1, "name": "json-server" },
4    { "id": 2, "name": "babel coder" }
5  ]
6}

จากนั้นก็สตาร์ทเซิฟเวอร์ขึ้นมาครับด้วยคำสั่งนี้

1json-server --watch db.json

ถึงตอนนี้เราจะได้ API แบบง่ายๆของ User ไว้ใช้ทดสอบแล้วครับ ลองเข้าไปทดสอบที่ http://localhost:3000/users ดูครับ จากก้อนข้อมูลที่เราใส่เข้าไปง่ายๆ ได้ Routes ออกมาดังนี้

1GET    /users
2GET    /users/:id
3POST   /users
4PUT    /users/:id
5PATCH  /users/:id
6DELETE /users/:id

Random ข้อมูล

ในการใช้งานจริง คงไม่มีใครเพิ่ม user แค่สองตัวลงไปครับ ครั้นจะเพิ่มซักร้อยตัวด้วยการก็อบปี้-วางซักร้อยบรรทัดเห็นท่าจะไม่ไหว เราสามารถเขียนลูปด้วย JavaScript เพื่อ Random ข้อมูลได้ดังนี้ แต่ก่อนอื่นเราต้องเปลี่ยนนามสกุลไฟล์เป็น js ก่อนนะครับ

1// db.js
2module.exports = function () {
3  var data = { users: [] }
4
5  for (var i = 1; i <= 100; i++) {
6    data.users.push({ id: i, name: 'user' + i })
7  }
8  return data
9}

ลองรันใหม่

1json-server --watch db.js

เข้าไปที่ http://localhost:3000/users จะพบ 100 articles ตามปรารถนา

อย่าใช้ข้อมูลที่ไกลความจริง

ในโลกความจริงไม่มีผู้ใช้งานระบบที่ไหนตั้งชื่อ user1, user2, ... ครับ ดังนั้นเราควรใช้ชื่อที่ใกล้เคียงความจริงให้มากสุดในการทดสอบ เพื่อเป็นตัวการันตีว่า front-end ของเราจะไม่เกิดข้อผิดพลาดใดๆเมื่อใช้งานกับชื่อจริง

faker.js ใช้สร้าง Fake data แบบมีชั้นเชิงคือเป็นข้อมูลเสมือนจริง เช่นถ้าเราต้องการชื่อคน Faker ก็จะสร้างชื่อให้เป็น Rowan Nikolaus หรือชื่ออื่นๆ ที่ไม่ใช้ user1 แบบที่เราทำในตัวอย่างก่อน

ก่อนอื่นต้องติดตั้ง faker.js ก่อนดังนี้

1npm i faker --save-dev

จากนั้นจึงกลับมาแก้ไข db.js

1var faker = require('faker')
2
3module.exports = function () {
4  var data = { users: [] }
5
6  for (var i = 1; i <= 100; i++) {
7    data.users.push({ id: i, name: faker.name.findName() })
8  }
9  return data
10}

ทดสอบ API ของเราอีกรอบที่ http://localhost:3000/users จะพบผลลัพธ์ที่ดูดีขึ้น

1[
2  {
3    "id": 1,
4    "name": "Jocelyn Daugherty"
5  },
6  {
7    "id": 2,
8    "name": "Therese Gislason"
9  },
10  {
11    "id": 3,
12    "name": "Elyssa Johnston DDS"
13  },
14  ....
15]

json-server ช่วยให้เราจำลอง REST API ได้ง่ายขึ้น มีอีกหลายคุณสมบัติที่ผมไม่ได้กล่าวถึงในนี้ เช่น การสร้าง Routes file, ทำ authentication และอื่นๆ ท่านใดสนใจลองเข้าไปอ่านเอกสารตัวเต็มจาก Github ของ json-server ได้ครับ

ในที่สุดฝั่ง Back-end ก็ทำ API ของจริงเสร็จแล้ว ฮูเร่!

ทีม Backend ครื้นเครงมากเพราะตอนนี้ทำ API ของ users เสร็จเรียบร้อย ทุกคนแฮปปี้ ชีวิตดี้ดี แต่... ตัดกลับมาที่ทีม Front-end ทุกคนเริ่มกุมขมับ เฮ้ย พวกเราจะเอายังไงกับชีวิตดี จะกลับไปใช้ API ตัวจริงดีไหม? แต่เราก็เทสกับของปลอมมาตลอดนะ?

ข้อหนึ่งที่เราจะลืมไม่ได้คือ เราทำ Front-end เพื่อใช้กับ API จริงๆบน Production หากเราทดสอบแต่ Mock API เมื่อ API จริงมีการเปลี่ยนแปลง เช่น ฝั่ง Backend เปลี่ยน attribute ของ User จาก name เป็น fullName แบบนี้ผลเทสของโปรแกรมฝั่ง Front-end จะถูกตลอดเพราะไม่ได้อัพเดทตามของจริง

ถึงอย่างนั้น การใช้ Mock API ก็ยังคงสะดวกต่อการพัฒนา เราไม่ต้องรันซอฟต์แวร์ของ API Server ทุกครั้งที่จะทดสอบ อีกทั้งยังง่ายต่อการรันเทส ฉะนั้นแล้วเมื่อเราคิดจะใช้เครื่องมือ Mock API เราก็ควรจะอัพเดทก้อนข้อมูลของเรา ให้เป็นดั่งผลลัพธ์จริงๆที่เราได้จาก API ของจริงด้วยการใช้ Recorder Tools ต่างๆ เช่น Nock หรือ VCR.js บันทึกก้อนข้อมูลจาก API Server ทุกครั้งที่ API Server ตัวจริงมีการเปลี่ยนแปลง เพียงเท่านี้เราก็จะมีเวลาเหลือไปเรียนแต่งหน้า นั่งสมาธิ ดำน้ำ ปลูกปะการัง ทำอาหาร นวดสปา ปลูกป่า ดำนา ดูดิสนีย์ออนไอซ์ แรลลี่ ตีกอล์ฟ ล่องเรือ ส่องสัตว์ ชอปปิ้ง ดูงิ้ว ดูละครเวที ดูคอนเสิร์ต ดินเนอร์ ทำขนม จัดดอกไม้ เที่ยวตลาดน้ำ เรียนถ่ายรูป ดูกายกรรม ชมเมืองเก่า เข้าสัมมนา ทัวร์ธรรมะ เรียนเต้น แล้วก็ร้องเพลง...