Basic Website Workflow

Day 1 - ชั่วโมงที่ 1: Basic Website Workflow

เป้าหมายของชั่วโมงนี้

หลังจบชั่วโมงแรก ผู้เรียนควรสามารถ:

1. อธิบายได้ว่าเว็บไซต์หนึ่งระบบประกอบด้วย frontend, backend และ database
2. เข้าใจภาพรวม request/response ระหว่าง browser และ server
3. อธิบาย CRUD ได้ในภาษาง่าย ๆ
4. เห็นภาพว่า HTML, CSS, TypeScript, Next.js, database และ authentication อยู่ตรงไหนในระบบจริง
5. เข้าใจโจทย์โปรเจกต์หลักของ bootcamp คือระบบแจ้งปัญหาและติดตามงานภายในฝ่าย IT

ไฟล์ที่เกี่ยวข้องในชั่วโมงนี้

ชั่วโมงนี้ยังไม่เริ่มเขียนไฟล์ code หลัก เป็นช่วงอธิบายภาพรวมและวาด flow

ไฟล์ที่จะเริ่มสร้างในชั่วโมงถัดไป:

index.html
style.css
README.md

โครงสร้างเวลา 60 นาที

Slide 1: จากหน้าเว็บธรรมดาไปสู่ Web Application

ก่อนเริ่มเขียน code เราจะทำความเข้าใจก่อนว่าแต่ละส่วนของระบบเว็บทำงานร่วมกันอย่างไร

หลังจบชั่วโมงนี้คุณจะเห็นภาพว่า:

• Frontend, backend และ database รับผิดชอบอะไร
• Request และ response เดินทางอย่างไร
• Prototype ที่เริ่มวันนี้จะต่อยอดเป็นระบบจริงได้อย่างไร

Slide 2: Project ที่เราจะสร้าง

ตลอด 5 วัน เราจะสร้าง ระบบแจ้งปัญหาและติดตามงานภายในฝ่าย IT

ระบบจะเริ่มจากหน้า HTML/CSS แบบ static แล้วค่อยเพิ่ม Next.js, database, login และการกำหนดสิทธิ์

Slide 3: Website กับ Web Application ต่างกันอย่างไร

ระบบที่เราจะสร้างเป็น Web Application เพราะผู้ใช้กรอก form, ระบบบันทึกข้อมูล และ ADMIN เปลี่ยนสถานะงานได้

Slide 4: ระบบเว็บหนึ่งระบบมีอะไรบ้าง

• Browser เปิดหน้าเว็บและรับการคลิกหรือข้อมูลจากผู้ใช้
• Frontend แสดงหน้าจอและส่งคำขอ
• Backend ตรวจคำขอและตัดสินใจว่าจะทำอะไรต่อ
• Database เก็บข้อมูลที่ระบบต้องใช้

ผู้ใช้ไม่ได้ติดต่อ database โดยตรง แต่ทำงานผ่าน frontend และ backend

Slide 5: Frontend คือส่วนที่ผู้ใช้มองเห็น

ในระบบแจ้งปัญหา Frontend ประกอบด้วย:

• Form สำหรับกรอกชื่อผู้แจ้งและรายละเอียดปัญหา
• ปุ่ม Submit สำหรับส่งข้อมูล
• ตารางรายการปัญหา
• Badge แสดงสถานะ OPEN, IN_PROGRESS และ DONE
• หน้า Login และหน้า ADMIN

HTML ใช้สร้างโครงสร้างของหน้า CSS ใช้จัดหน้าตา ส่วน TypeScript ใช้เพิ่ม logic และจัดการข้อมูล

Slide 6: Backend คือส่วนที่ตัดสินใจหลังบ้าน

เมื่อ Frontend ส่ง request เข้ามา Backend ต้อง:

