Web api ว ธ ต งแต เร ม javascript

ก็สวัสดีทุกคนนะครับ กลับมาพบกันอีกแล้ว วันนี้ก็จะมาแนะนำให้ทุกคนรู้จักกับ REST API กันว่ามันคืออะไร ซึ่งถ้าเป็นเพื่อนๆในวงการก็คงจะไม่มีใครไม่มีรู้จัก API กันใช่ไหมครับ ยังไงวันนี้ก็จะมาพูดคุยเกี่ยวกับเรื่อง REST API กันซักหน่อยครับ

สำหรับใครที่งงว่า API คืออะไรเดี๋ยวผมพาไป Google ที่นี่ จิ้มเลย

REST คืออะไร ?

REST ย่อมาจาก Representational State Transfer เป็นรูปแบบการส่งข้อมูลระหว่าง Server-Client รูปแบบหนึ่งซ่ึ่งอยู่บนพื้นฐานของ HTTP Protocol เป็นการสร้าง Web Service เพื่อแลกเปลี่ยนข้อมูลกันผ่าน Application วิธีหนึ่ง ซึ่งส่งข้อมูลได้หลายชนิด ไม่ว่าจะเป็น Text, XML, JSON หรือส่งมาเป็นหน้า HTML เลยก็ยังได้ แต่ส่วนใหญ่แล้วจะเลือกชนิด JSON กันซะมากกว่าด้วยความที่ว่ารองรับได้ทั้งหลายรูปแบบไม่ว่าจะเป็น Browser หรือ Mobile และยังสามารถใช้งานร่วมกับ Web Service ประเภทอื่นๆได้อีก เพียงแค่รู้ URL ก็สามารถแลกเปลี่ยนข้อมูลกันได้ รวมถึงยังจัดการง่ายกว่าด้วยเพียงแค่เรารับข้อมูลมา จากนั้นเราจะเอาข้อมูลไปแสดงผลยังไงก็ได้ตามใจเลย

การส่งข้อมูลระหว่าง Server-Client รูปแบบ REST

REST เบื้องต้น

จากย่อหน้าที่แล้วที่กล่าวถึงว่า REST ทำงานอยู่บนอยู่ใน HTTP Protocol ทำให้เวลาเราใช้งานจะต้องอยู่บนพื้นฐาน HTTP Method เช่น GET, POST, PUT, DELETE เราจะใช้ Method ไหน เมื่อไร ก็ขึ้นอยู่กับว่าเราจะทำอะไรกับข้อมูล แต่ก็ต้องควรใช้คู่กับ Operation CURD เช่น เมื่อเราต้องการจะเรียกดูข้อมูลทั้งหมดก็ใช้ GET เมื่อเราต้องการเพิ่มข้อมูลก็ใช้ POST ดังตัวอย่างเบื้องต้น ซึ่งจริงๆมีอีกหลายตัวดูได้ ที่ี่นี่

GET — R(etrieve) เรียกดูข้อมูล POST — C(reate) เพิ่มข้อมูล PUT — U(pdate) แก้ไขข้อมูล DELETE — D(elete) ลบข้อมูล

แต่.. ถ้าไม่ใช้ตามมาตรฐาน CURD ก็ไม่ได้หมายความว่าจะทำงานไม่ได้ เช่น ในกรณีไม่อยากส่งค่าผ่าน Query String ที่ Method GET เพื่อ Filter Data ก็สามารถที่จะใช้ POST Method โดยการส่ง Parameters ผ่าน Body ก็ได้ซึ่งก็ไม่ได้มีปัญหาอะไร ทั้งนี้ทั้งนั้นก็ขึ้นอยู่กับการออกแบบ API ที่ได้ตกลงกันในทึม(ตามสะดวกครับ)

Express.js กับ RESTful API

จากบทความที่แล้วที่ได้แนะนำตัว Express.js ไปบ้างแล้วว่ามันคือ Framework ในการสร้าง Web Server ของ Node.js วันนี้เราจะมาทำความรู้จักกับ HTTP METHOD ใน express ว่ามีการทำงานกันอย่างไร โดยที่เราจะใช้ POSTMAN ในการทดสอบ API ถ้าใครยังไม่มีก็ไป Download กันก่อนจิ้มเลยยย

