ภาพรวม

สิ่งที่จะสร้าง

TaskFlow คือ บอร์ด Kanban แบบเรียลไทม์ที่รองรับผู้ใช้หลายคน — ลองนึกถึง Trello เวอร์ชันย่อส่วนที่คุณลงมือสร้างเองตั้งแต่ repo เปล่า ๆ ไปจนถึงสแตกที่รันได้จริงด้วย Docker Compose

ลองนึกภาพประสบการณ์การใช้งาน คุณเปิดแอปขึ้นมาแล้ว ล็อกอิน จากนั้นเข้าสู่หน้า board ที่มีสามคอลัมน์ — To Do, In Progress และ Done — และแต่ละคอลัมน์มีกอง card อยู่ คุณคว้า card ใบหนึ่ง ลากจาก To Do ไปยัง In Progress แล้วปล่อย card ก็เข้าที่ทันที

ในวินาทีเดียวกันนั้นเอง เพื่อนร่วมทีมที่กำลังดูบอร์ดเดียวกันบนแล็ปท็อปของเขาก็เห็น card ใบนั้น เลื่อนข้ามคอลัมน์ไปเองต่อหน้าต่อตา ไม่ต้องรีเฟรช ไม่ต้อง “โหลดใหม่เพื่อดูการเปลี่ยนแปลง” ความรู้สึกแบบสด ๆ ที่ทุกคนเห็นพร้อมกันทันทีนี่แหละคือหัวใจของ TaskFlow และเป็นเหตุผลว่าทำไมโปรเจกต์นี้ถึงคุ้มค่าที่จะสร้างแบบครบวงจร

เมื่อจบคอร์ส คุณจะได้ระบบจริง ๆ คือ backend ที่เขียนด้วย Rust, ฐานข้อมูล PostgreSQL, Redis ที่ทำหน้าที่เป็น cache และ message bus, frontend ที่ทำด้วย Astro พร้อม island แบบอินเทอร์แอกทีฟหนึ่งตัว และไฟล์ Docker Compose ที่ยกทุกอย่างขึ้นมาได้ด้วยคำสั่งเดียว

ทำไม

ทูทอเรียลส่วนใหญ่สอนเครื่องมือทีละอย่างแบบแยกส่วน — “นี่คือ Axum” “นี่คือ WebSocket” “นี่คือ Redis” — แล้วปล่อยให้คุณไปคิดเองว่าทั้งหมดประกอบกันยังไง TaskFlow ทำตรงข้าม ทุกชิ้นส่วนมีอยู่เพราะตัวโปรดักต์ต้องการจริง ๆ:

• บอร์ดต้อง เก็บได้ถาวร เราจึงเลือกใช้ PostgreSQL
• บอร์ดต้อง เร็ว เราจึงเพิ่ม read cache ด้วย Redis
• บอร์ดต้อง แชร์แบบสด ๆ เราจึงเพิ่ม WebSocket ควบคู่กับ Redis pub/sub
• บอร์ดต้อง ใช้งานได้จริง เราจึงสร้าง frontend ด้วย Astro พร้อม island สำหรับ drag-and-drop

การสร้างโปรดักต์เดียวที่กลมกลืนกันบังคับให้คุณตัดสินใจแบบเดียวกับที่ทีมจริงต้องเจอ และได้เห็นว่าเครื่องมือแต่ละตัวเชื่อมโยงกันยังไง

ข้อดีข้อเสีย

ข้อดี

• คุณจะได้โปรเจกต์ระดับพอร์ตโฟลิโอ ไม่ใช่แค่โฟลเดอร์ที่มีโค้ดกระจัดกระจายไม่เกี่ยวกัน
• ทุกแนวคิดตั้งอยู่บนฟีเจอร์ที่จับต้องได้ และคุณได้เห็นทำงานจริง
• สแตก (Rust, PostgreSQL, Redis, Astro, Docker) สะท้อนระบบ production จริง

ข้อเสีย

• ครอบคลุมกว้างกว่าทูทอเรียลที่สอนแค่หัวข้อเดียว คุณจะได้แตะทั้ง backend, database, cache, realtime และ frontend
• บางโมดูลช่วงต้นเป็นการวางรากฐานก่อนที่คุณจะเห็นผลลัพธ์บนหน้าจอ
• Rust มีเส้นทางการเรียนรู้ที่ชันกว่าภาษาสคริปต์ — แต่เราได้ปรับเนื้อหาจากคอร์ส Rust ของ Learn Hub มาช่วยให้ราบรื่นขึ้น

