Firebase MCP ב-Firebase Studio

1. סקירה כללית

ב-codelab הזה תתרגלו שימוש בסוכן ליצירת אב טיפוס של אפליקציה יחד עם שרת Firebase MCP ב-Firebase Studio כדי ליצור אפליקציית אינטרנט מלאה שמשתמשת ב-Firebase Realtime Database.

קובץ GIF מונפש של האפליקציה הסופית

מה תלמדו

  • יצירת אפליקציית אינטרנט סטטית באמצעות סוכן ליצירת אב טיפוס של אפליקציות
  • הגדרת שרת Firebase MCP
  • הוספת Firebase Realtime Database באמצעות Firebase MCP

מה צריך להכין

  • דפדפן לבחירתכם, כמו Google Chrome
  • חשבון Google ליצירה ולניהול של פרויקט Firebase

2. יצירת האפליקציה באמצעות סוכן ליצירת אב טיפוס של אפליקציה

הסוכן App Prototyping משתמש ב-Gemini ב-Firebase כדי לבנות את האפליקציה. גם כשמשתמשים בהנחיות זהות, התוצאות עשויות להיות שונות. אם נתקעתם, סיפקנו קבוצה של קבצים שתוכלו להוסיף לסביבת העבודה כדי להמשיך את המעבדה בכמה נקודות ביקורת לאורך ה-codelab הזה.

  1. מתחברים לחשבון Google, מצטרפים לתוכנית Google למפתחים ופותחים את Firebase Studio.
  2. בשדה Prototype an app with AI (יצירת אב טיפוס של אפליקציה באמצעות AI), מזינים תיאור של האפליקציה:
    An app for a picker wheel that allows custom input.
  3. לוחצים על שיפור ההנחיה. בודקים את ההנחיה המשופרת.
  4. לוחצים על אב טיפוס עם AI.
  5. בודקים את תוכנית האפליקציה המוצעת. לוחצים על התאמה אישית של סמל העריכה של Codiconהתאמה אישית כדי לערוך אותו.
  6. לוחצים על שמירה.
  7. אחרי שהתוכנית מסיימת לשלב את העדכונים, לוחצים על יצירת אב טיפוס של האפליקציה הזו.תוכנית לאפליקציה
  8. אם התוכנית מכילה רכיבי AI, הסוכן יבקש מכם מפתח Gemini Gemini. מוסיפים מפתח Gemini API משלכם או לוחצים על יצירה אוטומטית כדי ליצור מפתח Gemini API. אם לוחצים על יצירה אוטומטית, Firebase Studio יוצר פרויקט Firebase ומפיק בשבילכם מפתח Gemini API.
  9. סוכן יצירת אב טיפוס של אפליקציות משתמש בתוכנית כדי ליצור גרסה ראשונה של האפליקציה. בסיום, התצוגה המקדימה של האפליקציה מופיעה לצד ממשק של Gemini Chat. כדאי להקדיש רגע לבדיקה של האפליקציה. אם נתקלתם בשגיאות, לחצו על תיקון שגיאה בצ'אט כדי לאפשר לנציג לתקן את השגיאות בעצמו.

3. הגדרת פלטפורמת ניהול ההסכמה (MCP) של Firebase ב-Firebase Studio

שרת ה-MCP של Firebase מרחיב את היכולות של סוכן יצירת אב טיפוס לאפליקציות, ומספק כלים שהסוכן יכול להפעיל כדי להגדיר, לנהל ולשלוף נתונים משירותי Firebase, כולל Firebase Authentication,‏ Cloud Firestore ו-Firebase Data Connect. כך מגדירים את ההפניה.

  1. ב-Firebase Studio, לוחצים על סמל של תצוגת קוד סטודיומעבר לתצוגת קוד כדי לפתוח את תצוגת הקוד.
  2. במסוף (Shift+Ctrl+C), מריצים את הפקודה הבאה כדי להיכנס לחשבון Firebase, פועלים לפי ההוראות במסך ומשאירים את כל אפשרויות ברירת המחדל:
    firebase login --no-localhost
  3. בסייר (Ctrl+Shift+E), לוחצים לחיצה ימנית על התיקייה ‎ .idx ובוחרים באפשרות New file (קובץ חדש). נותנים לקובץ את השם mcp.json ומקישים על Enter.
  4. מוסיפים את הגדרות השרת אל .idx/mcp.json.
    {
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}
    מוודאים שאתם מחוברים לשרת ה-MCP של Firebase. אמורות להופיע רשומות יומן דומות בחלונית הפלט, עם Gemini כערוץ הנכון.‫MCPManager מיומני Gemini

4. הוספת Firebase Realtime Database באמצעות Firebase MCP

