สอนทำเว็บไซต์ด้วย Node.js, Express และ MongoDB ตอนที่ 4 - ทำเว็บด้วย Node.js และ Express.js

มาต่อกันที่ ตอนที่ 4 กันครับ วันนี้เราจะมาเริ่มสร้าง Web Application ด้วย Node.js แบบจริงๆจังๆแล้วครับ โดยเราจะใช้ Web Framework ที่ชื่อว่า Express.js ซึ่งก่อนหน้านี้ผมเคยเขียนบทความเกี่ยวกับ Node.js และ Express ไว้หลายบทความด้วยกัน ย้อนไปตั้งแต่ 2014-2016 และยังมีคนอ่านอยู่เรื่อยๆ อาจจะมีบางอย่างที่มันค่อนข้างเก่าไปแล้ว รวมถึงเนื้อหามันกระจัดกระจาย นั้นจึงเป็นสาเหตุว่าทำไมผมถึงทำซีรีย์สอนเขียน Node.js + Express.js + MongoDB อันใหม่ขึ้นมา รวบรวมเป็นซีรีย์ยาวๆทีเดียวไปเลยครับ

ซึ่งบทความล่าสุด ก็คือ ของปีที่แล้ว (ซึ่งสำหรับคนพอมีพื้นฐาน ก็สามารถอ่านบทความเดียว ก็น่าจะเข้าใจ) ทำ Backend API ด้วย Node.js และ MongoDB กันดีกว่า

แต่สำหรับมือใหม่ หรือเริ่มต้น และอยากเขียน Node.js + Express.js ก็ติดตามอ่านซีรีย์ได้เลยครับ

เนื้อหาบทเรียน

• ตอนที่ 1 - Node.js คืออะไร + ทำการติดตั้ง Node.js และ Node.js เบื้องต้น
• ตอนที่ 2 - ทบทวนพื้นฐาน JavaScript และ Modern JavaScript ES6, ES7+
• ตอนที่ 3 - ว่าด้วยพื้นฐาน Node.js / Callback / Sync และ Async
• ตอนที่ 4 - เริ่มต้นทำเว็บด้วย Node.js และ Express.js (บทความนี้)
• ตอนที่ 5 - ลองหัดใช้ Template Engine ชื่อ Pug
• ตอนที่ 6 - เริ่มต้นกับ MongoDB
• ตอนที่ 7 - ทำ Backend API ด้วย Node.js และ MongoDB กันดีกว่า
• ตอนที่ 8 - Express Generator / Middleware
• ตอนที่ 9 - ทำระบบ Login ด้วย Passport.js
• ตอนที่ 10 - การ Hosting และ Deploy Production

Express คืออะไร ?

Express นั้นเป็น Web Framework ของ Node.js ที่ได้รับความนิยมตัวหนึ่ง ด้วยความที่มันค่อนข้างง่าย และมีความยืดหยุ่นค่อนข้างสูง สามารถทำได้ทั้งเป็น API หรือนำมาเป็นเว็บ Server ทั่วๆไปแบบ Java หรือ PHP ก็ได้เช่นเดียวกัน

Express ไม่ใช่ Module ที่ติดตั้งมาพร้อมกับ Node.js ทำให้เราต้องทำการติดตั้งเพิ่มเองครับ ซึ่งวิธีการที่เราจะดาวน์โหลดและติดตั้ง Library อื่นๆ ของ Node.js นั้น เราสามารถติดตั้งผ่าน คำสั่ง npm ครับ

ตัวอย่างการใช้งาน npm

npm install MODULE_NAME

ซึ่ง Module หรือ Library ต่างๆ ที่ติดตั้งผ่านคำสั่งด้านบน นั้น จะเก็บไว้ที่ npmjs.org เป็นเหมือนที่ฝากไฟล์นั่นเอง

นอกจาก Express ก็มี Module / Library อื่นๆของ Node.js อีกเยอะแยะมากมาย

เริ่มต้นสร้างโปรเจ็ค

เริ่มสร้าง Folder ขึ้นมาเพื่อเป็นโปรเจ็คใหม่ จากนั้นเปิด Terminal หรือ Power Shell ด้วยคำสั่ง

