कस्टम टेंप्लेट बनाना

Firebase Studio में, पहले से मौजूद कई टेंप्लेट उपलब्ध हैं. इनमें वे सभी फ़ाइलें, सिस्टम पैकेज (उदाहरण के लिए, कंपाइलर) और एक्सटेंशन शामिल हैं जिनकी मदद से, किसी भाषा या फ़्रेमवर्क का इस्तेमाल तुरंत शुरू किया जा सकता है.

GitHub पर होस्ट किए गए Firebase Studio वर्कस्पेस को कम्यूनिटी टेंप्लेट का इस्तेमाल करके भी लॉन्च किया जा सकता है. किसी टेंप्लेट से नया वर्कस्पेस लॉन्च करने के बारे में ज़्यादा जानने के लिए, Create a Firebase Studio workspace लेख पढ़ें.

ज़्यादातर उपयोगकर्ता, पहले से मौजूद टेंप्लेट का इस्तेमाल करेंगे या Git से प्रोजेक्ट इंपोर्ट करेंगे. हालांकि, ज़्यादा बेहतर इस्तेमाल के उदाहरणों के लिए, अपने टेंप्लेट बनाए जा सकते हैं:

• अगर अपना फ़्रेमवर्क, लाइब्रेरी या सेवा बनाई जा रही है, तो अपने उपयोगकर्ताओं को अपनी टेक्नोलॉजी का इस्तेमाल तुरंत शुरू करने की अनुमति दी जा सकती है. इसके लिए, उन्हें ब्राउज़र से बाहर निकलने की ज़रूरत नहीं होगी. साथ ही, वे क्लाउड पर आधारित वर्चुअल मशीन की पूरी क्षमता का इस्तेमाल कर पाएंगे.

• अगर आपके प्रोजेक्ट के लिए कोई पसंदीदा टेक्नोलॉजी स्टैक है, तो कस्टम टेंप्लेट की मदद से, नए प्रोजेक्ट शुरू करने की अपनी प्रोसेस को आसान बनाया जा सकता है.

• अगर ट्यूटोरियल या कोडलैब के ज़रिए दूसरों को सिखाया जा रहा है, तो अपने छात्र-छात्राओं के लिए शुरुआती कुछ चरण हटाए जा सकते हैं. इसके लिए, कोडलैब के शुरुआती पॉइंट को कस्टम टेंप्लेट के तौर पर पहले से कॉन्फ़िगर किया जा सकता है.

कस्टम टेंप्लेट बनाने और उसे टेस्ट करने के बाद, उसके लिए एक लिंक बनाया जा सकता है. इस लिंक को अपनी वेबसाइट, Git रिपॉज़िटरी README फ़ाइल, पैकेज की जानकारी वाले पेज (उदाहरण के लिए, NPM) या किसी अन्य जगह पर जोड़ा जा सकता है. इससे आपके उपयोगकर्ता, आपकी टेक्नोलॉजी का इस्तेमाल तुरंत शुरू कर पाएंगे.

ज़रूरी शर्तें

आपके प्रारंभ करने से पहले:

• अपने एनवायरमेंट को पसंद के मुताबिक बनाने के लिए, idx/dev.nix फ़ाइल का इस्तेमाल करने का तरीका जानें .

• Nix भाषा की बुनियादी बातें जानें और रेफ़रंस को अपने पास रखें.

टेंप्लेट फ़ाइल का स्ट्रक्चर

एक Firebase Studio टेंप्लेट, सार्वजनिक तौर पर उपलब्ध Git रिपॉज़िटरी (या रिपॉज़िटरी में मौजूद फ़ोल्डर या ब्रांच) होती है. इसमें कम से कम दो फ़ाइलें होती हैं:

• idx-template.json में टेंप्लेट का मेटाडेटा शामिल होता है. इसमें, टेंप्लेट का वह नाम, ब्यौरा, और पैरामीटर शामिल होते हैं जो उपयोगकर्ताओं को दिखते हैं. इनकी मदद से, उपयोगकर्ता टेंप्लेट को कॉन्फ़िगर कर सकते हैं. उदाहरण के लिए, अपने उपयोगकर्ताओं को कई प्रोग्रामिंग भाषाओं या इस्तेमाल के उदाहरणों में से चुनने की अनुमति दी जा सकती है. Firebase Studio इस जानकारी का इस्तेमाल करके वह यूज़र इंटरफ़ेस (यूआई) तैयार करता है जो उपयोगकर्ताओं को तब दिखता है, जब वे आपके टेंप्लेट से नया वर्कस्पेस बनाते हैं.

