Mini Project Quest

โจทย์ข้อที่ 1

ไปสร้าง private repo ของส่วนตัวเพื่อทดสอบ SSHKey และ SSH Agent สำหรับ Github ด้วย tutorial online (หากใช้ windows แนะนำให้ใช้ wsl) หลังจาก setup เสร็จให้ clone repo ตัวเองลงมาว่าติดไหม

โจทย์ข้อที่ 2

ติดตั้ง node js version 20 แล้วสร้างโปรเจค SvelteKit ด้วยตนเอง

โจทย์ข้อที่ 3

ติดตั้ง TailwindCSS และลองใช้งาน className

โจทย์ข้อที่ 4

ทำ Component ที่ชื่อว่า <StartButton /> โดยมีหน้าดังต่อไปนี้ด้วย TailwindCSS

โจทย์ข้อที่ 5

ในหน้า root ให้แสดงมีหน้าตาเว็ปดังต่อไปนี้

โจทย์ข้อที่ 6

ใช้ server.ts ตอบกลับ HTTP Request ว่า hello world (ตอบเป็น String เปล่าเฉบๆ ไม่ใช่ HTML)

โจทย์ข้อที่ 7

ติดตั้ง pnpm และลง package lodash ใน project

โจทย์ข้อที่ 8

ตั้งค่าตัวแปร environment ที่ชื่อว่า DATABASE_URL โดยให้มีค่าเท่ากับ placeholder แล้วนำค่าตัวแปรดังกล่าวแสดงบนเว็ปไซต์

โจทย์ข้อที่ 9

ทุกครั้งที่โหลดหน้าเว็ปไซต์ ให้ console.log('something') ลงใน terminal ฝั่ง server โดยมันจะไม่ print ออกในฝั่ง browser (user จะเห็นไม่ได้! มันเป็นความลับ)

โจทย์ข้อที่ 10

ติดตั้ง prisma โดยต่อกับ database postgresql บน iserv พร้อมกับสร้าง schema user ที่เก็บ

1. id (primary key) เป็น surrogate key โดยทุก record จะสร้าง cuid ใหม่ทุกครั้งที่สร้าง record 2. firstname เป็น string 3. surname เป็น string ที่ null ได้ 4. age เป็นจำนวนเต็ม

และ push ขึ้น database

โจทย์ข้อที่ 11

ใช้งานดูโครงสร้างและตารางใน db ตัวเองด้วย Prisma Studio โดยรันผ่าน commandline เพื่อใช้งาน

โจทย์ข้อที่ 12

ทุกครั้งที่มีผู้ใช้งานเข้าเว็ปไซต์ ขอให้สร้าง record ของ user ใหม่ชื่อว่า

John Doe อายุ 18 ปี โดยอัตโนมัติ

(ใช่ทุกครั้งที่เข้า มันจะสร้างคนชื่อเดิมซ้ำไปเรื่อยๆ)

โจทย์ข้อที่ 13 (ยากสุดแล้ว มึงทำได้ไปให้รางวัลอะไรตัวเองได้เลย)

ให้มี cookie ที่ชื่อว่า session-token หากผู้ใช้ยังไม่มี cookie ดังกล่าวให้สร้าง user ใหม่โดยเอา id ของ user นั้นมา set cookie "session-token" (แบบ HTTP Only) แล้วให้นำ session token แสดงบนหน้าเว็ป