npm init -y

เราจะได้ไฟล์ package.json ซึ่งจะระบุ ว่า name และ version ของเราคืออะไร ต่อมานะครับ ทำการติดตั้ง express ผ่าน npm ด้วยคำสั่ง

npm install express

เราจะเห็น folder ชื่อ node_modules อยู่ภายในโปรเจ็คเรา ซึ่งโฟลเดอร์เนี่ย ปกติจะเป็นที่เก็บของ Module ที่เราทำการติดตั้งผ่าน npm

ต่อมาทำการสร้างไฟล์ ขึ้นมาใหม่ ชื่อ app.js โดยมีโค๊ดด้านล่างนี้

// 1. import express ด้วยการใช้ require
const express = require('express');

// 2. express() เป็นฟังค์ชั่น และ assign ไว้ที่ตัวแปร app
const app = express();

// 3. app เป็น object และมี function ชื่อเดียวกับ HTTP Method ครับ
// ตัวอย่างคือ `.get()` เหมือนกับ GET
app.get('/', function (req, res) {
  res.send('Hello World');
});

// 4. listen() เป็น function คล้ายๆ http module เพื่อเอาไว้ระบุว่า server จะรัน ด้วย port อะไร
app.listen(3000);

ลองทำการรัน Node ด้วยคำสั่ง

node app.js

และเปิดเว็บ Browser http://localhost:3000 ก็จะเห็น Hello World นั่นเอง

อธิบายเพิ่มเติมเกี่ยวกับการทำงานของ Express.js ตัว app.get() จะมีรูปแบบการใช้งานแบบด้านล่างครับ

app.get(path, fn);

• path : กำหนด path ของเว็บ ตัวอย่าง / คือ root ครับ
• fn : เป็น function ที่มี request และ response ครับ ซึ่งเราใช้ req และ res เป็นชื่อ parameter (จริงๆ ตั้งเป็นอะไรก็ได้ครับ การตั้งชื่อตัวแปรธรรมดา แต่ใช้ req, res เพราะมัน common และสื่่อเข้าใจง่าย)
• res.send() : response ส่ง string Hello World เพื่อแสดงผล เวลามี request เข้ามาครับ

ทดลองเพิ่มอีก path นึงครับ เช่น /ahoy จะต้องแสดงผล Ahoy! ที่หน้าจอ

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

จะเห็นว่าผมใช้รูปแบบ Arrow Function ครับ ที่เป็น Modern JavaScript หากใครยังไม่แม่น สามารถย้อนกลับไปทบทวนได้ครับ

ลองเข้า url แล้วพิมพ์ http://localhost:3000/ahoy/ จะได้ Cannot GET /ahoy เพราะว่า ตอนนี้ Server มันไม่ได้อ่านโค๊ดแบบเรียลไทม์ครับ เราต้องทำการ stop และ start ใหม่

การ stop server Node.js ทำได้โดยการกด Ctrl + C เพื่อหยุด แล้ว start ใหม่ครับ node app.js ทีนี้เราก็จะได้ หน้า /ahoy ที่แสดงผลได้ถูกต้องแล้ว

แนะนำ Nodemon

ทีนี้ จะเห็นว่าทุกๆครั้งที่เราแก้ไขโค๊ด ตัว Server จะไม่รู้ว่าเราแก้ ต้องทำการ Stop และ Start ใหม่ ทุกครั้ง ก็เลยเกิดกลายเป็นคนคิดไอเดีย ว่าจะดีแค่ไหน ถ้าเราไม่ต้อง Stop Server ละ มันจะรู้ได้เองว่าต้อง Restart server ใหม่ ตอนไฟล์มีการแก้ไข?

เลยกลายเป็น Nodemon ขึ้นมาครับ

เราทำการติดตั้ง Nodemon ด้วยคำสั่ง

npm install nodemon -g

-g เป็นการบอกว่าติดตั้ง module แบบ global ครับ ปกติ npm install จะถูกติดตั้งลง node_modules ของโฟลเดอร์ แต่ถ้า -g มันจะถูกติดตั้งไว้ที่เดียวกับ node ที่เป็น global ครับ

