reveal.js

# บทที่ 1

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

Web Application Development Tools

---

## เป้าหมาย

- เข้าใจบทบาทของ **Development Tools**
- เชื่อมเครื่องมือกับ **SDLC**, **Agile** และ **DevOps**
- เลือกเครื่องมือสำหรับ design, coding, testing และ deployment
- เตรียม **Development Environment**
- ใช้ **AI Development Tools** อย่างปลอดภัย

---

## Development Flow

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

---

## SDLC + Tools

| ขั้นตอน | ตัวอย่างเครื่องมือ |
|---|---|
| Requirement | Jira, Trello, GitHub Issues |
| Design | Figma, Draw.io, Mermaid |
| Development | VS Code, Node.js, Angular CLI |
| Testing | Postman, Playwright, Jasmine |
| Deployment | Docker, Caddy, GitHub Actions |
| Operation | Logs, Monitoring, Documentation |

---

## Agile / DevOps

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#b8bb26'}}}%%
flowchart LR
 A[Code เขียนโค้ด] --> B[Commit Git]
 B --> C[Build สร้างระบบ]
 C --> D[Test ทดสอบ]
 D --> E[Package บรรจุ]
 E --> F[Deploy นำขึ้นใช้]
</pre>

---

## Tool Groups

| กลุ่ม | ตัวอย่าง |
|---|---|
| Design | Figma, Mermaid |
| Code Editor | Visual Studio Code |
| Version Control | Git, GitHub |
| Front-end | Node.js, npm, Angular CLI |
| Back-end | Node.js, Express, Node-RED |
| Database | PostgreSQL, pgAdmin |
| API | Postman, Swagger |
| Container | Docker, Docker Compose |

---

## Design Tools

| ชิ้นงาน | ความหมาย |
|---|---|
| Wireframe | โครงร่างหน้าจอ |
| Mockup | ภาพหน้าจอใกล้งานจริง |
| Prototype | แบบจำลองที่คลิกได้ |
| Flowchart | ผังขั้นตอน |
| ER Diagram | ผังความสัมพันธ์ข้อมูล |

---

## VS Code

- Extensions
- Integrated Terminal
- IntelliSense
- Debugger
- Source Control

```bash
git --version
node -v
npm -v
docker version
```

---

## Git Workflow

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#d3869b'}}}%%
flowchart LR
 A[Working Directory แก้ไฟล์] --> B[Staging git add]
 B --> C[Local Repository git commit]
 C --> D[Remote Repository git push]
 D --> E[Pull Request ตรวจงาน]
</pre>

---

## Git Commands

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

| คำศัพท์ | ความหมาย |
|---|---|
| Commit | จุดบันทึก |
| Branch | สายงานแยก |
| Merge | รวม branch |
| Pull Request | ขอรวมโค้ด |

---

## Front-end / Back-end / Database

| ส่วนระบบ | เครื่องมือ |
|---|---|
| Front-end | Angular CLI, npm, Vite |
| Back-end | Node.js, Express, Node-RED |
| Database | PostgreSQL, pgAdmin |
| API Testing | Postman, Swagger |

---

## Useful Commands

```bash
npm install
npm run dev
npm run build
```

```sql
SELECT id, name, price
FROM products
ORDER BY id DESC;
```

---

## Docker / Deployment

```yaml
services:
  web:
    image: caddy:latest
    ports:
      - "80:80"
      - "443:443"
  api:
    image: node:20
```

---

## Docker Terms

| คำศัพท์ | ความหมาย |
|---|---|
| Image | ต้นแบบ container |
| Container | instance ที่รันจริง |
| Volume | พื้นที่เก็บข้อมูล |
| Network | ช่องทางสื่อสาร |
| Compose | รันหลาย service |

---

## Testing / Quality / Docs

| กลุ่ม | ตัวอย่าง |
|---|---|
| Unit Test | Jasmine, Jest |
| E2E Test | Playwright, Cypress |
| API Test | Postman, Newman |
| Formatter | Prettier |
| Linter | ESLint |
| Docs | Markdown, Mermaid, Swagger |

---

## AI Development Tools

| งาน | ตัวอย่าง |
|---|---|
| Code Review | ชี้จุดเสี่ยง |
| Refactoring | เสนอโครงสร้างใหม่ |
| Documentation | ร่าง README |
| Testing | เสนอ test cases |
| Learning | อธิบายแนวคิด |

---

## AI Safety

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

```text
ช่วยแนะนำชุดเครื่องมือสำหรับ Angular, Node.js และ PostgreSQL
พร้อมเหตุผลและลำดับการติดตั้งสำหรับผู้เริ่มต้น
```

---

## Environment Setup

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

---

## Tool Count Formula

- **T**: จำนวนกลุ่มเครื่องมือทั้งหมด
- **D**: design/docs
- **C**: coding/runtime
- **V**: version control
- **Q**: testing/quality
- **P**: packaging/deployment

---

## Checklist

- mapping เครื่องมือกับ SDLC ได้
- ตรวจ version เครื่องมือหลักแล้ว
- สร้าง GitHub repository แล้ว
- เขียน README setup แล้ว
- ทดลอง Postman แล้ว
- ระบุแนวทางใช้ AI อย่างปลอดภัยได้

---

## Workshop

1. ติดตั้ง VS Code, Git, Node.js, Docker และ Postman
2. ตรวจสอบ version
3. สร้าง GitHub repository
4. เขียน `README.md`
5. ทดลอง run project
6. บันทึกปัญหาและวิธีแก้ไข

---

## Mini Project

สร้าง **Development Environment Guide**

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

---

## คำถามท้ายบท

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