ทำความรู้จัก Express.js

ทำความรู้จัก Express.js

หายไปนานกับบทความ เพราะไม่ค่อยมีเวลาเขียนบทความสักเท่าไร ช่วงนี้ผมกำลังศึกษา MEAN Stack หรือการจัดชุดใหม่ทางด้านเทคโนโลยีการทำเว็บ จากแบบเดิมคือ LAMP stack โดย L = Linux, A = Apache,

M = MySQL, P = Perl, PHP, Python ส่วนของใหม่คือ MEAN อันที่จริงก็ไม่ได้ถือว่าใหม่ซะเท่าไรเพราะมานานแล้วพอสมควร แต่ยังใหม่สำหรับผม เพราะยังไม่ว่างได้ลองหัดสักที โดย

M = MongoDB เป็นฐานข้อมูลแบบ Document NoSQL การดึงค่าหรือส่งค่าจะอยู่ในรูปแบบคล้ายหรือเหมือนกับ JSON เลย จึงทำให้เป็นที่นิยมในการเก็บข้อมูลเพื่อนำไปใช้ในการพัฒนา Restful API ต่อไป

E = Express.js ซึ่งก็จะเป็นตัวที่จะเขียนวิธีการ install และการใช้งานเบื้องต้น มันจะเป็น minimalist web framework for Node.js หลายคนบอกเป็น web framework แต่ความจริงต้องที่คำว่า Minimal ด้วยเพราะตัวมันเล็กมากจริงๆ มีโครงแบบ basic concept ไว้เท่านั้น

A = Angular.js ตัวที่จะเป็นตัวทำหน้าที่เป็น ส่วนพัฒนา front end เพราะมันคือ JavaScript framework ซึ่ง ณ ตอนนี้มีการเปลี่ยนแปลงไปมากสำหรับตัวนี้จาก javascript แบบทั่วๆๆไปก็ใช้มาตรฐาน TypeScript ในการพัฒนาแล้ว

N = Node.js ก็คือ JavaScript runtime ซึ่งเป็นจากการที่ทำการแบบ event-driven, non-blocking I/O และใช้ javascript นั้นมันจึงเป็นตัวการหลักที่เชื่อม 3 ตัวก่อนหน้านี้เข้าด้วยกันกลายเป็น stack ในการพัฒนาเว็บยุคใหม่เกิดขึ้น ด้วย event-driven, non-blocking I/O ทำให้ web สร้างรองรับการทำงานปริมาณการ request หลายๆๆ request พร้อมกันได้

เอาละเรามาเริ่มดูเจ้า Express.js กันเลยดีกว่า ขั้นแรกเราต้องมีการติดตั้ง Node.js ไว้ในเครื่องก่อน ดูวิธีการติดตั้งได้จากบทความนี้ครับ เริ่มเบื้องต้นกับ NODE.JS ซึ่งเป็น version เก่าแต่ในการติดตั้งจริงให้เลือก download version ใหม่ ติดตั้งกันได้นะครับ หลังจากติดตั้งเสร็จแล้วก็ให้เริ่มทำการสร้าง project ขึ้นมาใหม่ไว้ใน directory ที่เราต้องการด้วยคำสั่ง

npm init

เริ่มต้น Express.js

จากนั้นให้ลองเปิดไฟล์ package.json ใน folder ที่เราสร้าง project ไว้ สังเกตจากรูปด้านล่างยังไม่มีการกำหนด dependencies ให้ใช้ express ซึ่งเราต้องทำการกำหนดให้ใช้ express ใน project ที่เราได้สร้างขึ้น

ทำความรู้จัก Express.js

โดยเมื่อสร้าง project node เสร็จแล้วก็ให้ทำการติดตั้ง Express.js เข้าไปใน project ของเราด้วยคำสั้ง

npm install express –save

ทำความรู้จัก Express.js

เมื่อใช้คำสั่งก็จะได้ผลลัพธ์ประมาณรูปด้านบนนี้ครับ

ซึ่งเจ้า option –save นี้จะเป็นการ เพิ่ม dependencies หรือตัว libary ที่เราจำเป็นต้องใช้ใน project ของเรานั้นเองสามารถเข้าไปดูหรือแก้ไขได้ในไฟล์ package.json

