reveal.js

# เทคโนโลยีเว็บสมัยใหม่

หัวข้อ 6 · Web Programming

---

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

เว็บสมัยใหม่ประกอบด้วยหลายชั้น ตั้งแต่ frontend, backend, database, cloud hosting, security, testing และ deployment การเห็นภาพรวมช่วยให้เข้าใจว่าบทเรียนแต่ละส่วนเชื่อมต่อกันอย่างไร

---

## Frontend Frameworks

ช่วยสร้าง UI ที่ซับซ้อนและจัดการ state ของเว็บแอปได้เป็นระบบ

| Framework | จุดเด่น | เหมาะกับ |
|---|---|---|
| Angular | โครงสร้างครบ ใช้ TypeScript | ระบบองค์กร แอปกลาง-ใหญ่ |
| React | ยืดหยุ่น ecosystem ใหญ่ | เว็บแอปทั่วไป dashboard |
| Vue.js | เรียนรู้ง่าย เบา | ทีมเล็ก-กลาง |

รายวิชานี้เน้น Angular เพื่อเห็น component, service, routing, forms และโครงสร้าง project

---

## Backend Frameworks

ใช้สร้าง API, authentication, business logic และเชื่อมต่อฐานข้อมูล

- **Express.js**: เรียบง่าย ยืดหยุ่น เหมาะกับ Node.js API
- **NestJS**: โครงสร้างชัด ใช้ TypeScript เหมาะกับระบบขนาดใหญ่
- **Django**: Python framework ที่มาพร้อมเครื่องมือครบ
- **Laravel**: PHP framework ที่นิยมสำหรับ web application

---

## Database

ฐานข้อมูลแบ่งกว้าง ๆ เป็น SQL และ NoSQL

| ประเภท | ตัวอย่าง | จุดเด่น |
|---|---|---|
| SQL | PostgreSQL, MySQL | โครงสร้างชัด ความสัมพันธ์แน่น |
| NoSQL | MongoDB, Firebase | ยืดหยุ่น เหมาะกับข้อมูลเปลี่ยนรูปแบบบ่อย |

การเลือกฐานข้อมูลขึ้นกับลักษณะข้อมูล ความสัมพันธ์ ปริมาณการอ่านเขียน และทีมที่ดูแลระบบ

---

## Cloud และ Hosting

บริการ hosting ช่วยนำเว็บขึ้นออนไลน์

- **Vercel**: frontend และ full-stack บางรูปแบบ
- **Netlify**: static site และ frontend deployment
- **Firebase**: hosting, auth, database, serverless tools
- **AWS**: cloud ขนาดใหญ่และยืดหยุ่น
- **Azure**: เหมาะกับองค์กรใน ecosystem Microsoft

---

## แผนการเรียนรู้ทั้งรายวิชา

1. HTML/CSS และ Responsive Design
2. JavaScript และ DOM
3. TypeScript และ Angular
4. Node.js และ REST API
5. Database และ Authentication
6. Full-Stack Integration
7. Testing, DevOps และ Deployment
8. Final Project และ Portfolio

---

## การประเมินผล

- แบบฝึกหัดรายบท
- งานปฏิบัติรายสัปดาห์
- Mini project
- แบบทดสอบหลังเรียน
- Final full-stack project
- การนำเสนอและ code review

---

## ตัวอย่าง Stack

ระบบ “Learning Tracker”

```text
Angular UI
-> Express.js REST API
-> PostgreSQL Database
-> Cloud Hosting
```

แต่ละชั้นมีหน้าที่ชัดเจน และเชื่อมกันผ่าน API

---

## กิจกรรม

เลือกเทคโนโลยี 1 ชุดสำหรับสร้างระบบ “Learning Tracker” เช่น Angular + Express.js + PostgreSQL แล้วอธิบายว่าแต่ละเทคโนโลยีทำหน้าที่อะไรในระบบ

---

## จบบทเรียน

<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>