pwa/SUPABASE_SETUP.md

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

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

## 📋 پیش‌نیازها

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

---

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

1. به آدرس [https://supabase.com](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. محتوای زیر را در آن قرار دهید:

```env
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 زیر را کپی و در ویرایشگر قرار دهید:

```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](https://console.cloud.google.com) بروید
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. دوباره اجرا کنید:

```bash
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](https://supabase.com/docs)
- [راهنمای Authentication](https://supabase.com/docs/guides/auth)
- [راهنمای Database](https://supabase.com/docs/guides/database)

---

## 🎉 تبریک!

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

**خلاصه کارهایی که انجام دادید:**
- ✅ حساب Supabase ساختید
- ✅ پروژه جدید ایجاد کردید
- ✅ API Keys را دریافت کردید
- ✅ فایل `.env` را ساختید
- ✅ جداول Database را ایجاد کردید
- ✅ Realtime را فعال کردید

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