1. परिचय
खास जानकारी
आज एआई की मदद से डेवलपमेंट कहां से शुरू होता है? हममें से ज़्यादातर लोगों के लिए, यह एक आसान क्वेरी या प्रोटोटाइप से शुरू होता है. Google AI Studio में एक बेहतरीन बिल्ड मोड उपलब्ध है. इसे अक्सर "वाइब कोडिंग" कहा जाता है. इसकी मदद से, Gemini मॉडल के ज़रिए जनरेट किए गए कोड का इस्तेमाल करके, फ़ुल-स्टैक वेब ऐप्लिकेशन डिज़ाइन, टेस्ट, और बनाए जा सकते हैं.
इस कोडलैब में, आपको एक साथ मिलकर काम करने वाला एक ऐसा ऐप्लिकेशन बनाना है जिसमें Firestore डेटाबेस का इस्तेमाल किया गया हो. इससे डेटा को लंबे समय तक सेव किया जा सकेगा. साथ ही, Firebase Authentication का इस्तेमाल करके, उपयोगकर्ताओं को लॉगिन करने की सुविधा दी जा सकेगी. AI Studio एजेंट, सभी बैकएंड सेवाओं को कॉन्फ़िगर करेगा. साथ ही, फ़्रंटएंड और डेटाबेस इंटरैक्शन कोड लिखेगा. ऐप्लिकेशन को बेहतर बनाने के बाद, उसे एक क्लिक में सीधे Cloud Run पर डिप्लॉय किया जा सकता है.
आपको क्या करना होगा
- Google AI Studio को, साथ मिलकर काम करने की सुविधा देने वाला वेब ऐप्लिकेशन बनाने के लिए प्रॉम्प्ट दें.
- Firestore डेटाबेस उपलब्ध कराने और Google साइन-इन की पुष्टि करने की सुविधा सेट अप करने के लिए, Firebase इंटिग्रेशन को कॉन्फ़िगर करें और चालू करें.
- इंटरैक्टिव झलक दिखाने वाले सैंडबॉक्स में ऐप्लिकेशन की जांच करें.
- ऐप्लिकेशन को Google AI Studio के यूज़र इंटरफ़ेस (यूआई) से सीधे Cloud Run पर डिप्लॉय करें.
आपको क्या सीखने को मिलेगा
- नैचुरल लैंग्वेज का इस्तेमाल करके, फ़ुल-स्टैक सेवा का प्रोटोटाइप तेज़ी से बनाने के लिए, Google AI Studio के बिल्ड मोड का इस्तेमाल करने का तरीका.
- Google AI Studio, Firebase Firestore और पुष्टि करने की सुविधा के इंटिग्रेशन को अपने-आप कैसे कॉन्फ़िगर करता है.
- AI Studio ऐप्लिकेशन को Cloud Run पर सर्वरलेस कंटेनर के तौर पर डिप्लॉय करने का तरीका.
- Firebase कंसोल में डेटाबेस रिकॉर्ड और सुरक्षा की स्थिति की जांच करने का तरीका.
2. प्रोजेक्ट सेटअप करना
AI Studio लॉन्च करने से पहले, अपने खाते का स्टेटस और ज़रूरी शर्तें देखें.
Google खाता और टियर की जानकारी
- अगर आपके पास पहले से कोई Google खाता नहीं है, तो Google खाता बनाएं.
- अहम जानकारी: अगर हो सके, तो इस लैब के लिए निजी Google खाते का इस्तेमाल करें. ग्रुप, कॉर्पोरेट या स्कूल खातों के लिए, Workspace की ऐसी नीतियां लागू की जा सकती हैं जिनसे एक्सपेरिमेंट की सुविधाएं या क्लाउड इंटिग्रेशन बंद हो जाते हैं.
- डप्लॉयमेंट के लिए बिलिंग की जानकारी देखें:
- Google Cloud का स्टार्टर टियर: इसमें, बिना किसी शुल्क के किसी चुनिंदा इलाके में दो फ़ुल-स्टैक ऐप्लिकेशन पब्लिश किए जा सकते हैं. इसके लिए, Google Cloud का पूरा बिलिंग खाता सेट अप करने की ज़रूरत नहीं होती.
- स्टैंडर्ड डिप्लॉयमेंट: यह Google Cloud के किसी मौजूदा सशुल्क क्लाउड प्रोजेक्ट से कनेक्ट होता है. साथ ही, स्टोरेज की सीमाएं, सीपीयू संसाधन, और एपीआई बढ़ाता है.
3. AI Studio के बिल्ड मोड में, 'क्या-क्या करना है' ऐप्लिकेशन बनाना
आइए, ऐप्लिकेशन शेल बनाते हैं और एआई कोडिंग असिस्टेंट को सुरक्षा और परसिस्टेंस लेयर बनाने के लिए प्रॉम्प्ट करते हैं.
- Google AI Studio के ऐप्लिकेशन पैनल पर जाएं और नया ऐप्लिकेशन पर क्लिक करें.
- चैट प्रॉम्प्ट बॉक्स में, अपने 'क्या-क्या काम करने हैं' ऐप्लिकेशन के बारे में यह जानकारी डालें:
Build a collaborative to-do list application using Firebase as a backend. Users must be able to securely sign in using Google Sign-In, view their personal tasks, add new task items, toggle status as completed, and delete tasks. The database must isolate tasks so users can only view and modify their own records. - ऐप्लिकेशन जनरेट करने की प्रोसेस शुरू करने के लिए, बनाएं पर क्लिक करें.
जब AI Studio एजेंट को डेटाबेस स्टोरेज और सुरक्षित तरीके से उपयोगकर्ता के लॉगिन की ज़रूरत होती है, तो वह Firebase के कॉन्फ़िगरेशन के फ़्लो को अपने-आप ट्रिगर कर देता है.
- लगभग एक मिनट के बाद, वर्कस्पेस में Firebase चालू करें का इंटिग्रेशन कार्ड दिखता है.
- पुष्टि करने और सेवा की शर्तें स्वीकार करने के लिए, Firebase चालू करें बटन पर क्लिक करें.
- एजेंट, बैकग्राउंड सेटअप को पूरा करेगा. बारीकियों के बारे में जानें:
- Firestore डेटाबेस इंस्टेंस उपलब्ध कराया जाता है.
- Firebase से पुष्टि करने की सुविधा चालू हो और Google साइन-इन की सुविधा भी चालू हो.
- सेवा खाते का कॉन्फ़िगरेशन सेट अप किया गया हो. जैसे, एपीआई क्रेडेंशियल वाला
src/lib/firebase.tsबनाया गया हो. - डिफ़ॉल्ट सुरक्षा सीमाएं (उपयोगकर्ता आइसोलेशन के नियम) तय करने वाला
firestore.rulesजोड़ा जाता है.
4. जांच करना और बार-बार एक्सपेरिमेंट करना
सेवा को लाइव लॉन्च करने से पहले, इंटरैक्टिव झलक में पुष्टि करने वाली जांचें चलाएं.
- Google AI Studio में, झलक वाला पैनल खोलें.
- Google खाते से साइन इन करने की पुष्टि करने के लिए, लॉगिन बटन पर क्लिक करें.
- गड़बड़ियां ठीक करने के बारे में जानकारी: जनरेट करने या टेस्टिंग के दौरान, आपको कभी-कभी रनटाइम की समस्याएं, कंपाइल करने से जुड़ी गड़बड़ियां या सुरक्षा से जुड़े नियमों के गलत अलाइनमेंट की वजह से Firestore की अनुमतियों से जुड़ी समस्याएं आ सकती हैं. ऐसा होने पर, AI Studio चैट में ठीक करें बटन दिखाता है. इससे, एजेंट से समस्या का अपने-आप पता लगाने और उसे ठीक करने के लिए कहा जा सकता है.

