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

# תרגילים - שיעור 1.5: בניית אפליקציית Full-Stack

## מידע כללי
- **שיעור:** 1.5 - בניית אפליקציית Full-Stack (Frontend + Backend + DB)
- **סוג השיעור:** מעשי (4 שעות)
- **הערה:** כל התרגילים מתבצעים באמצעות Claude Code בטרמינל. יש לפתוח תיקייה ריקה ב-VSCode, לפתוח טרמינל ולהקליד `claude` כדי להתחיל את הסשן.

---

## תרגיל 1: הגדרת פרויקט ו-CLAUDE.md (בכיתה - 15 דקות)
### הנחיות:
בשלב הראשון, נקים את השלד של הפרויקט שלנו: מערכת הזמנות ל"פלאפל הכרמל" - עסק מקומי שרוצה להשתדרג טכנולוגית. ניצור את הפרויקט ונגדיר ל-Claude את חוקי העבודה שלנו (System Prompt) ברמת הפרויקט.

1. פתחו טרמינל בתיקייה ריקה והפעילו את Claude Code.
2. בקשו מ-Claude לייצר פרויקט Next.js חדש ולהגדיר את קובץ ההנחיות.

**פקודה ל-Claude Code:**
```text
Run `npx create-next-app@latest falafel-carmel --typescript --tailwind --eslint --app --use-npm --src-dir` to create a new project. 
Then, cd into the directory and create a `CLAUDE.md` file. 
In the CLAUDE.md, write strict guidelines for this project: 
1. Use Next.js App Router. 
2. Default to Server Components, use Client Components only when interactivity is needed (e.g., hooks, events). 
3. Use Server Actions for all data mutations. 
4. UI styling must use Tailwind CSS.
5. Tech stack includes Prisma and PostgreSQL.
```

### שאלות:
1. פתחו את הקובץ `CLAUDE.md` שנוצר. מדוע חשוב להגדיר בו את ההעדפה ל-Server Components כברירת מחדל?
2. איך קובץ ה-CLAUDE.md משפיע על סשנים עתידיים שלנו מול הטרמינל?

---

## תרגיל 2: הגדרת מסד הנתונים - Prisma Schema (בכיתה - 30 דקות)
### הנחיות:
כעת נבנה את מודל הנתונים. נדרשים לנו שני מודלים מרכזיים: פריט בתפריט (`MenuItem`) והזמנה (`Order`).

1. ודאו שיש לכם מחרוזת התחברות (Connection String) ל-PostgreSQL (למשל מ-Supabase, Neon, או לוקאלי).
2. הנחו את Claude להתקין את Prisma, לאתחל אותו, ולבנות את הסכימה עבור פלאפל הכרמל.

**פקודה ל-Claude Code:**
```text
Install prisma and @prisma/client. Run `npx prisma init`.
Update the schema.prisma file to include two models for an Israeli restaurant:
1. MenuItem: id (uuid), name (string, e.g., 'מנת פלאפל', 'סביח'), description (string), price (float), isSpicy (boolean), createdAt.
2. Order: id (uuid), customerName (string), totalAmount (float), status (enum: PENDING, PREPARING, READY, DELIVERED), createdAt.
Also, add a relation where an Order can have multiple MenuItems (create an OrderItem join table).
Once done, ask me for my DATABASE_URL, add it to .env, and run the prisma migration called 'init_falafel_db'.
```

### שאלות:
1. אילו קבצים Claude Code היה צריך ליצור/לשנות כדי להשלים משימה זו?
2. מדוע השתמשנו בטבלת גישור (`OrderItem`) במקום לקשר ישירות בין הזמנה לפריט?

---

## תרגיל 3: Server Actions לפעולות CRUD (בכיתה - 40 דקות)
### הנחיות:
כדי שהאפליקציה תוכל לתקשר עם מסד הנתונים בצורה מאובטחת, נשתמש ב-Server Actions. פעולות אלו ירוצו על השרת (Backend) בלבד.

1. צרו קובץ לקליינט של פריזמה.
2. צרו קובץ פעולות לניהול התפריט.

**פקודה ל-Claude Code:**
```text
1. Create a `src/lib/prisma.ts` file to instantiate the Prisma client (following Next.js best practices for global instances).
2. Create `src/actions/menuActions.ts`. Write the following Server Actions using the prisma client:
- getMenuItems(): Fetch all menu items ordered by creation date.
- createMenuItem(formData: FormData): Extract name, description, price, and isSpicy, and save to DB. Call revalidatePath('/') at the end.
- deleteMenuItem(id: string): Delete an item and revalidate.
Ensure all functions have explicit TypeScript return types and error handling.
```

### שאלות:
1. מה תפקיד הפונקציה `revalidatePath` בסוף פעולת היצירה?
2. מדוע אנו מעבירים `FormData` לפעולת ה-Create במקום אובייקט JSON רגיל?

---

## תרגיל 4: UI ו-Server Components (בכיתה - 45 דקות)
### הנחיות:
עכשיו נציג את הנתונים! נבנה את עמוד הבית שיציג את תפריט הפלאפל. כיוון שאין כאן אינטראקציה מורכבת של המשתמש (רק קריאת נתונים), נשתמש ב-Server Component טהור.