หลังจากใช้คำสั่ง npm install แล้วไฟล์ package.json ดังรูปด้านล่างครับ

จะเห็นว่ามีส่วนของ dependencies เพิ่มเข้ามาและเนื่องจากเราไม่ระบุเลข version ของ express มันเลยเอา version ล่าสุดมาให้ครับ

เมื่อติดตั้งเสร็จแล้ว ก็เป็นอันถึงเวลาเข้าใจหลักการทำงานของมันก็คือ การจัดการ request และ response ต่างๆที่ web ต้องรองรับการทำงานก็คือ GET, POST, PUT, DELETE นั้นเองซึ่งเจ้า express.js จะมี function ที่ช่วยในการจัดการ request, response พวกนี้มาให้อยู่แล้ว ส่วนการทำงานว่ารับ request GET จาก URL นี้แล้วจะทำอะไรต่อหรือจะต้อง response กลับให้ client แบบนั้นอยู่ที่การเขียนโปรแกรมแล้วละครับ นอกจากนี้เจ้า express ยังมีการจัดการไฟล์ static และไฟล์ view ในการทำ layout website อีกด้วย นอกจากนี้ยังสามารถทำงานรวมกับ library ตัวอื่นได้อีกด้วยเช่น session, mongodb เป็นต้น ด้วยความสามารถของมันทำครบทุกอย่างที่ web 1 ต้องมีครบแล้วไม่มีลูกเล็กอื่นๆมากนั้นมันจึงเรียกได้ว่าเป็น  minimalist web framework for Node.js นั้นเอง

ซึ่งในบทความนี้ผมของพูดถึงการใช้งาน request และ response หลักอย่าง GET กับ POST เท่านั้นนะครับ

โดยขั้นแรกผมจะสร้างไฟล์ที่มีชื่อว่า server.js ขึ้นมาโดยมีโค้ดดังนี้


var express = require('express');
var app = express();
app.listen(3000);
console.log('Server running at http://localhost:3000');

เมื่อเขียนโค้ดแล้วบันทึกเรียบร้อยให้กลับไปที่หน้า command line สั่งคำสั่ง node เพื่อรันไฟล์ server.js โดยมีคำสั่งดังนี้

node server

node express

โดยคำว่า server ก็คือชื่อไฟล์ server.js นั้นเองเพียงแต่เราไม่ต้องพิมพ์ .js เข้าไปหรือจะพิมพ์ก็ได้แล้วแต่จะสะดวกครับ เพื่อรันคำสั่งนี้แล้วเจ้าไฟล์ server.js ก็จะทำการ listen port 3000 เพื่อรอ client เข้ามาเชื่อมต่อนั้นเองครับ ที่นี้เราลองเปิด web browser เพื่อเข้าไปดู http://localhost:3000 ซึ่งได้ผลลัพธ์ดังรูปครับ

ทำความรู้จัก EXPRESS.JS

ที่มันเป็นแบบนี้เพราะเรายังไม่ทำการกำหนด default route path ว่าถ้าส่ง request แบบ GET ไปยัง path / จะให้เจ้า express ที่เปิด port 3000 ทำอะไร

ในการส่ง request แบบ GET นั้นสามารถใช้ web browser ทดสอบได้เลยแต่ถ้าเป็นแบบ POST, PUT, DELETE นั้นผมแนะนำว่าให้ทำการติดตั้งเจ้า Postman

เมื่อติดตั้งเสร็จก็มาเขียนโค้ดกันต่อโดยทำการแก้ไขไฟล์ server.js เป็นดังนี้


var express = require('express');
var app = express();

function getHandler(req, res){
res.send('Welcome Express GET');
}
app.get('/',getHandler);
app.listen(3000);
console.log('Server running at http://localhost:3000');

หลังจากในไปยังหน้า command line กด ctrl+c เพื่อปิดคำสั่ง listen ของก่อนหน้า แล้วสั่ง

node server