• idx-template.nix Nix भाषा में लिखी गई एक फ़ाइल है. इसमें Bash शेल स्क्रिप्ट (Nix फ़ंक्शन में रैप की गई) होती है, जो:

  1. नए वर्कस्पेस के लिए वर्किंग डायरेक्ट्री बनाती है.

  2. .idx/dev.nix फ़ाइल बनाकर, उसका एनवायरमेंट सेट अप करती है. ध्यान दें कि इस स्क्रिप्ट में, प्रोजेक्ट स्कैफ़ोल्डिंग टूल जैसे कि flutter create या npm init को भी चलाया जा सकता है. इसके अलावा, Go, Python, Node.js या किसी अन्य भाषा में लिखी गई कस्टम स्क्रिप्ट भी चलाई जा सकती है.

     Firebase Studio, टेंप्लेट लोड करते समय, इस फ़ाइल को उपयोगकर्ता के बताए गए पैरामीटर के साथ एक्ज़ीक्यूट करेगा जब Firebase Studio टेंप्लेट लोड करता है.

इन दोनों फ़ाइलों के साथ, अन्य फ़ाइलें भी शामिल की जा सकती हैं. इनका इस्तेमाल, टेंप्लेट को इंस्टैंशिएट करने के लिए idx-template.nix में किया जा सकता है. उदाहरण के लिए, फ़ाइनल .idx/dev.nix फ़ाइल शामिल की जा सकती है. इसके अलावा, रिपॉज़िटरी में स्कैफ़ोल्डिंग की सभी फ़ाइलें भी शामिल की जा सकती हैं.

स्टार्टर टेंप्लेट बनाना

टेंप्लेट को तेज़ी से बनाने के लिए, हमारा सुझाव है कि Firebase Studio टेंप्लेट बनाने के लिए, इनमें से किसी एक तरीके का इस्तेमाल करें. इसके बाद, टेंप्लेट को पसंद के मुताबिक बनाया जा सकता है:

• सार्वजनिक तौर पर उपलब्ध किसी भी GitHub रिपॉज़िटरी को टेंप्लेट में बदलना
• अपने टेंप्लेट के लिए, आधिकारिक या कम्यूनिटी टेंप्लेट का इस्तेमाल करना

बुनियादी उदाहरण: सार्वजनिक तौर पर उपलब्ध किसी भी GitHub रिपॉज़िटरी को टेंप्लेट में बदलना

idx-template.json और idx-template.nix को तय करने के तरीके के बारे में जानने से पहले, बुनियादी उदाहरण के तौर पर एक ऐसा टेंप्लेट देखना मददगार होता है, जो:

• उपयोगकर्ता के कॉन्फ़िगर किए जा सकने वाले पैरामीटर शामिल नहीं करता.
• आपके टेंप्लेट की रिपॉज़िटरी में मौजूद सभी फ़ाइलों (दो idx-template फ़ाइलों को छोड़कर) को उपयोगकर्ता के वर्कस्पेस में कॉपी करता है. .idx सबफ़ोल्डर में, dev.nix फ़ाइल पहले से मौजूद होनी चाहिए. यह फ़ाइल, एनवायरमेंट को तय करती है.

अगर सार्वजनिक तौर पर उपलब्ध किसी 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 डैशबोर्ड से सीधे तौर पर चुना जाता है.

• कम्यूनिटी टेंप्लेट: इन टेंप्लेट में, ओपन सोर्स कम्यूनिटी से योगदान स्वीकार किए जाते हैं. कम्यूनिटी टेंप्लेट का इस्तेमाल करने के लिए, कम्यूनिटी टेंप्लेट की Git रिपॉज़िटरी को क्लोन करें. आपके पास उस टेंप्लेट का पूरा लिंक इस्तेमाल करने का विकल्प होता है जिसका इस्तेमाल करना है.

किसी मौजूदा टेंप्लेट का इस्तेमाल करके, कस्टम टेंप्लेट बनाने के लिए:

1. तय करें कि आपको अपने कस्टम टेंप्लेट के लिए, किस टेंप्लेट का इस्तेमाल करना है. इसके बाद, प्रोजेक्ट को क्लोन करें.

2. ज़रूरत के हिसाब से, idx-template.json, idx-template.nix, और .idx/dev.nix को पसंद के मुताबिक बनाएं. इसके लिए, टेंप्लेट को पसंद के मुताबिक बनाना लेख पढ़ें.

3. अपने रिपॉज़िटरी में बदलावों की जांच करें.

