Mini Project Quest 2

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

สร้าง SvelteKit Project ใหม่ด้วย Typescript พร้อมกับ ESLint และ Prettier

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

Clear starter template ที่ให้มาแล้วติดตั้ง TailwindCSS

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

ติดตั้ง Toggle Component ของ shadcn-svelte

LogoToggleshadcn-svelte

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

ติดตั้ง MeltUI และใช้งาน Tags Input Component

LogoMelt UIwww.melt-ui.com

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

ติดตั้ง tRPC บน project ของตนเอง

https://raqueebuddinaziz.com/blog/how-to-setup-trpc-in-a-sveltekit-project/raqueebuddinaziz.com

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

ติดตั้ง zod และสร้างฟอร์มขึ้นมา 5 ช่องและปุ่ม Submit

เมื่อกดปุ่ม submit แล้วจะทำการ validate ค่าของ form ดังต่อไปนี้

ช่องที่ 1 จะต้องมีความยาวมากกว่าตัวอักษร 5

ช่องที่ 2 จะต้องเป็นคำว่า "blue" หรือ "green" หรือไม่ก็ "red" เท่านั้น

ช่องที่ 3 เป็น string หรืออาจจะสามารถปล่อยว่างได้

ช่องที่ 4 จะต้องจบ string ด้วยคำว่า sushi เท่านั้น

ช่องที่ 5 จะต้องมีค่าเป็น ip address ใดๆ เท่านั้น

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

เมื่อกดปุ่มจากข้อที่ 6 แล้วจะทำการเรียก tRPC function เพื่อส่งข้อมูลดังฟอร์มทั้ง 5 ช่องไปในรูปแบบของ object ดังต่อไปนี้

interface FormInput {
    A: string
    B: string
    C: string
    D: string
    E: string
}

โดยหากผ่านเงื่อนไขการ validate จากข้อที่ 6 ทุกประการให้ทำการ console.log("pass") หากไม่ผ่าน console.log("fail") โดยจะต้องขึ้นข้อความแค่ที่ส่วนหลังบ้านเท่านั้น

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

ให้สร้าง route /create โดยที่มีหน้าตาดังต่อไปนี้ด้วย shadcn หรือ melt ui พร้อมกับติดตั้ง fonts ที่ต้องใช้จาก Google Fonts

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

Init prisma ในโปรเจคพร้อมกับต่อ db postgres ของตนเองและสร้าง table

Place โดยเก็บข้อมูลดังต่อไปนี้

  • id เป็น int ให้เป็น PK ที่ auto increment

  • name เป็น unique non null string

  • description เป็น non null string

  • tel เป็น non null string

  • website_url เป็น nullable string

  • email เป็น nullable string

โดยมี table level constraint เพิ่มเติมว่าห้ามมี record ใดมี tel และ website_url ซ้ำพร้อมกัน

และ push schema ขึ้น database ให้เรียบร้อย

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

สร้าง router ใน tRPC ที่ชื่อว่า createPlace โดยจะรับ input เป็น object และมี validation ด้วย zod ตามหลัก business rules ที่ฟอร์มจากข้อที่ 8 แสดงไว้ โดยหากได้รับ Network Request มาแล้วจะให้ทำการ console.log(input) ที่ได้รับออกมาในฝั่ง server

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

จากข้อที่ 10 แทนที่จะทำการ console.log ให้ทำการสร้าง record ใน table Place แทน

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

ให้สร้าง route /register โดยจะมีฟอร์มสำหรับ email และ password ใช้ component จาก shadcn หรือ melt ui เท่านั้น โดยเมื่อกดปุ่มยืนยันแล้วให้เรียก route createUser ของ tRPC โดยรับข้อมูลจากฟอร์มและ validate ข้อมูลดังต่อไปนี้

  • email จะต้องเป็น string ที่มีความยาวขึ้นต่ำ 1 ตัวอักษรและมี format string เป็นแบบ email

  • password จะต้องมีความยาวไม่ต่ำกว่า 8 ตัวอักษรและน้อยกว่าหรือเท่ากับ 32 ตัวอักษร

เมื่อได้รับข้อมูลแล้วให้ทำการ randomly generate ค่า salt สำหรับการ hash password และทำการ hash password ด้วย bcrypt และ console.log ค่าที่ได้จากการ hash พร้อม salt ออกมา

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

ให้สร้าง table User และ Session โดยเก็บข้อมูลดังต่อไปนี้

  • User

    • id เป็น PK และจะสร้างค่า default เป็น UUID

    • email เป็น unique non null string

    • password เป็น non null string

    • salt เป็น non null string

    • createdAt เป็น date time ของตอนที่สร้าง

    • updatedAt เป็น date time ของเวลาที่แก้ไข record ล่าสุด

  • Session

    • id เป็น PK และจะสร้างค่า default เป็น CUID

    • token เป็น string

    • expiredAt เป็น non null date time

    • userID เป็น non null string

    • createdAt เป็น date time ของตอนที่สร้าง

    • updatedAt เป็น date time ของเวลาที่แก้ไข record ล่าสุด

โดยมี constraint FK ว่า userID เป็น FK ของ User

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

จากข้อที่ 12 เมื่อทำการ hash รหัสผ่านสำเร็จให้ทำการสร้าง User record ให้ขึ้นมาโดยมั่นใจว่าไม่เคยมีผู้ใช้นี้อยู่ในระบบก่อนหน้านี้แล้ว หากมีให้ตอบกลับ client ด้วย new TRPCError() ว่า "user-already-existed" พร้อมข้อความที่เหมาะสม

เมื่อสร้างผู้ใช้งานเสร็จแล้วให้ทำการสร้าง Session record ของ User ที่พึ่งได้สร้างไปโดยมี expiredAt เป็น 5 นาทีในอนาคต โดยให้ randomly generated string สำหรับค่า token ยาก 32 ตัวอักษรและทำการ set cookie ชื่อว่า session-token เป็น http only สำหรับค่าดังกล่าว

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

สร้าง route /login โดยรับ input คล้ายกับหน้า /register โดยเมื่อกดปุ่มยืนยันแล้ว ให้เรียก tRPC function ที่ชื่อว่า login โดยรับข้อมูลและมี validation ที่เหมาะสมกับฟอร์ม จากนั้นให้ทำการ validate ว่าข้อมูลดังกล่าวนั้นมี email และรหัสผ่านถูกต้องหรือไม่ (ต้องเอาไป bcrypt ก่อนเหมือนตอน register เพื่อเช็ค) หากไม่เจอหรือผิดให้ตอบกลับด้วย tRPC Error ที่เหมาะสม

เมื่อตรวจสอบเสร็จแล้ว ให้ทำการสร้าง Sesion record ใหม่โดยมี expiredAt เป็นเวลาตอน 5 นาทีข้างหน้าและ set cookie ชื่อ session-token ให้เหมาะสม

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

ทุกครั้งที่ผู้ใช้เข้าหน้า /create ให้ทำการเช็ค session-token ว่าถูกต้องหรือไม่ และหมดอายุหรือไม่ หากหมดอายุหรือไม่ถูกต้องให้ทำการ clear cookie session-token และ redirect ไปหน้า /login

หากถูกต้องให้ user เข้าสู่หน้า /create ได้ตามปกติ

PreviousMini Project Quest

Last updated

Was this helpful?