<div dir="rtl" lang="he">

# תרגילים - שיעור 1.6: עבודה עם Supabase כ-Backend

## מידע כללי
- **שיעור:** 1.6 - עבודה עם Supabase כ-Backend
- **סוג השיעור:** מעשי (4 שעות)
- **הערה:** לשיעור זה נדרש חשבון Supabase חינמי בכתובת supabase.com, וסביבת עבודה עם Claude Code מותקן.

---

## תרגיל 1: חיבור ראשוני של Next.js ל-Supabase (הדרגתי - 30 דקות)
### הנחיות:
רשת "חומוס אליהו" זקוקה למערכת חדשה לניהול סניפים. נתחיל מהקמת התשתית וחיבור האפליקציה ל-BaaS.

1. פתחו פרויקט חדש ב-Supabase תחת השם `hummus-eliyahu-dashboard`.
2. העתיקו את ה-URL וה-Anon Key ממסך ה-API Settings.
3. צרו פרויקט Next.js חדש והגדירו את משתני הסביבה בקובץ `.env.local`:
```env
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
```
4. השתמשו ב-Claude Code כדי להתקין את ה-SDK ולייצר את קובץ הלקוח:
```bash
claude "Install @supabase/supabase-js and @supabase/ssr. Then, create a utility file at lib/supabase/client.ts that initializes and exports the Supabase client for a browser environment."
```
5. צרו טבלה פשוטה ב-SQL Editor של Supabase בשם `branches` (id, name, city) והכניסו כמה סניפים דרך הממשק של Supabase.

### שאלות:
1. מדוע אנו משתמשים ב-Anon Key בצד הלקוח, וכיצד Supabase מוודא שמשתמשים לא מורשים לא ישנו נתונים?
2. מה ההבדל המרכזי בין האופן שבו Supabase (Postgres) שומר נתונים לעומת Firebase (Firestore)?

---

## תרגיל 2: מעבר מ-Prisma מקומי ל-Supabase (הדרגתי - 30 דקות)
### הנחיות:
עד כה, "קפה נחת" השתמשו במסד נתונים SQLite מקומי עם Prisma לניהול משמרות. כעת הם עוברים לענן של Supabase.

סכמת ה-Prisma המקורית שלהם:
```prisma
model Shift {
  id        String   @id @default(cuid())
  employee  String
  startTime DateTime
  endTime   DateTime
  isMorning Boolean
}
```

1. בקשו מ-Claude Code להמיר את הסכמה הזו ל-SQL שמתאים ל-PostgreSQL של Supabase:
```bash
claude "I am migrating a Prisma SQLite schema to Supabase Postgres. Here is the model: [הדבק את המודל]. Generate the raw SQL to create this table in Supabase, making sure to use UUIDs or appropriate default functions for ID, and add updated_at/created_at timestamps."
```
2. הריצו את ה-SQL שהתקבל ב-SQL Editor של Supabase.
3. בקשו מ-Claude Code ליצור Server Action ב-Next.js ששולף את כל המשמרות ישירות דרך `supabase-js`:
```bash
claude "Create a Next.js Server Action in actions/shifts.ts that connects to Supabase using @supabase/ssr cookies (create a server client) and fetches all rows from the 'shifts' table. Handle errors gracefully."
```

### שאלות:
1. מהם היתרונות במעבר מ-SQLite מקומי ל-PostgreSQL מנוהל ב-Supabase?
2. האם ניתן להמשיך להשתמש ב-Prisma יחד עם Supabase? אם כן, איך?

---

## תרגיל 3: אותנטיקציה ואבטחת נתונים עם RLS (מורכב - 45 דקות)
### הנחיות:
משרד רואי החשבון "כהן-לוי" מבקש מערכת כספות למסמכים (Vault). כל רואה חשבון צריך לראות *רק* את הלקוחות שלו. זה הזמן ל-Row Level Security (RLS).

