App Prototyping एजेंट की मदद से, फ़ुल-स्टैक वेब ऐप्लिकेशन डेवलप, पब्लिश, और मॉनिटर करना

इस गाइड में, का इस्तेमाल करके, App Prototyping agent की मदद से फ़ुल-स्टैक ऐप्लिकेशन को तेज़ी से डेवलप और पब्लिश करने का तरीका बताया गया है Gemini. इसमें, Next.js ऐप्लिकेशन जनरेट करने के लिए, सामान्य भाषा में प्रॉम्प्ट का इस्तेमाल किया जाएगा. यह ऐप्लिकेशन, लॉग-इन किए हुए उपयोगकर्ता की ओर से दी गई किसी इमेज या इन-ब्राउज़र कैमरे से खाने के आइटम की पहचान करता है. साथ ही, उन आइटम को शामिल करके रेसिपी जनरेट करता है. इसके बाद, उपयोगकर्ता रेसिपी को खोजे जा सकने वाले डेटाबेस में सेव कर सकते हैं.

इसके बाद, ऐप्लिकेशन को बेहतर बनाया जाएगा. इसके बाद, इसे Firebase App Hosting पर पब्लिश किया जाएगा.

इस गाइड में, इन अन्य टेक्नोलॉजी का इस्तेमाल किया जाएगा:

• एक Firebase Studio वर्कस्पेस
• एक Firebase प्रोजेक्ट
• Firebase App Hosting
• Cloud Firestore
• Firebase Authentication
• Firebase App Check

पहला चरण: अपना ऐप्लिकेशन जनरेट करना

1. अपने Google खाते में लॉग इन करें और खोलें Firebase Studio.

2. एआई की मदद से ऐप्लिकेशन का प्रोटोटाइप बनाएं फ़ील्ड में, यह प्रॉम्प्ट डालें. इससे इमेज पर आधारित रेसिपी ऐप्लिकेशन बनेगा, जो ब्राउज़र कैमरे और जनरेटिव एआई का इस्तेमाल करेगा.

   उदाहरण के लिए, रेसिपी जनरेट करने वाला ऐप्लिकेशन बनाने के लिए, यह प्रॉम्प्ट डाला जा सकता है:

   Use secure coding practices to create an error-free web app that lets
   users upload a photo or take a picture with their browser
   camera. The app identifies the food in the picture and generates a
   recipe and accompanying image that includes that food.
   
   If no food product is identified, generate a random dessert recipe.
   

3. अगर आपको अपने प्रॉम्प्ट के साथ कोई इमेज अपलोड करनी है, तो ऐसा करें. उदाहरण के लिए, ऐसी इमेज अपलोड की जा सकती है जिसमें वह कलर स्कीम हो जिसका इस्तेमाल आपको अपने ऐप्लिकेशन में करना है. इसके बाद, Firebase Studio को उसका इस्तेमाल करने के लिए कहा जा सकता है. इमेज 3 MiB से कम होनी चाहिए.

4. एआई की मदद से प्रोटोटाइप बनाएं पर क्लिक करें.

   App Prototyping agent एजेंट, आपके प्रॉम्प्ट के आधार पर ऐप्लिकेशन का ब्लूप्रिंट जनरेट करता है. इसमें, ऐप्लिकेशन का सुझाया गया नाम, ज़रूरी सुविधाएं, और स्टाइल से जुड़े दिशा-निर्देश शामिल होते हैं.

5. ब्लूप्रिंट की समीक्षा करें. ज़रूरत पड़ने पर, कुछ बदलाव करें. उदाहरण के लिए, इनमें से किसी एक विकल्प का इस्तेमाल करके, ऐप्लिकेशन का सुझाया गया नाम या कलर स्कीम बदली जा सकती है:

   • बदलाव करेंeditपसंद के मुताबिक बनाएं पर क्लिक करें और सीधे ब्लूप्रिंट में बदलाव करें. बदलाव करने के बाद, सेव करें पर क्लिक करें.

   • चैट पैनल में मौजूद, इसके बारे में बताएं... फ़ील्ड में, जानकारी देने वाले सवाल और संदर्भ जोड़ें. अतिरिक्त इमेज भी अपलोड की जा सकती हैं.