- लॉग इन करने के बाद, कई टास्क जोड़ें. जैसे, "Cloud Run के दस्तावेज़ों की समीक्षा करें", "Codelab पूरा करें".
- कुछ टास्क को 'पूरा हो गया' के तौर पर टॉगल करें और एक टास्क मिटाएं. इससे यह पक्का किया जा सकेगा कि क्लाइंट-साइड हैंडलर और डेटाबेस की स्थिति सही तरीके से अपडेट हो रही है.
- अगर आपको स्टाइल या व्यवहार में बदलाव करना है, तो चैट विंडो के ज़रिए एजेंट को निर्देश दें. उदाहरण के लिए:
"Could you style the interface using Tailwind CSS, and add a dark mode toggle button?""Show a count of remaining incomplete tasks at the footer of the task list."
- एजेंट के कोडबेस को अपडेट करने का इंतज़ार करें. इसके बाद, अपडेट देखने के लिए झलक वाले ब्राउज़र को देखें.
5. Cloud Run पर डिप्लॉय करना
जब आपका प्रोटोटाइप पूरी तरह से काम करने लगे, तब उसे Cloud Run पर सार्वजनिक सेवा के तौर पर डिप्लॉय करें.
- Google AI Studio के सबसे ऊपर दाएं कोने में मौजूद, पब्लिश करें बटन पर क्लिक करके, डिप्लॉयमेंट विज़र्ड शुरू करें.

