Firebase Studio में Firebase MCP

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

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

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

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

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

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

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

ऐप्लिकेशन का प्रोटोटाइप बनाने वाला एजेंट, आपके ऐप्लिकेशन को बनाने के लिए 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 कुंजी के लिए कहेगा. अपना Gemini API पासकोड जोड़ें या Gemini API पासकोड जनरेट करने के लिए, अपने-आप जनरेट होने वाला पासकोड पर क्लिक करें. अपने-आप जनरेट होने वाला पर क्लिक करने से, Firebase Studio एक Firebase प्रोजेक्ट बनाता है और आपके लिए Gemini API पासकोड जनरेट करता है.
9. App Prototyping एजेंट, ब्लूप्रिंट का इस्तेमाल करके आपके ऐप्लिकेशन का पहला वर्शन बनाता है. इसके बाद, Gemini के चैट इंटरफ़ेस के साथ-साथ आपके ऐप्लिकेशन की झलक दिखती है. कुछ समय निकालकर, अपने ऐप्लिकेशन की समीक्षा करें और उसे टेस्ट करें. अगर आपको गड़बड़ियां मिलती हैं, तो चैट में गड़बड़ी ठीक करें पर क्लिक करें, ताकि एजेंट अपनी गड़बड़ियां ठीक कर सके.

3. (ज़रूरी नहीं) कोड पाना

अगर आपको कोई समस्या आ रही है, तो सैंपल फ़ाइलों का इस्तेमाल करें. इससे आपको इस उदाहरण ऐप्लिकेशन को समझने में मदद मिलेगी.

1. फ़ोल्डर में मौजूद फ़ाइलें डाउनलोड करें.
2. कोड व्यू खोलने के लिए, Firebase Studio में कोड पर स्विच करें पर क्लिक करें.
3. डाउनलोड की गई फ़ाइलों को Firebase Studio के एक्सप्लोरर पैनल में खींचें और छोड़ें. फ़ाइलों को किसी भी मौजूदा फ़ाइल को बदलने की अनुमति दें.
4. पैकेज इंस्टॉल करने के लिए, टर्मिनल (Shift+Ctrl+C) में यह कमांड चलाएं.

   npm install
   

5. Firebase Studio का सोर्स कंट्रोल पैनल खोलें. इसके बाद, कोड में हुए बदलाव के बारे में बताने के लिए कोई मैसेज टाइप करें. उदाहरण के लिए, "GitHub से कोड इंपोर्ट किया गया". इसके बाद, Commit पर क्लिक करें.
6. ऐप्लिकेशन के उदाहरण वर्शन का इस्तेमाल करके कोडलैब जारी रखने के लिए, Prototyper पर स्विच करें पर क्लिक करें.

4. किसी Firebase प्रोजेक्ट से कनेक्ट करना

बधाई हो! आपका ऐप्लिकेशन स्थानीय तौर पर काम कर रहा है. इसे बैकएंड देने के लिए, आपको इसे Firebase प्रोजेक्ट से कनेक्ट करना होगा.

1. ऐप्लिकेशन प्रोटोटाइपिंग एजेंट से, Firebase प्रोजेक्ट से कनेक्ट करने के लिए कहें.

   Connect to a Firebase project.
   

   एजेंट से नया प्रोजेक्ट बनाने या किसी मौजूदा प्रोजेक्ट से कनेक्ट करने के लिए कहें. अगर आपने Gemini API कुंजी पाने के लिए, अपने-आप जनरेट होने वाले विकल्प का इस्तेमाल किया था, तो आपका प्रोजेक्ट आपकी स्क्रीन के सबसे ऊपर बाईं ओर, आपके Workspace के नाम के बगल में दिखेगा. इसके बाद, ज़रूरी Firebase कॉन्फ़िगरेशन जनरेट करें और उसे src/lib/firebase.ts के ज़रिए अपने ऐप्लिकेशन में इंटिग्रेट करें. जैसा कि दिखाया गया है.

   import { initializeApp, getApp, getApps } from 'firebase/app';
   
   const firebaseConfig = {
     "projectId": "foo-bar-baz",
     "appId": "1:630673270654:web:3eda41879acd38fa96ce14",
     "storageBucket": "foo-bar-baz.firebasestorage.app",
     "apiKey": "AIzaSyDGoMZQia334izw8JedslMTUD0fNpmFca0",
     "authDomain": "foo-bar-baz.firebaseapp.com",
     "measurementId": "",
     "messagingSenderId": "630673270654"
   };
   
   // Initialize Firebase
   const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
   
   export default app;
   

   अगर ऊपर दिया गया प्रॉम्प्ट, एक बार में टास्क पूरा नहीं कर पाता है, तो एजेंट से फिर से पूछें. अगर ज़रूरी हो, तो चरणों को अलग-अलग करके बताएं.

   Create a new Firebase project.
   

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

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

