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

IDX বিল্ট-ইন টেমপ্লেটের একটি বিস্তৃত পরিসর অফার করে যার মধ্যে সমস্ত ফাইল, সিস্টেম প্যাকেজ (যেমন কম্পাইলার) এবং এক্সটেনশনগুলি অন্তর্ভুক্ত রয়েছে যা একজন ব্যবহারকারীকে একটি ভাষা বা কাঠামোর সাথে দ্রুত শুরু করার জন্য প্রয়োজন হতে পারে।

আপনি আপনার নিজস্ব, ব্যবহারকারী-কনফিগারযোগ্য টেমপ্লেট তৈরি করতে চাইতে পারেন। উদাহরণ স্বরূপ:

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

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

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

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

পূর্বশর্ত

শুরু করার আগে, নিশ্চিত করুন যে আপনি .idx/dev.nix ফাইলগুলির সাথে আপনার পরিবেশ কাস্টমাইজ করার সাথে পরিচিত।

টেমপ্লেটগুলি নিক্স ভাষাও ব্যবহার করে, তাই আপনি কিছু মৌলিক বিষয়গুলি ব্রাশ করতে চাইতে পারেন, বা এটিকে একটি রেফারেন্স হিসাবে ব্যবহার করতে পারেন৷

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

একটি টেমপ্লেট হল একটি সর্বজনীন GitHub সংগ্রহস্থল (বা একটি সংগ্রহস্থলের ফোল্ডার বা শাখা) যাতে কমপক্ষে দুটি ফাইল থাকে:

  • ডায়ালগ ব্যবহারকারীরা দেখেন যখন তারা আপনার টেমপ্লেট থেকে একটি নতুন ওয়ার্কস্পেস তৈরি করে
    একটি কাস্টম টেমপ্লেট থেকে একটি নতুন কর্মক্ষেত্র তৈরি করা হচ্ছে

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

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

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

    টেমপ্লেট কনফিগার করার সময় ব্যবহারকারীর দ্বারা নির্দিষ্ট করা প্যারামিটারের সাথে এই ফাইলটি কার্যকর করা হবে।

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

একটি মৌলিক উদাহরণ: যেকোনো পাবলিক GitHub সংগ্রহস্থলকে একটি টেমপ্লেটে পরিণত করুন

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

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

যেকোনো পাবলিক গিটহাব রিপোজিটরিতে (বা সাবফোল্ডার বা শাখা) নিম্নলিখিত ফাইলগুলি যুক্ত করা কার্যকরভাবে সেই রিপোজিটরিটিকে একটি IDX টেমপ্লেটে পরিণত করে।

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/idx/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}
  '';
}

আপনার 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 অবজেক্টে আপনার প্যারামিটার বর্ণনা করুন। আপনার টেমপ্লেটের ব্যবহারকারীদের দেখানো UI (যেমন চেকবক্স, ড্রপ-ডাউন এবং টেক্সট ফিল্ড) প্রস্তুত করতে IDX এই ফাইলের তথ্য ব্যবহার করে।
  2. আপনার idx-template.nix বুটস্ট্র্যাপ আপডেট করুন টেমপ্লেট চালু করার সময় ব্যবহারকারীর দ্বারা নির্বাচিত মানগুলি ব্যবহার করতে।

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

এখানে একটি enum প্যারামিটার যোগ করার একটি উদাহরণ দেওয়া হল, যা IDX একটি ড্রপ-ডাউন মেনু বা রেডিও বোতাম গ্রুপ হিসাবে দেখায়, বিকল্পের সংখ্যার উপর নির্ভর করে।

{
  "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 স্ক্রিপ্টে পাস করবে।

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

সম্পত্তি টাইপ বর্ণনা
আইডি string প্যারামিটারের অনন্য ID, একটি পরিবর্তনশীল নামের অনুরূপ।
নাম string এই পরামিতি জন্য প্রদর্শন নাম.
টাইপ string

এই প্যারামিটারের জন্য ব্যবহার করার জন্য UI উপাদান এবং বুটস্ট্র্যাপ স্ক্রিপ্টে পাস করার জন্য ডেটা টাইপ নির্দিষ্ট করে। বৈধ মান হল:

  • "enum" - একটি ড্রপ-ডাউন বা রেডিও বোতাম গ্রুপ দেখায়, এবং বুটস্ট্র্যাপে একটি string পাস করে
  • "boolean" - একটি চেকবক্স দেখায় এবং true বা false পাস করে
  • "text" - একটি পাঠ্য ক্ষেত্র দেখায় এবং একটি string পাস করে
বিকল্প object enum প্যারামিটারের জন্য, এটি ব্যবহারকারীদের দেখানোর বিকল্পগুলি উপস্থাপন করে। উদাহরণস্বরূপ যদি বিকল্পগুলি {"js": "JavaScript", ...} , "JavaScript" বিকল্প হিসাবে দেখানো হবে, এবং এই প্যারামিটারের মান নির্বাচন করা হলে js হবে।
ডিফল্ট string বা boolean UI-তে প্রাথমিক মান সেট করে। enum প্যারামিটারের জন্য, এটি অবশ্যই options মধ্যে একটি কী হতে হবে। boolean প্যারামিটারের জন্য, এটি true বা false হওয়া উচিত।
প্রয়োজনীয় boolean নির্দেশ করে যে এই প্যারামিটারটি প্রয়োজন।

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

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

পূর্ববর্তী বিভাগে উদাহরণ অনুসরণ করে, যদি আপনার কাছে আইডি 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 ফাইল নয় !) একটি 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 = { ... };
  };
}

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

আপনার টেমপ্লেট এন্ড-টু-এন্ড পরীক্ষা করার সবচেয়ে সহজ উপায় হল এটি দিয়ে একটি নতুন ওয়ার্কস্পেস তৈরি করা। আপনার টেমপ্লেটের 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 যা আপনি অন্যদের সাথে শেয়ার করবেন যাতে তারা আপনার নতুন টেমপ্লেট ব্যবহার করতে পারে, অথবা আপনি যে URLটি আপনার "IDX-এ খুলুন" বোতাম থেকে লিঙ্ক করবেন।

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

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

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