הערות מרצה - שיעור 1

שתף מסך עם משחק Snake רץ ב-Preview - ודא שהמשחק צבעוני ומושך "שלום לכולם. אני רוצה שתניחו את העטים, תעזבו את המקלדות ורק תסתכלו על המסך שלי." [השהייה - תנו לתלמידים להתמקד] "אתם רואים את הנחש הזה שזז כאן? המשחק הזה, ה-Snake הקלאסי, הוא משהו שעד לפני חצי שנה, אם הייתם רוצים לבנות אותו מאפס, המסלול שלכם היה נראה ככה:" [השהייה דרמטית] "הייתם נרשמים לקורס תכנות, לומדים חודשיים מה זה משתנים, מה זה לולאות, שוברים את השיניים על סינטקס של JavaScript באנגלית טכנית, ורק אחרי חודשים ארוכים של תסכול – אולי הייתם מצליחים לגרום לריבוע ירוק לזוז על מסך שחור."

"אבל העולם השתנה. את המשחק שאתם רואים כרגע, בניתי בפחות מ-4 דקות."

"והחלק המטורף? לא כתבתי אפילו שורת קוד אחת. לא פתחתי ספר לימוד, לא חיפשתי בגוגל 'איך בונים משחק', ולא התעסקתי עם נקודה-פסיק שחסרה בשורה 40."

"ברוכים הבאים לקורס פיתוח משחקים עם AI. ב-40 הדקות הקרובות, אני לא הולך ללמד אתכם לתכנת. אני הולך ללמד אתכם לנהל."

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

"אז תישענו אחורה, תוודאו שאתם רואים את המסך שלי טוב, ובואו נתחיל."

הצג את השקף עם שתי העמודות - ישן (אדום) וחדש (ירוק) "תסתכלו על ההבדל. בצד האדום - עולם ישן. חודשים של לימוד, שבירת שיניים, והתוצאה? ריבוע שזז. בצד הירוק - עולם חדש. דקות ספורות, בלי קוד, ואתם מקבלים משחק שלם עם עיצוב וצבעים."

"המשפט שאני רוצה שתזכרו: אנחנו לא לומדים לתכנת. אנחנו לומדים לנהל."

"כמו שמנכ"ל לא חייב לדעת לרתך ברזל כדי לנהל מפעל, אתם לא חייבים לדעת JavaScript כדי לבנות משחק. אתם צריכים לדעת מה אתם רוצים ואיך לבקש את זה."

"לפני שאני פותח את התוכנה, אנחנו חייבים ליישר קו על השפה. יש שלושה מושגים שתשמעו אותי אומר הרבה."

"המושג הראשון: IDE. באנגלית זה Integrated Development Environment, בעברית - סביבת פיתוח."

"תחשבו על זה כמו שולחן הניתוחים של המנתח. האור בדיוק מכוון, כל הכלים מסודרים, הציוד מוכן. זה המקום שבו הכל קורה."

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

פתח את התוכנה (New Window) - מסך ריק "תסתכלו על המסך. זו התוכנה. ככה היא נראית כשהיא ריקה."

"בצד שמאל – סייר הקבצים. כרגע ריק, כי לא יצרנו כלום עדיין."

"במרכז – אזור העריכה. כרגע גם ריק."

"אבל הקסם נמצא בצד ימין – תיבת השיחה עם הסוכן. כאן בדיוק נעבוד."

"שימו לב: בגישה הישנה, הייתי צריך ליצור קובץ ידנית, לקרוא לו index.html, ולהתחיל לכתוב קוד. בגישה החדשה? אני לא נוגע בקבצים. אני ניגש ישר לשיחה."

"המושג השני, והכי חשוב: Agent - סוכן."

"עד היום הכרתם צ'אט-בוטים, כמו ChatGPT. אתם שואלים שאלה, הוא עונה תשובה. זה נחמד, אבל זה פסיבי."

"סוכן הוא משהו אחר לגמרי. סוכן הוא ישות שיודעת לבצע פעולות. הוא לא רק כותב טקסט. הוא יודע ליצור קבצים, למחוק דברים, להריץ בדיקות." [הפסקה - תנו לרעיון לחלחל] "במשל שלנו לאתר בנייה: אם פעם הייתם צריכים לבנות את הקיר בעצמכם לבנה-אחרי-לבנה, היום יש לכם פועל מיומן. אתם לא צריכים לדעת להחזיק כף טיח, אתם רק צריכים לדעת להגיד לו: 'תבנה קיר בגובה 2 מטר בצבע לבן'."

"המושג השלישי: Prompt - הנחיה. זו השפה שבה אנחנו מדברים עם הסוכן."

"אם תגידו לפועל שלכם 'תבנה בית', אתם עלולים לקבל אוהל או ארמון. וזה כנראה לא מה שרציתם." [חכו לחיוכים] "האומנות שנלמד כאן היא איך לכתוב הנחיה מדויקת: 'תבנה בית פרטי, קומה אחת, גג רעפים אדום, דלת עץ'. ככל שנהיה יותר מדויקים, הסוכן יעבוד טוב יותר."

"אוקיי, אני הולך להדגים לכם עכשיו איך בונים את המשחק מאפס. שימו לב למבנה של הפרומפט שאני כותב:"

"מרכיב ראשון - התפקיד: אני מתחיל בלהגיד לסוכן מי הוא. 'You are an expert game developer'. למה? כי ככה הוא 'נכנס לתפקיד' ומתמקד בפיתוח משחקים."

"מרכיב שני - המשימה: מה אני רוצה? 'Create a classic Snake game'. פשוט, ברור."

"מרכיב שלישי - אילוצים: 'Generate a single file'. למה? כי אנחנו מתחילים. לא צריך סיבוכים."

