इस पेज का अनुवाद Cloud Translation API से किया गया है.

Firebase Studio में Firebase MCP

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

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

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

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

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

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

अपनी पसंद का ब्राउज़र, जैसे कि Google Chrome
Firebase प्रोजेक्ट बनाने और उसे मैनेज करने के लिए Google खाता

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

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

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

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

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

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

4. Firebase MCP का इस्तेमाल करके Firestore जोड़ना

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

Prototyper पर स्विच करें. चैट इंटरफ़ेस में, एजेंट से Firebase प्रोजेक्ट बनाने के लिए कहें.
```
Create a Firebase project.
```
अगर आपने Gemini API पासकोड पाने के लिए, अपने-आप जनरेट होने वाले विकल्प का इस्तेमाल किया है और पहले से ही कोई Firebase प्रोजेक्ट बनाया है, तो इस चरण को छोड़ दें. आपकी स्क्रीन के सबसे ऊपर बाएं कोने में, आपके वर्कस्पेस के नाम के बगल में प्रोजेक्ट आईडी दिखना चाहिए. इसके अलावा, एजेंट से अपने प्रोजेक्ट की सूची बनाने के लिए कहें. साथ ही, उस प्रोजेक्ट को नोट करें जिसका आपको इस्तेमाल करना है.
```
List my Firebase projects.
```
एजेंट से, Firebase MCP टूल firebase_list_projects को कॉल करने के लिए कहें.
एजेंट से कहें कि वह लोकल डेवलपमेंट के लिए, आपके Firebase प्रोजेक्ट का इस्तेमाल करे.
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
पक्का करें कि आपको .firebaserc फ़ाइल दिख रही हो. यह फ़ाइल, आपके डिफ़ॉल्ट Firebase प्रोजेक्ट को सेट करती है. इस फ़ाइल से Firebase CLI को पता चलता है कि किस Firebase प्रोजेक्ट का इस्तेमाल करना है. अगर आपको यह फ़ाइल नहीं दिखती है, तो इस फ़ाइल के लिए फिर से अनुरोध करें.
एजेंट से, अपने Firebase प्रोजेक्ट में वेब ऐप्लिकेशन बनाने के लिए कहें.
```
Create a web app in my Firebase project.
```
एजेंट से उम्मीद करें कि वह टूल firebase_create_app पर कॉल करेगा. अगर एजेंट ऐसा नहीं कर पाता है, तो फिर से कोशिश करें. इसके अलावा, Firebase कंसोल में यह चरण पूरा करने के लिए, इन निर्देशों का पालन करें. एजेंट, टूल firebase_get_sdk_config को कॉल कर सकता है और आपके प्रोजेक्ट को Firebase वेब ऐप्लिकेशन से कनेक्ट करने के लिए ज़रूरी फ़ाइलें बना सकता है. अगर ऐसा नहीं होता है, तो उसे ऐसा करने के लिए कहें.
```
Add my Firebase SDK configuration to my app.
```
आम तौर पर, एजेंट आपकी एपीआई पासकोड और अन्य कॉन्फ़िगरेशन को सीधे src/lib/firebase.ts में डाल देता है. उसे ऐप्लिकेशन कोड से बाहर ले जाने के लिए कहें, ताकि आपका ऐप्लिकेशन सुरक्षित रहे.
```
Secure my code by moving my Firebase config to my `.env` file.
```

दूसरा लक्ष्य: Firestore जोड़ना

कोड पर स्विच करें. चैट इंटरफ़ेस में, एजेंट से अपने ऐप्लिकेशन में Firestore का इस्तेमाल करने के लिए कहें.
```
Use Firestore for user entries. Give anyone read and write access.
```
एजेंट से उम्मीद करें कि वह आपके सोर्स कोड को अपडेट करेगा, ताकि उपयोगकर्ता की एंट्री के लिए लोकल स्टोरेज के बजाय Firestore का इस्तेमाल किया जा सके. साथ ही, Firestore के सुरक्षा नियम बनाए जा सकें. ध्यान दें कि यह Firebase MCP टूल firebase_init को कॉल कर सकता है. इसके अलावा, यह Firestore को शुरू करने के लिए, आपको टर्मिनल में firebase init कमांड चलाने के लिए भी कह सकता है. हालांकि, आगे बढ़ने से पहले पक्का करें कि आपको firestore.rules फ़ाइल में यह कॉन्टेंट दिखे.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
```
यहां सभी को अपने डेटाबेस को पढ़ने और उसमें बदलाव करने का ऐक्सेस दिया जाता है. इस कोडलैब के बाहर, आपको हमेशा अपने डेटाबेस को सुरक्षित रखना चाहिए. इस विषय के बारे में ज़्यादा जानने के लिए, हमारा दस्तावेज़ पढ़ें.
अगर एजेंट ने आपको पहले ऐसा करने के लिए नहीं कहा है, तो टर्मिनल (Shift+Ctrl+C) में Firestore को शुरू करें.
```
firebase init firestore
```
स्क्रीन पर दिए गए निर्देशों का पालन करें और डिफ़ॉल्ट विकल्पों को छोड़ दें. पिछले चरण में बनाए गए सुरक्षा नियमों को न बदलें.इसके बाद, अपने डेटाबेस इंस्टेंस के लिए सुरक्षा नियमों को डिप्लॉय करें.
```
firebase deploy --only firestore
```
इससे आपके लिए Firestore डेटाबेस इंस्टेंस उपलब्ध कराया जाएगा.

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

अपने ऐप्लिकेशन को फिर से लोड करें, पिकर व्हील पर एंट्री बनाएं और मिटाएं. साथ ही, Firebase Console में Firestore पेज पर इन अपडेट को देखें.

Studio और Console में ऐप्लिकेशन

5. नतीजा

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