Firebase Studio के फ़ाइल फ़ोल्डर को पसंद के मुताबिक बनाना

Firebase Studio की मदद से, अपने प्रोजेक्ट की खास ज़रूरतों के हिसाब से फ़ाइल फ़ोल्डर को बनाया जा सकता है. इसके लिए, एक .idx/dev.nix कॉन्फ़िगरेशन फ़ाइल तय करें. इसमें ये चीज़ें शामिल होनी चाहिए:

  • ऐसे सिस्टम टूल जिन्हें आपको चलाना होगा. जैसे, कंपाइलर या अन्य बाइनरी. इन्हें टर्मिनल से चलाया जा सकता है.
  • आपको जो एक्सटेंशन इंस्टॉल करने हैं (उदाहरण के लिए, प्रोग्रामिंग भाषा के लिए सहायता).
  • ऐप्लिकेशन की झलक कैसे दिखनी चाहिए. उदाहरण के लिए, वेब सर्वर को चलाने के लिए निर्देश.
  • आपके वर्कस्पेस में चल रहे लोकल सर्वर के लिए उपलब्ध ग्लोबल एनवायरमेंट वैरिएबल.

उपलब्ध सुविधाओं के बारे में पूरी जानकारी पाने के लिए, dev.nix रेफ़रंस देखें.

अपने प्रोजेक्ट में .idx/mcp.json (Firebase में Gemini के लिए) या .gemini/settings.json (Gemini CLI के लिए) फ़ाइल जोड़कर, Firebase MCP सर्वर के साथ-साथ, मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) सर्वर से भी कनेक्ट किया जा सकता है.

Nix और Firebase Studio

Firebase Studio, हर वर्कस्पेस के लिए एनवायरमेंट कॉन्फ़िगरेशन तय करने के लिए, Nix का इस्तेमाल करता है. खास तौर पर, Firebase Studio इनका इस्तेमाल करता है:

  • वर्कस्पेस एनवायरमेंट के बारे में बताने के लिए, Nix प्रोग्रामिंग लैंग्वेज का इस्तेमाल किया जाता है. Nix, फ़ंक्शनल प्रोग्रामिंग भाषा है. dev.nix फ़ाइल में एट्रिब्यूट और पैकेज लाइब्रेरी तय की जा सकती हैं. ये Nix एट्रिब्यूट सेट सिंटैक्स के मुताबिक होती हैं.

  • Nix पैकेज मैनेजर, आपके वर्कस्पेस में उपलब्ध सिस्टम टूल को मैनेज करता है. यह ऑपरेटिंग सिस्टम के हिसाब से काम करने वाले पैकेज मैनेजर की तरह ही है. जैसे, APT (apt और apt-get), Homebrew (brew), और dpkg.

Firebase Studio के संदर्भ में, Nix एनवायरमेंट को फिर से बनाया जा सकता है और इनके बारे में जानकारी दी जा सकती है. इसका मतलब है कि अपनी Git रिपॉज़िटरी के हिस्से के तौर पर, Nix कॉन्फ़िगरेशन फ़ाइल शेयर की जा सकती है. इससे यह पक्का किया जा सकता है कि आपके प्रोजेक्ट पर काम करने वाले सभी लोगों के पास एक ही एनवायरमेंट कॉन्फ़िगरेशन हो.

एक बुनियादी उदाहरण

इस उदाहरण में, प्रीव्यू की सुविधा चालू करने वाले बुनियादी एनवायरमेंट कॉन्फ़िगरेशन के बारे में बताया गया है:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

सिस्टम टूल जोड़ना

अपने वर्कस्पेस में सिस्टम टूल जोड़ने के लिए, जैसे कि क्लाउड सेवाओं के लिए कंपाइलर या सीएलआई प्रोग्राम, Nix पैकेज रजिस्ट्री में यूनीक पैकेज आईडी ढूंढें और उसे अपनी dev.nix फ़ाइल के packages ऑब्जेक्ट में जोड़ें. इसके लिए, `pkgs.` का इस्तेमाल करें:

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

