1. खास जानकारी
इस कोडलैब में, आपको "स्नेक ऐंड बीट्स" वेब ऐप्लिकेशन बनाना है. यह एक रेट्रो स्नेक गेम है, जिसमें म्यूज़िक प्लेयर इंटिग्रेट किया गया है. इस लैब में, आपको Gemini का इस्तेमाल करके एक फ़ाइल वाला React ऐप्लिकेशन जनरेट करना होगा. इसमें आपको नियॉन इफ़ेक्ट देना होगा. इसके बाद, आपको वर्शन कंट्रोल करना होगा और इसे Cloud Run पर डिप्लॉय करना होगा.
आपको क्या करना होगा
- बनाएं और प्रॉम्प्ट दें: Google AI Studio के "बनाएं" मोड का इस्तेमाल करके, एक प्रॉम्प्ट से काम करने वाला गेम जनरेट करें.
- सिस्टम के निर्देशों के हिसाब से जवाब को बेहतर बनाना: आने वाले समय में बदलाव करने के लिए, एआई के लिए एक पर्सोना सेट करके "वाइब चेक" करें.
- GitHub में सेव करें: सीधे AI Studio से नई रिपॉज़िटरी बूटस्ट्रैप करें.
- Cloud Run पर डिप्लॉय करें: एक क्लिक से अपने गेम को Google Cloud Run पर डिप्लॉय करें.
आपको क्या सीखने को मिलेगा
- ऐप्लिकेशन का रैपिड-प्रोटोटाइप बनाने के लिए, Google AI Studio में बिल्ड मोड का इस्तेमाल करने का तरीका.
- इटरेशन के दौरान "कोडिंग वाइब" को बनाए रखने के लिए, सिस्टम के निर्देशों का इस्तेमाल कैसे करें.
- Google AI Studio को GitHub और Cloud Run से कनेक्ट करने का तरीका.
आपको किन चीज़ों की ज़रूरत होगी
- Chrome वेब ब्राउज़र
- Gmail खाता
- बिलिंग की सुविधा वाला Cloud प्रोजेक्ट
- Gemini API पासकोड
- GitHub खाता
2. शुरू करने से पहले
- Google Cloud Console में, प्रोजेक्ट चुनने वाले पेज पर जाकर, Google Cloud प्रोजेक्ट चुनें या बनाएं.
- पक्का करें कि आपके Cloud प्रोजेक्ट के लिए बिलिंग चालू हो. किसी प्रोजेक्ट के लिए बिलिंग चालू है या नहीं, यह देखने का तरीका जानें .
3. बनाएं और प्रॉम्प्ट करें (मुख्य बातें)
हम एक बार में पूरा ऐप्लिकेशन बनाएंगे. Google AI Studio में लॉग इन करें और पक्का करें कि आप बिल्ड इंटरफ़ेस में हों.
- प्रॉम्प्ट बनाएं: चैट बॉक्स में यह प्रॉम्प्ट चिपकाएं:
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.
- अपना मॉडल चुनें: सेटिंग वाले दाईं ओर मौजूद पैनल में, पक्का करें कि कोड जनरेट करने के लिए, Gemini 3.0 Pro (या सबसे नया प्रीव्यू मॉडल) चुना गया हो.
- चलाएं: बनाएं पर क्लिक करें या Cmd + Enter दबाएं.
- झलक देखें: Gemini कोड जनरेट करेगा और आम तौर पर दाईं ओर लाइव झलक दिखाएगा. जैसे, यहां दिखाया गया है:
4. एनोटेशन, इमेज, और आवाज़ की मदद से खोज को बेहतर बनाना
कभी-कभी, किसी विज़ुअल में हुए बदलाव के बारे में शब्दों में बताना मुश्किल होता है. एनोटेशन मोड की मदद से, ऐप्लिकेशन की झलक पर तुरंत ड्रॉ किया जा सकता है. इससे आपको अपनी बात तुरंत बताने में मदद मिलती है.
एनोटेशन मोड का इस्तेमाल करना
- एनोटेशन मोड चालू करें: AI Studio के इंटरफ़ेस में (बाईं ओर मौजूद साइड पैनल या पूर्वावलोकन विंडो के सबसे नीचे मौजूद टूलबार देखें), एनोटेशन या रिफ़ाइन टूल चुनें.
- अपने ऐप्लिकेशन पर मार्कअप जोड़ें:
- ड्रॉ करें: बॉक्स टूल का इस्तेमाल करके, स्कोर काउंटर के चारों ओर एक रेक्टैंगल बनाएं.
- टिप्पणी: उस बॉक्स से जुड़ा कोई प्रॉम्प्ट टाइप करें: "इस फ़ॉन्ट को बड़ा, डिजिटल, और ग्लिची बनाओ."
- स्केच: ऐरो टूल का इस्तेमाल करके, चलाएं/रोकें बटन की ओर इशारा करें.
- टिप्पणी: टाइप: "इन्हें चमकदार नियॉन आइकॉन में बदलें."
- दोहराएं: "चैट में जोड़ें" पर क्लिक करें. इसके बाद, प्रॉम्प्ट भेजें पर क्लिक करें. Gemini, कोड को अपडेट करने के लिए, विज़ुअल मार्किंग और टेक्स्ट कमांड को समझेगा.
- पुष्टि करें: झलक के अपडेट को लाइव देखें. अब आपका विज़ुअल फ़ीडबैक, कोड में दिखना चाहिए!
बोलकर फ़ोन को निर्देश देना (The Spoken Vibe)
कभी-कभी "वाइब" को लिखना मुश्किल होता है, लेकिन उसे बोलकर बताना आसान होता है.
- कार्रवाई: इनपुट बार में, माइक्रोफ़ोन आइकॉन पर क्लिक करें. यह आइकॉन, + बटन के बगल में मौजूद होता है.
- बोलें: "अरे, सांप का ऐनिमेशन बहुत धीमा है. इसे तेज़ करो और इसकी पूंछ से रोशनी निकलती हुई दिखाओ."
- भेजें: Gemini आपकी बोली को टेक्स्ट में बदलता है और बदलाव लागू करता है.
5. सिस्टम के निर्देश सेट करना और फिर से बनाना
सामान्य प्रॉम्प्ट के उलट, सिस्टम के निर्देश पूरे सेशन के दौरान बने रहते हैं. यह कोडिंग स्टैंडर्ड, नाम रखने के नियम या किसी खास विज़ुअल पर्सोना को तय करने के लिए सबसे सही जगह है. इसमें बदलाव नहीं किया जाना चाहिए.
- ऐडवांस सेटिंग खोलें: Google AI Studio इंटरफ़ेस (बिल्ड मोड) में, सिस्टम के लिए निर्देश बॉक्स ढूंढें. अगर यह विकल्प नहीं दिखता है, तो चैट पैनल के सबसे ऊपर या साइड में मौजूद सेटिंग (गियर आइकॉन) या 'ऐडवांस सेटिंग' पर क्लिक करें.
- "वाइब" निर्देश जोड़ना: इस निर्देश को टेक्स्ट बॉक्स में चिपकाएं. इससे हमारे गेम के लिए "ग्लिच आर्ट" पर्सोना तय होता है:
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
- बदलाव को ट्रिगर करना: सिस्टम के निर्देश बदलने पर, कोड अपने-आप नहीं लिखा जाता. आपको Gemini को इन नए नियमों को लागू करने के लिए कहना होगा.
- सेटिंग पैनल बंद करें.
- चैट/प्रॉम्प्ट इनपुट में, यह टाइप करें: "Rebuild the application UI to strictly follow the new System Instructions."
- 'चलाएं / भेजें' पर क्लिक करें.
- अपडेट देखें: Gemini, बदलाव की पुष्टि करेगा.
6. GitHub में सेव करें
हम फ़ाइलों को डाउनलोड करने और कमांड लाइन का इस्तेमाल करने के बजाय, GitHub इंटिग्रेशन का इस्तेमाल करेंगे. इससे रिपॉज़िटरी को तुरंत बूटस्ट्रैप किया जा सकेगा.
- इंटिग्रेशन ढूंढना: Google AI Studio इंटरफ़ेस के सबसे ऊपर मौजूद टूलबार में, GitHub आइकॉन ढूंढें. यह आइकॉन, डाउनलोड और डिप्लॉय आइकॉन के बीच में मौजूद होता है.
- अपना खाता कनेक्ट करें: आइकॉन पर क्लिक करें. अगर आपने पहली बार GitHub खाते को Google AI Studio से कनेक्ट किया है, तो आपको Google AI Studio को GitHub खाते का ऐक्सेस देने के लिए कहा जाएगा.
- रिपॉज़िटरी बनाएं: "अपनी रिपॉज़िटरी बनाने के लिए, यहां दी गई जानकारी भरें" नाम का एक डायलॉग बॉक्स दिखेगा.
- रिपॉज़िटरी का नाम: कोई नाम डालें. उदाहरण के लिए, "React की मदद से बनाया गया, एआई से जनरेट किया गया Snake गेम."
- रिपॉज़िटरी का ब्यौरा: रिपॉज़िटरी का ब्यौरा डालें.
- किसको दिखे: 'सार्वजनिक' को चुनें, ताकि इसे आसानी से शेयर किया जा सके. इसके अलावा, 'निजी' को भी चुना जा सकता है.
- GitHub पर पुश करें: "Git repo बनाएं" बटन पर क्लिक करें.
7. Cloud Run पर डिप्लॉय करें
अब ऐप्लिकेशन तैयार है और इसे GitHub में सेव कर दिया गया है. इसलिए, इसे Cloud Run पर डिप्लॉय करते हैं.
- डिप्लॉयमेंट शुरू करें: यहां हाइलाइट किए गए बटन पर क्लिक करें. यह AI Studio पेज पर सबसे ऊपर दाएं कोने में मौजूद होता है.
- प्रोजेक्ट चुनें: 'कोई क्लाउड प्रोजेक्ट चुनें' ड्रॉपडाउन पर क्लिक करें. इसके बाद, ड्रॉपडाउन से अपना प्रोजेक्ट चुनें.
- समस्या हल करना: अगर आपको ड्रॉपडाउन में अपना प्रोजेक्ट नहीं दिख रहा है, तो प्रोजेक्ट इंपोर्ट करें पर क्लिक करें. इसके बाद, प्रोजेक्ट इंपोर्ट करें पैनल में जाकर अपना प्रोजेक्ट चुनें.
- बिलिंग की पुष्टि: प्रोजेक्ट चुनने के बाद, यह पुष्टि की जाती है कि प्रोजेक्ट के लिए बिलिंग चालू है. यह पुष्टि अपने-आप हो जाएगी, क्योंकि हमने "शुरू करने से पहले" सेक्शन में बिलिंग खाते को प्रोजेक्ट से जोड़ दिया है.
- डिप्लॉय करें: 'ऐप्लिकेशन डिप्लॉय करें' बटन पर क्लिक करें. इसके बाद, Cloud Run पर ऐप्लिकेशन डिप्लॉय होने का इंतज़ार करें. ध्यान दें: Cloud Run सेवा का नाम अपने-आप जनरेट हो जाएगा.
- डिप्लॉयमेंट की प्रोसेस कुछ मिनट में पूरी हो जाएगी. इसके बाद, आपको ऐप्लिकेशन का यूआरएल मिल जाएगा. यूआरएल पर क्लिक करने से, आपको इंटरनेट पर लाइव डिप्लॉय किया गया वेब ऐप्लिकेशन दिखता है!
8. व्यवस्थित करें
इस पोस्ट में इस्तेमाल की गई संसाधनों के लिए, अपने Google Cloud खाते से शुल्क न लिए जाने के लिए, यह तरीका अपनाएं:
- Google Cloud Console में, संसाधन मैनेज करें पेज पर जाएं.
- प्रोजेक्ट की सूची में, वह प्रोजेक्ट चुनें जिसे आपको मिटाना है. इसके बाद, मिटाएं पर क्लिक करें.
- डायलॉग बॉक्स में, प्रोजेक्ट आईडी टाइप करें. इसके बाद, प्रोजेक्ट मिटाने के लिए बंद करें पर क्लिक करें.
9. बधाई हो
बधाई हो! आपने AI Studio पर किसी ऐप्लिकेशन को वाइब-कोड करके, उसे Cloud Run पर डिप्लॉय कर लिया है!!
AI Studio, ऐप्लिकेशन डेवलप और टेस्ट करने के लिए सबसे अच्छा प्लैटफ़ॉर्म है. इससे उपयोगकर्ताओं को अपने डिज़ाइन तुरंत देखने का मौका मिलता है.
AI Studio को Cloud Run के साथ आसानी से इंटिग्रेट किया जा सकता है. इससे उपयोगकर्ता, अपने ऐप्लिकेशन को सीधे Google Cloud पर आसानी से डिप्लॉय कर सकते हैं. Cloud Run का इस्तेमाल करने से, सर्वरलेस एनवायरमेंट के सभी फ़ायदे मिलते हैं. साथ ही, इन्फ़्रास्ट्रक्चर मैनेजमेंट की जटिलताओं और ओवरहेड को कम किया जा सकता है.