6. इस ऐप्लिकेशन का प्रोटोटाइप बनाएं पर क्लिक करें.

7. App Prototyping agent आपके ऐप्लिकेशन के लिए कोडिंग शुरू करता है.

   • आपका ऐप्लिकेशन, एआई का इस्तेमाल करता है. इसलिए, आपसे Gemini API पासकोड जोड़ने या जनरेट करने के लिए कहा जाता है. अगर आपने 'अपने-आप जनरेट करें' पर क्लिक किया है, तो App Prototyping agent आपके लिए Firebase प्रोजेक्ट और Gemini API पासकोड उपलब्ध कराता है.

दूसरा चरण: टेस्ट करना, बेहतर बनाना, डीबग करना, और बार-बार बदलाव करना

ऐप्लिकेशन जनरेट होने के बाद, उसे टेस्ट किया जा सकता है, बेहतर बनाया जा सकता है, डीबग किया जा सकता है, और उसमें बार-बार बदलाव किए जा सकते हैं.

• अपने ऐप्लिकेशन की समीक्षा करना और उससे इंटरैक्ट करना: कोड जनरेट होने के बाद, आपके ऐप्लिकेशन की झलक दिखती है. इसे टेस्ट करने के लिए, झलक से सीधे इंटरैक्ट किया जा सकता है. ज़्यादा जानकारी के लिए, अपने ऐप्लिकेशन की झलक देखें लेख पढ़ें.

• Cloud Firestore और Firebase Authentication जोड़ें: बार-बार बदलाव करने के दौरान, App Prototyping agent से उपयोगकर्ता की पुष्टि करने की सुविधा और Cloud Firestore और Firebase Authentication का इस्तेमाल करके डेटाबेस जोड़ने के लिए कहा जा सकता है. उदाहरण के लिए, उपयोगकर्ताओं को रेसिपी सेव करने और डाउनलोड करने की सुविधा देने के लिए, यह प्रॉम्प्ट दिया जा सकता है:

  Add user authentication to the app. Authenticated users can:
  
    - Download the recipe and its generated image as a PDF (Print).
  
    - Save the recipe as public or private and make accessible to a search
      feature. For now, just save the text, not the image, to the database.
  
  Important: Only authenticated users can download the PDF.
  

• गड़बड़ियां होने पर उन्हें ठीक करना: ज़्यादातर मामलों में, App Prototyping agent आपको होने वाली गड़बड़ियों को ठीक करने के लिए कहता है. गड़बड़ी ठीक करने की कोशिश करने के लिए, गड़बड़ी ठीक करें पर क्लिक करें.

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

• सामान्य भाषा का इस्तेमाल करके टेस्ट करना और बार-बार बदलाव करना: अपने ऐप्लिकेशन को पूरी तरह से टेस्ट करें. साथ ही, कोड और ब्लूप्रिंट में बार-बार बदलाव करने के लिए, App Prototyping agent के साथ मिलकर काम करें. ऐसा तब तक करें, जब तक आपको ऐप्लिकेशन पसंद न आ जाए.

  Prototyper व्यू में, इन सुविधाओं का भी इस्तेमाल किया जा सकता है:

  • झलक विंडो पर सीधे ड्रा करने के लिए, व्याख्या करें पर क्लिक करें. शेप, इमेज, और टेक्स्ट टूल के साथ-साथ, टेक्स्ट प्रॉम्प्ट का इस्तेमाल करके, आपको जो बदलाव कराने हैं उन्हें विज़ुअल तरीके से बताने के लिए, उपलब्ध App Prototyping agent का इस्तेमाल करें.

  • किसी खास एलिमेंट को चुनने और App Prototyping agent के लिए निर्देश डालने के लिए, चुनें पर क्लिक करें. इससे, किसी खास आइकॉन, बटन, टेक्स्ट के हिस्से या अन्य एलिमेंट को तेज़ी से टारगेट किया जा सकता है. किसी इमेज पर क्लिक करने पर, आपके पास Unsplash से स्टॉक इमेज खोजने और चुनने का विकल्प भी होता है.

  अगर आपको Firebase Studio सार्वजनिक प्रीव्यू का इस्तेमाल करके, अपने ऐप्लिकेशन को सार्वजनिक तौर पर और कुछ समय के लिए शेयर करना है, तो झलक का लिंक शेयर करें पर क्लिक करें.

