เริ่มต้นเรียนรู้การเขียนโปรแกรมด้วย Node.js ตอนที่ 5 แนะนำ Express

ผมเชื่อว่าหลายคนคงรู้จัก Express โดยเฉพาะที่คุ้นเคยกับโปรแกรมบัญชีที่ชื่อว่า Express (ตอนที่ผมหาข้อมูลแรกๆก็คิดเหมือนกันแหล่ะครับ) แต่มันไม่ใช่ Express ที่เป็นโปรแกรมเกี่ยวกับบัญชี

Express คือ Framework ที่ใช้จัดการคำขอ Request และ Response ที่ส่งมาจาก HTTP หรือ Web Browser หรือเรียกง่ายๆว่า Middleware เป็นตัวกลางหรือ Server ในการจัดการเส้นทางระหว่างเครื่องลูกข่ายและแม่ข่ายด้วยภาษา Java Script (ดังที่ผมกล่าวมาแล้วตอนแรก เพราะ Node.js เป็นภาษา Java Script ดังนั้น Express ก็เลยทำงานด้วยภาษา Java Script นั่นเอง)

Middleware อย่างง่าย

การทำงานของ Middleware นั้นถ้าไม่เป็นพิธีอะไรมาก จะกำหนดค่าอย่างง่าย เพื่อให้ข้อความที่เราต้องการแสดงผลทาง Web Browser ผมจะเขียนตัวอย่างง่ายๆ ให้ดูครับ

ตัวอย่าง ต้องการแสดง Hello World (อีกแล้ว) ออกไปที่ Google Chrome (เดี๋ยวบางท่านอาจจะไม่รู้จัก Web Browser เลยต้องบอก Google Chrome ไว้ก่อน) ถ้าหากติดตามตอนที่ 2 มาแล้วก็แสดงว่าติดตั้ง Node.js ในเครื่องเรียบร้อยแล้ว

1. เปิด Visual Studio Code ต่อไปผมจะพิมพ์คำว่า VS Code แทนนะครับ แล้วสร้างโฟลเดอร์ที่ทำงาน จากนั้น สร้างไฟล์ app.js ขึ้นมา

2. ทำการติดตั้ง Express ด้วยคำสั่ง npm ให้เปิด Terminal ใน VS Code ขึ้นมาแล้วพิมพ์คำสั่ง

npm install express

 ตัวโปรแกรมจะทำการติดตั้งให้เองโดยอัตโนมัติ (ง่ายดีไหมล่ะ) จะมี error ไม่ต้องสนใจครับ

3. เขียน Code ลงไปใน app.js ดังนี้

var express = require('express');

var app = express();

app.get('/', function (req, res, next) {

res.send("<h1>Hello World</h1>");

});

app.listen(8000);

พยายามให้พิมพ์เองนะครับ อย่า Copy เพราะเป็นการฝึกให้ชิน แต่ถ้าเป็นพวก Bootstap หรือ CSS อื่นๆ จะ Copy ก็ได้ไม่ว่ากัน ขอเพียงรู้คำสั่งสักนิดครับ

4. ทำการ seve file แล้วเปิด Terminal แล้ว run ด้วยคำสั่ง node app.js

จาก Code ข้อ 3 อธิบายดังนี้

1. var express = require('express'); เป็นการประกาศตัวแปร express โดยการนำ express หรือ middleware ที่ติดตั้งเข้ามาทำงานในไฟล์

2. var app = express(); เป็นการประกาศใช้งานอ็อบเจ็คที่อยู่ใน middleware ครับ เมื่อเราประกาศแล้วเราจะสามารถใช้อ็อบเจ็คต่างๆใน express ได้ เช่นบรรทัดที่ 3

3. app.get('/', function (req,res, next){ บรรทัดนี้จะเรียกอ็อบเจ็ค get ใน express มาใช้งานเพื่อแสดงผลไปยัง '/' ซึ่งก็คือหน้าแรก จากนั้นประกาศเรียกใช้ฟังก์ชัน req, res, next

4. res คือ response หรือส่งค่ากลับออกไปยัง '/' โดยมีข้อความว่า Hello World ที่เป็นหัวข้อตัวใหญ่ <H1></H1> โดย res จะมีการส่งหลายรูปแบบ แต่ในตัวอย่างเป็น res.send

5. app.listen(8000); เป็นการกำหนด port ให้ localhost ในเครื่องของเราดังนั้นเวลาเรียกใช้งาน localhost ต้องมี port ตามด้วยคือ http://127.0.0.1:8000 จะได้ผลลัพธ์ในรูปด้านล่าง

สรุป Express คือ Framework สำหรับ server ที่ใช้จัดการกับ Request และ Response ที่ทำงานร่วมกับ Web Browser โดยเรารับค่าจาก Browser นั่นคือ req หรือ Request ซึ่งรับได้ทั้ง get และ post (get และ post คือการส่งค่าเช่น username และ password จากช่องกรอกข้อความใน web browser มายัง server) และส่งค่า res หรือ Response กลับไปหาลูกข่าย ซึ่งส่งผลเป็น get ไปแสดงข้อความบนหน้าเว็บ 

สำหรับบทความนี้ จบเพียงเท่านี้ครับ พบกันใหม่บทความหน้า สวัสดีครับ