আপনার ফায়ারবেস স্টুডিও ওয়ার্কস্পেস কাস্টমাইজ করুন

Firebase Studio আপনাকে একটিমাত্র .idx/dev.nix কনফিগারেশন ফাইল নির্ধারণের মাধ্যমে আপনার প্রোজেক্টের অনন্য প্রয়োজন অনুসারে ওয়ার্কস্পেসকে সাজিয়ে নেওয়ার সুযোগ দেয়, যেখানে নিম্নলিখিত বিষয়গুলো বর্ণনা করা থাকে:

  • সিস্টেম টুলগুলো , যেগুলো আপনাকে চালাতে হবে (উদাহরণস্বরূপ, টার্মিনাল থেকে), যেমন কম্পাইলার বা অন্যান্য বাইনারি।
  • আপনার যে এক্সটেনশনগুলো ইনস্টল করা প্রয়োজন (উদাহরণস্বরূপ, প্রোগ্রামিং ভাষার সমর্থন)।
  • আপনার অ্যাপের প্রিভিউগুলো কীভাবে প্রদর্শিত হবে (উদাহরণস্বরূপ, আপনার ওয়েব সার্ভার চালানোর কমান্ডগুলো)।
  • আপনার ওয়ার্কস্পেসে চলমান স্থানীয় সার্ভারগুলির জন্য উপলব্ধ গ্লোবাল এনভায়রনমেন্ট ভেরিয়েবল ।

কী কী উপলব্ধ আছে তার সম্পূর্ণ বিবরণের জন্য dev.nix রেফারেন্সটি দেখুন।

নিক্স এবং Firebase Studio

Firebase Studio প্রতিটি ওয়ার্কস্পেসের পরিবেশ কনফিগারেশন নির্ধারণ করতে নিক্স (Nix) ব্যবহার করে। বিশেষত, Firebase Studio যা ব্যবহার করে তা হলো:

যেহেতু 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";
      };
    };
  };
}

সিস্টেম টুল যোগ করুন

আপনার ওয়ার্কস্পেসে সিস্টেম টুলস, যেমন কম্পাইলার বা ক্লাউড সার্ভিসের জন্য CLI প্রোগ্রাম যোগ করতে, Nix প্যাকেজ রেজিস্ট্রি থেকে অনন্য প্যাকেজ আইডিটি খুঁজুন এবং `pkgs.:` দিয়ে শুরু করে সেটিকে আপনার dev.nix ফাইলের packages অবজেক্টে যোগ করুন।