यह तरीका, आम तौर पर ऑपरेटिंग सिस्टम के हिसाब से पैकेज मैनेजर का इस्तेमाल करके सिस्टम पैकेज इंस्टॉल करने के तरीके से अलग है. जैसे, APT (apt और apt-get), Homebrew (brew), और dpkg. सिस्टम के किन पैकेज की ज़रूरत है, इसकी जानकारी साफ़ तौर पर देने का मतलब है कि Firebase Studio वर्कस्पेस को शेयर करना और फिर से बनाना आसान है.

लोकल नोड बाइनरी का इस्तेमाल करना

आपकी लोकल मशीन की तरह ही, लोकल तौर पर इंस्टॉल किए गए node पैकेज (उदाहरण के लिए, आपके package.json में तय किए गए पैकेज) से जुड़ी बाइनरी को टर्मिनल पैनल में चलाया जा सकता है. इसके लिए, उन्हें npx कमांड के साथ इस्तेमाल करें.

एक और सुविधा के तौर पर, अगर आप किसी ऐसी डायरेक्ट्री में हैं जिसमें node_modules फ़ोल्डर (जैसे, किसी वेब प्रोजेक्ट की रूट डायरेक्ट्री) मौजूद है, तो स्थानीय तौर पर इंस्टॉल की गई बाइनरी को npx प्रीफ़िक्स के बिना सीधे तौर पर शुरू किया जा सकता है.

gcloud कॉम्पोनेंट जोड़ना

Google Cloud के लिए gcloud सीएलआई का डिफ़ॉल्ट कॉन्फ़िगरेशन, सभी Firebase Studio वर्कस्पेस के लिए उपलब्ध है.

अगर आपको अतिरिक्त कॉम्पोनेंट चाहिए, तो उन्हें अपनी dev.nix फ़ाइल में जोड़ा जा सकता है:

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

IDE एक्सटेंशन जोड़ना

Firebase Studio में एक्सटेंशन इंस्टॉल करने के लिए, OpenVSX एक्सटेंशन रजिस्ट्री का इस्तेमाल दो तरीकों से किया जा सकता है:

  • एक्सटेंशन ढूंढने और इंस्टॉल करने के लिए, Firebase Studio में एक्सटेंशन पैनल का इस्तेमाल करें. यह तरीका, उपयोगकर्ता के हिसाब से बने एक्सटेंशन के लिए सबसे अच्छा है. जैसे:

    • पसंद के मुताबिक रंग वाली थीम
    • VSCodeVim जैसे एडिटर इम्यूलेशन

  • अपनी dev.nix फ़ाइल में एक्सटेंशन जोड़ें. फ़ाइल फ़ोल्डर का कॉन्फ़िगरेशन शेयर करने पर, ये एक्सटेंशन अपने-आप इंस्टॉल हो जाएंगे. यह तरीका, किसी प्रोजेक्ट के हिसाब से बनाए गए एक्सटेंशन के लिए सबसे अच्छा है. जैसे:

    • प्रोग्रामिंग लैंग्वेज एक्सटेंशन. इनमें भाषा के हिसाब से डीबगर भी शामिल हैं
    • आपके प्रोजेक्ट में इस्तेमाल की जाने वाली क्लाउड सेवाओं के लिए आधिकारिक एक्सटेंशन
    • कोड फ़ॉर्मैटर

दूसरे तरीके के लिए, अपनी dev.nix फ़ाइल में IDE एक्सटेंशन शामिल किए जा सकते हैं. इसके लिए, <publisher>.<id> फ़ॉर्म का पूरी तरह से मान्य एक्सटेंशन आईडी ढूंढें और इसे idx.extensions ऑब्जेक्ट में इस तरह जोड़ें:

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

सामान्य सेवाएं जोड़ना

Firebase Studio, उन सामान्य सेवाओं के लिए आसान सेटअप और कॉन्फ़िगरेशन भी उपलब्ध कराता है जिनकी आपको डेवलपमेंट के दौरान ज़रूरत पड़ सकती है. इनमें ये शामिल हैं:

  • कंटेनर
    • Docker (services.docker.*)
  • मैसेज सेवा
    • Pub/Sub एमुलेटर (services.pubsub.*)
  • डेटाबेस
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • स्पैनर (services.spanner.*)