- अपने Google Cloud प्रोजेक्ट को कॉन्फ़िगर करने के लिए, शुरू करें पर क्लिक करें.
- पुष्टि करें कि टारगेट Google Cloud प्रोजेक्ट ड्रॉप-डाउन में, वही प्रोजेक्ट दिख रहा हो जिसे आपने अपने वर्कस्पेस से जोड़ा है.
- AI Studio, Cloud Run इंस्टेंस के लिए यूनीक सेवा आइडेंटिफ़ायर अपने-आप जनरेट करेगा.
- अगर आपने पहली बार डिप्लॉय किया है और Google Cloud के स्टैंडर्ड पैरामीटर का इस्तेमाल किया जा रहा है, तो आपसे संगठन का टाइप बताने और बिलिंग की जानकारी देने के लिए कहा जा सकता है.
- ऐप्लिकेशन पब्लिश करें पर क्लिक करें.
- कंटेनर बनाने, कंटेनर रजिस्टर करने, और सेवा डिप्लॉय करने के चरण बैकग्राउंड में पूरे होते हैं. आम तौर पर, इस प्रोसेस को पूरा होने में दो से चार मिनट लगते हैं.
- डप्लॉयमेंट पूरा होने के बाद, जनरेट किया गया ऐप्लिकेशन का यूआरएल कॉपी करें. इसके बाद, ब्राउज़र टैब में लाइव ऐप्लिकेशन के लिंक पर जाएं.
- अपने ब्राउज़र में लाइव वेब ऐप्लिकेशन को टेस्ट करें!
6. Firebase कंसोल में जांच करना
डेटा स्कीमा और उपयोगकर्ताओं को कैसे ट्रैक किया जाता है, यह जानने के लिए यहां देखें.
- Firebase कंसोल पर जाएं.
- वह प्रोजेक्ट चुनें जिसमें
AI Studioलेबल मौजूद है या जिसे आपने मैन्युअल तरीके से बाइंड किया है. - बाईं ओर मौजूद नेविगेशन पैनल में, बनाएं > Firestore डेटाबेस चुनें:
- अपने ऐप्लिकेशन से बनाए गए डेटाबेस कलेक्शन और दस्तावेज़ देखें.
- पुष्टि करें कि हर दस्तावेज़ के मालिक का आईडी, उपयोगकर्ता की पुष्टि करने वाले चालू क्रेडेंशियल से मेल खाता हो.
- Firestore पैनल में मौजूद सुरक्षा टैब को चुनें. इससे, आपको अपने-आप जनरेट हुए सुरक्षा निर्देशों की समीक्षा करने में मदद मिलेगी. इन निर्देशों के तहत, पुष्टि किए गए दस्तावेज़ के मालिकों को ही दस्तावेज़ पढ़ने और उनमें बदलाव करने की अनुमति मिलती है.
- लॉगिन की जांच के दौरान, उपयोगकर्ता के चालू क्रेडेंशियल की सूची देखने के लिए, सुरक्षा > पुष्टि पर जाएं.
7. क्लीन अप करें
बिलिंग से जुड़े किसी भी अनचाहे शुल्क से बचने या अपने वर्कस्पेस के संसाधनों को हटाने के लिए:
- Google AI Studio में, ऐप्लिकेशन पेज पर जाएं.
- ग्रिड या सूची में अपना आवेदन ढूंढें.
- ऐप्लिकेशन की स्थिति मिटाने और Cloud Run से सेवा को अनपब्लिश करने के लिए, ट्रैश आइकॉन पर क्लिक करें.
- अगर आपने स्टैंडर्ड प्रोजेक्ट का इस्तेमाल करके डिप्लॉय किया है और आपको सभी संसाधनों को पूरी तरह से बंद करना है, तो Google Cloud Console की प्रोजेक्ट सेटिंग पर जाएं और प्रोजेक्ट मिटाएं.
8. नतीजा
बधाई हो! आपने Google AI Studio से सीधे तौर पर, साथ मिलकर काम करने वाला फ़ुल-स्टैक वेब ऐप्लिकेशन डिज़ाइन, डेवलप, और डिप्लॉय किया हो.
बिल्डर्स लैब पूरा करने का बैज पाने और अपनी यात्रा जारी रखने के लिए, goo.gle/builders पर जाएं.