1. מבוא
סקירה כללית
איפה מתחילים לבנות באמצעות AI היום? לרובנו, זה מתחיל בשאילתה פשוטה או באב טיפוס. Google AI Studio מציע מצב בנייה (שנקרא גם 'תכנות בשיטת Vibe coding') שמאפשר לכם לתכנן, לבדוק ולבנות אפליקציות אינטרנט מלאות באמצעות יצירת קוד שמבוססת על מודלים של Gemini.
ב-Codelab הזה תבנו משחק וידאו מבוסס-אינטרנט עם תורות, באמצעות מסד נתונים של Firestore עם Event Sourcing (כדי לשמור פעולות במשחק כרצף של אירועים, כך שהשחקנים יוכלו לראות את היסטוריית המשחקים ולחזור לתורות קודמות) ואימות ב-Firebase לצורך התחברות משתמשים. הסוכן ב-AI Studio יגדיר את כל שירותי ה-backend ויכתוב את ה-frontend, את הלוגיקה של מקורות האירועים ואת קוד האינטראקציה עם מסד הנתונים. אחרי שהאפליקציה תהיה מוכנה, תוכלו לפרוס אותה ישירות ל-Cloud Run בלחיצה אחת.
הפעולות שתבצעו:
- מזינים הנחיה ל-Google AI Studio כדי ליצור אב טיפוס לאפליקציית אינטרנט של משחק וידאו מרובה משתתפים מבוסס-תורות.
- כדאי להטמיע תמיכה בקוד משחק קצר שניתן לשיתוף או בקישור להצטרפות, כדי לאפשר לחברים להתחבר לאותו משחק.
- הטמעת אחסון של מסד נתונים ב-Firestore עם דפוס של מקור אירועים כדי לעקוב אחרי היסטוריית המשחקים ולאפשר חזרה בזמן במשחק (ביטול או הפעלה מחדש של תורות).
- מגדירים ומפעילים את השילוב עם Firebase כדי להקצות מסד נתונים של Firestore ולהגדיר אימות באמצעות כניסה לחשבון Google.
- בודקים את האפליקציה בארגז החול של התצוגה המקדימה האינטראקטיבית.
- פורסים את האפליקציה ב-Cloud Run ישירות מממשק המשתמש של Google AI Studio.
מה תלמדו
- איך משתמשים במצב Build ב-Google AI Studio כדי ליצור אב-טיפוס במהירות לשירות משחקים מלא באמצעות שפה טבעית.
- איך מטמיעים דפוס ארכיטקטוני של מקור אירועים באמצעות Cloud Firestore לאחסון היסטוריית המשחק.
- איך Google AI Studio מגדיר אוטומטית שילובים של Firebase Firestore ואימות.
- איך פורסים את האפליקציה שלכם ב-AI Studio כקונטיינר ללא שרת ב-Cloud Run.
- איך בודקים רשומות במסד הנתונים ואת סטטוס האבטחה במסוף Firebase.
2. הגדרת הפרויקט
לפני שמפעילים את AI Studio, צריך לוודא שהחשבון עומד בדרישות המוקדמות.
פרטי חשבון Google ומידע על השכבה
- אם עדיין אין לכם חשבון Google, צרו חשבון Google.
- טיפ: אם אפשר, כדאי להשתמש בחשבון Google אישי למעבדה הזו. יכול להיות שבחשבונות קבוצתיים, ארגוניים או בית ספריים נאכפת מדיניות Workspace שמשביתה תכונות ניסיוניות או שילובים עם הענן.
- בודקים את פרטי החיוב של הפריסות:
- רמת ההתחלה של Google Cloud: מאפשרת לפרסם עד שתי אפליקציות full-stack באזור נבחר ללא עלות, בלי להגדיר חשבון חיוב מלא ב-Google Cloud.
- פריסה רגילה: מתחברת לפרויקט בענן קיים בתשלום ב-Google Cloud ומרחיבה את מגבלות האחסון, משאבי ה-CPU וממשקי ה-API.
3. יצירת משחק וידאו מבוסס-תורות במצב הבנייה של AI Studio
בואו ניצור את מעטפת האפליקציה ונבקש מעוזר התכנות שמבוסס על AI ליצור אבטחה, לוגיקה של משחק ושכבות של התמדה שמבוססות על מקורות אירועים.
- עוברים אל החלונית Apps (אפליקציות) ב-Google AI Studio ולוחצים על New App (אפליקציה חדשה).
- בתיבת הפרומפט של הצ'אט, מזינים את התיאור של אפליקציית משחק הווידאו מבוסס-התורות:
Build a web-based, turn-based Tic-Tac-Toe game using Firebase as a backend. Users must be able to securely sign in using Google Sign-In, start a new game match, make moves, and play against an AI player or another user. Any algorithm used for the game opponent AI should use simple algorithms like min/max and the app should not make any calls to an LLM like the Gemini API. To support multiplayer matches, the application must generate a short game code or share link that players can easily copy and send to a friend to join the match. Use Firestore and an event sourcing pattern to save a history of every move (turn) as a separate event document in a subcollection under the game document. The application must reconstruct the current game state by replaying these events, and must allow users to view previous turns and opt to restore/roll back the game to a prior turn's state. - לוחצים על Build (יצירה) כדי להתחיל בתהליך יצירת האפליקציה.
כשהסוכן של AI Studio מזהה שיש צורך באחסון מסד נתונים ובכניסה מאובטחת של משתמשים, הוא מפעיל את תהליך ההגדרה האוטומטי של Firebase.
- אחרי דקה בערך, כרטיס שילוב עם האפשרות הפעלת Firebase קופץ במרחב העבודה.
- לוחצים על הלחצן הפעלת Firebase כדי לאשר את התנאים וההגבלות.
- הסוכן יבצע את ההגדרה ברקע. הפרטים הטכניים:
- מוקצה מופע של מסד נתונים ב-Firestore.
- אימות ב-Firebase מופעל עם כניסה באמצעות חשבון Google.
- הוגדרה תצורה של חשבון שירות (למשל, יצירת
src/lib/firebase.tsשמכיל פרטי כניסה ל-API). - נוסף
firestore.rulesשמכיל גבולות אבטחה שמוגדרים כברירת מחדל (כללי בידוד משתמשים).
4. בדיקה ושיפורים
לפני שמפעילים את השירות, כדאי להריץ בדיקות אימות בתצוגה המקדימה האינטראקטיבית.
- פותחים את חלונית התצוגה המקדימה ב-Google AI Studio.
- לוחצים על הלחצן Login (כניסה) כדי להפעיל את האימות של הכניסה לחשבון Google בסביבת הארגז.
- הערה לגבי תיקון שגיאות: במהלך יצירה או בדיקה, יכול להיות שתיתקלו מדי פעם בבעיות בזמן ריצה, בשגיאות קומפילציה או בכשלים בהרשאות של Firestore בגלל חוסר התאמה של כללי האבטחה. במקרה כזה, ב-AI Studio יוצג כפתור Fix (תיקון) בצ'אט, שמאפשר לכם לבקש מהסוכן לאבחן ולתקן את הבעיה באופן אוטומטי.
- אחרי הכניסה לחשבון, מתחילים משחק חדש, מעתיקים את קוד המשחק המקוצר או את קישור השיתוף שנוצרו ומוודאים שאפשר להשתמש בהם כדי להצטרף למשחק.
- מבצעים כמה מהלכים ומוודאים שהיסטוריית המשחקים מוצגת בצורה תקינה.
- נסו לחזור לתורות קודמות במשחק. מוודאים שהלוח או המצב מתעדכנים כך שישקפו את הנקודה הקודמת בהיסטוריית המשחק, ומוודאים שאפשר לשחזר או לחזור למצב הזה.
- אם רוצים לשנות את הסגנון או את אופן הפעולה, צריך לתת הנחיות לסוכן בחלון הצ'אט. לדוגמה:
"Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?""Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
- מחכים שהסוכן יעדכן את בסיס הקוד ובודקים את דפדפן התצוגה המקדימה כדי לראות את העדכונים.
5. פריסה ב-Cloud Run
אחרי שהאב-טיפוס מתפקד באופן מלא, פורסים אותו כשירות ציבורי ב-Cloud Run.
- בפינה השמאלית העליונה של Google AI Studio, לוחצים על הלחצן פרסום כדי להפעיל את אשף הפריסה.
- לוחצים על Get Started (תחילת העבודה) כדי להגדיר את הפרויקט ב-Google Cloud.
- מוודאים שהתפריט הנפתח Google Cloud Project תואם לפרויקט ששייכתם לסביבת העבודה.
- AI Studio ייצור באופן אוטומטי מזהה שירות ייחודי למופע Cloud Run.
- אפשר גם לציין קידומת מותאמת אישית של כתובת URL של
.ai.studio(למשל,your-portfolio-name.ai.studio) כחלק מהגדרת הפריסה.
- אם זו הפעם הראשונה שאתם מבצעים פריסה ואתם משתמשים בפרמטרים סטנדרטיים של Google Cloud, יכול להיות שתתבקשו לציין סוג ארגון ולספק פרטי חיוב.
- לוחצים על פרסום האפליקציה.
- השלבים של בניית הקונטיינר, רישום הקונטיינר ופריסת השירות מתבצעים ברקע. בדרך כלל התהליך הזה מסתיים תוך 2-4 דקות.
- כשהפריסה מסתיימת, מעתיקים את כתובת ה-URL של האפליקציה שנוצרה ועוברים לקישור של האפליקציה הפעילה בכרטיסיית דפדפן.
- אפשר לבדוק את אפליקציית האינטרנט הפעילה בדפדפן.
6. בדיקה במסוף Firebase
כדאי לבדוק את המבנה כדי לראות איך סכימות הנתונים והמשתמשים מתועדים.
- עוברים אל מסוף Firebase.
- בוחרים את הפרויקט (שמופיעה בו התווית
AI Studioאו מזהה הפרויקט שקושר באופן ידני). - בחלונית הניווט הימנית, בוחרים באפשרות Build > Firestore Database (פיתוח > מסד נתונים של Firestore):
- צפייה באוספים ובמסמכים של מסד הנתונים שנוצרו על ידי האפליקציה.
- מוודאים שלכל מסמך יש מזהה בעלים שתואם לפרטי האימות של המשתמש הפעיל.
- בכרטיסייה Security בחלונית Firestore, אפשר לבדוק את הנחיות האבטחה שנוצרו אוטומטית ומגבילות את הרשאות הקריאה והכתיבה לבעלי מסמכים מאומתים.
- כדי לראות את רשימת פרטי הכניסה הפעילים של המשתמשים שאותה המערכת מאכלסת במהלך בדיקות הכניסה, עוברים אל אבטחה > אימות.
7. מחיקה
כדי להימנע מחיובים בלתי צפויים או כדי לפנות משאבים ב-Workspace:
- ב-Google AI Studio, עוברים אל דף האפליקציות.
- מחפשים את האפליקציה ברשת או ברשימה.
- כדי למחוק את מצב האפליקציה ולבטל את פרסום השירות מ-Cloud Run, לוחצים על סמל האשפה.
- אם פרסתם באמצעות פרויקט רגיל ואתם רוצים להשבית את כל המשאבים באופן סופי, אתם יכולים לעבור אל הגדרות הפרויקט במסוף Google Cloud ולמחוק את הפרויקט הבסיסי.
8. סיכום
מעולה! תכננת, פיתחת והטמעת משחק וידאו מבוסס-תורות ישירות מ-Google AI Studio.
כדי לקבל את התג Completed Builder Journey, לוחצים על הקישור הזה.
כדי להמשיך בתהליך, כדאי לעבור אל goo.gle/builders ולנסות את ה-Lab הבא.