การ Vibe Coding บน GitHub Codespaces

หลังจากที่ Setup Project (1)(2) และสร้าง Product Requirement Document แล้ว ระบบก็พร้อมจะเริ่ม Vibe Coding แล้วก็สามารถเริ่มสั่งงาน AI Agent ด้วย Agent Mode ได้เลย

โครงสร้างการทำงานของ AI Agent Mode

ในการเริ่มคำสั่งแรก ระบบจะทำการวิเคราะห์ PRD ร่วมกับ Sourcecode เดิมที่มีอยู่ในระบบ เพื่อวางแผนการทำงานและนำเสนอให้ผู้ใช้ยืนยันตามรูปแบบดังนี้

📋 Research Phase Summary

สรุปเนื้อหาที่ได้จากการอ่าน PRD เพื่อยืนยันความเข้าใจว่าจะดำเนินการได้ตรงตามเป้าหมาย (Milestone) ที่กำหนด

🎯 Plan Phase – Proposed Implementation

สรุปแผนการทำงานในเชิงเทคนิค รายละเอียดในส่วนนี้หากผู้ใช้มีความรู้ด้านเทคนิคจะช่วยให้ตรวจสอบความถูกต้องได้ดียิ่งขึ้น

🤔 Decisions Needed Before Proceeding:

สรุปคำถามเพิ่มเติมก่อนเริ่มงาน ส่วนนี้ควรตรวจสอบและตอบคำถามให้ละเอียดที่สุดเพื่อให้ระบบทำงานได้อย่างถูกต้องและมีประสิทธิภาพ โดยส่วนใหญ่จะเป็นเรื่อง UI หรือรายละเอียดบางอย่างที่เราไม่ได้ระบุ

ตอบคำถามให้ละเอียดที่สุด เพื่อให้ระบบทำงานได้ดี

รอ Agent ทำงานและ ตรวจสอบการทำงาน

โดยปกติ Agent จะค่อยทำงาน สร้างไฟล์ แก้ไขไฟล์ไปเรื่อย อาจจะมีบางทีที่เขาทำงานนานเกิน เขาจะให้เรากด Continue ให้ทำงานต่อได้ และรอตรวจสอบเมื่อ Agent ทำงานเสร็จทั้งการดูใน Web App และดูใน Database โดยอาจจะมีรายละเอียดอื่น ๆ ดังนี้

เมื่อ Agent ต้องการรันคำสั่ง

ตัวอย่างคำสั่งที่ Agent อาจจะรันในระบบ

เมื่อทำงานไปสักพัก Agent อาจจะขอรันคำสั่งบางอย่างอัติโนมัติให้เรากด Allow เพื่อให้ทำงาน

ตัวอย่างคำสั่งที่ Agent จะทำงาน (ปลอดภัย):

  • หมวด Database
    • npx prisma generate
    • npx prisma db push
    • npx prisma db seed
  • หมวด Project
    • npm run dev
    • npm run build
    • npm run lint
    • npm run format
  • หมวด Version control
    • git status
    • git add -A
    • git commit -m "commit message"
    • git push origin <branch>

โดยบางคำสั่ง เราเคยรันไปแล้วเช่น npm run dev อาจจะไม่จำเป็นต้องรันอีก (ยกเว้นระบบมีปัญหา) สามารถกด skip ไปได้เลย

เมื่อตรวจสอบแล้วเกิด Error บน Web App

ตัวอย่าง Error ที่อาจจะเกิดขึ้น

เมื่อเข้าไปที่หน้า Web App แล้วลองกดใช้งาน อาจจะเกิด Error ได้ดังนี้ ให้เราลองกด Copy แล้วไปพิมในช่องแชทเพื่อสอบถามปัญหาได้โดยตรงได้เลย ระบบจะพยายามแก้ไขให้เอง หากยังเกิดปัญหาเดิมให้ Restart Project โดยกด Cancle ใน Terminal แล้วสั่ง npm run dev อีกรอบ

เมื่อตรวจสอบแล้วเจอ Problem ในแถบ PROBLEMS ด้านล่าง

ตัวอย่างการแก้ไข Error ใน Sourcecode

เมื่อตรวจสอบ Problem ในแถบ PROBLEMS เราสามารถกดที่ Error อันนั้น แล้วกดให้ Agent fix ได้เลย โดยการครอบส่วนที่ Error แล้วคลิกขวาเลือก Add file to chat เพื่อให้ Agent แก้ไขให้เรียบร้อย

เมื่อตรวจสอบการทำงานแล้วทำงานถูกต้องค่อยกด Keep เพื่อบันทึกการทำงานทั้งหมด

สรุปการแก้ไขข้อมูลทั้งหมดใน Agent

หากตรวจสอบจนพอใจแล้วเราสามารถกด Keep เพื่อยืนยันสิ่งที่ Agent ทำมาทั้งหมด

เมื่อตรวจสอบการทำงานแล้วทำงานถูกต้องค่อยบันทึกการเปลี่ยนแปลงลงใน GitHub Repository

สั่งให้ Agent ทำการ Commit และ Push การเปลี่ยนลงใน GitHub ที่ Main Branch

Please commit and push your changes to GitHub.
  • Commit คือการ Quick Save บนเครื่องของเรายังไม่มีการเปลี่ยนแปลงบน Remote / Cloud เหมาะแก่การบันทึกกับตัวเอง
  • Push คือการ Save บน Remote / Cloud เพื่อให้คนอื่น หรือตัวเองทำงานได้ภายหลัง

โดยแต่ละครั้งที่มีการ Commit หรือ Push ระบบจะมีการตรวจสอบให้อีกรอบนึงก่อนทำงานจริง ถ้ามีปัญหาก็สามารถสั่งให้ระบบแก้ไขได้