สร้าง RESTful API ด้วย Express — Express 101

Express คืออะไร ?

Express เป็น web application framework บน Node.js ที่ได้รับความนิยมมากๆตัวหนึ่งครับ ซึ่งตัว Express เนี่ยจะมีฟีจเจอร์ต่างๆที่ช่วยให้เราทำเว็บได้สะดวกขึ้น เช่น การทำ routing, middleware การจัดการ request และ response เป็นต้น ทำให้เราสามารถพัฒนาเว็บโดยใช้ Node.js ได้สะดวกและรวดเร็วยิ่งขึ้น

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


ติดตั้ง Node.js และ NPM

  • ติดตั้ง Node.js และ NPM — เราจะติดตั้ง Node.js เพื่อให้สามารถรัน Javascript บน server ได้ และ NPM ไว้สำหรับจัดการแพคเกจต่างๆ สามารถดาวน์โหลดได้จากที่นี่ Node.js & NPM เมื่อติดตั้งแล้วทดลองด้วยการพิมพ์คำสั่ง node -v ใน terminal ถ้าสำเร็จก็จะได้เลข version ของ node กลับมาครับ

สร้างโปรเจคและติดตั้ง Express

เราจะเริ่มต้นโดยการสร้างโฟลเดอร์และไฟล์ package.json นะครับ

mkdir projectname
cd projectname
npm init -y

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

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

ติดตั้ง Express ด้วยคำสั่ง

npm install express --save

ตามคำสั่งก็คือติดตั้ง express ในโปรเจคของเรา โดยแพจเกจที่ติดตั้งทั้งหมดจะอยู่ภายใต้โฟลเดอร์ชื่อว่า node_modules ซึ่งไม่ว่าเราจะติดตั้งอะไรเพิ่มเข้าไปมันก็จะเข้ามาอยู่ในโฟลเดอร์นี้ครับ

เมื่อติดตั้งเสร็จจะได้โฟลเดอร์ node_modules ขึ้นมา และไฟล์ package.json ก็จะอัพเดต โดยจะในนั้นจะบอกว่าเรามี dependency เพิ่มเข้ามา คือ Express นั่นเอง

สร้าง server และ route อย่างง่าย

ให้สร้างไฟล์ server.js โดยไฟล์นี้เราจะใช้เป็นไฟล์สำหรับรัน server แล้วเขียนโค้ดเพื่อสร้าง server ดังนี้

จากโค้ดก็คือเราจะสร้าง server อยู่ที่ port 3000 จะทำให้เราเข้าถึง server ได้ที่ http://localhost:3000 ซึ่งเราสามารถสั่งรันได้ด้วยคำสั่ง

node server.js

เมื่อรันจะเห็น log ขึ้นว่า Start server at port 3000. แสดงว่าทำงานได้ถูกต้อง

เมื่อเราเข้าไปที่ http://localhost:3000 จะได้ผลลัพธ์เป็น Hello World เพราะเราได้สั่งให้ Express รู้ว่าเมื่อมีคนเข้ามาที่ path / ด้วย method get จะส่ง Hello World กลับไป


ออกแบบ RESTful API

ก่อนจะลงมือสร้าง API ก็ต้องออกแบบ API กันก่อนนะครับ ในวันนี้เราจะสร้าง API ของหนังสือในซีรีย์ Game of thrones กันครับ

GET /books ขอข้อมูลหนังสือทั้งหมด
GET /books/1 ขอข้อมูลหนังสือไอดีที่ 1
POST /books สร้างหนังสือ
PUT /books/1 แก้ไขหนังสือไอดีที่ 1
DELETE /books/1 ลบหนังสือไอดีที่ 1

โดยหน้าตาของ RESTful API จะประมาณนี้ครับ ก่อนที่เราจะเริ่มสร้าง route เราจะสร้างไฟล์ที่เก็บหนังสือกันก่อนครับ สร้างไฟล์ชื่อว่า db.json และเพื่มโค้ดของหนังสือตามด้านล่าง เพื่อจำลองข้อมูลกันครับ

