Payannameh-Mozakhraf/SUPABASE_SETUP.md

راهنمای کامل اتصال پروژه به Supabase

این راهنما به شما کمک می‌کند که پروژه را به Supabase متصل کنید.

📋 پیش‌نیازها

• یک حساب ایمیل (برای ثبت‌نام در Supabase)
• VPN (در صورت فیلتر بودن Supabase در ایران)

---

🚀 مرحله 1: ساخت حساب Supabase

1. به آدرس https://supabase.com بروید
2. روی دکمه "Start your project" یا "Sign Up" کلیک کنید
3. با یکی از روش‌های زیر ثبت‌نام کنید:
   • GitHub
   • Google
   • ایمیل
4. پس از ثبت‌نام و تأیید ایمیل، وارد Dashboard شوید

---

🆕 مرحله 2: ایجاد پروژه جدید

1. در Dashboard، روی دکمه "New Project" کلیک کنید
2. اطلاعات زیر را وارد کنید:
   • Name: نام پروژه شما (مثلاً: pwa-react-app)
   • Database Password: یک رمز عبور قوی انتخاب کنید (حتماً ذخیره کنید!)
   • Region: نزدیک‌ترین منطقه را انتخاب کنید (مثلاً West US یا Southeast Asia)
   • Pricing Plan: Free plan را انتخاب کنید
3. روی "Create new project" کلیک کنید
4. صبر کنید تا پروژه ایجاد شود (این کار 2-3 دقیقه طول می‌کشد)

---

🔑 مرحله 3: دریافت API Keys

1. پس از ایجاد پروژه، به صفحه Settings بروید

2. در منوی سمت چپ، روی "API" کلیک کنید

3. در این صفحه دو مقدار مهم را پیدا می‌کنید:

   • Project URL: آدرس پروژه شما

     https://xxxxxxxxxxxxx.supabase.co
     

   • anon public key: کلید عمومی (این کلید را می‌توانید در frontend استفاده کنید)

     eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
     

4. این دو مقدار را کپی کنید (بعداً نیاز دارید)

---

📝 مرحله 4: ایجاد فایل .env

1. در ریشه پروژه (همان فولدری که package.json است)، یک فایل جدید با نام .env ایجاد کنید
2. محتوای زیر را در آن قرار دهید:

VITE_SUPABASE_URL=https://xxxxxxxxxxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

⚠️ توجه: مقادیر را با اطلاعات واقعی پروژه خود جایگزین کنید!

3. فایل را ذخیره کنید

---

🗄️ مرحله 5: ایجاد جداول در Database

1. در Supabase Dashboard، به بخش SQL Editor بروید (از منوی سمت چپ)
2. روی دکمه "New query" کلیک کنید
3. کد SQL زیر را کپی و در ویرایشگر قرار دهید:

-- ایجاد جدول requests
create table requests (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users(id) on delete cascade not null,
  title text not null,
  description text not null,
  status text default 'pending' check (status in ('pending', 'in_progress', 'completed')),
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  updated_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- فعال‌سازی Row Level Security
alter table requests enable row level security;

-- Policy: همه می‌توانند درخواست‌ها را ببینند
create policy "Anyone can view requests" on requests
  for select using (true);

-- Policy: کاربران می‌توانند درخواست خودشان را ایجاد کنند
create policy "Users can insert their own requests" on requests
  for insert with check (auth.uid() = user_id);

-- Policy: کاربران می‌توانند درخواست خودشان را به‌روز کنند
create policy "Users can update their own requests" on requests
  for update using (auth.uid() = user_id);

-- ایجاد جدول messages
create table messages (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users(id) on delete cascade not null,
  content text not null,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- فعال‌سازی Row Level Security
alter table messages enable row level security;

-- Policy: همه می‌توانند پیام‌ها را ببینند
create policy "Anyone can view messages" on messages
  for select using (true);

-- Policy: کاربران احراز هویت شده می‌توانند پیام ارسال کنند
create policy "Authenticated users can insert messages" on messages
  for insert with check (auth.uid() = user_id);

4. روی دکمه "Run" یا Ctrl+Enter بزنید
5. اگر همه چیز درست بود، پیام موفقیت را می‌بینید

---

🔄 مرحله 6: فعال‌سازی Realtime

برای اینکه تغییرات به صورت real-time نمایش داده شوند:

1. در Dashboard، به بخش Database بروید
2. روی "Replication" از منوی سمت چپ کلیک کنید
3. برای هر دو جدول (requests و messages):
   • کلید toggle را فعال کنید
   • یا از منوی dropdown، "Enable" را انتخاب کنید

---

🔐 مرحله 7: تنظیمات Authentication (اختیاری)

تنظیم Email Authentication:

به صورت پیش‌فرض فعال است و نیاز به تنظیم اضافی ندارد.

تنظیم Google OAuth (اختیاری):

اگر می‌خواهید ورود با Google داشته باشید:

1. به Google Cloud Console بروید
2. یک پروژه جدید ایجاد کنید یا پروژه موجود را انتخاب کنید
3. به APIs & Services > Credentials بروید
4. روی "Create Credentials > OAuth client ID" کلیک کنید
5. نوع را Web application انتخاب کنید
6. Authorized redirect URIs را اضافه کنید:

   https://xxxxxxxxxxxxx.supabase.co/auth/v1/callback
   

   (URL پروژه Supabase خود را جایگزین کنید)
7. Client ID و Client Secret را کپی کنید
8. در Supabase Dashboard:
   • به Authentication > Providers بروید
   • Google را پیدا کنید و فعال کنید
   • Client ID و Client Secret را وارد کنید
   • ذخیره کنید

---

✅ مرحله 8: تست اتصال

1. سرور توسعه را متوقف کنید (اگر در حال اجراست)
2. دوباره اجرا کنید:

npm run dev

3. به آدرس http://localhost:5173 یا http://localhost:5174 بروید
4. باید بنر زرد (حالت offline) ناپدید شود
5. صفحه Login را ببینید
6. یک حساب کاربری جدید بسازید و تست کنید

---

🐛 رفع مشکلات

مشکل: صفحه سفید یا خطا در console

راه‌حل:

• مطمئن شوید فایل .env در ریشه پروژه است
• مقادیر URL و KEY را دوباره بررسی کنید
• سرور را restart کنید

مشکل: خطای "Invalid API key"

راه‌حل:

• کلید anon key را دوباره از Settings > API کپی کنید
• مطمئن شوید کلید کامل است و فضای خالی اضافی ندارد

مشکل: خطای Database connection

راه‌حل:

• مطمئن شوید جداول را ایجاد کرده‌اید (مرحله 5)
• بررسی کنید که Row Level Security policies درست تنظیم شده‌اند

مشکل: Realtime کار نمی‌کند

راه‌حل:

• مطمئن شوید Realtime را برای جداول فعال کرده‌اید (مرحله 6)

---

📚 منابع بیشتر

• مستندات Supabase
• راهنمای Authentication
• راهنمای Database

---

🎉 تبریک!

اگر همه مراحل را با موفقیت انجام دادید، پروژه شما باید به Supabase متصل شده باشد و تمام ویژگی‌ها کار کنند.

خلاصه کارهایی که انجام دادید:

• ✅ حساب Supabase ساختید
• ✅ پروژه جدید ایجاد کردید
• ✅ API Keys را دریافت کردید
• ✅ فایل .env را ساختید
• ✅ جداول Database را ایجاد کردید
• ✅ Realtime را فعال کردید

اگر سوالی دارید یا مشکلی پیش آمد، می‌توانید از مستندات Supabase یا تیم پشتیبانی کمک بگیرید.