บทที่ 1 เครื่องมือในการพัฒนาเว็บแอปพลิเคชัน

Web Application Development Tools

วัตถุประสงค์

อธิบายบทบาทของ Development Tools ในกระบวนการพัฒนาเว็บแอปพลิเคชันได้
เชื่อมโยงเครื่องมือแต่ละประเภทกับขั้นตอนของ SDLC, Agile และ DevOps ได้
เลือกใช้เครื่องมือสำหรับ Design, Coding, Version Control, Testing, Database, API, Container และ Deployment ได้เหมาะสม
ติดตั้งและตรวจสอบ Development Environment เบื้องต้นได้
ใช้ AI Development Tools อย่างปลอดภัยและมีวิจารณญาณได้

ภาพรวมบทเรียน

การพัฒนา Web Application ไม่ได้มีเพียงการเขียน HTML, CSS หรือ JavaScript เท่านั้น แต่ต้องใช้เครื่องมือหลายกลุ่มเพื่อช่วยตั้งแต่การวิเคราะห์ความต้องการ ออกแบบหน้าจอ เขียนโค้ด จัดการเวอร์ชัน ทดสอบ API จัดการฐานข้อมูล สร้าง container deploy ระบบ และทำงานร่วมกันในทีม

คำสำคัญของบทเรียน

Development Environment: ชุดเครื่องมือและการตั้งค่าที่ทำให้นักพัฒนาสามารถเขียน ทดสอบ และรันระบบได้
SDLC: วงจรการพัฒนาซอฟต์แวร์ตั้งแต่ requirement ถึง maintenance
Version Control: ระบบบันทึกประวัติการแก้ไขไฟล์ เช่น Git
DevOps: แนวคิดที่เชื่อม development และ operation เพื่อส่งมอบระบบอย่างต่อเนื่อง
Container: วิธีบรรจุแอปและ dependency ให้รันได้สม่ำเสมอ เช่น Docker
AI Development Tools: เครื่องมือ AI ที่ช่วยอธิบายโค้ด สร้างตัวอย่าง ตรวจโค้ด และเขียนเอกสาร

1. ภาพรวมกระบวนการพัฒนา Web Application

การพัฒนาเว็บแอปพลิเคชันเริ่มจากความต้องการของผู้ใช้ แล้วเปลี่ยนเป็นการออกแบบ เขียนโค้ด ทดสอบ deploy และดูแลระบบหลังใช้งานจริง เครื่องมือแต่ละกลุ่มจึงควรช่วยตอบคำถามว่า "งานนี้อยู่ขั้นตอนไหน และต้องลดความเสี่ยงอะไร"

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#83a598',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart LR
  A[Requirement
ความต้องการ] --> B[Design
ออกแบบ]
  B --> C[Development
พัฒนา]
  C --> D[Testing
ทดสอบ]
  D --> E[Deployment
เผยแพร่]
  E --> F[Operation
ดูแลระบบ]
  F --> G[Improvement
ปรับปรุง]
  G --> A

SDLC และเครื่องมือที่เกี่ยวข้อง

ขั้นตอน	เป้าหมาย	ตัวอย่างเครื่องมือ
Requirement	เก็บความต้องการและขอบเขตงาน	Jira, Trello, GitHub Issues
Design	ออกแบบ UI, workflow, database และ architecture	Figma, Draw.io, Mermaid
Development	เขียน front-end, back-end และ API	VS Code, Node.js, Angular CLI
Testing	ตรวจความถูกต้องและลด bug	Postman, Playwright, Jasmine
Deployment	ส่งระบบขึ้น server หรือ cloud	Docker, Caddy, GitHub Actions
Operation	ติดตามระบบและแก้ปัญหา	Logs, Monitoring, Documentation

2. Agile, DevOps และ CI/CD

Agile เน้นการทำงานเป็นรอบสั้น ๆ เพื่อรับ feedback เร็ว ส่วน DevOps เน้นการเชื่อมงานพัฒนาและงานดูแลระบบให้ส่งมอบซอฟต์แวร์ได้เร็วและน่าเชื่อถือขึ้น

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#b8bb26',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart LR
  A[Code
เขียนโค้ด] --> B[Commit
บันทึก Git]
  B --> C[Build
สร้างระบบ]
  C --> D[Test
ทดสอบอัตโนมัติ]
  D --> E[Package
บรรจุแอป]
  E --> F[Deploy
นำขึ้นใช้งาน]

