ทำไมแอปลืมทุกอย่าง?

คุณน่าจะเคยเจอจังหวะนี้มาแล้ว

เพิ่มข้อมูลในแอปเรียบร้อย ทุกอย่างดูโอเค แต่พอรีเฟรชหน้า หรือเปิดใหม่อีกที ข้อมูลหายหมด เหมือนแอปจำอะไรไม่ได้เลย

มันไม่ได้พัง แค่มันยังไม่มีที่จำ

จุดนี้ทำให้หลายคนคิดว่าแอปตัวเองมีปัญหา

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

ลองนึกภาพแบบนี้

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

Database (ฐานข้อมูล — ที่เก็บข้อมูลถาวร) คือสมุดโน้ตอีกแบบหนึ่ง เขียนแล้วมันยังอยู่ แม้คุณจะปิดหน้าจอ รีเฟรช หรือกลับมาใหม่ทีหลัง

ถ้าจะเทียบอีกแบบ มันเหมือน spreadsheet ที่ยังไม่ได้กด save

ถ้าคุณเคยพิมพ์อะไรลง spreadsheet แล้วปิดหน้าต่างก่อนบันทึก ข้อมูลก็จะหาย

แอปของคุณตอนนี้ก็คล้ายกัน มันแสดงข้อมูลได้ แต่ยังไม่ได้มีที่ที่เอาไว้เก็บข้อมูลให้กลับมาอ่านใหม่ได้จริงๆ

พอคิดแบบนี้ คุณจะเห็นเลยว่า ปัญหาไม่ได้อยู่ที่หน้าตาแอปหรือปุ่มพัง แต่คือแอปยังไม่มี “ไฟล์เก็บข้อมูล” ของมันเอง

Supabase คืออะไร และมาเกี่ยวอะไรตรงนี้

Supabase (เครื่องมือฐานข้อมูลฟรีที่ Lovable ใช้) คือบริการที่จะทำหน้าที่เป็นที่เก็บข้อมูลให้แอปของคุณ

ถ้า Lovable คือคนช่วยสร้างหน้าตาและฟังก์ชันของแอป Supabase ก็คือที่เก็บข้อมูลจริงๆ ที่อยู่ข้างหลัง

ข้อดีคือ Lovable รู้จัก Supabase อยู่แล้ว คุณไม่ต้องไปเรียน SQL ไม่ต้องตั้ง server เอง และไม่ต้องเขียน backend เองเพื่อเริ่มต้น

สิ่งที่คุณจะทำในบทนี้มีแค่ 2 อย่าง:

1. สร้างบัญชีและ project ใน Supabase
2. เชื่อม Supabase เข้ากับโปรเจกต์ใน Lovable

แค่นั้นก่อน เรายังไม่รีบสั่งให้มันจำข้อมูลในบทนี้

ลงมือทำ — สร้าง project ใน Supabase

ขั้นตอนที่ 1 — สมัครหรือเข้าสู่ระบบ

1. เปิดเบราว์เซอร์แล้วไปที่ supabase.com
2. สมัครบัญชีใหม่ หรือเข้าสู่ระบบถ้ามีอยู่แล้ว
3. เมื่อเข้ามาแล้ว ให้มองหาปุ่มสร้าง project ใหม่

ถ้าคุณไม่เคยใช้มาก่อน ไม่ต้องพยายามทำความเข้าใจทุกเมนูในหน้า Supabase ตอนนี้

เป้าหมายของคุณในบทนี้ไม่ใช่เรียน Supabase ทั้งระบบ แต่คือมี project ฐานข้อมูลว่างๆ รอไว้ให้แอปเชื่อมต่อได้

ขั้นตอนที่ 2 — สร้าง project แรก

1. กดสร้าง project ใหม่
2. เลือก organization ถ้าระบบถาม
3. ตั้งชื่อ project ให้จำง่าย เช่น expense-tracker
4. ตั้งรหัสผ่านของ database ตามที่ระบบขอ แล้วเก็บไว้ดีๆ
5. รอให้ Supabase สร้าง project ให้เสร็จ

