reveal.js

# การโปรแกรมบนเว็บ

Web Programming

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

---

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

รายวิชานี้พาผู้เรียนสร้างเว็บจากพื้นฐานไปสู่ Full Stack Web Application

- HTML5 และ CSS3
- JavaScript และ TypeScript
- Angular Front-end
- REST API และ Back-end
- Database, Security, Testing และ Deployment
- AI API Integration

---

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

การโปรแกรมบนเว็บไม่ใช่แค่การทำหน้าเว็บให้แสดงผลได้ แต่คือการออกแบบระบบที่ผู้ใช้ เบราว์เซอร์ เซิร์ฟเวอร์ ฐานข้อมูล และบริการภายนอกทำงานร่วมกันอย่างถูกต้อง ปลอดภัย และดูแลต่อได้

---

## สถาปัตยกรรมที่ต้องเข้าใจ

```mermaid
flowchart LR
  U[User] --> B[Browser]
  B --> F[Angular Front-end]
  F --> A[REST API]
  A --> D[(Database)]
  A --> AI[AI API]
```

---

## สิ่งที่ผู้เรียนจะทำได้

- สร้างเว็บ Responsive ด้วย HTML/CSS
- เขียน JavaScript เพื่อควบคุม DOM และ Event
- พัฒนา Angular Application แบบ Component-based
- เชื่อมต่อ API และจัดการข้อมูลจาก Server
- สร้าง Back-end และออกแบบ REST API
- เชื่อมต่อฐานข้อมูลและพัฒนาระบบ CRUD
- เพิ่ม Login และแนวทางความปลอดภัยพื้นฐาน

---

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

| ช่วง | เนื้อหา |
|---|---|
| 1-3 | Web Foundation, HTML, CSS |
| 4-6 | JavaScript, DOM, TypeScript |
| 7-9 | Angular Front-end |
| 10-12 | Back-end, Database, Security |
| 13-15 | Integration, Testing, Deployment, Project |

---

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

- Browser DevTools
- VS Code
- Node.js และ npm
- Angular CLI
- Postman หรือ API Client
- PostgreSQL
- Git และ GitHub
- Docker และ Docker Compose

---

## รูปแบบการเรียน

- เรียนแนวคิดจากบทเรียนและสไลด์
- ทดลองเขียนโค้ดตามตัวอย่าง
- ทำแบบฝึกหัดรายสัปดาห์
- ตรวจงานและรับ feedback
- รวมความรู้เป็นโครงงานปลายภาค

---

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

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

- Angular Front-end
- REST API
- Database
- Authentication
- Git Collaboration
- Docker หรือ Deployment
- AI API Integration อย่างน้อย 1 ฟังก์ชัน

---

## เกณฑ์คุณภาพของงาน

งานที่ดีควร

- แก้ปัญหาจริงหรือมีผู้ใช้เป้าหมายชัดเจน
- ใช้งานง่ายและแสดงผลได้หลายขนาดหน้าจอ
- API และฐานข้อมูลออกแบบเป็นระบบ
- มีการจัดการ error และ security เบื้องต้น
- Deploy หรือสาธิตการทำงานซ้ำได้

---

## คำถามเริ่มต้น

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

---

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

ไปที่บทที่ 1 เพื่อปูพื้นฐานการทำงานของเว็บและภาพรวมเทคโนโลยีทั้งหมด