VibeKit Workshop Guide

เอกสารนี้อธิบายขั้นตอนการเตรียมความพร้อมสำหรับผู้เข้าร่วม Workshop VibeKit ตั้งแต่การตั้งค่า GitHub Account การใช้งาน Template การรัน Project ใน GitHub Codespaces ไปจนถึงการ Deploy ผ่าน Railway

เอกสารสำหรับวางแผน Workshop

GitHub Account และการตั้งค่า Template

GitHub คือแพลตฟอร์มสำหรับเก็บและจัดการโค้ด ในบริบทของ Workshop นี้ ให้คิดว่ามันทำงานคล้ายกับ Google Drive กล่าวคือ ผู้เข้าร่วมจะได้รับสำเนาของ Template Repository เพื่อใช้เป็นจุดเริ่มต้นในการพัฒนา

ขั้นตอนการตั้งค่า VibeKit Template:

ใน Workshop คุณจะได้รับ Invitation ให้ Copy Template สำหรับทำ Vibe Coding โดยให้ทำตามขั้นตอนนี้

• เข้าไปที่ GitHub Account แล้วตรวจสอบการแจ้งเตือน (Notification) จะพบ Invitation ให้เข้าร่วม Repository ชื่อ PeterWorakarn/vibe-coding-boilerplate หรือเข้าไปที่นี่
• เปิด Repository แล้วกด Use this template จากนั้นเลือก Create new repository
• ตั้งชื่อ Repository ว่า vibe-coding-template และกำหนด Visibility เป็น Private
• หลังจากสร้าง Repository เรียบร้อยแล้ว ให้เข้าไปที่ Settings > General แล้วตั้งค่าให้เป็น Template repository
• เมื่อต้องการสร้าง Project ใหม่ สามารถกด Use this template > Create new repository ได้ทุกครั้ง

GitHub Codespaces พื้นที่ Vibe Coding บน GitHub

GitHub Codespaces คือสภาพแวดล้อมสำหรับพัฒนาโปรแกรมที่ทำงานบนเบราว์เซอร์ ทำหน้าที่เหมือน IDE ออนไลน์ โดยไม่จำเป็นต้องติดตั้งโปรแกรมใดๆ บนเครื่องของตัวเอง

วิธีเปิด Codespace:

• เข้าไปที่ Repository บน GitHub
• กด Code แล้วเลือก Create Codespace on main
• รอให้ระบบตั้งค่าสภาพแวดล้อมโดยอัตโนมัติ

ส่วนต่างๆ ของ Interface ที่ควรทำความรู้จัก:

• Terminal — สำหรับรันคำสั่ง
• File Explorer — สำหรับเรียกดูและแก้ไขไฟล์ใน Project
• Git Panel — สำหรับติดตามและบันทึกการเปลี่ยนแปลงของโค้ด
• Chat / Agent Panel — สำหรับใช้งาน AI ช่วยพัฒนา

Port ที่ใช้งานในโปรเจกต์:

• Port 3000 — แอปพลิเคชันหลัก
• Port 51212 — เครื่องมือดูฐานข้อมูล (Prisma Studio)

System Design

System Design คือกระบวนการกำหนดว่าแอปพลิเคชันจะมีฟีเจอร์อะไรบ้าง ก่อนที่จะเริ่มลงมือสร้างจริง

แนวทางการทำ System Design ใน Workshop นี้:

• ฟีเจอร์ที่เกี่ยวกับการจัดการสิทธิ์ผู้ใช้ (RBAC), การจัดการข้อมูล และ UI จะพัฒนาผ่าน VibeKit ทั้งหมด
• ความสามารถภายนอก เช่น การส่งอีเมล, ระบบชำระเงิน และ Generative AI จะถูกมองเป็น Integration แยกต่างหาก เพื่อให้ระบบโดยรวมจัดการได้ง่ายขึ้น (โดยทำผ่าน Automation tools ชื่อ Activepieces)
• ใช้ AI เพื่อช่วยออกแบบโครงสร้างฐานข้อมูลและสร้าง Prototype ในช่วงต้นของกระบวนการ

Prompt สำหรับช่วยในการออกแบบ Database

คุณคือ **Lead Product Manager** และ **Senior System Analyst** ผู้เชี่ยวชาญด้านการออกแบบโครงสร้างระบบ หน้าที่ของคุณคือการเปลี่ยนไอเดียทางธุรกิจให้กลายเป็นเอกสารทางเทคนิคที่แม่นยำและพร้อมสำหรับการพัฒนาต่อ

### ภารกิจ (Mission)

สร้างเอกสารในรูปแบบ **Markdown** (.md) สำหรับแอปพลิเคชันตามแนวคิด (Idea) ที่ระบุ โดยยึดตามโครงสร้างและกฎเกณฑ์ที่กำหนดอย่างเคร่งครัด **(กรุณาสอบถามรายละเอียดเพิ่มเติมก่อนเริ่มดำเนินการกระบวนการถัดไป - Ask before implement)**

### โครงสร้างเนื้อหาที่ต้องระบุ (Required Structure)

**1. โครงสร้างข้อมูล (Data Schema)** วิเคราะห์และออกแบบโครงสร้างฐานข้อมูลที่มีประสิทธิภาพ โดยครอบคลุมหัวข้อดังนี้:

- **ความสัมพันธ์ของข้อมูล (Entity Relationship):** อธิบายความเชื่อมโยงระหว่างชุดข้อมูล (เช่น One-to-Many หรือ Many-to-Many)
    
