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

1. מבוא

סקירה כללית

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

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

גרסה מוגמרת של אתר תיק עבודות

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

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

מה תלמדו

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

מעדיפים הדרכה מצולמת בסרטון?

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

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

פרטי חשבון ודרגת גוגל

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

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

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

  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. לחץ על כפתור ההתחברות כדי להפעיל את אימות הכניסה של גוגל דרך ארגז החול.
    • הערה על תיקון שגיאות: במהלך יצירה או בדיקה, ייתכן שתיתקלו מדי פעם בבעיות בזמן ריצה, שגיאות קומפילציה או כשלים בהרשאות Firestore עקב חוסר יישור של כללי אבטחה. אם זה קורה, AI Studio מציג כפתור תיקון בצ'אט, שיאפשר לכם לבקש מהסוכן לאבחן ולתקן את הבעיה באופן אוטומטי.
    מיקום כפתור התיקון של גוגל AI Studio
  3. לאחר הכניסה, הוסף מספר משימות (למשל, "סקירת מסמכי Cloud Run", "השלמת קודמעבדה").
  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. לחץ על התחל כדי להגדיר את פרויקט Google Cloud שלך.
    • ודא שהתפריט הנפתח של היעד פרויקט Google Cloud תואם לפרויקט ששייכת לסביבת העבודה שלך.
    • AI Studio ייצור באופן אוטומטי מזהה שירות ייחודי עבור מופע Cloud Run.
    • לחלופין, ניתן לציין קידומת כתובת URL מותאמת אישית של .ai.studio (למשל, your-portfolio-name.ai.studio) כחלק מתצורת הפריסה.
  3. אם זו הפעם הראשונה שאתם פורסים את השירות ואתם משתמשים בפרמטרים סטנדרטיים של Google Cloud, ייתכן שתתבקשו לציין סוג ארגון ולספק פרטי חיוב.
  4. לחץ על פרסם אפליקציה.
  5. שלבי בניית המכולה, רישום המכולה ופריסת השירות מתרחשים ברקע. תהליך זה מסתיים בדרך כלל תוך 2-4 דקות.
  6. לאחר סיום הפריסה, העתיקו את כתובת האתר של האפליקציה שנוצרה ובקרו בקישור האפליקציה הפעילה בכרטיסייה בדפדפן.
  7. בדוק את אפליקציית האינטרנט החיה בדפדפן שלך!

6. בדיקה בקונסולת Firebase

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

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

7. מחיקה

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

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

8. סיכום

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

כדי לקבל את התג Completed Builder Journey, לוחצים על הקישור הזה.

כדי להמשיך בתהליך, כדאי לעבור אל goo.gle/builders ולנסות את ה-Lab הבא.

מידע נוסף