มาลองเล่น Supabase ด้วย Next.js กัน

☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
   / @mikelopster  

ลองไมค์ สัปดาห์นี้ เราจะมาลองเล่น 1 ใน Technology Backend as a service ที่สามารถทำ Service Backend ที่อำนวยความสะดวกในการทำ Application อีกตัวหนึ่ง (ที่เก่งไม่แพ้ Firebase เลย แถมชื่อก็คล้ายๆกันด้วย 😆) คือ "Supabase" ครับ เราจะมาทำความรู้จัก Supabase พร้อมกันผ่าน Next.js กันครับ

โดยในหัวข้อนี้เราจะพูดถึง
1. แนะนำ Supabase ว่าคืออะไร
2. มาสร้าง Database และ Storage ผ่าน Supabase
3. ลองทำ Register และหน้าแสดงข้อมูล User ผ่าน Next.js
4. ความแตกต่างระหว่าง Supabase และ Firebase หากต้องเลือกสักตัว ควรพิจารณาอย่างไรดี

ส่วนตัวที่ลองเล่นมา คิดว่าเป็น 1 ใน Technology ที่มีความสามารถของ Database SQL แบบครบครันมาก คิดว่า Session ในอนาคตคงมีโอกาสหยิบมาใช้อีกแน่นอน ใครสนใจอยากเห็นตัวไหนของ Supabase เพิ่มเติม สามารถ comment ไว้ได้เลยนะครับ 😁

หัวข้อ
00:00 เริ่มต้น / ขอบคุณ​ผู้ติดตามทุกคนสำหรับ 10k subscriber
02:26 แนะนำ Supabase
06:31 คำแนะนำก่อนเริ่มดู code (เราจะหยิบ Next.js มาใช้กัน)
09:00 เริ่มสร้าง project supabase / database / storage
14:19 สร้าง project Next.js ขึ้นมาจาก template supabase
16:43 แนะนำ Sign In / Sign up supabase (จาก template)
22:47 เริ่มทำโครง html Register
27:01 สร้าง Server action register (สำหรับรับค่าจาก Form register)
29:43 ส่งข้อมูล register เข้า table user ใน supabase
33:20 อธิบาย Row Level Security (RLS) Policy และเพิ่ม Policy
37:12 เพิ่ม upload attachment
40:51 เพิ่ม Policy ให้ Storage / ทำ upload ให้เสร็จ
44:33 ดึง publicURL และ save ค่าลง table user
48:16 ผูก state กับ server action เพื่อ handle Error / Success case
52:12 เพิ่มหน้าดึงข้อมูล user / วางโครง Layout
55:49 เพิ่มดึง API table user ผ่านคำสั่ง supabase
59:54 เพิ่ม Search user
1:03:10 เพิ่ม Pagination
1:10:08 เพิ่มให้ Search ใช้งานร่วมกับ Pagination ได้
1:12:00 เพิ่มการกั้นสิทธิให้เฉพาะคน login เข้าหน้า user ได้
1:15:00 สรุปส่งท้ายเทียบกับ Firebase

สามารถอ่าน Blog เพิ่มเติมได้ที่
https://mikelopster.dev/posts/supabas...

ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page:   / mikelopster.dev   กันได้เลย

แปะพิกัดของที่ผมใช้
https://shope.ee/8A54c8cfkf ของที่ตั้งอยู่ด้านหลัง
https://shope.ee/6fI75UuLEM osmo pocket 3
https://shope.ee/4VDcVixCW9 ไมค์ shure
https://shope.ee/6pbXI6d5xG กล้องวงจรปิด

Enjoy ครับ 😘