แนวคิด	ความหมาย	สิ่งที่ควรฝึก
Agile	ทำงานเป็นรอบสั้นและปรับตาม feedback	Sprint planning, review, retrospective
CI	รวมโค้ดและตรวจ build/test อย่างสม่ำเสมอ	Commit บ่อย, run test, code review
CD	เตรียมหรือปล่อยระบบขึ้นใช้งานอย่างต่อเนื่อง	Pipeline, Docker image, deployment script
DevOps	เชื่อมทีมพัฒนาและทีมปฏิบัติการ	Logs, monitoring, rollback plan

3. กลุ่มเครื่องมือหลักในการพัฒนาเว็บ

เครื่องมือควรเลือกจากหน้าที่ ไม่ใช่เลือกเพราะเป็นชื่อที่นิยมเท่านั้น ตารางต่อไปนี้สรุปกลุ่มเครื่องมือที่มักใช้ตลอดรายวิชา

กลุ่มเครื่องมือ	ใช้ทำอะไร	ตัวอย่าง
Design Tools	ออกแบบ UI, prototype, diagram	Figma, Draw.io, Mermaid
Code Editor	เขียนและจัดการไฟล์โค้ด	Visual Studio Code
Version Control	บันทึกประวัติและทำงานร่วมกัน	Git, GitHub
Front-end Tools	สร้างและ build front-end	Node.js, npm, Angular CLI, Vite
Back-end Tools	สร้าง API และ server logic	Node.js, Express, Node-RED
Database Tools	ออกแบบและจัดการข้อมูล	PostgreSQL, pgAdmin, DBeaver
API Tools	ทดสอบและเอกสาร API	Postman, Swagger/OpenAPI
Container Tools	รันระบบแบบแยก environment	Docker, Docker Compose
Web Server	ให้บริการเว็บและ reverse proxy	Caddy, Nginx
Testing Tools	ตรวจความถูกต้องของระบบ	Jasmine, Playwright, Postman
Documentation	เขียนคู่มือและสื่อสารระบบ	Markdown, MkDocs, Mermaid
AI Tools	ช่วยเรียนรู้และพัฒนาโค้ด	ChatGPT, GitHub Copilot

4. Design Tools: จากแนวคิดสู่หน้าจอ

Design Tools ช่วยให้ทีมเห็นภาพระบบก่อนเขียนโค้ดจริง ลดการแก้ซ้ำ และทำให้ front-end กับผู้ใช้คุยกันด้วยภาพเดียวกัน

ชิ้นงาน	ความหมาย	เครื่องมือที่ใช้ได้
Wireframe	โครงร่างหน้าจอแบบง่าย	Figma, Draw.io
Mockup	ภาพหน้าจอใกล้งานจริง	Figma, Adobe XD
Prototype	แบบจำลองที่คลิกทดลอง flow ได้	Figma
Flowchart	ผังขั้นตอนการทำงาน	Mermaid, Draw.io
ER Diagram	ผังความสัมพันธ์ข้อมูล	Draw.io, dbdiagram

User Story:
ในฐานะผู้ดูแลระบบ
ฉันต้องการเพิ่มสินค้าใหม่
เพื่อให้ระบบแสดงสินค้าในหน้ารายการได้

5. Code Editor และ Terminal

Visual Studio Code เป็น code editor ที่นิยมใช้เพราะมี extension จำนวนมาก มี integrated terminal มี Git integration และรองรับภาษา/เฟรมเวิร์กหลากหลาย

ความสามารถ	ประโยชน์
Extensions	เพิ่ม formatter, linter, language support
Integrated Terminal	รันคำสั่งโดยไม่ต้องออกจาก editor
IntelliSense	แนะนำคำสั่ง ตัวแปร และ function
Debugger	ตรวจการทำงานทีละขั้น
Source Control	ดู diff, stage, commit และ branch

# ตรวจสอบเครื่องมือพื้นฐาน
git --version
node -v
npm -v
docker version

6. Git และ GitHub สำหรับ Version Control