1. הפעילו RLS על טבלת הלקוחות דרך ה-SQL Editor:
```sql
CREATE TABLE clients (
  id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
  name TEXT NOT NULL,
  accountant_id UUID REFERENCES auth.users(id)
);
ALTER TABLE clients ENABLE ROW LEVEL SECURITY;
```
2. בקשו מ-Claude Code לכתוב את ה-RLS Policies ולהטמיע עמוד התחברות:
```bash
claude "Write a Supabase SQL RLS policy for the 'clients' table so that users can only SELECT and INSERT rows where accountant_id equals their auth.uid(). Then, create a Next.js login page component using @supabase/auth-ui-react and @supabase/auth-ui-shared with Email authentication."
```
3. הריצו את ה-SQL שניפק קלוד ב-Supabase וודאו שהוא עובד (נסו לשלוף נתונים ללא התחברות - עליכם לקבל מערך ריק).
4. בצעו התחברות (Sign up) באפליקציה, וצרו לקוח שמשויך ליוזר שלכם.

### שאלות:
1. מדוע RLS נחשב למנגנון אבטחה חזק יותר מאשר בדיקות אבטחה ברמת ה-API (Backend)?
2. כיצד נבצע פעולות אדמין שעוקפות את ה-RLS (למשל סקריפט תחזוקה)?

---

## תרגיל 4: חיבור Claude Code ישירות למסד הנתונים עם Supabase MCP (טכני - 35 דקות)
### הנחיות:
כדי לייעל את הפיתוח, נחבר את Claude Code ישירות ל-Supabase בעזרת MCP (Model Context Protocol).

1. התקינו את שרת ה-MCP של Supabase (אם טרם הוגדר):
```bash
# הוספת ה-MCP לקונפיגורציה של קלוד (בהתאם לתיעוד MCP)
claude mcp add supabase --project-ref your-project-ref --access-token your-personal-access-token
```
2. השתמשו ב-Claude Code כדי לתשאל את ה-DB בלי לצאת מהטרמינל:
```bash
claude "Using the Supabase MCP, describe the schema of the 'clients' table. Then, insert a dummy record for an Israeli client named 'משה ובניו בע\"מ' without hardcoding a UUID (let Postgres generate it)."
```
3. בקשו מ-Claude Code ליצור קומפוננטת React שמציגה את המידע, בהתבסס על ההבנה שלו של הסכמה דרך ה-MCP:
```bash
claude "Now that you know the exact schema of the 'clients' table via MCP, generate a Server Component in app/clients/page.tsx that fetches these clients and displays them in a Tailwind CSS grid."
```

### שאלות:
1. כיצד שימוש ב-MCP חוסך לנו צורך בהעתקה-הדבקה של סכמות ה-DB לפרומפטים שלנו?
2. אילו סכנות אבטחה יש לקחת בחשבון כשנותנים לכלי AI גישה ישירה ל-DB?

---

## תרגיל 5: Realtime - עדכונים חיים במסך הזמנות (מעשי - 40 דקות)
### הנחיות:
דוכן הפלאפל "פלאפל הקוסם" בתל אביב זקוק למסך המראה הזמנות חדשות בזמן אמת, בלי לרענן את העמוד, בדומה למסכי מקדונלדס.

1. צרו טבלת `orders` (id, status, total_price) והפעילו עליה Realtime ב-Supabase Dashboard (Database -> Replication -> Enable Realtime for `orders`).
2. הנחו את Claude Code לכתוב קומפוננטת לקוח שמקשיבה לשינויים:
```bash
claude "Create a React Client Component for a live order screen. Use the Supabase client to subscribe to Postgres changes (INSERT and UPDATE) on the 'orders' table. Whenever a new order is added or updated, play a short 'ding' sound (using browser Audio API) and update the local state without refreshing the page. Style it like a fast-food digital board."
```
3. פתחו את מסך ההזמנות בדפדפן אחד.
4. הוסיפו שורה לטבלת `orders` דרך הממשק של Supabase (או חלון אחר), וצפו בהופעתה המיידית באפליקציה!