• Firebase प्रोजेक्ट बनाना: App Prototyping agent आपके लिए Firebase प्रोजेक्ट उपलब्ध कराता है, जब:

  • Gemini API पासकोड अपने-आप जनरेट होता है
  • अपने ऐप्लिकेशन को Firebase प्रोजेक्ट से कनेक्ट करने के लिए कहा जाता है
  • अपने ऐप्लिकेशन को Firebase सेवाओं से कनेक्ट करने में मदद मांगी जाती है. जैसे, Cloud Firestore या Firebase Authentication
  • पब्लिश करें बटन पर क्लिक किया जाता है और Firebase App Hosting सेट अप किया जाता है

  अपने वर्कस्पेस से कनेक्ट किए गए Firebase प्रोजेक्ट को बदलने के लिए, prompt the App Prototyping agent को उस प्रोजेक्ट का आईडी दें जिसका इस्तेमाल करना है. उदाहरण के लिए, "आईडी <your-project-id> वाले Firebase प्रोजेक्ट पर स्विच करें."

• ऐप्लिकेशन को टेस्ट करना और Cloud Firestore डेटाबेस के नियमों की पुष्टि करना: ऐप्लिकेशन की झलक वाले पैनल में, अलग-अलग तरह के खाने की चीज़ें दिखाने वाली इमेज अपलोड करें. इससे, आपके ऐप्लिकेशन की, सामग्री की पहचान करने, रेसिपी जनरेट करने, और उन्हें सेव करने की क्षमता की जांच की जा सकेगी.

  अलग-अलग उपयोगकर्ताओं के तौर पर साइन इन करें और रेसिपी जनरेट करें. पक्का करें कि पुष्टि किए गए उपयोगकर्ता, अपनी निजी रेसिपी और रेसिपी देख सकें. साथ ही, सभी उपयोगकर्ता सार्वजनिक रेसिपी देख सकें.

  जब आप App Prototyping agent से Cloud Firestore जोड़ने के लिए कहते हैं, तो वह आपके लिए Cloud Firestore डेटाबेस के नियम लिखता है और उन्हें डिप्लॉय करता है. Firebase कंसोल में जाकर, नियमों की समीक्षा करें.

• कोड में सीधे डीबग करना और बार-बार बदलाव करना: Code व्यू खोलने के लिए, कोड पर स्विच करें पर क्लिक करें. यहां, आपके ऐप्लिकेशन की सभी फ़ाइलें देखी जा सकती हैं और सीधे कोड में बदलाव किया जा सकता है. किसी भी समय, मोड पर वापस स्विच किया जा सकता है.Prototyper

  Code व्यू में, इन काम की सुविधाओं का भी इस्तेमाल किया जा सकता है:

  • अपने ऐप्लिकेशन की जांच करने, उसे डीबग करने, और उसका ऑडिट करने के लिए, Firebase Studio's Firebase Studio में मौजूद डीबग करने और रिपोर्टिंग की सुविधाएं.

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

    Prototyper

  • डेटाबेस और ऑथेंटिकेशन डेटा देखने के लिए, Firebase Local Emulator Suite को ऐक्सेस करें. अपने वर्कस्पेस में एम्युलेटर खोलने के लिए:

    1. Switch to Code पर क्लिक करें और Firebase Studio एक्सटेंशन (Ctrl+',Ctrl+', या MacOS पर Cmd+',Cmd+') खोलें.

    2. बैकएंड पोर्ट तक स्क्रोल करें और उसे बड़ा करें.

    3. **पोर्ट 4000** से जुड़े कार्रवाई कॉलम में, नई विंडो में खोलें पर क्लिक करें.

