Node.js เบื้องต้น

Node.js เบื้องต้น: JavaScript สู่ Server-Side

จากบทที่แล้วที่เราได้สำรวจโลกของ WebGL และการสร้างกราฟิก 3D ในเบราว์เซอร์ บทนี้เราจะเปลี่ยนมุมมองจากฝั่ง Client-Side มาสู่ Server-Side ด้วย Node.js Node.js คือ JavaScript runtime environment ที่ช่วยให้เราสามารถรัน JavaScript บน Server ได้ ซึ่งเป็นการเปิดประตูสู่การสร้าง Web Application ที่มีประสิทธิภาพและ scalable มากยิ่งขึ้น

ทำไมต้อง Node.js?

ก่อนที่เราจะเริ่มลงมือปฏิบัติ มาทำความเข้าใจกันก่อนว่าทำไม Node.js ถึงเป็นที่นิยมและมีประโยชน์ในการพัฒนา Web Application

JavaScript Everywhere: หนึ่งในข้อได้เปรียบที่ใหญ่ที่สุดของ Node.js คือการที่เราสามารถใช้ภาษา JavaScript ทั้งฝั่ง Client-Side (เบราว์เซอร์) และ Server-Side ทำให้ลดความซับซ้อนในการพัฒนาและบำรุงรักษาโค้ด
Non-Blocking I/O: Node.js ใช้ Event-Driven, Non-Blocking I/O Model ซึ่งทำให้สามารถจัดการกับ Concurrent Request จำนวนมากได้อย่างมีประสิทธิภาพ เหมาะสำหรับ Application ที่ต้องการความเร็วในการตอบสนองสูง (High Throughput) เช่น Real-Time Application, Chat Application, หรือ API Server
NPM Ecosystem: Node.js มาพร้อมกับ NPM (Node Package Manager) ซึ่งเป็น Package Manager ที่ใหญ่ที่สุดในโลก มี Libraries และ Modules ให้เลือกใช้มากมาย ช่วยให้เราสามารถพัฒนา Application ได้อย่างรวดเร็วและง่ายดาย
Scalability: Node.js สามารถ Scale ได้ง่าย ทั้งในแนวตั้ง (Vertical Scaling) โดยการเพิ่มทรัพยากรให้กับ Server และในแนวนอน (Horizontal Scaling) โดยการเพิ่มจำนวน Server

การติดตั้ง Node.js

ขั้นตอนแรกคือการติดตั้ง Node.js บนเครื่องของเรา คุณสามารถดาวน์โหลด Node.js ได้จากเว็บไซต์อย่างเป็นทางการ: https://nodejs.org/ เลือก Package ที่เหมาะสมกับระบบปฏิบัติการของคุณ (Windows, macOS, Linux)

หลังจากดาวน์โหลดเสร็จ ให้ทำการติดตั้งตามขั้นตอนที่ปรากฏบนหน้าจอ โดยทั่วไปแล้ว การติดตั้ง Node.js จะมาพร้อมกับ NPM ด้วย

หลังจากติดตั้งเสร็จ ให้ตรวจสอบว่า Node.js และ NPM ถูกติดตั้งอย่างถูกต้อง โดยเปิด Command Prompt หรือ Terminal แล้วพิมพ์คำสั่งต่อไปนี้:

node -v
npm -v

ถ้าทุกอย่างเรียบร้อย คุณควรจะเห็นหมายเลข Version ของ Node.js และ NPM ปรากฏขึ้น

คำสั่ง NPM: ผู้ช่วยจัดการ Dependencies

NPM (Node Package Manager) เป็นเครื่องมือสำคัญในการจัดการ Dependencies หรือ Library ที่เราใช้ใน Project ของเรา นี่คือคำสั่ง NPM ที่ควรรู้จัก:

npm init: สร้าง package.json file ซึ่งเป็นไฟล์ที่เก็บข้อมูลเกี่ยวกับ Project ของเรา เช่น ชื่อ, Version, Dependencies, และ Scripts
npm install <package-name>: ติดตั้ง Package ที่ต้องการ เช่น npm install express จะติดตั้ง Express.js ซึ่งเป็น Web Framework ยอดนิยมสำหรับ Node.js
npm install: ติดตั้ง Dependencies ทั้งหมดที่ระบุไว้ใน package.json file
npm uninstall <package-name>: ถอนการติดตั้ง Package
npm update <package-name>: อัปเดต Package ให้เป็น Version ล่าสุด
npm start: รัน Application ตามที่ระบุไว้ใน package.json file (โดยทั่วไปคือ node index.js หรือ node server.js)

package.json: ไฟล์สำคัญที่ต้องมีในทุก Project Node.js

