REST API เป็นเครื่องมือที่จำเป็นมาก สำหรับการทำ Website หรือ Application ในยุคนี้ การใช้งาน JSON Format สะดวกและง่ายดายมาก ในการรับส่งข้อมูล เรามาดูวิธีการสร้าง JSON Server ไว้ใช้งานกันครับ
ตามปกติแล้ว การทำงานของระบบส่วนใหญ่ ก็ต้องใช้งาน backend server สำหรับ ทำให้ระบบสามารถสร้าง database เพื่อจัดเก็บข้อมูลขึ้นมา ซึ่งก็ทั้ง SQL ที่นิยมบนฝั่ง PHP หรือ MongoDB ที่นิยมทางฝั่ง Node JS ซึ่งจริงๆแล้ว stack อย่าง Node js, express, MongoDB ก็นับว่าทำงานสะดวกมากๆเลยทีเดียว
แต่วันนี้ ผมจะหยิบยก json server มาว่ามีการติดตั้งและใช้งานอย่างไร เพราะมันสะดวกมากๆ สำหรับการทำ database เล็กๆน้อย ที่เรียบง่ายมากๆ ไม่มีอะไรยุ่งยาก ซับซ้อน
โดยเราจะใช้ Project นี้กันครับ https://www.npmjs.com/package/json-server
โดยที่เราจะเริ่มจากการ Install ติดตั้งเจ้า Json Server Package กันก่อน ด้วยคำสั่ง
npm install -g json-server
แล้วเราก็สามารถเข้าใช้งานได้แล้ว แต่ต้องเริ่มต้นด้วยการ สร้างไฟล์ database ที่เป็นตัวเก็บข้อมูลกันเสียก่อน เราจะสร้างไฟล์ชื่อ db.json โดยการเก็บ data ที่เป็น json format ตามนี้ (ตัวอย่าง)
{
"blogs": [
{
"title": "Hello Blog",
"body": "สวัสดีคุณบล็อก?\nนอมินีพฤหัสฮ่องเต้แพนด้า ผิดพลาดหลวงพี่กราวนด์ ครูเสดพอเพียง ฮัลโหลไฮเวย์ปูอัดบอร์ด พล็อตเยลลี่ อุปการคุณสโตร์ไหร่ สไตรค์ จัมโบ้เมาท์วาฟเฟิล วอเตอร์ เฟอร์รี่สังโฆ ซาดิสม์โฟล์ค เทเลกราฟหลวงปู่ วานิลลา ดีพาร์ทเมนต์หงวนโปรดักชั่นแฟรนไชส์แอ๊บแบ๊ว โปรเจคท์ โลชั่นอุเทน\nลีกตรวจทานลาตินไรเฟิลมิวสิค เช็กลอร์ดโคโยตี้เทคโนแครต พล็อตวินแมมโบ้ฮาลาล นอมินีเทรลเลอร์ออร์แกนไฮเทค แชมป์ติวเตอร์กู๋ซาดิสต์อุปการคุณ เฮอร์ริเคนภควัมบดี ติ๋มวอลนัท ปาสกาลวอลนัทสปอร์ต วาฟเฟิลวีเจมหภาค แพ็ค มินต์ไทเฮาพาสตาต่อรอง ซีดานแพลนมอคคาซูโม่คอลเล็กชั่น ติวเตอร์ สโรชาสปาย เซาท์แรงใจโบว์ลิ่ง แอ็กชั่นแพทเทิร์นครัวซองชีสกราวนด์",
"author": "teerapuch",
"id": 1
},
{
"title": "ยินดีต้อนรับ!",
"body": "ยินดีต้อนรับ\nแตงกวาล็อตโลชั่นแคร็กเกอร์ ฮาโลวีนฮ่องเต้ วิกโมหจริตปิยมิตร ยาวีโฮลวีตรีโมท อึมครึมคีตปฏิภาณเซลส์พิซซ่า ไอซ์ ไกด์แฟรนไชส์โบรชัวร์เดบิตบุ๋น ตู้เซฟกลาสสตูดิโอปูอัด แจ๊กเก็ตเพลซ โนติสป่าไม้ เคลมอิ่มแปร้ คอร์สรีสอร์ททัวริสต์กษัตริยาธิราชพิซซ่า สงบสุขยาวี รูบิกคอนเซ็ปต์คาแร็คเตอร์เทียมทาน เพรสปาร์ตี้ โทรโข่งแพตเทิร์น",
"author": "kassakul",
"id": 2
}
]
}
แล้วเราก็ทำการ Save ไว้ด้วยชื่อ db.json จากนั้นเราจะลองมาเปิด json-server ดูกันด้วยคำสั่ง
json-server --watch db.jsonแบบนี้ เราก็จะสามารถเข้าสู่หน้า Home ได้ด้วยการใช้ http://localhost:3000 และเข้าสู่หน้า data ของเราด้วย http://localhost:3000/blogs
เท่านี้ data ของเราก็พร้อมใช้งานแล้วครับ ทีนี้ลองมาเรียกแบบ Rest ดูบ้าง จะได้เห็นภาพการใช้งานมากขึ้น โดนเราจะทำการ Get เป็น id ออกมานะครับ
http://localhost:3000/blogs/2
ทีนี้ถ้าจะเข้าถึง Route แบบธรรมดาทั่วไป เราก็จะสามารถทำได้ตามนี้
GET /posts GET /posts/1 POST /posts PUT /posts/1 PATCH /posts/1 DELETE /posts/1
ซึ่งรองรับการทำงานในรูปแบบของ CRUD ครบทั้งอ่าน เพิ่ม ลบ และแก้ไข เดี๋ยวเรามาลอง เพิ่มข้อมูลกันดูนะครับ โดยผมจะใช้ Postman เป็นเครื่องมือที่ใช้การส่งค่า โดยทีจ้อกำหนดว่า เราจะส่ง Method ไปเป็น POST และ Set body Content type ให้เป็น json แล้วค่อยส่งค่าไป
จากนั้นเรากลับไปดูที่ browser กัน เราก็จะเห็นข้อมูลที่เพิ่มมาใหม่
ทีนี้เรามาลองทำการ Update ข้อมูลด้วยการ PUT data เข้าไป โดยผมจะเปลี่ยนชื่อ author จาก teerapuch เป็น sync ดูบ้าง และระบุ id ของ data ที่เราต้องการแก้ไข
หลังจากที่เราทำการ PUT Data เข้าไปใหม่นั้น เราก็จะได้ข้อมูล ที่ถูกแก้ไขไปแล้วแบบนี้
จะเห็นว่า author ของเราถูกแก้ไขไปแล้ว ทีนี้ก็มาต่อกันที่เรื่องของการลบ Delete ตรงนี้เราต้องใช้ Method เป็น Delete เหมือนกัน แต่ไม่ต้องส่งรายละเอียดออกไป ส่งไปแค่ id ที่ต้องการลบ เท่านั้น
ถ้าเราลองเรียกข้อมูลออกมาจาก browser จะพบว่า data id 3 ได้หายไปแล้ว
เราสามารถเปลี่ยนหมายเลข port จาก 3000 เป็นเลขอื่นได้ด้วยคำสั่ง –port
$ json-server --watch db.json --port 3004
ผมคิดว่า การเลือกใช้งานเครื่องมือต่างๆให้เหมาะสม เป็นเรื่องที่สำคัญ เราไม่จำเป็นต้องทำตามสูตร 1 2 3 4 ที่คนอื่นเค้าตีกรอบ แต่เราต้องเลือกเครื่องมือ ให้เหมาะสมกับงานนั้นๆน่าจะดีกว่า
ขอบคุณครับ