अपने फ़ाइल फ़ोल्डर में इन सेवाओं को चालू करने के बारे में जानने के लिए, dev.nix रेफ़रंस के services.* भाग देखें.

झलक को पसंद के मुताबिक बनाना

ऐप्लिकेशन की झलक को पसंद के मुताबिक बनाने के तरीके के बारे में जानने के लिए, अपने ऐप्लिकेशन की झलक देखना लेख पढ़ें.

अपने Workspace का आइकॉन सेट करना

अपने फ़ाइल फ़ोल्डर के लिए पसंद के मुताबिक आइकॉन चुना जा सकता है. इसके लिए, .idx डायरेक्ट्री में dev.nix फ़ाइल के लेवल पर, icon.png नाम वाली PNG फ़ाइल डालें. इसके बाद, Firebase Studio इस आइकॉन का इस्तेमाल करके, आपके डैशबोर्ड में आपके वर्कस्पेस को दिखाएगा.

इस फ़ाइल को सोर्स कंट्रोल (जैसे, Git) में चेक किया जा सकता है. इसलिए, यह एक अच्छा तरीका है, जिससे आपके प्रोजेक्ट पर काम करने वाले सभी लोग, Firebase Studio का इस्तेमाल करते समय आपके प्रोजेक्ट के लिए एक ही आइकॉन देख सकें. साथ ही, फ़ाइल अलग-अलग Git शाखाओं में अलग-अलग हो सकती है. इसलिए, इस आइकॉन का इस्तेमाल करके, बीटा और प्रोडक्शन ऐप्लिकेशन वर्कस्पेस के बीच और अन्य कामों के लिए, विज़ुअल तौर पर अंतर किया जा सकता है.

पसंद के मुताबिक बनाए गए टेंप्लेट को टेंप्लेट में बदलना

अपने एनवायरमेंट कॉन्फ़िगरेशन को "स्टार्टर एनवायरमेंट" में बदलने के लिए, कस्टम टेंप्लेट बनाएं दस्तावेज़ देखें. इस एनवायरमेंट का इस्तेमाल, कोई भी व्यक्ति नए प्रोजेक्ट बनाने के लिए कर सकता है.

अपनी पसंद के मुताबिक बदलाव करने के सभी विकल्पों के बारे में जानें

एनवायरमेंट कॉन्फ़िगरेशन स्कीमा के बारे में ज़्यादा जानकारी के लिए, dev.nix रेफ़रंस देखें.

अपनी फ़ाइलें डाउनलोड करना

अपनी फ़ाइलों को ZIP फ़ाइल के तौर पर डाउनलोड करने के लिए:

  • एक्सप्लोरर पैनल में किसी भी डायरेक्ट्री पर राइट क्लिक करें और Zip करें और डाउनलोड करें को चुनें.

अपनी प्रोजेक्ट डायरेक्ट्री में मौजूद सभी चीज़ें डाउनलोड करने के लिए:

  1. फ़ाइल > फ़ोल्डर खोलें को चुनें.

  2. डिफ़ॉल्ट /home/user डायरेक्ट्री स्वीकार करें.

  3. फ़ाइलें लोड होने के बाद, अपनी वर्किंग डायरेक्ट्री पर दायां क्लिक करें और ज़िप करें और डाउनलोड करें चुनें. App Prototyping agent का इस्तेमाल करने पर, आपकी वर्किंग डायरेक्ट्री studio होगी. अगर किसी टेंप्लेट या अपलोड किए गए प्रोजेक्ट का इस्तेमाल किया जा रहा है, तो यह आपके प्रोजेक्ट का नाम होगा.

  4. जब आपको एनवायरमेंट फिर से बनाने के लिए कहा जाए, तो रद्द करें पर क्लिक करें.

  5. डाउनलोड पूरा होने के बाद, अपने फ़ाइल फ़ोल्डर पर वापस जाने के लिए, फ़ाइल मेन्यू से अपनी मौजूदा डायरेक्ट्री को फिर से खोलें.

एमसीपी सर्वर का इस्तेमाल करना

