Vibe Code Engineering Workshop

บันทึก workshop โดยเราจะทำตาม Flow นี้

เราจะติดตั้งดังนี้

Node Js: Node > 19, NPM > 9
Claude Code

เราจะใช้งาน BMAD กัน

ใช้ dist/teams/team-fullstact.txt ใน repo นี้

Gemini Gems

จากนั้นเราจะใช้เครื่องมือ Gimine Gems หรือเราจะใช้ Custom GPT ก็ได้ แต่ใน workshop เราจะใช้ Ginime Gems เพราะเราได้ context window ใหญ่กว่า

เข้าไปที่ Gimini แล้วเลือก Explore Gems จากนั้น เราก็สร้าง Gems ได้เลย โดยเราจะกำหนด instructions ว่า

Your critical operating instructions are attached, do not break character as directed.

Gems instructions

แล้วเพิ่ม file team-fullstack.txt

Start Workshop

เวิร์คชอปนี้เราจะลองมาสร้างระบบ Logistics CRM (MVP) กัน โดยเริ่มต้นจากการสร้าง Spec กันก่อนเลย

ใน workshop นี้ เราจะลองไปคุยเพื่อสร้างไฟล์เหล่านี้ผ่าน Gimini Chat เราจะไม่คุยใน IDE เพื่อเพราะ token จะหมดเร็วมาก

1.เริ่มสร้าง Spec ขึ้นมาก่อนเลย

เป้าหมายของการสร้าง เราจะได้ไฟล์ PRD.md (Product Requirement) และ architecture.md (Tech stacks) โดยเราจะแยก เอกสารกัน เพื่อให้มันเข้าใจ และ ชัวร์กว่า

โดยเข้าไปที่ Gimini ของเราและเรียกใช้ Gems ที่พึ่งสร้างไป ใน workshop นี้ จะลองสร้างภาษาไทยดู แต่ใช้ภาษาอังกฤษจะดีกว่า

และเมื่อเราได้ไฟล์แล้ว ไปในขั้นตอนถัดไปได้เลย

2.Install and Setup

Claude Code

เราจะใช้งานผ่านทาง claude code ผ่าน terminal โดยพิมพ์ claude ถ้าติดตั้งสำเร็จก็จะได้หน้าตาแบบนี้

Create Project

สร้างโปรเจคขึ้นมา ผมใช้ vscode เป็น IDE และ สร้างโฟลเดอร์ docs แล้วนำไฟล์ architecture.md และ prd.md เข้าไปไว้ในโปรเจค

เราจะเริ่มต้นด้วยการติดตั้ง Extentions กันก่อน

Claude Code for VSCode

Install BMAD

จากนั้นเปิด terminal ขึ้นมา แล้วติดตั้ง BMAD ในโปรเจคของเรา

pnpm dlx bmad-method install

เลือกสิ่งที่เราต้องการใช้

Update BMad Agile Core System (v4.41.0 - reinstall) .bmad-core
Will the PRD (Product Requirements Document) be sharded into multiple files? (Y/n): (Y)
Will the architecture documentation be sharded into multiple files? (Y/n): (Y)
เชื่อม IDE (Claude Code)
Would you like to include pre-built web bundles? (standalone files for ChatGPT, Claude, Gemini) (y/N): (N) ไม่ติดตั้งคำสั่งพื้นฐาน

มันจะสร้างโฟล์เดอร์ .bmad-core ขึ้นมา

จากนั้นเริ่มใช้งาน claude-code ได้เลย

3.Chunk file

เริ่มจากการ shuck file กันก่อนเลย

/BMad:agents:po *shard-doc docs/prd.md prd

หลังจากเลือก space ที่ทำงานแล้ว

ของผม จะมี step การติดตั้ง @kayvan/markdown-tree-parser และ ตั้งค่า markdownExploder:false ในไฟล์ .bmad-core/core-config.yaml

⏺ The markdownExploder setting is enabled but the md-tree command is not available. Please either:

  1. Install @kayvan/markdown-tree-parser globally with: npm install -g @kayvan/markdown-tree-parser
  2. Or set markdownExploder to false in .bmad-core/core-config.yaml

  IMPORTANT: STOP HERE - do not proceed with manual sharding until one of the above actions is taken.

จากนั้นให้เริ่มคำสั่งต่อ จากนั้นก็รอให้มันหั่น prd ออกมาให้เรียบร้อย (หั่นเพื่อให้ ai อ่านได้ง่าย)

เมื่อเสร็จแล้ว เราไปหั่น architecture.md ต่อเลย

/BMad:agents:architect *shard-doc docs/architecture.md architecture

💡

เราสามารถไปหั่นผ่าน gimini ก็ได้

4.สร้าง Story

เราจะใช้ SM (Scrum Master) เป็นคนสร้าง story ให้

/BMad:agents:sm *create

รอจนเสร็จเป็นอันจบ

5.สร้าง Dev Sub-Agent

เราจะสร้าง Sub Agents เพื่อมาช่วยเราเขียน code กัน

prompt ที่เขียน

*po สอบถามครับ ถ้าผมต้องสร้าง dev sub agents ในการเขียนโปรแกรมทั้งโปรเจค ควรมีใครบ้างครับ ที่ผมนึกออก น่าจะมี
React Expert: ทำหน้าที่พัฒนา fronted
Shadcn: ทำหน้าที่พัฒนา UI UX ช่วย React Expert
Backed Expert: ทำหน้าที่ดูแลหลังบ้านให้ระบบ
ทีนี้ควรมีใครอีกครับ และแต่ละ sub agents ต้องมี job describtion อย่างไรให้ครบครับ

คำตอบที่ได้จะประมาณนี้

