הפעלת אפליקציית האינטרנט של רשימת המשימות באמצעות AI

1. מבוא

סקירה כללית

איפה מתחילים לבנות באמצעות AI היום? לרובנו, זה מתחיל בשאילתה פשוטה או באב טיפוס. ב-Google AI Studio יש מצב בנייה (שנקרא גם "תכנות בשיטת Vibe coding") שמאפשר לכם לתכנן, לבדוק ולבנות אפליקציות אינטרנט מלאות באמצעות יצירת קוד שמבוססת על מודלים של Gemini.

ב-Codelab הזה תבנו אפליקציה שיתופית של רשימת מטלות עם מסד נתונים של Firestore לאחסון מתמיד ועם אימות ב-Firebase לכניסה של משתמשים. הסוכן של AI Studio יגדיר את כל שירותי הקצה העורפי ויכתוב את הקוד של הקצה הקדמי ואת קוד האינטראקציה עם מסד הנתונים. אחרי שהאפליקציה תהיה מוכנה, תוכלו לפרוס אותה ישירות ל-Cloud Run בלחיצה אחת.

הפעולות שתבצעו:

  • מזינים הנחיה ל-Google AI Studio כדי ליצור אב טיפוס של אפליקציית אינטרנט שמאפשרת יצירת רשימת משימות משותפת.
  • מגדירים ומפעילים את השילוב עם Firebase כדי להקצות מסד נתונים של Firestore ולהגדיר אימות באמצעות כניסה לחשבון Google.
  • בודקים את האפליקציה בארגז החול של התצוגה המקדימה האינטראקטיבית.
  • פורסים את האפליקציה ב-Cloud Run ישירות מממשק המשתמש של Google AI Studio.

מה תלמדו

  • איך משתמשים במצב Build ב-Google AI Studio כדי ליצור אב-טיפוס במהירות לשירות Full-Stack באמצעות שפה טבעית.
  • איך Google AI Studio מגדיר באופן אוטומטי שילובים של Firebase Firestore ואימות.
  • איך פורסים את האפליקציה שלכם ב-AI Studio כקונטיינר ללא שרת ב-Cloud Run.
  • איך בודקים רשומות במסד הנתונים ואת סטטוס האבטחה במסוף Firebase.

2. הגדרת הפרויקט

לפני שמפעילים את AI Studio, צריך לוודא שהחשבון עומד בדרישות המוקדמות.

פרטי חשבון Google ופרטי השכבה

  1. אם עדיין אין לכם חשבון Google, צרו חשבון Google.
    • טיפ: אם אפשר, כדאי להשתמש בחשבון Google אישי למעבדה הזו. יכול להיות שחשבונות קבוצתיים, ארגוניים או בית ספריים יאכפו מדיניות של Workspace שמשביתה תכונות ניסיוניות או שילובים עם הענן.
  2. בודקים את פרטי החיוב של הפריסות:
    • רמת ההתחלה של Google Cloud: מאפשרת לפרסם עד שתי אפליקציות full-stack באזור נבחר ללא עלות, בלי להגדיר חשבון חיוב מלא ב-Google Cloud.
    • פריסה רגילה: מתחברת לפרויקט בענן קיים בתשלום ב-Google Cloud ומרחיבה את מגבלות האחסון, משאבי ה-CPU וממשקי ה-API.

3. יצירת אפליקציה לניהול משימות במצב הבנייה של AI Studio

בואו ניצור את מעטפת האפליקציה ונבקש מעוזר התכנות מבוסס ה-AI ליצור שכבות אבטחה והתמדה.

  1. עוברים אל החלונית Apps (אפליקציות) ב-Google AI Studio ולוחצים על New App (אפליקציה חדשה).
  2. בתיבת הפרומפט של הצ'אט, מזינים את התיאור של אפליקציית רשימת המשימות לביצוע: 
    Build a collaborative to-do list application using Firebase as a
backend. Users must be able to securely sign in using Google Sign-In,
view their personal tasks, add new task items, toggle status as
completed, and delete tasks. The database must isolate tasks so users
can only view and modify their own records.
  3. לוחצים על Build (יצירה) כדי להתחיל בתהליך יצירת האפליקציה.

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

  1. אחרי דקה בערך, מופיע כרטיס שילוב עם האפשרות הפעלת Firebase במרחב העבודה.
  2. לוחצים על הלחצן הפעלת Firebase כדי לאשר את התנאים וההגבלות.
  3. הסוכן יבצע את ההגדרה ברקע. הפרטים הטכניים:
    • מוקצה מופע של מסד נתונים ב-Firestore.
    • האימות ב-Firebase מופעל עם כניסה באמצעות חשבון Google.
    • הוגדרה תצורה של חשבון שירות (למשל, יצירת src/lib/firebase.ts שמכיל פרטי כניסה ל-API).
    • נוסף firestore.rules שמכיל גבולות אבטחה שמוגדרים כברירת מחדל (כללי בידוד משתמשים).

4. בדיקה ושיפורים

