บันทึกการแบ่งปันเรื่อง AI Agent for coding แบบพื้นฐาน

มีโอกาสแบ่งปันความรู้พื้นฐานเกี่ยวกับการใช้งาน AI Agent for Coding
ทั้ง Claude code และ Github Copilot Chat ที่สถาบัน IMC
เป็นเครื่องมือที่นำมาเพื่อช่วยสร้างและแก้ไขปัญหา ไม่ใช่มาสร้างปัญหา
รวมทั้งไม่ใช่นำมาใช้เป็นเพื่อนคุยไปมายาว ๆ นะครับ
โดยแน่นอนว่า นำมาใช้ในการพัฒนาระบบงานทั้ง frontend และ backend
มาดูกันว่า มีแนวทางการใช้งานขั้นพื้นฐานอย่างไร ?
เน้นย้ำว่า พื้นฐานล้วน ๆ

เริ่มด้วยการเข้าใจ AI Agent ที่เรานำมาใช้ก่อน

โดยที่ AI Agent แต่ละตัวจะมีค่า default มาให้แล้วบ้าง
รวมทั้งความสามารถต่าง ๆ ที่เราเพิ่มเติมได้ เช่น

• Rule และ instruction ต่าง ๆ ที่เราต้องการ ไม่ต้องมาบอกตลอดเวลา ทั้ง global และ เฉพาะเจาะจงกับ file type ต่าง ๆ ไปเลย มันคือข้อตกลงของการทำงาน
• Tools และ MCP (Model Context Protocol) ที่ใช้งาน มีเท่าที่จำเป็น อะไรไม่ใช้งานก็ลบออกไป อย่าติดตั้งเยอะเกินไป
• LLM model ที่ใช้งาน เลือกให้เหมาะกับงาน ทั้งการถามตอบ การวางแผน และ การเขียน code
• การสร้าง command/prompt/workflow การทำงาน ในรูปแบบที่เราต้องการ หรือ อะไรซ้ำ ๆ ก็จัดการได้เลย ไม่ต้องเสียเวลาทำซ้ำ
• ลองสร้าง และ ใช้งาน Agent Skills เพื่ออธิบายการทำงานต่าง ๆ รวมทั้ง reference และ script เพื่อให้การทำงานมันเสถียรมากยิ่งขึ้น
• ปรับปรุงการใช้งาน CLI tools ต่าง ๆ เพื่อช่วยให้งานง่ายขึ้น หรือ ลด token ที่ใช้งาน เช่น Rust Token Killer และ Touch-all เป็นต้น

ต่อมาขั้นตอนที่สอง ต้องเข้าในสิ่งที่เราต้องการก่อน (requirement)

เมื่อเข้าใจ requirement แล้ว
ให้ทำการ break down ออกมาเป็นส่วนย่อย ๆ
ตามจริงในส่วนนี้ไม่ต้องใช้ AI ช่วยเลย (Plan mode)
ถ้าเป็น developer ให้ใช้ประสบการณ์ช่วยได้
หรือจะใช้ก็ไม่ว่ากัน
มีทั้ง functional และ non-functional ก็ว่ากันไป

จากนั้นทำการแบ่ง requirement ออกมาเป็นเรื่อง ๆ ให้ชัดเจน
หรือเป็น feature-based ก็ได้
หรือเป็น flow-based ก็ได้

ต่อมาทำการออกแบบ architecture ของระบบว่าเป็นอย่างไร
ยกตัวอย่างโครงสร้างแบบง่าย ๆ เช่น

• Frontend
• Backend
• Database
• Caching

เมื่อพร้อมแล้ว ไปขั้นตอนต่อไป

ขั้นตอนที่สาม คือ การเลือก Technology

จาก architecture มี 4 ส่วน ก็กำหนด technology ที่ใช้พัฒนาไปเลย เช่น

• Frontend ใช้ Vite, ReactJS, React router, Tailwind CSS, Fetch/Axios
• Backend ใช้ NodeJS, Express, cors, node-redis และ pg
• Database ใช้ PostgreSQL
• Caching ใช้ Redis

อย่างลืมกำหนด version ของ technology ต่าง ๆ ที่ใช้งานด้วย

