آموزش اتصال Supabase به React؛ پیاده‌سازی عملیات CRUD با جاوااسکریپت

اگر قصد دارید برای پروژه React خود یک بک‌اند کامل داشته باشید، اما نمی‌خواهید از ابتدا سراغ طراحی سرور و دیتابیس بروید، Supabase یکی از گزینه‌های کاربردی شماست. این سرویس امکاناتی مانند پایگاه داده، احراز هویت کاربران، ذخیره‌سازی فایل و API آماده را در اختیار توسعه‌دهندگان قرار می‌دهد.

در این آموزش یاد می‌گیریم چگونه Supabase را به یک پروژه React متصل کنیم و عملیات اصلی مدیریت اطلاعات، یعنی CRUD را انجام دهیم.

Supabase چیست و چرا در پروژه React از آن استفاده کنیم؟

Supabase یک پلتفرم متن‌باز مبتنی بر PostgreSQL است که ابزارهای موردنیاز برای ساخت بک‌اند را ارائه می‌کند. یکی از قابلیت‌های مهم آن، تولید خودکار API برای جدول‌های دیتابیس است.

با استفاده از Supabase می‌توانید بدون نوشتن بک‌اند اختصاصی، اطلاعات پروژه خود را ذخیره، دریافت، ویرایش و حذف کنید.

مهم‌ترین قابلیت‌های Supabase عبارت‌اند از:

• Database: پایگاه داده رابطه‌ای PostgreSQL
• Auto-generated API: ایجاد API خودکار برای جدول‌ها
• Authentication: ثبت‌نام و ورود کاربران
• Storage: ذخیره‌سازی تصاویر و فایل‌ها
• Row Level Security: مدیریت دسترسی کاربران به اطلاعات
• Realtime: دریافت تغییرات اطلاعات به‌صورت بلادرنگ

آیا میدانید مدرسه فرانت اند پرنیان، دوره آموزش فرانت اند از صفر تا صد را بصورت حرفه ای برگزار میکند؟

مرحله اول: ساخت پروژه در Supabase

ابتدا وارد وب‌سایت Supabase شوید و یک حساب کاربری ایجاد کنید.

پس از ورود به داشبورد، یک پروژه جدید بسازید. در زمان ایجاد پروژه، نام پروژه، رمز دیتابیس و منطقه سرور را انتخاب کنید.

پس از آماده شدن پروژه، از بخش Table Editor یک جدول جدید با نام students بسازید.

برای شروع، این ستون‌ها کافی هستند:

نام ستون	نوع داده
id	UUID
full_name	Text
email	Text
phone	Text
created_at	Timestamp

ستون id را به‌عنوان کلید اصلی (Primary Key) تنظیم کنید و برای آن مقدار پیش‌فرض UUID در نظر بگیرید.

مرحله دوم: دریافت اطلاعات اتصال Supabase

برای اتصال پروژه React به Supabase به دو مقدار نیاز داریم:

1. آدرس پروژه (Project URL)
2. کلید عمومی پروژه (Publishable Key)

این اطلاعات را از بخش تنظیمات API پروژه در داشبورد Supabase دریافت کنید.

نکته امنیتی: کلید Publishable برای استفاده در فرانت‌اند طراحی شده است؛ اما به‌تنهایی مجوز دسترسی به اطلاعات نیست. سیاست‌های امنیتی دیتابیس (RLS) تعیین می‌کنند هر کاربر چه اطلاعاتی را می‌تواند مشاهده یا تغییر دهد. هرگز کلید محرمانه یا service_role را داخل کد فرانت‌اند قرار ندهید.

آیا میدانید مدرسه پرنیان، دوره آموزش هوش مصنوعی جامع را بصورت حرفه ای برگزار میکند؟

مرحله سوم: نصب کتابخانه Supabase در React

ترمینال پروژه React را باز کنید و دستور زیر را اجرا کنید:

npm install @supabase/supabase-js

این کتابخانه، ابزار رسمی جاوااسکریپت Supabase است و می‌توانید از آن در React، Next.js و حتی پروژه‌های جاوااسکریپت معمولی استفاده کنید.

مرحله چهارم: ایجاد اتصال به Supabase

در پوشه src یک فایل با نام supabase.js بسازید:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseKey = 'YOUR_PUBLISHABLE_KEY'

export const supabase = createClient(
  supabaseUrl,
  supabaseKey
)

مقادیر YOUR_SUPABASE_URL و YOUR_PUBLISHABLE_KEY را با اطلاعات پروژه خود جایگزین کنید.

حالا در قسمت‌های مختلف برنامه می‌توانید با وارد کردن متغیر supabase با دیتابیس ارتباط برقرار کنید.

مرحله پنجم: خواندن اطلاعات از دیتابیس (Read)

برای دریافت لیست دانشجویان از جدول students از متد select() استفاده می‌کنیم:

import { supabase } from './supabase'

const getStudents = async () => {
  const { data, error } = await supabase
    .from('students')
    .select('*')

  if (error) {
    console.error(error.message)
    return
  }

  console.log(data)
}

