একটি কাস্টম টেমপ্লেট তৈরি করুন

Firebase Studio বিভিন্ন ধরনের বিল্ট-ইন টেমপ্লেট রয়েছে, যেগুলোতে কোনো ল্যাঙ্গুয়েজ বা ফ্রেমওয়ার্ক দিয়ে দ্রুত কাজ শুরু করার জন্য আপনার প্রয়োজনীয় সমস্ত ফাইল, সিস্টেম প্যাকেজ (যেমন, কম্পাইলার) এবং এক্সটেনশন অন্তর্ভুক্ত থাকে।

আপনি GitHub-এ হোস্ট করা কমিউনিটি টেমপ্লেট ব্যবহার করেও একটি Firebase Studio ওয়ার্কস্পেস চালু করতে পারেন। একটি টেমপ্লেট থেকে নতুন ওয়ার্কস্পেস চালু করার বিষয়ে আরও তথ্যের জন্য, "Create a Firebase Studio workspace" দেখুন।

বেশিরভাগ ব্যবহারকারী বিল্ট-ইন টেমপ্লেট ব্যবহার করবেন অথবা গিট থেকে প্রজেক্ট ইম্পোর্ট করবেন, কিন্তু আরও উন্নত ব্যবহারের ক্ষেত্রে, আপনি নিজের টেমপ্লেট তৈরি করতে পারেন:

• আপনি যদি নিজের ফ্রেমওয়ার্ক, লাইব্রেরি বা সার্ভিস তৈরি করেন , তাহলে ক্লাউড-ভিত্তিক ভার্চুয়াল মেশিনের পূর্ণ শক্তি ব্যবহার করে আপনার ব্যবহারকারীদের ব্রাউজার থেকে বের না হয়েই দ্রুত আপনার প্রযুক্তি ব্যবহার শুরু করার সুযোগ দিতে পারেন।

• আপনার প্রোজেক্টগুলোর জন্য যদি কোনো পছন্দের টেকনোলজি স্ট্যাক থাকে, তাহলে একটি কাস্টম টেমপ্লেটের মাধ্যমে নতুন প্রোজেক্ট শুরু করার প্রক্রিয়াটিকে আপনি আরও সহজ করে নিতে পারেন।

• আপনি যদি টিউটোরিয়াল বা কোডল্যাবের মাধ্যমে অন্যদের কিছু শেখান , তাহলে আপনার কোডল্যাবের শুরুর স্থানটিকে একটি কাস্টম টেমপ্লেট হিসেবে আগে থেকে কনফিগার করে শিক্ষার্থীদের জন্য কিছু প্রাথমিক ধাপ কমিয়ে দিতে পারেন।

আপনার কাস্টম টেমপ্লেট তৈরি এবং পরীক্ষা করার পরে, আপনি এটির জন্য একটি লিঙ্ক তৈরি করতে পারেন। এই লিঙ্কটি আপনি আপনার ওয়েবসাইট, গিট রিপোজিটরি README ফাইল, প্যাকেজ ডিটেইল পেজ (উদাহরণস্বরূপ, NPM-এ), অথবা এমন যেকোনো জায়গায় রাখতে পারেন যেখানে আপনার ব্যবহারকারীরা আপনার প্রযুক্তি ব্যবহার শুরু করবে বলে আপনি আশা করেন।

পূর্বশর্ত

শুরু করার আগে:

• আপনার পরিবেশ কাস্টমাইজ করতে idx/dev.nix ফাইলটি কীভাবে ব্যবহার করবেন তা শিখুন।

• নিক্স ল্যাঙ্গুয়েজের মৌলিক বিষয়গুলোর সাথে পরিচিত হন এবং রেফারেন্সটি হাতের কাছে রাখুন।

টেমপ্লেট ফাইল কাঠামো

একটি Firebase Studio টেমপ্লেট হলো একটি পাবলিক Git রিপোজিটরি (অথবা রিপোজিটরির মধ্যে থাকা কোনো ফোল্ডার বা ব্রাঞ্চ) যাতে কমপক্ষে দুটি ফাইল থাকে:

