TPA จับมือยกระดับค้าปลีกไทย สู่ยุคดิจิทัล ภายในงาน Go Tech Talk 2025
สมาคมโปรแกรมเมอร์ไทย ได้เข้าร่วมงาน Go Tech Talk: Retai […]
การเขียนเว็บเซอร์วิส หรือ เว็บ Api (Application Programming Interface) เพื่อให้เทคโนโลยแพลตฟอร์มต่างๆสามารถแลกเปลี่ยนข้อมูลกันได้ ไม่ว่าจะเป็น OS ,Web ,Mobile Application นั้น มี 2 มาตรฐานที่ได้รับความนิยม ได้แก่
ในการพัฒนาเว็บเซอร์วิสเมื่อ 4-5 ปีที่แล้ว SOAP ได้รับความนิยมมาก แต่ปัจจุบัน คุยกับนักพัฒนาหลายท่านแล้ว ถ้าไม่ปรับปรุงของเดิมที่เคยทำไว้แล้ว ก็มีแต่จะใช้ REST เป็นหลัก วันนี้เราจะมาทำความรู้จักบางส่วนที่จำเป็นของ REST เพื่อนำมาใช้ในการพัฒนา Web Api ใน NodeJS กัน
REST
[img class=”aligncenter” src=”/wp-content/uploads/2016/02/rest.png” ]
รูปที่ 1 แสดง Flow การร้องขอและตอบสนองของ REST API
จากรูป ฝั่ง Client จะส่งคำขอ ไปหาภายทาง ซึ่งใน http โปรโตคอล จะเปรียบเสมือนเอกสารชุดหนึ่ง ที่มีหัวกระดาษ (Header) และเนื่อหาที่อยู่ข้างในตัวเอกสาร (Body) พร้อมประเภทคำสั่ง GET,POST,PUT ,DELETE ไปยังเส้นทางที่ระบุถึงปลายทาง เช่น http://myweb/getdata ฝั่งปลายทางก็จะตอบรับคำขอกลับไป พร้อมทั้งสถานะการตอบกลับที่เป็นมาตรฐาน ดังนี้
การใช้ http method แต่ละตัว มีจุดประสงค์ ดังนี้
จากประสบการณ์รูปแบบการรับส่งที่แตกต่าง มีแค่สองฝั่งคือ GET กับ POST,PUT ,DELETE ซึ่งสามอย่างหลังใช้อะไรแทนกันก็ได้ หรือบางโปรเจคผมใช้ POST อย่างเดียวเลย น่าจะขึ้นอยู่กับการใช้สื่อความหมายมากกว่า เพราะสุดท้ายฝั่งเซิร์ฟเวอร์จะทำงานแบบไหนนั้นก็ขึ้นอยู่กับที่เราเขียนโปรแกรมไว้
มาเริ่มเขียน REST แบบง่ายๆกันดีกว่า
1.ติดตั้งไลบรารี่ body-parser
npm install body-parser
2. สร้างไฟล์ชื่อ ch5_restapi.js ป้อนโค้ด ดังนี
var express = require("express"); var app = express(); var bodyParser = require('body-parser'); app.use(bodyParser.json()); var data =[]; app.get('/get', function (req, res) { console.log('get data'); res.send(data); }); app.post('/add', function (req, res) { console.log('add data'); req.body.id = data.length +1; data.push(req.body); res.send(data); }); app.put('/edit', function (req, res) { if(req.body.id) data[req.body.id-1] = req.body; console.log("edit data!"); res.send(data); }); app.delete('/delete', function (req, res) { if(req.body.id) data.splice(req.body.id-1,1); console.log("delete data!"); res.send(data); }); app.listen(3000); console.log("My Service is listening to port 3000.");
3. Browser Chrome ติดตั้ง Plugin ชื่อ Postman เพื่อทดสอบ Rest Api
[img class=”aligncenter” src=”/wp-content/uploads/2016/02/chormepostman.png”]
4. รันไฟล์ ch5_restapi.js
node ch5_restapi.js
5. เปิด plugin postman ทดสอบฟังก์ชั่น add โดยกำหนดค่าต่างๆ ดังรูป แล้วกดปุ่ม Send เพื่อทดสอบ
[img class=”aligncenter” src=”/wp-content/uploads/2016/02/postmansetup.png”]
6. ทำการเพิ่ม item ต่างๆ และส่งข้อมูลทีละรายการ ดังนี้
7. ทดสอบฟังก์ชั่น edit โดยเปลี่ยน url เป็น http://localhost:3000/edit และ method เป็น PUT ป้อนค่า แล้วกดปุ่ม Send ดังนี้
{“id”:2,”item”:”mango”}
8. ทดสอบฟังก์ชั่น delete โดยเปลี่ยน url เป็น http://localhost:3000/delete และ method เป็น DELETE ป้อนค่า แล้วกดปุ่ม Send ดังนี้
{“id”:3}
9. ทดสอบฟังก์ชั่น get โดยเปลี่ยน url เป็น http://localhost:3000/get และ method เป็น GET แล้วกดปุ่ม Send
อธิบายโค้ด
var bodyParser = require('body-parser');
เรียกใช้ ไลบรารี่ body-parser เพื่ออำนวยความสะดวกในการแปลงรูปแบบ body ของ http เป็นรูปแบบต่างๆ
app.use(bodyParser.json());
กำหนดค่าให้ express ใช้งาน body แบบ json ได้
app.get('/get', function (req, res) { console.log('get data'); res.send(data); });
ใน function(req,res){} จะเป็นรูปแบบ return ค่าแบบ callback ซึ่งจะกล่าวถึงในตอนที่เกี่ยวข้องกับ callback ต่อไป จะสังเกตเห็นว่ามี ออบเจค req และ res ซึ่งหากย้อนกลับไปดูที่รูปที่ 1 ก็คือ request กับ response นั่นเอง
เมื่อมีการเรียกมาที่ /get ด้วย method GET ก็จะส่งค่า data กลับไปยังต้นทาง
app.post('/add', function (req, res) { console.log('add data'); req.body.id = data.length +1; data.push(req.body); res.send(data); });
เมื่อมีการเรียกมาที่ /add ด้วย method POST ก็จะเพิ่มข้อมูลเข้าไปยัง data และส่ง data กลับไปยังต้นทาง
app.put('/edit', function (req, res) { if(req.body.id) data[req.body.id-1] = req.body; console.log("edit data!"); res.send(data); });
เมื่อมีการเรียกมาที่ /edit ด้วย method PUT ก็จะแก้ไขข้อมูลที่ตำแหน่งของ อาร์เรย์ตำแหน่งที่ id -1 ใน data และส่ง data กลับไปยังต้นทาง
app.delete('/delete', function (req, res) { if(req.body.id) data.splice(req.body.id-1,1); console.log("delete data!"); res.send(data); });
เมื่อมีการเรียกมาที่ /delete ด้วย method DELETE ก็จะลบข้อมูลที่ตำแหน่งของ อาร์เรย์ตำแหน่งที่ id -1 ใน data และส่ง data กลับไปยังต้นทาง
ติดตามตอนที่ 6 เทคนิคการแยก Route ไว้หลายๆไฟล์