התאמה אישית של סביבת העבודה ב-Firebase Studio

‫Firebase Studio מאפשרת לכם להתאים את סביבת העבודה לצרכים הייחודיים של הפרויקט על ידי הגדרה של קובץ הגדרות יחיד .idx/dev.nix שמתאר:

  • כלי המערכת שצריך כדי להריץ את התוכנה (למשל, מתוך Terminal), כמו קומפיילרים או קבצים בינאריים אחרים.
  • התוספים שצריך להתקין (לדוגמה, תמיכה בשפת תכנות).
  • איך תצוגות מקדימות של האפליקציה אמורות להופיע (לדוגמה, הפקודות להפעלת שרת האינטרנט).
  • משתני סביבה גלובליים שזמינים לשרתים מקומיים שפועלים בסביבת העבודה.

למידע מקיף על האפשרויות הזמינות, אפשר לעיין בהפניה ל-dev.nix.

אם מוסיפים קובץ .idx/mcp.json (ל-Gemini ב-Firebase) או .gemini/settings.json (ל-Gemini CLI) לפרויקט, אפשר גם להתחבר לשרתים של Model Context Protocol ‏ (MCP), כולל שרת ה-MCP של Firebase.

‫Nix ו-Firebase Studio

‫Firebase Studio משתמש ב-Nix כדי להגדיר את הגדרות הסביבה לכל סביבת עבודה. באופן ספציפי,‏ Firebase Studio משתמש ב:

  • שפת התכנות Nix כדי לתאר סביבות של סביבות עבודה. ‫Nix היא שפת תכנות פונקציונלית. המאפיינים וספריות החבילות שאפשר להגדיר בקובץ dev.nix הם בהתאם לתחביר של קבוצת מאפייני Nix.

  • מנהל החבילות של Nix לניהול כלי המערכת שזמינים בסביבת העבודה. זה דומה למנהלי חבילות ספציפיים למערכת הפעלה, כמו APT (apt ו-apt-get), ‏ Homebrew (brew) ו-dpkg.

מכיוון שסביבות Nix ניתנות לשחזור ומוצהרות, בהקשר של Firebase Studio, זה אומר שאתם יכולים לשתף את קובץ ההגדרות של Nix כחלק ממאגר Git כדי לוודא שלכל מי שעובד על הפרויקט יש את אותן הגדרות סביבה.

דוגמה בסיסית

בדוגמה הבאה מוצגת הגדרת סביבה בסיסית שמאפשרת תצוגות מקדימות:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

הוספת כלי מערכת

כדי להוסיף לסביבת העבודה כלי מערכת, כמו קומפיילרים או תוכניות CLI לשירותי ענן, צריך למצוא את מזהה החבילה הייחודי במאגר החבילות של Nix ולהוסיף אותו לאובייקט packages בקובץ dev.nix, עם הקידומת pkgs.:

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

ההתקנה הזו שונה מההתקנה הרגילה של חבילות מערכת באמצעות מנהלי חבילות ספציפיים למערכת ההפעלה, כמו APT‏ (apt ו-apt-get), ‏ Homebrew‏ (brew) ו-dpkg. תיאור הצהרתי של חבילות המערכת הנדרשות מאפשר לשתף ולשכפל בקלות רבה יותר את סביבות העבודה של Firebase Studio.

שימוש בקבצים בינאריים של צמתים מקומיים

בדומה למכונה המקומית, אפשר להריץ קבצים בינאריים שקשורים לחבילות node שהותקנו באופן מקומי (לדוגמה, חבילות שמוגדרות בקובץ package.json) בחלונית Terminal על ידי הפעלתם באמצעות הפקודה npx.

כדי להקל עליכם, אם אתם נמצאים בספרייה עם תיקייה node_modules (למשל, ספריית השורש של פרויקט אינטרנט), אפשר להפעיל ישירות קבצים בינאריים שהותקנו באופן מקומי, בלי הקידומת npx.

הוספת רכיבי gcloud

תצורת ברירת מחדל של gcloud CLI ל-Google Cloud זמינה לכל סביבות העבודה של Firebase Studio.

אם אתם צריכים רכיבים נוספים, אתם יכולים להוסיף אותם לקובץ dev.nix:

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