"מרכיב רביעי - עיצוב: 'Dark background, Neon Green Snake'. בלי זה, הוא היה יכול לתת לנו ריבועים אפורים על רקע לבן. ואנחנו רוצים משהו שנראה מגניב."

הקלד את הפרומפט בחלונית הצ'אט ולחץ Enter "תראו מה קורה עכשיו. אני הרמתי את הידיים מהמקלדת." [הדגש פיזית - הרם ידיים מהמקלדת] "אתם רואים את הטקסט שרץ במהירות? זה הסוכן עובד. הוא כותב עכשיו שלוש שפות במקביל - HTML, CSS ו-JavaScript."

חכה שהקוד יסיים להיכתב, ואז לחץ Preview "הוא סיים. עכשיו אני לוחץ על Preview..." [לחץ ותן לתלמידים לראות את התוצאה] "וואו. תראו את זה."

"יש לנו רקע כהה? כן. יש נחש ירוק זוהר? כן. יש ניקוד? כן."

שחק כמה שניות - הזז את הנחש, אכול תפוח "בואו נשחק רגע... הנחש זז, הוא אוכל, הוא גדל."

"בתוך פחות מ-2 דקות, יצרנו מוצר עובד."

"אבל... וזה אבל גדול. זה עדיין לא מושלם. משחקים אף פעם לא מושלמים במכה הראשונה."

"הסוכן כתב עכשיו קוד בשלוש שפות. בואו נבין מה כל אחת עושה:"

"HTML - זה השלד. כמו שלד של בניין - הוא קובע שיש פה 'אזור משחק', שיש 'טקסט ניקוד', שיש 'כותרת'."

"CSS - זה העיצוב. זה מה שהופך את השלד למשהו יפה. הרקע הכהה, הנחש הירוק הזוהר, הגופן הארקייד - הכל CSS."

"JavaScript - זה המוח. זה מה שגורם לנחש לזוז כשלוחצים חץ. זה מה שגורם לו לגדול כשהוא אוכל. זה מה שיוצר את הלוגיקה של המשחק."

"אתם לא צריכים לזכור את כל זה. הסוכן יודע את שלוש השפות. אתם רק צריכים לדעת שהן קיימות."

שחק במשחק בכוונה כדי להתנגש בקיר "אוקיי, התנגשתי בקיר. שימו לב מה קרה." [הצבע על המסך] "הנחש פשוט... עצר. אין שום הודעה. אין Game Over. אין כפתור Restart. אני צריך לעשות ריענון לכל העמוד."

"מבחינת חוויית משתמש - זה גרוע. שחקן שייתקל בזה יחשוב שהמשחק מקולקל."

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

"הדבר הכי חשוב שתלמדו: פיתוח הוא מעגל. 1. בונים. 2. בודקים. 3. משפרים. וחוזרים."

כתוב בצ'אט את הפרומפט השני "אני חוזר לצ'אט ופשוט ממשיך את השיחה: 'The game is great, but when I crash into the wall, nothing happens. Please add a Game Over screen with the final score and a Restart button.'"

"שימו לב: אני מתאר את הבעיה ואת הפתרון. לא צריך להיות מתכנת - צריך לדעת להגיד מה לא עובד ומה צריך לקרות."

הרץ ובדוק - הדגם שהבעיה תוקנה "בואו נבדוק... הופ! קפץ חלון Game Over. הציון מופיע. יש כפתור Restart. פתרנו באג בלי לגעת בקוד, בתוך 20 שניות."

"שני מושגים אחרונים ליום:"

"Context Aware - שמתם לב שהסוכן לא כתב את כל המשחק מחדש? הוא מודע להקשר. הוא קרא את הקוד הקיים, הבין מה יש, ושינה רק את מה שצריך. זה כמו לבקש מנגר לתקן מגירה בארון - הוא לא בונה ארון חדש."

"UX - חוויית משתמש. איך השחקן מרגיש כשהוא משתמש במוצר שלכם. הנחש שנעצר בלי הודעה? UX גרוע. מסך Game Over יפה עם כפתור Restart? UX טוב."

"כמנהלי מוצר, אתם צריכים להיות הנציגים של השחקן. תשחקו, תרגישו מה לא עובד, ותבקשו מהסוכן לתקן."

עצור שיתוף מסך, חזור למבט מצלמה מלא "אז מה ראינו כאן ב-35 הדקות האחרונות?"

"ראינו איך הופכים רעיון מופשט - 'בא לי סנייק' - למוצר עובד."

"ראינו שקוד הוא כבר לא מחסום, אלא משהו שמיוצר עבורנו."

"למדנו שפיתוח זה תהליך של דו-שיח - אנחנו מבקשים, בודקים, ומבקשים תיקון."

"עכשיו – תורכם."

"עוד רגע נפתח את החדרים. בכל חדר יחכה לכם מתרגל. יש לכם משימה אחת פשוטה ל-20 הדקות הקרובות: לבנות את הסנייק הראשון שלכם."

"התהליך:"
"1. המתרגלים יעזרו לכם להתקין את התוכנה."
"2. תקבלו את הפרומפט שהשתמשתי בו - אני שולח עכשיו גם בצ'אט."
"3. תריצו אותו, תראו את המשחק עובד."
"4. למתקדמים: נסו לשנות משהו אחד - צבע, מהירות, או טקסט."

"אל תפחדו לטעות. אם הסוכן כותב קוד לא טוב - תבקשו ממנו לתקן. זה חלק מהלימוד."

"אני רוצה שבסוף התרגול, לכל אחד מכם יהיה משחק שהוא בנה במו ידיו על המחשב."

"מוכנים להפוך משחקנים ליוצרים? יאללה, פותחים חדרים. בהצלחה!"