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

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

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

ज़्यादातर उपयोगकर्ता, पहले से मौजूद टेंप्लेट का इस्तेमाल करेंगे या 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 टेंप्लेट लोड करेगा, तब इस फ़ाइल को उपयोगकर्ता के तय किए गए पैरामीटर के साथ चलाया जाएगा.

टेंप्लेट को इंस्टैंशिएट करने के लिए, इन दो फ़ाइलों के साथ अन्य फ़ाइलें भी शामिल की जा सकती हैं, ताकि 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/project-idx/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 जोड़कर, अतिरिक्त सिस्टम पैकेज की मदद से Workspace को पसंद के मुताबिक बनाया जाता है.

यहां 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 जैसी संभावित वैल्यू वाला एक एनम है, तो इसका इस्तेमाल इस तरह किया जा सकता है:

# 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 नाम की 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 में खोलें" बटन से लिंक करना होगा.

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

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

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