Git ใช้บันทึกประวัติการเปลี่ยนแปลงของโค้ด ส่วน GitHub เป็น remote repository สำหรับเก็บโค้ดกลาง ทำงานร่วมกัน และเปิด pull request เพื่อตรวจงาน

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#d3869b',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart LR
  A[Working Directory
แก้ไฟล์] --> B[Staging
git add]
  B --> C[Local Repository
git commit]
  C --> D[Remote Repository
git push]
  D --> E[Team Review
Pull Request]

git status
git add README.md
git commit -m "Add setup guide"
git push origin main

คำศัพท์	ความหมาย
Repository	พื้นที่เก็บโค้ดและประวัติ
Commit	จุดบันทึกการเปลี่ยนแปลง
Branch	สายงานแยกสำหรับพัฒนา feature
Merge	รวม branch เข้าด้วยกัน
Pull Request	ขอรวมโค้ดพร้อมให้ทีมตรวจ

7. Front-end, Back-end และ Database Tools

เว็บแอปพลิเคชันสมัยใหม่มักแยกส่วน front-end, back-end และ database เครื่องมือแต่ละส่วนจึงควรทำงานร่วมกันได้ผ่าน API และ environment ที่ตั้งค่าได้ชัดเจน

ส่วนระบบ	เครื่องมือหลัก	หน้าที่
Front-end	Angular CLI, npm, Vite	สร้าง UI, dev server, build
Back-end	Node.js, Express, Node-RED	สร้าง REST API และ business logic
Database	PostgreSQL, pgAdmin	จัดเก็บและจัดการข้อมูล
API Testing	Postman, Swagger	ทดสอบ endpoint และสื่อสาร API

# ตัวอย่าง workflow front-end
npm install
npm run dev
npm run build

-- ตัวอย่างตรวจข้อมูลสินค้า
SELECT id, name, price
FROM products
ORDER BY id DESC;

8. Docker, Web Server และ Deployment

Docker ช่วยให้แอปและ dependency ถูกบรรจุเป็น image และรันเป็น container ได้สม่ำเสมอ ส่วน Web Server เช่น Caddy หรือ Nginx ใช้ให้บริการเว็บ จัด HTTPS และ reverse proxy ไปยัง service ภายใน

services:
  web:
    image: caddy:latest
    ports:
      - "80:80"
      - "443:443"
  api:
    image: node:20
    working_dir: /app

คำศัพท์ Docker	ความหมาย
Image	ต้นแบบสำหรับสร้าง container
Container	instance ที่กำลังรันจาก image
Volume	พื้นที่เก็บข้อมูลถาวร
Network	ช่องทางสื่อสารระหว่าง container
Compose	ไฟล์กำหนดหลาย service ให้รันร่วมกัน

9. Testing, Code Quality และ Documentation

เครื่องมือกลุ่มนี้ช่วยลด bug ทำให้โค้ดอ่านง่าย และส่งต่อความรู้ให้ทีมได้ดีขึ้น

กลุ่ม	ตัวอย่าง	ใช้ทำอะไร
Unit Test	Jasmine, Jest	ทดสอบ function/component ย่อย
End-to-End Test	Playwright, Cypress	ทดสอบ flow เหมือนผู้ใช้จริง
API Test	Postman, Newman	ทดสอบ endpoint และ response
Formatter	Prettier	จัดรูปแบบโค้ดให้เหมือนกัน
Linter	ESLint	เตือน pattern หรือข้อผิดพลาด
Documentation	Markdown, Mermaid, Swagger	เขียนคู่มือและผังระบบ

เอกสารที่ควรมีในโปรเจกต์

README.md สำหรับเริ่มต้นใช้งาน
Installation Guide
API Documentation
Database Diagram
Deployment Guide
Troubleshooting

10. AI Development Tools อย่างปลอดภัย

AI Development Tools ช่วยอธิบายโค้ด สร้างตัวอย่าง ตรวจ bug เสนอ test case และช่วยเขียนเอกสารได้ แต่ผู้เรียนต้องตรวจสอบผลลัพธ์เสมอ และไม่ควรส่งข้อมูลลับให้ AI

งาน	ตัวอย่างการใช้ AI
Prompt Engineering	ขอให้ AI อธิบายแนวทางติดตั้งเครื่องมือ
Code Review	ให้ AI ชี้จุดเสี่ยงในโค้ด
Refactoring	ขอแนวทางจัดโครงสร้างไฟล์ใหม่
Documentation	ให้ AI ช่วยร่าง README หรือ API docs
Testing	ให้ AI เสนอ test cases