הוספת תוספים ל-IDE

יש שתי דרכים להתקין תוספים ב-Firebase Studio באמצעות מאגר התוספים OpenVSX:

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

    • ערכות צבעים מותאמות אישית
    • חיקוי של עורך, כמו VSCodeVim

  • הוספת תוספים לקובץ dev.nix התוספים האלה יותקנו באופן אוטומטי כשמשתפים את הגדרות סביבת העבודה. הגישה הזו מתאימה במיוחד לתוספים ספציפיים לפרויקט, כמו:

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

בגישה השנייה, אפשר לכלול תוספים ל-IDE בקובץ dev.nix. לשם כך, צריך למצוא את מזהה התוסף המוגדר במלואו (בפורמט <publisher>.<id>) ולהוסיף אותו לאובייקט idx.extensions כך:

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

הוספת שירותים נפוצים

‫Firebase Studio מציע גם הגדרה וקביעת תצורה פשוטות לשירותים נפוצים שעשויים להידרש במהלך הפיתוח, כולל:

  • קונטיינרים
    • ‫Docker (services.docker.*)
  • העברת הודעות
    • אמולטור Pub/Sub ‏ (services.pubsub.*)
  • מסדי נתונים
    • ‫MySQL (services.mysql.*)
    • ‫Postgres (services.postgres.*)
    • ‫Redis (services.redis.*)
    • ‫Spanner (services.spanner.*)

פרטים על הפעלת השירותים האלה ב-Workspace זמינים בקטעים services.* של ההפניה ל-dev.nix.

התאמה אישית של התצוגות המקדימות

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

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

אתם יכולים לבחור סמל בהתאמה אישית לסביבת העבודה שלכם. כדי לעשות את זה, צריך למקם קובץ PNG בשם icon.png בספרייה .idx באותה רמה כמו הקובץ dev.nix. Firebase Studio ישתמש בסמל הזה כדי לייצג את סביבת העבודה בלוח הבקרה.

אפשר להוסיף את הקובץ הזה למערכת לניהול גרסאות (כמו Git), וכך כל מי שעובד על הפרויקט יוכל לראות את אותו סמל של הפרויקט כשהוא משתמש ב-Firebase Studio. בנוסף, מכיוון שהקובץ יכול להיות שונה בענפים שונים של Git, אפשר להשתמש בסמל הזה כדי להבחין בין סביבות עבודה של אפליקציות בגרסת בטא לבין סביבות עבודה של אפליקציות בייצור, וגם למטרות אחרות.

הפיכת ההתאמות האישיות לתבנית

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

עיון בכל אפשרויות ההתאמה האישית

dev.nix

הורדת הקבצים

כדי להוריד את הקבצים כקובץ ZIP:

  • לוחצים לחיצה ימנית על ספרייה כלשהי בחלונית Explorer ובוחרים באפשרות Zip and Download (דחיסה והורדה).

כדי להוריד את כל מה שיש בספריית הפרויקט:

  1. בוחרים באפשרות File > Open Folder (קובץ > פתיחת תיקייה).

  2. מאשרים את ספריית ברירת המחדל /home/user.

  3. אחרי שהקבצים נטענים, לוחצים לחיצה ימנית על ספריית העבודה ובוחרים באפשרות כיווץ והורדה. אם משתמשים ב-App Prototyping agent, ספריית העבודה תהיה studio. אם משתמשים בתבנית או בפרויקט שהועלה, זה יהיה שם הפרויקט.

  4. כשמוצגת בקשה לבנייה מחדש של הסביבה, לוחצים על ביטול.

  5. אחרי שההורדה מסתיימת, פותחים מחדש את ספריית העבודה מהתפריט קובץ כדי לחזור לסביבת העבודה.

שימוש בשרתי MCP

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

דרישות מוקדמות

  • אם שרת ה-MCP דורש זאת, מוודאים שיש לכם התקנה תקינה של Node.js ו-npm.