หากคุณต้องการทีมย่อย (sub-agents) เพื่อพัฒนาโปรเจกต์นี้ให้ครบถ้วนตามสถาปัตยกรรมที่วางไว้ นอกเหนือจากผู้เชี่ยวชาญด้าน React (Frontend) และ Backend Expert แล้ว ยังควรมีบทบาทเพิ่มเติมดังนี้ครับ

บทบาทและ Job Descriptions ของทีมพัฒนา
1. Full-Stack Architect
Job Description: ทำหน้าที่ออกแบบสถาปัตยกรรมโดยรวมของแอปพลิเคชัน ตั้งแต่ Frontend, Backend ไปจนถึง Database รวมถึงกำหนดเทคโนโลยีและเครื่องมือที่จะใช้ (Technology Stack) ดูแลให้ทุกส่วนทำงานร่วมกันได้อย่างราบรื่นและมีประสิทธิภาพสูงสุด

2. React Expert
Job Description: รับผิดชอบการพัฒนาส่วนหน้าบ้านทั้งหมด (Frontend Development) แปลงการออกแบบ UI/UX ให้เป็นโค้ดจริงด้วย React, จัดการ State Management, และจัดการ Routing

3. UI/UX Engineer (Shadcn Expert)
Job Description: ทำงานร่วมกับ React Expert เพื่อนำ Components จาก Shadcn UI มาปรับใช้และพัฒนาให้ตรงตามการออกแบบ UI/UX Specification จัดการเรื่อง Styling, Theming, และ Responsive Design เพื่อให้มั่นใจว่าแอปพลิเคชันมีหน้าตาที่สวยงามและใช้งานได้ดีบนทุกอุปกรณ์

4. Backend Expert
Job Description: รับผิดชอบการพัฒนาส่วนหลังบ้านทั้งหมด (Backend Development) สร้างและดูแล API Endpoints ด้วย NestJS จัดการ Logic การทำงานของระบบ รวมถึงการยืนยันตัวตน (Authentication) และการจัดการข้อมูล

5. Database & DevOps Engineer
Job Description: ดูแลการจัดการฐานข้อมูล (Database Management) ตั้งแต่การออกแบบ Schema ไปจนถึงการติดตั้งและดูแลฐานข้อมูล PostgreSQL บน Docker Compose รวมถึงรับผิดชอบเรื่องการตั้งค่าสภาพแวดล้อม (Environment Setup) และการนำโปรเจกต์ขึ้นสู่ Production (Deployment)

6. QA Engineer (Quality Assurance)
Job Description: ทำหน้าที่ทดสอบแอปพลิเคชันอย่างละเอียดตั้งแต่ต้นจนจบ เพื่อหา Bug และปัญหาการทำงานต่างๆ เพื่อให้มั่นใจว่าทุกฟีเจอร์ทำงานได้อย่างถูกต้องตาม PRD และแอปพลิเคชันมีคุณภาพสูงก่อนปล่อยสู่สาธารณะ

Create Agent

/agents

เลือก create new agent และเลือกที่จัดเก็บ agents

เสร็จแล้ว ใส่ข้อมูลของ agent ตัวนั้นๆ ได้เลย

ก่อน dev

ก่อน dev ให้ใช้คำสั่งนี้

/init

อ่าน documents ทั้งหมด ที่เราเขียนไว้ แล้วสร้างไฟล์ CLAUD.MD

ใช้

เรียกใช้ bmad-orchestrator เพื่อให้เป็นตัวจัดการงาน โดยกำหนด prompt ประมาณนี้

/BMad:agents:bmad-orchestrator ต้องการให้คุณพัฒนาตาม story [File Story] โดยให้คุณวิเคราะห์ sub-agent ทั้งหมด [.claude/agents] แล้วให้วิเคารห์งาน story จากนั้นทำการเลือก sub-agent ที่เกี่ยวข้องกับการทำงานให้สำเร็จ ออกมาพร้อมกันแบบ Parallels (ถ้าเป็นไปได้) เมื่อทำงานเสร็จ story แล้ว ให้เปลี่ยนบทบาทตัวเองเป็น dev agent เพื่อทำการ update file story ให้พร้อมสำหรับตรวจสอบโดย QA ในขั้นตอนต่อไป

Prompt

เท่านี้ก็ปล่อยให้ agents ทำงานไปได้เลย รอให้ story ที่ทำ เปลี่ยน status เป็น done แล้ว แล้วรอมันทำตัวถัดๆ ไป ให้จบ

ถ้าอยากให้ agent ทำงานได้ดีขึ้น ให้เปลี่ยน status ในไฟล์ story เป็น Approved

## Status
Approved

ในกรณีที่ agent ของเราติด limit หรือ เงินหมด หลังจากที่เราจัดการแล้วให้สั่งให้ Orchestrator กลับไปดูของเก่า แล้วทำต่อ

/BMad:agents:bmad-orchestrator ให้ไปย้อนดู และทำต่อจากจุดเดิม

เมื่อจบแล้ว ให้ QA ตรวจงานได้เลย

/BMad:agents:qa ช่วยตรวจ [Story.md File]

เมื่อผ่านเรียบร้อยแล้ว ให้เราไปสร้าง story ถัดไปต่อได้เลย

/BMad:agents:sm *create

หรือ จะสั่งให้ po สร้าง story ทั้งหมดเลยก็ได้

/BMad:agents:sm *create all story

เท่านี้ก็จบ

เนื้อหาอื่นๆ ใน workshop

MCP ที่น่าสนใจ

Context 7: ตัวรวม MCP ต่างๆ ไว้
ByterOver: แก้ปัญหา AI ลืม Code
Playwrite: ช่วยทดสอบและแก้ไขให้เรา