• जनरेटिव एआई की सुविधा की परफ़ॉर्मेंस को टेस्ट करना और मेज़र करना: अपने Genkit एआई फ़्लो चलाने, टेस्ट करने, डीबग करने, अलग-अलग मॉडल के साथ इंटरैक्ट करने, अपने प्रॉम्प्ट को बेहतर बनाने वगैरह के लिए, Genkit Developer UI का इस्तेमाल किया जा सकता है.

  अपने Genkit फ़्लो को Genkit Developer UI में लोड करने और टेस्ट शुरू करने के लिए:

  1. अपने Firebase Studio वर्कस्पेस में मौजूद टर्मिनल से, अपना Gemini API पासकोड सोर्स करने और Genkit सर्वर शुरू करने के लिए, यह कमांड चलाएं:

      npm run genkit:watch
     

  2. Genkit Developer UI लिंक पर क्लिक करें. Genkit Developer UI एक नई विंडो में आपके फ़्लो, प्रॉम्प्ट, एम्बेडर, और अलग-अलग उपलब्ध मॉडल के साथ खुलता है.

  Genkit Developer UI के बारे में ज़्यादा जानने के लिए, Genkit डेवलपर टूल लेख पढ़ें.

(ज़रूरी नहीं) तीसरा चरण: App Hosting की मदद से अपना ऐप्लिकेशन पब्लिश करना

अपने ऐप्लिकेशन को टेस्ट करने और अपने वर्कस्पेस में उससे संतुष्ट होने के बाद, उसे Firebase App Hostingकी मदद से वेब पर पब्लिश किया जा सकता है.

जब आप App Hosting सेट अप करते हैं, तो Firebase Studio आपके लिए Firebase प्रोजेक्ट बनाता है. ऐसा तब होता है, जब Gemini API पासकोड या अन्य बैकएंड सेवाओं को अपने-आप जनरेट करके, पहले से कोई प्रोजेक्ट न बनाया गया हो. साथ ही, यह Cloud Billing खाते को लिंक करने में आपकी मदद करता है.

अपना ऐप्लिकेशन पब्लिश करने के लिए:

1. अपना Firebase प्रोजेक्ट सेट अप करने और ऐप्लिकेशन पब्लिश करने के लिए, पब्लिश करें पर क्लिक करें. इसके बाद, अपना ऐप्लिकेशन पब्लिश करें पैनल दिखता है.

2. Firebase प्रोजेक्ट चरण में, App Prototyping agent वर्कस्पेस से जुड़े Firebase प्रोजेक्ट को दिखाता है. अगर कोई Firebase प्रोजेक्ट पहले से मौजूद नहीं है, तो App Prototyping agent आपके लिए नया प्रोजेक्ट बनाता है. जारी रखने के लिए, आगे बढ़ें पर क्लिक करें.

3. खाते को लिंक करें चरण में, इनमें से कोई एक विकल्प चुनें:Cloud Billing

   • वह Cloud Billing खाता चुनें जिसे आपको अपने Firebase प्रोजेक्ट से लिंक करना है.

   • अगर आपके पास Cloud Billing खाता नहीं है या आपको नया खाता बनाना है, तो Cloud Billing खाता बनाएं पर क्लिक करें. इससे Google Cloud कंसोल खुलता है. यहां, अपने-आप सेवा देने वाला नया Cloud Billing खाता बनाया जा सकता है. खाता बनाने के बाद, Firebase Studio पर वापस जाएं और Cloud Billing सूची से खाता चुनें.