จำลอง database ด้วยการใช้ไฟล์ json
ทุกครั้งที่เราแก้โค้ดจะต้องสั่ง node server.js ใหม่ทุกครั้งนะครับ ใครขี้เกียจแนะนำให้ใช้ nodemon เลย จะช่วยให้เซิฟเวอร์เริ่มใหม่ทุกครั้งที่เรากดเซฟไฟล์เลยครับ

มาสร้าง RESTful API กันเลย

จากเมื่อกี้เรามีไฟล์สำหรับใช้รันเซิฟเวอร์แล้ว มีไฟล์ที่ใช้จำลองข้อมูลแทน database แล้ว เราจะมาเริ่มสร้าง API กันเลยครับ

สร้าง API สำหรับขอข้อมูลหนังสือทั้งหมด

เริ่มต้นเราจะทำการ import json ไฟล์เข้ามาใช้ใน server.js ของเรากันครับ และทำการสร้าง API แรกตามนี้ครับ

แค่นี้ก็เรียบร้อยครับ การทำงานก็คือเมื่อมี request เข้ามาที่ /books ด้วย method get เราจะส่งค่าของหนังสือที่เรามีอยู่ กลับออกไปในรูปแบบ json ครับ (ในทางปฏิบัติก็อาจจะเป็นการ query ข้อมูลจาก database แต่เราจะเน้นไปที่การใช้งาน Express นะครับ เลยคิดว่าใช้ array น่าจะไม่ต้องยุ่งยากมากนัก)

รู้จักกับ Postman ผู้ช่วยสำคัญในการทำ API

เรามาลองทดสอบกันผ่าน postman ครับ เป็นโปรแกรมที่ขาดไม่ได้เลยสำหรับการทำ API โดยเจ้า postman เนี่ยมันคือเครื่องมือที่ช่วยให้เราสร้าง API request ได้สะดวกมากๆครับ

เราลองพิพม์ http://localhost:3000/books ลงไปแล้วกด send ก็จะเห็นรายชื่อของหนังสือที่เรามีอยู่ ดังภาพครับ

ผลลัพธ์จากการเรียกใช้ api จะได้ json เป็นรายชื่อหนังสือ

สร้าง API สำหรับขอข้อมูลหนังสือตาม id

ต่อไปเราจะเลือกหนังสือตาม id กัน โดยเราจะใช้ route parameter ทำให้เราสามารถรับ parameter ผ่าน url ได้ดังนี้

จากโค้ดคือเรารับ parameter ชื่อว่า id ซึ่งเมื่อรับเข้ามาแล้ว จะอยู่ใน req.params ตามด้วยชื่อตัวแปรก็คือ id ซึ่งเราก็จะเอา id ไปหาใน array แล้วส่งกลับไป จะได้ผลลัพธ์ดังรูป

ขอข้อมูลหนังสือโดยระบุ id

สร้าง API สำหรับการสร้างหนังสือ

ต่อไปเราจะลองสร้างหนังสือกันดูครับ โดยปกติเวลาสร้างอะไรซักอย่างเราก็จะทำผ่าน method post พร้อมกับส่งข้อมูลสิ่งที่เราจะสร้างผ่าน request body มาด้วยครับ เริ่มต้นเขียนโค้ดกันเลย

จากโค้ดคือเรารับข้อมูลของหนังสือผ่าน req.body แล้วทำการเก็บลงใน database และส่งข้อมูลก้อนนั้นกลับไป และเราสามารถกำหนด status code ได้เองด้วยผ่าน res.status() เพื่อกำหนด status code เองให้เป็น 201 Created

แต่ก่อนที่จะใช้งานให้เราเพิ่ม middleware ที่ใช้สำหรับ parse body message เสียก่อน โดยเราจะติดตั้ง package ชื่อว่า body-parser ก่อนครับ

npm install body-parser --save

และเพิ่มโค้ดตามนี้ครับ

Middleware คือ โค้ดที่ทำหน้าที่เป็นตัวกรอง request ก่อนที่จะเข้ามาถึงแอพพลิเคชั่นของเราครับ ว่าง่ายๆคือก่อนที่จะเข้ามาถึง app.get หรือ app.post เนี่ย มันจะต้องผ่าน middleware ก่อน โดยเราสามารถใช้งาน middleware ได้ผ่าน app.use() ครับ

