Lovable: ผสานรวมแบ็กเอนด์ด้วย Supabase

Supabase มอบแบ็กเอนด์ที่มีการจัดการอย่างสมบูรณ์ให้กับแอป Lovable ของคุณ หากไม่มี Supabase Lovable ก็ยังสร้าง UI ให้คุณได้ แต่คุณจะไม่มีที่จัดเก็บข้อมูลถาวรหรือจัดการผู้ใช้แบบพร้อมใช้งานทันที เมื่อเชื่อมต่อ Supabase แล้ว Lovable สามารถสร้างบัญชีผู้ใช้ (การยืนยันตัวตน) จัดเก็บและดึงข้อมูลในฐานข้อมูล อัปโหลดไฟล์ รันโค้ดฝั่งเซิร์ฟเวอร์ และอื่น ๆ ได้โดยอัตโนมัติทั้งหมด โดยสรุปแล้ว Supabase จัดเตรียมฐานข้อมูลและเซิร์ฟเวอร์ที่อยู่เบื้องหลังแอปของคุณ ส่วน Lovable ช่วยให้คุณควบคุมผ่านพรอมต์

ใช่ Lovable และ Supabase เป็นสองแพลตฟอร์มที่แยกจากกัน คุณจะต้องมีบัญชี Supabase (สำหรับโฮสต์ฐานข้อมูลของคุณ) เพิ่มเติมจากบัญชี Lovable ข่าวดีก็คือทั้งสองมีแพ็กเกจฟรี คุณจึงเริ่มต้นใช้งานได้โดยไม่มีค่าใช้จ่าย เพียงจำไว้ว่าหากภายหลังคุณอัปเกรดเพื่อเพิ่มการใช้งานหรือฟีเจอร์ คุณจะต้องจัดการการเรียกเก็บเงินของแต่ละบริการแยกกัน

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

ได้แน่นอน เมื่อคุณใช้ Lovable + Supabase ข้อมูลของคุณจะถูกเก็บไว้ในฐานข้อมูลของ Supabase และ Supabase ยังมี RESTful API ที่สร้างขึ้นโดยอัตโนมัติสำหรับตารางของคุณ (รวมถึงไลบรารีไคลเอนต์) นั่นหมายความว่าคุณสามารถใช้เครื่องมืออย่าง Zapier, Make.com หรือบริการอื่นๆ เพื่อโต้ตอบกับข้อมูลแบ็กเอนด์ของแอปคุณผ่านคำขอ HTTP ได้ ตัวอย่างเช่น Zapier สามารถดึงหรือเพิ่มข้อมูลลงในตาราง Supabase ของแอปคุณได้ นอกจากนี้ คุณยังสามารถสร้าง API endpoint แบบกำหนดเองโดยใช้ Supabase Edge Functions (ซึ่ง Lovable ช่วยสร้างได้) เพื่อกระตุ้นเวิร์กโฟลว์ที่ซับซ้อนมากขึ้น สรุปคือ การเชื่อมต่อกับบริการระบบอัตโนมัติของบุคคลที่สามนั้นทำได้ เพียงแต่อาจต้องตั้งค่า API key หรือ webhook ของ Supabase เพิ่มเติมเล็กน้อย

Supabase สร้างขึ้นบน PostgreSQL ซึ่งสามารถรองรับข้อมูลปริมาณมากและทราฟฟิกสูงได้ ตั้งแต่เริ่มต้น ฐานข้อมูลฟรีของคุณก็รองรับปริมาณงานได้พอสมควร (ข้อมูลหลายล้านแถว การเชื่อมต่อหลายรายการ) เมื่อความต้องการของคุณเพิ่มขึ้น คุณสามารถอัปเกรดแพ็กเกจ Supabase เพื่อเพิ่มพื้นที่จัดเก็บ ปริมาณการรับส่งข้อมูล และฟีเจอร์ต่างๆ ได้ แอปสำหรับใช้งานจริงจำนวนมากทำงานบน Supabase ทั้งหมด คุณจึงวางใจได้ เพียงคำนึงถึงขีดจำกัดการใช้งานของแพ็กเกจฟรี (ซึ่ง Supabase ระบุไว้บนเว็บไซต์ของพวกเขา) และวางแผนขยายระบบหากคุณใกล้ถึงขีดจำกัดเหล่านั้น

