एआई की मदद से, वेब ऐप्लिकेशन पर अपनी 'क्या-क्या करना है' सूची लॉन्च करना

1. परिचय

खास जानकारी

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

इस कोडलैब में, आपको साथ मिलकर काम करने वाला एक टू-डू ऐप्लिकेशन बनाना होगा. इसमें, डेटा को सेव करने के लिए Firestore डेटाबेस और उपयोगकर्ता के लॉगिन के लिए Firebase से पुष्टि करने की सुविधा का इस्तेमाल किया जाएगा. 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 खाते और टियर की जानकारी

  1. अगर आपके पास Google खाता नहीं है, तो Google खाता बनाएं.
    • सलाह: अगर हो सके, तो इस लैब के लिए निजी Google खाते का इस्तेमाल करें. ग्रुप, कॉर्पोरेट या स्कूल खातों पर Workspace की नीतियां लागू हो सकती हैं. इनकी वजह से, एक्सपेरिमेंटल सुविधाओं या क्लाउड इंटिग्रेशन को बंद किया जा सकता है.
  2. डिप्लॉयमेंट के लिए बिलिंग की जानकारी देखें:
    • Google Cloud का स्टार्टर टियर: इसमें, चुने गए किसी इलाके में, दो फ़ुल-स्टैक ऐप्लिकेशन बिना किसी शुल्क के पब्लिश किए जा सकते हैं. इसके लिए, Google Cloud का पूरा बिलिंग खाता सेट अप करने की ज़रूरत नहीं होती.
    • स्टैंडर्ड डिप्लॉयमेंट: यह मौजूदा, पैसे चुकाकर इस्तेमाल किए जाने वाले Google Cloud प्रोजेक्ट से कनेक्ट होता है. साथ ही, स्टोरेज की सीमाएं, सीपीयू संसाधन, और एपीआई बढ़ाता है.

3. AI Studio के बिल्ड मोड में, टू-डू ऐप्लिकेशन बनाना

आइए, ऐप्लिकेशन का शेल बनाएं और एआई कोड असिस्टेंट को सुरक्षा और परसिस्टेंस लेयर बनाने के लिए प्रॉम्प्ट करें.

  1. Google AI Studio ऐप्लिकेशन पैनल पर जाएं और नया ऐप्लिकेशन पर क्लिक करें.
  2. चैट प्रॉम्प्ट बॉक्स में, अपने टू-डू ऐप्लिकेशन की जानकारी डालें: 
    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.
    इस लिंक पर क्लिक करने से, प्रॉम्प्ट बॉक्स में जानकारी अपने-आप भर जाएगी.
  3. ऐप्लिकेशन जनरेट करने की प्रोसेस शुरू करने के लिए, बनाएं पर क्लिक करें.

जब AI Studio के एजेंट को डेटाबेस स्टोरेज और सुरक्षित तरीके से उपयोगकर्ता के लॉगिन की ज़रूरत का पता चलता है, तो वह Firebase को अपने-आप कॉन्फ़िगर करने की प्रोसेस शुरू कर देता है.

  1. करीब एक मिनट बाद, Workspace में Firebase चालू करें का इंटिग्रेशन कार्ड दिखता है.
  2. सेवा की शर्तों की पुष्टि करने और उन्हें स्वीकार करने के लिए, Firebase चालू करें बटन पर क्लिक करें.
  3. एजेंट, बैकग्राउंड में सेटअप करेगा. बारीकियों के बारे में जानें:
    • Firestore डेटाबेस का इंस्टेंस उपलब्ध कराया जाता है.
    • Firebase से पुष्टि करने की सुविधा चालू की जाती है. साथ ही, Google से साइन इन करने की सुविधा भी चालू की जाती है.
    • सेवा खाते का कॉन्फ़िगरेशन सेट अप किया जाता है. जैसे, एपीआई क्रेडेंशियल वाला src/lib/firebase.ts बनाना.
    • डिफ़ॉल्ट सुरक्षा सीमाओं (उपयोगकर्ता आइसोलेशन के नियम) वाला firestore.rules जोड़ा जाता है.

4. टेस्ट करना और बेहतर बनाना

सेवा को लाइव करने से पहले, इंटरैक्टिव प्रीव्यू में पुष्टि करने की प्रोसेस पूरी करें.

  1. Google AI Studio में, प्रीव्यू पैनल खोलें.
  2. सैंडबॉक्स में, Google साइन-इन की पुष्टि करने की प्रोसेस शुरू करने के लिए, लॉगिन बटन पर क्लिक करें.
    • गड़बड़ियां ठीक करने के बारे में नोट: जनरेट करने या टेस्ट करने के दौरान, आपको कभी-कभी रनटाइम की समस्याएं, कंपाइलेशन की गड़बड़ियां या Firestore की अनुमति से जुड़ी समस्याएं आ सकती हैं. ऐसा सुरक्षा के नियमों के गलत तरीके से सेट अप होने की वजह से हो सकता है. ऐसा होने पर, AI Studio चैट में ठीक करें बटन दिखाता है. इसकी मदद से, एजेंट से समस्या की अपने-आप पहचान करने और उसे ठीक करने के लिए कहा जा सकता है.
    Google AI Studio में 'ठीक करें' बटन की जगह
  3. लॉग इन करने के बाद, कई टास्क जोड़ें. जैसे, "Cloud Run के दस्तावेज़ों की समीक्षा करें", "कोडलैब पूरा करें".
  4. कुछ टास्क को पूरा के तौर पर टॉगल करें और एक टास्क मिटाएं, ताकि यह पक्का किया जा सके कि क्लाइंट-साइड हैंडलर और डेटाबेस की स्थिति सही तरीके से अपडेट हो रही है.
  5. अगर आपको स्टाइल या व्यवहार में बदलाव करना है, तो चैट विंडो के ज़रिए एजेंट को निर्देश दें. उदाहरण के लिए:
    • "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."
  6. एजेंट के कोड बेस को अपडेट करने का इंतज़ार करें और अपडेट देखने के लिए, झलक ब्राउज़र देखें.