ข้อควรระวัง

ไม่ส่ง password, token, secret key หรือข้อมูลส่วนบุคคลให้ AI
ตรวจสอบโค้ดและคำอธิบายก่อนนำไปใช้จริง
เข้าใจผลลัพธ์ ไม่คัดลอกโดยไม่เรียนรู้
ใช้ AI เป็นผู้ช่วย ไม่ใช่ผู้ตัดสินใจแทนทั้งหมด

ฉันกำลังเริ่มโปรเจกต์ Web Application ด้วย Angular, Node.js และ PostgreSQL
ช่วยแนะนำชุดเครื่องมือที่ควรติดตั้ง พร้อมเหตุผลและลำดับการติดตั้งสำหรับผู้เริ่มต้น

11. การติดตั้ง Development Environment

ลำดับการติดตั้งที่แนะนำควรเริ่มจากเครื่องมือพื้นฐาน แล้วตามด้วยเครื่องมือเฉพาะด้าน front-end, database, container และ API testing

ลำดับ	เครื่องมือ	วิธีตรวจสอบ
1	Visual Studio Code	เปิดโปรแกรมและติดตั้ง extension
2	Git	`git --version`
3	Node.js/npm	`node -v`, `npm -v`
4	Angular CLI	`ng version`
5	PostgreSQL/pgAdmin	เชื่อมต่อ database ได้
6	Docker Desktop	`docker version`
7	Postman	ส่ง request ทดสอบได้

จำนวนกลุ่มเครื่องมือหลักในบทนี้

T = D + C + V + Q + P

T คือ จำนวนกลุ่มเครื่องมือทั้งหมดที่ใช้ในทีม
D คือ กลุ่มออกแบบและเอกสาร
C คือ กลุ่มเขียนโค้ดและ runtime
V คือ กลุ่ม version control
Q คือ กลุ่ม testing และ code quality
P คือ กลุ่ม packaging/deployment

Checklist ก่อนส่งงานบทที่ 1

รายการตรวจ	คำถามที่ต้องตอบ
Tool Mapping	ระบุได้หรือไม่ว่าเครื่องมือแต่ละตัวอยู่ขั้นตอนใดของ SDLC
Installation	ตรวจ version ของ Git, Node.js, npm และ Docker แล้วหรือไม่
Repository	สร้าง GitHub repository และ README แล้วหรือไม่
API Tool	ทดลองส่ง request ด้วย Postman แล้วหรือไม่
Documentation	มีขั้นตอนติดตั้งและปัญหาที่พบใน README หรือไม่
AI Safety	ระบุข้อควรระวังในการใช้ AI ได้หรือไม่

Workshop

ให้ผู้เรียนเตรียม environment สำหรับทีมพัฒนาเว็บแอปพลิเคชัน:

ติดตั้ง VS Code, Git, Node.js, Docker Desktop และ Postman
ตรวจสอบ version ของเครื่องมือหลัก
สร้าง GitHub repository
สร้าง README.md อธิบายขั้นตอนติดตั้ง
ทดลองสร้างหรือ clone project ตัวอย่าง
ทดลองรันคำสั่ง build หรือ dev server
บันทึกปัญหาที่พบและวิธีแก้ไข

Mini Project

สร้างเอกสาร Development Environment Guide สำหรับทีม 3-5 คน โดยต้องมี:

รายการเครื่องมือและเหตุผลในการเลือก
ขั้นตอนติดตั้งตามลำดับ
คำสั่งตรวจสอบ version
Git workflow สำหรับการทำงานร่วมกัน
ตัวอย่างการใช้ Docker หรือ PostgreSQL
แนวทางใช้ AI ในทีมอย่างปลอดภัย

คำถามทบทวน

SDLC คืออะไร และเครื่องมือช่วยแต่ละขั้นตอนได้อย่างไร
Git และ GitHub ต่างกันอย่างไร
Docker ช่วยแก้ปัญหา environment ไม่เหมือนกันอย่างไร
Postman มีประโยชน์อย่างไรในการทดสอบ API
Code quality tools ช่วยลดปัญหาใดในทีม
ควรระวังอะไรเมื่อใช้ AI coding assistant

กลับหน้ารายวิชา