Supabase มีการสมัครรับข้อมูลแบบเรียลไทม์ในตัวบนฐานข้อมูลของคุณ นั่นหมายความว่าแอปของคุณสามารถคอยตรวจจับการเปลี่ยนแปลง (การเพิ่ม การแก้ไข การลบ) บนตารางที่ระบุและตอบสนองได้ทันที ในการใช้ประโยชน์จากสิ่งนี้ คุณเพียงออกแบบฟีเจอร์แอป Lovable ตามปกติ (เช่น ห้องแชทที่บันทึกข้อความลงในตาราง messages) Lovable รู้เกี่ยวกับความสามารถแบบเรียลไทม์ของ Supabase จึงสามารถตั้งค่าฝั่งหน้าบ้านให้สมัครรับการเปลี่ยนแปลงของตารางนั้นได้ ในทางปฏิบัติ หลังจากที่คุณสร้างตารางสำหรับข้อความแชทแล้ว คุณสามารถสั่ง Lovable ให้ “เปิดใช้งานการอัปเดตแบบเรียลไทม์สำหรับแชท” และมันจะใช้ API เรียลไทม์ของ Supabase เบื้องหลังให้เอง จากนั้นผู้ใช้จะเห็นข้อความใหม่ปรากฏขึ้นแบบสดๆ โดยไม่ต้องรีเฟรช วิธีนี้ใช้ได้กับทุกสถานการณ์ที่การอัปเดตแบบสดมีประโยชน์ (ความคิดเห็น การแจ้งเตือน แดชบอร์ด ฯลฯ)

ในแพ็กเกจฟรี Supabase จำกัดขนาดการอัปโหลดไฟล์แต่ละไฟล์ไว้ที่ 50MB ซึ่งครอบคลุมการใช้งานส่วนใหญ่ เช่น รูปภาพ เสียง หรือวิดีโอสั้น หากคุณต้องการจัดการไฟล์ขนาดใหญ่กว่านี้ (เช่น วิดีโอความยาวมากหรือชุดข้อมูลขนาดใหญ่) การอัปเกรดเป็นแพ็กเกจแบบเสียเงินจะช่วยให้อัปโหลดไฟล์ขนาดใหญ่ขึ้นและรองรับการอัปโหลดต่อจากที่ค้างไว้ได้ นอกจากนี้ โปรดทราบว่ามีโควต้าพื้นที่จัดเก็บโดยรวมต่อโปรเจกต์ (เช่น จำนวน GB ทั้งหมดที่คุณจัดเก็บได้) ซึ่งจะเพิ่มขึ้นตามแพ็กเกจที่สูงขึ้น

Lovable ตั้งค่าการยืนยันตัวตนให้โดยอัตโนมัติ แต่คุณอาจต้อง: ไปที่แดชบอร์ด Supabase > การยืนยันตัวตน เปิดใช้งานการลงชื่อเข้าใช้/สมัครสมาชิกด้วยอีเมล ปิดการยืนยันอีเมลเพื่อให้ทดสอบในเครื่องได้ง่ายขึ้น

ได้ คุณทำได้ คุณอาจสร้างแอปฝั่งหน้าบ้านหลายตัวใน Lovable ที่เชื่อมต่อกับโปรเจกต์ Supabase เดียวกันทั้งหมด (และจึงใช้ฐานข้อมูลและการยืนยันตัวตนร่วมกัน) วิธีนี้เป็นขั้นสูง แต่ทำได้ ตัวอย่างเช่น แอปหลักและแดชบอร์ดผู้ดูแลระบบเป็นโปรเจกต์ Lovable แยกกันที่ใช้ฐานข้อมูลร่วมกันหนึ่งฐาน เมื่อเชื่อมต่อ Supabase ในแต่ละโปรเจกต์ เพียงเลือกโปรเจกต์ Supabase เดียวกัน โปรดจำไว้ว่าแอปทั้งหมดเหล่านั้นจะอ่าน/เขียนข้อมูลชุดเดียวกัน ดังนั้นจึงควรออกแบบให้สอดคล้องกัน

