1. परिचय
इस कोडलैब में, Gemini 3 और Antigravity कोडिंग एजेंट का इस्तेमाल करके, मैच 3 आर्केड गेम CloudCrush बनाया जाएगा. इस गेम को Go में लिखा जाएगा और Cloud Run का इस्तेमाल करके, Google Cloud पर डिप्लॉय किया जाएगा.
ध्यान दें कि इस वर्कशॉप में शामिल होने के लिए, Go भाषा की जानकारी होना ज़रूरी नहीं है. हालांकि, इसकी जानकारी होना फ़ायदेमंद हो सकता है. ऐसा इसलिए, क्योंकि एजेंट ही पूरी कोडिंग करेगा. इस कोडलैब का मुख्य मकसद, एजेंट को इस तरह से व्यवस्थित करने की स्किल डेवलप करना है कि वह आपके लिए ऐप्लिकेशन बना सके. इसके लिए, आपको मैन्युअल तरीके से कोड लिखने की ज़रूरत न पड़े.
यह कोडलैब, उन डेवलपर के लिए है जिन्हें एजेंटिक वर्कफ़्लो के बारे में पहले से कुछ जानकारी है और वे इसके बारे में ज़्यादा जानना चाहते हैं. इस लैब को पूरा करने में 60 मिनट लग सकते हैं. इस कोडलैब में बनाए गए रिसॉर्स के लिए, इस्तेमाल के हिसाब से कीमत तय की जाती है.
आपको क्या करना होगा
- Go और Ebitengine फ़्रेमवर्क का इस्तेमाल करके, मैच-3 गेम की मुख्य लॉजिक बनाएं.
- WebAssembly (WASM) का इस्तेमाल करके, गेम को वेब ब्राउज़र पर चलाने के लिए अडैप्ट करना
- गेम और उसके हाई-स्कोर एपीआई को Cloud Run पर डिप्लॉय करें.
- टेस्टिंग और कोड की समीक्षा के लिए, खास सब-एजेंट और एक्सटेंशन को व्यवस्थित करना
ज़रूरी शर्तें
- प्रोग्रामिंग भाषाओं की बुनियादी जानकारी
- क्लाउड इन्फ़्रास्ट्रक्चर की बुनियादी जानकारी
- Google Cloud Console की बुनियादी जानकारी
आपको क्या सीखने को मिलेगा
- मुश्किल ऐप्लिकेशन बनाने के लिए, कोडिंग एजेंट के साथ काम करने का तरीका
- अलग-अलग मोड में Gemini का इस्तेमाल कैसे करें
- Cloud Run का इस्तेमाल करके, क्लाउड पर ऐप्लिकेशन डिप्लॉय करने का तरीका
आपको किन चीज़ों की ज़रूरत होगी
इस वर्कशॉप को Cloud Shell का इस्तेमाल करके, पूरी तरह से क्लाउड पर किया जा सकता है. हालांकि, अगर आपको अपनी लोकल मशीन का इस्तेमाल करना है, तो आपको इन चीज़ों की ज़रूरत होगी:
- Antigravity 2.0 और Antigravity सीएलआई. इसे डाउनलोड और इंस्टॉल करने के लिए, antigravity.google पर दिए गए निर्देशों का पालन करें
- Go टूलचेन (1.26 या इसके बाद का वर्शन). इसे डाउनलोड और इंस्टॉल करने के लिए, go.dev में दिए गए निर्देशों का पालन करें
- Google Cloud के साथ इंटरैक्ट करने के लिए, gcloud सीएलआई. Google Cloud के दस्तावेज़ में दिए गए निर्देशों का इस्तेमाल करके, इसे डाउनलोड और इंस्टॉल करें
- Google Cloud बिलिंग खाता (गेम को क्लाउड पर डिप्लॉय करने के लिए)
मुख्य टेक्नोलॉजी
हम जिन टेक्नोलॉजी का इस्तेमाल करेंगे उनके बारे में ज़्यादा जानकारी यहां दी गई है:
- Antigravity CLI: डेवलपमेंट एजेंट
- Gemini 3: यह हमारे फ़्रंटियर लार्ज लैंग्वेज मॉडल का नया वर्शन है
2. एनवायरमेंट सेटअप करना
इनमें से कोई एक विकल्प चुनें: अगर आपको इस कोडलैब को अपने कंप्यूटर पर चलाना है, तो अपने हिसाब से एनवायरमेंट सेटअप करें विकल्प चुनें. अगर आपको इस कोडलैब को पूरी तरह से क्लाउड में चलाना है, तो Cloud Shell शुरू करें विकल्प चुनें.
अपनी स्पीड से एनवायरमेंट सेट अप करना
- Google Cloud Console में साइन इन करें और नया प्रोजेक्ट बनाएं या किसी मौजूदा प्रोजेक्ट का फिर से इस्तेमाल करें. अगर आपके पास पहले से कोई Gmail या Google Workspace खाता नहीं है, तो आपको एक खाता बनाना होगा.
- प्रोजेक्ट का नाम, इस प्रोजेक्ट में हिस्सा लेने वाले लोगों के लिए डिसप्ले नेम होता है. यह एक वर्ण स्ट्रिंग है, जिसका इस्तेमाल Google API नहीं करते. इसे कभी भी अपडेट किया जा सकता है.
- प्रोजेक्ट आईडी, सभी Google Cloud प्रोजेक्ट के लिए यूनीक होता है. साथ ही, इसे बदला नहीं जा सकता. Cloud Console, एक यूनीक स्ट्रिंग अपने-आप जनरेट करता है. आम तौर पर, आपको इससे कोई फ़र्क़ नहीं पड़ता कि यह क्या है. ज़्यादातर कोडलैब में, आपको अपने प्रोजेक्ट आईडी (आम तौर पर
PROJECT_IDके तौर पर पहचाना जाता है) का रेफ़रंस देना होगा. अगर आपको जनरेट किया गया आईडी पसंद नहीं है, तो कोई दूसरा रैंडम आईडी जनरेट किया जा सकता है. इसके अलावा, आपके पास अपना नाम आज़माने का विकल्प भी है. इससे आपको पता चलेगा कि वह नाम उपलब्ध है या नहीं. इस चरण के बाद, इसे बदला नहीं जा सकता. यह प्रोजेक्ट की अवधि तक बना रहता है. - आपकी जानकारी के लिए बता दें कि एक तीसरी वैल्यू भी होती है, जिसे प्रोजेक्ट नंबर कहते हैं. इसका इस्तेमाल कुछ एपीआई करते हैं. इन तीनों वैल्यू के बारे में ज़्यादा जानने के लिए, दस्तावेज़ देखें.
- इसके बाद, आपको Cloud Console में बिलिंग चालू करनी होगी, ताकि Cloud संसाधनों/एपीआई का इस्तेमाल किया जा सके. इस कोडलैब को पूरा करने में ज़्यादा समय नहीं लगेगा. इस ट्यूटोरियल के बाद बिलिंग से बचने के लिए, संसाधनों को बंद किया जा सकता है. इसके लिए, बनाए गए संसाधनों को मिटाएं या प्रोजेक्ट को मिटाएं. Google Cloud के नए उपयोगकर्ताओं को, 300 डॉलर का क्रेडिट मुफ़्त में आज़माने का प्रोग्राम मिलता है.
Cloud Shell शुरू करना
Google Cloud को अपने लैपटॉप से रिमोटली ऐक्सेस किया जा सकता है. हालांकि, इस कोडलैब में Google Cloud Shell का इस्तेमाल किया जाएगा. यह क्लाउड में चलने वाला कमांड लाइन एनवायरमेंट है.
Google Cloud Console में, सबसे ऊपर दाएं कोने में मौजूद टूलबार पर, Cloud Shell आइकॉन पर क्लिक करें:
इसे चालू करने और एनवायरमेंट से कनेक्ट करने में सिर्फ़ कुछ सेकंड लगेंगे. यह प्रोसेस पूरी होने के बाद, आपको कुछ ऐसा दिखेगा:
इस वर्चुअल मशीन में, डेवलपमेंट के लिए ज़रूरी सभी टूल पहले से मौजूद होते हैं. यह 5 जीबी की होम डायरेक्ट्री उपलब्ध कराता है. साथ ही, Google Cloud पर काम करता है. इससे नेटवर्क की परफ़ॉर्मेंस और पुष्टि करने की प्रोसेस बेहतर होती है. इस कोडलैब में मौजूद सभी टास्क, ब्राउज़र में किए जा सकते हैं. आपको कुछ भी इंस्टॉल करने की ज़रूरत नहीं है.
3. प्रोजेक्ट सेटअप करना
प्रोजेक्ट डायरेक्ट्री बनाना
सबसे पहले, हमें आपके प्रोजेक्ट के लिए एक नई डायरेक्ट्री बनानी होगी. अपने टर्मिनल में, ये कमांड चलाएं:
mkdir -p codelab-match3 && cd codelab-match3
Antigravity सीएलआई लॉन्च करना
सबसे पहले, यह देखते हैं कि Antigravity CLI सही तरीके से इंस्टॉल हुआ है या नहीं. अपने टर्मिनल में यह कमांड चलाएं:
agy --version
आपको कुछ ऐसा दिखेगा:
$ agy --version 1.0.2
अब agy कमांड की मदद से, Antigravity CLI लॉन्च करें:
agy
Antigravity आपसे पूछेगा कि क्या आपको इस प्रोजेक्ट पर भरोसा है. हमने अभी-अभी एक खाली फ़ोल्डर बनाया है. इसलिए, इस पर भरोसा किया जा सकता है. इसलिए, ऐक्सेस की पुष्टि करें. इसके बाद, आपको सीएलआई प्रॉम्प्ट पर ले जाया जाएगा:
अगर आपको Antigravity CLI प्रॉम्प्ट दिख रहा है, तो इसका मतलब है कि आपने सेटअप सही तरीके से किया है. अगर आपको यह प्रॉम्प्ट नहीं दिख रहा है, तो दोबारा जांच करें कि आपने सेटअप के पिछले चरणों में से कोई चरण छोड़ा तो नहीं है.
4. प्लानिंग मोड में बुनियादी गेम बनाना
आइए, मैच-3 गेम के मुख्य लॉजिक को बनाना शुरू करें. एंटीग्रैविटी, डिफ़ॉल्ट रूप से प्लानिंग मोड में शुरू होती है. इसलिए, प्लानिंग मोड पर स्विच करने के लिए आपको कोई खास कमांड देने की ज़रूरत नहीं है.
हालांकि, यह जानना ज़रूरी है कि Antigravity CLI प्रॉम्प्ट में, स्लैश कमांड /planning का इस्तेमाल करके, प्लानिंग मोड को किसी भी समय चालू किया जा सकता है:
/planning
अगर आपने अभी इस कमांड को चलाने की कोशिश की, तो Antigravity आपको याद दिलाएगा कि यह पहले से ही प्लान की जा चुकी है.
प्लानिंग मोड के उलट, फ़ास्ट मोड होता है. इसे /fast की मदद से चालू किया जा सकता है:
/fast
फ़ास्ट मोड में, Antigravity तुरंत टास्क पर काम करना शुरू कर देगा. यह मोड, आसान और छोटे टास्क के लिए होता है. प्लानिंग मोड को मुश्किल टास्क के लिए डिज़ाइन किया गया है. इसमें एजेंट, टास्क को पूरा करने के लिए सबसे पहले एक प्लान बनाएगा. इस प्लान की समीक्षा करके इसमें बदलाव किया जा सकता है. इसके बाद, इसे लागू किया जा सकता है.
ऐसेट डाउनलोड करना
हमें उन इमेज को डाउनलोड करना होगा जिनका इस्तेमाल गेम में किया जाएगा. यह एक छोटा टास्क है, इसलिए इसे प्लानिंग मोड में चलाने की ज़रूरत नहीं है. इसलिए, हम इसे तुरंत पूरा करने के लिए फ़ास्ट मोड का इस्तेमाल करेंगे:
Create a folder named "assets" and download the images
background.png, gcp_sprites.png, gemini.png and logo.png,
from this GitHub repository to the "assets" folder:
https://github.com/GoogleCloudPlatform/devrel-demos/tree/main/codelabs/gemini-cli/gemini-cli-match3-golang
Antigravity, फ़ाइलें डाउनलोड करने के लिए कुछ शेल कमांड चलाने की अनुमति मांगेगा. इसके बाद, आपको कुछ ऐसा दिखेगा:
बेस गेम बनाना
ऐसेट तैयार होने के बाद, अब बेस गेम बनाने का समय है. गेम बनाना एक मुश्किल काम है. इसलिए, हम प्रॉम्प्ट देने से पहले प्लानिंग मोड पर वापस जाते हैं:
/planning
प्लानिंग मोड में, यहां दिए गए प्रॉम्प्ट को कॉपी करें और Antigravity CLI में चिपकाएं:
Build a Match-3 game called 'Cloud Crush' in Go using Ebitengine v2.
The entire game screen should have background.png as background.
The play area should be an 8x8 grid with white background.
On the right side of the play area include a side panel with UI elements
like player score and how to play instructions.
The side panel should have a solid background colour to help with readability of the UI.
Use standard GCP product logos (e.g. Compute Engine, Cloud Storage, BigQuery, etc.)
as icons. These icons are provided in the gcp_sprites.png file.
The icons are saved as 64x64 sprites but scale them as necessary
based on the screen resolution. Implement swapping, clearing 3+ gems, and gravity.
Use ebitengine native font rendering (size 48 for titles and size
24 for normal text) for all text and not the debug print.
The font should be monospaced (golang.org/x/image/font/gofont/gomono).
Keep the UI tidy and harmonic, e.g. centered text should always be
adjusted based on text length, not just guess based on estimates.
प्लान बनाने से पहले, यह कुछ एक्सप्लोरेशन कर सकता है. उदाहरण के लिए, डाइमेंशन देखने के लिए पीएनजी फ़ाइलों की जांच करना. प्लान पूरा हो जाने के बाद, आपको इसकी समीक्षा करने के लिए कहा जाएगा:
कृपया सबसे नीचे दाएं कोने पर ध्यान दें. यहां आपने 1 आर्टफ़ैक्ट लिखा है. साथ ही, समीक्षा करने के लिए /artifact का इस्तेमाल करने का सुझाव दिया गया है. Antigravity में, प्लान, टास्क लिस्ट, और वॉकट्रू जैसी सहयोगी फ़ाइलों को "आर्टफ़ैक्ट" कहा जाता है. ऐसा इसलिए किया जाता है, ताकि इन्हें समाधान का हिस्सा बनने वाली सामान्य फ़ाइलों (जैसे कि सोर्स कोड) से अलग किया जा सके.
प्रॉम्प्ट में /artifact कमांड डालने पर, आपको प्लान दिखेगा. अगर आपको कोई बदलाव करना है, तो उस पर टिप्पणियां की जा सकती हैं.
/artifact
आपको कुछ ऐसा दिखेगा:
ध्यान दें कि implementation_plan.md नाम की एक फ़ाइल है. इसमें अनुरोध को खोलने, स्वीकार करने या अस्वीकार करने के विकल्प मौजूद हैं. इसे खोलने के लिए, Enter दबाएं. मेरे सिस्टम पर प्लान कैसा दिखता है, इसका एक उदाहरण यहां दिया गया है:
ऐरो कुंजियों की मदद से, ऊपर और नीचे स्क्रोल किया जा सकता है. साथ ही, किसी भी लाइन पर C कुंजी दबाकर टिप्पणी जोड़ी जा सकती है. इस मामले में, मुझे यह पसंद नहीं है कि Go के पुराने वर्शन का इस्तेमाल किया जा रहा है. इसलिए, मैं लाइन 16 पर Go 1.26 (इस लेख को लिखते समय का सबसे नया वर्शन) का इस्तेमाल करने के लिए एक टिप्पणी जोड़ूंगा:
टिप्पणी डालने के बाद, वह इस तरह दिखेगी:
"पुष्टि करने का प्लान" सेक्शन को देखना ज़रूरी है. गेम की अपने-आप जांच करना मुश्किल होता है. हालाँकि, go एक कंपाइल की गई भाषा है. इसलिए, हमें कम से कम यह पक्का करना चाहिए कि मॉडल हमें ऐसा कोड दे जो कंपाइल हो जाए. अगर बाइनरी बनाने के लिए कोई ऑटोमेटेड चरण शामिल नहीं किया गया है, तो उसे टिप्पणी के तौर पर जोड़ें:
"पुष्टि करने का प्लान" सेक्शन को देखना ज़रूरी है. गेम की अपने-आप जांच करना मुश्किल होता है. हालांकि, go एक कंपाइल की गई भाषा है. इसलिए, हमें कम से कम यह पक्का करना चाहिए कि मॉडल हमें ऐसा कोड दे जो कंपाइल हो जाए. अगर बाइनरी बनाने के लिए कोई ऑटोमेटेड चरण शामिल नहीं किया गया है, तो उसे टिप्पणी के तौर पर जोड़ें:
जब तक आपको मनमुताबिक प्लान न मिल जाए, तब तक यह प्रोसेस दोहराएं. इसके बाद, वापस जाने के लिए ESC दबाएं. इसके बाद, एजेंट को टिप्पणियां भेजने की पुष्टि करने के लिए, Y दबाएं:
Y दबाने के बाद, एजेंट तुरंत काम करना शुरू कर देगा. "आर्टफ़ैक्ट" मेन्यू से बाहर निकलने के लिए, आपको एक बार और ESC दबाना होगा. इससे आपको प्रॉम्प्ट मोड पर वापस जाने में मदद मिलेगी. इस दौरान, एजेंट आपसे टूल कॉल की पुष्टि करने के लिए कई बार कह सकता है, क्योंकि उसे शेल कमांड चलाने की ज़रूरत होती है.
जब तक इमेज जनरेट होती है, तब तक हम प्रॉम्प्ट को लाइन में लगाकर डिज़ाइन पर काम करना जारी रख सकते हैं. उदाहरण के लिए, हम इस मौके का इस्तेमाल करके, ऐसी नई ज़रूरी शर्त जोड़ सकते हैं जो ओरिजनल प्रॉम्प्ट में शामिल नहीं थी:
Add a 60-seconds countdown timer and an in-memory high-score tracker to enhance the arcade game experience. Combos should give a score bonus of 10% per combo number.
मैसेज के इतिहास में, लाइन में लगा हुआ प्रॉम्प्ट दिखेगा. इसके सामने एक छोटा ऐरो हेड होगा:
ऐसा भी हो सकता है कि आपको आर्टफ़ैक्ट की संख्या में बढ़ोतरी दिखे. प्लान के अलावा, Antigravity एक टास्क लिस्ट (task.md) भी बनाएगा. इससे, उन सभी आइटम को ट्रैक किया जा सकेगा जिन्हें लागू करना है या जिन पर कार्रवाई करनी है. ऐसा हो जाने के बाद, यह एक वॉकट्रू फ़ाइल (walkthrough.md) बनाएगा. इसमें हासिल किए गए लक्ष्यों के बारे में जानकारी दी जाएगी. /artifact कमांड का फिर से इस्तेमाल करके, इन सभी की जांच की जा सकती है.
यहां बेस गेम को लागू करने के बाद, task.md फ़ाइल का उदाहरण दिया गया है:
इन फ़ाइलों को कभी भी खोला जा सकता है और इनमें टिप्पणियां जोड़ी जा सकती हैं. एजेंट को भेजने पर, ये टिप्पणियां प्रॉम्प्ट की तरह ही क्रम से लागू होंगी. इन फ़ाइलों पर टिप्पणी करना एक अच्छा तरीका है. इससे एजेंट को आपके अनुरोध के बारे में ज़्यादा जानकारी मिलती है.
बाइनरी के बन जाने के बाद, आपको कुछ ऐसा दिखेगा:
गेम चलाकर देखें कि वह आपकी उम्मीद के मुताबिक काम कर रहा है या नहीं. इसे एजेंट के प्रॉम्प्ट में शामिल करना बेहतर होता है. विस्मयादिबोधक चिह्न "!" टाइप करके, प्रॉम्प्ट को "शेल मोड" पर स्विच किया जा सकता है:
आपको प्रॉम्प्ट के नीचे "bash मोड चालू है" मैसेज दिखेगा. निर्देश चलाने के लिए, Enter दबाएं. इस मोड में बाइनरी चलाने से आपको यह फ़ायदा मिलता है कि एजेंट, टर्मिनल पर किसी भी आउटपुट पर "नज़र रखता है". इसलिए, अगर गेम नहीं चलता है या अचानक क्रैश हो जाता है, तो आपको एजेंट को हुई समस्या के बारे में बताने की ज़रूरत नहीं है. इसमें शेल कॉन्टेक्स्ट से मिली सभी ज़रूरी जानकारी तुरंत उपलब्ध होगी.
गेम खेलें और गेम के पैरामीटर को तब तक बेहतर बनाएं, जब तक आपको गेम खेलने का अच्छा अनुभव न मिले. उदाहरण के लिए, ऐनिमेशन को तेज़ या धीमा करना, निर्देशों के हिसाब से जवाब देने की सुविधा को अडजस्ट करना वगैरह.
उदाहरण के लिए, इस प्रॉम्प्ट से अनुभव को बेहतर बनाया जा सकेगा. इसमें ऐक्सेसिबिलिटी मोड और कीबोर्ड के नए निर्देश जोड़े गए हैं:
Update the implementation to include: 'Q' to quit, 'F' for full-screen
and 'A' for Accessibility Mode: swap GCP logos for high-contrast coloured blocks.
Also enable Arrow Keys to move the selection cursor and Space to select the gem to
swap (space is pressed once to select, then arrow key immediately makes
the move - no need to press space again).
Use a golden square (4 px border, transparent fill) with a simple animation
to highlight where the cursor is at the moment.
पॉलिशिंग पूरी होने के बाद, इसे वेब ऐप्लिकेशन में बदलने के लिए अगले सेक्शन पर जाएं.
5. गेम को वेब ब्राउज़र पर चलाने के लिए अडैप्ट करना
Ebitengine गेम, फ़िलहाल एक डेस्कटॉप ऐप्लिकेशन है. आइए, Antigravity CLI से इसे WebAssembly (WASM) का इस्तेमाल करके वेब ब्राउज़र में चलाने के लिए कहें. इसमें ब्राउज़र टारगेट के लिए Go कोड को कंपाइल करना और बुनियादी वेब सर्वर सेट अप करना शामिल होगा.
एजेंट को निर्देश देने के लिए, इस प्रॉम्प्ट का इस्तेमाल करें:
We need to enable this game to run on a web browser. Compile the game to WASM
and create a Go web server to serve the compiled WASM and the assets.
ध्यान दें कि एजेंट, आपके फ़ाइल सिस्टम में wasm_exec.js नाम की फ़ाइल को खोजने की कोशिश करेगा. ऐसा होना सामान्य है. इसलिए, आपको इसकी अनुमति देनी होगी. ऐसा इसलिए, क्योंकि यह फ़ाइल रैपर है. इसकी मदद से, JS के ज़रिए Go बाइनरी चलाई जा सकती हैं. उदाहरण के लिए:
एजेंट के टास्क पूरा करने के बाद, एजेंट को गेम सर्वर को बैकग्राउंड में चलाने का निर्देश दिया जा सकता है.
अब अपने ब्राउज़र में http://localhost:8080 खोलें और देखें कि गेम वेब पर चल रहा है या नहीं:
अब जब आपने इसे वेब पर चला लिया है, तो आइए इसे क्लाउड पर डिप्लॉय करने से पहले, फ़ाइनल रूप दें.
6. टाइटल स्क्रीन और लीडरबोर्ड बनाना
यह गेम काम करता है, लेकिन इसमें आर्केड गेम का पूरा अनुभव देने के लिए कुछ ज़रूरी सुविधाएं मौजूद नहीं हैं. सबसे पहले, टाइटल स्क्रीन जोड़ते हैं. इसके बाद, लीडरबोर्ड जोड़ते हैं, ताकि आप अपने दोस्तों के साथ मुकाबला कर सकें! इस प्रॉम्प्ट का इस्तेमाल करें:
Create a title screen that displays the game logo (logo.png) over the cloud background.
The logo should be centered and occupy no more than 75% of the screen area.
The title screen should display "Press ENTER to play" (black/bold) right below the logo,
with every letter animated in a slow wavy (cosine) pattern.
Once the player presses ENTER, it should be prompted to add their name, which
will then be recorded to populate the leaderboard at the end of the round.
Once the game is over, play the animated leaderboard with the top 10 highest scores.
The animated leaderboard should render entries one by one up to 10 entries,
using a fade in effect just like old school arcade games. The leaderboard
should fade out to the title screen after 15 seconds.
Please note that name entry should be processed independently of the play state
key handlers (e.g. pressing A during name entry should not toggle accessibility mode).
Leaderboard scores should be saved in-memory, server-side.
यह अब थोड़ा ज़्यादा प्रोफ़ेशनल लग रहा है! 🙂
7. गेम को Cloud Run पर डिप्लॉय करना
अब समय आ गया है कि हम अपनी क्रिएटिविटी को दुनिया के साथ शेयर करें! हम पूरे ऐप्लिकेशन को Google Cloud Run पर डिप्लॉय करेंगे, ताकि इसे कहीं से भी ऐक्सेस किया जा सके.
Use the gcloud CLI to provision and deploy the Go web server and its assets to
Google Cloud Run. Provide the live URL when complete.
गेम अब क्लाउड पर लाइव है. इसलिए, इसे मोबाइल डिवाइसों पर चलाने की अनुमति न देना एक अच्छा मौका गंवाने जैसा होगा. इसके लिए, यह प्रॉम्प्ट इस्तेमाल करें:
Now enable this game to run on mobile devices. You need to update the input system to handle "taps" as well as key presses and clicks. Since mobile devices most likely won't have a keyboard, add a virtual keyboard to the name entry screen and a confirmation button to the name entry.
Finally, generate a QR code for the CloudRun link and display it on the screen so that people can scan it to access the mobile version and compete against their friends for the high score.
अपने ब्राउज़र पर गेम को फिर से चलाएं. किसी फ़ोन या टैबलेट से भी यूआरएल को ऐक्सेस करने की कोशिश करें. इस प्रोसेस को आसान बनाने के लिए, क्यूआर कोड जनरेट किया जा सकता है.
8. गेम की जांच करने के लिए, ब्राउज़र एजेंट का इस्तेमाल करना
किसी गेम की अपने-आप जांच करना मुश्किल होता है, क्योंकि यह विज़ुअल फ़ीडबैक पर निर्भर करता है. हालांकि, हम कुछ ऑटोमेशन का इस्तेमाल करके यह पक्का कर सकते हैं कि डिप्लॉयमेंट सही तरीके से काम कर रहा है और हमारे पास बुनियादी एलिमेंट मौजूद हैं.
इसके लिए, हम ब्राउज़र सब-एजेंट का इस्तेमाल करेंगे. Antigravity में, सब-एजेंट एक अलग पर्सोना होता है, जिसमें नया कॉन्टेक्स्ट होता है. यह उन कामों के लिए सबसे सही होता है जिनमें आपको मौजूदा कॉन्टेक्स्ट से नतीजों पर असर नहीं पड़ने देना होता. इसके अलावा, इसका इस्तेमाल तब भी किया जा सकता है, जब आपको टास्क को अपनी मुख्य कॉन्टेक्स्ट विंडो को "दूषित" करने से रोकना हो.
ब्राउज़र एजेंट, ब्राउज़र से जुड़े टास्क के लिए पहले से मौजूद एक खास एजेंट है. कृपया ध्यान दें कि इस चरण के लिए, हमें Antigravity के डेस्कटॉप ऐप्लिकेशन का इस्तेमाल करना होगा. ऐसा इसलिए, क्योंकि फ़िलहाल ब्राउज़र एजेंट, कमांड लाइन पर उपलब्ध नहीं है.
Antigravity का डेस्कटॉप ऐप्लिकेशन खोलें और Cloud Crush प्रोजेक्ट में नई बातचीत शुरू करें:
ब्राउज़र के सब-एजेंट को ट्रिगर करने के लिए, /browser टाइप करें. इसके बाद, यह प्रॉम्प्ट टाइप करें:
Go to http://localhost:8080 and capture screenshots of the following game screens:
1. Title Screen (initial state: "PRESS ENTER TO PLAY")
2. Name Entry Screen (press Enter to reach this screen)
3. Main Gameplay Screen (type a name like "PLAYER" and press Enter to start)
4. Leaderboard Screen (let the game timer run out to view the high scores)
इस तरीके से, हम यूज़र इंटरफ़ेस (यूआई) के उन एलिमेंट को ठीक करने के लिए स्क्रीनशॉट का इस्तेमाल कर सकते हैं जिनके बारे में सिर्फ़ टेक्स्ट में बताना मुश्किल होता है.
फ़ाइल का रेफ़रंस देने के लिए, "@" सिंबल के बाद फ़ाइल का नाम लिखें. उदाहरण के लिए, यहां मैंने एजेंट से टाइटल स्क्रीन पर लोगो का साइज़ बढ़ाने के लिए कहा है:
हालांकि, इस उदाहरण में मॉडल को साइज़ में 50% का बदलाव करने के लिए, इमेज को "देखने" की ज़रूरत नहीं है. फिर भी, यह यूज़र इंटरफ़ेस (यूआई) में बदलाव करने का एक उपयोगी तरीका है. इससे उन मामलों में मदद मिलती है जहां टेक्स्ट के रूप में समस्या के बारे में बताना मुश्किल होता है. इससे एजेंट को, पहले और बाद के स्क्रीनशॉट लेकर अपने काम की पुष्टि करने की अनुमति भी मिलती है. इसलिए, इस ट्रिक को अपने टूलबॉक्स में रखें.
9. गेम को सुरक्षित रखने के लिए, पसंद के मुताबिक एजेंट बनाना
"वाइब-कोडेड" ऐप्लिकेशन के बारे में एक आम चिंता यह है कि कोडिंग और सुरक्षा, दोनों के नज़रिए से अच्छी क्वालिटी और सबसे सही तरीकों को कैसे बनाए रखा जाए. इन दोनों पहलुओं पर ज़्यादा ध्यान देने के लिए, अपने प्रॉम्प्ट को बेहतर बनाया जा सकता है. हालांकि, किसी प्रॉम्प्ट में जितनी ज़्यादा जानकारी जोड़ी जाएगी, एजेंट का फ़ोकस उतना ही कम होगा. इससे अक्सर, उम्मीद के मुताबिक नतीजे नहीं मिलते.
इस तरह के काम के लिए, सब-एजेंट का इस्तेमाल करना सबसे सही होता है. ऐसा इसलिए, क्योंकि वे सिर्फ़ उस टास्क पर फ़ोकस कर सकते हैं जो आपने उन्हें दिया है. आइए, इस कोड की सुरक्षा ऑडिट करने के लिए एक कस्टम एजेंट बनाएं. इससे यह पक्का किया जा सकेगा कि हम इस गेम को डिप्लॉय करते समय, किसी भी क्रेडेंशियल को लीक न करें या खुद को किसी गैर-ज़रूरी जोखिम में न डालें.
इस प्रॉम्प्ट से, एजेंट को एक अच्छी शुरुआती जानकारी मिलती है:
create a new subagent called "security_auditor" using the following instructions:
You are a ruthless Security Auditor. Your job is to analyze code for potential vulnerabilities.
Focus on:
1. SQL Injection
2. XSS (Cross-Site Scripting)
3. Hardcoded credentials
4. Unsafe file operations
When you find a vulnerability, explain it clearly and suggest a fix. Do not fix it yourself; just report it.
ध्यान दें कि Antigravity, नया एजेंट बनाने के लिए "DefineSubagent" टूल का इस्तेमाल करेगा:
एजेंट से गेम कोड की सुरक्षा जांच करने के लिए कहें. इसके लिए, यह प्रॉम्प्ट इस्तेमाल करें:
Run the security auditor agent in this code
आपको कुछ ऐसा दिखेगा:
एजेंट के टास्क पूरा करने के बाद, आपको इस तरह की रिपोर्ट दिखेगी:
चलिए, Antigravity से इन समस्याओं को ठीक करने के लिए कहते हैं 🙂:
Fix these findings for me please!
और यह लीजिए:
कृपया ध्यान दें कि इस तरह बनाए गए एजेंट, सिर्फ़ बातचीत के दौरान मौजूद रहते हैं. अगर आपको ऐसा एजेंट चाहिए जिसका इस्तेमाल अलग-अलग सेशन में किया जा सके, तो कॉन्फ़िगरेशन फ़ाइल का इस्तेमाल करके उसे बनाया जा सकता है. ज़्यादा जानकारी के लिए, /agents कमांड देखें.
10. नतीजा
बधाई हो! आपने Antigravity CLI का इस्तेमाल करके, एक आर्केड गेम बनाया, डिप्लॉय किया, टेस्ट किया, और ऑडिट किया. इससे पता चलता है कि आपने शुरुआती स्केफ़ोल्डिंग से लेकर डिप्लॉयमेंट तक, एजेंटिक वर्कफ़्लो के अडवांस तरीके इस्तेमाल किए हैं.
क्लीन अप करें
अपने Google Cloud खाते से लगातार शुल्क लिए जाने से बचने के लिए, इस कोडलैब के दौरान बनाई गई संसाधन मिटाएं.
- Cloud Run सेवा मिटाएं:
I'm finished with this project. Delete the cloud run deployment.
- प्रोजेक्ट डायरेक्ट्री मिटाएं:
cd .. && rm -rf codelab-match3
इसके अलावा, अगर Google Cloud प्रोजेक्ट सिर्फ़ इस कोडलैब के लिए बनाया गया था, तो उसे मिटाया जा सकता है.
अगले चरण
इस प्लैटफ़ॉर्म पर मौजूद अन्य कोडलैब को एक्सप्लोर करके, अपनी सीखने की यात्रा जारी रखी जा सकती है. इसके अलावा, Cloud Crush को अपने हिसाब से बेहतर बनाया जा सकता है. हालांकि, इन संसाधनों का इस्तेमाल करने के बाद, इन्हें हटाना न भूलें!
कोडिंग करते रहें!