לייב פרקטי על CODEX איך לבנות אפליקציה מקצה לקצה

בונים אפליקציית פול־סטאק שלמה עם AI — מרעיון ועד אתר חי, כולל Supabase, פריסה וחיבור עוזר AI.

מה תלמדו

• לבנות אפליקציית ווב פול-סטאק מקצה לקצה עם מסד נתונים ואימות משתמשים
• להבין את המושגים Frontend
• Backend ו-Database ולהפריד ביניהם בפרויקט אמיתי
• להשתמש בסקילים ייעודיים של המועדון שמנחים את קודקס בקבלת החלטות ארכיטקטוניות
• להעלות אפליקציה לאוויר באמצעות Supabase ו-Netlify בלי לכתוב קוד ידני
• להטמיע עוזר AI מבוסס OpenAI API באפליקציה עם ניהול עלויות ומגבלות שימוש
• לבצע סריקת אבטחת מידע על הפרויקט ולתקן פגיעויות נפוצות באמצעות סקיל ייעודי
• לשפר חווית משתמש ועיצוב של אפליקציה קיימת עם סקיל UX/UI
• להבין את מודל העלויות של API ולהגדיר הגבלות שימוש לפי סוג משתמש

למי זה מתאים

• מתכנתים מתחילים שמבינים את הבסיס ורוצים לבנות אפליקציות אמיתיות עם משתמשים
• בעלי עסקים שרוצים לבנות מערכת CRM או ניהול פנימית ללא צוות פיתוח
• Vibe coders שעובדים עם לאבל או בבל 44 ורוצים לעבור לפיתוח מקצועי יותר
• מפתחים שכבר בנו משהו עם קלוד קוד ורוצים להבין את ההבדלים עם קודקס
• מי שצריך להטמיע בינה מלאכותית בתוך אפליקציה קיימת באמצעות API

מה אפשר לעשות עם זה בפועל

• בניית מערכת לניהול אימוני כושר עם מעקב משקולות
• חזרות והיסטוריה אישית
• יצירת מערכת CRM עם הרשאות משתמשים והפרדה בין משתמשים בתשלום לחינמיים
• הוספת עוזר AI שמסוגל לתעד אימון בשפה טבעית ולבנות תוכניות אימון מותאמות
• העלאת אפליקציה לאוויר עם דומיין פרטי ואבטחה ברמת ייצור
• מעבר מפרויקט לוקאלי על המחשב לאפליקציה שכל אחד יכול לגשת אליה דרך הדפדפן
• סריקת פרויקט קיים לאיתור פגיעויות אבטחה והטמעת שכבת אבטחה
• שיפור עיצוב של אפליקציה שכבר עובדת אבל נראית בסיסית
• הגדרת מכסות שימוש ב-AI לפי סוג מנוי כדי לשלוט בעלויות API

מה עוברים בסדנה

# סיכום: לייב פרקטי על CODEX — איך לבנות אפליקציה מקצה לקצה

## הקדמה
בסדנה זו למדנו לבנות אפליקציית פול־סטאק שלמה עם AI — מרעיון ועד אתר חי באוויר — בלי להיות אנשים טכניים. התחלנו בהבנת שלוש שכבות המערכת (פרונט־אנד, בק־אנד ודאטאבייס) דרך אנלוגיית המסעדה, המשכנו לשיטת העבודה מול שלושת המנטורים החדשים של המועדון, וסיימנו בהדגמה חיה: הקמת Supabase, בניית האפליקציה LiftLog ב-React, פריסה ל-Netlify, וחיבור עוזר AI עם מפתח סודי ששמור נכון בצד השרת. העיקרון שליווה את כל הסדנה: ה-AI עושה, אתם מחליטים.

המצגת המלאה של הסדנה:
https://remarkable-flan-c9f2ac.netlify.app

## נקודות מרכזיות

1. **שלוש שכבות, מוצר אחד — אנלוגיית המסעדה**: אפליקציה היא כמו מסעדה — הפרונט־אנד הוא חדר האוכל (מה שהמשתמש רואה ולוחץ), הבק־אנד הוא המטבח (החוקים, ההרשאות והבדיקות), הדאטאבייס הוא המחסן (מה נשמר ואיפה), וה-API הוא המלצר שמעביר מידע בין הצדדים. הכלל הכי חשוב מהחלק הזה: הפרונט־אנד הוא שלט, הבק־אנד הוא המנעול. הסתרת כפתור "ניהול" מהמסך אינה אבטחה — הבק־אנד עדיין חייב לבדוק הרשאה בעצמו. כל לחיצה עוברת את אותה שרשרת: הפרונט שולח ← הבק־אנד בודק ← הדאטאבייס שומר ← המסך מתעדכן.

2. **שיטת העבודה: "אני עושה, אתם מחליטים"**: וייב־קודינג הוא לדבר בתוצאות ולא בתחביר — אתם מתארים למי האפליקציה ומה היא צריכה לעשות, המנטור מתכנן ומבצע (סטאק, דאטאבייס, קוד וחיבור שירותים), ואתם בודקים ומחליטים. לא צריך לדעת לבחור ספרייה או לכתוב SQL, אבל כן צריך להחליט מי המשתמשים, מה הפעולה המרכזית, מה פרטי ומתי זה "מוכן". וחשוב: זה אף פעם לא פרומפט אחד אלא ארבעה סבבים — אפיון, בנייה ובדיקות, סקירת אבטחה, ושיפור UX/UI.