- **การจัดระเบียบข้อมูล (Normalization):** ออกแบบตามหลักการ Normalization ไม่เกินระดับ **3NF** เพื่อลดความซ้ำซ้อนและรักษาความถูกต้องของข้อมูล (Data Integrity)
    
- **รายละเอียดฟิลด์ (Field Specifications):** นำเสนอในรูปแบบ **ตาราง (Table)** ซึ่งประกอบด้วย:
    
    - ชื่อฟิลด์ (Field Name)
        
    - ประเภทข้อมูล (Data Type)
        
    - ข้อกำหนดเพิ่มเติม (Constraints เช่น PK, FK, Unique, Not Null)
        
    - ตัวอย่างข้อมูล (Sample Data)

** ไม่ต้องออกแบบ User entity และ Role access**
** ใช้ Unique Identifier สำหรับ primary key โดนใช้เป็น CUID **

### Format
เขียนในรูปแบบไฟล์ Markdown

รายละเอียด Application
[รายละเอียด Application]

Prompt สำหรับช่วยในการสร้าง Prototype

จาก PRD ที่กำหนดให้ ลองสร้าง Workable Frontend ที่มีฐานข้อมูลเป็น Local storage อย่างง่าย โดยไม่ต้องมี Framework ใด ๆ เพื่อให้สามารถรันได้ใน Chat เพื่อทดสอบ Concept นี้ 

ขอเป็นเวอร์ชั่นง่ายที่สุดไม่ต้องสวย แต่ควรทำงานได้จริง เพิ่ม ลบ แก้ไข พร้อมตัวอย่างข้อมูล โดยยังไม่ต้องทำระบบ Access control

Avoid this error
* Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.

PRD
[รายละเอียด PRD]

การตั้งค่า VibeKit Project

หลังจาก Codespace พร้อมใช้งานแล้ว ให้ดำเนินการตามขั้นตอนต่อไปนี้เพื่อเริ่มต้น Project

ขั้นตอนการตั้งค่า:

• กรอกค่า Environment Variable ที่จำเป็นลงในไฟล์ .env
• รันคำสั่ง Migrate ฐานข้อมูลและ Seed ข้อมูลเริ่มต้น:

npx prisma migrate dev && npx prisma db seed

• เริ่มต้น Development Server:

npm run dev

• หากต้องการหยุดคำสั่งที่กำลังรันอยู่ ให้กด Ctrl + C (หรือ Cmd + C บน Mac)
• ทดสอบการตั้งค่าโดยการ Login เข้าสู่แอปพลิเคชัน VibeKit ผ่านเบราว์เซอร์

การเข้าถึงแอปใน Codespaces:

• แอปพลิเคชัน: https://xxxxx-3000.app.github.dev
• เครื่องมือดูฐานข้อมูล: https://xxxxx-51212.app.github.dev

การติดตั้ง Gemini CLI (ส่วนเสริม)

Gemini CLI คือ AI Assistant ที่ใช้งานได้ฟรีผ่าน Terminal โดยตรง เหมาะสำหรับใช้งานภายใน GitHub Codespaces

ขั้นตอนการติดตั้ง:

• ติดตั้ง Gemini CLI แบบ Global:

npm install -g @google/gemini-cli

• เปิดใช้งานโดยพิมพ์:

gemini

Vibe Coding

Prompt template สำหรับสร้าง Database

อ่านไฟล์ #file:addons.md ที่กำหนด
และเริ่มสร้าง Database ตาม Project Standard โดยมีการ mock data ตัวอย่างเข้าไปใน Database ด้วย Script seed-mock.ts และตรวจสอบการทำงานหลังทำด้วย "npx prisma validate" และ "npx prisma migrate status"

Plan and Ask before coding

Prompt template สำหรับสร้าง UI

การสั่งงาน AI เราจะมี Keyword โดยมี Pattern ในรูปแบบนี้

IN __(url, page)__, 

WHEN user do __(action)__ THEN __(result)__

__(condition)__

Plan and Ask before coding

• IN __(url, page)__,: มีการ reference ถึง URL ที่ต้องการ
• WHEN __(action)__: มีการระบุเมื่อผู้ใช้งานทำอะไรบางอย่าง เช่นกดปุ่ม, ดูข้อมูล, พิมค้นหา
• THEN __(result)__: ผลลัพธ์ที่เกิดจากการกระทำ โดยอาจจะเพิ่มเงื่อนไข เช่น ถ้าค้นหาสำเร็จให้แสดงผล __ หากไม่สำเร็จให้แสดงผล __
• __(condition)__: เงื่อนไขอื่น ๆ

การบันทึกการเปลี่ยนแปลงขึ้น GitHub

ควรบันทึกการเปลี่ยนแปลงโค้ดขึ้น GitHub อยู่เสมอระหว่าง Workshop ใช้ Git Panel ใน Codespaces เพื่อ Commit และ Push การอัปเดตทุกครั้งที่มีความคืบหน้า

การ Deploy ผ่าน Railway

Railway คือแพลตฟอร์ม Cloud Hosting ที่ช่วยให้ Deploy แอปพลิเคชันได้โดยไม่ต้องตั้งค่าซับซ้อน สามารถเริ่มต้นใช้งานได้ด้วย Trial 30 วัน หรือเครดิตมูลค่า 5 USD

Deployment Application เพื่อใช้งานจริงผ่าน Railway