ในขณะนี้ แต่ละโปรเจกต์ Lovable จะเชื่อมต่อกับโปรเจกต์ Supabase หนึ่งโปรเจกต์ และ Lovable ยังไม่มีโหมดทดสอบก่อนใช้งานจริงในตัว หากคุณต้องการพื้นที่ปลอดภัยสำหรับการทดลอง Supabase มีฟีเจอร์ที่เรียกว่า Branching ซึ่งให้คุณสร้างสำเนาชั่วคราวของฐานข้อมูล (เหมือนกิ่ง/สาขาของ Git) เพื่อทดสอบการเปลี่ยนแปลง คุณสามารถเชื่อมต่อโปรเจกต์ Lovable แยกต่างหากกับกิ่ง/สาขาหรือสำเนาของฐานข้อมูลเพื่อใช้ทดสอบได้ โดยทั่วไปแล้ว สำหรับโปรเจกต์ที่จริงจัง คุณควรระมัดระวังในการเปลี่ยนแปลงสคีมาบนแอปที่ใช้งานจริง อาจสร้างข้อมูลสำรองหรือใช้การแยกสาขา แล้วค่อยรวมการเปลี่ยนแปลงเมื่อพร้อม การเชื่อมต่อของ Lovable กำลังพัฒนาอย่างต่อเนื่อง ดังนั้นการอัปเดตในอนาคตอาจนำเสนอขั้นตอนการทำงานสำหรับการทดสอบก่อนใช้งานจริงที่ราบรื่นยิ่งขึ้น

ได้ อินเทอร์เฟซเว็บของ Supabase มี AI SQL Assistant ที่สามารถสร้างคำสั่ง SQL จากภาษาธรรมชาติได้ ดังนั้นหากคุณต้องการคิวรีที่ซับซ้อนหรือไม่ถนัดในการเขียน SQL คุณสามารถลองใช้เครื่องมือนั้นในตัวแก้ไข SQL ของ Supabase ได้ ในฝั่งของ Lovable คุณมักไม่จำเป็นต้องเขียน SQL ด้วยมือเลย เพราะ AI จะจัดการการสร้างสคีมาและคิวรีส่วนใหญ่ให้คุณ แต่ถ้าคุณเป็นผู้ใช้ระดับสูงและต้องการทำอะไรแบบกำหนดเอง คุณสามารถใช้การเชื่อมต่อ GitHub ของ Lovable เพื่อตรวจสอบหรือแก้ไขโค้ด หรือรัน SQL ดิบ ๆ บนฐานข้อมูลได้ตามต้องการเสมอ

การชำระเงินจัดการผ่านการเชื่อมต่อต่าง ๆ เช่น Stripe ซึ่งคุณสามารถใช้งานร่วมกับ Supabase Edge Functions ได้ ตัวอย่างเช่น คุณอาจสั่ง Lovable ว่า “เพิ่มปุ่มชำระเงินและประมวลผลการชำระเงินด้วย Stripe” จากนั้น Lovable จะสร้าง Edge Function ที่ติดต่อกับ API ของ Stripe (โดยใช้คีย์ลับของ Stripe ที่เก็บไว้เป็นข้อมูลลับ) และอาจเก็บรายละเอียดธุรกรรมไว้ในฐานข้อมูล Supabase ของคุณ ส่วน UI ก็จะถูกอัปเดตให้มีปุ่มชำระเงิน โดยสรุปแล้ว Supabase จัดเตรียมสภาพแวดล้อม (Edge Functions, ฐานข้อมูล) เพื่อใช้ทำระบบชำระเงิน และ Lovable สามารถสร้างโครงโค้ดให้คุณได้ สำหรับรายละเอียดเพิ่มเติม คุณยังสามารถดูคู่มือการผสาน Stripe และการชำระเงินในเอกสารของ Lovable ซึ่งครอบคลุมการตั้งค่า Stripe โดยเฉพาะ