สิ่งที่ห้ามลืมคือ การทดสอบระบบงาน จะทำอย่างไร
ทั้ง unit testing
ทั้ง API testing
ทั้ง UI testing
ทั้ง E2E testing
เพื่อช่วยให้กำหนดสิ่งที่จะใช้ทดสอบ
รวมทั้งระบบงานต้องพร้อมที่จะทดสอบด้วย (Testable system)

ขั้นตอนที่สี่ เริ่มพัฒนาระบบงานในแต่ละส่วน

บางคนอาจจะใช้ sub-agent เพื่อทำงานพร้อม ๆ กันได้
แต่สิ่งที่แนะนำคือ เรื่องพื้นฐาน ให้ทำทีละเรื่องก่อน
เป้าหมายคือ แบ่งเป็น feature แบ่งเป็นส่วน ๆ แยกกัน เช่น frontend และ backend
แล้วสั่งให้ทำทีเดียวพอ ต้องได้ผลตามที่ต้องการมากที่สุด

ก่อนที่จะใช้งาน AI Agent นั้น แนะนำให้ทำการสร้าง project ก่อน
ทั้ง frontend และ backend
รวมทั้งติดตั้ง library/depennency ต่าง ๆ ที่จะใช้งานไปเลย
หรือสร้าง project structure ให้เลย
หรือถ้าใครไม่อยากทำเอง แนะนำเขียน structure ด้วย MARKDOWN
จากนั้นใช้ touch-all สร้างให้ได้เลย

ถ้าทำได้จะดีมาก ๆ เพราะว่า มันจะเป็นรูปแบบพื้นฐานของระบบ
และแน่นอนว่า AI Agent จะทำการอ่านและจัดเก็บไว้ใน memory
ทำให้ไม่ต้องเดา
นั่นคือ การตีกรอบกว้าง ๆ ไว้ให้ เพื่อไม่ให้ออกนอกกรอบมากนัก
มันคือลดอาการหลอนนั่นเอง

ดังนั้น คนที่ใช้งาน AI Agent ก็ต้องรู้ในสิ่งที่ต้องการด้วยเสมอ

ขั้นตอนที่ 5 ได้เวลา coding ด้วย AI Agent แล้ว แต่เดี๋ยวก่อน !!

ต้องทำการเขียน Global instruction/rule ของทั้ง frontend และ backend ไปเลย
ประกอบไปด้วย

• Project description
• Technology stack
• Project structure
• Command line ที่ต้องใช้งาน ของการ compile, build, test เป็นต้น
• Do and Don’t ต่าง ๆ
• Constraint ต่าง ๆ

จากนั้นเขียน rule เฉพาะเจาะจงกับ file type ที่สร้างใน project เช่น

• Coding convention
• Do and Don’t ต่าง ๆ พร้อมตัวอย่าง code
• Reference ไปยัง web ต่าง ๆ (ระวังจำนวน token ที่ใช้งาน)

เตรียม Tool, MCP และ CLI ต่าง ๆ ให้พร้อมที่จะใช้งานในแต่ละส่วน
อย่าลืมว่า ติดตั้งใช้เท่าที่ต้องใช้เท่านั้น

ขั้นตอนที่หก เขียน spec ของ feature ที่จะสร้างกัน

ทั้ง frontend และ backend ให้เขียน spec ของ feature นั้น ๆ แยกกัน
เพื่อเป็นการกำหนดกรอบการทำงานของทั้งสองส่วน
และแน่นอนว่า ต้อง integrate หรือ ทำงานร่วมกันได้ เช่น

ฝั่ง backend ให้ทำการเขียน spec ดังนี้

• เขียนอธิบาย API spec ทั้ง request และ response ในรูปแบบต่าง ๆ (success/failure)
• เขียนอธิบาย flow การทำงานในรูปแบบ flow chart หรือ sequence diagram ในรูปแบบของ mermaid diagram หรือ text ก็ได้
• ออกแบบ database diagram พร้อม data test
• แนวทางในการทดสอบ API นั้น ๆ ว่าต้องทำอย่างไร
• เมื่อเรียบร้อยแล้วก็เริ่มสั่งให้ AI Agent สร้าง code ตาม spec ที่กำหนดขึ้นมา (Plan -> Act)

ฝั่ง frontend ให้ทำการเขียน spec ดังนี้

