Firebase Studio में Firebase MCP

1. खास जानकारी

इस कोडलैब में, आपको Firebase Studio में Firebase MCP सर्वर के साथ-साथ ऐप्लिकेशन प्रोटोटाइपिंग एजेंट का इस्तेमाल करने का अभ्यास करना होगा. इससे, आपको Firebase रीयल टाइम डेटाबेस का इस्तेमाल करने वाला फ़ुल-स्टैक वेब ऐप्लिकेशन बनाने में मदद मिलेगी.

फ़ाइनल ऐप्लिकेशन का ऐनिमेट किया गया GIF

आपको क्या सीखने को मिलेगा

  • ऐप्लिकेशन प्रोटोटाइपिंग एजेंट का इस्तेमाल करके, स्टैटिक वेब ऐप्लिकेशन जनरेट करना
  • Firebase MCP सर्वर सेट अप करना
  • Firebase MCP का इस्तेमाल करके Firebase रीयलटाइम डेटाबेस जोड़ना

आपको इन चीज़ों की ज़रूरत होगी

  • Google Chrome जैसा कोई ब्राउज़र
  • Firebase प्रोजेक्ट बनाने और उसे मैनेज करने के लिए Google खाता

2. ऐप्लिकेशन प्रोटोटाइपिंग एजेंट का इस्तेमाल करके अपना ऐप्लिकेशन जनरेट करना

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

  1. अपने Google खाते में लॉग इन करें, Google Developer Program में शामिल हों, और Firebase Studio खोलें.
  2. एआई की मदद से ऐप्लिकेशन का प्रोटोटाइप बनाएं फ़ील्ड में, ऐप्लिकेशन के बारे में जानकारी डालें:
    An app for a picker wheel that allows custom input.
  3. प्रॉम्प्ट को बेहतर बनाएं पर क्लिक करें. बेहतर प्रॉम्प्ट की समीक्षा करें.
  4. एआई की मदद से प्रोटोटाइप बनाएं पर क्लिक करें.
  5. सुझाए गए ऐप्लिकेशन ब्लूप्रिंट की समीक्षा करें. इसमें बदलाव करने के लिए, कोड आइकॉन में बदलाव करने के लिए, आइकॉन को पसंद के मुताबिक बनानापसंद के मुताबिक बनाएं पर क्लिक करें.
  6. सेव करें पर क्लिक करें.
  7. जब ब्लूप्रिंट में आपके अपडेट शामिल हो जाएं, तो इस ऐप्लिकेशन का प्रोटोटाइप बनाएं पर क्लिक करें.ऐप्लिकेशन का ब्लूप्रिंट
  8. अगर आपके ब्लूप्रिंट में एआई एलिमेंट शामिल हैं, तो एजेंट आपसे Gemini की कुंजी मांगेगा. अपना Gemini API पासकोड जोड़ें या Gemini API पासकोड जनरेट करने के लिए, अपने-आप जनरेट करें पर क्लिक करें. अपने-आप जनरेट करें पर क्लिक करने पर, Firebase Studio एक Firebase प्रोजेक्ट बनाता है और आपके लिए Gemini API पासकोड जनरेट करता है.
  9. ऐप्लिकेशन प्रोटोटाइपिंग एजेंट, आपके ऐप्लिकेशन का पहला वर्शन बनाने के लिए ब्लूप्रिंट का इस्तेमाल करता है. इसके पूरा होने पर, Gemini चैट इंटरफ़ेस के साथ-साथ आपके ऐप्लिकेशन की झलक दिखती है. अपने ऐप्लिकेशन की समीक्षा करने और उसे टेस्ट करने में थोड़ा समय दें. अगर आपको गड़बड़ियां मिलती हैं, तो चैट में गड़बड़ी ठीक करें पर क्लिक करें. इससे एजेंट को गड़बड़ियां ठीक करने में मदद मिलेगी.

3. Firebase Studio में Firebase MCP सेट अप करना

