Videos → Supabase Real-world Production Example

Event supabase
Speaker

Egor Gorbachev

Description

Learn how Egor Gorbachev, a full-stack developer, known for his contributions to popular open-source projects such as MobX, leverages Supabase to build and scale a real-world application. This talk goes beyond theory, offering practical insights into using Supabase's features for database schema design, SQL query optimization, file storage, and performance tuning. Discover how Supabase can streamline your development process and empower you to build and manage your projects efficiently, even as a solo developer. See how this developer built a spaced repetition learning application with Supabase, handling thousands of daily requests and active users. Gain valuable tips and techniques for maximizing the potential of Supabase in your own projects.

Chapters

  • Introduction and the Power of Building Your Own Projects 0:00
  • The Forgetting Curve and the Spaced Repetition App 0:44
  • Building with Supabase: A Real-World Example 1:23
  • Supabase Dashboard and Project Usage Statistics 1:40
  • Understanding the Forgetting Curve and Spaced Repetition 2:07
  • Building the Spaced Repetition App with Supabase 3:27
  • Creating Database Schema with Supabase's User-Friendly Interface 4:07
  • Using the Supabase SDK and Automatic Type Generation 5:09
  • The Power of SQL and Relational Data in Supabase 6:56
  • Leveraging AI for SQL Query Generation within Supabase 8:00
  • Storing Files with Supabase Storage 10:01
  • Optimizing Your Supabase Database with Indexes 10:54
  • Understanding Index Performance Tradeoffs 12:17
  • Identifying Index Needs with PostgreSQL Extensions 13:01
  • Summary of Key Supabase Features and Benefits 13:50

Transcript

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

Introduction and the Power of Building Your Own Projects0:00

ขอบคุณมากครับทุกคน ผมดีใจมากที่ได้มาอยู่ที่นี่ วันนี้ผมอยากจะมาพูดคุยเกี่ยวกับการที่ผมใช้ Supabase ในโปรเจกต์ จริงๆ ไม่ใช่แค่ทฤษฎี

แต่เราจะมาพูดถึงการใช้งานจริง ผมเป็น full stack developer ทำงานส่วนใหญ่เกี่ยวกับ CRM และ AI systems ให้กับบริษัทใน UK และ Israel และผมก็ contribute โอเพ่นซอร์สเยอะมาก ยกตัวอย่างเช่น มี front-end library ที่ค่อนข้างเป็นที่นิยมบน GitHub มี 27,000 ดาวบน GitHub และมีคนดาวน์โหลดมากกว่า 6 ล้านครั้งต่อเดือน และคุณสามารถหาผมเจอในรายชื่อ top contributors

The Forgetting Curve and the Spaced Repetition App0:44

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

มันจะทำให้คุณเห็นอะไรที่มากกว่าโค้ด เพื่อทำความเข้าใจความต้องการทางธุรกิจได้ดีขึ้น และผมเชื่อว่า Supabase เป็นแพลตฟอร์มที่ดีมากสำหรับสิ่งนั้น เพราะมันสามารถแทนที่ทีม back-end engineers DevOps engineers และ database engineers ได้ คุณสามารถมีทุกอย่างในแพลตฟอร์มเดียว และรันโปรเจกต์

Building with Supabase: A Real-World Example1:23

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

Supabase Dashboard and Project Usage Statistics1:40

เพื่อให้คุณเข้าใจพื้นฐาน ตอนนี้

Supabase dashboard แสดงให้เห็นว่ามีประมาณ 10,000 database

requests ต่อวัน และมีประมาณ 6,000 monthly active users ดังนั้นคุณจะเข้าใจได้ว่าเป็นโปรเจกต์ที่ถูกใช้งาน โดยผู้ใช้จริง และเรามาพูดถึงโปรเจกต์

Understanding the Forgetting Curve and Spaced Repetition2:07

คร่าวๆ ก่อน คุณรู้ไหมว่า 60% ของข้อมูลที่เราได้รับ จะถูกลืมภายในหนึ่งชั่วโมง และในหนึ่งสัปดาห์ เราจะจำมันได้เพียงแค่ 10% เท่านั้น กฎนี้ถูกค้นพบโดยนักวิทยาศาสตร์ชาวเยอรมัน Hermann Ebbinghaus จริงๆ แล้วมันก็ค่อนข้างดี เพราะ เราไม่จำเป็นต้องเก็บทุกอย่างที่เกิดขึ้นกับเราไว้ในสมอง แต่ในกรณีที่คุณเรียนภาษา ทฤษฎีดนตรี หรือประวัติศาสตร์ คุณ ต้องการให้ข้อมูลที่คุณเรียนรู้คงอยู่ในสมองของคุณ เพื่อให้บรรลุเป้าหมายนั้น คุณต้องทบทวนความจำ และคุณไม่ จำเป็นต้องทบทวนความจำเหล่านั้นทุกวัน แต่คุณสามารถใช้

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