3. **שלושת המנטורים החדשים במועדון**: שלושה סקילים שהושקו בלייב, כל אחד רואה בעיות שהאחרים עלולים לפספס.
**בונה אפליקציות Fullstack** — מהרעיון לאתר באוויר בחמישה שלבים: אפיון, הקמת Supabase, יצירת React, בדיקה מקומית ופרסום ב-Netlify (https://practice-ai.co.il/skills/fullstack-app).
**מנטור אבטחת מידע** — "זה עובד" לא אומר "זה בטוח": הוא קורא את הקוד האמיתי, מאתר מפתחות חשופים, מידע שדולף בין משתמשים וקלט בלי גבולות, ומסביר בפשטות מה לתקן (https://practice-ai.co.il/skills/friendly-security-mentor).
**UI UX Pro Max** — עיצוב הוא לא קישוט אלא בהירות: היררכיה, ריווח, נגישות, מובייל ועקביות (https://practice-ai.co.il/skills/ui-ux-pro-max).

4. **הקו האדום: המפתח הסודי נשאר בצד השרת**: API הוא חוזה — בקשה ותשובה במבנה מוסכם, בלי קסמים. אבל ברגע שמחברים שירות חיצוני כמו OpenAI, יש כלל אחד שלא נשבר: לעולם לא שמים API key ב-React, בדפדפן או ב-GitHub.
הזרימה הנכונה היא פרונט־אנד ← פונקציית שרת (Edge Function) ← OpenAI, כשהמפתח יושב כ-Secret בצד השרת בלבד, והפונקציה גם מוודאת שהמשתמש מורשה ומגבילה קצב בקשות.
חמישה צעדים: יוצרים API key, שומרים כ-Secret ב-Supabase, כותבים פונקציה, מחברים כפתור בפרונט, ובודקים גבולות ושגיאות.

5. **ההדגמה החיה: LiftLog מקצה לקצה**: בנינו אפליקציית מעקב אימונים אמיתית עם אותה שרשרת ושמות אמיתיים — React + Vite לפרונט, Supabase ל-Auth + Database + RLS, ו-Netlify לפריסה עם כתובת ציבורית.
שתי נקודות קריטיות ב-Supabase: מפעילים RLS כדי שכל משתמש יראה רק את הנתונים שלו, וזוכרים שה-anon key אינו סיסמת־על.
בסוף הוספנו "מאמן אישי" בתוך האפליקציה — עוזר AI שמקבל הקשר מצומצם (סיכום אימונים רלוונטי, לא את כל הדאטאבייס) ומחזיר המלצה קצרה בשפה של המוצר.

## הכלים והאתרים מהסדנה

**תשתית ופריסה**
Supabase — הדאטאבייס וצד השרת ("המחסן והמטבח")
https://supabase.com
Netlify — הפריסה וצד הלקוח ("חדר האוכל")
https://netlify.com
Amazon AWS — אלטרנטיבה לניהול כמה אתרים ואפליקציות במקום אחד (Codex ינחה שם)
https://aws.amazon.com

**הוספת עוזר AI לאפליקציה**
OpenAI Platform — יצירת API Key לחיבור עוזר AI
https://platform.openai.com
השלבים: מתחברים עם גוגל ← יוצרים API Key חדש בשם האפליקציה ← מגדירים בילינג וקרדיטים ← מדביקים את המפתח ב-Supabase לפי הנחיות Codex

**כלים נוספים**
GitHub — אחסון וניהול הקוד והסקילים
https://github.com
ChatGPT Chrome Extension — מאפשר ל-Codex לפתוח את Supabase ו-Netlify אוטומטית
https://chromewebstore.google.com/detail/chatgpt/hehggadaopoacecdllhhajmbjkdcmajg

**הסקילים ב-GitHub**
https://github.com/Asher-pro/fullstack-app
https://github.com/Asher-pro/friendly-security-mentor
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

שימושים מעשיים

• בניית מערכת לניהול אימוני כושר עם מעקב משקולות
• חזרות והיסטוריה אישית
• יצירת מערכת CRM עם הרשאות משתמשים והפרדה בין משתמשים בתשלום לחינמיים
• הוספת עוזר AI שמסוגל לתעד אימון בשפה טבעית ולבנות תוכניות אימון מותאמות
• העלאת אפליקציה לאוויר עם דומיין פרטי ואבטחה ברמת ייצור
• מעבר מפרויקט לוקאלי על המחשב לאפליקציה שכל אחד יכול לגשת אליה דרך הדפדפן
• סריקת פרויקט קיים לאיתור פגיעויות אבטחה והטמעת שכבת אבטחה
• שיפור עיצוב של אפליקציה שכבר עובדת אבל נראית בסיסית
• הגדרת מכסות שימוש ב-AI לפי סוג מנוי כדי לשלוט בעלויות API