1. कोड व्यू खोलने के लिए, कोड पर स्विच करें पर क्लिक करें.
2. टर्मिनल (Shift+Ctrl+C) में, अपने Firebase खाते में साइन इन करने के लिए यह कमांड चलाएं. इसके लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें और सभी डिफ़ॉल्ट विकल्पों को छोड़ दें:

   firebase login --no-localhost
   

3. एक्सप्लोरर (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" को सही चैनल के तौर पर चुना गया होगा.

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

पहला लक्ष्य: Firestore जोड़ना

1. Prototyper पर स्विच करें. चैट इंटरफ़ेस में, एजेंट से अपने ऐप्लिकेशन में Firestore का इस्तेमाल करने के लिए कहें.

   Use Firestore for user entries. Give anyone read and write access.
   

   एजेंट से यह उम्मीद की जाती है कि वह:
   • Firebase MCP टूल firebase_init को कॉल करके Firestore को चालू करें. यह टूल, Firestore के नियम बनाता है (जैसा कि दिखाया गया है). साथ ही, कॉन्फ़िगरेशन में अन्य बदलावों के साथ-साथ फ़ाइलों को इंडेक्स करता है
   • लोकल स्टोरेज के बजाय Firestore का इस्तेमाल करने के लिए, अपने ऐप्लिकेशन कोड को अपडेट करें

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /{document=**} {
         allow read, write: if true;
       }
     }
   }
   

   यहां सभी को अपने डेटाबेस को पढ़ने और उसमें बदलाव करने का ऐक्सेस दिया जाता है. इस कोडलैब के बाहर, आपको हमेशा अपने डेटाबेस को सुरक्षित रखना चाहिए. इस विषय के बारे में ज़्यादा जानने के लिए, हमारा दस्तावेज़ पढ़ें.
2. कोड पर स्विच करें. अगर आपने मौजूदा Firebase प्रोजेक्ट में Firestore API को कभी चालू नहीं किया है, तो टर्मिनल (Shift+Ctrl+C) में Firestore को शुरू करें.

   firebase init firestore
   

   स्क्रीन पर दिए गए निर्देशों का पालन करें और डिफ़ॉल्ट विकल्पों को छोड़ दें. पिछले चरण में बनाए गए सुरक्षा नियमों को न बदलें.इसके बाद, अपने डेटाबेस इंस्टेंस के लिए सुरक्षा नियमों को डिप्लॉय करें.

   firebase deploy --only firestore
   

   इससे आपके लिए Firestore डेटाबेस इंस्टेंस उपलब्ध कराया जाएगा.

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

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

2. अपने डेटाबेस से क्वेरी करने के लिए, Firestore से चैट भी की जा सकती है.

   List my Firestore collections.
   

   Gemini, Firebase MCP टूल firestore_list_collections को कॉल करेगा.

7. नतीजा

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

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

• Firebase MCP टूल
• GitHub पर Firebase MCP
• Firebase के बारे में काम की बातें और सुझाव 2
• Firebase Studio के फ़ाइल फ़ोल्डर के बारे में ज़्यादा जानें