5. Cloud Run पर डिप्लॉय करना

प्रोटोटाइप पूरी तरह से काम करने के बाद, उसे Cloud Run पर सार्वजनिक सेवा के तौर पर डिप्लॉय करें.

  1. डिप्लॉयमेंट विज़र्ड शुरू करने के लिए, Google AI Studio में सबसे ऊपर दाएं कोने में मौजूद पब्लिश करें बटन पर क्लिक करें.Google AI Studio में पब्लिश करने वाले बटन की जगह
  2. अपने Google Cloud प्रोजेक्ट को कॉन्फ़िगर करने के लिए, शुरू करें पर क्लिक करें.
    • पुष्टि करें कि Google Cloud प्रोजेक्ट ड्रॉप-डाउन में, वही प्रोजेक्ट चुना गया है जिसे आपने अपने Workspace से जोड़ा है.
    • AI Studio, Cloud Run इंस्टेंस के लिए, सेवा का यूनीक आइडेंटिफ़ायर अपने-आप जनरेट करेगा.
    • ज़रूरत पड़ने पर, डिप्लॉयमेंट कॉन्फ़िगरेशन के हिस्से के तौर पर, कस्टम .ai.studio यूआरएल प्रीफ़िक्स (जैसे, your-portfolio-name.ai.studio) तय किया जा सकता है.
  3. अगर पहली बार डिप्लॉय किया जा रहा है और Google Cloud के स्टैंडर्ड पैरामीटर का इस्तेमाल किया जा रहा है, तो आपसे संगठन का टाइप तय करने और बिलिंग की जानकारी देने के लिए कहा जा सकता है.
  4. ऐप्लिकेशन पब्लिश करें पर क्लिक करें.
  5. कंटेनर बनाना, कंटेनर रजिस्टर करना, और सेवा डिप्लॉय करने के चरण, बैकग्राउंड में पूरे होते हैं. आम तौर पर, इस प्रोसेस को पूरा होने में दो से चार मिनट लगते हैं.
  6. डिप्लॉयमेंट पूरा होने के बाद, जनरेट किया गया ऐप्लिकेशन यूआरएल कॉपी करें और ब्राउज़र टैब में, लाइव ऐप्लिकेशन का लिंक खोलें.
  7. अपने ब्राउज़र में, लाइव वेब ऐप्लिकेशन को टेस्ट करें!

6. Firebase कंसोल में जांच करना

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

  1. Firebase कंसोल पर जाएं.
  2. अपना प्रोजेक्ट चुनें. इसमें AI Studio लेबल या मैन्युअल तरीके से जोड़ा गया प्रोजेक्ट आईडी होना चाहिए.
  3. बाईं ओर मौजूद नेविगेशन पैनल में, बनाएं > Firestore डेटाबेस चुनें:
    • अपने ऐप्लिकेशन से बनाए गए डेटाबेस कलेक्शन और दस्तावेज़ देखें.
    • पुष्टि करें कि हर दस्तावेज़ में, मालिक का आईडी, चालू उपयोगकर्ता के पुष्टि करने के क्रेडेंशियल से मेल खाता है.
  4. Firestore पैनल में, सुरक्षा टैब चुनें. इससे, अपने-आप जनरेट हुए सुरक्षा निर्देशों की समीक्षा की जा सकती है. इन निर्देशों की मदद से, पुष्टि किए गए दस्तावेज़ के मालिकों के लिए, पढ़ने और लिखने की अनुमतियां सीमित की जाती हैं.
  5. सुरक्षा > पुष्टि करने की सुविधा पर जाएं. इससे, लॉगिन टेस्ट के दौरान भरे गए, चालू उपयोगकर्ता के क्रेडेंशियल की सूची देखी जा सकती है.

7. स्टोरेज में जगह बनाएं

बिलिंग के अनचाहे शुल्क से बचने या अपने Workspace के संसाधनों को मिटाने के लिए:

  1. Google AI Studio में, ऐप्लिकेशन पेज पर जाएं.
  2. ग्रिड या सूची में अपना ऐप्लिकेशन ढूंढें.
  3. ऐप्लिकेशन की स्थिति मिटाने और Cloud Run से सेवा को अनपब्लिश करने के लिए, ट्रैश आइकन पर क्लिक करें.
  4. अगर आपने स्टैंडर्ड प्रोजेक्ट का इस्तेमाल करके डिप्लॉय किया है और सभी संसाधनों को पूरी तरह से शट डाउन करना है, तो Google Cloud Console की प्रोजेक्ट सेटिंग पर जाएं और मौजूदा प्रोजेक्ट को मिटाएं.

8. नतीजा

बधाई हो! आपने Google AI Studio से सीधे, फ़ुल-स्टैक वेब ऐप्लिकेशन डिज़ाइन, डेवलप, और डिप्लॉय किया है.

इस लिंक पर जाएं और बिल्डर जर्नी पूरी हुई बैज पाएं!

अपनी जर्नी जारी रखने के लिए, अगली लैब के लिए goo.gle/builders पर जाएं.

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