מדריך vibe coding למתחילים: שגרו אפליקציה ראשונה היום

שעה שמונה בערב, יש לכם רעיון קטן: אפליקציה שתעקוב כמה זמן אתם משקיעים בכל פרויקט — רישום משימה, לחיצה על טיימר, וסכום לפי פרויקט בסוף היום. בעבר זה היה אומר ללמוד framework, להתקין סביבה, ולהילחם ב-bugs לפני שראיתם מסך אחד. ב-2026 יש מסלול אחר: אתם מתארים מה האפליקציה צריכה לעשות, וה-AI כותב את הקוד. זה בדיוק התרגיל שהדוקומנטציה הרשמית של GitHub Copilot מובילה דרכו — בניית אפליקציית מעקב-זמן אישית, בלי לכתוב שורת קוד אחת בעצמכם. במדריך הזה נעבור עליו צעד-אחר-צעד, בעברית, עם המקורות הרשמיים.

מה זה vibe coding — והכלל המנטלי שמשנה הכול

במקום לפתוח Google ולשאול 'איזו ספריית גרפים לבחור ל-React', אתם פותחים את Copilot וכותבים: 'תבנה לי אפליקציה יפה שעוזרת לעקוב אחרי זמן, מציגה סיכומים, ומאפשרת חיפוש'. זה ה-vibe coding בתמצית. הטיפ הראשון והחשוב ביותר של Microsoft הוא להתמקד בתוצאות ולא ב-syntax — לתאר מה אתם רוצים שיקרה, לא איך לממש את זה. הטיפ השני, שמשלים אותו: תנו ל-AI לבחור את ה-stack הטכני. בדוגמה של Microsoft, ה-AI בחר בעצמו React, TypeScript, Tailwind CSS, Recharts ל-visualization ו-Lucide React לאייקונים — בלי שהמשתמש היה צריך לחקור מה עדיף.

<b>אם אתם זוכרים דבר אחד מהמדריך הזה: תארו את ה-what, לא את ה-how — ותנו ל-AI את ה-how.</b>

שלושת המצבים: Ask, Plan, Agent

כאן נמצא הלב של הזרימה הרשמית של GitHub. Copilot מגדיר שלושה מצבים נפרדים, וכל אחד מהם נועד לשלב אחר בעבודה. אתם לא קופצים ישר לכתיבת קוד — אתם עוברים דרך השלושה לפי הסדר. וחשוב לדעת מראש: GitHub מציין במפורש שהגישה הזו 'אינה מיועדת למפתחים מנוסים בעלי הרגל מבוסס של כתיבת קוד בעורך'. זה מדריך פתיחה למי שלא מתכנת בעצמו — וזו בדיוק הנקודה.

בפועל זה נראה כך: ב-Ask Mode אתם שואלים 'מה צריך להיות באפליקציית מעקב-זמן? איך מטפלים בטיימרים פעילים? איך שומרים נתונים?' — וה-AI עוזר לחדד את הדרישות. ב-Plan Mode אתם בוחרים Plan מתפריט הנפתח, מתארים את היעד, ו-Copilot מחזיר תוכנית מובנית: צעדי מימוש, החלטות ארכיטקטורה, וסעיף 'Further Considerations' שדורש את הקלט שלכם. רק כשהתוכנית נראית טוב — לוחצים Start Implementation ועוברים ל-Agent Mode, שם הקוד נכתב בפועל.

אני רוצה לבנות אפליקציית מעקב-זמן אישית.
מה שהיא צריכה לעשות:
- לרשום משימות תחת פרויקטים
- כפתור התחל/עצור טיימר לכל משימה (אפשר להחליף משימה פעילה)
- להציג סכום זמן יומי לפי משימה ולפי פרויקט

אל תתחיל לכתוב קוד עדיין. תכנן את המבנה, הצע stack מתאים,
ורשום שאלות פתוחות שאתה צריך שאחליט עליהן.

<b>אל תדלגו על Ask ו-Plan כדי 'להגיע מהר לקוד' — דקה של תכנון חוסכת חצי שעה של תיקונים ב-Agent Mode.</b>

ההגדרה הראשונית: VS Code, Copilot ומודל החשיבה

אתם לא צריכים שום דבר אקזוטי. במדריך של Microsoft הסביבה הייתה VS Code עם GitHub Copilot, כשמודל החשיבה מאחורי הסוכן היה Claude Sonnet 4.5. האפליקציה נבנתה על Vite ככלי build. אם יש לכם VS Code, חשבון GitHub עם Copilot מופעל, ו-Node.js מותקן — אתם מוכנים. הסוכן יטפל בהתקנת ה-dependencies בעצמו במהלך Agent Mode.

להנחות את הסוכן: קובץ copilot-instructions.md

אחרי כמה prompts תשימו לב שה-AI חוזר על אותן שאלות, או בוחר קונבנציות שלא מתאימות לכם. הפתרון הרשמי של GitHub: ליצור קובץ בשם .github/copilot-instructions.md ב-repository. הקובץ הזה נותן ל-Copilot הנחיה ספציפית לפרויקט — ארכיטקטורה, workflows, קונבנציות ונקודות אינטגרציה. GitHub ממליץ לשמור אותו תמציתי, בערך 20-50 שורות שמכסות את הידע החיוני על ה-codebase. זה לא קוד — זו 'תדריך' שהסוכן קורא לפני כל תשובה.