จดจำทุกอย่างได้อย่างมีประสิทธิภาพ และผมสร้างแอปพลิเคชัน

Building the Spaced Repetition App with Supabase3:27

โดยอิงตามพื้นฐานนี้ ตัวอย่างง่ายๆ คุณเรียนภาษาอังกฤษ

และคุณต้องการจำวลี “get ahead” คุณเพิ่มการ์ดที่มีข้อมูลนี้ และถ้าคุณตอบถูก แอปจะกำหนดเวลา

ให้ทบทวนคำนี้ในหนึ่งวัน สามวัน หกวัน ฯลฯ แต่ถ้าคุณทบทวนไม่สำเร็จ คุณจำไม่ได้ ช่วงเวลาจะสั้นลง และคุณจะได้รับ

การแจ้งเตือนอัจฉริยะ ทั้งหมดนี้สร้างขึ้นโดยใช้ Supabase

Creating Database Schema with Supabase's User-Friendly Interface4:07

และมันเริ่มต้นอย่างไร ก่อนอื่นคุณต้องสร้าง ตารางจำนวนมาก และ Supabase มีวิธีที่

ใช้งานง่ายที่สุดในการสร้าง database schema คุณเพียงแค่ใช้ GUI ในการสร้างตารางทั้งหมดของคุณ ตัวอย่างเช่น ในกรณีของผม ผมมีตาราง สำหรับ users, แต่ละ user มีหลาย decks, deck ก็เหมือนกลุ่มของการ์ด จากนั้นแต่ละ deck มีการ์ดจำนวนมาก และแต่ละการ์ดมี review จำนวนมาก ดังนั้นการ์ดเดียวกันสามารถนำกลับมาใช้ใหม่ได้หลายครั้งโดย user เดียวกัน หรือโดย user คนอื่น และเมื่อคุณเสร็จสิ้น คุณพร้อมที่จะ export มันไปยัง database จริง ที่สามารถเข้าถึงได้ทางอินเทอร์เน็ต คุณเพียงแค่สร้างบางอย่างบน อินเทอร์เน็ต จากนั้น Supabase จะช่วยให้คุณแปลงเป็น database ที่คุณสามารถใช้ในโค้ดของคุณที่สามารถเข้าถึงได้แบบสาธารณะ

Using the Supabase SDK and Automatic Type Generation5:09

และวิธีการใช้งาน คุณมี SDK พื้นฐาน

ผมจะแสดงตัวอย่างใน JavaScript แต่คุณสามารถใช้ ภาษาใดก็ได้ที่คุณต้องการ และที่นี่เราแค่ต้องเข้าถึง Supabase เราระบุตาราง จากนั้น การดำเนินการ ถ้าคุณต้องการ query บางอย่าง หรือสร้าง record ใหม่ เราระบุฟิลด์ทั้งหมด จากนั้นเราระบุสิ่งที่ต้องการเลือก

ฟีเจอร์ที่ดีจริงๆ ที่ผมชอบคือ Supabase ช่วยให้คุณ สร้าง type ทั้งหมดใน DB คุณให้ ดังนั้นคุณไม่จำเป็นต้อง

เขียน type ให้ตารางและฟิลด์ทั้งหมดในโค้ดของคุณด้วยตนเอง คุณเพียงแค่รันคำสั่ง supabase คำสั่งเดียว และคุณจะได้รับ โครงสร้างทั้งหมดนี้ในโค้ดของคุณ ดังนั้นในกรณีของผม สำหรับ แอปพลิเคชันที่มี users จำนวนมาก Supabase สร้างโค้ดให้ผมประมาณ 2,000 บรรทัด และมันจะอัปเดตโดยอัตโนมัติ สมมติว่าผมตัดสินใจลบฟิลด์บางฟิลด์ หรือเปลี่ยนชื่อฟิลด์บางฟิลด์ เมื่อผมทำสิ่งนี้ใน database ผมสามารถรันคำสั่งได้ และฟิลด์เหล่านี้จะถูกลบออกจาก schema นี้ และขอบคุณ TypeScript มันสามารถชี้ให้ผมเห็นส่วนของ โค้ดที่ใช้ฟิลด์เหล่านี้ มันจะแจ้งเตือน

