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 Console, בדף לבחירת הפרויקט, בוחרים או יוצרים פרויקט ב-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. שיפור באמצעות הערות, תמונות Google וקול
לפעמים קשה לתאר שינוי חזותי במילים. מצב ההערות מאפשר לכם לצייר בתצוגה המקדימה של האפליקציה כדי להעביר את החזון שלכם באופן מיידי.
שימוש במצב הערות
- הפעלת מצב ההערות: בממשק של 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".
- תיאור המאגר: מזינים את תיאור המאגר.
- חשיפה: בוחרים באפשרות 'גלוי לכולם' (כדי שתוכלו לשתף אותו בקלות) או 'פרטי'.
- דחיפה ל-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), ומפשט את המורכבויות והתקורה של ניהול התשתית.