एमसीपी सर्वर, Gemini के इस्तेमाल के लिए अतिरिक्त टूल और डेटा सोर्स उपलब्ध कराते हैं. उदाहरण के लिए, Firebase MCP सर्वर को जोड़कर, अपने ऐप्लिकेशन को बनाते या डीबग करते समय, Cloud Firestore में अपने डेटा को सामान्य भाषा का इस्तेमाल करके एक्सप्लोर किया जा सकता है.

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

  • अगर एमसीपी सर्वर के लिए ज़रूरी है, तो पक्का करें कि आपके पास काम करने वाला Node.js और npm इंस्टॉल हो.

काम करने वाला एमसीपी सर्वर चुनना

Firebase Studio में एमसीपी सर्वर के लिए बुनियादी सहायता उपलब्ध है. इसका मतलब है कि सभी एमसीपी सर्वर काम नहीं करते. अपने Firebase Studio वर्कस्पेस में जोड़ने के लिए एमसीपी सर्वर चुनते समय, इन बातों का ध्यान रखें:

  • इस्तेमाल किया जा सकता है:
    • स्टैंडर्ड इनपुट/आउटपुट (stdio) या सर्वर से भेजे गए इवेंट (एसएसई)/स्ट्रीम किए जा सकने वाले एचटीटीपी ट्रांसपोर्ट सर्वर, जिनके लिए पुष्टि करने के खास तरीकों की ज़रूरत नहीं होती
    • एमसीपी सर्वर से मिलने वाले टूल
  • फ़िलहाल, इनके लिए उपलब्ध नहीं है:
    • ऐसे सर्वर जिनके लिए ग्राफ़िकल यूज़र इंटरफ़ेस या डेस्कटॉप सेशन की ज़रूरत होती है
    • एमसीपी सर्वर से मिले प्रॉम्प्ट, सैंपलिंग या अन्य संसाधन

एमसीपी सर्वर जोड़ना

  1. Explorer (Ctrl+Shift+E) में जाकर, एमसीपी कॉन्फ़िगरेशन फ़ाइल में बदलाव करें या नई फ़ाइल बनाएं.

    • Firebase चैट में Gemini, .idx/mcp.json का इस्तेमाल करता है.

    • Gemini CLI, .gemini/settings.json का इस्तेमाल करता है.

    अगर फ़ाइल अब तक मौजूद नहीं है, तो पैरंट डायरेक्ट्री पर राइट क्लिक करके और नई फ़ाइल चुनकर उसे बनाएं. Firebase और Gemini CLI में Gemini में एमसीपी सर्वर का इस्तेमाल करने के लिए, दोनों फ़ाइलें बनाएं या उनमें बदलाव करें.

  2. फ़ाइल के कॉन्टेंट में सर्वर कॉन्फ़िगरेशन जोड़ें. उदाहरण के लिए, Firebase MCP सर्वर जोड़ने के लिए, यह डालें:

    {
  "mcpServers": {
   "firebase": {
     "command": "npx",
     "args": [
       "-y",
       "firebase-tools@latest",
       "experimental:mcp"
      ]
    }
  }
}

    यह कॉन्फ़िगरेशन फ़ाइल, Gemini को यह निर्देश देती है कि आपको किस एमसीपी सर्वर का इस्तेमाल करना है. इस उदाहरण में, हमने firebase नाम का एक सर्वर जोड़ा है. यह firebase-tools@latest को इंस्टॉल और चलाने के लिए, npx कमांड का इस्तेमाल करेगा. अन्य एमसीपी सर्वर के लिए अलग-अलग कॉन्फ़िगरेशन की ज़रूरत होती है, लेकिन वे एक ही सामान्य फ़ॉर्मैट का पालन करते हैं.

  3. टर्मिनल (Shift+Ctrl+C) में, इंस्टॉलेशन पूरा करने के लिए ज़रूरी कमांड चलाएं. उदाहरण के लिए, Firebase MCP सर्वर का इस्तेमाल करने के लिए, अपने खाते में साइन इन करने के लिए यह कमांड डालें:

    firebase login --no-localhost

    सेशन को अनुमति देने के लिए, टर्मिनल पर दिए गए निर्देशों का पालन करें. कुछ टूल के लिए, कनेक्ट किया गया Firebase प्रोजेक्ट ज़रूरी है. प्रोजेक्ट बनाने के लिए, Firebase MCP सर्वर का इस्तेमाल किया जा सकता है. इसके अलावा, Firebase प्रोजेक्ट को शुरू करने के लिए, यह कमांड चलाया जा सकता है:

    firebase init

    इससे आपकी रूट डायरेक्ट्री में firebase.json फ़ाइल बन जाएगी.

  4. सेटअप पूरा करने के लिए, अपना फ़ाइल फ़ोल्डर फिर से बनाएं:

    1. निर्देश पैलेट (Shift+Ctrl+P) खोलें.

    2. Firebase Studio: रीबिल्ड एनवायरमेंट डालें.