יעד 1: הוספת Firebase לאפליקציה

  1. עוברים אל Prototyper. בממשק הצ'אט, מבקשים מהסוכן ליצור פרויקט.
    Create a Firebase project for my app.
    הסוכן יפעיל את כלי ה-MCP של Firebase‏ firebase_create_project.אפשר לדלג על השלב הזה אם כבר יצרתם פרויקט Firebase באמצעות האפשרות ליצירה אוטומטית של מפתח Gemini API. מזהה הפרויקט אמור להופיע לצד שם סביבת העבודה בפינה הימנית העליונה של המסך. אפשרות אחרת היא לבקש מהסוכן לרשום את הפרויקטים שלכם ולרשום את הפרויקט שבו אתם רוצים להשתמש.
    List my Firebase projects
    הנציג יתקשר באמצעות כלי ה-MCP של Firebase firebase_list_projects.
  2. מבקשים מהנציג להתחבר לפרויקט הזה.
    Connect my app to my project `spinsync-3y3c6`.
    מוודאים שמוצג קובץ .firebaserc שבו מוגדר הפרויקט הפעיל. אם לא, צריך לבקש מהנציג לעדכן את סביבת Firebase.
    Update my Firebase environment to use this project.
    הנציג יתקשר באמצעות כלי ה-MCP של Firebase‏ firebase_update_environment . עם זאת, יכול להיות שהסוכן יבצע את הפעולה הזו בלי להפעיל את הכלי.לבסוף, צריך לוודא שבסביבת Firebase מוגדר הפרויקט הפעיל הנכון ושאתם המשתמש המאומת.
    Show me my current Firebase environment.
    הנציג יתקשר באמצעות כלי ה-MCP של Firebase firebase_get_environment.
  3. מבקשים מהסוכן ליצור אפליקציית אינטרנט בפרויקט Firebase.
    Create a web app in my active Firebase project.
    הנציג יתקשר לכלי firebase_create_app ויחזיר את מזהה האפליקציה. אם הסוכן לא מצליח לעשות זאת, אפשר לנסות שוב בלחיצה על , או לפעול לפי ההוראות האלה כדי להשלים את השלב ב-Firebase Console.
    Use the App ID to get the SDK configuration and add to my app.
    הסוכן צפוי להתקשר לכלי firebase_get_sdk_config ולעדכן את הקוד שלכם בהגדרות Firebase.אם מפתח ה-API והגדרות אחרות מופיעים ב-src/lib/firebase.ts אחרי שהסוכן מצהיר על השלמת המשימה, בקשו ממנו להעביר אותם כדי לשמור על אבטחת האפליקציה.
    Secure my code by moving my Firebase config to the `.env` file.

יעד 2: הוספה של מסד נתונים בזמן אמת ב-Firebase

  1. נשארים או עוברים ל-Prototyper. בממשק הצ'אט, מבקשים מהנציג להגדיר את Firebase Realtime Database בפרויקט.
    Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
    בסיום התור הזה בשיחה, סביר להניח שהסוכן יתקשר לכלי Firebase MCP‏ firebase_init וייצור כללי אבטחה ב-database.rules.json כחלק מהשינויים בקובץ.
    ‫
    {
    "rules": {
        ".read": true,
        ".write": true
    }
}
    כאן נותנים לכולם גישת קריאה וכתיבה למסד הנתונים. מחוץ ל-CodeLab הזה, תמיד צריך לאבטח את מסדי הנתונים. מידע נוסף על הנושא הזה מופיע בתיעוד שלנו.
  2. מעבר לקוד בטרמינל (Shift+Ctrl+C), מאתחלים את מסד הנתונים בזמן אמת ב-Firebase.
    firebase init database
    פועלים לפי ההוראות במסך ומשאירים את אפשרויות ברירת המחדל.לאחר מכן פורסים את כללי האבטחה עבור מופע מסד הנתונים.
    firebase deploy --only database
  3. עוברים אל Prototyper. מבקשים מהנציג להשתמש במופע ברירת המחדל של מסד הנתונים עבור רשומות המשתמשים.
    Use my default Realtime Database instance for user entries.
    הסוכן אמור לעדכן את שאר קוד המקור כדי לחבר את האפליקציה למופע של מסד הנתונים.

יעד 3: בדיקה

  1. יוצרים כמה רשומות חדשות לגלגל הבחירה, ורואים אותן מופיעות בדף Firebase Realtime Database במסוף Firebase.

מסד נתונים בזמן אמת ב-Firebase במסוף Firebase

5. סיכום

כל הכבוד! יצרתם בהצלחה אפליקציית אינטרנט מלאה באמצעות סוכן יצירת אב טיפוס של אפליקציות עם Firebase MCP. אתם יכולים לנסות כלים אחרים שמוצעים על ידי שרת ה-MCP של Firebase ולהרחיב את היכולות של האפליקציה.

מידע נוסף