ข้อผิดพลาดในการคอมไพล์ TypeScript ดังนั้นจนกว่าคุณจะแก้ไขปัญหาเหล่านั้นทั้งหมด คุณจะไม่สามารถคอมไพล์โปรเจกต์ของคุณได้ และผมเชื่อว่ามันดีมาก เพราะมันช่วยให้คุณพัฒนาอย่างต่อเนื่องได้เร็วขึ้น มันช่วยให้คุณมี bugs น้อยลงใน production ผมใช้ฟีเจอร์นี้บ่อยมาก หนึ่งในเหตุผลหลักที่ทำให้ผม

The Power of SQL and Relational Data in Supabase6:56

เลือก Supabase แทน Firebase คือ

ผมสามารถเขียน SQL query ของตัวเองได้ และข้อมูลเชิงสัมพันธ์ของ SQL ได้รับการ optimize ให้เหมาะสมกับ query ทั้งหมดแล้ว การรวมกันของข้อมูลทั้งหมดที่คุณอาจต้องการใช้ ข้อมูลถูกจัดเก็บในลักษณะที่คุณสามารถรัน analytical query ได้ และมันจะ ง่ายมากในการ implement คุณสามารถไปที่ dashboard ของ Supabase และเลือก SQL editor ตัวอย่างเช่น เขียน SQL query ที่จัดกลุ่ม users ทั้งหมดตามภาษา และนี่คือผลลัพธ์ คุณสามารถเห็นจำนวน users และเปอร์เซ็นต์

มันเป็นสิ่งที่ PostgreSQL อนุญาตให้ทำ เรียกว่า window function และคุณสามารถใช้มันสำหรับ analytical query ขั้นสูง มันเป็นสิ่งที่ไม่ค่อยมีให้ใช้

Leveraging AI for SQL Query Generation within Supabase8:00

ใน NoSQL database ยิ่งไปกว่านั้น คุณสามารถใช้ AI เพื่อสร้าง query ให้คุณ ในกรณีที่คุณคิดว่า ทำไม ทำไมผมต้องเสียเวลากับการทำแบบนั้น ให้ AI ทำงานแทน ผมจะแสดงวิธีการให้ดู ผมถามว่า แสดงจำนวน active users ในเดือนที่แล้ว และผมระบุว่า active คือ คนที่ล็อกอินภายในเดือนปัจจุบัน AI assistant จะ

ให้ SQL query ที่ถูกต้องโดยอัตโนมัติ และฟีเจอร์ที่ยอดเยี่ยมสำหรับผมคือ Supabase รู้จักโครงสร้างทั้งหมดของคุณ ดังนั้นมันจึงสามารถ สร้าง query ที่ถูกต้องตามข้อมูลของคุณ เพราะมันรู้ทุกอย่าง เกี่ยวกับ database ของคุณทั้งหมด และคุณอาจสงสัยว่า ผมจะใช้งานมันในโค้ดอย่างไร คุณสามารถขอให้มัน แปลงเป็น PostgreSQL function ตอนนี้คุณจะเห็นว่าผมใช้ function เดียวกัน แต่มันถูกห่อด้วย expression ที่แปลงเป็น function และ function นั้นเรียกว่า get_active_users_last_month มันกำหนด type ทั้งหมดให้โดยอัตโนมัติ ดังนั้นมันจึง return integer เป็นผลลัพธ์ และเมื่อมันพร้อมใช้งาน คุณสามารถ เรียกมันในโค้ดของคุณได้ คุณเพียงแค่อ้างอิงถึง supabase.rpc จากนั้นคุณระบุชื่อของ function และอีกครั้ง เพราะ Supabase สร้าง type ทั้งหมดให้คุณ ในนี้ไม่ได้มีเพียงตารางเท่านั้น แต่มี function ต่างๆ ด้วย ดังนั้น function ทั้งหมด signature หรือ return type ที่ถูกต้อง ทุกอย่างจะถูก กำหนด type อย่างสมบูรณ์ใน TypeScript และมันดีมากๆ

Storing Files with Supabase Storage10:01

ผมยังใช้ Supabase ในการจัดเก็บไฟล์ด้วย ตัวอย่างเช่น ถ้าผมตัดสินใจเรียนภาษาไทย นี่คือวิธีที่ผมเรียนภาษาไทย ผมสามารถสร้างไฟล์เสียง ที่พูดว่า "สวัสดีครับ" เป็นภาษาไทย

โดยใช้ OpenAI สร้าง หลังจากนั้น ผมสามารถจัดเก็บไว้ใน Supabase ได้ ผมเพียงแค่ใช้ storage ระบุ bucket ID ซึ่งเป็นเหมือนโฟลเดอร์สำหรับไฟล์ จากนั้นผมระบุชื่อไฟล์ เนื้อหาของไฟล์ และแค่นั้นก็เพียงพอแล้ว จากนั้นคุณจะได้รับ URL ซึ่งคุณสามารถแนบไปกับการ์ดนี้ ซึ่งใน กรณีของผม การ์ดคือ "สวัสดีครับ" ผมสามารถแนบเสียงนี้และ จัดเก็บไว้ใน Supabase ขั้นตอนสุดท้ายคือวิธี