4. अपने टेंप्लेट को पब्लिश और टेस्ट करने के लिए, अपने टेंप्लेट के लिए नया वर्कस्पेस बनाना लेख में दिया गया तरीका अपनाएं. अगर नेस्ट की गई रिपॉज़िटरी का इस्तेमाल किया जाता है, तो अपने यूआरएल में सीधे तौर पर उसका लिंक जोड़ें. उदाहरण के लिए, अगर कम्यूनिटी के "Vanilla Vite" टेंप्लेट का इस्तेमाल किया जा रहा है, तो नया वर्कस्पेस तैयार करने और उसे टेस्ट करने के लिए, इस यूआरएल का इस्तेमाल करें:

   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 या अन्य.

अपनी बूटस्ट्रैप स्क्रिप्ट के लिए अन्य सिस्टम पैकेज उपलब्ध कराए जा सकते हैं packages की जानकारी देकर, अपनी idx-template.nix फ़ाइल में. ठीक उसी तरह, जैसे किसी वर्कस्पेस को पसंद के मुताबिक बनाने के लिए, उसके 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"
  ''
}

उपयोगकर्ता के कॉन्फ़िगर किए जा सकने वाले पैरामीटर जोड़ना

उपयोगकर्ताओं को अपने नए प्रोजेक्ट के शुरुआती पॉइंट को पसंद के मुताबिक बनाने की अनुमति देने के लिए, कई टेंप्लेट बनाए जा सकते हैं या पैरामीटर वाला एक टेंप्लेट बनाया जा सकता है. यह एक बेहतरीन विकल्प है, अगर आपके अलग-अलग शुरुआती पॉइंट, सीएलआई टूल को पास की गई अलग-अलग वैल्यू हैं. उदाहरण के लिए, --language=js बनाम --language=ts.

पैरामीटर जोड़ने के लिए, आपको ये काम करने होंगे:

1. idx-template.json मेटाडेटा फ़ाइल के params ऑब्जेक्ट में, अपने पैरामीटर के बारे में जानकारी देनी होगी. Firebase Studio इस फ़ाइल में मौजूद जानकारी का इस्तेमाल करके, आपके टेंप्लेट के उपयोगकर्ताओं को दिखने वाला यूज़र इंटरफ़ेस (जैसे कि चेकबॉक्स, ड्रॉप-डाउन, और टेक्स्ट फ़ील्ड) तैयार करता है.
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
    }
  ]
}

इसमें दो वैल्यू (JavaScript और TypeScript) हैं. इसलिए, यूज़र इंटरफ़ेस (यूआई) में, दोनों विकल्पों के लिए रेडियो बटन ग्रुप दिखेगा. साथ ही, idx-template.nix स्क्रिप्ट को ts या js वैल्यू पास की जाएगी.

हर पैरामीटर ऑब्जेक्ट में ये प्रॉपर्टी होती हैं:

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" }

चुनना कि कौनसी फ़ाइलें डिफ़ॉल्ट रूप से खुलनी चाहिए

यह तय करना अच्छा होता है कि आपके टेंप्लेट से नए वर्कस्पेस बनाए जाने पर, किन फ़ाइलों को बदलाव करने के लिए खोला जाना चाहिए. उदाहरण के लिए, अगर आपका टेंप्लेट किसी बुनियादी वेबसाइट के लिए है, तो मुख्य एचटीएमएल, JavaScript, और सीएसएस फ़ाइलें खोली जा सकती हैं.

यह तय करने के लिए कि कौनसी फ़ाइलें डिफ़ॉल्ट रूप से खुलनी चाहिए, अपनी .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 नाम की पीएनजी फ़ाइल रखें.

नए वर्कस्पेस में अपने टेंप्लेट को टेस्ट करना

अपने टेंप्लेट को एंड-टू-एंड टेस्ट करने का सबसे आसान तरीका है कि उससे एक नया वर्कस्पेस बनाया जाए. इस लिंक पर जाएं. इसमें दिए गए उदाहरण को अपने टेंप्लेट की GitHub रिपॉज़िटरी के यूआरएल से बदलें:

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

यह वह यूआरएल भी है जिसे दूसरों के साथ शेयर किया जाएगा, ताकि वे आपके नए टेंपलेट का इस्तेमाल कर सकें. इसके अलावा, यह वह यूआरएल है जिसे "Firebase Studio में खोलें" बटन से लिंक किया जाएगा.

अपना टेंप्लेट शेयर करना

पुष्टि करने के बाद कि आपका टेंप्लेट उम्मीद के मुताबिक काम करता है, उसे a GitHub रिपॉज़िटरी पर पब्लिश करें. साथ ही, वही लिंक शेयर करें जिसका इस्तेमाल आपने टेस्ट करने के लिए वर्कस्पेस बनाते समय किया था.

उपयोगकर्ताओं के लिए अपने टेंप्लेट को ढूंढना और भी आसान बनाने के लिए, अपनी वेबसाइट या रिपॉज़िटरी के README में " में खोलें" बटन जोड़ें.Firebase Studio