แผนการเรียนรู้
/
Course Project Assignment | Week 16

โปรเจกต์รายวิชา: สร้างแอปมือถือจริงบน Branch project

ส่งมอบ 3 ชิ้น: Repository + README • แอปที่รันได้จริง (OIDC Auth + ฟีเจอร์) • วิดีโอสาธิต

🎯 สารบัญเนื้อหาและเกณฑ์การประเมิน

📦 ข้อกำหนดโปรเจกต์
🎬 วิดีโอและเกณฑ์ให้คะแนน
💡 อ่านข้อกำหนดทุกข้อให้ครบก่อนเริ่มทำ โดยเฉพาะตารางคะแนน (สไลด์ที่ 8–9)
Slide 1 • Project Overview & Deliverables

ภาพรวมโปรเจกต์: สร้างแอปจริง ส่งของจริง 🚀

นักศึกษาจะพัฒนา แอปพลิเคชันมือถือจริง 1 โปรเจกต์ โดยนำทุกอย่างที่เรียนมาทั้งภาคมาใช้ — Flutter (MVVM, Data Layer, Forms) คู่กับ Backend ยืนยันตัวตนมาตรฐาน OAuth2/OpenID Connect — แล้วส่งมอบผ่าน Git และวิดีโอสาธิต:

🗂️

ชิ้นที่ 1: Repository

โปรเจกต์อยู่ใน repository หลักของนักศึกษาเอง ภายใต้ branch ชื่อ project พร้อม README.md ที่อธิบายโปรเจกต์และวิธีรันครบถ้วน

📱

ชิ้นที่ 2: แอปที่รันได้จริง

แอป Flutter ที่ล็อกอินผ่าน OIDC Server ได้จริง มีฟีเจอร์หลักครบ + Extra Features ที่เลือกเอง — อาจารย์จะ clone แล้วรันซ้ำตาม README

🎬

ชิ้นที่ 3: วิดีโอสาธิต

วิดีโอหนึ่งคลิปพิสูจน์ 3 เรื่อง: รันตาม README ได้ไม่มี error, Authentication ทำงาน, และฟีเจอร์หลัก+พิเศษครบ

👥 ส่งเดี่ยวหรือกลุ่ม: ตามประกาศของอาจารย์ผู้สอน 📅 กำหนดส่ง: ตามวันนำเสนอโปรเจกต์ในสัปดาห์สุดท้าย 🔗 ลิงก์วิดีโอ: วางไว้ใน README.md (หมวด Demo Video)
Slide 2 • Repository & Branch Rules

จัดเก็บโค้ดบน Branch project ของ Repo หลัก 🌿

  • 📌 โปรเจกต์ทั้งหมด (frontend + backend config + README) ต้องอยู่ใน branch ที่ชื่อ project — ตัวพิมพ์เล็กทั้งหมด ห้ามต่าง!
  • 📌 ใช้ repository หลักของนักศึกษาเอง (repo เดียวกับที่ใช้เรียนทั้งภาค) ไม่กระทบ branch อื่น เช่น main ที่เก็บใบงานรายสัปดาห์
  • 📌 Commit ล่าสุดก่อนกำหนดส่ง คือ สถานะที่อาจารย์ใช้ตรวจคะแนน — push ให้เสร็จก่อน deadline
  • 📌 Backend (Django + django-oidc-provider) ให้แนบ settings/urls/requirements (pyproject.toml/uv.lock) ไว้ใน repo ด้วย ในโฟลเดอร์ backend/
  • 🚫 ห้าม commit โฟลเดอร์ .venv/, build/ หรือ secret/key ใดๆ (ใช้ .gitignore)

$ git checkout -b project

$ git add . && git commit -m "feat: course project"

$ git push origin project

# ตรวจชื่อ branch ก่อนส่งทุกครั้ง:

$ git branch --show-current # ต้องได้ project

🌿 โครงสร้าง Branch ใน Repository ของนักศึกษา

main (ใบงานรายสัปดาห์) project (โปรเจกต์รายวิชา) HEAD = จุดที่ตรวจคะแนน backend/ + README.md
💡 ทุก commit ควรมีข้อความสื่อความหมาย — ประวัติการทำงานสม่ำเสมอเป็นผลบวกต่อคะแนน Code Quality
Slide 3 • README.md Specification

