تخصيص مساحة عملك في Firebase Studio

يتيح لك Firebase Studio تخصيص مساحة العمل لتلبية الاحتياجات الفريدة لمشروعك من خلال تحديد ملف إعداد واحد باسم .idx/dev.nix يصف ما يلي:

  • أدوات النظام التي تحتاج إليها لتشغيل (على سبيل المثال، من "وحدة التحكّم")، مثل برامج التجميع أو الملفات الثنائية الأخرى
  • الإضافات التي تحتاج إلى تثبيتها (على سبيل المثال، دعم لغة البرمجة)
  • طريقة ظهور معاينات تطبيقك (على سبيل المثال، الأوامر لتشغيل خادم الويب)
  • متغيّرات البيئة العامة المتاحة للخوادم المحلية التي تعمل في مساحة عملك

للحصول على وصف كامل لما هو متاح، اطّلِع على مرجع dev.nix.

‫Nix وFirebase Studio

يستخدم Firebase Studio أداة Nix لتحديد إعدادات البيئة لكل مساحة عمل. على وجه التحديد، Firebase Studio يستخدم ما يلي:

  • لغة برمجة Nix لوصف بيئات مساحة العمل. لغة Nix هي لغة برمجة وظيفية. تتّبع السمات ومكتبات الحِزم التي يمكنك تحديدها في الـ dev.nix ملف بنية مجموعة سمات Nix syntax.

  • مدير حِزم Nix لإدارة أدوات النظام المتاحة لمساحة عملك يشبه هذا مديري الحِزم الخاصة بنظام التشغيل، مثل APT (apt وapt-get) وHomebrew (brew) وdpkg.

بما أنّ بيئات Nix قابلة للتكرار وتوضيحية، يعني ذلك في سياق Firebase Studio أنّه يمكنك مشاركة ملف إعداد Nix كجزء من مستودع Git لضمان حصول كل من يعمل على مشروعك على إعدادات البيئة نفسها.

مثال أساسي

يوضّح المثال التالي إعدادات بيئة أساسية تتيح المعاينات:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-24.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";
      };
    };
  };
}

إضافة أدوات النظام

لإضافة أدوات النظام إلى مساحة عملك، مثل برامج التجميع أو برامج واجهة سطر الأوامر لـ خدمات السحابة الإلكترونية، ابحث عن رقم تعريف الحزمة الفريد في سجلّ حِزم Nix وأضِفه إلى ملف dev.nixpackages، مع إضافة البادئة `pkgs.:

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-24.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 وتكرارها.

استخدام الملفات الثنائية المحلية للعُقدة

تمامًا كما هو الحال على جهازك المحلي، يمكن تنفيذ الملفات الثنائية المرتبطة بحِزم العُقدة المثبّتة محليًا (على سبيل المثال، الحِزم المحدّدة في package.json) في لوحة "وحدة التحكّم" من خلال استدعائها باستخدام الأمر npx.

لتوفير المزيد من الراحة، إذا كنت في دليل يحتوي على مجلد node_modules (مثل الدليل الجذري لمشروع ويب)، يمكن استدعاء الملفات الثنائية المثبّتة محليًا مباشرةً، بدون البادئة npx.

إضافة مكوّنات gcloud

يتوفّر إعداد تلقائي لواجهة سطر الأوامر gcloud لـ Google Cloud لجميع Firebase Studio مساحات عمل.

إذا كنت بحاجة إلى مكوّنات إضافية، يمكنك إضافتها إلى ملف dev.nix:

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

إضافة إضافات بيئة التطوير المتكاملة

يمكنك تثبيت الإضافات في Firebase Studio باستخدام سجلّ إضافات OpenVSX بطريقتَين:

  • استخدِم لوحة الإضافات في Firebase Studio لاكتشاف الإضافات وتثبيتها. هذا النهج هو الأنسب للإضافات الخاصة بالمستخدم ، مثل:

    • نسق ألوان مخصّصة
    • محاكاة المحرّر، مثل VSCodeVim

  • أضِف إضافات إلى ملف dev.nix. سيتم تثبيت هذه الإضافات تلقائيًا عند مشاركة إعدادات مساحة عملك. هذا النهج هو الأنسب لـ الإضافات الخاصة بالمشروع، مثل:

    • إضافات لغات البرمجة، بما في ذلك أدوات تصحيح الأخطاء الخاصة باللغة
    • الإضافات الرسمية لخدمات السحابة الإلكترونية المستخدَمة في مشروعك
    • أدوات تنسيق الرموز

بالنسبة إلى النهج الأخير، يمكنك تضمين إضافات بيئة التطوير المتكاملة في ملفك 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.*)

للحصول على تفاصيل حول تفعيل هذه الخدمات في مساحة عملك، اطّلِع على services.* أجزاء من مرجع dev.nix.

تخصيص المعاينات

للحصول على تفاصيل حول كيفية تخصيص معاينات تطبيقك، اطّلِع على معاينة تطبيقك.

ضبط رمز مساحة العمل

يمكنك اختيار رمز مخصّص لمساحة عملك من خلال وضع ملف PNG باسم icon.png داخل الدليل .idx على المستوى نفسه لملف dev.nix. سيستخدم Firebase Studio بعد ذلك هذا الرمز لتمثيل مساحة عملك في لوحة البيانات.

بما أنّه يمكن تسجيل هذا الملف في نظام التحكّم بالمصادر (مثل Git)، فهذه طريقة جيدة لمساعدة كل من يعمل على مشروعك في رؤية الرمز نفسه لمشروعك عند استخدام Firebase Studio. وبما أنّ الملف يمكن أن يختلف بين فروع Git، يمكنك استخدام هذا الرمز للتمييز بصريًا بين مساحات عمل التطبيق التجريبية والإنتاجية ولأغراض أخرى.

تحويل التخصيصات إلى نموذج

لتحويل إعدادات البيئة إلى "بيئة بداية" يمكن لأي مستخدم استخدامها لإنشاء مشاريع جديدة، اطّلِع على مستندات إنشاء نماذج مخصّصة templates.

الاطّلاع على جميع خيارات التخصيص

اطّلِع على مرجع dev.nix للحصول على وصف تفصيلي لمخطط إعدادات البيئة.

تنزيل ملفاتك

لتنزيل ملفاتك كملف ZIP:

  • انقر بزر الماوس الأيمن على أي دليل في لوحة "المستكشف" واختَر ضغط الملفات وتنزيلها.

لتنزيل كل المحتوى في دليل مشروعك:

  1. انقر على ملف > فتح مجلد.

  2. اقبَل الدليل التلقائي /home/user.

  3. بعد تحميل الملفات، انقر بزر الماوس الأيمن على دليل العمل واختَر ضغط الملفات وتنزيلها. إذا كنت تستخدم App Prototyping agent، سيكون دليل العمل هو studio. إذا كنت تستخدم نموذجًا أو مشروعًا تم تحميله، سيكون هذا هو اسم مشروعك.

  4. عندما يُطلب منك إعادة إنشاء البيئة، انقر على إلغاء.

  5. بعد اكتمال التنزيل، أعِد فتح دليل العمل من قائمة ملف للرجوع إلى مساحة عملك.

الخطوات التالية