1. รับข้อมูลจากผู้ใช้
2. ตรวจว่าข้อมูลครบและอยู่ในรูปแบบที่ยอมรับได้
3. ตรวจว่าผู้ใช้ Login แล้วหรือยัง
4. ตรวจว่าผู้ใช้มีสิทธิ์ทำสิ่งนั้นหรือไม่
5. อ่านหรือบันทึกข้อมูลใน database
6. ส่งผลลัพธ์หรือ error กลับไป

การตรวจข้อมูลและสิทธิ์ที่ Backend เป็นสิ่งที่ขาดไม่ได้

Slide 7: Database คือที่เก็บข้อมูลของระบบ

ตัวอย่างข้อมูล issue ที่ระบบต้องเก็บ:

นอกจากข้อมูลที่ผู้ใช้กรอก ระบบยังต้องเก็บเวลา ผู้สร้างรายการ และข้อมูลที่ ADMIN แก้ไข

Database ช่วยให้ระบบค้นหา เพิ่ม และแก้ไขข้อมูลได้อย่างเป็นระบบ แม้หน้าตาจะดูคล้ายตารางก็ตาม

Slide 8: Request และ Response คืออะไร

User กด Submit
        ↓
Browser ส่ง Request ไปยัง Server
        ↓
Server ตรวจและประมวลผล
        ↓
Server ส่ง Response กลับ
        ↓
Browser แสดงผลสำเร็จหรือ Error

• Request คือคำขอ เช่น เปิดหน้าเว็บ ส่ง form หรือ Login
• Response คือคำตอบ เช่น หน้าเว็บ ข้อมูล ข้อความ Error หรือการ Redirect

ทุกครั้งที่เราใช้งาน Web Application จะมี request และ response เกิดขึ้น

Slide 9: Flow การแจ้งปัญหาหนึ่งรายการ

จุดสำคัญคือ Backend ต้องตรวจข้อมูลอีกครั้งก่อนบันทึก เพราะข้อมูลที่ส่งจาก Browser สามารถถูกแก้ไขได้

หากข้อมูลผ่าน ระบบจึงบันทึก issue ลง database หากไม่ผ่าน ระบบส่ง error กลับไปให้ผู้ใช้แก้ไข

Slide 10: CRUD คือการทำงานพื้นฐานกับข้อมูล

ใน Project นี้เราจะใช้ status DONE เพื่อปิดงานแทนการลบข้อมูลจริง ทำให้ยังย้อนดูประวัติได้

Slide 11: แต่ละเทคโนโลยีอยู่ตรงไหน

เราไม่จำเป็นต้องเรียนทุกอย่างพร้อมกัน แต่จะเพิ่มทีละชั้นบน Project เดิม

Slide 12: ทำไมต้องเข้าใจ Flow ก่อนใช้ AI

AI ช่วยเขียน code ได้เร็ว แต่ยังต้องมีคนตรวจว่า:

• Code อยู่ฝั่ง Frontend หรือ Backend
• ข้อมูลถูกตรวจที่จุดใด
• ผู้ใช้มีสิทธิ์ทำสิ่งนั้นหรือไม่
• Error ถูกจัดการอย่างไร
• ข้อมูลสำคัญหรือ Secret ถูกเปิดเผยหรือไม่

ก่อนใช้ code ที่ AI สร้าง ให้ขอคำอธิบาย flow และตรวจว่า code เชื่อมกับระบบส่วนใด

Slide 13: สรุปก่อนเริ่มเขียน HTML

ตอนนี้เราเห็นภาพแล้วว่า:

• Frontend รับข้อมูลและแสดงผล
• Backend ตรวจและประมวลผล request
• Database เก็บข้อมูลของระบบ
• CRUD อธิบายการสร้าง อ่าน แก้ไข และปิดข้อมูล
• AI ช่วยเขียน code ได้ แต่เราต้องเข้าใจ flow ก่อนนำไปใช้

ชั่วโมงถัดไปเราจะเริ่มสร้าง Frontend ส่วนแรกด้วย index.html และทำ Form สำหรับแจ้งปัญหา

คำศัพท์สำคัญ