एमसीपी टूल का इस्तेमाल करना

आपको जिस एमसीपी सर्वर का इस्तेमाल करना है उसे इंस्टॉल करने के बाद, उसमें मौजूद टूल या डेटा इनमें उपलब्ध होता है:

  • Gemini सीएलआई
  • एजेंट मोड और एजेंट (अपने-आप चलने वाला) मोड का इस्तेमाल करते समय, Firebase चैट में Gemini
  • App Prototyping agent

उदाहरण के लिए, अगर Firebase MCP सर्वर जोड़ा जाता है, तो Gemini से मौजूदा प्रोजेक्ट के लिए SDK टूल का कॉन्फ़िगरेशन फ़ेच करने, Cloud Firestore और Realtime Database में सेव किए गए डेटा को वापस पाने, Firebase की सेवाओं को सेट अप करने में मदद पाने, और अन्य कामों के लिए कहा जा सकता है.

एमसीपी सर्वर से जुड़ी समस्या हल करना

अगर कोई एमसीपी सर्वर उम्मीद के मुताबिक काम नहीं करता है, तो गड़बड़ियों का पता लगाने के लिए अपने Gemini लॉग खोलें:

  1. आउटपुट (Shift+Ctrl+U) में, ड्रॉप-डाउन मेन्यू पर क्लिक करें और Gemini चुनें.

  2. [MCPManager] टैग से शुरू होने वाले मैसेज देखें. इन लॉग में, गड़बड़ी के मैसेज के साथ-साथ यह जानकारी होती है कि कौनसे एमसीपी सर्वर सेट अप किए गए हैं. अपने कॉन्फ़िगरेशन से जुड़ी समस्या हल करने के लिए, इस जानकारी का इस्तेमाल करें. जब कोई एमसीपी सर्वर कनेक्ट हो जाता है, तो आपको उन टूल की सूची दिखेगी जिन्हें उसने जोड़ा है.

अगर एमसीपी सर्वर इंस्टॉल या कनेक्ट नहीं हो पा रहा है, तो अपना फ़ाइल फ़ोल्डर फिर से बनाएं:

  1. निर्देश पैलेट (Shift+Ctrl+P) खोलें.

  2. Firebase Studio: रीबिल्ड एनवायरमेंट डालें.

  3. अपने फ़ाइल फ़ोल्डर के फिर से बनने का इंतज़ार करें. इसके बाद, चुने गए एमसीपी सर्वर का इस्तेमाल करने की कोशिश करें.

अगर एमसीपी सर्वर कनेक्ट हो जाता है, लेकिन Gemini उसके टूल का इस्तेमाल नहीं करता है, तो:

  • Gemini में नया चैट सेशन शुरू करें.

  • अगर Gemini, एमसीपी टूल का इस्तेमाल किए बिना टास्क पूरा कर सकता है, तो वह किसी दूसरे तरीके का इस्तेमाल कर सकता है. अगर आपको किसी खास टूल का इस्तेमाल करना है, तो अपने प्रॉम्प्ट में टूल का नाम बताएं. उदाहरण के लिए, "मौजूदा प्रोजेक्ट के लिए SDK टूल का कॉन्फ़िगरेशन पाने के लिए, firebase_get_sdk_config का इस्तेमाल करें."

  • Google Developer Program में शामिल हों.

अगले चरण