🧠 จากปัญหาที่ต้องคิด SEO เอง… สู่ระบบอัจฉริยะที่คิดให้เราได้หมดในไม่กี่นาที ด้วย Vibe Coding

ย้อนกลับไปไม่กี่วันก่อน ผมต้องเตรียม SEO ให้กับเว็บหน้าใหม่ของลูกค้า ซึ่งต้องใช้ทั้ง Title, Meta Description และ Keywords ที่ “ดูดีและตรงกลุ่มเป้าหมาย” แต่ก็รู้กันอยู่… การคิดคำเหล่านี้ให้เวิร์กจริง มันไม่ได้ง่ายเลย

จนผมนึกขึ้นได้ว่า — ทำไมไม่ให้ AI ช่วย?

หลังจากนั้นผมจึงกลับไปที่ Project ของ Home Story Living ที่เป็นเว็บไซต์ขายบ้านสำเร็จรูป แล้วสร้างระบบเชื่อมต่อกับ OpenAI API ให้ AI ของ ChatGPT ช่วยทำ SEO Optimization ให้หน่อย ผมใช้เวลา 30 นาทีก็ทำระบบ SEO Optimization ให้ลูกค้าเสร็จ หลังจากนั้นก็ลองใช้งาน ปรากฏว่าบันทึกได้ไม่มีปัญหา ยกเว้นช่อง Keyword ที่ไม่สามารถบันทึกได้ และก็ไม่แสดงผล ซึ่งเกิดจาก Bug ของ Lovable.dev ผมจึงใช้เวลาเพื่อแก้ Bug โดยพิมพ์ Prompt ง่ายๆ และให้เค้าแก้ Code เฉพาะจุดให้อีก 5 นาที ก็สามารถบันทึกได้ครบทุก Fields

และวันนี้ผมเลยอยากมาแชร์ประสบการณ์ให้กับทุกคนที่เข้ามาอ่านและอยากรู้ว่า Lovable.dev จะทำเว็บแอปพลิเคชั่นที่ซับซ้อนได้หรอ เพราะเคยได้ยินมาว่า ถ้าเขียนโค้ดไม่เป็นก็พัง ก็เละ และไม่ปลอดภัย

ผมเองก็มีประสบการณ์ในการ Dev มากว่า 20 ปี และลงมือทดลองเองหมด ไม่ว่าจะเป็น Lovable.dev, Replit Agent, Bolt.new, Tempo Labs, Cursor, Windsurf ผมบอกได้เลยว่า ถ้าเราพอรู้โค้ด จะดีมากเพราะเราเข้าใจจะสั่งงานเค้าถูก

แต่หากเราไม่รู้หล่ะ จะพัฒนาได้หรือไม่ คำตอบคือ ได้ แต่ต้องเรียนรู้หลักการของ Database และโครงสร้างของภาษาไว้บ้าง แต่อย่าตกใจ ให้เข้าใจพอ เรียนลัดให้เข้าใจก็ 2 ชั่วโมงได้ ไม่ต้องเรียนโค้ด แค่เข้าใจโครงสร้างการทำงาน เพื่อมาสั่งงานได้ถูก

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

ทีนี้ถ้าเข้าใจบริบทนี้แล้ว ก็จะเรียนการใช้งาน Vibe Coding ได้อย่างมีความสุข สนุก รวดเร็ว และประหยัดเงินในกระเป๋าเราได้เป็นอย่างมาก

หลังจากผมสร้างระบบ SEO Optimization เสร็จ เราก็มาให้ Lovable.dev + OpenAI ให้ช่วยคิดแทน 🚀

ผมเปิด Lovable.dev แล้วสร้างฟอร์มง่าย ๆ โดยเริ่มจากให้กรอกข้อมูลอย่าง “ชื่อสินค้า”, “หมวดหมู่” และ “จุดเด่น” ไม่กี่วินาทีต่อมา… ✨ OpenAI ก็จัดให้ครบ พร้อมใช้งาน แถมเขียนออกมาได้ถูกหลัก SEO เป๊ะ ๆ

❌ แล้วถ้าเจอ Bug ล่ะ? จะโดน AI แก้โค้ดมั่ว ๆ ไหม?

ผมเคยได้ยินคนบ่นว่า “ใช้ Vib Coding ด้วย AI แล้ว มันไปแก้ของดีอยู่แล้ว” ผมเข้าใจเลยว่า เรื่องนี้หลายคนกลัว… แต่ Lovable.dev ไม่ใช่แบบนั้นครับ ถ้าเราเข้าใจวิธีการสร้าง Prompt และจังหว่ะในการสั่งการ