Firebase MCP सर्वर, ऐप्लिकेशन प्रोटोटाइपिंग एजेंट की सुविधाओं को बेहतर बनाता है. इसके लिए, वह ऐसे टूल उपलब्ध कराता है जिनकी मदद से एजेंट, Firebase की सेवाओं को सेट अप, मैनेज, और उनसे डेटा खींच सकता है. इन सेवाओं में Firebase Authentication, Cloud Firestore, और Firebase Data Connect शामिल हैं. इसे सेट अप करने का तरीका यहां बताया गया है.

  1. Firebase Studio में, कोड व्यू खोलने के लिए Studio कोड व्यू आइकॉनकोड पर स्विच करें पर क्लिक करें.
  2. अपने Firebase खाते में साइन इन करने के लिए, टर्मिनल (Shift+Ctrl+C) में यह कमांड चलाएं. इसके बाद, स्क्रीन पर दिए गए निर्देशों का पालन करें और सभी डिफ़ॉल्ट विकल्पों को छोड़ दें:
    firebase login --no-localhost
  3. Explorer (Ctrl+Shift+E) में, .idx फ़ोल्डर पर राइट क्लिक करें और नई फ़ाइल चुनें. फ़ाइल को mcp.json नाम दें और Enter दबाएं.
  4. .idx/mcp.json में सर्वर कॉन्फ़िगरेशन जोड़ें.
    {
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}
    पुष्टि करें कि आप Firebase MCP सर्वर से कनेक्ट हैं. आपको आउटपुट पैनल में, मिलती-जुलती लॉग एंट्री दिखेंगी. साथ ही, सही चैनल के तौर पर "Gemini" चुना गया होगा.Gemini लॉग से MCPManager

4. Firebase MCP का इस्तेमाल करके Firebase रीयलटाइम डेटाबेस जोड़ना

पहला लक्ष्य: अपने ऐप्लिकेशन में Firebase जोड़ना

  1. प्रोटोटाइपर पर स्विच करें. चैट इंटरफ़ेस में, एजेंट से प्रोजेक्ट बनाने के लिए कहें.
    Create a Firebase project for my app.
    अगले चरण में, एजेंट Firebase MCP टूल firebase_create_project को कॉल करेगा.अगर आपने Gemini एपीआई पासकोड पाने के लिए, अपने-आप जनरेट होने की सुविधा का इस्तेमाल करते समय पहले ही कोई Firebase प्रोजेक्ट बना लिया है, तो यह चरण छोड़ दें. आपका प्रोजेक्ट आईडी, स्क्रीन पर सबसे ऊपर बाएं कोने में, वर्कस्पेस के नाम के बगल में दिखेगा. इसके अलावा, एजेंट से अपने प्रोजेक्ट की सूची बनाने के लिए कहें और उस प्रोजेक्ट को नोट करें जिसका इस्तेमाल आपको करना है.
    List my Firebase projects
    एजेंट, Firebase एमसीपी टूल firebase_list_projects को कॉल करेगा.
  2. एजेंट से इस प्रोजेक्ट से कनेक्ट करने के लिए कहें.
    Connect my app to my project `spinsync-3y3c6`.
    पक्का करें कि आपको .firebaserc फ़ाइल दिखे, जो आपके चालू प्रोजेक्ट को सेट करती है. अगर ऐसा नहीं है, तो एजेंट से अपने Firebase एनवायरमेंट को अपडेट करने के लिए कहें.
    Update my Firebase environment to use this project.
    एजेंट, Firebase एमसीपी टूल firebase_update_environment को कॉल करेगा . हालांकि, हो सकता है कि एजेंट टूल को कॉल किए बिना ही ऐसा कर पाए.आखिर में, देखें कि आपके Firebase एनवायरमेंट में सही चालू प्रोजेक्ट है और आपने पुष्टि कर ली है कि आप ही उपयोगकर्ता हैं.
    Show me my current Firebase environment.
    एजेंट, Firebase एमसीपी टूल firebase_get_environment को कॉल करेगा.
  3. एजेंट से अपने Firebase प्रोजेक्ट में वेब ऐप्लिकेशन बनाने के लिए कहें.
    Create a web app in my active Firebase project.
    एजेंट, टूल firebase_create_app को कॉल करेगा और ऐप्लिकेशन आईडी वापस करेगा. अगर एजेंट ऐसा नहीं कर पाता है, तो पर क्लिक करके फिर से कोशिश करें या Firebase कंसोल में यह चरण पूरा करने के लिए , इन निर्देशों का पालन करें.
    Use the App ID to get the SDK configuration and add to my app.
    एजेंट, टूल firebase_get_sdk_config को कॉल करेगा और आपके कोड को Firebase कॉन्फ़िगरेशन के साथ अपडेट करेगा.अगर एजेंट, टास्क पूरा होने का एलान करने के बाद भी src/lib/firebase.ts में आपकी एपीआई कुंजी और अन्य कॉन्फ़िगरेशन दिखाता है, तो अपने ऐप्लिकेशन को सुरक्षित रखने के लिए, उन्हें हटाने के लिए कहें.
    Secure my code by moving my Firebase config to the `.env` file.