### שאלות:
1. אילו אלטרנטיבות יש ל-Supabase Realtime (WebSockets) בעולם ה-Serverless?
2. איך Supabase מממש את ה-Realtime מאחורי הקלעים מעל PostgreSQL?

---

## תרגיל 6: העלאת קבצים עם Supabase Storage (מעשי - 35 דקות)
### הנחיות:
הסטארטאפ הישראלי "חשבונית-בקליק" רוצה לאפשר לעצמאיים להעלות צילומים של קבלות מהסמארטפון לצורך זיהוי הוצאות.

1. צרו Storage Bucket ב-Supabase בשם `receipts`.
2. הגדירו את ה-Bucket כציבורי (Public) או הוסיפו Policy המאפשר `INSERT` לכל המשתמשים המחוברים (Authenticated).
3. בקשו מ-Claude Code לייצר קומפוננטת העלאה:
```bash
claude "Create an Image Upload component in React for a receipt scanner app. The component should have an input type='file' restricted to images. On selection, upload the file to the Supabase storage bucket named 'receipts'. Generate a unique filename using Date.now() and Math.random(). Display a progress bar during the upload and show the image preview once done."
```
4. בדקו את ההעלאה של תמונה ממחשבכם וודאו שהיא מופיעה ב-Dashboard של Supabase תחת Storage.

### שאלות:
1. מדוע מומלץ לשמור תמונות/קבצים ב-Storage Bucket ולא ישירות כ-BLOB במסד הנתונים?
2. איך נשלב Edge Functions או שירותי AI חיצוניים (כמו Vision) ברגע שקובץ מועלה ל-Bucket?

---

## תרגיל 7: משימת בית - פרויקט "טרמפיאדה" לחיילים
### הנחיות:
בנו אפליקציה חדשה לחלוטין מבוססת Next.js + Supabase שתשמש קהילת חיילים לאיתור והצעת טרמפים בסופי שבוע ("טרמפיאדה").
המערכת צריכה לכלול את כל מה שלמדנו בשיעור:

**דרישות המערכת:**
1. **Auth:** התחברות באמצעות Google OAuth (הגדירו זאת ב-Supabase -> Auth -> Providers).
2. **DB & RLS:** טבלת `rides` (id, driver_id, origin, destination, departure_time, seats_available).
   - *מדיניות (Policy):* כולם יכולים לקרוא את הנסיעות (`SELECT`). רק המשתמש עצמו (`driver_id = auth.uid()`) יכול לערוך או למחוק את הנסיעה שלו.
3. **Realtime:** מסך הבית יתעדכן בזמן אמת כאשר מישהו מציע טרמפ חדש (יופיע כפופ-אפ או יתווסף ישירות לרשימה).
4. **AI Generation:** השתמשו ב-Claude Code לבניית ה-CRUD המלא (Create, Read, Update, Delete) ובניית ה-UI. דוגמה לפרומפט שתוכלו להיעזר בו:
   ```bash
   claude "Build a 'Offer a Ride' form as a Next.js Server Action, enforcing that the driver_id matches the authenticated Supabase user session. Then build the Realtime feed component for the homepage."
   ```

**הגישו עד השיעור הבא:**
- קישור ל-Repository ב-GitHub (ודאו שאין סודות - `anon key` ו-`url` צריכים להיות ב-`.env`).
- צילום מסך של מדיניות ה-RLS מתוך Supabase.
- צילום מסך או סרטון קצר של עדכון הטרמפים ב-Realtime.

---

## קריטריונים להערכה
| קריטריון | ציון |
|---|---|
| עבודה נכונה עם Supabase Client ב-Next.js (הפרדה בין שרת ללקוח) | 20% |
| יישום תקני ומאובטח של RLS בטבלאות | 25% |
| עבודה תקינה עם מערכת ההתחברות (Supabase Auth) | 20% |
| שילוב עדכוני זמן אמת (Realtime) ללא תקלות | 15% |
| שימוש אפקטיבי ב-Claude Code וקוד נקי/מובנה | 20% |

</div>