לפני שמפעילים את השירות, כדאי להריץ בדיקות אימות בתצוגה המקדימה האינטראקטיבית.

  1. פותחים את חלונית התצוגה המקדימה ב-Google AI Studio.
  2. לוחצים על הלחצן Login (כניסה) כדי להפעיל את האימות של הכניסה לחשבון Google בסביבת הארגז.
    • הערה לגבי תיקון שגיאות: במהלך יצירה או בדיקה, יכול להיות שתיתקלו מדי פעם בבעיות בזמן ריצה, בשגיאות קומפילציה או בכשלים בהרשאות של Firestore בגלל חוסר התאמה של כללי האבטחה. במקרה כזה, ב-AI Studio יופיע לחצן Fix בצ'אט, שמאפשר לכם לבקש מהסוכן לאבחן ולתקן את הבעיה באופן אוטומטי.
    מיקום לחצן התיקון ב-Google AI Studio
  3. אחרי שמתחברים, מוסיפים כמה משימות (למשל, 'בדיקת מסמכי Cloud Run', 'השלמת Codelab').
  4. כדי לוודא שהמטפלים בצד הלקוח ומצב מסד הנתונים מתעדכנים בצורה נכונה, מסמנים כמה משימות כהושלמו ומוחקים אחת מהן.
  5. אם רוצים לשנות את הסגנון או את אופן הפעולה, צריך לתת הנחיות לסוכן בחלון הצ'אט. לדוגמה:
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Show a count of remaining incomplete tasks at the footer of the task list."
  6. מחכים שהסוכן יעדכן את בסיס הקוד ובודקים את דפדפן התצוגה המקדימה כדי לראות את העדכונים.

5. פריסה ב-Cloud Run

אחרי שהאב-טיפוס מתפקד באופן מלא, פורסים אותו כשירות ציבורי ב-Cloud Run.

  1. בפינה השמאלית העליונה של Google AI Studio, לוחצים על הלחצן פרסום כדי להפעיל את אשף הפריסה.מיקום לחצן הפרסום ב-Google AI Studio
  2. לוחצים על Get Started (תחילת העבודה) כדי להגדיר את הפרויקט ב-Google Cloud.
    • מוודאים שהתפריט הנפתח Google Cloud Project תואם לפרויקט ששייכתם לסביבת העבודה.
    • ‫AI Studio ייצור באופן אוטומטי מזהה שירות ייחודי למופע Cloud Run.
  3. אם זו הפעם הראשונה שאתם מבצעים פריסה ואתם משתמשים בפרמטרים סטנדרטיים של Google Cloud, יכול להיות שתתבקשו לציין סוג ארגון ולספק פרטי חיוב.
  4. לוחצים על פרסום האפליקציה.
  5. השלבים של בניית הקונטיינר, רישום הקונטיינר ופריסת השירות מתבצעים ברקע. בדרך כלל התהליך הזה מסתיים תוך 2-4 דקות.
  6. כשהפריסה מסתיימת, מעתיקים את כתובת ה-URL של האפליקציה שנוצרה ועוברים לקישור של האפליקציה הפעילה בכרטיסיית דפדפן.
  7. אפשר לבדוק את אפליקציית האינטרנט הפעילה בדפדפן.

6. בדיקה במסוף Firebase

כדאי לבדוק את המבנה כדי לראות איך סכימות הנתונים והמשתמשים מתועדים.

  1. עוברים אל מסוף Firebase.
  2. בוחרים את הפרויקט (שמופיעה בו התווית AI Studio או מזהה הפרויקט שקושר באופן ידני).
  3. בחלונית הניווט הימנית, בוחרים באפשרות Build > Firestore Database (פיתוח > מסד נתונים של Firestore):
    • לצפות באוספים ובמסמכים של מסד הנתונים שנוצרו על ידי האפליקציה.
    • מוודאים שלכל מסמך יש מזהה בעלים שתואם לפרטי האימות של המשתמש הפעיל.
  4. בכרטיסייה Security בחלונית Firestore, אפשר לבדוק את הנחיות האבטחה שנוצרו אוטומטית ומגבילות את הרשאות הקריאה והכתיבה לבעלי מסמכים מאומתים.
  5. עוברים אל אבטחה > אימות כדי לראות את רשימת פרטי הכניסה הפעילים של המשתמשים שאוכלסה במהלך בדיקות הכניסה.

7. הסרת המשאבים

כדי למנוע חיובים בלתי צפויים או כדי לנקות את המשאבים ב-Workspace:

  1. ב-Google AI Studio, עוברים אל דף האפליקציות.
  2. מחפשים את האפליקציה ברשת או ברשימה.
  3. כדי למחוק את מצב האפליקציה ולבטל את פרסום השירות מ-Cloud Run, לוחצים על סמל האשפה.
  4. אם פרסתם באמצעות פרויקט רגיל ואתם רוצים להשבית את כל המשאבים באופן סופי, אתם יכולים לעבור אל הגדרות הפרויקט במסוף Google Cloud ולמחוק את הפרויקט הבסיסי.

8. סיכום

מעולה! תכננתם, פיתחתם ופרסתם אפליקציית אינטרנט שיתופית מלאה ישירות מ-Google AI Studio.

כדי לקבל את התג על השלמת שיעור Lab למפתחים ולמצוא שיעור Lab נוסף להמשך המסע, אפשר לעבור אל goo.gle/builders.

מידע נוסף