ตรงนี้อาจใช้เวลาหลายนาที อย่าเพิ่งตกใจถ้ามันไม่เสร็จทันที

ลงมือทำ — เชื่อม Supabase เข้ากับ Lovable

ขั้นตอนที่ 1 — กลับไปที่โปรเจกต์ใน Lovable

1. เปิดโปรเจกต์ของคุณใน Lovable
2. มองหาเมนูหรือส่วนที่เกี่ยวกับ Supabase หรือ Integrations
3. กดปุ่มเชื่อมต่อ Supabase

จาก docs ตอนนี้ เส้นทางหลักคือเข้าไปที่ project settings แล้วมองหาแท็บ Supabase ใต้ส่วน integrations ถ้า UI เปลี่ยนเล็กน้อยในอนาคต ให้มองหาคำว่า Supabase หรือ Database เป็นหลัก

ขั้นตอนที่ 2 — อนุญาตการเชื่อมต่อ

1. Lovable จะพาคุณไปล็อกอินหรือยืนยันบัญชี Supabase
2. อนุญาตให้ Lovable เข้าถึงบัญชีหรือ project ของคุณ
3. เลือก project ที่คุณเพิ่งสร้างไว้

ถ้าคุณมีหลาย project ให้เลือกอันที่ตั้งชื่อไว้สำหรับแอปนี้โดยตรง จะได้ไม่สับสนทีหลัง

ขั้นตอนที่ 3 — รอให้ระบบคอนเฟิร์ม

หลังจากเลือก project แล้ว Lovable จะจัดการเชื่อมต่อให้เอง

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

Prompt ที่ส่งได้ตอนนี้

บทนี้ยังไม่ใช่บทที่ทำให้ข้อมูลถูกบันทึกจริง แต่ถ้าคุณอยากบอก AI ให้รู้ว่าบทถัดไปเราจะเริ่มทำเรื่องนี้แล้ว ใช้ prompt สั้นๆ แบบนี้ได้

ฉันเชื่อม Supabase กับโปรเจกต์นี้แล้ว
บทถัดไปฉันจะทำให้แอปเก็บข้อมูลค่าใช้จ่ายจริงและไม่หายเมื่อรีเฟรช
ตอนนี้ยังไม่ต้องเปลี่ยน design หรือฟังก์ชันอื่นที่มีอยู่แล้ว

prompt นี้ไม่ได้ทำให้แอปจำข้อมูลทันที

มันแค่ช่วยย้ำบริบทให้ AI รู้ว่าโปรเจกต์นี้พร้อมสำหรับขั้นต่อไปแล้ว

เช็กให้ชัวร์ ว่าตอนนี้คุณมีอะไรเพิ่มเข้ามาแล้ว

ก่อนหน้านี้ แอปของคุณเหมือนหน้าจอที่ใช้งานได้ แต่ยังไม่มีสมุดจดของมันเอง

ตอนนี้คุณเพิ่งเพิ่มสิ่งสำคัญชิ้นหนึ่งเข้าไป นั่นคือที่ที่แอปจะใช้เก็บข้อมูลจริงในบทต่อไป

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

สำหรับแอปของคุณเอง

ถึงเราจะใช้ตัวอย่าง expense tracker ต่อในคอร์สนี้ หลักเดียวกันใช้กับแอปของคุณได้ทุกแบบ

ไม่ว่าคุณจะทำแอปจดโน้ต แอปติดตามงาน แอปจองคิว หรือแอปบันทึกอะไรบางอย่าง คำถามคือเหมือนกันหมด: ถ้าเปิดแอปพรุ่งนี้ อะไรที่ควรยังอยู่?

ถ้าคำตอบคือมี นั่นแปลว่าแอปของคุณต้องมี database เหมือนกัน

คุณเพิ่งทำอะไรสำเร็จไปแล้วบ้าง

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

บทต่อไป เราจะเข้าสู่ช่วงที่สนุกที่สุดของคอร์สนี้: บอก AI ว่าแอปต้องจำอะไร แล้วลองเพิ่มข้อมูลจริง รีเฟรชหน้า แล้วเห็นว่ามันยังอยู่ตรงนั้นเหมือนเดิม