คลิปเต็มของคาบสดที่พาทำเว็บร้านกาแฟจนได้ลิงก์จริง เริ่มจากเซ็ตโมเดล AI ฟรีในเครื่อง แล้วสร้างเว็บ Next.js ต่อฐานข้อมูล Turso ด้วย Drizzle ORM ใส่ระบบล็อกอิน Better Auth และเอาขึ้น Vercel ตรงจากเครื่อง โดยข้าม Cloudflare R2 เพราะเวลาไม่พอ แล้วเหลือบั๊กปุ่มล็อกอินคลิกเดียวบนเน็ตเป็นการบ้าน
คลิปนี้ตัดจากคาบเรียนสดจริง
มาจากคาบ สร้างเว็บฟรี 100% ด้วย Claude Code ไม่ต้องสมัครรายเดือน รอบวันที่ 19 ก.ย. 69 ซึ่งเป็นคาบเรียนแบบกลุ่มที่มีคนเรียนอยู่จริง ไม่ใช่คลิปที่จัดฉากอัด ช่วงที่คนเรียนติดและถามกลางคาบอยู่ในคลิปหมด
ภารกิจของตอนนี้
จบคาบนี้คุณจะมีลิงก์เว็บของตัวเองที่เปิดจากมือถือเครื่องไหนก็ได้ แก้ข้อมูลได้ทุกวัน และรู้ว่าต้องปิดปุ่มลัดบนเน็ตเองหลังคาบ
หยุดคลิปแล้วก๊อปไปวางได้เลย เรียงตามลำดับที่ใช้ในคลิป
cafe-systemสร้างโครงโปรเจคเว็บ Next.js สำหรับระบบจัดการร้านกาแฟ ด้วย TypeScript และ Tailwind CSS
ข้อกำหนด:
1. ใช้ Next.js App Router โครงสร้างเรียบง่ายและเป็นระเบียบ
2. หน้าแรกแสดงชื่อร้านกาแฟ หัวข้อรายการเครื่องดื่ม มีแบบฟอร์มให้กรอกเพิ่มเมนูใหม่ และส่วนสรุปโน้ตของร้าน
3. จัดการข้อมูลเมนูในหน่วยความจำของหน้าเว็บไปก่อน
4. ตรวจสอบว่าโปรเจคคอมไพล์ผ่าน และพร้อมสำหรับสั่งรันเซิร์ฟเวอร์สำหรับพัฒนาในเครื่องpnpm devเชื่อมต่อฐานข้อมูล 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.localpnpm drizzle-kit push && tsx db/seed.tsติดตั้งระบบยืนยันตัวตน Better Auth เข้ากับ Drizzle ORM และจัดการสิทธิ์แบบสองบทบาท
ข้อกำหนด:
1. ติดตั้ง Better Auth พร้อม Drizzle adapter เพิ่มตารางผู้ใช้และเซสชันลงในฐานข้อมูล
2. กำหนด 2 บทบาท:
- เจ้าของร้าน: เข้าหน้าจัดการ แก้ราคา ปิดการขาย และเพิ่มรายการได้
- พนักงาน: ดูรายการเครื่องดื่มและโน้ตได้ แต่ไม่สามารถแก้ราคาหรือจัดการข้อมูลได้
3. ทำปุ่มล็อกอินคลิกเดียวบนหน้าจอ เพื่อให้สลับทดสอบทั้งสองบทบาทได้สะดวกรวดเร็ว
4. ทำข้อมูลสมาชิกตั้งต้นครบทั้งสองบทบาท พร้อมรหัสผ่านทดสอบ
5. ซ่อนปุ่มแก้ไขราคาบนหน้าจอเมื่อผู้ใช้ล็อกอินเป็นพนักงาน
อ่านค่า BETTER_AUTH_SECRET และ BETTER_AUTH_URL จากไฟล์ .env.localpnpm drizzle-kit push && tsx db/seed-users.tsตอนนี้พนักงานยังเปิดหน้าแก้ราคาตรงๆ ได้อยู่ ช่วยตรวจสิทธิ์ที่ฝั่งเซิร์ฟเวอร์ด้วย ห้ามแค่ซ่อนปุ่มบนหน้าจอติดตั้งระบบจัดเก็บไฟล์รูปภาพด้วย 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เตรียมโปรเจคสำหรับนำขึ้นเซิร์ฟเวอร์จริงบน Vercel
ข้อกำหนด:
1. ตรวจสอบว่าโปรเจค build ผ่านสมบูรณ์ ไม่มีข้อผิดพลาด
2. สรุปรายการตัวแปรสภาพแวดล้อมที่ต้องนำไปตั้งค่าบน Vercel ได้แก่ Turso และ Better Auth
3. แนะนำขั้นตอนการนำขึ้นตรงจากเครื่องโดยไม่ผ่าน GitHub จนได้ URL สำหรับเปิดใช้งานvercel --prodตอนนี้ใครที่ได้ลิงก์ก็กดปุ่มล็อกอินคลิกเดียวเข้ามาเป็นเจ้าของร้านได้เลย ช่วยปิดปุ่มนั้นเมื่อระบบอยู่บนเน็ต โดยตัดสินจากฝั่งเซิร์ฟเวอร์ ไม่ใช่แค่ซ่อนปุ่ม แล้วเอาขึ้นใหม่ให้ผมดูจดกติกาของระบบนี้ลงไฟล์ CLAUDE.md ในโฟลเดอร์โปรเจค เขียนสั้นๆ เป็นข้อๆ ภาษาไทย
ข้อที่ต้องมีอย่างน้อย:
- สิ่งที่ทำในคาบนี้สี่สเต็ป: Next.js, Turso กับ Drizzle ORM, Better Auth, Vercel
- Cloudflare R2 ยังไม่ได้ทำในคาบ ใช้ URL รูปภาพชั่วคราวไปก่อน
- ข้อมูลทุกอย่างจัดเก็บในฐานข้อมูล Turso ผ่าน Drizzle schema และการย้ายโครงสร้างตาราง
- ระบบยืนยันตัวตนใช้ Better Auth และตรวจสอบสิทธิ์ที่ฝั่งเซิร์ฟเวอร์เสมอ
- ปุ่มล็อกอินคลิกเดียวเปิดให้ใช้เฉพาะตอนพัฒนาในเครื่อง ห้ามหลุดขึ้นเซิร์ฟเวอร์จริงเด็ดขาดเปิดหน้าเว็บตรวจสอบด้วยตัวเอง แล้วบอกผลการทำงาน หากมีข้อผิดพลาดให้แก้ไขจนผ่านสมบูรณ์การบ้านของตอนนี้
ปิดปุ่มล็อกอินคลิกเดียวบนเว็บที่ขึ้น Vercel แล้ว ให้ตัดสินจากฝั่งเซิร์ฟเวอร์ จากนั้นถ้าพร้อมให้ต่อ Cloudflare R2 ตามคำสั่งที่แจก แล้วนำลิงก์มาแบ่งปันในคอมมูนิตี้
ตอนหน้าเปิดด้วยเฉลยข้อนี้
เป็นลิงก์ affiliate — ถ้าคุณช้อปผ่านลิงก์นี้ dev ได้ค่าคอมเล็กน้อย โดยราคาคุณเท่าเดิม 🙏
วันหนึ่งพิมพ์ prompt กับรีวิวโค้ดเป็นหมื่นตัวอักษร คีย์บอร์ดเมคานิคอลช่วยเรื่องความล้ามือจริง เลย์ 75% ประหยัดโต๊ะด้วย
สอนสด/สัมภาษณ์แล้วภาพไม่ดูเหมือนกล้องโน้ตบุ๊กปี 2015 มี AI ตามหน้าให้ ขยับออกนอกเฟรมไม่ได้
อุปกรณ์เริ่มทำคอนเทนต์/สอนออนไลน์ หารายได้เสริม
เนื้อหาส่วนใหญ่เปิดฟรี — ถ้ามีประโยชน์กับคุณ สนับสนุนเล็ก ๆ ช่วยให้เว็บนี้สู้ต่อได้ ยอดที่ยืนยันแล้วจะถูกนับ ขึ้นรายชื่อผู้สนับสนุนได้ และมีสิทธิ์สุ่มคูปองเรียนฟรีทุกเดือน
สนับสนุนแบบมีชื่อตั้งแต่ ฿1 (นับยอด + เข้า pool สุ่ม)
ต้องล็อกอิน อัปสลิปยืนยัน — ยอดจะขึ้นในบัญชีของคุณ มีสิทธิ์เข้า pool สุ่มรางวัลเดือนนี้ และเลือกชื่อแสดงบนหน้ารายชื่อได้ (default โชว์ — ซ่อนได้ที่บัญชี) (ยังไม่ได้ล็อกอิน ระบบจะพาไปหน้าเข้าสู่ระบบก่อน)
โอนให้กำลังใจผ่านพร้อมเพย์
จำนวน 10 บาท