เราเอา middleware ไปใช้ประโยชน์ได้หลายอย่าง เช่น กรอง request ว่าต้องมีการถือ token มาก่อนนะ ถึงจะเข้ามาเอา resource ของเราได้ หรือเอาไว้เก็บ log ว่าใครเข้ามาที่แอพพลิเคชั่นของเราบ้าง

ในที่นี้เราจะใช้ middleware ในการ parsing request body ครับ โดย bodyParser.json() จะทำให้เรา parse application/json ได้ และ bodyParser.urlencoded({ extended: true }) จะทำให้เรา parse application/x-www-form-urlencoded ได้นั่นเองครับ

คราวนี้มาลองใช้งานผ่าน postman กันดูครับ เลือก method เป็น post พร้อมส่ง request body เป็นข้อมูลของหนังสือไปด้วยครับ จะได้ผลลัพธ์กลับมาเป็น 201 Created พร้อมข้อมูลของหนังสือที่เราเพิ่งเพิ่มไป ดังรูปครับ

เพิ่มข้อมูลหนังสือด้วย method post และส่งข้อมูลผ่าน body

ถ้าอยากเช็คว่าถูกต้องหรือไม่ก็ลองเรียกไปที่ /books ด้วย method get ครับ ควรจะมีหนังสือเพิ่มขึ้นมาอีกหนึ่งเล่มครับผม

สร้าง API สำหรับอัพเดตข้อมูลหนังสือตาม id

ต่อไปเราจะมาลองอัพเดตข้อมูลหนังสือ ซึ่งปกติแล้วจะทำผ่าน method put โดยเราจะต้องเลือกว่าจะอัพเดตจาก id ที่เท่าไหร่ พร้อมส่งข้อมูลที่จะอัพเดตผ่าน request body ด้วยครับ ดังนี้

การทำงานก็คือเราจะหาหนังสือ id ที่เราต้องการ พร้อมอัพเดตข้อมูลเพิ่มเข้าไป ลองใช้งานผ่าน postman ดูครับ

ทำการแก้ไขหนังสือด้วย method put

สามารถตรวจสอบข้อมูลได้ด้วยการเรียก /books ด้วย method get เช่นเดิมครับ

สร้าง API สำหรับลบหนังสือ

และสุดท้ายก็คือการลบหนังสือครับ ผ่าน method delete และส่ง id ของหนังสือที่จะลบไป ตามนี้ครับ

มาลองใช้ด้วย method delete ครับ จะได้ผลลัพธ์เป็น 204 No Content และถ้าลองเรียก method get ที่ /books จะพบว่าหนังสือหายไปแล้วครับผม

ลบหนังสือตาม id โดยจะได้ response code เป็น 204 (No Content) ครับ

เรียบร้อยครับ สำหรับการสร้าง RESTful API ด้วย express สามารถเข้าไปดูตัวอย่างโค้ดที่นี่ได้เลยครับ

สุดท้ายแล้วนี่เป็นแค่แนวทางการทำ RESTful API เบื้องต้นเพื่อให้พอเห็นภาพนะครับ จริงๆแล้วโค้ดทั้งหมดยังต่อยอดได้อีกเยอะเลย เช่น

  • การ handle errors เช่น ถ้าเซฟลง database ไม่ได้จะส่ง response ไปบอกอย่างไร
  • การ validate request เช่น ต้องส่งฟีลด์อะไรมาบ้าง แต่ละฟีลด์เป็นข้อมูลชนิดไหน
  • การจัดโฟลเดอร์และไฟล์ เพราะตอนนี้เราเขียนอยู่ในไฟล์เดียว เมื่อโค้ดโตขึ้นจะแบ่งอย่างไรให้ใช้งานได้สะดวก
  • การเขียน Document เพื่อบอกว่า API ของเรามีอะไรให้ใช้ได้บ้าง ต้องส่งอะไรมาบ้าง เพื่อให้ผู้ใช้สามารถนำไปใช้งานได้

ขอให้สนุกกับการสร้าง API ครับผม เจอกันใหม่บทความหน้าครับ