ใหม่เพื่อให้ใช้การทำงานของโค้ดใหม่ที่แก้ไขไป หลังจากนั้นลองเข้า web browser อีกครั้งจะเห็นมามีการแสดงข้อความจาก function getHandler เกิดขึ้น

ทำความรู้จัก EXPRESS.JS

 

function ในการจัดการ request ต่างใน express นั้นจะมีรูปแบบรับ parameter มา 2 ตัวคือ request กับ response ซึ่งใน function getHandler นั้นมีส่ง response กับออกมาผ่านตัวแปร res นั้นเอง

ต่อมาจากเป็นการจัดการ request แบบ POST แต่เนื่องจากการส่งแบบ POST นั้นจะมีการส่งข้อมูลเข้า แล้วโปรแกรมของเราจำเป็นต้องการค่าเหล่านั้นไปใช้งานต่อ แต่เจ้า express นั้นเกิดมาเพื่อจัดการ event request และ response ที่เกิดขึ้นในการเปิด port ที่กำหนดเท่านั้น เพราะฉะนั้นการ get ค่าต่างๆที่ส่งเข้ามาจะทำได้ลำบาก เราจึงจำเป็นต้องใช้ package อีกตัวที่ชื่อว่า body-parser จึงต้องทำการ install ก่อนที่จะเริ่มเขียนตัวจัดการ request แบบ POST โดยใช้คำสั่ง

npm install body-parser –save

ทำความรู้จัก EXPRESS.JS

เมื่อทำการติดตั้ง body-parser เข้ามาใน project แล้วก็ให้ทำการเพิ่มโค้ดในส่วนการจัดการกับ POST ในไฟล์ server.js ดังนี้


var express = require('express');
var app = express();
var bodyParser = require('body-parser');

function getHandler(req, res){
res.send('Welcome Express GET');
}

function postHandler(req, res){
console.log(req.body);
res.send('Receive POST ' + req.body.message);
}

app.use(bodyParser.urlencoded({
extended:true
}));
app.use(bodyParser.json());

app.get('/',getHandler);
app.post('/', postHandler);
app.listen(3000);
console.log('Server running at http://localhost:3000');

เมื่อเสร็จแล้วให้ทำการสั่ง node server ขึ้นมาใหม่ แล้วทำการเปิดโปรแกรม postman ใส่ url เป็น http://localhost:3000/ เพราะทำการ route แค่ path / เท่านั้น

ในส่วนของ body ให้เลือกเป็น raw  และ JSON ดังรูป แล้วใส่ค่า object json เข้าไปด้วย


{
"message":"send message"
}

ทำความรู้จัก EXPRESS.JS

ผลลัพพ์ที่ console

ทำความรู้จัก EXPRESS.JS

เพราะใน function postHandler มีการสั่งให้ console.log (req) ออกมานั้นเอง

สังเกตโค้ดในส่วนที่เพิ่มเข้ามาจะมีการ ใช้ body-parser โดยสั่งคำสั่งของ app.use ซึ่งถ้าเราไม่ใช้คำสั่งนี้เราจะไม่สามารถดึงค่าที่อยู่ใน req.body ซึ่งจะเป็นชุดค่าที่ถูกส่งเข้ามาได้เลย  และอีกจุดที่สังเกตคือ function ในการจัดการ request ของ express นั้นไม่ว่าจะเป็น request ชนิดไหนก็จะต้องคงรูปแบบคือมี parameter 2 ตัวคือ request กับ response นะครับ ก็เอาเป็นว่าของจบบทความแนะนำ express.js ไว้แค่นี้นะครับ หวังว่าผู้อ่านคงจะเข้าใจและเห็นภาพกว้างๆโดยรวมของ express กันนะครับ

ส่วนโค้ดตัวอย่างนั้นเมื่อ download ไปแล้วให้ทำการรันคำสั่ง npm install อย่างเดียวพอนะครับเพราะ package ต่างๆมัน config ไว้ใน package.json แล้ว แต่ถ้าใครเริ่ม project ใหม่ก็ให้ทำตามตัวอย่างได้เลยครับ

Download Sourcecode

Add a Comment

Your email address will not be published. Required fields are marked *