README.md: ใบเบิกทางที่ต้อง "รันได้จริง" 📄

อาจารย์จะเปิด README → พิมพ์คำสั่งตาม → แอปต้องขึ้น โดยไม่ต้องถามนักศึกษาแม้แต่ข้อเดียว หัวข้อที่ต้องมีครบ:

① ชื่อโปรเจกต์ + คำอธิบาย: แก้ปัญหาอะไร ให้ใครใช้

② Features: รายการฟีเจอร์หลักและ Extra Features (✅ ครบตามที่โชว์ในวิดีโอ)

③ Tech Stack: Flutter version, Django, django-oidc-provider, uv

④ Prerequisites: สิ่งที่ต้องติดตั้งก่อน (พร้อมลิงก์ดาวน์โหลด)

⑤ How to Run: คำสั่งทีละบรรทัด ตามลำดับ terminal จริง

⑥ Demo Account: username/password ทดสอบของ OIDC

⑦ Screenshots: ภาพหน้าจอสำคัญอย่างน้อย 2 ภาพ

⑧ 🎬 Demo Video: ลิงก์วิดีโอส่งท้ายโปรเจกต์

⚠️ ทดสอบด้วยตัวเองก่อนส่ง: clone ใหม่ในโฟลเดอร์เปล่า (หรือเครื่องเพื่อน) แล้วพิมพ์ตาม README ทีละบรรทัด — ทุกคำสั่งต้องผ่านโดยไม่ต้องแก้ anything

# โครง README.md ตัวอย่าง (วางไว้ที่ root ของ branch project)

# 🧭 TripMate — แอปจองทริปท่องเที่ยว

แอป Flutter จองทริป เข้าสู่ระบบผ่าน OIDC (django-oidc-provider)

## ✨ Features

- OIDC Login/Logout 🔐 (Extra: Dark Mode 🌙)

- CRUD รายการจองทริป / ค้นหา / รายการโปรด

## 🧰 Prerequisites

