เรียน NodeJS Back-End Developers
ก่อนที่จะเรียนรู้ NodeJS ขอปูพื้นฐานของ Server ก่อน
1. เรียนรู้การใช้งานคำสั่ง Command พื้นฐานต่าง ๆ
1) ดูว่าเครื่องคอมพิวเตอร์ของเราเชื่อมต่อ Internet อยู่ไหม
เปิด Command Prompt หรือ Terminal –> พิมพ์คำสั่ง ping www.glurgeek.com หรือเว็บไซต์ที่ต้องการ เพื่อดูว่าเว็บไซต์นั้นยังรันอยู่ไหม
ถ้าขึ้นข้อมูล Reply from ตามด้วย IP Address ของ Web Server ข้อมูล และเวลา แสดงว่าเชื่อมต่อ Internet และเว็บไซต์ทำงานอยู่
2) เช็คดูว่าเครื่องคอมพิวเตอร์ของเราเชื่อมต่อกับ Ports อะไรอยู่บ้าง
คำสั่ง cls เป็นการ Clear หน้า Screen ของ Command Prompt
พิมพ์คำสั่ง netstat -a ดูว่าเครื่องคอมพิวเตอร์เชื่อมต่อกับ Port อะไรอยู่บ้าง มีทั้ง TCP, UDP IP Address Port ต่าง ๆ ที่ใช้อยู่
3) เช็คดูว่าเครื่องคอมพิวเตอร์ของเรามี IP Address อะไร
สำหรับ Windows: พิมพ์คำสั่ง ipconfig ดูที่ IPv4 Address
สำหรับ Mac OS: พิมพ์คำสั่ง /sbin/ifconfig ดูที่ en0: inet
ซึ่ง IP Address ของเครื่องคอมพิวเตอร์นี้จะใช้เป็น Server
4) ค้นหา Port ที่ต้องการ ว่าได้เชื่อมต่อกับอะไรไว้ไหม
สำหรับ Windows พิมพ์คำสั่ง netstat -ao | find “80”
สำหรับ Mac OS พิมพ์คำสั่ง netstat -an | gresp 80
ถ้าขึ้นเลข Port 80 แสดงว่ามีการเปิดใช้อยู่ ต้องทำการยกเลิก เพราะเราต้องใช้ Port นี้ ถ้าไม่มีแสดงว่ายังไม่มีใครใช้ Port นี้
พิมพ์คำสั่ง netstat -ao | find “3306” เช็คอีก Port
5) สำหรับเช็คว่า Services ต่าง ๆ มีเปิดใช้งานอะไรไว้ไหม เช่น mysql จะใช้ port 3306 หรืออื่น ๆ
พิมพ์คำว่า Services ในช่อง Search ถ้ามีใช้อยู่สามารถ stop ได้ ถ้าไม่มีแสดงว่าปกติเพราะยังไม่ได้ใช้
2. ติดตั้งโปรแกรม XAMPP
สำหรับจำลองเครื่องคอมพิวเตอร์เป็น Server
1) ดาวน์โหลดโปรแกรม XAMPP
https://www.apachefriends.org/index.html
สำหรับเครื่อง Macbook Pro M1 ใช้ XAMPP v.8.0.8
2) ติดตั้งโปรแกรม XAMPP เสร็จแล้วจะทำการ Restart เครื่องคอมพิวเตอร์
3) ไปที่ Folder ที่ติดตั้ง C:\xampp เปิดไฟล์ xampp_control.exe
4) XAMPP Control Panel ทดลองกด Start เปิดใช้ Apache และ MySQL
Apache ทำให้เครื่องคอมพิวเตอร์นี้เป็น Web Server เปิดใช้ Port: 80, 443
MySQL ทำให้เครื่องคอมพิวเตอร์นี้เป็น Database Server เปิดใช้ Port: 3306
FileZilla ทำให้เครื่องคอมพิวเตอร์นี้เป็น File Transfer Protocal
5) เปิด Web Browser พิมพ์ IP Address ของเครื่อง หรือพิมพ์คำว่า localhost เข้าได้เช่นเดียวกัน
ถ้าขึ้นเหมือนในรูปแสดงว่า XAMPP ใช้งานได้ เครื่องคอมพิวเตอร์ของเราเป็น Web Server แล้ว
6) Directory ที่เก็บไฟล์หน้าเว็บไซต์ index.html ที่แสดงผลอยู่
C:\xampp\htdocs\dashboard
เราสามารถใส่ไฟล์ที่เราสร้างในนี้ได้เลย
7) ทดลองเข้า http://localhost/dashboard/phpinfo.php เรียกใช้ไฟล์ phpinfo.php
ส่วนนี้จะทำให้รู้ว่า Spec เครื่อง
นี้เป็นพื้นฐานการนำไฟล์มาใช้งานใน XAMPP สามารถปรับแต่งได้เอง
8) ทดลองเปิด PhpMyAdmin ซึ่งจำลองเป็น Database Server
Directory ที่เก็บไฟล์ C:\xampp\phpMyAdmin
เปิด Web Browser พิมพ์คำว่า localhost/phpmyadmin อันนี้เป็น Database Verser ที่เรากด start ให้ XAMPP เปิด
ในที่นี้ใช้เป็น MariaDB เป็น Database Server ที่ออนอยู่บน Apache Web Server
phpMyadmin เป็นตัวที่ใช้ Config ฐานข้อมูลที่อยู่ในเครื่องของเรา
ดังนั้นจากส่วนที่ผ่านมานี้ เป็นพื้นฐานที่ทำให้เรารู้จักกับ XAMPP ที่ใช้การสร้าง Server ต่าง ๆ ได้
ถ้าทำการ Stop Server ใน XAMPP เว็บไซต์ก็จะทำการปิดไป ถ้าต้องการเปิดใช้งานต้องกด Start Server เพื่อเข้าใช้งานได้
ให้ทำการ Stop Apahce และ MySQL จบการทดลอง ถ้าต้องการจำลองเป็น Server สามารถกด Start ได้
NodeJS Back-End Development Part 1
3. เริ่มเรียนรู้ NodeJS Back-End Developer
1) ดาวน์โหลดและติดตั้ง NodeJS
สิ่งที่ต้องการใช้คือ Node.js and npm และ npm modules
ให้กด Next ไปเรื่อย ๆ จนจบการติดตั้ง
2) ให้ทำการเช็คว่า Nodejs ใด้ติดตั้งเรียบร้อยแล้ว
เปิด Command Promt หรือ Terminal พิมพ์คำสั่ง node ถ้าขึ้น version ที่แสดงเราสามารถใช้งาน NodeJS ในเครื่องนี้ได้แล้ว
กด .exit เพื่อออกได้
3) เริ่มทำการเขียนโปรแกรมใช้งาน NodeJS ใช้ Visual Studio Code
1. เปิด VS Code สร้าง Folder ว่างเปล่า แล้วลากมาใส่
เลือก Terminal –> New Terminal ทดลองพิมพ์ node เพื่อทดสอบว่า NodeJS ติดตั้งแล้ว
2. New File ตั้งชื่อ nodeserver.js (ความจริงตั้งชื่อไฟล์อะไรก็ได้)
ไฟล์นี้จะเปรียบเสมือนไฟล์ htdocs จะรันเหมือนกับ Apache Web Server ของ XAMPP ที่ได้ทดลองไปก่อนหน้านี้
สามารถ copy ทั้ง Folder ของ ajnestnodejs ไปใช้งานได้เลย
3. เริ่มเขียนโปรแกรมเพื่อใช้งาน Express
const express = require('express') //install express: Terminal >npm install express --save
Terminal: พิมพ์คำสั่ง npm install express –save
ทำการติดตั้ง Express จะเกิด Folder ชื่อ node_modules เก็บ Library ต่างของ Node ที่ให้ Express ไปเรียกใช้งานได้
เกิดไฟล์ package-lock.json และ package.json
4. เขียนโปรแกรมเรียกใช้งาน Express
สร้าง Application เรียกใช้งาน Express กำหนด Port 3000 แสดงผลข้อความ Hello NodeJS ไปแสดงหน้าเว็บไซต์
const express = require('express') //install express: Terminal >npm install express --save
const app = express()
const port = 3000
//Creating App --> Pointer(=>{Object})
app.get("/",(req,res) =>{
res.send("Hello NodeJS!")
})
//Open Server
app.listen(port,() => {
console.log("Server is Listening on port: ", port)
})
Terminal: พิมพ์คำสั่ง clear ทำการเคลียร์หน้าจอ
เปิด Web Server เรียกใช้งานไปยัง Web Browser
Terminal: พิมพ์คำสั่ง node .\nodeserver.js
กดเลือก Allow access
5. เปิด Web Browser พิมพ์ localhost:3000
แสดงข้อความ Hello NodeJS! ออกทางหน้าเว็บไซต์
พอมาถึงตรงนี้ คิดว่าทุกคนน่าจะเริ่มเข้าใจและใช้งาน NodeJS เป็นกันแล้ว
6. วิธีการกดยกเลิกคำสั่ง Run Server
Terminal: ให้กด Control + C จะกลับมาที Command Prompt เป็นยกเลิกการ Run
7. ติดตั้ง Node Monitor เพื่อช่วยในการจัดการ Server
Terminal: พิมพ์คำสั่ง npm install -g nodemon –save-dev
8. ทำการเรียกใช้งาน nodemon
Terminal: พิมพ์คำสั่ง nodemon .\nodeserver.js จะพบปัญหาเรื่อง Policy การเข้าถึงของ User
วิธีแก้ไข
ไปที่ Search ทำการเปิดโปรแกรม Windows PowerShell
ให้ปุ่ม Tab ช่วยในการพิมพ์คำสั่งได้
พิมพ์คำสั่ง Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
พิมพ์ตอบ A
และพิมพ์คำสั่ง nodemon ถ้าได้ผลดังรูปแสดงว่า สามารถเรียกใช้ nodemon ได้
9. ทดลองใช้งาน nodemon สำหรับจัดการ Server
Terminal: พิมพ์คำสั่ง nodemon nodeserver.js
1) ใช้คำสั่ง rs สำหรับ restart server
2) ทดลองแก้ Code เปลี่ยนไปใช้ Port 8080 ทดลองผลการรันโปรแกรม
สังเกตเห็นว่า nodemon จะทำการ Restart Server ให้ใหม่อัตโนมัติ และเปลี่ยนไปใช้งาน Port 8080 ทันที
เปิด Web Browser พิมพ์ localhost:8080 จะแสดงดังรูป
3) เพิ่ม /Path ให้ URL แก้เป็น app.get(“/hello”, (req,res) =>{…}
เปิด Web Browser พิมพ์ localhost:8080/hello จะแสดงดังรูป
4) เพิ่ม /Path หน้าเว็บใหม่อีกหนึ่งหน้า บรรทัดที่ 8 – 11
//another page
app.get("/name",(req,res) =>{
res.send("Aj.NesT the Series")
})
เปิด Web Browser พิมพ์ localhost:8080/name จะแสดงดังรูป
4. ติดตั้งและใช้งาน EJS เชื่อมต่อ Font-End และ Back-End
1) ติดตั้ง EJS หรือ Embedded JavaScript ที่สร้างเป็นภาษา HTML
Terminal: กด Control+C ออกจากการ Run และ clear ทำการเคลียร์หน้าจอ Terminal
Terminal: พิมพ์คำสั่ง npm install ejs –save
2) สร้างไฟล์ EJS ที่สามารถเขียนภาษา HTML ได้
1. สร้าง Folder ชื่อ views และสร้างไฟล์ย่อยชื่อ index.ejs เขียนโครงสร้าง html5
2. เขียนไฟล์ index.ejs เป็นภาษา HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aj.NesT the Series</title>
</head>
<body>
<h1>This is NodeJS and EJS Workshop</h1>
<h2>It's very Fun.</h2>
<h3>By Aj.NesT the Series</h3>
</body>
</html>
3. เขียนโปรแกรมเชื่อมต่อ EJS Font-End และ NodeJS Back-End ให้ทำงานร่วมกัน
กดปุ่ม Split ของ VS Code เพื่อแบ่งเป็น 2 หน้าให้ดูง่ายขึ้น
ไฟล์ nodeserver.js
const express = require('express') //install express: Terminal >npm install express --save
const app = express()
const port = 8080
//Set & Call EJS
app.set('view engine','ejs')
//Back-End NodeJS Display
app.get("/hello",(req,res) =>{
res.send("Hello NodeJS Test!")
})
//Font-End EJS Show HTML Display
app.get("/",(req,res) =>{
res.render('index')
})
//Open Server
app.listen(port,() => {
console.log("Server is Listening on port: ", port)
})
ไฟล์ index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aj.NesT the Series</title>
</head>
<body>
<h1>This is NodeJS and EJS Workshop</h1>
<h2>It's very Fun.</h2>
<h3>By Aj.NesT the Series</h3>
</body>
</html>
Terminal: พิมพ์คำสั่ง nodemon .\nodeserver.js
3) ทดสอบการ Run ผลขึ้น Web Browser
http://localhost:8080/hello แสดง Output เป็นข้อความ ของ Back-End ปกติ
http://localhost:8080/ แสดง Output เป็นข้อความของ Font-End ที่เรียกใช้ไฟล์ index.ejs ภาษา HTML มาแสดงผลได้
4) เขียนโปรแกรม ทดลองส่งเป็นค่าตัวแปร Variables
ไฟล์ nodeserver.js
เพิ่มเติม
//Define Variables
var id = 65140322;
var status = “Single”;
//New Font-End EJS Show HTML Display
app.get(“/”,(req,res) =>{
res.render(‘index’, {userid : id, status : status})
})
const express = require('express') //install express: Terminal >npm install express --save
const app = express()
const port = 8080
//Define Variables
var id = 65140322;
var status = "Single";
//Set & Call EJS
app.set('view engine','ejs')
//Back-End NodeJS Display
app.get("/hello",(req,res) =>{
res.send("Hello NodeJS Test!")
})
//New Font-End EJS Show HTML Display
app.get("/",(req,res) =>{
res.render('index', {userid : id, status : status})
})
//Open Server
app.listen(port,() => {
console.log("Server is Listening on port: ", port)
})
ไฟล์ index.ejs
เพิ่มเติม
<p><%= userid %></p>
<p><%= status %></p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aj.NesT the Series</title>
</head>
<body>
<h1>This is NodeJS and EJS Workshop</h1>
<h2>It's very Fun.</h2>
<h3>By Aj.NesT the Series</h3>
<p><%= userid %></p>
<p><%= status %></p>
</body>
</html>
5) ทดสอบการ Run ผลค่าตัวแปรแสดงขึ้น Web Browser
แสดง Output เป็นข้อความของ Font-End ที่เรียกใช้ไฟล์ index.ejs แสดงผล Variables ได้
คุณอยู่บทเรียนนี้
1. เรียน NodeJS Back-End Developers (เริ่มสร้าง Back-End Development)
https://www.glurgeek.com/education/startnodejs
บทเรียนถัดไป
2. Figma ออกแบบเว็บไซต์ สำหรับ Front-End Designers (เตรียม Front-End Design)
https://www.glurgeek.com/education/figmawebdesigner
คุณอยู่บทเรียนที่ 3
3. Figma ออกแบบเว็บไซต์ สำหรับ Front-End Designers (เตรียม Front-End Development)
https://whttps://www.glurgeek.com/education/htmlcssdesigntodev
4. เรียน NodeJS Back-End เชื่อมต่อ EJS HTML CSS Front-End Developments (เขียนให้ Back-End เชื่อมต่อ Front-End Developments)
https://www.glurgeek.com/education/startnodejsandfrontend