# הנחיות פרויקט ל-Copilot

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

## Stack
- React + TypeScript + Vite
- Tailwind CSS לעיצוב
- שמירת נתונים ב-localStorage (אין backend בשלב זה)

## קונבנציות
- רכיבים פונקציונליים בלבד, hooks ל-state
- שמות קבצים ב-PascalCase לרכיבים
- אל תוסיף תלויות חדשות בלי לשאול קודם

<b>קובץ copilot-instructions.md אחד טוב שווה עשרה prompts שחוזרים על עצמם — הוא מקבע את ההקשר פעם אחת.</b>

להריץ, לבדוק ולאשר: לולאת ה-feedback

ה-AI סיים לכתוב את הסבב הראשון. עכשיו מגיע החלק שמתחילים נוטים לדלג עליו — וטועים. הטיפ של Microsoft: להריץ את הקוד מיד. במקום לחכות שה-AI 'יסיים הכול', הרצת npm run dev מוקדם מראה לכם תוצאה עובדת תוך שניות, וחושפת בעיות בזמן אמת. במקביל, GitHub מנחה לבדוק את הקבצים שנוצרו וללחוץ Keep (ב-VS Code) או Accept All (ב-JetBrains) כדי לאשר את השינויים ולהסיר את שורות ה-diff מהעורך — ואז לעשות commit ל-Git. אתם הבקרה האנושית בלולאה.

# הסוכן בדרך כלל מריץ את זה בשבילכם ב-Agent Mode,
# אבל כך מריצים ידנית ורואים תוצאה מיד:
npm install
npm run dev
# פותחים את הכתובת שמודפסת (בדרך כלל http://localhost:5173)

כשמשהו שגוי: תארו את הסימפטום, לא את התיקון

זה אולי הטיפ הכי לא-אינטואיטיבי, והכי חשוב. כשהמספרים באפליקציה של Microsoft יצאו שגויים, הכותב לא ניסה לנחש מה לתקן ב-parser. הוא פשוט כתב לסוכן שהנתונים 'נראים לא נכונים כאן, המספרים לא מדויקים' — ותיאר את הסימפטום כמו שמסבירים תקלה לחבר. ה-AI אבחן את שורש הבעיה ותיקן. אם הייתם מציעים תיקון ספציפי שגוי, הייתם רק שולחים את הסוכן לכיוון הלא נכון. תארו מה אתם רואים; תנו ל-AI לאבחן למה.

doesn't seem correct here as the numbers aren't accurate — כך תיארה Microsoft באג ל-Copilot: סימפטום, לא פתרון.

לשגר לאוויר: מ-localhost ל-GitHub Pages

אפליקציה שרצה רק אצלכם על localhost היא לא 'אפליקציה אמיתית' עד שמישהו אחר יכול לפתוח אותה. כאן הזרימה של Microsoft סוגרת מעגל מרשים: מ-concept ל-production לקח כ-15 דקות בסך הכול. הדשבורד הראשון עבד בחמש הדקות הראשונות; בדקות 10-15 נוספו GitHub Actions workflow לפריסה אוטומטית ותוקנו שגיאות TypeScript; והאפליקציה עלתה ל-GitHub Pages — אירוח סטטי חינמי. טיפ נוסף של Microsoft: הפנו את ה-AI ל-repo קיים שלכם כדי שיעתיק דפוסי deployment שכבר עובדים, במקום להמציא workflow מאפס.

תכין את האפליקציה לפריסה ל-GitHub Pages:
- צור GitHub Actions workflow שבונה את אפליקציית ה-Vite
  ומפרסם ל-Pages בכל push ל-main
- ודא ש-base path ב-vite.config מתאים לשם ה-repository
אם יש שגיאות TypeScript בבנייה, תקן אותן.

<b>היעד של הסשן הראשון שלכם: לא 'אפליקציה מושלמת', אלא URL חי שאפשר לשלוח לחבר — אפילו אם זה לקח 15 דקות.</b>

ה-checklist של היום: מה לעשות עכשיו

אם אתם רוצים לסיים את היום עם אפליקציה חיה, זה הרצף: (1) ודאו ש-VS Code, GitHub Copilot ו-Node.js מותקנים; (2) פתחו תיקייה ריקה ו-repository חדש; (3) ב-Ask Mode חקרו מה צריך באפליקציית מעקב-זמן; (4) עברו ל-Plan Mode, תארו את היעד וקבלו תוכנית; (5) צרו .github/copilot-instructions.md תמציתי; (6) לחצו Start Implementation ל-Agent Mode; (7) הריצו npm run dev ובדקו; (8) תקנו ע"י תיאור סימפטומים; (9) לחצו Keep ו-commit; (10) פרסו ל-GitHub Pages. רוצים בסיס תיאורטי לפני? עברו על המודול החינמי של Microsoft Learn.

<b>הכלי קיים, חינמי, ורשמי. ההבדל היחיד בין 'יש לי רעיון' ל-'יש לי אפליקציה חיה' הוא לפתוח את Copilot ולתאר את התוצאה — היום.</b>