reveal.js

# 04-522-306

การพัฒนาเว็บแอปพลิเคชัน

Web Application Development

หน่วยกิต 3(30-45-60)

---

## คำอธิบายรายวิชา

กระบวนทัศน์การโปรแกรมเว็บ เฟรมเวิร์กการโปรแกรมเว็บ เทคโนโลยีการออกแบบเว็บ HTML, CSS, JavaScript และการออกเว็บสมัยใหม่ เทคโนโลยีการโปรแกรมบนเว็บ การพัฒนาแอปพลิเคชัน WebSocket และการใช้ Linux สำหรับการพัฒนาเว็บแอปพลิเคชัน

---

## ผลลัพธ์การเรียนรู้

- อธิบายสถาปัตยกรรม Web Application
- สร้าง UI ด้วย HTML5, CSS3 และ JavaScript
- พัฒนา Angular Front-end
- ออกแบบ REST API และเชื่อมต่อฐานข้อมูล
- ทำ Authentication, Security, Real-time และ AI Integration
- Deploy และนำเสนอโครงงาน Full Stack

---

## เส้นทางการเรียนตามสัปดาห์

| ช่วง | เนื้อหา |
|---|---|
| 1-2 | แนะนำรายวิชา, Web Architecture, HTML5/CSS3, Responsive Design |
| 3-5 | JavaScript ES6+, Angular, Components, Routing, REST API |
| 6-8 | Back-end, Database, Authentication, Full Stack และสอบปฏิบัติกลางภาค |
| 9-12 | WebSocket, AI API, Linux, Git, Docker และ Deployment |
| 13-15 | Testing, Optimization, Project Development และ Presentation |

---

## สัปดาห์ที่ 1-3

- แนะนำรายวิชา, OBE, CLO, PLO
- Web Architecture, Client-Server, HTTP/HTTPS
- HTML5, CSS3, Semantic HTML
- Workshop Responsive Design
- JavaScript Modern, DOM, Module, Angular Framework

ประเมิน: การมีส่วนร่วม, Quiz, Lab 1, Lab 2

---

## สัปดาห์ที่ 4-6

- Components, Services, Routing, Bootstrap, Forms
- HTTP Client, JSON, REST API Integration
- Node.js / Express หรือ Node-RED
- CRUD API และ PostgreSQL

ประเมิน: Assignment 1, Lab 3, Lab 4

---

## สัปดาห์ที่ 7-9

- JWT Authentication, Authorization, Password Hashing, CORS
- เชื่อม Angular กับ Back-end และ Database
- หลักการ Real-time, WebSocket, Notification
- พัฒนา Chat หรือ Dashboard แบบ Real-time

ประเมิน: Assignment 2, สอบปฏิบัติกลางภาค, Lab 5

---

## สัปดาห์ที่ 10-12

- เชื่อมต่อ OpenAI API, Gemini API หรือ AI Service
- ทดลองสร้าง AI Feature ในเว็บ
- Linux Command, Git, GitHub Workflow
- Docker, Docker Compose, Containerization และ Deploy

ประเมิน: Assignment 3, Lab 6, Lab 7

---

## สัปดาห์ที่ 13-15

- Unit Test, API Test, Debugging และ Optimization
- Project-based Learning, Code Review, ปรึกษาโครงงาน
- พัฒนาและทดสอบโครงงาน
- นำเสนอผลงาน สาธิตระบบ และอภิปรายผล

ประเมิน: Assignment 4, ความก้าวหน้าโครงงาน, Project, Presentation, Demonstration

---

## เกณฑ์ประเมินรายสัปดาห์

| สัปดาห์ | ประเมิน |
|---:|---|
| 1 | การมีส่วนร่วม, Quiz |
| 2 | Lab 1 |
| 3 | Lab 2 |
| 4 | Assignment 1 |
| 5 | Lab 3 |
| 6 | Lab 4 |
| 7 | Assignment 2 |
| 8 | สอบปฏิบัติกลางภาค |
| 9 | Lab 5 |
| 10 | Assignment 3 |
| 11 | Lab 6 |
| 12 | Lab 7 |
| 13 | Assignment 4 |
| 14 | ความก้าวหน้าโครงงาน |
| 15 | Project, Presentation, Demonstration |

---

## สถาปัตยกรรมภาพรวม

```mermaid
flowchart LR
  U[User] --> UI[Angular Front-end]
  UI --> API[REST API]
  API --> DB[(PostgreSQL)]
  API --> AI[AI API]
  API --> WS[WebSocket]
```

---

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

- HTML5, CSS3, JavaScript
- Angular
- Node.js, Express หรือ Node-RED
- PostgreSQL
- JWT Authentication, Authorization, Password Hashing, CORS
- WebSocket
- Git, Linux, Docker
- OpenAI API, Gemini API หรือ AI Service

---

## แนวทางโครงงาน

```mermaid
flowchart LR
  Plan[Requirement] --> Design[System Design]
  Design --> FE[Angular Front-end]
  Design --> BE[REST API]
  BE --> DB[(PostgreSQL)]
  BE --> AI[AI API]
  FE --> Test[Testing]
  BE --> Test
  Test --> Deploy[Docker Deployment]
  Deploy --> Demo[Presentation]
```

---

## โครงงานปลายภาค

Full Stack Web Application จำนวน 1 ระบบ

- Responsive Web Design
- Angular Front-end
- REST API และ Database
- JWT Authentication
- Docker Deployment
- AI API Integration อย่างน้อย 1 ฟังก์ชัน
- นำเสนอและสาธิตระบบ

---

## Checklist ก่อนส่ง

- ระบบทำงานครบตาม Requirement
- UI รองรับหลายขนาดหน้าจอ
- API มี CRUD และ Error Handling
- ฐานข้อมูลออกแบบเหมาะสม
- Login และสิทธิ์ผู้ใช้ปลอดภัยในระดับพื้นฐาน
- มี Repository, Docker และเอกสารติดตั้ง
- Demo อธิบายปัญหา วิธีแก้ และผลลัพธ์ได้ชัดเจน

---

## เริ่มเรียน