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

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

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

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

‫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

תצורת ברירת מחדל של ה-CLI של gcloud ל-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. אחרי שההורדה מסתיימת, פותחים מחדש את ספריית העבודה מהתפריט קובץ כדי לחזור לסביבת העבודה.

השלבים הבאים