วิธีการใช้ Prompt ที่ปลอดภัย ในการให้เค้าแก้ไข

1. เปิด Edit Mode
2. คลิกไปที่จุดที่ผิด หรืออยากให้แก้
3. แล้วพิมพ์ Prompt แบบนี้ให้เค้าเข้าใจเรา

ที่หน้า แก้ไข บทความ ตรง keywords ที่เลือก พอใส่ keywords หรือให้ทาง AI สร้าง SEO แล้ว ให้เช็คหน่อยว่ามีการบันทึกข้อมูลหรือไม่ ถ้าไม่บันทึกต้องทำให้บันทึกได้ทั้ง เพิ่มบทความ และแก้ไข บทความ หาก บันทึกได้ แต่ไม่แสดง ให้ดึงมาแสดงด้วยครับ ลองตรวจสอบก่อนนะครับ อย่างเพิ่งแก้ และถ้าต้องแก้ ก็ห้ามยุ่งกับหน้าอื่น หรือ functionality, UI, UX อื่น ปรับแค่ส่วนนี้พอ คุณคิดว่าอย่างไร นำเสนอแผนมาครับ

หลังจากนั้น Lovable.dev จะทำการสร้างแผนในการแก้ไขให้กับเราดังนี้

ปัญหาที่พบ:

1. ฟิลด์ Keywords ใน SEO: ปัจจุบันใช้ seo.metaKeywords แต่ในฐานข้อมูลเก็บเป็น seo_keywords
2. การแปลงข้อมูล: ในโค้ดมีการจัดการ keywords ทั้งแบบ array และ string แต่อาจไม่ครบถ้วน
3. การบันทึกและแสดงผล: ต้องตรวจสอบว่าข้อมูลถูกส่งและรับอย่างถูกต้อง

แผนการแก้ไข:

• ดูว่า form submission ส่งข้อมูล keywords ไปยัง API อย่างถูกต้องหรือไม่
• ตรวจสอบการแปลงข้อมูลใน articleService.ts ตรง create/update functions
• ดูว่าการ populate form เมื่อแก้ไขบทความ แสดง keywords ถูกต้องหรือไม่
• ตรวจสอบการแปลงข้อมูลจาก database มาแสดงใน form
• แก้ไขการส่งข้อมูล keywords ใน form submission
• แก้ไขการแสดงผล keywords เมื่อ load ข้อมูลบทความ
• ปรับการจัดการ AI SEO generation ให้ keywords บันทึกและแสดงถูกต้อง

ขั้นตอนการแก้ไข:

1. แก้ไขฟังก์ชัน onSubmit ให้จัดการ keywords อย่างถูกต้อง
2. แก้ไข useEffect ที่ populate form data ให้แสดง keywords ถูกต้อง
3. แก้ไขฟังก์ชัน handleApplySeo ให้ set keywords อย่างถูกต้อง
4. ตรวจสอบ articleService.ts ในส่วน create/update ให้จัดการ keywords ถูกต้อง

สิ่งที่ไม่เปลี่ยนแปลง:

• UI/UX ไม่เปลี่ยนแปลง
• หน้าอื่นๆ ไม่กระทบ
• Functionality อื่นๆ ยังทำงานเดิม
• แก้เฉพาะส่วนการบันทึกและแสดงผล keywords

ผลลัพธ์:

• Keywords บันทึกได้ทั้งเพิ่มและแก้ไขบทความ
• Keywords แสดงผลถูกต้องเมื่อแก้ไขบทความ
• AI SEO Generator สามารถ set keywords ได้อย่างถูกต้อง
• ไม่กระทบ UI/UX หรือ functionality อื่น

แล้วให้เราคลิก Implement the plan หรือการให้เริ่มจัดการให้

เราจะเห็นว่า จะมีการวางแผนและทวนจุดที่อะไรแก้ไข อะไรแก้ไม่ได้ตลอด เพื่อไม่ให้เค้าแก้มั่ว เลยไปทำของเก่าพังด้วย และถ้ายังแก้ไม่ได้ ก็เขียน Prompt และชี้จุดให้เค้าแก้ใหม่ ส่วนใหญ่ก็ 1-2 ครั้งก็จะสามารถแก้ปัญหาได้แล้ว

สำหรับ EP. หน้าจะมาลงรายละเอียดในจุดอื่นๆกันต่อครับ