1. סקירה כללית
ב-Codelab הזה תפתחו את אפליקציית האינטרנט Snake & Beats, משחק נחש בסגנון רטרו עם נגן מוזיקה משולב. תשתמשו ב-Gemini כדי ליצור אפליקציית React בקובץ יחיד עם אסתטיקה של ניאון, ואז תנהלו את הגרסאות ותפרסו אותה ב-Cloud Run.
הפעולות שתבצעו:
- יצירה והנחיה: אפשר להשתמש במצב 'יצירה' ב-Google AI Studio כדי ליצור משחק פעיל מהנחיה אחת.
- שיפור באמצעות הוראות מערכת: כדי להגדיר אישיות קבועה לעריכות עתידיות, אפשר להשתמש ב'בדיקת אווירה' של ה-AI.
- שמירה ב-GitHub: אפשר להפעיל מאגר חדש ישירות מ-AI Studio.
- פריסה ב-Cloud Run: אפשר להעביר את המשחק ל-Google Cloud Run בלחיצה אחת.
מה תלמדו
- איך משתמשים במצב בנייה ב-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' ובוחרים את הפרויקט הרצוי.
- פתרון בעיות: אם אתם לא מוצאים את הפרויקט בתפריט הנפתח, לוחצים על 'ייבוא פרויקט' ובוחרים את הפרויקט בחלונית 'ייבוא פרויקט'.
- אימות החיוב: אחרי שבוחרים את הפרויקט, המערכת מאמתת שהחיוב מופעל בו. האימות הזה יתבצע אוטומטית כי צירפנו את חשבון החיוב לפרויקט בקטע 'לפני שמתחילים'.
- פריסה: לוחצים על הלחצן Deploy app (פריסת האפליקציה) ומחכים עד שהאפליקציה תיפרס ב-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), ומפשט את המורכבויות והתקורה של ניהול התשתית.