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

สไลด์บทเรียน

วัตถุประสงค์

1. อธิบายความหมายของ Web Application และองค์ประกอบหลักของระบบได้
2. เปรียบเทียบ Static Website, Dynamic Website, SPA และ MPA ได้
3. อธิบายสถาปัตยกรรม Client-Server Architecture และลำดับการทำงานของ HTTP Request/Response ได้
4. อธิบายหลักการของ RESTful API, HTTPS และเทคโนโลยีเว็บสมัยใหม่ได้
5. วิเคราะห์เว็บแอปพลิเคชันจริงและแยกส่วน Client, Server, Database, API และ Security ได้

ภาพรวมบทเรียน

Web Application คือซอฟต์แวร์ที่ผู้ใช้เข้าถึงผ่านเว็บเบราว์เซอร์ เช่น Chrome, Edge, Firefox หรือ Safari โดยไม่จำเป็นต้องติดตั้งโปรแกรมเฉพาะบนเครื่องผู้ใช้ ระบบเว็บแอปพลิเคชันมักประกอบด้วยส่วนที่ผู้ใช้เห็นและโต้ตอบได้ (Front-end), ส่วนประมวลผลและให้บริการข้อมูล (Back-end), ส่วนจัดเก็บข้อมูล (Database), ช่องทางสื่อสารผ่านเครือข่าย (Network) และมาตรการป้องกันข้อมูล (Security)

คำสำคัญของบทเรียน

• Client: ฝั่งผู้ใช้ เช่น Browser หรือ Mobile App
• Server: ฝั่งให้บริการ เช่น Web Server, API Server หรือ Application Server
• HTTP/HTTPS: โปรโตคอลที่ใช้รับส่งข้อมูลระหว่าง client และ server
• RESTful API: แนวทางออกแบบ API โดยใช้ resource และ HTTP method
• SPA (Single Page Application): เว็บแอปที่โหลดหน้าเดียวแล้วเปลี่ยนเนื้อหาด้วย JavaScript
• MPA (Multi Page Application): เว็บที่โหลดเอกสาร HTML ใหม่เมื่อเปลี่ยนหน้า

1. Web Application คืออะไร

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

Web Application แตกต่างจากเว็บไซต์ที่มีเนื้อหาอ่านอย่างเดียว เพราะมีการโต้ตอบ มีสถานะของผู้ใช้ มีข้อมูลเปลี่ยนแปลง และมักเชื่อมต่อกับระบบหลังบ้าน

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#83a598',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart LR
  U[User
ผู้ใช้] --> B[Browser
เว็บเบราว์เซอร์]
  B --> F[Front-end
ส่วนติดต่อผู้ใช้]
  F --> A[API / Back-end
บริการหลังบ้าน]
  A --> D[(Database
ฐานข้อมูล)]
  A --> S[External Service
บริการภายนอก]
  D --> A
  S --> A
  A --> F
  F --> B

องค์ประกอบหลักของ Web Application

2. Timeline วิวัฒนาการของเว็บแอปพลิเคชัน

เว็บเริ่มจากเอกสาร HTML แบบ static แล้วค่อยพัฒนาไปสู่ระบบ dynamic, web application, SPA, real-time application และ AI-assisted web application ในปัจจุบัน

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#8ec07c',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart LR
  subgraph E1[Static Web Era
ยุคเว็บเอกสาร]
    A[HTML Pages
หน้าเว็บคงที่]
  end
  subgraph E2[Dynamic Web Era
ยุคเว็บเปลี่ยนตามข้อมูล]
    B[Server-side Rendering
สร้างหน้าจาก server]
  end
  subgraph E3[Web App Era
ยุคเว็บแอปพลิเคชัน]
    C[Database + Session
ฐานข้อมูลและสถานะผู้ใช้]
  end
  subgraph E4[Modern Web Era
ยุคเว็บสมัยใหม่]
    D[SPA + API + Cloud
หน้าเดียว API และ Cloud]
  end
  subgraph E5[AI Web Era
ยุคเว็บผสาน AI]
    E[AI API + Automation
บริการ AI และระบบอัตโนมัติ]
  end
  A --> B --> C --> D --> E

3. Static และ Dynamic Website

Static Website คือเว็บไซต์ที่ไฟล์ HTML/CSS/JavaScript ถูกเตรียมไว้ล่วงหน้า เมื่อผู้ใช้ขอหน้าเว็บ server จะส่งไฟล์เดิมกลับไปให้ browser แสดงผล เนื้อหาไม่เปลี่ยนตามผู้ใช้หรือข้อมูลในฐานข้อมูล เว้นแต่ผู้พัฒนาแก้ไฟล์เอง

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

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#b8bb26',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart TD
  A[Website Request
ขอหน้าเว็บ] --> B{Content Type?
ชนิดเนื้อหา}
  B --> C[Static
ส่งไฟล์เดิม]
  B --> D[Dynamic
สร้างผลลัพธ์ตามข้อมูล]
  D --> E[Query Database
อ่านฐานข้อมูล]
  E --> F[Render Response
สร้างผลลัพธ์]

4. Client-Server Architecture

Client-Server Architecture คือสถาปัตยกรรมที่แบ่งหน้าที่ระหว่างฝั่งผู้ใช้และฝั่งให้บริการ โดย Client รับ input และแสดงผล ส่วน Server ประมวลผล ตรวจสิทธิ์ ติดต่อฐานข้อมูล และส่ง response กลับมา

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#fe8019',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
sequenceDiagram
  participant U as User
