เขียนโค้ด Vibe ด้วย Lovable AI และ Logto เพื่อสร้างแอพและจัดการ flow การเข้าสู่ระบบอย่างรวดเร็ว

จากเอเจนต์ทั่วไปไปจนถึงโคไพลอตเฉพาะด้าน นักพัฒนากำลังเห็นจุดเปลี่ยนสำคัญในวิธีสร้างซอฟต์แวร์ แต่ในบรรดาหมวดหมู่เอเจนต์ทั้งหมด มีประเภทหนึ่งที่โดดเด่นและเติบโตเร็วที่สุด: เอเจนต์เขียนโค้ด (coding agents)

เครื่องมืออย่าง Lovable, Cursor, Windsurf และ Replit กำลังเป็นที่กล่าวถึงเพราะสามารถแปลงภาษาธรรมชาติเป็นซอฟต์แวร์ใช้งานได้จริงทันที ไม่ต้องตั้งค่า ไม่ต้องมีโค้ดโครงสร้างเริ่มต้น มีแต่ผลงานล้วน ๆ

วันนี้มีคำใหม่เกิดขึ้น: Vibe Coding

ด้วยการบุกเบิกจาก Lovable, vibe coding คือวิธีใหม่ในการสร้างแอพด้วยการแชทกับ AI ในบทความนี้ เราจะอธิบายว่า vibe coding คืออะไร สำรวจว่า Lovable ทำงานอย่างไรในฐานะหนึ่งในเอเจนต์เขียนโค้ดชั้นนำ และเดินผ่านกระบวนการสร้างแอพ full-stack: พร้อมด้วย สมัครสมาชิก, เข้าสู่ระบบ, จัดการผู้ใช้และตัวตน ภายในไม่กี่นาที

Lovable AI คืออะไร?#

Lovable คือ แพลตฟอร์มพัฒนาแอพด้วยการแชท ที่ไอเดียของคุณกลายเป็นโค้ดใช้งานจริง, เค้าโครง และแม้แต่แอพที่โฮสต์ไว้ คุณไม่ต้องเขียนโค้ดแบบดั้งเดิม : แค่บรรยายสิ่งที่ต้องการ

"ฉันต้องการแดชบอร์ดง่าย ๆ ที่มีกราฟ 2 อัน และแถบข้าง"

แล้ว AI จะสร้างตัวอย่างสดพร้อมโค้ดที่แก้ไขได้ให้คุณภายในไม่กี่วินาที

เบื้องหลัง Lovable ใช้เฟรมเวิร์คสมัยใหม่อย่าง React และ Tailwind และให้คุณ export โปรเจ็คท์ หรือโฮสต์เอง หรือดีพลอยได้ทันที

ฟีเจอร์หลักของ Lovable AI มีอะไรบ้าง#

นี่คือตารางสรุป 9 ฟีเจอร์หลักของ Lovable:

ข้อดีหลักของ Lovable ในการพัฒนาแอพ#

Lovable ท้าทายสมมติฐานที่เคยมีใน workflow สำหรับนักพัฒนา:

• ไม่จำเป็นต้องเริ่มจาก VS Code ว่างเปล่า
• ไม่ต้องมี mockup จาก Figma ก่อนสร้าง layout
• ไม่ต้องรอ ticket ก่อนเริ่มโค้ด logic

Lovable มอบสภาพแวดล้อมแบบ ใช้ภาษามนุษย์เป็น UX หลัก ไม่ใช่แค่เขียนโค้ด แต่สำหรับสร้างทั้ง product

ข้อดีได้แก่:

• Prototyping: ไม่มี mockup คงที่อีกต่อไป—ทดสอบ UX จริงได้ในไม่กี่ชั่วโมง
• Onboarding: สมาชิกใหม่สำรวจโค้ดและฟีเจอร์ผ่านบทสนทนา
• เข้าถึงง่าย: ดีไซเนอร์/PM มีส่วนร่วมได้โดยไม่ต้องเขียนโค้ด

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

เราเรียนรู้อะไรจาก Lovable#

อินเทอร์เฟซคือ IDE ใหม่#

Lovable ชี้ให้เห็นว่า “เขียนโค้ด” ไม่จำเป็นต้องพิมพ์เสมอไป อาจหมายถึงสั่งผ่าน prompt, แก้ไขด้วยบทสนทนา, และวนซ้ำด้วยเจตนา

นี่เปิดโอกาส collaboration ที่หลากหลาย โดยเฉพาะในทีมเล็กหรือโปรเจ็คท์เดี่ยว

วนลูปเร็ว ดีกว่าสเปคสมบูรณ์#

เมื่อเราสามารถสร้าง ทดสอบ ปรับปรุง โดยไม่ต้องเปลี่ยนเครื่องมือหรือ set up boilerplate จะทำให้ iterate ไวขึ้น เปิดที่ให้ความคิดสร้างสรรค์มากขึ้น

dev ที่มีประสบการณ์เองก็ได้ประโยชน์จากการลด context-switch และลูป feedback ที่เร็วขึ้น