• idx-template.json ফাইলে টেমপ্লেটের মেটাডেটা থাকে, যার মধ্যে রয়েছে এর ব্যবহারকারী-দৃশ্যমান নাম, বিবরণ এবং টেমপ্লেটটি কনফিগার করার জন্য ব্যবহারকারীদের কাছে উপলব্ধ প্যারামিটারসমূহ। উদাহরণস্বরূপ, আপনি আপনার ব্যবহারকারীদের বিভিন্ন প্রোগ্রামিং ভাষা বা উদাহরণমূলক ব্যবহারের ক্ষেত্র (use cases) থেকে বেছে নেওয়ার সুযোগ দিতে পারেন। ব্যবহারকারীরা যখন আপনার টেমপ্লেট থেকে একটি নতুন ওয়ার্কস্পেস তৈরি করতে চান, তখন তাদের দেখানোর জন্য UI প্রস্তুত করতে Firebase Studio এই তথ্য ব্যবহার করে।

• idx-template.nix হলো Nix ভাষায় লেখা একটি ফাইল, যাতে একটি Bash শেল স্ক্রিপ্ট (একটি Nix ফাংশনের মধ্যে আবদ্ধ) রয়েছে, যা:

  1. নতুন ওয়ার্কস্পেসের জন্য ওয়ার্কিং ডিরেক্টরি তৈরি করে।

  2. একটি .idx/dev.nix ফাইল তৈরি করে এটি তার পরিবেশ প্রস্তুত করে। উল্লেখ্য যে, আপনি এই স্ক্রিপ্টে flutter create বা npm init মতো কোনো প্রজেক্ট স্কাফোল্ডিং টুল চালাতে পারেন, অথবা Go, Python, Node.js বা অন্য কোনো ভাষায় লেখা একটি কাস্টম স্ক্রিপ্টও চালাতে পারেন।

     Firebase Studio যখন টেমপ্লেটটি লোড করবে, তখন ব্যবহারকারীর নির্দিষ্ট করা প্যারামিটার অনুযায়ী এই ফাইলটি এক্সিকিউট করা হবে।

টেমপ্লেটটি ইনস্ট্যানশিয়েট করার জন্য, idx-template.nix এ ব্যবহারের উদ্দেশ্যে এই দুটি ফাইলের পাশাপাশি অন্যান্য ফাইলও অন্তর্ভুক্ত করা যেতে পারে। উদাহরণস্বরূপ, আপনি চূড়ান্ত .idx/dev.nix ফাইলটি অন্তর্ভুক্ত করতে পারেন, অথবা এমনকি সমস্ত স্ক্যাফোল্ডিং ফাইল সরাসরি রিপোজিটরিতেই অন্তর্ভুক্ত করতে পারেন।

একটি স্টার্টার টেমপ্লেট তৈরি করুন

টেমপ্লেট তৈরির প্রক্রিয়া দ্রুত করার জন্য, আমরা আপনাকে নিম্নলিখিত পদ্ধতিগুলোর মধ্যে যেকোনো একটি দিয়ে শুরু করার পরামর্শ দিই, যার মাধ্যমে আপনি একটি Firebase Studio টেমপ্লেট তৈরি করতে পারবেন যা পরবর্তীতে আপনার প্রয়োজন অনুযায়ী সাজিয়ে নেওয়া যাবে:

• যেকোনো পাবলিক গিটহাব রিপোজিটরিকে টেমপ্লেটে পরিণত করুন
• আপনার টেমপ্লেটের ভিত্তি হিসেবে কোনো আনুষ্ঠানিক বা কমিউনিটি টেমপ্লেট ব্যবহার করুন।

একটি সাধারণ উদাহরণ: যেকোনো পাবলিক গিটহাব রিপোজিটরিকে একটি টেমপ্লেটে পরিণত করুন।

আপনার idx-template.json এবং idx-template.nix কীভাবে সংজ্ঞায়িত করবেন তার বিস্তারিত জানার আগে, একটি সাধারণ উদাহরণ টেমপ্লেট দেখা সহায়ক হবে যা:

• এতে ব্যবহারকারী-কনফিগারযোগ্য কোনো প্যারামিটার নেই।
• আপনার টেমপ্লেট রিপোজিটরির সমস্ত ফাইল (দুটি idx-template ফাইল বাদে) ব্যবহারকারীর ওয়ার্কস্পেসে কপি করে। সেখানে আগে থেকেই একটি .idx সাবফোল্ডার থাকা উচিত, যার মধ্যে একটি dev.nix ফাইল থাকবে যা এনভায়রনমেন্ট নির্ধারণ করে।

যদি আপনি নিম্নলিখিত ফাইলগুলি কোনো পাবলিক গিটহাব রিপোজিটরিতে (বা সাবফোল্ডার বা ব্রাঞ্চে) যোগ করেন, তাহলে এটি কার্যকরভাবে সেই রিপোজিটরিটিকে একটি Firebase Studio টেমপ্লেটে পরিণত করে।

idx-template.json

{
  "name": "Hello world",
  "description": "A template for a CLI program that prints 'hello world'",
  "icon": "https://www.gstatic.com/images/branding/productlogos/studio/v1/192px.svg",
  "params": []
}

idx-template.nix

# No user-configurable parameters
{ pkgs, ... }: {
  # Shell script that produces the final environment
  bootstrap = ''
    # Copy the folder containing the `idx-template` files to the final
    # project folder for the new workspace. ${./.} inserts the directory
    # of the checked-out Git folder containing this template.
    cp -rf ${./.} "$out"

    # Set some permissions
    chmod -R +w "$out"

    # Remove the template files themselves and any connection to the template's
    # Git repository
    rm -rf "$out/.git" "$out/idx-template".{nix,json}
  '';
}

আপনার টেমপ্লেটটি কাস্টমাইজ করার জন্য আপনি আরও কী কী পরিবর্তন করতে পারেন, সে সম্পর্কে জানতে 'আপনার টেমপ্লেট কাস্টমাইজ করুন' অংশে যান।

অফিসিয়াল বা কমিউনিটি টেমপ্লেট ব্যবহার করে একটি কাস্টম টেমপ্লেট তৈরি করুন

Firebase Studio টিম Firebase Studio টেমপ্লেটগুলির জন্য দুটি রিপোজিটরি রক্ষণাবেক্ষণ করে:

• অফিসিয়াল টেমপ্লেট : নতুন অ্যাপ তৈরি করার সময় আপনি সরাসরি Firebase Studio ড্যাশবোর্ড থেকে এই টেমপ্লেটগুলো নির্বাচন করেন।

• কমিউনিটি টেমপ্লেট : এই টেমপ্লেটগুলো ওপেন সোর্স কমিউনিটির অবদানকে সুযোগ দেয়। একটি কমিউনিটি টেমপ্লেট ব্যবহার করতে, কমিউনিটি টেমপ্লেট গিট রিপোজিটরিটি ক্লোন করুন। আপনি যে টেমপ্লেটটি ব্যবহার করতে চান, তার সম্পূর্ণ লিঙ্কটি ব্যবহার করতে পারেন।

বিদ্যমান কোনো টেমপ্লেটকে ভিত্তি করে একটি কাস্টম টেমপ্লেট তৈরি করতে:

1. আপনার কাস্টম টেমপ্লেটের ভিত্তি হিসেবে কোন টেমপ্লেটটি ব্যবহার করবেন তা স্থির করুন, তারপর প্রজেক্টটি ক্লোন করুন।

2. আপনার টেমপ্লেট কাস্টমাইজ করুন (Customize your template) থেকে শুরু করে, প্রয়োজন অনুযায়ী idx-template.json , idx-template.nix , এবং .idx/dev.nix কাস্টমাইজ করুন।

3. আপনার রিপোজিটরিতে পরিবর্তনগুলো চেক ইন করুন।