متد from() جدول موردنظر را مشخص می‌کند و select('*') تمام ستون‌های مجاز آن را دریافت می‌کند.

مرحله ششم: افزودن اطلاعات جدید (Create)

برای ثبت یک دانشجوی جدید از متد insert() استفاده می‌کنیم:

const addStudent = async () => {
  const { data, error } = await supabase
    .from('students')
    .insert({
      full_name: 'علی رضایی',
      email: 'ali@example.com',
      phone: '09120000000'
    })
    .select()

  if (error) {
    console.error(error.message)
    return
  }

  console.log(data)
}

در این مثال، اطلاعات دانشجو به جدول اضافه می‌شود. استفاده از select() در انتهای درخواست باعث می‌شود رکورد ثبت‌شده نیز در پاسخ برگردد؛ البته این کار به مجوزهای لازم برای خواندن رکورد وابسته است.

مرحله هفتم: ویرایش اطلاعات (Update)

برای ویرایش اطلاعات یک دانشجو از متد update() استفاده می‌کنیم:

const updateStudent = async (studentId) => {
  const { data, error } = await supabase
    .from('students')
    .update({
      full_name: 'علی محمدی'
    })
    .eq('id', studentId)
    .select()

  if (error) {
    console.error(error.message)
    return
  }

  console.log(data)
}

متد eq() مشخص می‌کند کدام رکورد باید ویرایش شود. در این مثال فقط نام دانشجویی تغییر می‌کند که شناسه آن با studentId برابر است.

مرحله هشتم: حذف اطلاعات (Delete)

برای حذف یک دانشجو از دیتابیس از متد delete() استفاده می‌کنیم:

const deleteStudent = async (studentId) => {
  const { error } = await supabase
    .from('students')
    .delete()
    .eq('id', studentId)

  if (error) {
    console.error(error.message)
    return
  }

  console.log('Student deleted successfully')
}

توجه کنید که استفاده از شرط eq() اهمیت زیادی دارد؛ چون بدون محدود کردن درخواست ممکن است تعداد بیشتری از رکوردهای مجاز حذف شوند.

مرحله نهم: استفاده از Supabase در کامپوننت React

حالا می‌توانیم عملیات دریافت اطلاعات را داخل یک کامپوننت React انجام دهیم:

import { useEffect, useState } from 'react'
import { supabase } from './supabase'

function Students() {
  const [students, setStudents] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const getStudents = async () => {
      const { data, error } = await supabase
        .from('students')
        .select('*')

      if (error) {
        console.error(error.message)
      } else {
        setStudents(data)
      }

      setLoading(false)
    }

    getStudents()
  }, [])

  if (loading) return <p>در حال دریافت اطلاعات...</p>

  return (
    <div>
      <h2>لیست دانشجویان</h2>

      {students.map((student) => (
        <div key={student.id}>
          <h3>{student.full_name}</h3>
          <p>{student.email}</p>
        </div>
      ))}
    </div>
  )
}

export default Students

در این کامپوننت، با استفاده از useEffect اطلاعات هنگام بارگذاری اولیه دریافت می‌شوند و با useState در اختیار رابط کاربری قرار می‌گیرند.

نکته مهم: چرا ممکن است درخواست‌های CRUD با خطا مواجه شوند؟

اگر اتصال Supabase را به‌درستی انجام داده‌اید اما درخواست‌های شما موفق نیستند، یکی از دلایل احتمالی، تنظیمات امنیتی دیتابیس است.

قابلیت Row Level Security (RLS) مشخص می‌کند چه کسی اجازه خواندن، افزودن، ویرایش یا حذف اطلاعات را دارد.

برای مثال، ممکن است جدول شما وجود داشته باشد و API نیز به‌درستی ساخته شده باشد؛ اما چون کاربر وارد حساب خود نشده یا سیاست دسترسی مناسبی ندارد، درخواست select() یا insert() با خطای دسترسی مواجه شود.

بنابراین برای یک پروژه واقعی، بهتر است ابتدا احراز هویت کاربران و سیاست‌های RLS را به‌درستی طراحی کنید. صرفاً فعال بودن کلید عمومی به معنی دسترسی آزاد به جدول‌ها نیست.

جمع‌بندی

Supabase راهی ساده و کاربردی برای اتصال پروژه‌های React به یک پایگاه داده واقعی است. با نصب کتابخانه @supabase/supabase-js می‌توانید بدون پیاده‌سازی یک بک‌اند اختصاصی، عملیات CRUD را انجام دهید.

در این آموزش با ساخت پروژه، دریافت اطلاعات اتصال، نصب کتابخانه و اجرای عملیات Create، Read، Update و Delete آشنا شدیم.

اگر قصد ساخت پروژه‌هایی مانند پنل مدیریت دانشجویان، سیستم ثبت‌نام دوره‌های آموزشی، فروشگاه اینترنتی یا داشبورد مدیریتی را دارید، ترکیب React و Supabase می‌تواند نقطه شروع مناسبی باشد.

منابع رسمی برای مطالعه بیشتر:

• مستندات رسمی Supabase برای جاوااسکریپت
• راهنمای اتصال Supabase به React
• مستندات امنیت و RLS