เมื่อคุณรัน npm init NPM จะถามคำถามเกี่ยวกับ Project ของคุณ เช่น ชื่อ, Version, Description, Entry Point (ไฟล์เริ่มต้นของ Application), และ License คุณสามารถตอบคำถามเหล่านี้ หรือกด Enter เพื่อใช้ค่า Default ได้ เมื่อเสร็จแล้ว NPM จะสร้าง package.json file ให้คุณ

ตัวอย่าง package.json file:

{
  "name": "my-node-app",
  "version": "1.0.0",
  "description": "A simple Node.js application",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1"
  }
}

ใน package.json file เราจะเห็น Section dependencies ซึ่งระบุ Package ที่ Project ของเราใช้ เช่น "express": "^4.17.1" หมายความว่า Project นี้ใช้ Express.js Version 4.17.1 หรือสูงกว่าแต่ไม่เกิน Version 5

สร้าง Server ง่ายๆ ด้วย Node.js

ตอนนี้เรามาลองสร้าง Server ง่ายๆ ด้วย Node.js โดยใช้ HTTP Module ซึ่งเป็น Module Built-in ของ Node.js

สร้างไฟล์ชื่อ server.js
ใส่ Code ต่อไปนี้ลงในไฟล์ server.js:

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

คำอธิบาย Code:

const http = require('http');: Import HTTP Module
const hostname = '127.0.0.1';: กำหนด Hostname (Localhost)
const port = 3000;: กำหนด Port ที่ Server จะ Listen
const server = http.createServer((req, res) => { ... });: สร้าง HTTP Server โดยรับ Request (req) และ Response (res) เป็น Parameter
res.statusCode = 200;: กำหนด Status Code เป็น 200 (OK)
res.setHeader('Content-Type', 'text/plain');: กำหนด Content Type เป็น Text Plain
res.end('Hello, World!\n');: ส่ง Response กลับไปยัง Client
server.listen(port, hostname, () => { ... });: เริ่ม Listen บน Port ที่กำหนด และแสดง Log Message เมื่อ Server เริ่มทำงาน

เปิด Command Prompt หรือ Terminal แล้ว Navigate ไปยัง Directory ที่มีไฟล์ server.js
รันคำสั่ง node server.js

คุณควรจะเห็น Log Message Server running at http://127.0.0.1:3000/ ปรากฏขึ้น

เปิด Browser แล้วพิมพ์ http://127.0.0.1:3000/ ใน Address Bar

คุณควรจะเห็นข้อความ Hello, World! ปรากฏบนหน้า Browser

การใช้ Express.js: Web Framework ที่ช่วยให้ชีวิตง่ายขึ้น

ถึงแม้ว่า HTTP Module จะช่วยให้เราสร้าง Server ได้ แต่การจัดการ Request และ Response ด้วย HTTP Module โดยตรงนั้นค่อนข้างซับซ้อน ดังนั้นเราจึงนิยมใช้ Web Framework เช่น Express.js เพื่อช่วยให้การพัฒนา Web Application ง่ายขึ้น

สร้าง Project Directory ใหม่
Navigate ไปยัง Project Directory ใน Command Prompt หรือ Terminal
รันคำสั่ง npm init -y เพื่อสร้าง package.json file แบบ Default
รันคำสั่ง npm install express เพื่อติดตั้ง Express.js
สร้างไฟล์ชื่อ app.js
ใส่ Code ต่อไปนี้ลงในไฟล์ app.js:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

คำอธิบาย Code:

const express = require('express');: Import Express.js Module
const app = express();: สร้าง Express Application Instance
app.get('/', (req, res) => { ... });: กำหนด Route สำหรับ HTTP GET Request ที่ Path /
res.send('Hello World!');: ส่ง Response กลับไปยัง Client
app.listen(port, () => { ... });: เริ่ม Listen บน Port ที่กำหนด และแสดง Log Message เมื่อ Server เริ่มทำงาน

รันคำสั่ง node app.js

คุณควรจะเห็น Log Message Example app listening at http://localhost:3000 ปรากฏขึ้น

เปิด Browser แล้วพิมพ์ http://localhost:3000 ใน Address Bar

คุณควรจะเห็นข้อความ Hello World! ปรากฏบนหน้า Browser

จะเห็นได้ว่าการใช้ Express.js ทำให้เราสามารถสร้าง Web Application ได้ง่ายและรวดเร็วกว่าการใช้ HTTP Module โดยตรง

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ Node.js, NPM, และวิธีการสร้าง Server ง่ายๆ ด้วย HTTP Module และ Express.js ซึ่งเป็นพื้นฐานสำคัญในการเริ่มต้นพัฒนา Web Application ด้วย JavaScript บน Server-Side ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการทดสอบ JavaScript ด้วย Jest ซึ่งเป็นเครื่องมือที่ช่วยให้เรามั่นใจได้ว่า Code ของเราทำงานได้อย่างถูกต้อง