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

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

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

इस गाइड में आगे बढ़ने पर, आपको इन अन्य टेक्नोलॉजी का इस्तेमाल करना होगा:

Firebase

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

  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. एआई की मदद से प्रोटोटाइप बनाएं पर क्लिक करें.

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

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

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

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

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

  7. ऐप्लिकेशन का प्रोटोटाइप बनाने वाला एजेंट, आपके ऐप्लिकेशन के लिए कोडिंग शुरू करता है.

    • आपका ऐप्लिकेशन एआई का इस्तेमाल करता है. इसलिए, आपको 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 view, you can also use the following features: में

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

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

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

  • Firebase प्रोजेक्ट बनाना: ऐप्लिकेशन का प्रोटोटाइप बनाने वाला एजेंट, आपकी ओर से Firebase प्रोजेक्ट बनाता है. ऐसा तब होता है, जब:

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

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

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

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

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

  • कोड में सीधे तौर पर डीबग करना और उसे दोहराना: कोड स्विच करें
आइकॉन कोड पर स्विच करें पर क्लिक करके Code व्यू खोलें. यहाँ आपको अपने ऐप्लिकेशन की सभी फ़ाइलें दिखेंगी और कोड में सीधे तौर पर बदलाव किया जा सकेगा. Prototyper mode at any time. पर वापस स्विच किया जा सकता है

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

    • Firebase Studioकी डीबग करने और रिपोर्टिंग की इन-बिल्ट सुविधाओं का इस्तेमाल करके, अपने ऐप्लिकेशन की जांच, डीबग, और ऑडिट करें.

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

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

      1. कोड स्विच करें
आइकॉन कोड पर स्विच करें पर क्लिक करें और Firebase Studio एक्सटेंशन खोलें (Ctrl+',Ctrl+' या MacOS पर Cmd+',Cmd+').

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

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

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

    Genkit डेवलपर यूज़र इंटरफ़ेस (यूआई) में अपने Genkit फ़्लो लोड करने और उनकी टेस्टिंग शुरू करने के लिए:

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

       npm run genkit:watch
      
    2. Genkit Developer UI लिंक पर क्लिक करें. Genkit का डेवलपर यूज़र इंटरफ़ेस (यूआई) एक नई विंडो में खुलता है. इसमें आपके फ़्लो, प्रॉम्प्ट, एम्बेडर, और अलग-अलग उपलब्ध मॉडल का कलेक्शन होता है.

    Genkit Developer Tools पर जाकर, Genkit Developer UI के बारे में ज़्यादा जानें.

(ज़रूरी नहीं) तीसरा चरण: 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, बिलिंग खाते को आपके Workspace से जुड़े प्रोजेक्ट से लिंक करता है. यह प्रोजेक्ट, Gemini API कुंजी अपने-आप जनरेट होने पर या पब्लिश करें पर क्लिक करने पर बनाया जाता है.

  5. सेवाएं सेट अप करें पर क्लिक करें. ऐप्लिकेशन प्रोटोटाइपिंग एजेंट, 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 को प्रोडक्शन में टेस्ट किया जा सकता है.

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

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

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

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

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

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

प्रोडक्शन में Cloud Firestore के नियमों की जांच करना

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

इन सभी तरीकों का इस्तेमाल करके, नियमों की जांच की जा सकती है:

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

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

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