• ต้องทำการออกแบบ UX/UI ของ feature นั้น ๆ ก่อน ไม่ว่าจะเป็น Figma/Pencil/Paper
• หรือบางคนใช้การใช้พวก design frontend skill/plugin เข้ามาช่วย ก็ได้ทั้งหมด เพื่อให้ได้ UI ที่ต้องการ
• ถ้าเป็น Figma/Pencil/Paper แนะนำให้ทำการติดตั้ง MCP server ของแต่ละตัวได้เลย เพื่ออ่านข้อมูลมาเขียน code ผ่าน AI Agent ซึ่งสามารถสร้างตรง ๆ ได้เลย หรือ ให้ทำการสร้าง design system และ style guide ของ frontend ได้
• เช่นใน ReactJS ให้ทำการสร้าง global style หรือ component style เลยก็ได้
• มีทั้งแนวทาง Design to Code และ Code to Design
• แต่ในส่วยของ frontend นั้น จะเปลือง token มาก ๆ ต้องระมัดระวังกันหน่อย
• ถ้าต้องทำการดึงข้อมูลจาก backend ก็เขียน API spec ต่าง ๆ ด้วย รวมทั้ง flow การทำงาน และ ผลการทำงานทั้ง success/failure case เสมอ
• เมื่อเรียบร้อยแล้วก็เริ่มสั่งให้ AI Agent สร้าง code ตาม spec ที่กำหนดขึ้นมา (Plan -> Act)

จากนั้นทำการ validate และ ตรวจสอบการทำงาน (Human-in-the-Loop)
ทั้ง functional และ non-functional
รวมทั้งการเพิ่ม หรือ แก้ไข สิ่งต่าง ๆ ตามความต้องการ
จากนั้นก็ทำการ commit และ push ไปยัง repository
อย่าลืมทำการสรุป หรือ update เอกสาร หรือ knowledge ไว้ด้วย (Memory bank)
และเริ่ม feature ต่อไปอีกครั้ง

เป็นขั้นตอนพื้นฐานที่ไม่มีอะไรแปลกใหม่
แต่ถ้าทำได้ดี จะช่วยให้เราเดินไปข้างหน้าได้อย่างมั่นคง
ช่วยให้พัฒนาระบบแบบ iterative and incremental ได้แบบเป็นธรรมชาติมาก ๆ
รวมทั้งลดการใช้งาน token และให้เกิดประโยชน์สูงสุด

สุดท้าย สิ่งที่ควรปรับปรุงต่อไป เช่น

• ถ้ามีสิ่งที่ได้ออกมานั้น ไม่ตรงกับที่เราต้องการมาก ๆ แสดงว่า เป็นปัญหาที่เราแน่ ๆ ให้ทำการ revert หรือกลับไปยัง checkpoint ก่อนหน้า และทำการปรับปรุงใหม่อีกครั้ง อย่าพยายามถามตอบไปเรื่อย ๆ
• จัดการระบบ Memory ของ AI Agent ให้ดี ดังนั้นต้องเข้าใจการทำงานของสิ่งที่เราใช้งานก่อน (Memory layers system)
• ถ้า code based มีขนาดใหญ่ แนะนำให้แยก project จะดีกว่า หรือ ก็ควรทำ indexing project ไว้ก่อน เพื่อช่วยลดการ analyze code ทุก ๆ session ลงไป
• ในการทำงานถ้ารูปว่าต้องแก้ไขไฟล์ไหนบ้าง ก็ให้ระบุไปตรง ๆ เลย แบบนี้จะดีมาก ๆ
• ตีกรอบการทำงานให้ชัดเจน ก็จะได้ตามสิ่งที่ต้องการ แต่ถ้าความต้องการกว้างและไม่ชัดเจน ก็จะได้ผลอีกแบบ ถึงแม้ว่า AI Agent และ LLM Model จะเก่งก็ตาม
• Context ยาว ๆ อาจจะสิ้นเปลือง และ อาจจะลดประสิทธิภาพการทำงาน (Lost in the middle) แต่ model สมัยใหม่ก็เริ่มปรับให้ดีขึ้นอย่างมาก ถ้า context มีข้อมูลที่สำคัญจริง ๆ (Context Engineering)

ลองใช้งานดูครับ เป็นความรู้พื้นฐาน
จากคนที่ใช้งาน AI Agent แบบพื้นฐาน งู ๆ ปลา ๆ ครับ
ขอให้สนุกกับการ coding