หลังจากติดตั้งโปรแกรมเรียบร้อย เมื่อเปิดโปรแกรมจะได้หน้าตาเช่นนี้ เอาล่ะไปสร้าง RESTful กันเลยดีกว่า

โจทย์วันนี้ก็คงจะหนีไม่พ้น CURD Operation โดยที่เราจะจำลองการเรียกทั้ง 4 Method แบบง่ายๆกัน ผ่านข้อมูลง่ายๆ โดยที่เรามาเริ่มสร้าง โปรเจคกันเลย

mkdir ProjectName cd ProjectName npm init

หลังจากที่พิมพ์ npm init ก็จะมีคำถามนิดหน่อยซึ่งเราก็ต้องไปเป็นพิธี โดยคำสั่ง npm init จะเป็นการสร้าง package.json ซึ่งเป็นไฟล์ที่จะเก็บข้อมูลของ Project เราไว้เช่น ชื่อ / version และ package ต่างๆ ที่ใช้

จากนั้นก็ไปดูเกี่ยวกับ package ที่ต้องใช้สำหรับ Project นี้กันหน่อยก็คือ Express / body-parser / morgan / cors โดยเราสามารถ Install รวดเดียวได้เลย โดยพิมพ์ตามนี้

npm install express body-parser morgan cors --save

จะขออธิบายความสามารถของแต่ละ Module สั้นๆ ดังนี้ express — web server framework body-parser — ช่วยในเรื่องการ parsing request morgan — loggerการทำงานของ server(request) cors — จัดการเรื่อง cross origin ของ HTTP

ออกแบบ API กันก่อน

หลังจากเรา Install package ต่างๆเสร็จเรามาออกแบบ API กันตาม CURD Operation กันก่อนโดยที่ เราจะให้มี หน้าตา API ประมาณนี้ * ส่วนใหญ่แล้ว Method ทั้งหลายขึ้นอยู่การกำหนดภายในทีมมากกว่าว่าจะเลือกใช้งานอย่างไร

GET /user // เรียกดูข้อมูล user ทั้งหมด POST /user // เรียกดูข้อมูล user รายบุคคลโดยส่งข้อมูลมาทาง body PUT /user // เพิ่มข้อมูล user PATCH /user // แก้ไขข้อมูล user โดยส่งข้อมูลมาทาง body DELETE /user/:id // ลบข้อมูล user by ID => /user/1 ลบ ID ที่ 1

เตรียม Data กันหน่อย

ก่อนที่เราจะไปสร้าง API กันจะต้องมีข้อมูลไว้ใช้งานก่อน โดยให้เราสร้างไฟล์ user.json ที่มีข้อมูลหน้าตาเป็นแบบนี้

เริ่ม Code ได้เลย

ก่อนอื่นก็ต้องสร้างไฟล์ server.js ขึ้นมาก่อนและเตรียม Code ดังนี้

เมื่อเสร็จแล้วให้ลองสั่ง node server.js ดู ถ้ามี log ออกที่หน้าต่าง Terminal แบบนี้เป็นอันใช้ได้

Server Listen at http://localhost:3000 Users : [ { id: 1, name: 'Harry Potter', age: 17, movie: 'Harry Potter' }, { id: 2, name: 'Dominic Toretto', movie: 'The Fast' }, { id: 3, name: 'Ron Weasley', movie: 'Harry Potter' }, { id: 4, name: 'Tony Stark', movie: 'Avengers' }, { id: 5, name: 'Natasha Romanoff', movie: 'Avengers' } ]

เริ่มทดสอบ API ของเรากันเลยดีกว่า

Get Method — Return ค่า User ทั้งหมด

Get method

POST Method — Create ข้อมูลพร้อม Return ค่า User ทั้งหมด

Post Method

PUT Method — แก้ไขข้อมูลพร้อม Return ค่า User ทั้งหมด

Put Method

DELETE Method — ลบข้อมูลพร้อม Return ค่า User ทั้งหมด

Delete Method

GET Method — อีกครั้งเพื่อทดสอบว่า ข้อมูล User ถูกลบไปจริงๆ

Get Method (อีกครั้ง)

และนี่ก็คือ Log จาก Module Morgan ที่ได้เพิ่มไปตั้งแต่แรกจะแสดงให้เห็นว่ามี Request เข้ามาที่ Server โดย Method อะไรและ Server Return Status อะไรออกไปบ้าง (method ,path , HTTP Status, time, content-size)