दूसरा लक्ष्य: Firebase रीयलटाइम डेटाबेस जोड़ना

  1. इस पर बने रहें या प्रोटोटाइपर पर स्विच करें. चैट इंटरफ़ेस में, एजेंट से अपने प्रोजेक्ट में Firebase रीयलटाइम डेटाबेस सेट अप करने के लिए कहें.
    Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
    अनुमान लगाएं कि एजेंट, बातचीत के इस चरण के आखिर में, फ़ाइल में किए गए बदलावों के तहत, Firebase MCP टूल firebase_init को कॉल करेगा और database.rules.json में सुरक्षा नियम बनाएगा.
    {
    "rules": {
        ".read": true,
        ".write": true
    }
}
    यहां आपको अपने डेटाबेस का रीड और राइट ऐक्सेस सभी को देना होगा. इस CodeLab के अलावा, आपको हमेशा अपने डेटाबेस को सुरक्षित रखना चाहिए. इस विषय के बारे में ज़्यादा जानने के लिए, हमारा दस्तावेज़ देखें.
  2. कोड पर स्विच करें. टर्मिनल (Shift+Ctrl+C) में, Firebase रीयलटाइम डेटाबेस को शुरू करें.
    firebase init database
    स्क्रीन पर दिए गए निर्देशों का पालन करें और डिफ़ॉल्ट विकल्पों को छोड़ दें.इसके बाद, अपने डेटाबेस इंस्टेंस के लिए सुरक्षा नियमों को डिप्लॉय करें.
    firebase deploy --only database
  3. प्रोटोटाइपर पर स्विच करें. एजेंट से कहें कि वह उपयोगकर्ता की एंट्री के लिए, आपके डिफ़ॉल्ट डेटाबेस इंस्टेंस का इस्तेमाल करे.
    Use my default Realtime Database instance for user entries.
    अपने ऐप्लिकेशन को डेटाबेस इंस्टेंस से कनेक्ट करने के लिए, एजेंट बाकी सोर्स कोड को अपडेट करेगा.

तीसरा लक्ष्य: इसे आज़माना

  1. पिकर व्हील के लिए कुछ नई एंट्री बनाएं और देखें कि वे Firebase कंसोल में Firebase रीयल टाइम डेटाबेस पेज पर कैसे दिखती हैं.

Firebase कंसोल में Firebase रीयलटाइम डेटाबेस

5. नतीजा

बधाई हो! आपने Firebase MCP के साथ ऐप्लिकेशन प्रोटोटाइपिंग एजेंट का इस्तेमाल करके, फ़ुल-स्टैक वेब ऐप्लिकेशन बना लिया है. Firebase MCP सर्वर के ज़रिए दिए गए अन्य टूल आज़माएं और अपने ऐप्लिकेशन की सुविधाओं को बेहतर बनाएं.

ज़्यादा जानें