4. আপনার টেমপ্লেট প্রকাশ ও পরীক্ষা করার জন্য একটি নতুন ওয়ার্কস্পেস তৈরি করুন । আপনি যদি একটি নেস্টেড রিপোজিটরি ব্যবহার করেন, তবে আপনার URL-এ সরাসরি সেটির লিঙ্ক দিন। উদাহরণস্বরূপ, আপনি যদি কমিউনিটির "ভ্যানিলা ভাইট" টেমপ্লেটটি ব্যবহার করেন, তাহলে আপনি নিম্নলিখিত URL ব্যবহার করে একটি নতুন ওয়ার্কস্পেস প্রোভিশন এবং পরীক্ষা করবেন:

   https://studio.firebase.google.com/new?template=https://github.com/firebase-studio/community-templates/tree/main/vite-vanilla
   

আপনার টেমপ্লেটটি কাস্টমাইজ করার জন্য আপনি আরও কী কী পরিবর্তন করতে পারেন, সে সম্পর্কে জানতে 'আপনার টেমপ্লেট কাস্টমাইজ করুন' অংশে যান।

আপনার টেমপ্লেট কাস্টমাইজ করুন

এখন যেহেতু আপনি ভিত্তি হিসেবে ব্যবহারের জন্য একটি প্রাথমিক টেমপ্লেট তৈরি করে ফেলেছেন, আপনি আপনার প্রয়োজন অনুযায়ী idx-template.json , idx-template.nix , এবং .idx/dev.nix ফাইলগুলো সম্পাদনা করতে পারেন। আপনি চাইলে অতিরিক্ত কনফিগারেশনও কাস্টমাইজ করতে পারেন:

• আপনার bootstrap স্ক্রিপ্টে সিস্টেম প্যাকেজগুলো যোগ করুন ।
• ব্যবহারকারী-কনফিগারযোগ্য প্যারামিটার যোগ করুন
• ডিফল্টরূপে কোন ফাইলগুলো খুলবে তা বেছে নিন
• একটি ডিফল্ট ওয়ার্কস্পেস আইকন বেছে নিন

আপনার bootstrap স্ক্রিপ্টে অতিরিক্ত সিস্টেম প্যাকেজ ব্যবহার করুন

এই সাধারণ উদাহরণটিতে ফাইলগুলোকে সঠিক জায়গায় কপি করার জন্য শুধুমাত্র সাধারণ POSIX কমান্ড ব্যবহার করা হয়েছে। আপনার টেমপ্লেটের bootstrap স্ক্রিপ্টের জন্য অতিরিক্ত বাইনারি ইনস্টল করার প্রয়োজন হতে পারে, যেমন git , node , python3 বা অন্যগুলো।

আপনি আপনার idx-template.nix ফাইলে packages নির্দিষ্ট করে আপনার বুটস্ট্র্যাপ স্ক্রিপ্টের জন্য অতিরিক্ত সিস্টেম প্যাকেজ উপলব্ধ করতে পারেন, ঠিক যেমন আপনি কোনো ওয়ার্কস্পেসের dev.nix ফাইলে packages যোগ করে সেটিকে অতিরিক্ত সিস্টেম প্যাকেজ দিয়ে কাস্টমাইজ করেন ।

এখানে pkgs.nodejs যোগ করার একটি উদাহরণ দেওয়া হলো, যার মধ্যে node , npx এবং npm মতো বাইনারিগুলো অন্তর্ভুক্ত রয়েছে:

# idx-template.nix
{pkgs}: {
  packages = [
    # Enable "node", "npm" and "npx" in the bootstrap script below.
    # Note, this is NOT the list of packages available to the workspace once
    # it's created. Those go in .idx/dev.nix
    pkgs.nodejs
  ];

  bootstrap = ''
    mkdir "$out"
    # We can now use "npm"
    npm init --yes my-boot-strap@latest "$out"
  ''
}

ব্যবহারকারী-কনফিগারযোগ্য প্যারামিটার যোগ করুন

ব্যবহারকারীদের তাদের নতুন প্রজেক্টের সূচনা বিন্দু কাস্টমাইজ করার সুযোগ দিতে, আপনি একাধিক টেমপ্লেট তৈরি করতে পারেন, অথবা প্যারামিটারসহ একটিমাত্র টেমপ্লেট তৈরি করতে পারেন। এটি একটি চমৎকার বিকল্প, যদি আপনার বিভিন্ন সূচনা বিন্দুগুলো কোনো CLI টুলে পাঠানো ভিন্ন ভিন্ন ভ্যালু হয় (উদাহরণস্বরূপ --language=js বনাম --language=ts )।