AI-native apps ต้องมีเครื่องมือที่เหมาะกับ AI#

เหมือนที่ GitHub Copilot อยู่ใน VS Code ได้เข้าท่า Lovable ก็ตรงสำหรับแอพแนว agent driven/prompt native รุ่นใหม่—ที่โครงสร้าง logic และ flow user ไม่ hardcode แต่กำหนดแบบ dynamic

ตัวอย่าง: สร้าง photo gallery app ใช้ Logto เป็น auth#

แค่ให้ prompt ง่าย ๆ เช่น "สร้างแอพ photo gallery" มันก็จะสร้างเว็บเบื้องต้นที่หน้าตาดีให้คุณทันที

ผสาน Logto Auth ใน Lovable#

จากนั้นถาม AI ให้ใช้ Logto สำหรับยืนยันตัวตน แม้ว่า Lovable ดูจะผูกกับ Supabase สำหรับ auth แต่ Supabase ไม่ใช่โซลูชั่น CIAM มืออาชีพ ในกรณีนี้ เลือกใช้ Logto—โปรเจ็คท์ open-source และ CIAM มืออาชีพ

ตามคำแนะนำ ต้องเตรียม:

1. ลิงก์ Logto endpoint
2. App ID

เนื่องจากเป็น React SPA จึงไม่ต้องการ app secret AI จัดการทุกอย่างให้อัตโนมัติ—ติดตั้ง Logto React SDK รุ่นล่าสุดพร้อมสร้าง component ที่จำเป็น

หา endpoint ได้จาก Logto Cloud หลังสร้างแอพ React ใหม่ ดูข้อมูลแอพแล้ว copy endpoint ไปใส่ใน Lovable จากนั้น Lovable อัปเดตโค้ดและ config ให้อัตโนมัติ

คุณต้องกรอก Redirect URI และ Post-Sign-out URL ของแอพด้วย

จุด tricky คือ: เนื่องจาก Lovable โฮสต์ environment พัฒนาใน cloud ไม่สามารถใช้ อะไรแบบ http://localhost:3000/callback กับ redirect URI ได้ ต้องใช้ URL จริงของโปรเจ็คท์ Lovable แล้วอัปเดตใน Logto Cloud console

ขั้นตอน:

1. เปิด Logto Cloud tenant
2. หาแอพของคุณให้เจอ
3. เปลี่ยน URL ดังนี้:

• Redirect URIs:

  https://preview--snap-show-gallery-time.lovable.app/callback

• Post Sign-out Redirect URIs:

  https://preview--snap-show-gallery-time.lovable.app/

หลัง chat ไม่กี่รอบ ตอนนี้เว็บถูกปกป้องแล้ว—เข้าเนื้อหาได้เฉพาะผู้ใช้ที่ sign in

โปรดทราบ เนื่องจาก coding agent แบบนี้แสดง preview เป็น iframe เวลาคลิกใน preview mode จะไม่เปิดหน้า sign-in ได้

ทดสอบ flow การเข้าสู่ระบบ#

เมื่อคลิก “Sign in” จะเปิดหน้าเข้าสู่ระบบ Logto ทดสอบ flow ได้เต็มที่—โดยค่าเริ่มต้น Logto ใช้ อีเมล + พาสเวิร์ด เป็นวิธีลงชื่อเข้าใช้ แค่ทำตามขั้นตอนยืนยันอีเมล แล้วเช็คผลใน Logto Console ดูว่าผู้ใช้ลงทะเบียนสำเร็จไหม

ตามภาพ ผู้ใช้ของคุณจะปรากฏใน Logto Cloud console แล้ว—แสดงว่า flow ยืนยันตัวตนทำงาน และผู้ใช้ลงทะเบียนอย่างปลอดภัยผ่านแอพ

ตอนนี้คุณมีแอพที่ใช้ได้จริง บูรณาการ flow การเข้าสู่ระบบเต็มที่—พร้อมจัดการ users ผ่าน Logto Cloud console ได้เลย

Logto อัปเดตใหม่ กำลังจะรองรับ auth integration ด้วย AI#

นี่เป็นเพียงตัวอย่างง่าย ๆ ขณะนี้ Logto กำลังพัฒนา MCP servers ที่รันใน IDE ของคุณ ให้คุณโต้ตอบกับ Logto Console และ Management API ได้—all โดยไม่ต้องออกจาก environment พัฒนา ฟีเจอร์นี้ จะทำให้คุณสามารถ:

1. สร้าง/จัดการผู้ใช้
2. ดู log
3. เซ็ตและจัดการ login flow
4. ออกแบบควบคุมสิทธิ์ (เช่น API resource, permission, role)
5. จัดการโปรแกรมและ resource ต่าง ๆ
6. อื่น ๆ อีกมาก

พลังร่วมกันระหว่าง AI และโครงสร้างพื้นฐานของ Logto ทำให้การเชื่อม auth ไม่ใช่ เรื่องยาก อีกต่อไป