Firebase MCP ב-Firebase Studio

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

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

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

מה תלמדו

  • יצירת אפליקציית אינטרנט סטטית באמצעות סוכן ליצירת אב טיפוס של אפליקציות
  • הגדרת שרת Firebase MCP
  • הוספת Firestore באמצעות 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. הוספת Firestore באמצעות Firebase MCP

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

  1. עוברים אל Prototyper. בממשק הצ'אט, מבקשים מהנציג ליצור פרויקט Firebase.
    Create a Firebase project.
    אם כבר יצרתם פרויקט Firebase באמצעות האפשרות ליצירה אוטומטית של מפתח Gemini API, אפשר לדלג על השלב הזה. מזהה הפרויקט אמור להופיע לצד שם סביבת העבודה בפינה הימנית העליונה של המסך. אפשר גם לבקש מהסוכן לפרט את הפרויקטים שלכם ולרשום את הפרויקט שבו רוצים להשתמש.
    List my Firebase projects.
    הנציג יתקשר באמצעות כלי ה-MCP של Firebase firebase_list_projects.
  2. מבקשים מהסוכן להשתמש בפרויקט Firebase שלכם לפיתוח מקומי.
    ‫
    Use `spinsync-3y3c6` as my Firebase project in my local environment.
    מוודאים שמופיע קובץ .firebaserc שמגדיר את פרויקט ברירת המחדל ב-Firebase. הקובץ הזה מציין לממשק Firebase CLI באיזה פרויקט Firebase להשתמש. אם הקובץ לא מופיע, צריך לבקש שוב את הקובץ הספציפי הזה.
  3. מבקשים מהסוכן ליצור אפליקציית אינטרנט בפרויקט Firebase.
    Create a web app in my Firebase project.
    נציג התמיכה יתקשר לכלי firebase_create_app. אם הסוכן לא מצליח לעשות זאת, נסו שוב או פעלו לפי ההוראות האלה כדי להשלים את השלב במסוף Firebase.יכול להיות שהסוכן ימשיך לקרוא לכלי firebase_get_sdk_config וייצור את הקבצים הדרושים לקישור הפרויקט לאפליקציית האינטרנט שלכם ב-Firebase. אם זה לא קורה, תנו לו הנחיה לעשות זאת.
    Add my Firebase SDK configuration to my app.
    הסוכן בדרך כלל מכניס את מפתח ה-API והגדרות אחרות ישירות ל-src/lib/firebase.ts. כדי לשמור על אבטחת האפליקציה, מבקשים ממנו להעביר את הקודים האלה מחוץ לקוד האפליקציה.
    Secure my code by moving my Firebase config to my `.env` file.

יעד 2: הוספת Firestore

  1. מעבר לקוד בממשק הצ'אט, מבקשים מהנציג להשתמש ב-Firestore באפליקציה.
    Use Firestore for user entries. Give anyone read and write access.
    הסוכן צפוי לעדכן את קוד המקור כדי להשתמש ב-Firestore במקום באחסון מקומי עבור רשומות משתמשים, וליצור כללי אבטחה של Firestore. שימו לב: יכול להיות שהפקודה תפעיל את הכלי Firebase MCP‏ firebase_init או תבקש מכם להריץ את הפקודה firebase init במסוף כדי לאתחל את Firestore. בכל מקרה, לפני שממשיכים, חשוב לוודא שהקובץ firestore.rules מכיל את התוכן הבא.
    ‫
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
    כאן נותנים לכולם גישת קריאה וכתיבה למסד הנתונים. מחוץ ל-CodeLab הזה, תמיד צריך לאבטח את מסדי הנתונים. מידע נוסף על הנושא הזה מופיע בתיעוד שלנו.
  2. בטרמינל (Shift+Ctrl+C), מאתחלים את Firestore אם הסוכן לא ביקש מכם לעשות זאת קודם.
    firebase init firestore
    פועלים לפי ההוראות במסך ומשאירים את אפשרויות ברירת המחדל. אל תחליפו את כללי האבטחה מהשלב הקודם.לאחר מכן, פורסים את כללי האבטחה עבור מופע מסד הנתונים.
    firebase deploy --only firestore
    המערכת תקצה לכם מופע של מסד נתונים של Firestore.

יעד 3: בדיקה

  1. טוענים מחדש את האפליקציה, יוצרים ומוחקים רשומות בגלגל הבחירה וצופים בעדכונים האלה בדף Firestore ב-Firebase Console.

האפליקציה ב-Studio וב-Console

5. סיכום

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

מידע נוסף