4. आगे बढ़ें पर क्लिक करें. Firebase Studio बिलिंग खाते को आपके वर्कस्पेस से जुड़े प्रोजेक्ट से लिंक करता है. यह प्रोजेक्ट, Gemini API पासकोड को अपने-आप जनरेट करने या पब्लिश करें पर क्लिक करने पर बनाया जाता है.

5. सेवाएं सेट अप करें पर क्लिक करें. App Prototyping agent शुरू करता है Firebase सेवाओं को उपलब्ध कराना.

6. अभी पब्लिश करें पर क्लिक करें. Firebase Studio Firebase सेवाओं को सेट अप करता है और फिर App Hosting को रोल आउट करता है. इस प्रोसेस को पूरा होने में कुछ समय लग सकता है. बैकग्राउंड में होने वाली प्रोसेस के बारे में ज़्यादा जानने के लिए, बिल्ड प्रोसेस लेख पढ़ें.App Hosting

7. पब्लिश करने का चरण पूरा होने के बाद, ऐप्लिकेशन की खास जानकारी दिखती है. इसमें, यूआरएल और ऐप्लिकेशन की अहम जानकारी दिखती है. यह जानकारी App Hosting ऑब्ज़र्वेबिलिटी की मदद से मिलती है. Firebase से जनरेट किए गए डोमेन के बजाय, पसंद के मुताबिक डोमेन (जैसे, example.com या app.example.com) का इस्तेमाल करने के लिए, पसंद के मुताबिक डोमेन जोड़ा जा सकता है Firebase कंसोल में.

App Hosting के बारे में ज़्यादा जानने के लिए, App Hosting और उसके काम करने के तरीके के बारे में जानें लेख पढ़ें.

(सुझाया गया) चौथा चरण: पब्लिश किए गए ऐप्लिकेशन को टेस्ट करना

पब्लिश करने की प्रोसेस पूरी होने और आपका ऐप्लिकेशन Firebase पर डिप्लॉय होने के बाद, Cloud Firestore और Firebase Authentication को प्रोडक्शन में टेस्ट किया जा सकता है.

अपने Cloud Firestore डेटाबेस के लिए इंडेक्स जनरेट करना

अपने ऐप्लिकेशन को Cloud Firestore पर डिप्लॉय करने पर, इंडेक्स अपने-आप जनरेट नहीं होते. इसका मतलब है कि पब्लिश करने के बाद, आपको अपनी क्वेरी के लिए इंडेक्स जनरेट करने पड़ सकते हैं.

आपको गड़बड़ी के मैसेज या अपने ब्राउज़र के डेवलपर कंसोल में यह जानकारी दिख सकती है.

पब्लिश करने के बाद इंडेक्स जनरेट करने के लिए:

1. पब्लिश किए गए ऐप्लिकेशन से: ऐप्लिकेशन की खास जानकारी पैनल में (अगर यह नहीं दिख रहा है, तो पब्लिश करें पर क्लिक करें), अपने ऐप्लिकेशन पर जाएं लिंक ढूंढें और उस पर क्लिक करें.

   की Firebase Studio झलक से: अपने ब्राउज़र का डेवलपर कंसोल खोलें और गड़बड़ी 200 का मैसेज ढूंढें जो Cloud Firestore जनरेट करता है.

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

3. Firebase कंसोल पर जाने के लिए, लिंक पर क्लिक करें. इसके बाद, सुझाया गया इंडेक्स दिखता है.

4. सुझाया गया इंडेक्स स्वीकार करने के लिए, सेव करें पर क्लिक करें.

5. अपने ऐप्लिकेशन पर वापस जाएं और पेज को फिर से लोड करें.

6. अपने ऐप्लिकेशन में सभी फ़्लो को टेस्ट करना जारी रखें, ताकि ज़रूरत पड़ने पर इंडेक्स जोड़े जा सकें.

ज़्यादा जानकारी के लिए, Manage indexes in Cloud Firestore लेख पढ़ें.