Optimizing Your Supabase Database with Indexes10:54

ปรับแต่ง database การ optimize database เป็น หัวข้อที่กว้าง และผมจะพูดถึงเฉพาะ index เพราะมันมีเยอะมาก และเมื่อเราคิดถึงวิธี ปรับแต่ง database เราต้อง นำรูปแบบพื้นฐานที่เราใช้ในชีวิตจริงมาประยุกต์ใช้ ตัวอย่างเช่น สมมติว่าเรามี หนังสือ และเราต้องการหาคำว่า "apple"

มีคำว่า "apple" อยู่ที่ไหนสักแห่ง แต่เรารู้ว่าถ้าหนังสือเล่มนี้เรียงตามตัวอักษรจาก A ถึง Z คำว่า "apple" ควรจะอยู่ที่ไหนสักแห่งในตอนต้น วิธีนี้คุณสามารถประหยัดเวลาในการค้นหาได้ นี่คือวิธีการทำงานของ index ต่างๆ ใน database query นี้

ผมต้องการหาการ์ดทั้งหมดที่สร้างโดย user ที่ระบุ ดังนั้น "apple" ที่นี่คือ user ID เราต้องสร้าง index สำหรับ ฟิลด์นี้และสำหรับ query นี้ และ Supabase อนุญาตให้เราทำเช่นนั้นได้ ใน dashboard คุณสามารถไปที่แท็บ indexes

และจากนั้นคุณระบุตาราง deck และคอลัมน์ที่คุณต้องการ ให้ถูก index คุณอาจสงสัยว่าทำไม

Understanding Index Performance Tradeoffs12:17

ทำไม Supabase หรือ PostgreSQL ไม่สามารถสร้าง index ทั้งหมดได้เอง ปัญหาคือการสร้าง index มีผลกระทบต่อประสิทธิภาพ มันทำให้การอ่านง่ายขึ้น ดังนั้นการอ่านจึงเร็วขึ้น แต่เมื่อคุณสร้าง index จำนวนมาก การเขียนจะช้าลง เพราะสมมติว่าคุณมีตารางที่มี 10 ฟิลด์ แล้วคุณ insert หนึ่ง record ที่มี 10 index และเมื่อคุณสร้าง record นี้ คุณต้องสร้าง index ดังนั้นมันจึงทำให้การ insert ช้าลง ในขณะที่ทำให้การอ่านเร็วขึ้น

ดังนั้นคุณจึงต้องควบคุมมันเองอย่างเต็มที่

Identifying Index Needs with PostgreSQL Extensions13:01

เพื่อหาว่าฟิลด์ใดต้องการ index

มี PostgreSQL extension ที่สร้างขึ้นภายใน Supabase และคุณ สามารถรัน query ต่างๆ ที่คุณมี ซึ่งซับซ้อนได้เท่าที่คุณต้องการ และจากนั้นมันจะแสดงให้คุณเห็นว่าฟิลด์ใดต้องการ index ใน query นี้ หรือแทนที่จะใช้ CLI คุณสามารถไปที่ dashboard ของ indexes และดู query ที่ใช้เวลามากที่สุด query ที่พบบ่อยที่สุด และ query ที่มีการดำเนินการช้าที่สุด ด้วยวิธีนี้ มันจะให้รายการ index ที่ต้อง ถูกสร้างขึ้น ซึ่งภายในใช้เครื่องมือ index advisor

Summary of Key Supabase Features and Benefits13:50

สรุป เราได้เรียนรู้วิธีสร้าง database structure ผ่าน user interface แทน CLI, วิธีสร้างไฟล์ TypeScript โดยอัตโนมัติ คุณไม่จำเป็นต้องถ่ายโอนฟิลด์ทั้งหมดจาก database ของคุณไปยังโค้ดของคุณด้วยตนเอง วิธีเขียน SQL ของคุณเองสำหรับ query และวิธีใช้ AI เพื่อทำแทนคุณ วิธีอัปโหลดไฟล์ เพราะ Supabase ไม่ใช่แค่ cloud platform แต่เป็น full stack platform ที่สามารถแทนที่ทีมนักพัฒนา และสุดท้าย วิธีปรับแต่ง database ของคุณเมื่อมันใหญ่ขึ้นเมื่อโปรเจกต์ของคุณเติบโตขึ้น ขอบคุณมากที่รับฟังผม

และในกรณีที่คุณสนใจโปรเจกต์นี้

Edit metadata on GitHub