reveal.js

# DEV_TOOLS001

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

Web Application Development Tools

---

## ภาพรวมรายวิชา

- เข้าใจกระบวนการพัฒนา Web Application
- รู้จักเครื่องมือที่ใช้ในแต่ละขั้นตอน
- เตรียม Development Environment
- ใช้ Git, GitHub, Docker และ AI Assistant อย่างเหมาะสม

---

## Learning Outcomes

เมื่อเรียนจบ ผู้เรียนสามารถ

- อธิบายประเภทของเครื่องมือพัฒนาเว็บได้
- เลือกใช้เครื่องมือให้เหมาะกับงาน
- ติดตั้งเครื่องมือหลักสำหรับพัฒนาเว็บได้
- ใช้ Git และ GitHub เบื้องต้นได้
- อธิบายบทบาทของ Docker ได้
- ใช้ AI ช่วยเรียนรู้และช่วยพัฒนาอย่างมีวิจารณญาณ

---

## เส้นทางการพัฒนา Web Application

```mermaid
flowchart LR
  Idea[Requirement / Idea] --> Design[Design]
  Design --> Code[Code]
  Code --> Test[Test]
  Test --> Deploy[Deploy]
  Deploy --> Monitor[Monitor]
  Monitor --> Improve[Improve]
  Improve --> Code
```

---

## กลุ่มเครื่องมือหลัก

| กลุ่ม | ตัวอย่าง |
|---|---|
| Design | Figma, Draw.io |
| Code Editor | VS Code |
| Version Control | Git, GitHub |
| Front-end | Node.js, npm, Angular CLI, Vite |
| Back-end | Express, NestJS, FastAPI |
| Database | PostgreSQL, MongoDB |
| API | Postman, Swagger |
| Container | Docker, Docker Compose |

---

## Workshop หลัก

1. ติดตั้ง VS Code, Git, Node.js
2. ติดตั้ง PostgreSQL, Docker, Postman
3. สร้าง GitHub Repository
4. Clone Project และ Run Application
5. ทดลอง Build Docker Container
6. เขียนเอกสาร Markdown สำหรับทีม

---

## Mini Project

สร้าง Development Environment สำหรับทีมพัฒนา Web Application

- ระบุเครื่องมือและเหตุผลที่เลือกใช้
- จัดทำ Repository
- สาธิตการรัน Project
- สาธิต Git Workflow
- สาธิต Docker เบื้องต้น
- ใช้ AI ช่วยสร้างคู่มือหรือ checklist

---

## บทเรียน

[บทที่ 1 เครื่องมือในการพัฒนาเว็บแอปพลิเคชัน](/development-tools-web-application/01-development-tools-web-application/index.md)

[สไลด์บทที่ 1](/development-tools-web-application/01-development-tools-web-application/slides.mdx)