reveal.js

# บทที่ 1

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

---

## เป้าหมายบทเรียน

- อธิบาย **Web Application** ได้
- แยก Static และ Dynamic Website ได้
- อธิบาย **Client-Server Architecture**
- เข้าใจ **HTTP**, **HTTPS** และ **REST API**
- เปรียบเทียบ **SPA** และ **MPA**
- เห็นภาพ **Modern Web Technology**

---

## Web Application

ซอฟต์แวร์ที่ผู้ใช้เข้าถึงผ่านเว็บเบราว์เซอร์

- รับข้อมูลจากผู้ใช้
- ประมวลผล
- ติดต่อฐานข้อมูลหรือบริการภายนอก
- ส่งผลลัพธ์กลับมาแสดงบนหน้าเว็บ

---

## ภาพรวมระบบ

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#83a598'}}}%%
flowchart LR
  U[User<br/>ผู้ใช้] --> B[Browser<br/>เบราว์เซอร์]
  B --> F[Front-end<br/>หน้าจอ]
  F --> A[Back-end/API<br/>หลังบ้าน]
  A --> D[(Database<br/>ฐานข้อมูล)]
</pre>

---

## องค์ประกอบหลัก

| ส่วน | หน้าที่ |
|---|---|
| **Front-end** | UI และการโต้ตอบ |
| **Back-end** | Logic และ API |
| **Database** | จัดเก็บข้อมูล |
| **Network** | สื่อสารระหว่างระบบ |
| **Security** | ปกป้องผู้ใช้และข้อมูล |

---

## Timeline ของเว็บ

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#8ec07c'}}}%%
flowchart LR
  subgraph A[Static Web<br/>เว็บเอกสาร]
    A1[HTML]
  end
  subgraph B[Dynamic Web<br/>เว็บตามข้อมูล]
    B1[Server Render]
  end
  subgraph C[Modern Web<br/>เว็บสมัยใหม่]
    C1[SPA + API + Cloud]
  end
  A1 --> B1 --> C1
</pre>

---

## Static vs Dynamic

| ประเด็น | Static | Dynamic |
|---|---|---|
| เนื้อหา | คงที่ | เปลี่ยนตามข้อมูล/ผู้ใช้ |
| Logic | น้อย | มี client/server logic |
| Database | อาจไม่มี | มักมี |
| ตัวอย่าง | Portfolio, Docs | LMS, Banking, Dashboard |

---

## Client-Server Architecture

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#fe8019'}}}%%
sequenceDiagram
  participant C as Client<br/>ฝั่งผู้ใช้
  participant S as Server<br/>ฝั่งบริการ
  participant D as Database<br/>ฐานข้อมูล
  C->>S: HTTP Request
  S->>D: Query / Update
  D-->>S: Result
  S-->>C: HTTP Response
</pre>

---

## HTTP / HTTPS

**HTTP** คือ request/response protocol  
**HTTPS** คือ HTTP ที่เข้ารหัสด้วย TLS

```http
GET /api/courses HTTP/1.1
Host: example.com
Accept: application/json
```

---

## HTTP Methods

| Method | ใช้ทำอะไร |
|---|---|
| **GET** | ขอข้อมูล |
| **POST** | สร้างข้อมูล |
| **PUT** | แทนที่ข้อมูล |
| **PATCH** | แก้ไขบางส่วน |
| **DELETE** | ลบข้อมูล |

---

## Response Time Formula

- **Tₙ**: Network time
- **Tₛ**: Server processing time
- **T𝒹**: Database time

---

## RESTful API

ออกแบบ API รอบ **resource** และใช้ HTTP Method ให้ตรงความหมาย

| งาน | Method | URL |
|---|---|---|
| ดูรายการ | GET | `/api/courses` |
| ดูรายการเดียว | GET | `/api/courses/42` |
| เพิ่ม | POST | `/api/courses` |
| แก้ไข | PATCH | `/api/courses/42` |
| ลบ | DELETE | `/api/courses/42` |

---

## JSON Response

```json
{
  "id": 42,
  "code": "04-522-306",
  "title": "Web Application Development"
}
```

---

## Code Example

```html
<button id="loadBtn">Load Course</button>
<pre id="output"></pre>
<script>
  // เรียก API แล้วแสดงผลรายวิชา
  async function loadCourse() {
    const res = await fetch('/api/courses/42');
    const course = await res.json();
    output.textContent = `${course.code}: ${course.title}`;
  }
  loadBtn.addEventListener('click', loadCourse);
</script>
```

---

## SPA

โหลดหน้า HTML หลักครั้งเดียว แล้วใช้ JavaScript เปลี่ยนเนื้อหา

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#d3869b'}}}%%
flowchart LR
  B[Browser] --> J[JavaScript App]
  J --> R[Client Routing]
  J --> A[REST API]
  A --> J
  J --> U[Update UI]
</pre>

---

## SPA vs MPA

| ประเด็น | SPA | MPA |
|---|---|---|
| เปลี่ยนหน้า | Client-side routing | โหลด HTML ใหม่ |
| เหมาะกับ | Dashboard, Admin | Content, News |
| SEO | ต้องวางแผนเพิ่ม | มักง่ายกว่า |
| Client complexity | สูงกว่า | ต่ำกว่า |

---

## Modern Web Technology

| กลุ่ม | ตัวอย่าง |
|---|---|
| Front-end | HTML, CSS, JS, Angular |
| Back-end | Node.js, Express |
| API | REST, WebSocket |
| Database | PostgreSQL |
| Security | HTTPS, JWT, CORS |
| DevOps | Git, Docker, CI/CD |
| AI | OpenAI API, Gemini API |

---

## Checklist

- อธิบาย Web Application ได้
- แยก Static/Dynamic ได้
- วาด Client-Server flow ได้
- อธิบาย HTTP/HTTPS ได้
- ยกตัวอย่าง REST API ได้
- เปรียบเทียบ SPA/MPA ได้
- ระบุเทคโนโลยีที่เกี่ยวข้องกับโครงงานได้

---

## กิจกรรม

เลือกเว็บแอปพลิเคชัน 1 ระบบ แล้ววิเคราะห์:

- Client
- Server
- Database
- API
- Security

---

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

1. Web Application ต่างจาก Static Website อย่างไร
2. HTTP request/response มีขั้นตอนอะไรบ้าง
3. RESTful API ที่ดีควรออกแบบอย่างไร
4. SPA และ MPA เหมาะกับงานต่างกันอย่างไร
5. HTTPS สำคัญต่อเว็บแอปพลิเคชันอย่างไร