กลับไปดูแล้วทำตาม
ตอนที่ 1/8คาบสดจริง เว็บแรกของคุณ ขึ้นจริงในคาบเดียว2 ชม. 35 นาที
เว็บแรกของคุณ ขึ้นจริงในคาบเดียว · คาบสดรอบ 19 ก.ย. 69
คลิปเต็มของคาบสดที่พาทำเว็บร้านกาแฟจนได้ลิงก์จริง เริ่มจากเซ็ตโมเดล AI ฟรีในเครื่อง แล้วสร้างเว็บ Next.js ต่อฐานข้อมูล Turso ด้วย Drizzle ORM ใส่ระบบล็อกอิน Better Auth และเอาขึ้น Vercel ตรงจากเครื่อง โดยข้าม Cloudflare R2 เพราะเวลาไม่พอ แล้วเหลือบั๊กปุ่มล็อกอินคลิกเดียวบนเน็ตเป็นการบ้าน
คลิปนี้ตัดจากคาบเรียนสดจริง
มาจากคาบ เว็บแรกของคุณ ขึ้นจริงในคาบเดียว รอบวันที่ 19 ก.ย. 69 ซึ่งเป็นคาบเรียนแบบกลุ่มที่มีคนเรียนอยู่จริง ไม่ใช่คลิปที่จัดฉากอัด ช่วงที่คนเรียนติดและถามกลางคาบอยู่ในคลิปหมด
ภารกิจของตอนนี้
จบคาบนี้คุณจะมีลิงก์เว็บของตัวเองที่เปิดจากมือถือเครื่องไหนก็ได้ แก้ข้อมูลได้ทุกวัน และรู้ว่าต้องปิดปุ่มลัดบนเน็ตเองหลังคาบ
- ด่าน 1เซ็ตโมเดล AI ฟรีในเครื่องจนสั่งงานได้โดยไม่เผาโควตาเกินจำเป็น
- ด่าน 2สร้างโครงเว็บ Next.js แล้วเห็นว่าข้อมูลหายตอนรีเฟรชถ้ายังไม่มีฐานข้อมูล
- ด่าน 3ต่อ Turso ด้วย Drizzle ORM ย้ายโครงสร้างและใส่ Seed Data สำเร็จ
- ด่าน 4ติดตั้ง Better Auth สองบทบาท แล้วทดสอบสิทธิ์เจ้าของร้านกับพนักงาน
- ด่าน 5เอาเว็บขึ้น Vercel ตรงจากเครื่องจนได้ลิงก์จริง
คำสั่งที่ใช้ในตอนนี้
หยุดคลิปแล้วก๊อปไปวางได้เลย เรียงตามลำดับที่ใช้ในคลิป
- 1.ทุกเครื่องชื่อโฟลเดอร์ว่างที่ทั้งห้องสร้างเองบนหน้าจอก่อนเริ่ม
cafe-system - 2.ทุกเครื่องคำสั่งสเต็ป 1 สร้างโครงเว็บ Next.js App Router และ Tailwind CSS
สร้างโครงโปรเจคเว็บ Next.js สำหรับระบบจัดการร้านกาแฟ ด้วย TypeScript และ Tailwind CSS ข้อกำหนด: 1. ใช้ Next.js App Router โครงสร้างเรียบง่ายและเป็นระเบียบ 2. หน้าแรกแสดงชื่อร้านกาแฟ หัวข้อรายการเครื่องดื่ม มีแบบฟอร์มให้กรอกเพิ่มเมนูใหม่ และส่วนสรุปโน้ตของร้าน 3. จัดการข้อมูลเมนูในหน่วยความจำของหน้าเว็บไปก่อน 4. ตรวจสอบว่าโปรเจคคอมไพล์ผ่าน และพร้อมสำหรับสั่งรันเซิร์ฟเวอร์สำหรับพัฒนาในเครื่อง - 3.ทุกเครื่องคำสั่งรันเซิร์ฟเวอร์สำหรับพัฒนาในเครื่องเพื่อเปิดดูหน้าเว็บ
pnpm dev - 4.ทุกเครื่องคำสั่งสเต็ป 2 ต่อฐานข้อมูล Turso ด้วย Drizzle ORM พร้อมโครงสร้างตารางและข้อมูลตั้งต้น
เชื่อมต่อฐานข้อมูล Turso ด้วย Drizzle ORM ข้อกำหนด: 1. ติดตั้ง drizzle-orm, @libsql/client และ drizzle-kit 2. ออกแบบ schema ใน db/schema.ts ประกอบด้วย: - ตาราง menu_items (id, name, price, imageUrl, note, isAvailable, createdAt) - ตาราง shop_notes (id, content, createdAt) 3. กติกาของร้านที่ต้องตรวจสอบ: ราคาต้องลงท้ายด้วยศูนย์เสมอ (ยกเว้นเมนูชาไทย 45 บาท) 4. ทำคำสั่งสำหรับส่งย้ายโครงสร้างตารางไปยัง Turso 5. ทำข้อมูลตั้งต้น: - รายการเครื่องดื่ม 3 อย่าง: ลาเต้ 60 บาท, อเมริกาโน่ 50 บาท, ชาไทย 45 บาท - โน้ตของร้าน 2 ข้อ: ลูกค้าประจำชอบลาเต้, วันจันทร์ขายดีที่สุด 6. ปรับหน้าแรกให้ดึงข้อมูลเครื่องดื่มและโน้ตจากฐานข้อมูลมาแสดงผลจริง อ่านค่า TURSO_DATABASE_URL และ TURSO_AUTH_TOKEN จากไฟล์ .env.local - 5.ทุกเครื่องคำสั่งส่งโครงสร้างตารางขึ้น Turso และบันทึกข้อมูลตั้งต้นสามเมนู
pnpm drizzle-kit push && tsx db/seed.ts - 6.ทุกเครื่องคำสั่งสเต็ป 3 ติดตั้ง Better Auth พร้อมปุ่มล็อกอินคลิกเดียวบนหน้าจอ
ติดตั้งระบบยืนยันตัวตน Better Auth เข้ากับ Drizzle ORM และจัดการสิทธิ์แบบสองบทบาท ข้อกำหนด: 1. ติดตั้ง Better Auth พร้อม Drizzle adapter เพิ่มตารางผู้ใช้และเซสชันลงในฐานข้อมูล 2. กำหนด 2 บทบาท: - เจ้าของร้าน: เข้าหน้าจัดการ แก้ราคา ปิดการขาย และเพิ่มรายการได้ - พนักงาน: ดูรายการเครื่องดื่มและโน้ตได้ แต่ไม่สามารถแก้ราคาหรือจัดการข้อมูลได้ 3. ทำปุ่มล็อกอินคลิกเดียวบนหน้าจอ เพื่อให้สลับทดสอบทั้งสองบทบาทได้สะดวกรวดเร็ว 4. ทำข้อมูลสมาชิกตั้งต้นครบทั้งสองบทบาท พร้อมรหัสผ่านทดสอบ 5. ซ่อนปุ่มแก้ไขราคาบนหน้าจอเมื่อผู้ใช้ล็อกอินเป็นพนักงาน อ่านค่า BETTER_AUTH_SECRET และ BETTER_AUTH_URL จากไฟล์ .env.local - 7.ทุกเครื่องคำสั่งเพิ่มตารางสมาชิกและบันทึกผู้ใช้ทดสอบสองบทบาท
pnpm drizzle-kit push && tsx db/seed-users.ts - 8.ทุกเครื่องคำสั่งให้ตรวจสิทธิ์ที่ฝั่งเซิร์ฟเวอร์เมื่อพนักงานแอบเปิดหน้าแก้ราคาตรงๆ
ตอนนี้พนักงานยังเปิดหน้าแก้ราคาตรงๆ ได้อยู่ ช่วยตรวจสิทธิ์ที่ฝั่งเซิร์ฟเวอร์ด้วย ห้ามแค่ซ่อนปุ่มบนหน้าจอ - 9.ทุกเครื่องคำสั่งที่ข้ามในคาบนี้ เหลือเป็นการบ้าน ต่อ Cloudflare R2 สำหรับอัปโหลดรูป
ติดตั้งระบบจัดเก็บไฟล์รูปภาพด้วย Cloudflare R2 ผ่าน AWS S3 SDK ข้อกำหนด: 1. ติดตั้ง @aws-sdk/client-s3 สำหรับเชื่อมต่อกับ Cloudflare R2 2. สร้างฟังก์ชันและเส้นทาง API สำหรับอัปโหลดไฟล์รูปภาพขึ้น R2 bucket โดยตรง พร้อมตรวจสอบว่ารับเฉพาะไฟล์รูปภาพและขนาดไม่เกินกำหนด 3. ปรับแบบฟอร์มของเจ้าของร้านให้สามารถเลือกอัปโหลดรูปภาพเมนู แล้วบันทึก URL ของรูปภาพลงตาราง menu_items ในฐานข้อมูล 4. แสดงรูปภาพเมนูบนการ์ดรายการเครื่องดื่มในหน้าแรกอย่างสวยงาม อ่านค่า R2_ACCOUNT_ID, R2_ACCESS_KEY_ID, R2_SECRET_ACCESS_KEY, R2_BUCKET_NAME และ R2_PUBLIC_URL จากไฟล์ .env.local - 10.ทุกเครื่องคำสั่งสเต็ป 4 ตรวจสอบความพร้อมและสรุปรายการตัวแปรก่อนนำขึ้น Vercel
เตรียมโปรเจคสำหรับนำขึ้นเซิร์ฟเวอร์จริงบน Vercel ข้อกำหนด: 1. ตรวจสอบว่าโปรเจค build ผ่านสมบูรณ์ ไม่มีข้อผิดพลาด 2. สรุปรายการตัวแปรสภาพแวดล้อมที่ต้องนำไปตั้งค่าบน Vercel ได้แก่ Turso และ Better Auth 3. แนะนำขั้นตอนการนำขึ้นตรงจากเครื่องโดยไม่ผ่าน GitHub จนได้ URL สำหรับเปิดใช้งาน - 11.ทุกเครื่องคำสั่งนำเว็บขึ้นเซิร์ฟเวอร์จริงของ Vercel
vercel --prod - 12.ทุกเครื่องคำสั่งปิดปุ่มล็อกอินคลิกเดียวเมื่อระบบอยู่บนเน็ต เป็นการบ้านท้ายคาบ
ตอนนี้ใครที่ได้ลิงก์ก็กดปุ่มล็อกอินคลิกเดียวเข้ามาเป็นเจ้าของร้านได้เลย ช่วยปิดปุ่มนั้นเมื่อระบบอยู่บนเน็ต โดยตัดสินจากฝั่งเซิร์ฟเวอร์ ไม่ใช่แค่ซ่อนปุ่ม แล้วเอาขึ้นใหม่ให้ผมดู - 13.ทุกเครื่องคำสั่งให้ AI บันทึกกติกาที่ทำจริงในคาบลงไฟล์ CLAUDE.md
จดกติกาของระบบนี้ลงไฟล์ CLAUDE.md ในโฟลเดอร์โปรเจค เขียนสั้นๆ เป็นข้อๆ ภาษาไทย ข้อที่ต้องมีอย่างน้อย: - สิ่งที่ทำในคาบนี้สี่สเต็ป: Next.js, Turso กับ Drizzle ORM, Better Auth, Vercel - Cloudflare R2 ยังไม่ได้ทำในคาบ ใช้ URL รูปภาพชั่วคราวไปก่อน - ข้อมูลทุกอย่างจัดเก็บในฐานข้อมูล Turso ผ่าน Drizzle schema และการย้ายโครงสร้างตาราง - ระบบยืนยันตัวตนใช้ Better Auth และตรวจสอบสิทธิ์ที่ฝั่งเซิร์ฟเวอร์เสมอ - ปุ่มล็อกอินคลิกเดียวเปิดให้ใช้เฉพาะตอนพัฒนาในเครื่อง ห้ามหลุดขึ้นเซิร์ฟเวอร์จริงเด็ดขาด - 14.ทุกเครื่องคำสั่งให้ AI ตรวจสอบหน้าเว็บด้วยตัวเองและแก้ไขข้อผิดพลาดจนผ่าน
เปิดหน้าเว็บตรวจสอบด้วยตัวเอง แล้วบอกผลการทำงาน หากมีข้อผิดพลาดให้แก้ไขจนผ่านสมบูรณ์
การบ้านของตอนนี้
ปิดปุ่มล็อกอินคลิกเดียวบนเว็บที่ขึ้น Vercel แล้ว ให้ตัดสินจากฝั่งเซิร์ฟเวอร์ จากนั้นถ้าพร้อมให้ต่อ Cloudflare R2 ตามคำสั่งที่แจก แล้วนำลิงก์มาแบ่งปันในคอมมูนิตี้
ตอนหน้าเปิดด้วยเฉลยข้อนี้
ของที่ dev แนะนำ
เป็นลิงก์ affiliate — ถ้าคุณช้อปผ่านลิงก์นี้ dev ได้ค่าคอมเล็กน้อย โดยราคาคุณเท่าเดิม 🙏
AULA F75 Mechanical Keyboard (75%)
วันหนึ่งพิมพ์ prompt กับรีวิวโค้ดเป็นหมื่นตัวอักษร คีย์บอร์ดเมคานิคอลช่วยเรื่องความล้ามือจริง เลย์ 75% ประหยัดโต๊ะด้วย
2,114 บาทดูบน Shopee
OBSBOT Meet SE เว็บแคม 1080P (AI ตามหน้า)
สอนสด/สัมภาษณ์แล้วภาพไม่ดูเหมือนกล้องโน้ตบุ๊กปี 2015 มี AI ตามหน้าให้ ขยับออกนอกเฟรมไม่ได้
2,670 บาทดูบน Shopee
Hollyland LARK M2 ไมโครโฟนไร้สาย รุ่น 300 ม. ระยะ LOS 24 บิต Hi-Fi สำหรับไลฟ์สตรีม รองรับ Android iPhone และกล้อง
อุปกรณ์เริ่มทำคอนเทนต์/สอนออนไลน์ หารายได้เสริม
3,316 บาทดูบน Shopee