**פקודה ל-Claude Code:**
```text
Refactor `src/app/page.tsx` to be a Server Component. 
Import the `getMenuItems` Server Action and call it directly in the component.
Build a beautiful, responsive UI using Tailwind CSS to display the menu. 
Give it a warm, Israeli street-food aesthetic (use colors like amber, orange, and warm gray). 
Display a grid of cards, where each card shows the dish name, description, price (in NIS - ₪), and a small chili icon if isSpicy is true.
```

### שאלות:
1. כיצד Next.js מתמודד עם הקריאה למסד הנתונים בתוך רכיב ה-React בדוגמה זו?
2. האם הלקוח (הדפדפן) מקבל את הקוד שמתחבר ל-Prisma? הסבירו למה.

---

## תרגיל 5: Client Components ואינטראקטיביות (בכיתה - 45 דקות)
### הנחיות:
נבנה את טופס הוספת המנה לתפריט. מכיוון שטופס דורש אינטראקציה מצד המשתמש (הקלדה, לחיצה), נשתמש ב-Client Component שמפעיל את ה-Server Action שבנינו בתרגיל 3.

**פקודה ל-Claude Code:**
```text
Create a new Client Component at `src/components/AddMenuItemForm.tsx` (make sure to include "use client").
Build a form with inputs for name, description, price (number), and a checkbox for isSpicy.
Connect the form's `action` attribute to the `createMenuItem` Server Action.
Use the `useFormStatus` hook from 'react-dom' to create a submit button that changes its text to 'מוסיף מנה...' (Adding dish...) while pending.
Add this component to the top of `src/app/page.tsx`.
```

### שאלות:
1. כיצד hook כמו `useFormStatus` מגשר על הפער בין חווית הלקוח לפעולה שקורית בשרת?
2. האם היה ניתן לבצע זאת ללא Client Component כלל?

---

## תרגיל 6: Vibe Coding - עריכת מספר קבצים במקביל (בכיתה - 35 דקות)
### הנחיות:
זה הזמן להרגיש את העוצמה של Claude Code בפרויקט Full-Stack. נבקש ממנו להוסיף פיצ'ר שדורש נגיעה ב-Frontend, Backend ובתלויות צד שלישי: הוספת Toast Notifications (התראות קופצות).

**פקודה ל-Claude Code:**
```text
I want to add toast notifications to the app. 
1. Install the `sonner` package.
2. Add the <Toaster /> component to the root layout.
3. Refactor `AddMenuItemForm.tsx` to not use the native 'action' attribute directly. Instead, intercept the form submission using an onSubmit handler, call the Server Action programmatically, and display a success toast ("המנה התווספה בהצלחה!") or an error toast if it fails.
4. Update `createMenuItem` action to return an object like { success: boolean, message: string } instead of just throwing errors.
Review all affected files and ensure the flow works seamlessly.
```

*בזמן ש-Claude עובד, ננהל דיון בכיתה:* מתי הייתם כותבים את הפיצ'ר הזה ידנית, ומתי נותנים ל-Claude Code לטפל בו בפקודה אחת? מה הגבול שבו אתם מאבדים שליטה?

### שאלות:
1. כמה קבצים Claude שינה במסגרת הפקודה הזו? ציינו אותם.
2. איזה שינוי ארכיטקטוני בוצע באופן שבו ה-Client Component מתקשר עם ה-Server Action?

---

## תרגיל 7: משימת בית - מערכת ניהול הזמנות למטבח
### הנחיות:
בניתם את התפריט של פלאפל הכרמל. כעת, עליכם לבנות את המערכת למטבח עצמו - תצוגת ההזמנות הנכנסות ועדכון הסטטוס שלהן.

עליכם להשתמש ב-Claude Code כדי לבצע את השלבים הבאים (נסחו את הפקודות שלכם באנגלית, בדומה לתרגילים הקודמים):
1. **פעולות שרת (Backend):** צרו קובץ `orderActions.ts`. כתבו פעולה לשליפת כל ההזמנות, ופעולה לעדכון סטטוס של הזמנה (למשל מ-`PENDING` ל-`READY`).
2. **ממשק שרת (Server Component):** צרו עמוד חדש בנתיב `/kitchen` שישלוף ויציג את כל ההזמנות הפעילות.
3. **אינטראקציה (Client Component):** לכל הזמנה, הוסיפו כפתור "סמן כמוכן" (Mark as Ready) שמפעיל את ה-Server Action לעדכון הסטטוס ומציג Toast notification.

**הגישו עד השיעור הבא את הקישור ל-Repository ב-GitHub (אתם יכולים לבקש מ-Claude לאתחל Git ולדחוף את הקוד עבורכם!).**

---

## קריטריונים להערכה
| קריטריון | ציון |
|---|---|
| **Prisma & Database:** יצירת מודלים נכונים והרצת מיגרציות בהצלחה | 20% |
| **Server Actions:** כתיבת פונקציות שרת בטוחות לעדכון ושליפת נתונים | 25% |
| **Next.js UI:** הפרדה נכונה בין Server Components ל-Client Components | 25% |
| **Vibe Coding Workflow:** שימוש נכון ב-Claude Code לעדכון רוחבי והוספת תלויות (Sonner/Toasts) | 15% |
| **משימת בית:** יישום עמוד ה-Kitchen כולל עדכון סטטוס הזמנה בהצלחה | 15% |

</div>