ลงมือสร้าง

นี่คือชุดฟีเจอร์ทั้งหมดที่คุณจะได้ทำ:

• สมัครสมาชิกและล็อกอิน ด้วยระบบยืนยันตัวตนแบบ JWT
• Boards ที่เป็นเจ้าของโดยผู้ใช้ — สร้าง เปลี่ยนชื่อ ลบ
• Columns ภายในบอร์ด — เลนแนวตั้ง (To Do, In Progress, Done)
• Cards ภายในคอลัมน์ — งานแต่ละชิ้น
• ลากและจัดลำดับใหม่ ของ card ทั้งภายในคอลัมน์เดียวกันและข้ามคอลัมน์ พร้อมบันทึกลำดับใหม่ไว้
• Labels บน card สำหรับจัดหมวดหมู่แบบเบา ๆ
• การซิงก์แบบเรียลไทม์หลายผู้ใช้ — ทุกการเปลี่ยนแปลงส่งตรงแบบสด ๆ ไปยังทุก client ที่กำลังดูบอร์ดอยู่

และนี่คือ แผนผังคอร์ส แต่ละโมดูลของการสร้างจะปรับเนื้อหาจากคอร์สหนึ่งของ Learn Hub มาใช้กับส่วนหนึ่งของโปรเจกต์

โมดูล	สิ่งที่คุณสร้าง	คอร์ส Learn Hub ที่นำมาปรับใช้
1 · Setup & Tooling	ติดตั้ง toolchain และสร้าง workspace ตั้งต้นของ Rust + แอป Astro	Docker / Rust
2 · Database Design	สคีมา PostgreSQL: users, boards, columns, cards, labels พร้อม migration	PostgreSQL
3 · Backend Foundations	เซิร์ฟเวอร์ Axum: routing, config, state และการจัดการ error	Rust / Rust for TypeScript developers
4 · Authentication	สมัคร/ล็อกอิน, การออก JWT และการเก็บ session/token ด้วย Redis	Rust + Redis + REST API Design
5 · REST API	endpoint แบบ CRUD สำหรับ boards, columns และ cards	REST API Design
6 · Caching	read cache ด้วย Redis ที่วางไว้หน้า PostgreSQL	Redis
7 · Realtime	endpoint WebSocket + backplane แบบ Redis pub/sub สำหรับการซิงก์แบบสด	WebSocket Design
8 · Frontend	โครง static ของ Astro ที่แสดงผลบอร์ด	Astro
9 · The Kanban Island	Preact island: drag & drop พร้อมการซิงก์สดผ่าน WebSocket	Astro
10 · Testing	การทดสอบอัตโนมัติสำหรับ backend ที่เขียนด้วย Rust	Rust testing
11 · Docker & Compose	Dockerfile และสแตก Compose (db, redis, backend, frontend)	Docker
12 · Wrap-up	ทบทวน และก้าวต่อไปของ TaskFlow	—

ตรวจสอบผล

คุณพร้อมไปต่อเมื่อคุณตอบคำถามเหล่านี้ด้วยคำพูดของคุณเองได้:

• TaskFlow ทำอะไร และอะไรที่ทำให้เป็น “เรียลไทม์”?
• คุณบอกชื่อ entity ทั้งห้าตัวที่เก็บลงฐานข้อมูลได้ไหม (users, boards, columns, cards, labels)?
• คุณชี้ได้ไหมว่าโมดูลไหนสร้างฟีเจอร์ที่คุณสนใจมากที่สุด?

ถ้าใช่ ไปที่ สถาปัตยกรรม เพื่อดูว่าแต่ละชิ้นประกอบกันยังไง

สรุป

TaskFlow คือบอร์ด Kanban แบบเรียลไทม์รองรับผู้ใช้หลายคนที่คุณจะได้สร้างแบบครบวงจรด้วย Rust, PostgreSQL, Redis และ Astro ตอนนี้คุณรู้รายการฟีเจอร์ทั้งหมดแล้ว — auth, boards, columns, cards, การลากและจัดลำดับใหม่, labels และการซิงก์แบบสด — และรู้ว่าโมดูลการสร้างทั้งสิบสองแม็ปเข้ากับคอร์ส Learn Hub ที่นำมาปรับใช้ยังไง ต่อไปเราจะไปดูสถาปัตยกรรมของระบบ