Firebase MCP ב-Firebase Studio

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

גרסת טרום-השקה: Firebase Studio ו-Firebase MCP נמצאים בגרסת טרום-השקה, כלומר הם לא כפופים להסכם רמת שירות או למדיניות הוצאה משימוש, ויכולים להשתנות בדרכים שלא תואמות לאחור.

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

מה תלמדו

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

מה צריך להכין

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

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

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

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. בודקים את תוכנית האפליקציה המוצעת. לוחצים על התאמה אישית כדי לערוך אותו.
6. לוחצים על שמירה.
7. אחרי שהתוכנית מסיימת לשלב את העדכונים, לוחצים על יצירת אב טיפוס של האפליקציה הזו.
8. אם התוכנית מכילה רכיבי AI, הסוכן יבקש מכם מפתח Gemini Gemini. מוסיפים מפתח Gemini API משלכם או לוחצים על יצירה אוטומטית כדי ליצור מפתח Gemini API. אם לוחצים על יצירה אוטומטית, Firebase Studio יוצר פרויקט Firebase ומפיק בשבילכם מפתח Gemini API.
9. סוכן יצירת אב טיפוס של אפליקציות משתמש בתוכנית כדי ליצור גרסה ראשונה של האפליקציה. בסיום, התצוגה המקדימה של האפליקציה מופיעה לצד ממשק של Gemini Chat. כדאי להקדיש רגע לבדיקה של האפליקציה. אם נתקלתם בשגיאות, לחצו על תיקון שגיאה בצ'אט כדי לאפשר לנציג לתקן את השגיאות בעצמו.

3. (אופציונלי) קבלת הקוד

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

1. מורידים את הקבצים בתיקייה.
2. ב-Firebase Studio, לוחצים על מעבר לתצוגת קוד כדי לפתוח את תצוגת הקוד.
3. גוררים את הקבצים שהורדתם לחלונית Explorer ב-Firebase Studio. לאפשר לקבצים להחליף קבצים קיימים.
4. בטרמינל (Shift+Ctrl+C), מריצים את הפקודה הבאה כדי להתקין חבילות.

   npm install
   

5. פותחים את החלונית Source Control ב-Firebase Studio, מקלידים הודעה לתיאור שינוי הקוד, למשל, "imported code from GitHub" (ייבאתי קוד מ-GitHub), ואז לוחצים על Commit (שמירה).
6. כדי להמשיך את ה-codelab באמצעות גרסת הדוגמה של האפליקציה, לוחצים על מעבר ל-Prototyper.

הערה: כדי להשתמש בסוכן ליצירת אב טיפוס של אפליקציות, צריך להתחיל מרחב עבודה באמצעות הנחיה. במילים אחרות, לצורך ה-codelab הזה, אל תיצרו סביבת עבודה חדשה באמצעות הקבצים האלה – פשוט תחליפו את הקבצים הקיימים.

4. קישור לפרויקט Firebase

כל הכבוד! האפליקציה פועלת באופן מקומי. כדי להוסיף לו קצה עורפי, תצטרכו לקשר אותו לפרויקט Firebase.

1. מבקשים מסוכן יצירת אב טיפוס של אפליקציות להתחבר לפרויקט Firebase.

   Connect to a Firebase project.
   

   הסוכן ייצור פרויקט חדש או יתחבר לפרויקט קיים (אם השתמשתם באפשרות ליצירת מפתח Gemini API באופן אוטומטי, הפרויקט אמור להופיע לצד שם סביבת העבודה בפינה הימנית העליונה של המסך), ואז ייצור את ההגדרה הנדרשת של Firebase וישלב אותה באפליקציה באמצעות src/lib/firebase.ts (כפי שמוצג).

   import { initializeApp, getApp, getApps } from 'firebase/app';
   
   const firebaseConfig = {
     "projectId": "foo-bar-baz",
     "appId": "1:630673270654:web:3eda41879acd38fa96ce14",
     "storageBucket": "foo-bar-baz.firebasestorage.app",
     "apiKey": "AIzaSyDGoMZQia334izw8JedslMTUD0fNpmFca0",
     "authDomain": "foo-bar-baz.firebaseapp.com",
     "measurementId": "",
     "messagingSenderId": "630673270654"
   };
   
   // Initialize Firebase
   const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
   
   export default app;
   

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

   Create a new Firebase project.
   

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

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

1. לוחצים על מעבר לקוד כדי לפתוח את תצוגת הקוד.
2. במסוף (Shift+Ctrl+C), מריצים את הפקודה הבאה כדי להיכנס לחשבון Firebase, פועלים לפי ההוראות במסך ומשאירים את כל אפשרויות ברירת המחדל:

   firebase login --no-localhost
   

3. בסייר (Ctrl+Shift+E), לוחצים לחיצה ימנית על התיקייה ‎ .idx ובוחרים באפשרות קובץ חדש. נותנים לקובץ את השם mcp.json ומקישים על Enter.
4. מוסיפים את הגדרות השרת אל .idx/mcp.json.

   {
       "mcpServers": {
           "firebase": {
               "command": "npx",
               "args": [
                   "-y",
                   "firebase-tools@latest",
                   "experimental:mcp"
               ]
           }
       }
   }
   

   מוודאים שאתם מחוברים לשרת ה-MCP של Firebase. אמורות להופיע רשומות יומן דומות בחלונית הפלט, עם Gemini כערוץ הנכון.

6. הוספת Firestore באמצעות Firebase MCP

יעד 1: הוספת Firestore

1. עוברים אל Prototyper. בממשק הצ'אט, מבקשים מהנציג להשתמש ב-Firestore באפליקציה.

   Use Firestore for user entries. Give anyone read and write access.
   

   הנציג צפוי:
   • מאתחלים את Firestore על ידי קריאה לכלי Firebase MCP firebase_init, שיוצר כללי Firestore (כפי שמוצג) ומבצע שינויים בהגדרות, כולל יצירת אינדקסים לקבצים
   • עדכון קוד האפליקציה לשימוש ב-Firestore במקום באחסון מקומי
   ‫

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /{document=**} {
         allow read, write: if true;
       }
     }
   }
   

   כאן נותנים לכולם גישת קריאה וכתיבה למסד הנתונים. מחוץ ל-codelab הזה, חשוב תמיד לאבטח את מסדי הנתונים. מידע נוסף על הנושא הזה מופיע בתיעוד שלנו.
2. מעבר לקוד בטרמינל (‎Shift+Ctrl+C), מאתחלים את Firestore אם אף פעם לא הפעלתם את Firestore API בפרויקט Firebase הנוכחי.

   firebase init firestore
   

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

   firebase deploy --only firestore
   

   המערכת תקצה לכם מופע של מסד נתונים של Firestore.

יעד 2: בדיקה

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

2. אפשר גם לשוחח עם Firestore כדי לשלוח שאילתות למסד הנתונים.
   ‫

   List my Firestore collections.
   

   צפוי ש-Gemini יפעיל את כלי ה-MCP של Firebase firestore_list_collections.

7. סיכום

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

מידע נוסף

• כלי Firebase לניהול הרשאות
• Firebase MCP ב-GitHub
• Firebase Tips and Tricks 2
• מידע נוסף על סביבות עבודה ב-Firebase Studio