ยินดีต้อนรับสู่คู่มือการใช้งาน VibeKit template Next.js สำหรับ “Vibe Coders” ที่ต้องการสร้าง web application โดยใช้ AI ช่วยเขียนโค้ด
VibeKit คืออะไร?
VibeKit เป็น โครงสร้างโปรเจคสำเร็จรูป (starter template) ที่รวมระบบพื้นฐานที่จำเป็นสำหรับ web application ไว้ให้แล้ว เช่น:
- ระบบ Login ด้วย Google Account
- ระบบจัดการสิทธิ์ผู้ใช้ (Role-Based Access Control)
- ฐานข้อมูล PostgreSQL พร้อม ORM
- ระบบอัพโหลดไฟล์ ไปยัง Cloud Storage
- ปรับแต่งสำหรับ AI ให้ AI เข้าใจโครงสร้างโปรเจคได้ทันที
เทคโนโลยีที่ใช้ (Tech Stack)
| เทคโนโลยี | เวอร์ชัน | หน้าที่ |
|---|---|---|
| Next.js | 16.x | Framework หลักสำหรับสร้าง web application |
| TypeScript | 5.x | ภาษาที่ช่วยตรวจสอบ type ขณะเขียนโค้ด |
| Prisma | 7.x | ORM สำหรับจัดการฐานข้อมูล PostgreSQL |
| NextAuth.js | 4.x | ระบบ Authentication (Login ด้วย Google) |
| Tailwind CSS | 4.x | Framework สำหรับจัดการ CSS |
| Zod | 4.x | Library สำหรับตรวจสอบข้อมูล |
สิ่งที่ต้องเตรียมก่อนเริ่ม (Prerequisites)
ก่อนเริ่มใช้งานนี้ คุณต้องมี:
| รายการ | รายละเอียด |
|---|---|
| GitHub Account | สำหรับใช้ Codespaces หรือ clone repository |
| Google Cloud Account | สำหรับตั้งค่า OAuth (Login ด้วย Google) |
| Google Cloud Storage | Google Cloud Storage ใช้สำหรับเก็บไฟล์ที่อัพโหลด เช่น รูปโปรไฟล์, เอกสาร ฯลฯ (ส่วนเสริม) |
| Railway Account | สำหรับ deploy application ขึ้น production |
| Supabase Account | สำหรับสร้างฐานข้อมูล PostgreSQL (ส่วนเสริม ใช้กับ Cursor IDE) |
| Cursor IDE | สำหรับทำงานแบบ local development (ส่วนเสริม) |
สารบัญ
บทที่ 0: เตรียมตัวให้พร้อมก่อนเริ่มโปรเจค
- 0.1 การดาวน์โหลดไฟล์และเริ่มใช้งาน VibeKit ผ่าน GitHub — เริ่มต้นดาวน์โหลดไฟล์และอัปโหลดไปบน GitHub เพื่อใช้งาน GitHub Codespaces
บทที่ 1: เริ่มต้นใช้งาน
- 1.1 การใช้งานผ่าน GitHub Codespaces — วิธีเริ่มต้นที่ง่ายที่สุด ไม่ต้องติดตั้งอะไรบนเครื่อง
- 1.2 การใช้งานผ่าน Cursor IDE — สำหรับทำงานแบบ local บนเครื่องของคุณ (ส่วนเสริม)
บทที่ 2: การตั้งค่า Third-Party Services
- 2.1 Google Cloud OAuth — ตั้งค่าระบบ Login ด้วย Google Account
- 2.2 Supabase (PostgreSQL) — สร้างและตั้งค่าฐานข้อมูล Supabase สำหรับ Local development (ส่วนเสริม)
- 2.3 Google Cloud Storage — ตั้งค่าระบบอัพโหลดไฟล์ (ส่วนเสริม กรณีต้องการทำระบบที่มีการอัปโหลดไฟล์)
บทที่ 3: การออกแบบ PRD
บทที่ 4: การพัฒนาโปรเจคบน IDE (Codespaces / Cursor)
เทคนิคการพัฒนาโปรเจคเพื่อให้ใช้งานได้จริง
- 4.1 การ Restart โปรเจคเมื่อระบบมีปัญหา
- 4.2 การเพิ่มฟีเจอร์ใหม่ในระบบผ่าน Agent
- 4.3 การเปิด Port (URL สำหรับทดลองใช้งาน) บน Codespaces
- 4.4 การจัดการ Secret
- 4.5 การปรับ Font ใหม่โดยใช้ Google Font
- 4.6 เทคนิคการปรับแต่ง UI ต่าง ๆ
บทที่ 5: การจัดการ Database (ส่วนเสริม)
สำหรับรูปแบบการใช้งานพิเศษที่ไม่สามารถ Vibe coding ได้ ขั้นตอนนี้จะช่วยให้คุณสามารถจัดการหรือเปลี่ยนแปลงโครงสร้าง Database ได้ด้วยตัวเอง
- 5.1 การสร้าง Schema ใหม่ — เพิ่มตารางใหม่ในฐานข้อมูล
- 5.2 การ Migrate Database — อัพเดทโครงสร้างฐานข้อมูลเมื่อมีการเปลี่ยนแปลง
- 5.3 การ Import ข้อมูลด้วย CSV — นำเข้าข้อมูลจากไฟล์ CSV
บทที่ 6: การ Deploy ขึ้น Production
- 6.1 Railway Deployment — วิธี deploy application ขึ้น Railway
บทที่ 7: ปัญหาที่พบบ่อย และเทคนิคอื่น ๆ
- 7.1 ตัวอย่าง Prompt — ตัวอย่าง prompt สำหรับ development
- 7.2 การเชื่อมต่อกับ Looker Studio — วิธีนำข้อมูลจาก Railway Postgres ไปทำ Dashboard
Appendix
- Appendix A: คำอธิบาย Environment Variables — ตารางอ้างอิง ENV ทั้งหมดที่ใช้ใน npm run setup