প্যারামিটার যোগ করতে, আপনাকে যা করতে হবে তা হলো:

1. আপনার idx-template.json মেটাডেটা ফাইলের params অবজেক্টে আপনার প্যারামিটারটি বর্ণনা করুন। Firebase Studio আপনার টেমপ্লেটের ব্যবহারকারীদের কাছে প্রদর্শিত UI (যেমন চেকবক্স, ড্রপ-ডাউন এবং টেক্সট ফিল্ড) প্রস্তুত করতে এই ফাইলের তথ্য ব্যবহার করে।
2. টেমপ্লেট ইনস্ট্যানশিয়েট করার সময় ব্যবহারকারীর নির্বাচিত মানগুলো ব্যবহার করার জন্য আপনার idx-template.nix বুটস্ট্র্যাপটি আপডেট করুন।

idx-template.json এ আপনার প্যারামিটারটি বর্ণনা করুন।

এখানে একটি enum প্যারামিটার যোগ করার উদাহরণ দেওয়া হলো, যা Firebase Studio অপশনের সংখ্যার উপর নির্ভর করে একটি ড্রপ-ডাউন মেনু অথবা রেডিও বাটন গ্রুপ হিসেবে দেখায়:

{
  "name": "Hello world",
  "description": "A hello world app",
  "params": [
    {
      "id": "language",
      "name": "Programming Language",
      "type": "enum",
      "default": "ts",
      "options": {
        "js": "JavaScript",
        "ts": "TypeScript"
      },
      "required": true
    }
  ]
}

যেহেতু দুটি ভ্যালু (জাভাস্ক্রিপ্ট এবং টাইপস্ক্রিপ্ট) রয়েছে, তাই UI এই দুটি অপশনের জন্য একটি রেডিও বাটন গ্রুপ রেন্ডার করবে এবং idx-template.nix স্ক্রিপ্টে ts অথবা js ভ্যালুটি পাস করবে।

প্রতিটি প্যারামিটার অবজেক্টের নিম্নলিখিত বৈশিষ্ট্যগুলো রয়েছে:

idx-template.nix এ প্যারামিটার মান ব্যবহার করুন

আপনার idx-template.json ফাইলে params অবজেক্টটি সংজ্ঞায়িত করার পর, আপনি ব্যবহারকারীর বেছে নেওয়া প্যারামিটার মানগুলির উপর ভিত্তি করে বুটস্ট্র্যাপ স্ক্রিপ্টটি কাস্টমাইজ করা শুরু করতে পারেন।

পূর্ববর্তী বিভাগের উদাহরণ অনুসরণ করে, যদি আপনার ' language আইডি সহ একটিমাত্র প্যারামিটার থাকে যা একটি enum এবং যার সম্ভাব্য মান ts বা js , তাহলে আপনি এটি এইভাবে ব্যবহার করতে পারেন:

# idx-template.nix
# Accept additional arguments to this template corresponding to template
# parameter IDs, including default values (language=ts by default in this example).
{ pkgs, language ? "ts", ... }: {
  packages = [
    pkgs.nodejs
  ];

  bootstrap = ''
    # We use Nix string interpolation to pass the user's chosen programming
    # language to our script.
    npm init --yes my-boot-strap@latest "$out" -- --lang=${language}
  ''
}

আরেকটি প্রচলিত রীতি হলো কোনো স্ট্রিং-এর মানের ওপর নির্ভর করে শর্তসাপেক্ষে কন্টেন্ট অন্তর্ভুক্ত করা। পূর্ববর্তী উদাহরণটি লেখার আরেকটি উপায় হলো:

npm init --yes my-boot-strap@latest "$out" -- \
    ${if language == "ts" then "--lang=ts" else "--lang=js" }

ডিফল্টরূপে কোন ফাইলগুলো খুলবে তা বেছে নিন