หลังจากติดตั้ง เราสามารถใช้คำสั่ง nodemon ได้เหมือน node เลยครับ เปลี่ยนจาก node app.js เป็น

nodemon app.js

จะเห็นข้อความประมาณนี้

[nodemon] 2.0.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node app.js`

ทีนี้ เวลาเราแก้ไขไฟล์ app.js ตัว Server มันก็จะ refersh และ restart ใหม่ให้เอง โดยไม่ต้อง stop / start เองครับ

Request Params & Query String

ต่อมา เราสามารถทำ Dynamic page ได้ครับ ข้อดีคือ เราไม่ต้องมานั่งกำหนด path ทุกๆ path เช่น เรามีหน้า ที่แสดงผล user แต่ละคน เช่น user 1 -100 ถ้าเราต้องมากำหนดแบบนี้

app.get('/users/1', fn);
app.get('/users/2', fn);
app.get('/users/3', fn);
...
app.get('/users/100', fn);

ก็คงไม่ดีแน่ เราสามารถ ทำ Dynamic หรือ group path ที่มันมี pattern เหมือนๆกัน ได้ครับ ตัวอย่างเช่น

app.get('/ahoy/:name', (req, res) => {
  res.send(`Ahoy! ${req.params.name}`);
});

จากนั้น เราลองเข้า url http://localhost:3000/ahoy/JohnDoe หรือเปลี่ยนจาก JohnDoe เป็นชื่ออื่นๆ หน้าเว็บเราก็จะขึ้น Ahoy! Name ชื่อที่เราใส่ใน url นั่นเอง

ข้อดีของ Express คือ path ที่เราระบุใน string โดยใช้ colon (:) เนี่ย มันจะกลายเป็น params ทีเราสามารถดึงค่าด้วย

req.params;

ถ้าเราระบุ app.get('/users/:id') แบบนี้ เราก็จะดึงค่า id จาก url ได้ด้วย req.params.id (ชื่อ key เดียวกันที่ตั้งใน path นั่นเอง)

นอกจากนี้ เราก็ยังรับ Query String จาก url ได้เช่นกัน ตัวอย่างเช่น http://localhost:3000/ahoy?name=JohnDoe&email=john@doe.com

ใน express หากเราอยากรับค่า url ที่ user ใส่มา เป็น query string เราจะใช้ req.query ครับ เช่น

app.get('/ahoy', (req, res) => {
  const name = req.query.name;
  const email = req.query.email;

  // หรือ
  // const { name, email } = req.query;
  res.send(`Ahoy! ${name}`);
});

สรุป

Express.js เบื้องต้น ก็มีประมาณนี้ครับ สิ่งที่ได้จากบทความนี้คือ

• สามารถใช้งาน Express เบื้องต้นได้
• รู้จัก npmjs.org และ การติดตั้ง Module /Library ผ่าน npm
• การใช้ express เพื่อกำหนด path
• สามารถ กำหนด path แบบ dynamic ได้ รวมถึงการรับ query string จาก user

สุดท้ายนี้ หากใครติดปัญหาตรงส่วนไหน สามารถสอบถามเข้ามาได้ตลอดครับ ไว้เจอกันบทความถัดๆไปนะครับ สำหรับซีรีย์นี้ยังอีกยาวไกล รอติดตามตอนต่อไปครับ และหลังจากนี้ผมจะทำเป็น Video Tutorial ลงบน Youtube ไว้ด้วยครับ เผื่อบางคนชอบแบบดูวิดีโอมากว่า ก็รอติดตาม หรือไปกด Subscribe ที่ช่อง Youtube ผมไว้ได้นะครับ

อ่านต่อ ตอนที่ 5 - ลองหัดใช้ Template Engine ชื่อ Pug

ส่วน Source Code (อยู่ part4) สามารถเข้าไปดาวน์โหลด หรือ clone ผ่าน Github ได้เลย หากใครไม่รู้จัก Git สามารถอ่านบทความนี้เพิ่มได้ครับ Git คืออะไร ? + พร้อมสอนใช้งาน Git และ Github

ขอบคุณครับ

❤️ Happy Coding