คู่มือการใช้งาน VibeKit ฉบับเต็ม

ระยะเวลาที่ต้องใช้ทั้งหมด 3 hours

1. Setup: อัปโหลด VibeKit File ไว้บน GitHub ผ่าน GitHub Desktop

   การดาวน์โหลดไฟล์และเริ่มใช้งาน VibeKit ผ่าน GitHub

2. Setup: การ Setup Codespaces เครื่องมือพัฒนาที่ใช้งานผ่าน Browser โดยไม่ต้องติดตั้งโปรแกรม

   เริ่มต้น การพัฒนา Application ผ่าน GitHub Codespaces โดยสามารถรันคำสั่ง Setup ที่จะให้กรอกข้อมูลเพื่อตั้งค่าระบบให้พร้อมใช้งาน
   – การดู Port และ URL ที่กำลังใช้งาน
   – การตั้งค่า Google OAuth สำหรับระบบ Authentication
   – การเปิด Database เพื่อดูข้อมูลในระบบ
   – การตั้งค่า Cloud Storage สำหรับอัปโหลดไฟล์ (ไม่จำเป็น)
   – ตั้งค่า NEXTAUTH_SECRET ด้วยตัวเอง เป็นรหัสจากการสุ่ม (HEX 32) (ไม่จำเป็น)

3. PRD: การสร้าง Product Requirement Document (PRD)

   – สร้าง PRD สำหรับ Web Application
   – ตัวอย่าง Prompt อย่างง่าย

4. Development: เริ่ม Vibe Coding บน GitHub Codespaces

   นำไฟล์ PRD (addons.md) ไปวางไว้บน Project แล้วเริ่ม Prompt สั่งงานทำตาม Milestone ตามลำดับ
   ดูตัวอย่างการทำผ่านการ Vibe Coding บน GitHub Codespaces
   
   เทคนิคอื่น ๆ
   – เพิ่มความสามารถ WebApp ด้วย Package เสริมสำหรับ Vibe Coding
   
   หากเกิดปัญหา หรือต้องการแก้ไขอื่น ๆ
   – ให้ Restart app เมื่อมีปัญหาที่ Agent แก้แล้วแต่ยังไม่เห็นผล
   – เมื่อเกิดปัญหาไม่สามารถ Login ได้ Error 400: redirect_uri_mismatch
   – การทำ Versioning ด้วย GitHub และการตรวจสอบ Sourcecode

5. Deployment: การ Deploy Project ขึ้น Production เพื่อนำไปใช้งานจริง

   – การ Deploy Project ขึ้น Production ผ่าน Railway
   – การสร้าง Dashboard ด้วย Lookerstudio

6. Other: การจัดการ Database (ส่วนเสริม)

   สำหรับรูปแบบการใช้งานพิเศษที่ไม่สามารถ Vibe coding ได้ ขั้นตอนนี้จะช่วยให้คุณสามารถจัดการหรือเปลี่ยนแปลงโครงสร้าง Database ได้ด้วยตัวเอง
   – การออกแบบ Database (เวอร์ชั่นบทความ, เวอร์ชั่น VDO)
   – การสร้าง Schema ใหม่ — เพิ่มตารางใหม่ในฐานข้อมูล
   – การ Migrate Database — อัพเดทโครงสร้างฐานข้อมูลเมื่อมีการเปลี่ยนแปลง
   – การ Import ข้อมูลด้วย CSV — นำเข้าข้อมูลจากไฟล์ CSV
   – Supabase (PostgreSQL) — สร้างและตั้งค่าฐานข้อมูล Supabase สำหรับ Local development (ส่วนเสริม)

7. Other: การใช้งานบน Platform อื่น ๆ

   – การใช้งานผ่าน Cursor IDE — สำหรับทำงานแบบ local บนเครื่องของคุณ (ส่วนเสริม)

8. Other

   – Login ผ่าน Google ไม่ได้เจอปัญหา Error 403: disallowed_useragent

9. Security

   – Excessive Data Exposure คืออะไร และวิธีตรวจสอบใน Vibe Coding Project
   – Broken Access Control คืออะไร และวิธีตรวจสอบ Password ใน Source Code สำหรับ Vibe Coding Project
   – Privilege Escalation คืออะไร และวิธีตรวจสอบช่องโหว่ใน Local Storage ของ Vibe Coding Project