พิมพ์ prompt เดียว
ได้แอปจริงทั้งตัว ด้วย Lovable & v0

ในเด็คนี้มีอะไรบ้าง

• Vibe Code App Builder คืออะไร — ต่างจาก Cursor/Claude Code ยังไง
• Lovable — คืออะไร เริ่มใช้ทีละขั้น พร้อมตาราง Free vs Pro
• v0 by Vercel — คืออะไร เริ่มใช้ทีละขั้น พร้อมตาราง Free vs Team
• Lovable vs v0 — เปรียบเทียบจุดแข็งจุดต่าง
• Use case จริง — งานแบบไหนควรใช้ตัวไหน
• Vibe Code Builder vs IDE-based Coding — เมื่อไหร่ควรใช้แบบไหน
• ข้อควรระวัง และสรุป

ทำไมเรียกว่า "Vibe Code"

• Vibe Code App Builder คือเครื่องมือที่รับ prompt ภาษาธรรมชาติ (หรือรูปภาพ/ดีไซน์) แล้วสร้าง แอปที่ใช้งานได้จริง ให้ทันที — มีหน้าตา UI, โครงสร้างโค้ด, และบางเจ้าครอบคลุมถึง backend/database
• ผู้ใช้เห็น live preview ทันทีในเบราว์เซอร์ แก้ไขต่อได้ด้วยการ "คุย" ต่อในแชต เช่น "เปลี่ยนสีปุ่มเป็นสีส้ม" "เพิ่มหน้า login"
• เครื่องมือกลุ่มนี้ตั้งใจให้ คนไม่เขียนโค้ดก็เริ่มได้ — ต่างจาก AI coding assistant ที่ยังต้องเปิดโปรเจกต์ในโปรแกรมเขียนโค้ดเอง
• ตัวอย่างที่ดังที่สุดตอนนี้คือ Lovable และ v0 by Vercel

ต่างจาก Cursor / Claude Code ยังไง

Lovable = AI Full-Stack App Builder

• Lovable (lovable.dev) สร้างแอปเว็บ full-stack จาก prompt เดียว — เขียนโค้ดฝั่งหน้าบ้าน (React) ให้ พร้อม live preview แบบเรียลไทม์
• เชื่อมกับ Supabase ได้ในตัว (ผ่านคำสั่งแชต) — ระบบสร้างตาราง Postgres, ผูก UI ให้อัตโนมัติ, ตั้ง auth (email/password, OAuth), ใช้ Supabase Storage สำหรับอัปโหลดไฟล์ และ deploy edge functions สำหรับ backend logic เช่น payment, ส่งอีเมล, เรียก API ภายนอก
• แก้ไขแอปต่อได้ทั้งแบบ คุยในแชต และ แก้โค้ดเองโดยตรง
• ซิงก์กับ GitHub ได้แบบสองทาง — แก้ใน Lovable แล้วพุชขึ้น GitHub หรือแก้ใน GitHub แล้วซิงก์กลับมาก็ได้ รองรับ branch/PR

Getting Started กับ Lovable

Lovable — แผนฟรี vs แผนเสียเงิน

มีแผน Enterprise แบบราคาต่อรองสำหรับองค์กรใหญ่ด้วย — เช็กแผนล่าสุดที่ lovable.dev ก่อนสมัครเสมอ เพราะราคา/โควตาปรับได้ตลอด

v0 = AI UI/App Generator จาก Vercel

• v0 (v0.dev / v0.app) คือ AI agent ของ Vercel ที่แปลง prompt ภาษาคนให้กลายเป็นโค้ด React/Next.js จริง ใช้ Tailwind และ shadcn/ui เป็นมาตรฐาน
• ทำงานแบบ agentic — ค้นเว็บเอง ตรวจสอบเว็บไซต์อ้างอิง แก้ error ให้เอง มี Design Mode ให้ปรับแต่ง UI แบบเห็นผลทันที
• ปี 2026 ขยายจาก "แค่สร้าง UI" ไปสู่การต่อ database (เช่น Snowflake, AWS) และระบบ auth (Clerk, NextAuth) ทำให้สร้างแอปที่ครบวงจรมากขึ้น
• ซิงก์กับ GitHub ได้ — import repo, ทำงานผ่าน branch/PR แล้ว deploy ขึ้น Vercel ได้ในคลิกเดียว พร้อม preview URL อัตโนมัติ

Getting Started กับ v0

v0 — แผนฟรี vs แผนเสียเงิน

หมายเหตุ: แผน Premium เดิมกำลังถูกยกเลิกสำหรับผู้ใช้ใหม่ — เช็กแผนล่าสุดที่ v0.dev ก่อนสมัครเสมอ

Lovable vs v0 เลือกใช้ตอนไหน

งานนี้คืออะไร ทำไมเหมาะกับ Lovable/v0

• ทำ MVP/prototype โชว์ลูกค้าเร็ว ๆ — งานนี้ต้องการต้นแบบที่ "คลิกได้จริง" ภายในไม่กี่ชั่วโมง เพื่อเอาไปคุยกับลูกค้า/นักลงทุน Lovable/v0 เหมาะเพราะพิมพ์ prompt ก็ได้ live preview ทันที ไม่ต้องรอทีม dev
• ทำ landing page แบบ full-stack มี database — งานนี้ต้องเก็บข้อมูล เช่น ฟอร์มสมัคร, waitlist, ข้อมูลลูกค้า Lovable เหมาะเพราะผูก Supabase (database + auth) ให้อัตโนมัติผ่านแชต ไม่ต้องตั้ง backend เอง
• ทำ internal tool เล็ก ๆ ให้ทีม — งานนี้ต้องการเครื่องมือใช้ภายในเร็ว ๆ เช่น dashboard ดูข้อมูล, ฟอร์มอนุมัติ ทั้ง Lovable และ v0 เหมาะเพราะสร้างได้โดยคนที่ไม่ใช่ dev ก็ทำเองได้ ประหยัดเวลาทีมวิศวกร
• ทำหน้า UI ต้นแบบก่อนให้ dev ต่อยอด — งานนี้ต้องการโค้ดที่ทีม dev เอาไปต่อได้จริง ไม่ใช่แค่ภาพ mockup v0 เหมาะเป็นพิเศษเพราะออกโค้ด React/Next.js มาตรฐาน + shadcn/ui ที่ทีมวิศวกร Vercel/Next.js อ่านและต่อยอดได้ทันที
• ทำแอปที่ต้องขึ้นระบบจริงเร็วโดยทีมเล็ก — งานนี้ไม่มีทีม dev เต็มรูปแบบ แต่ต้องได้แอปที่ publish ใช้งานได้จริง Lovable เหมาะเพราะครบวงจรตั้งแต่ UI ถึง deploy ในแพลตฟอร์มเดียว

เมื่อไหร่ควรใช้แบบไหน

สรุปเลือกใช้ยังไงดี

• Lovable — เลือกเมื่ออยากได้แอป full-stack ครบจบในที่เดียว มี database/auth ในตัวผ่าน Supabase
• v0 — เลือกเมื่ออยู่ในระบบนิเวศ Vercel/Next.js อยู่แล้ว หรืออยากได้ UI คุณภาพสูงส่งต่อทีม dev
• ทั้งคู่เหมาะกับ MVP, prototype, internal tool ที่ต้องการความเร็วมากกว่าความสมบูรณ์แบบ 100%
• ก่อนขึ้น production จริง ให้คนที่เข้าใจโค้ด รีวิวเสมอ และตรวจสอบเรื่อง vendor lock-in ก่อนผูกมัดระยะยาว

เรียนสดกับโค้ช BooAI BootCamp