reveal.js

# เครื่องมือพัฒนาเว็บ

หัวข้อ 5 · Web Programming

---

## แนวคิดหลัก

นักพัฒนาเว็บไม่ได้เขียนโค้ดเพียงอย่างเดียว แต่ต้องใช้เครื่องมือเพื่อตรวจสอบ แก้ปัญหา ทดสอบ API จัดการไฟล์ ติดตั้ง package และควบคุมเวอร์ชันของงาน

---

## Browser DevTools

เครื่องมือที่ติดมากับ browser สมัยใหม่ เช่น Chrome, Edge และ Firefox

- **Elements**: ตรวจ HTML/CSS
- **Console**: ดู error และทดลอง JavaScript
- **Network**: ตรวจ request, response, status code และเวลาโหลด
- **Sources**: ดูไฟล์ JavaScript และตั้ง breakpoint
- **Performance**: วิเคราะห์ประสิทธิภาพ

---

## VS Code

Code editor ที่นิยมในการพัฒนาเว็บ เพราะเร็ว มี extension จำนวนมาก และทำงานร่วมกับ terminal/Git ได้ดี

Extension สำคัญ:

- Prettier
- ESLint
- Live Server
- Angular Language Service
- GitLens

---

## Terminal และ Git

Terminal ช่วยให้ทำงานกับ project และ developer tools ได้รวดเร็ว

```powershell
cd my-project
ls
mkdir web-course
git status
git add .
git commit -m "initial project"
```

บน Windows สามารถใช้ `New-Item index.html` แทน `touch index.html` ได้

---

## Node.js และ npm

Node.js ทำให้ JavaScript ทำงานนอก browser ได้ ส่วน npm ใช้ติดตั้ง package สำหรับ project

ตรวจสอบเวอร์ชัน:

```powershell
node -v
npm -v
```

ติดตั้ง package:

```powershell
npm install express
```

---

## Postman

เครื่องมือทดสอบ API โดยไม่ต้องเขียน frontend ก่อน

ใช้เพื่อ:

- ทดสอบ endpoint
- ส่ง request body
- ใส่ header เช่น Authorization
- ตรวจ status code และ response JSON
- บันทึกชุด request สำหรับใช้งานซ้ำ

---

## Workflow พื้นฐาน

```text
เขียนโค้ดใน VS Code
-> รันคำสั่งใน Terminal
-> ตรวจหน้าเว็บด้วย DevTools
-> ทดสอบ API ด้วย Postman
-> บันทึกงานด้วย Git
```

---

## กิจกรรม

ติดตั้งหรือเปิดใช้งาน VS Code, Browser DevTools, Terminal, Node.js/npm และ Postman จากนั้นบันทึกผลลัพธ์ `node -v` และ `npm -v`

---

## จบบทเรียน

<a href="/web-programming/01-introduction/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>