- [Flutter SDK](https://docs.flutter.dev/get-started/install)

- [uv](https://docs.astral.sh/uv/) , Google Chrome

## ▶️ How to Run

# Terminal 1 — Backend (OIDC Server)

$ cd backend

$ uv sync

$ uv run manage.py migrate

$ uv run manage.py runserver

# Terminal 2 — Flutter Web App

$ flutter pub get

$ flutter run -d chrome --web-port 50000

# Demo account: student01 / test1234

## 🎬 Demo Video

[YouTube link — unlisted]

Slide 4 • App Requirements: Architecture & Authentication

แอปต้องมีสถาปัตยกรรมจริง + ล็อกอินผ่าน OIDC จริง 🏗️🔐

🏗️ สถาปัตยกรรม (ตามที่เรียนสัปดาห์ 13–15)

View (UI) — หน้าจอ, Forms, Widgets
⬇️ Command / ⬆️ notifyListeners
ViewModel — State + Business Logic
⬇️ injects
Repository — Domain Models, SSOT
⬇️ calls
Service — ApiClient(dio), SecureStorage, openid_client

✔ View ห้ามคุยกับ Service ตรงๆ • ✔ Dependency Injection ด้วย provider • ✔ Result Pattern กับข้อผิดพลาด

🔐 Authentication (หัวใจที่ห้ามขาด)

  • ✅ ล็อกอินผ่าน Authorization Code Flow ไปยัง OIDC Server (django-oidc-provider) — ห้าม hard-code รหัสผ่านในแอป
  • ✅ หน้าจอเนื้อหาทุกหน้าต้อง เข้าถึงได้หลังล็อกอินเท่านั้น (Route Guard)
  • ✅ เก็บ token ใน flutter_secure_storage — ปิดแอปแล้วเปิดใหม่ยังล็อกอินอยู่
  • ✅ มีปุ่ม Logout ที่ล้าง session/token จริง
  • ✅ Backend รันด้วย uv run manage.py runserver ตาม README
📱 App
localhost:50000 ①②③
authorize
redirect 🔐 OIDC Server
localhost:8000 ④⑤⑥
token
userinfo 🔓 Protected
Screens
Slide 5 • Core Functions vs Extra Features

ฟีเจอร์หลักให้ครบ — Extra Features ให้โชว์ฝีมือ ⭐

🎯 ฟีเจอร์หลัก (ต้องมีทุกข้อ — 20 คะแนน)

  • ① Authentication: Login/Logout ผ่าน OIDC ครบวงจร
  • ② Create: บันทึกข้อมูลใหม่ลง backend ผ่านฟอร์ม + validation
  • ③ Read: ดึงและแสดงรายการข้อมูลจาก API (List + Detail view)
  • ④ Update/Delete: แก้ไขหรือลบข้อมูลของผู้ใช้ที่ล็อกอินอยู่
  • ⑤ Error Handling: แสดงข้อความผิดพลาดอย่างมีน้ำใจ (SnackBar/dialog) เมื่อเน็ตหลุดหรือ API fail

💡 ธีมแอปเลือกได้ตามใจ เช่น จองทริป, จัดการค่าใช้จ่าย, ตารางนัดหมายคลินิก, ร้านค้า, บันทึกพืชผักสวนครัว

✨ Extra Features (เลือกทำอย่างน้อย 1–2 ข้อ — 10 คะแนน)

  • 🌙 Dark Mode สลับได้ + จดจำค่า preference
  • 🔍 ค้นหา/กรองแบบเรียลไทม์ + เรียงลำดับ
  • 🌐 สลับภาษาไทย/อังกฤษ (i18n)
  • 📊 สรุปสถิติด้วยกราฟ (charts)
  • 📴 Offline cache — เปิดดูข้อมูลเดิมได้เมื่อเน็ตหลุด
  • 🔔 แจ้งเตือนในแอป, 🖼️ อัปโหลดรูป, 👥 แชร์ข้อมูลระหว่างผู้ใช้

🚀 ความคิดสร้างสรรค์อื่นๆ ยินดีรับ — อธิบายเหตุผลและโชว์ในวิดีโอให้ชัดเจน

Slide 6 • Video Storyboard (แนะนำ 5–8 นาที)

วิดีโอ 1 คลิป พิสูจน์ 3 เรื่องตามลำดับนี้ 🎬

0:00–0:30
① แนะนำโปรเจกต์ + Repo: ชื่อแอป/ทีม → เปิด GitHub หน้า branch project → เลื่อนดู README สั้นๆ
0:30–2:30
② Zero-Error Setup: clone ใหม่ในโฟลเดอร์เปล่า → พิมพ์ทุกคำสั่งตาม README เรียงตามลำดับเป๊ะ จนแอปขึ้นบน Chrome — ห้ามตัดต่อลบ error! (2 terminals: uv backend + flutter)
2:30–3:30
③ Authentication: กด Login → หน้าล็อกอินของ Django OIDC → ใส่ demo account → Consent → กลับแอปแสดงชื่อผู้ใช้ → ปิดเปิดแอปใหม่ยังล็อกอินอยู่ → Logout ได้จริง
3:30–5:30
④ Main Functions ครบทุกข้อ: Create → Read → Update → Delete ทีละฟีเจอร์ พร้อมโชว์ Error Handling อย่างน้อย 1 สถานการณ์ (เช่น ปิด backend แล้วลองโหลด)
5:30–ท้าย
⑤ Extra Features + สรุป: โชว์ทีละฟีเจอร์พร้อมอธิบายว่าทำอะไร ยากตรงไหน → ปิดท้ายสรุปสิ่งที่ภูมิใจ
📍 ส่งที่ไหน: อัปโหลด YouTube เป็น Unlisted (หรือระบบ LMS ตามประกาศ) แล้ววางลิงก์ในหัวข้อ 🎬 Demo Video ของ README.md
Slide 7 • Recording Tips for Full Marks

ถ่ายวิดีโออย่างไรให้ตรวจง่าย คะแนนไม่หล่น 🎥

✅ สิ่งที่ต้องมี

  • เสียงพูดอธิบาย ทุกตอนที่ทำอะไรอยู่ (ไม่ต้องตัดต่อสวย ขอชัดและครบ)
  • ขยายหน้าจอ/ฟอนต์ให้ เห็นคำสั่งและ output ชัด (zoom 120%+)
  • เห็น URL/address bar ตอน redirect ไปหน้าล็อกอิน OIDC
  • แสดง terminal ทั้ง 2 บาน (backend + flutter) ในขั้นตอน setup
  • รัน git branch --show-current ให้เห็นคำว่า project หนึ่งครั้ง

❌ สิ่งที่ทำให้เสียคะแนน

  • ตัดต่อซ่อน error ระหว่าง setup — ถ้าพบ ให้แก้ README แล้วถ่ายใหม่ทั้งคลิป
  • รันแอปจากโปรเจกต์ที่เคย build ค้างไว้ (ต้องเห็น process สดจาก clone ใหม่)
  • วิดีโอไม่มีเสียง หรือหน้าจอเบลอจนอ่านคำสั่งไม่ออก
  • โชว์ฟีเจอร์แบบข้ามๆ เร็วเกินไปจนตรวจไม่ทัน
  • ลิงก์วิดีโอใน README เข้าไม่ได้ (permission ติด private)
💡 เคล็ดลับ: ซ้อมพูดจาก storyboard 1 รอบก่อนกด record — คลิปเดียวจบ ไม่ต้องตัด ยกเว้นช่วงรอ install ยาวๆ (speed up ได้ แต่ห้ามตัดทิ้ง)
Slide 8 • Grading Rubric — 100 Points

📊 เกณฑ์การให้คะแนนโปรเจกต์ (รวม 100 คะแนน)

# เกณฑ์การประเมิน สิ่งที่ผู้ตรวจดู คะแนน
1🗂️ Repository & Branchอยู่ใน repo ตนเอง บน branch project ถูกต้อง โครงสร้างไฟล์สะอาด ไม่มี .venv/build/secrets10
2📄 README.mdครบ 8 หัวข้อ อธิบายชัด คำสั่งรันถูกลำดับ มี demo account + screenshots + ลิงก์วิดีโอ10
3🎬 วิดีโอ: Zero-Error Setupวิดีโอแสดงการรันตาม README จาก clone ใหม่จนแอปขึ้น โดยไม่มี error และไม่มีการแก้นอก README20
4🎬 วิดีโอ: OIDC AuthenticationLogin/Logout ผ่าน OIDC Server ทำงานจริง Session อยู่รอดหลังปิดเปิดแอป Route Guard ปกป้องหน้าจอ20
5🎬 วิดีโอ: Main FunctionsCRUD ครบทำงานสมบูรณ์ พร้อม Error Handling อย่างน้อย 1 สถานการณ์15
6✨ Extra Featuresความยาก ความสมบูรณ์ และประโยชน์ของฟีเจอร์เสริม (โชว์ในวิดีโอครบตามที่เขียนใน README)10
7🏗️ Code Quality & Architectureแยกเลเยอร์ MVVM ถูกต้อง DI ผ่าน provider ตั้งชื่อตัวแปรดี commit message สื่อความ10
8🎥 คุณภาพการนำเสนอเสียงชัด ภาพอ่านง่าย เวลาพอดี ลำดับเนื้อหาตรง storyboard5
รวมทั้งสิ้น100
Slide 9 • Detailed Criteria & Penalties

ระดับคะแนนย่อยและข้อหักที่ต้องระวัง ⚖️

🔍 ระดับคุณภาพของแต่ละเกณฑ์ (ตัวอย่างเกณฑ์ข้อ 4 — Auth 20 คะแนน)

เต็ม 17–20: Flow สมบูรณ์ PKCE/public client, session อยู่รอด, route guard ทั้งแอป, logout สะอาด

กลาง 12–16: Login/Logout ใช้ได้ แต่ขาด route guard หรือ session หลุดหลังรีเฟรช

ต่ำ 0–11: ล็อกอินแบบ hard-code ไม่ผ่าน OIDC จริง / ทำงานบางส่วน / crash

🧪 การตรวจซ้ำโดยผู้สอน

อาจารย์จะ clone และรันซ้ำจริง จาก README ของกลุ่มที่สุ่มตรวจ — หากรันไม่ผ่านตามวิดีโอ จะถูกเรียกสอบปากเปล่าโค้ด

⚠️ ข้อหักคะแนน

  • branch ผิด/ไม่มี (เช่น ใช้ Project หรือ push บน main) — หัก 5 คะแนน + ผู้ตรวจจะมองหา branch ที่ใกล้เคียงเท่านั้น
  • README ไม่มี demo account ทำให้ตรวจ auth ไม่ได้ — หักตามเกณฑ์ข้อ 4
  • ส่งล่าช้า — หัก 10% ของคะแนนที่ได้ ต่อวัน (เกิน 3 วันไม่รับ)
  • วิดีโอตัดต่อซ่อน error ในขั้น setup — ถือว่าเกณฑ์ข้อ 3 ได้ 0 คะแนน
  • ลอกโค้ด/ใช้ผลงานผู้อื่นโดยไม่อ้างอิง — ดำเนินการตามระเบียบว่าด้วยความซื่อสัตย์ทางวิชาการ

* ตัวเลขข้อหักอาจปรับตามประกาศของอาจารย์ผู้สอนในแต่ละภาคการศึกษา

Slide 10 • Pre-submission Checklist

เช็คลิสต์ก่อนกดส่ง ✅

📋 ตรวจทั้ง 8 ข้อนี้ให้ครบ

  • ☐ git branch --show-current = project และ push ล่าสุดแล้ว
  • ☐ ทดสอบ clone ใหม่ในโฟลเดอร์เปล่า → รันตาม README ผ่านทุกคำสั่ง
  • ☐ .gitignore กัน .venv/, build/, *.db, secret เรียบร้อย
  • ☐ README ครบ 8 หัวข้อ มี demo account ที่ login ได้จริง
  • ☐ วิดีโอครบ 5 ช่วงตาม storyboard เสียงชัด ลิงก์เข้าได้ (unlisted)
  • ☐ ฟีเจอร์ในวิดีโอ == ฟีเจอร์ที่เขียนใน README (ตรงกัน 100%)
  • ☐ ลบ console.log/debug print ที่ไม่จำเป็นออกจากโค้ด
  • ☐ สมาชิกทุกคนในกลุ่มเข้าใจโค้ดทั้งหมด (พร้อมสอบปากเปล่า)

🔥 5 อันดับข้อผิดพลาดที่พบบ่อยจากรุ่นพี่

  1. README รันได้บน "เครื่องตัวเอง" เพราะมี path/env ติดตั้งค้างไว้ — เครื่องอื่นพังทันที
  2. ลืมบอกใน README ว่าต้องรัน migrate / creatersakey ก่อน
  3. port ใน redirect_uris ของ OIDC client ไม่ตรงกับ --web-port ใน README
  4. commit database ไฟล์ (*.db) พร้อม password hash ขึ้น GitHub
  5. วิดีโอโชว์แต่ฟีเจอร์สวยๆ แต่ไม่โชว์ error handling ที่โจทย์ขอ

# จำลองการตรวจของอาจารย์ด้วยตัวเอง:

$ cd /tmp && git clone -b project <your-repo-url>

Slide 11 • Summary & Support

สรุป: แผนที่นำทางสู่โปรเจกต์ 100 คะแนน 🗺️

🚀 ลำดับการลงมือที่แนะนำ

  1. เลือกธีมแอป + ร่างฟีเจอร์หลัก/Extra → คุยกับอาจารย์ให้ชัวร์ก่อนลงมือ
  2. สร้าง branch project แล้วย้ายโค้ดจากใบงานที่เกี่ยวข้อง (weeks 12–15 เป็นฐานที่แข็งแรงแล้ว)
  3. ทำ Auth ให้จบก่อน — เป็นคะแนนก้อนใหญ่ (20) และฟีเจอร์อื่นต้องใช้
  4. ทำ CRUD หลักให้ solid แล้วค่อยเพิ่ม Extra Features ทีละอย่าง (commit บ่อยๆ)
  5. เขียน README ควบคู่กันไป — อย่ารอทำทีหลัง แล้วทดสอบ clone ใหม่ทุกสัปดาห์
  6. ถ่ายวิดีโอตาม storyboard → เช็คลิสต์ 8 ข้อ → ส่งก่อนกำหนด
❓ ติดตรงไหน: ถามในห้องเรียน/GitHub Issues ของ repo รายวิชา — อาจารย์ตอบคำถามเชิงแนวทาง ไม่แก้โค้ดให้
📚 อ้างอิง: สไลด์สัปดาห์ที่ 12–15 ทุกแผ่น + Flutter App Architecture

ขอให้ทุกทีมสนุกกับการสร้างแอปของตัวเอง — เจอกันวันนำเสนอ! 🎉