Cloud Firestore और Firebase Authentication का डेटा Firebase कंसोल में देखना

पब्लिश करने के बाद, Firebase कंसोल में अपने ऐप्लिकेशन का लाइव डेटा देखा जा सकता है.

• अपने लाइव Cloud Firestore डेटाबेस का डेटा देखने के लिए, Firebase कंसोल खोलें और नेविगेशन मेन्यू से बनाएं > Firestore डेटाबेस को चुनें.

  यहां से, सेव किया गया डेटा देखा जा सकता है, सुरक्षा के नियमों को देखा और टेस्ट किया जा सकता है. साथ ही, इंडेक्स बनाए जा सकते हैं. ज़्यादा जानकारी के लिए, Cloud Firestore लेख पढ़ें.

• अपने लाइव Firebase Authentication डेटा को देखने के लिए, Firebase कंसोल खोलें और नेविगेशन मेन्यू से बनाएं > ऑथेंटिकेशन को चुनें.

  यहां से, ऑथेंटिकेशन कॉन्फ़िगरेशन और ऐप्लिकेशन के उपयोगकर्ताओं की जानकारी देखी जा सकती है. ज़्यादा जानकारी के लिए, Firebase Authentication लेख पढ़ें.

प्रोडक्शन में Cloud Firestore के नियमों को टेस्ट करना

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

अपने नियमों को इन सभी तरीकों से टेस्ट किया जा सकता है:

• ऐप्लिकेशन की टेस्टिंग: डिप्लॉय किए गए अपने ऐप्लिकेशन के साथ इंटरैक्ट करें, ऐसी कार्रवाइयां करें जिनसे अलग-अलग उपयोगकर्ता की भूमिकाओं या स्थितियों के लिए, डेटा ऐक्सेस के अलग-अलग पैटर्न (पढ़ना, लिखना, मिटाना) ट्रिगर होते हैं. असल दुनिया में की जाने वाली इस टेस्टिंग से, यह पुष्टि करने में मदद मिलती है कि आपके नियम, असल में सही तरीके से लागू किए गए हैं या नहीं.

• नियमों का प्लेग्राउंड: टारगेट किए गए चेक के लिए, नियमों का प्लेग्राउंड कंसोल में इस्तेमाल करें.Firebase इस टूल की मदद से, अपने प्रोडक्शन के नियमों का इस्तेमाल करके, अपने Cloud Firestore डेटाबेस के लिए अनुरोध (पढ़ना, लिखना, मिटाना) सिम्युलेट किए जा सकते हैं. उपयोगकर्ता की पुष्टि करने की स्थिति, डेटा का पाथ, और कार्रवाई का टाइप तय करके, यह देखा जा सकता है कि आपके नियम, अनुमति के मुताबिक ऐक्सेस की अनुमति देते हैं या नहीं.

• यूनिट टेस्टिंग: ज़्यादा बेहतर तरीके से टेस्टिंग करने के लिए, सुरक्षा के नियमों के लिए यूनिट टेस्ट लिखे जा सकते हैं. Firebase Studio प्रीव्यू का बैकएंड, Firebase Local Emulator Suite की मदद से, इन टेस्ट को स्थानीय तौर पर चलाने की सुविधा देता है. इससे, आपके प्रोडक्शन के नियमों के व्यवहार को सिम्युलेट किया जा सकता है. यह, नियमों के जटिल लॉजिक की पुष्टि करने और अलग-अलग स्थितियों के लिए कवरेज की पुष्टि करने का एक मज़बूत तरीका है. डिप्लॉय करने के बाद, आपको यह दोबारा जांच करनी चाहिए कि एम्युलेटर का इस्तेमाल करके किए गए यूनिट टेस्ट, आपकी उम्मीद के मुताबिक काम करते हैं या नहीं. साथ ही, यह भी देखना चाहिए कि इनमें सभी स्थितियों को कवर किया गया है या नहीं.