{ 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 এর মতো OS-নির্দিষ্ট প্যাকেজ ম্যানেজার ব্যবহার করে আপনি সাধারণত যেভাবে সিস্টেম প্যাকেজ ইনস্টল করেন, তার থেকে ভিন্ন। ঠিক কোন কোন সিস্টেম প্যাকেজ প্রয়োজন তা সুস্পষ্টভাবে বর্ণনা করার ফলে Firebase Studio ওয়ার্কস্পেসগুলি শেয়ার করা এবং পুনরায় তৈরি করা সহজ হয়।

স্থানীয় নোড বাইনারি ব্যবহার করুন

আপনার লোকাল মেশিনের মতোই, স্থানীয়ভাবে ইনস্টল করা নোড প্যাকেজ সম্পর্কিত বাইনারিগুলো (উদাহরণস্বরূপ, আপনার package.json এ সংজ্ঞায়িত প্যাকেজগুলো) টার্মিনাল প্যানেলে npx কমান্ড দিয়ে চালু করা যায়।

অতিরিক্ত সুবিধা হিসেবে, আপনি যদি এমন কোনো ডিরেক্টরিতে থাকেন যেখানে একটি node_modules ফোল্ডার আছে (যেমন কোনো ওয়েব প্রজেক্টের রুট ডিরেক্টরি), তাহলে স্থানীয়ভাবে ইনস্টল করা বাইনারিগুলো npx প্রিফিক্স ছাড়াই সরাসরি চালু করা যেতে পারে।

gcloud উপাদান যোগ করুন

Google Cloud জন্য gcloud CLI- এর একটি ডিফল্ট কনফিগারেশন সকল Firebase Studio ওয়ার্কস্পেসের জন্য উপলব্ধ।

আপনার যদি অতিরিক্ত উপাদানের প্রয়োজন হয়, তাহলে আপনি সেগুলি আপনার dev.nix ফাইলে যোগ করতে পারেন:

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

IDE এক্সটেনশন যোগ করুন

আপনি দুটি উপায়ে OpenVSX এক্সটেনশন রেজিস্ট্রি ব্যবহার করে Firebase Studio তে এক্সটেনশন ইনস্টল করতে পারেন:

  • এক্সটেনশনগুলি খুঁজে বের করতে এবং ইনস্টল করতে Firebase Studio এর এক্সটেনশন প্যানেল ব্যবহার করুন। এই পদ্ধতিটি ব্যবহারকারী-নির্দিষ্ট এক্সটেনশনগুলির জন্য সবচেয়ে ভালো, যেমন:

    • কাস্টম রঙের থিম
    • এডিটর এমুলেশন, যেমন VSCodeVim

  • আপনার dev.nix ফাইলে এক্সটেনশনগুলো যোগ করুন । আপনি যখন আপনার ওয়ার্কস্পেস কনফিগারেশন শেয়ার করবেন, তখন এই এক্সটেনশনগুলো স্বয়ংক্রিয়ভাবে ইনস্টল হয়ে যাবে। এই পদ্ধতিটি প্রোজেক্ট-নির্দিষ্ট এক্সটেনশনগুলোর জন্য সবচেয়ে ভালো, যেমন:

    • প্রোগ্রামিং ভাষার এক্সটেনশন, যার মধ্যে ভাষা-নির্দিষ্ট ডিবাগার অন্তর্ভুক্ত
    • আপনার প্রকল্পে ব্যবহৃত ক্লাউড পরিষেবাগুলির জন্য অফিসিয়াল এক্সটেনশন
    • কোড ফরম্যাটার

পরবর্তী পদ্ধতির জন্য, আপনি সম্পূর্ণ এক্সটেনশন আইডি (যা <publisher>.<id> ফর্ম্যাটের) খুঁজে বের করে এবং এটিকে idx.extensions অবজেক্টে নিম্নোক্তভাবে যোগ করে আপনার dev.nix ফাইলে IDE এক্সটেনশন অন্তর্ভুক্ত করতে পারেন:

{ 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 ডেভেলপমেন্টের সময় আপনার প্রয়োজন হতে পারে এমন সাধারণ সার্ভিসগুলোর জন্য সরলীকৃত সেটআপ এবং কনফিগারেশনের সুবিধাও প্রদান করে, যার মধ্যে রয়েছে:

  • কন্টেইনার
    • ডকার ( services.docker.* )
  • বার্তা আদানপ্রদান
    • পাব/সাব এমুলেটর ( services.pubsub.* )
  • ডেটাবেস
    • MySQL ( services.mysql.* )
    • পোস্টগ্রেস ( services.postgres.* )
    • রেডিস ( services.redis.* )
    • স্প্যানার ( services.spanner.* )

আপনার ওয়ার্কস্পেসে এই পরিষেবাগুলি সক্রিয় করার বিষয়ে বিস্তারিত জানতে, dev.nix রেফারেন্সের services.* অংশগুলি দেখুন।

প্রিভিউ কাস্টমাইজ করুন

আপনার অ্যাপ প্রিভিউগুলি কীভাবে কাস্টমাইজ করবেন সে সম্পর্কে বিস্তারিত জানতে, আপনার অ্যাপ প্রিভিউ করুন (Preview your app) দেখুন।

আপনার কর্মক্ষেত্রের আইকন সেট করুন

আপনার dev.nix ফাইলের সমতলে .idx ডিরেক্টরির ভিতরে icon.png নামের একটি PNG ফাইল রেখে আপনি আপনার ওয়ার্কস্পেসের জন্য একটি কাস্টম আইকন বেছে নিতে পারেন। এরপর Firebase Studio আপনার ড্যাশবোর্ডে আপনার ওয়ার্কস্পেসকে উপস্থাপন করার জন্য এই আইকনটি ব্যবহার করবে।

যেহেতু এই ফাইলটি সোর্স কন্ট্রোলে (যেমন গিট) চেক ইন করা যায়, তাই Firebase Studio ব্যবহার করার সময় আপনার প্রোজেক্টে কর্মরত প্রত্যেককে একই আইকন দেখাতে এটি একটি ভালো উপায়। এবং যেহেতু ফাইলটি বিভিন্ন গিট ব্রাঞ্চে ভিন্ন হতে পারে, তাই আপনি বিটা এবং প্রোডাকশন অ্যাপ ওয়ার্কস্পেসের মধ্যে দৃশ্যত পার্থক্য করতে এবং অন্যান্য উদ্দেশ্যেও এই আইকনটি ব্যবহার করতে পারেন।

আপনার কাস্টমাইজেশনগুলোকে একটি টেমপ্লেটে পরিণত করুন

আপনার এনভায়রনমেন্ট কনফিগারেশনকে একটি 'স্টার্টার এনভায়রনমেন্ট'-এ পরিণত করতে, যা ব্যবহার করে যে কেউ নতুন প্রজেক্ট তৈরি করতে পারবে, 'কাস্টম টেমপ্লেট তৈরি করুন ' অংশের ডকুমেন্টেশন দেখুন।

সমস্ত কাস্টমাইজেশন বিকল্পগুলি অন্বেষণ করুন

এনভায়রনমেন্ট কনফিগারেশন স্কিমার বিস্তারিত বিবরণের জন্য dev.nix রেফারেন্সটি দেখুন।

আপনার ফাইলগুলি ডাউনলোড করুন

আপনার ফাইলগুলো জিপ ফাইল হিসেবে ডাউনলোড করতে:

  • এক্সপ্লোরার প্যানে যেকোনো ডিরেক্টরিতে রাইট-ক্লিক করুন এবং 'Zip and Download' নির্বাচন করুন।

আপনার প্রজেক্ট ডিরেক্টরিতে সবকিছু ডাউনলোড করতে:

  1. ফাইল > ফোল্ডার খুলুন নির্বাচন করুন।

  2. ডিফল্ট /home/user ডিরেক্টরিটি গ্রহণ করুন।

  3. ফাইলগুলো লোড হয়ে গেলে, আপনার ওয়ার্কিং ডিরেক্টরিতে রাইট-ক্লিক করে ‘Zip and Download’ নির্বাচন করুন। যদি App Prototyping agent ব্যবহার করেন, তাহলে আপনার ওয়ার্কিং ডিরেক্টরি হবে studio । আর যদি কোনো টেমপ্লেট বা আপলোড করা প্রজেক্ট ব্যবহার করেন, তাহলে এটি হবে আপনার প্রজেক্টের নাম।

  4. পরিবেশ পুনর্নির্মাণের জন্য অনুরোধ করা হলে, বাতিল করুন-এ ক্লিক করুন।

  5. ডাউনলোড সম্পন্ন হলে, আপনার ওয়ার্কস্পেসে ফিরে যাওয়ার জন্য ফাইল মেনু থেকে আপনার ওয়ার্কিং ডিরেক্টরিটি পুনরায় খুলুন।

পরবর্তী পদক্ষেপ