আপনার টেমপ্লেট দিয়ে নতুন ওয়ার্কস্পেস তৈরি করার সময় সম্পাদনার জন্য কোন ফাইলগুলো খোলা হবে তা কাস্টমাইজ করে নেওয়া একটি ভালো ধারণা। উদাহরণস্বরূপ, যদি আপনার টেমপ্লেটটি একটি সাধারণ ওয়েবসাইটের জন্য হয়, তাহলে আপনি মূল HTML, JavaScript, এবং CSS ফাইলগুলো খুলতে চাইতে পারেন।

ডিফল্টরূপে কোন ফাইলগুলো খুলবে তা কাস্টমাইজ করতে, আপনার .idx/dev.nix ফাইলটি ( idx-template.nix ফাইল নয় !) আপডেট করে তাতে openFiles অ্যাট্রিবিউটসহ একটি onCreate ওয়ার্কস্পেস হুক অন্তর্ভুক্ত করুন, যেমনটা নিচে দেখানো হয়েছে:

# .idx/dev.nix
{pkgs}: {
  ...
  idx = {
    # Workspace lifecycle hooks
    workspace = {
      # Runs when a workspace is first created with this `dev.nix` file
      onCreate = {
        # Open editors for the following files by default, if they exist.
        # The last file in the list will be focused.
        default.openFiles = [
          "src/index.css"
          "src/index.js"
          "src/index.html"
        ];
        # Include other scripts here, as needed, for example:
        # installDependencies = "npm install";
      };
      # To run something each time the workspace is (re)started, use the `onStart` hook
    };
    # Enable previews and customize configuration
    previews = { ... };
  };
}

একটি ডিফল্ট ওয়ার্কস্পেস আইকন বেছে নিন

আপনার টেমপ্লেট দিয়ে তৈরি ওয়ার্কস্পেসগুলোর জন্য ডিফল্ট আইকন বেছে নিতে, .idx ডিরেক্টরির ভেতরে dev.nix ফাইলের পাশে icon.png নামের একটি PNG ফাইল রাখুন।

একটি নতুন ওয়ার্কস্পেসে আপনার টেমপ্লেটটি পরীক্ষা করুন

আপনার টেমপ্লেটটি পুরোপুরি পরীক্ষা করার সবচেয়ে সহজ উপায় হলো এটি দিয়ে একটি নতুন ওয়ার্কস্পেস তৈরি করা। নিম্নলিখিত লিঙ্কে যান, যেখানে উদাহরণটির পরিবর্তে আপনার টেমপ্লেটের গিটহাব রিপোজিটরি ইউআরএলটি বসান:

https://idx.google.com/new?template=https://github.com/my-org/my-repo

আপনি চাইলে একটি শাখা এবং সাবফোল্ডার অন্তর্ভুক্ত করতে পারেন। নিম্নলিখিত সবগুলোই বৈধ, যতক্ষণ পর্যন্ত সেগুলো সর্বজনীনভাবে প্রবেশযোগ্য থাকে:

• https://github.com/my-org/my-repo/
• https://github.com/my-org/my-repo/tree/main/path/to/myidxtemplate
• https://github.com/my-org/my-repo/tree/branch
• https://github.com/my-org/my-repo/tree/branch/path/to/myidxtemplate

এই URL-টিই আপনি অন্যদের সাথে শেয়ার করবেন যাতে তারা আপনার নতুন টেমপ্লেটটি ব্যবহার করতে পারে, অথবা এটি সেই URL- যা আপনি আপনার "Open in Firebase Studio " বাটন থেকে লিঙ্ক করবেন।

আপনার টেমপ্লেট শেয়ার করুন

আপনার টেমপ্লেটটি প্রত্যাশিতভাবে কাজ করছে কিনা তা নিশ্চিত করার পর, এটিকে একটি গিটহাব রিপোজিটরিতে প্রকাশ করুন এবং পরীক্ষার জন্য ওয়ার্কস্পেস তৈরির সময় ব্যবহৃত একই লিঙ্কটি শেয়ার করুন।

এবং ব্যবহারকারীদের জন্য আপনার টেমপ্লেট খুঁজে পাওয়া আরও সহজ করতে, আপনার ওয়েবসাইট বা রিপোজিটরির README-তে একটি "Open in Firebase Studio " বাটন যোগ করুন।