تخصيص مساحة العمل في 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 الثنائية المحلية

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

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

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

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

إذا كنت بحاجة إلى مكوّنات إضافية، يمكنك إضافتها إلى ملف 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.*)

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

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

لمزيد من التفاصيل حول كيفية تخصيص معاينات التطبيق، يُرجى الاطّلاع على معاينة تطبيقك.

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

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

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

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

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

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

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

تنزيل ملفاتك

لتنزيل ملفاتك كملف zip، اتّبِع الخطوات التالية:

  • انقر بزر الماوس الأيمن على أي دليل في جزء "المستكشف" (Explorer) واختَر ضغط وتنزيل (Zip and Download).

لتنزيل كل المحتوى في دليل مشروعك، اتّبِع الخطوات التالية:

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

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

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

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

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

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