เห็นเฟรมเวิร์คตัวนี้ผ่านตามาสักพัก ก็เพิ่งเคยได้ลอง แล้วพบว่า เออเฟรมเวิร์กดี ชีวิตดีจริง ๆ สำหรับใครที่เคยปวดหัวกับการสร้าง RESTful API บทความนี้จะช่วยให้ท่านเสียเวลากับมันน้อยลง (รึเปล่า 55)
รู้จักกับ Sails.js
- Sails.js มีคอนเซปต์มาจาก Rails (หากเขียน Rails เป็น ก็จะรู้ว่ามันคล้าย ๆ กัน) เพียงแต่การทำงานของมัน พัฒนามาจาก Node.js เท่านั้นเอง
- Sails.js สามารถเขียนตั้งแต่ต้น จนจบ ครบแบบ Full-Stack เพราะมี Design Pattern ที่เป็นแบบ MVC แม้กระทั่งมือใหม่ ที่ยังไม่รู้จะเริ่มต้นตรงไหน ก็สามารถเริ่มต้นจากเจ้านี่ได้ไม่ยาก
- Sails.js สามารถทำงานแบบ Real-Time ก็ได้ (เขียนครอบ Socket.io) ติดต่อ DB ก็สะดวก รวมถึงการทำ RESTful API ที่โคตรง่าย
Getting Started
ก่อนจะออกไปรบ ก็ต้องมีอาวุธกันก่อน เริ่มที่ …
- Node.js ใช้เฟรมเวิร์กของ Node.js ก็ต้องมี Node.js
- Postman ชิล ๆ ด้วยการใช้ Postman ยิงไปก็พอ
- Sails.js มาถึงพระเอกของเรา ติดตั้งผ่าน npm ง่าย ๆ ด้วยคำสั่งคอมมานด์
npm install sails -gตรวจดูว่าใช้ได้ไหม ด้วยคำสั่ง
sails -vเรือเล็กควรออกจากฝั่ง
หลังจากติดตั้งอาวุธครบเรียบร้อย ก็ได้เวลาเริ่มต้นโปรเจคของเรากันแล้ว เย้ ~
sails new simple-api-sailjsขึ้นหน้าจอแบบนี้ ก็เลือกอันที่ 2 โลดดด ส่วนใครที่อยากลองเล่นโปรเจคแบบเสร็จสรรพ สามารถเลือกข้อที่ 1 ได้เลย
ขั้นตอนต่อไปเป็นการติดตั้ง dependencies ที่ค่อนข้างกินเวลานิดนึง ส่วนถ้าใครอยากข้ามขั้นตอนนี้ ก็เพิ่ม --fast ตามคำแนะนำได้เบยแจ้
เสร็จสิ้นขั้นตอนการติดตั้ง ก็จะเห็นโครงสร้างของโฟลเดอร์ ที่ทาง Sails.js จัดสรรมาให้ อย่าง view, model, controller เรียกว่า เริ่มต้นกับ MVC ได้แบบง่าย ๆ เลยทีเดียว
โดยอธิบายส่วน View กันแบบคร่าว ๆ ก่อนที่เราจะไม่พูดถึงมัน ในบทความนี้ 555
- View — เป็นส่วนแสดง User Interface ของหน้าเว็บ โดยจะเห็นว่าเป็น .ejs จริงๆ ก็สามารถเขียน Syntax html ธรรมดาลงไปได้เลย จะมี 2 ส่วนหลัก ๆ คือ …
- layouts/layouts.ejs ที่เปรียบเสมือนศูนย์กลาง เอาไว้แสดงผลลัพธ์จากไฟล์อื่น ของหน้าวิว รวมถึงเอาไว้อิมพอร์ต lib ต่าง ๆ ใครอยากอิมพอร์ต JS, CSS ก็มาเขียนอยู่ในไฟล์นี้ (Sails เขียนคอมเมนต์สัดส่วนต่าง ๆ ได้ชัดเจนมาก ว่าอะไรควรจะอยู่ตรงไหน ลองเปิดศึกษากันดูได้)
- pages/pages.ejs อันนี้เป็นส่วน <body> ของตัวเว็บ มีอะไรก็มาเขียนลงในนี้ได้ หรือจะสร้างเป็นไฟล์ใหม่ ชื่ออื่น โฟลเดอร์อื่น นอกโฟลเดอร์ ฯลฯ ก็ทำได้หมด แต่อย่าลืมไปเซต routes ใน config/routes.ejs ด้วยนะจ้ะ
แถมท้ายอีกนิดกับ โฟลเดอร์ assets เป็นโฟลเดอร์ที่รวมไฟล์ที่นำมาจากข้างนอก หรือ Customise มันขึ้นมา ก็โยนมาไว้ในนี้ ปกติเมื่อเรามีไฟล์อะไรสักไฟล์ ต้องอิมพอร์ตมันมาก่อนถูกมะ แต่ Sails.js ก็อำนวยความขี้เกียจแบบชาวเรา เมื่อโยนไฟล์แล้ว รันโปรแกรม มันจะอิมพอร์ตให้อัตโนมัติเลย เรียกว่าเป็นทุกอย่างให้เธอแร้วว
แล่นเรือกันหน่อย
ติดตั้งกันไปเรียบร้อย ก็ลองเล่นดูโดยใช้คำสั่ง…
sails liftจากนั้นเซิร์ฟเวอร์จะรันผ่านพอร์ต 1337 เข้าได้ตามนี้ http://localhost:1337/
อย่างที่ได้บอกกันไปต้นบทความ ว่าในบทความนี้เราจะทำส่วนของ API เพราะฉะนั้นส่วนของ View จะขอตัดออก โดยย้อนกลับไปในขั้นตอนแรก
นั่นก็คือ … ตัด Front End ออก โดยใส่ Option เพิ่ม หรือใครจะใช้โปรเจคแรกก็ตามสะดวกแจ้
sails new simple-api-sailjs --no-frontendแท่นแท๊นนน ~ เราก็จะได้โปรเจคที่ไม่มี views, assets, tasks ดูรายละเอียดเพิ่มเติมได้ที่ Document ด้านล่าง …
เริ่มลุย API
หลังจากที่บอกข้อดีของเฟรมเวิร์กตัวนี้ไป ว่ามันสร้าง API ให้ใช้ แบบง่าย ๆ สบาย ๆ ซึ่งวันนี้เราจะมาสร้าง API สำหรับสินค้ากัน ตามนี้
GET /products แสดงรายการสินค้าทั้งหมด
GET /products/1 แสดงรายการสินค้าของไอดีที่ 1
POST /products เพิ่มรายการสินค้า
PUT /products/1 แก้ไขรายการสินค้าของไอดีที่ 1
DELETE /products/1 ลบรายการสินค้าของไอดีที่ 1เมื่อเรารู้แล้วว่าจะสร้างอะไรบ้าง ก็มาถึงขั้นตอนการสร้าง ด้วยคำสั่ง
sails generate api productsรันปุ๊บ จะมี 2 ไฟล์ปรากฏขึ้นมา ในโฟลเดอร์ของ api นั่นคือ …
- controllers/ProductsController.js
- models/Products.js
ทดลองยิง API ด้วย Postman
มาพิสูจน์ความง่ายของมัน โดยเริ่มรันเซิร์ฟเวอร์ จากคำสั่งด้านล่างกันก่อน
sails liftเครื่องมือสำคัญที่ขาดไม่ได้ในการทดสอบ คือ Postman เป็นตัวช่วยที่เอาไว้ใช้ทำ API Request ที่ดีมาก ๆ ลองเล่นกันเลยดีกว่า
> เพิ่มรายการสินค้า
เนื่องจากเรายังไม่มีรายการสินค้าใด ๆ เพราะฉะนั้นก็ต้องเพิ่มกันก่อน
เดี๋ยวในส่วนอื่นจะดูไม่ว้าว … 555
เลือก Method POST พิมพ์ http://localhost:1337/products
พร้อมส่ง Request Body แบบ JSON ของรายการสินค้าไป จากนั้นกด Send
ไม่จำเป็นต้องสร้างคอนโทรลเลอร์ใด ๆ ในโค้ดก่อน ยิง Postman แบบเพียว ๆ + คอมมานด์ไลน์ 1 คำสั่งเท่านั้น กดส่งปุ๊บ ก็สร้างให้ทันที เหมาะกับชาวขี้เกียจแบบเรา ๆ จริง ๆ โคตรง่ายเลยเห็นมะ ?
> แสดงรายการสินค้า
สร้างรายการสินค้าไปแล้ว มาดูกันดีกว่าว่าสินค้าถูกเพิ่มจริงรึเปล่า
เลือก Method GET พิมพ์ http://localhost:1337/products แล้วกด Send
รายการสินค้าทั้งหมดแสดงขึ้นมาแล้ววว ไหนลองแสดงเฉพาะรายการที่ 1 ซิ
พิมพ์ http://localhost:1337/products/1 แล้วกด Send
> แก้ไขรายการสินค้า
มาแก้ไขรายการสินค้าของรายการที่ 1 กัน เนื่องจากชื่อมันไม่โกอินเตอร์เลยอ่ะ
เลือก Method PUT พิมพ์ http://localhost:1337/products/1 พร้อมส่งชื่อที่เราต้องการจะแก้ไขลงไป แล้วกด Send
ถ้าไม่มั่นใจว่ารายการสินค้าถูกอัพเดตจริงรึเปล่า ก็เรียก GET /products ต่อได้เลย
> ลบรายการสินค้า
ก็ชื่อรายการที่ 1 มันโกอินเตอร์ไปอ่ะ นายออกจากแก๊งค์เราไปเรย ถ้าไม่ใช้ภาษาไทย
เลือก Method Delete พิมพ์ http://localhost:1337/products/1 แล้วกด Send
ตรวจดูสักหน่อยก่อนจาก ผ่าน GET /products แล้วกด Send อีกครั้ง
ขับไล่ออกจากแก๊งค์เรียบร้อยแล้ว เย้ ๆ
ข้อมูลอยู่ไหน ?
ทำการเพิ่มรายการต่าง ๆ ไปแล้ว และข้อมูลมันอยู่ที่ไหนกันนะ
คำตอบก็คือ … มันเก็บข้อมูลไว้ในโฟลเดอร์ชื่อ .tmp (สร้างหลังจากที่เราทำการ POST /products โดยในนั้นก็จะบอกว่า เราได้ทำการสร้างข้อมูลอะไรไป หรือลบข้อมูลอะไร จริง ๆ ก็เปรียบเหมือนการเก็บข้อมูลลง JSON นั่นแหละหลักการเดียวกัน
อยากลองเล่น Json-Server ก็จัดไป (ขอบคุณพี่ Phuwasit สำหรับบทความเจ๋ง ๆ)
ทำไมมันสร้างง่ายจัง ?
Sails.js มีตัวที่เรียกว่า Blueprint API ที่คอยอำนวยความสะดวกให้กับโปรแกรมเมอร์ฝึกหัดอย่างเรา ๆ ด้วยการลดขั้นตอนในการเขียนโค้ดให้น้อยลง เพียงแค่เราสร้างคอนโทรลเลอร์กับโมเดล เตรียมไว้ จากนั้นก็สามารถสร้างข้อมูลใด ๆ โดยไม่ต้องเขียนโค้ดเลยสักบรรทัดตามที่กล่าวไปเลย เริ่มหลงรักกันแล้วใช่ไหมล่ะ < 3
แต่ !! ….
ถ้าจะพัฒนากันแบบจริง ๆ จัง ๆ การที่เราสามารถยิง API ไปสร้างข้อมูลได้มันคงจะไม่ปลอดภัยถูกมะ ก็สามารถเข้าไปปิด Blueprints ง่าย ๆ ใน config/blueprints.js
actions: false,
shortcuts: false,
rest: falseหรือปิดแค่บางคอนโทรลเลอร์ก็ย่อมได้นะ
> ทิ้งท้าย <
หวังว่าบทความนี้จะเป็นประโยชน์สำหรับใคร ที่อยากเริ่มต้นมาสายนี้ หรืออยากลองทำ API แต่ปวดหัวกับมันเหลือเกิน 555 ถ้าคราวหน้ามีเวลา จะมาลุยแบบ Full-Stack กันเนาะ
ส่วนใครสนใจอยากลุยล่วงหน้า ก็เข้าไปอ่าน Documention ของ Sails.js ได้เลย เอกสารอ่านง่ายมั่ก แต่ถ้ามีฟีเจอร์ค้นหา จะดีต่อใจกว่านี้ เอาเป็นว่า วันนี้พอแค่นี้ บับบายจ้าา
No comments:
Post a Comment