ผู้ใช้
  participant C as Client / Browser
ฝั่งผู้ใช้
  participant S as Server / API
ฝั่งให้บริการ
  participant D as Database
ฐานข้อมูล
  U->>C: Submit form
กรอกข้อมูล
  C->>S: HTTP Request
ส่งคำขอ
  S->>D: Query / Update
อ่านหรือบันทึกข้อมูล
  D-->>S: Result
ผลลัพธ์
  S-->>C: HTTP Response
ส่งคำตอบ
  C-->>U: Render UI
แสดงผล

5. HTTP และ HTTPS

HTTP (HyperText Transfer Protocol) คือโปรโตคอลสำหรับสื่อสารแบบ request/response ระหว่าง browser และ server ส่วน HTTPS คือ HTTP ที่เข้ารหัสด้วย TLS เพื่อป้องกันการดักอ่านและแก้ไขข้อมูลระหว่างทาง

ตัวอย่าง HTTP Request:

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

HTTP Methods ที่ใช้บ่อย

Status Code ที่ควรรู้

สมการเวลา Response โดยประมาณ

คำอธิบายตัวแปร:

• T คือ เวลา response รวมที่ผู้ใช้รับรู้
• Tₙ คือ เวลาเดินทางของข้อมูลบน network
• Tₛ คือ เวลาประมวลผลบน server
• T𝒹 คือ เวลาอ่านหรือเขียนข้อมูลจาก database

6. RESTful Architecture

REST (Representational State Transfer) เป็นแนวทางออกแบบ API ให้ client และ server สื่อสารกันผ่าน resource เช่น users, products, orders หรือ courses โดยใช้ HTTP Method ให้ตรงกับการกระทำ

ตัวอย่าง JSON Response:

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

ตัวอย่างโค้ดทดลองเรียก API

<!doctype html>
<html lang="th">
<body>
  <button id="loadBtn">Load Course</button>
  <pre id="output"></pre>

  <script>
    // ตัวอย่างการเรียก REST API ด้วย fetch
    async function loadCourse() {
      const response = await fetch('/api/courses/42');

      // ตรวจสอบ status ก่อนใช้ข้อมูล
      if (!response.ok) {
        document.getElementById('output').textContent = 'Cannot load course';
        return;
      }

      const course = await response.json();
      document.getElementById('output').textContent =
        `${course.code}: ${course.title}`;
    }

    // ตัวอย่างการใช้งาน: กดปุ่มเพื่อโหลดข้อมูลรายวิชา
    document.getElementById('loadBtn').addEventListener('click', loadCourse);
  </script>
</body>
</html>

7. Single Page Application (SPA)

Single Page Application (SPA) คือเว็บแอปพลิเคชันที่โหลดหน้า HTML หลักครั้งเดียว แล้วใช้ JavaScript เปลี่ยนเนื้อหาในหน้าโดยไม่ต้องโหลดเอกสาร HTML ใหม่ทั้งหน้า Framework เช่น Angular, React และ Vue มักใช้แนวทางนี้

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#d3869b',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart LR
  B[Browser
โหลด app shell] --> J[JavaScript App
แอปฝั่ง client]
  J --> R[Client Routing
เปลี่ยนหน้าใน browser]
  J --> A[REST API
เรียกข้อมูล]
  A --> J
  J --> U[Update UI
อัปเดตหน้าจอ]

ข้อดีของ SPA

• ประสบการณ์ใช้งานลื่นไหลเหมือน application
• เปลี่ยนหน้าหลังโหลดครั้งแรกได้เร็ว
• เหมาะกับระบบที่มี interaction จำนวนมาก
• แยก front-end และ back-end ผ่าน API ได้ชัดเจน

ข้อควรระวังของ SPA

• โหลดครั้งแรกอาจหนักหาก bundle ใหญ่
• ต้องจัดการ routing, state และ error ให้ดี
• SEO อาจต้องวางแผนเพิ่มเติม
• ต้องดูแล security ฝั่ง client และ API อย่างรอบคอบ

8. Multi Page Application (MPA)

Multi Page Application (MPA) คือเว็บที่แต่ละหน้ามี HTML document ของตนเอง เมื่อผู้ใช้กด link ไปหน้าใหม่ browser จะส่ง request เพื่อขอหน้า HTML ใหม่จาก server

/home.html -> /about.html -> /contact.html

เปรียบเทียบ SPA และ MPA

9. Modern Web Technology

Modern Web Technology คือชุดแนวคิด เครื่องมือ และมาตรฐานที่ใช้สร้างเว็บแอปพลิเคชันสมัยใหม่ให้เร็ว ปลอดภัย ดูแลต่อได้ และรองรับผู้ใช้หลายรูปแบบ

แนวโน้มสำคัญของเว็บสมัยใหม่

1. Component-based development
2. API-first architecture
3. Responsive และ mobile-first design
4. Real-time communication
5. Cloud และ container deployment
6. Security by design
7. AI-assisted features
8. Performance และ accessibility เป็นเรื่องพื้นฐาน

Checklist ก่อนส่งงานบทที่ 1

กิจกรรม

เลือกเว็บแอปพลิเคชัน 1 ระบบ แล้ววิเคราะห์ว่าในระบบนั้นมีส่วนใดเป็น Client, Server, Database, API และ Security จากนั้นวาด flow การทำงานแบบ Mermaid และสรุปเป็นตาราง

คำถามทบทวน

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

กลับรายวิชา