בחירת שרת MCP תואם

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

  • נתמך:
    • שרתי קלט/פלט רגילים (stdio) או שרתי העברה של אירועים שנשלחים מהשרת (SSE)/HTTP שניתנים להזרמה שלא נדרשים בהם סוגים מיוחדים של אימות
    • כלים שסופקו על ידי שרתי MCP
  • אין תמיכה כרגע:
    • שרתים שנדרש עבורם ממשק משתמש גרפי או סשן במחשב
    • הנחיות, דגימה או משאבים אחרים שסופקו על ידי שרתי MCP

הוספה של שרת MCP

  1. בסייר (Ctrl+Shift+E), עורכים או יוצרים את קובץ ההגדרות של MCP.

    • ‫Gemini ב-Firebase Chat משתמש ב-.idx/mcp.json.

    • Gemini CLI משתמש ב-.gemini/settings.json.

    אם הקובץ עדיין לא קיים, יוצרים אותו על ידי לחיצה ימנית על ספריית האב ובחירה באפשרות New file (קובץ חדש). יוצרים או עורכים את שני הקבצים כדי להשתמש בשרת MCP ב-Gemini ב-Firebase וב-Gemini CLI.

  2. מוסיפים את הגדרות השרת לתוכן של הקובץ. לדוגמה, כדי להוסיף את שרת ה-MCP של Firebase, מזינים:

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

    קובץ ההגדרות הזה מורה ל-Gemini באיזה שרת MCP רוצים להשתמש. בדוגמה הזו הוספנו שרת אחד בשם firebase שישתמש בפקודה npx כדי להתקין ולהפעיל את firebase-tools@latest. שרתי MCP אחרים דורשים הגדרות שונות, אבל הם פועלים לפי אותו פורמט כללי.

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

    firebase login --no-localhost

    פועלים לפי ההוראות במסוף כדי לאשר את ההפעלה. חלק מהכלים דורשים פרויקט Firebase מקושר. אפשר להשתמש בשרת Firebase MCP כדי ליצור פרויקט, או להריץ את הפקודה הבאה כדי לאתחל פרויקט Firebase:

    firebase init

    פעולה זו יוצרת קובץ firebase.json בספריית הבסיס.

  4. כדי להשלים את ההגדרה, צריך לבנות מחדש את סביבת העבודה:

    1. פותחים את לוח הפקודות (Shift+Ctrl+P).

    2. מזינים Firebase Studio: Rebuild Environment (Firebase Studio: בנייה מחדש של הסביבה).

שימוש בכלים של MCP

אחרי שמתקינים את שרת ה-MCP שרוצים להשתמש בו, הכלים או הנתונים שהוא מספק זמינים ב:

  • Gemini CLI
  • ‫Gemini בצ'אט Firebase כשמשתמשים במצב סוכן ובמצב סוכן (הפעלה אוטומטית)
  • ‫App Prototyping agent

לדוגמה, אם מוסיפים את שרת ה-MCP של Firebase, אפשר לבקש מ-Gemini לאחזר את הגדרות ה-SDK של הפרויקט הנוכחי, לאחזר נתונים שמאוחסנים ב-Cloud Firestore וב-Realtime Database, לעזור בהגדרת שירותי Firebase, ועוד.

פתרון בעיות בשרתי MCP

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

  1. בקטע 'פלט' (Shift+Ctrl+U), לוחצים על התפריט הנפתח ובוחרים באפשרות Gemini.

  2. בודקים אם יש הודעות שמתחילות בתג [MCPManager]. היומנים האלה מכילים מידע על שרתי MCP שהוגדרו, וגם הודעות שגיאה. אפשר להשתמש במידע הזה כדי לפתור בעיות בהגדרות. כששרת MCP מתחבר בהצלחה, מוצגת רשימה של הכלים שהוא הוסיף.

אם שרת MCP לא מצליח להתקין או להתחבר, מנסים לבנות מחדש את סביבת העבודה:

  1. פותחים את לוח הפקודות (Shift+Ctrl+P).

  2. מזינים Firebase Studio: Rebuild Environment (Firebase Studio: בנייה מחדש של הסביבה).

  3. מחכים עד שסביבת העבודה תיבנה מחדש, ואז מנסים שוב להשתמש בשרת ה-MCP שבחרתם.

אם שרת ה-MCP מתחבר, אבל Gemini לא משתמש בכלים שהוא מספק:

השלבים הבאים