1. סקירה כללית
בשיעור Codelab הזה נסביר איך ליצור אפליקציית אינטרנט של "Snake & Beats" – משחק Snake בסגנון רטרו עם נגן מוזיקה משולב. תשתמשו ב-Gemini כדי ליצור אפליקציית React בקובץ יחיד עם אסתטיקה של ניאון, ואז תנהלו את הגרסאות שלה ותפרסו אותה ב-Cloud Run.
הפעולות שתבצעו:
- יצירה והנחיה: אפשר להשתמש במצב 'יצירה' ב-Google AI Studio כדי ליצור משחק פעיל מהנחיה אחת.
- שיפור באמצעות הוראות מערכת: כדי להגדיר אישיות קבועה לעריכות עתידיות, אפשר להשתמש ב'בדיקת אווירה' של ה-AI.
- שמירה ב-GitHub: אפשר להפעיל מאגר חדש ישירות מ-AI Studio.
- פריסה ב-Cloud Run: אפשר להעביר את המשחק ל-Google Cloud Run בלחיצה אחת.
מה תלמדו
- איך משתמשים במצב Build ב-Google AI Studio כדי ליצור אב-טיפוס של אפליקציות במהירות.
- איך משתמשים בהוראות מערכת כדי לשמור על סגנון עקבי של כתיבת קוד במהלך איטרציה.
- איך מקשרים את Google AI Studio ל-GitHub ול-Cloud Run.
הדרישות
- דפדפן האינטרנט Chrome
- חשבון Gmail
- פרויקט ב-Cloud עם חיוב מופעל
- מפתח Gemini API
- חשבון GitHub
2. לפני שמתחילים
- ב-מסוף Google Cloud, בדף לבחירת הפרויקט, בוחרים או יוצרים פרויקט ב-Google Cloud.
- הקפידו לוודא שהחיוב מופעל בפרויקט שלכם ב-Cloud. כך בודקים אם החיוב מופעל בפרויקט
3. בנייה והנחיה (הליבה)
נתחיל בבנייה של האפליקציה כולה בבת אחת. מתחברים אל Google AI Studio ומוודאים שאתם נמצאים בממשק הבנייה.
- מזינים את ההנחיה ליצירת תמונה: מדביקים את ההנחיה המפורטת הבאה בתיבת הצ'אט:
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.
- בחירת המודל: בחלונית ההגדרות בצד שמאל, מוודאים שהמודל Gemini 3.0 Pro (או מודל התצוגה המקדימה העדכני) נבחר ליצירת הקוד הכי מהירה.
- הפעלה: לוחצים על Build (או מקישים על Cmd + Enter).
- תצוגה מקדימה: Gemini ייצור את הקוד ובדרך כלל יציג תצוגה מקדימה בזמן אמת בצד שמאל (כפי שמוצג בהמשך):
4. שיפור באמצעות הערות, תמונות וקול
לפעמים קשה לתאר שינוי חזותי במילים. מצב ההערות מאפשר לכם לצייר בתצוגה המקדימה של האפליקציה כדי להעביר את החזון שלכם באופן מיידי.
שימוש במצב הערות
- הפעלת מצב ההערות: בממשק של AI Studio (בודקים את חלונית הצד או את סרגל הכלים התחתון של חלון התצוגה המקדימה), בוחרים בכלי ההערות או בכלי העריכה.
- סימון האפליקציה בתגי עיצוב:
- ציור: משתמשים בכלי התיבה כדי לצייר מלבן סביב מונה הנקודות.
- הערה: מקלידים הנחיה שמצורפת לתיבה: "הגדל את הגופן הזה, שיהיה דיגיטלי ועם גליצ'ים".
- סקיצה: משתמשים בכלי החץ כדי להצביע על הלחצנים 'הפעלה' ו'השהיה'.
- תגובה: סוג: "שנה את הסמלים האלה לסמלי ניאון זוהרים".
- לשפר את התוצאה: לוחצים על 'הוספה לצ'אט' ואז על שליחת ההנחיה. Gemini יפרש את הסימונים החזותיים ואת פקודות הטקסט כדי לעדכן את הקוד.
- אימות: צפייה בעדכון למכשירים בתוכנית ההפצה המקדימה בשידור חי. המשוב החזותי שלכם אמור להופיע עכשיו בקוד.
קלט קולי (האווירה המדוברת)
לפעמים קל יותר להגיד את ה'אווירה' מאשר לכתוב אותה.
- פעולה: לוחצים על סמל המיקרופון בסרגל הקלט (לצד הלחצן +).
- אומרים: "היי, האנימציה של הנחש איטית מדי. תגביר את המהירות ותגרום לזנב להשאיר שובל זוהר".
- שליחה: Gemini ממיר את הדיבור שלכם לטקסט ומחיל את השינויים.
5. הגדרת הוראות למערכת ובנייה מחדש
בניגוד להנחיה רגילה, הוראת מערכת נשארת קבועה לאורך כל הסשן. זה המקום הכי טוב להגדיר בו את תקני הקידוד, מוסכמות השמות או את הזהות החזותית הספציפית שלא צריכה להשתנות.
- פותחים את ההגדרות המתקדמות: בממשק של Google AI Studio (מצב בנייה), מחפשים את התיבה System Instructions (הוראות מערכת). אם הוא לא מופיע, לוחצים על סמל ההגדרות (גלגל שיניים) או על 'הגדרות מתקדמות' בחלק העליון או בצד של חלונית הצ'אט.
- מוסיפים את ההוראה 'אווירה': מדביקים את ההוראה הבאה בתיבת הטקסט. ההגדרה הזו יוצרת דמות של 'אומנות גליצ'ים' במשחק שלנו:
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
- הפעלת השינוי: שינוי ההוראה למערכת לא גורם לשכתוב הקוד באופן אוטומטי. צריך להנחות את Gemini להחיל את הכללים החדשים.
- סוגרים את חלונית ההגדרות.
- בתיבת הקלט של הצ'אט או ההנחיה, מקלידים: "Rebuild the application UI to strictly follow the new System Instructions." (בנה מחדש את ממשק המשתמש של האפליקציה בהתאם להוראות המערכת החדשות).
- לוחצים על Run / Send (הפעלה / שליחה).
- בודקים את העדכון: Gemini יאשר את השינוי.
6. שמירה ב-GitHub
במקום להוריד קבצים ולהתמודד עם שורת הפקודה, נשתמש בשילוב המובנה של GitHub כדי להפעיל מאגר באופן מיידי.
- איתור השילוב: בסרגל הכלים העליון של ממשק Google AI Studio, מחפשים את סמל GitHub שנמצא בין סמלי ההורדה והפריסה.
- קישור החשבון: לוחצים על הסמל. אם זו הפעם הראשונה, תתבקשו לאשר ל-Google AI Studio לגשת לחשבון GitHub שלכם.
- יצירת המאגר: תופיע תיבת דו-שיח עם הכותרת 'מילוי הפרטים הבאים כדי ליצור את המאגר'.
- שם המאגר: מזינים שם, למשל, "AI-generated Snake game with React" (משחק נחש שנוצר על ידי AI עם React).
- תיאור המאגר: מזינים את תיאור המאגר.
- חשיפה: בוחרים באפשרות 'גלוי לכולם' (כדי שתוכלו לשתף אותו בקלות) או 'פרטי'.
- דחיפה ל-GitHub: לוחצים על הלחצן 'יצירת מאגר Git'.
7. פריסה ב-Cloud Run
עכשיו שהאפליקציה מוכנה ונשמרה ב-GitHub, אפשר לפרוס אותה ב-Cloud Run.
- הפעלת הפריסה: לוחצים על הלחצן שמודגש למטה. הוא ממוקם בפינה השמאלית העליונה של דף AI Studio.
- בחירת פרויקט: לוחצים על התפריט הנפתח 'בחירת פרויקט ב-Cloud' ובוחרים את הפרויקט הרצוי.
- פתרון בעיות: אם אתם לא מוצאים את הפרויקט בתפריט הנפתח, לוחצים על 'ייבוא פרויקט' ובוחרים את הפרויקט בחלונית 'ייבוא פרויקט'.
- אימות החיוב: אחרי שבוחרים את הפרויקט, המערכת מאמתת שהחיוב מופעל בו. האימות הזה יתבצע באופן אוטומטי כי צירפנו את חשבון החיוב לפרויקט בקטע 'לפני שמתחילים'.
- פריסה: לוחצים על הלחצן 'פריסת האפליקציה' ומחכים עד שהאפליקציה תיפרס ב-Cloud Run. הערה: שם השירות של Cloud Run ייווצר באופן אוטומטי.
- הפריסה אמורה להסתיים תוך כמה דקות, ותקבלו את כתובת ה-URL של האפליקציה. אם תלחצו על כתובת ה-URL, תוכלו לראות את אפליקציית האינטרנט שפרסתם בשידור חי באינטרנט.
8. הסרת המשאבים
כדי לא לצבור חיובים לחשבון Google Cloud על המשאבים שבהם השתמשתם במאמר הזה:
- במסוף Google Cloud, עוברים לדף Manage resources.
- ברשימת הפרויקטים, בוחרים את הפרויקט שרוצים למחוק ולוחצים על Delete (מחיקה).
- כדי למחוק את הפרויקט, כותבים את מזהה הפרויקט בתיבת הדו-שיח ולוחצים על Shut down.
9. מזל טוב
מעולה! סיימתם בהצלחה את תהליך יצירת האפליקציה ב-AI Studio באמצעות קוד, ופרסתם אותה ב-Cloud Run!!
AI Studio היא פלטפורמה אידיאלית לפיתוח ולבדיקה של אפליקציות, שמאפשרת למשתמשים לראות מיד את העיצובים שלהם בפעולה.
השילוב החלק של AI Studio עם Cloud Run מאפשר למשתמשים לפרוס את האפליקציות שלהם בקלות ישירות ב-Google Cloud. השימוש ב-Cloud Run מעניק את כל היתרונות של סביבה ללא שרתים (serverless), ומפשט את המורכבויות והתקורה של ניהול התשתית.