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

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

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

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

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

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

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

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

পূর্বশর্ত

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

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

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

টেমপ্লেট ফাইল গঠন

একটি Firebase Studio টেমপ্লেট হল একটি পাবলিক গিট রিপোজিটরি (অথবা একটি রিপোজিটরিতে ফোল্ডার বা শাখা) যাতে কমপক্ষে দুটি ফাইল থাকে:

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

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

  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 ফাইল ছাড়া) ব্যবহারকারীর কর্মক্ষেত্রে অনুলিপি করে। ইতিমধ্যেই একটি dev.nix ফাইল সহ একটি .idx সাবফোল্ডার থাকা উচিত যা পরিবেশকে সংজ্ঞায়িত করে।

আপনি যদি নিম্নলিখিত ফাইলগুলি যেকোনো পাবলিক GitHub রিপোজিটরিতে (অথবা সাবফোল্ডার বা শাখায়) যোগ করেন, তাহলে এটি কার্যকরভাবে সেই রিপোজিটরিটিকে একটি 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. প্রয়োজন অনুসারে idx-template.json , idx-template.nix , এবং .idx/dev.nix কাস্টমাইজ করুন, Customize your template দিয়ে শুরু করুন।

3. আপনার সংগ্রহস্থলের পরিবর্তনগুলি পরীক্ষা করুন।

4. আপনার টেমপ্লেটটি প্রকাশ এবং পরীক্ষা করার জন্য একটি নতুন ওয়ার্কস্পেস তৈরি করুন অনুসরণ করুন। যদি আপনি একটি নেস্টেড রিপোজিটরি ব্যবহার করেন, তাহলে আপনার URL-এ সরাসরি এটির সাথে লিঙ্ক করুন। উদাহরণস্বরূপ, যদি আপনি "Vanilla Vite" কমিউনিটি টেমপ্লেট ব্যবহার করেন, তাহলে আপনি নিম্নলিখিত 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 দুটি বিকল্পের জন্য একটি রেডিও বোতাম গ্রুপ রেন্ডার করবে এবং ts অথবা js মানটি idx-template.nix স্ক্রিপ্টে পাস করবে।

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

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

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

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

# 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 ফাইল নয় !) আপডেট করুন যাতে একটি onCreate ওয়ার্কস্পেস হুক অন্তর্ভুক্ত করা হয় যার মধ্যে একটি openFiles বৈশিষ্ট্য রয়েছে, যেমন:

# .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 ফাইল রেখে।

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

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

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 যা আপনি অন্যদের সাথে শেয়ার করবেন যাতে তারা আপনার নতুন টেমপ্লেট ব্যবহার করতে পারে, অথবা আপনার "Open in Firebase Studio " বোতাম থেকে লিঙ্ক করা URL।

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

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

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