Antigravity में स्पेसिफ़िकेशन के आधार पर डेवलपमेंट शुरू करना

1. इस लैब का मकसद

इस हैंड्स-ऑन लैब में, आपको Google Antigravity का इस्तेमाल करके ऐप्लिकेशन बनाने और उन्हें Google Cloud में डिप्लॉय करने का तरीका बताया जाएगा. इस लैब में, आपको स्पेसिफ़िकेशन के आधार पर डेवलपमेंट करने के कॉन्सेप्ट के बारे में भी बताया जाएगा.

आपको क्या सीखने को मिलेगा

  • Google Antigravity के बारे में बुनियादी बातें जानें.
  • स्पेसिफ़िकेशन के आधार पर डेवलपमेंट की बुनियादी बातें समझना
  • Cloud Run में ऐप्लिकेशन आसानी से डिप्लॉय करने का तरीका जानें.

ba43a75a2c4134f1.png

पहली इमेज: Antigravity, Google का बनाया गया Agent First डेवलपमेंट टूल है.

2. एनवायरमेंट सेटअप करना

  1. Antigravity इंस्टॉल करें:
                       👉Download the  [Google Antigravity](https://antigravity.google/docs/get-started) for your environment from  [here](https://antigravity.google/).

👉अपने एनवायरमेंट में Antigravity इंस्टॉल करें.

👉उस फ़ोल्डर पर जाएं जहां Antigravity इंस्टॉल किया गया है. इसके बाद, इंस्टॉलर को खोलने के लिए उस पर दो बार क्लिक करें.

👉अपने एनवायरमेंट में Antigravity इंस्टॉल करने के लिए, इंस्टॉलर के निर्देशों का पालन करें.

  1. Python इंस्टॉल करना

👉 https://www.python.org/downloads/ पर जाएं और अपने सिस्टम के लिए Python इंस्टॉल करें.

  1. gcloud इंस्टॉल करना

👉gcloud एक कमांड लाइन टूल है. इसकी मदद से, Google Cloud पर अलग-अलग कार्रवाइयां की जा सकती हैं. अपने एनवायरमेंट में gcloud इंस्टॉल करने के लिए, यहां दिए गए निर्देशों का पालन करें.

👉इंस्टॉल हो जाने के बाद, सिस्टम टर्मिनल खोलें और उसमें gcloud टाइप करके, इंस्टॉल करने की प्रोसेस की जांच करें. 8265f18dcf1af94c.png

दूसरी इमेज: gcloud इंस्टॉल करने के बाद, टर्मिनल में gcloud टाइप करके, इंस्टॉलेशन की जांच की जा सकती है

3. प्रोजेक्ट सेटअप करना

  • अगर आपके पास पहले से कोई ऐसा प्रोजेक्ट नहीं है जिसका इस्तेमाल किया जा सके, तो आपको GCP Console में एक नया प्रोजेक्ट बनाना होगा. प्रोजेक्ट चुनने वाले टूल (Google Cloud Console में सबसे ऊपर बाईं ओर) में जाकर, वह प्रोजेक्ट चुनें 6fce70b12b5fc94.png

दूसरी इमेज: Google Cloud के लोगो के ठीक बगल में मौजूद बॉक्स पर क्लिक करके, अपना प्रोजेक्ट चुना जा सकता है. पक्का करें कि आपका प्रोजेक्ट चुना गया हो.

  • इस लैब में, हम अपने टास्क पूरे करने के लिए Cloud Shell Editor का इस्तेमाल करेंगे. Cloud Shell खोलें और Cloud Shell का इस्तेमाल करके प्रोजेक्ट सेट करें.
  • सीधे Cloud Shell Editor पर जाने के लिए, इस लिंक पर क्लिक करें
  • अगर टर्मिनल पहले से खुला नहीं है, तो मेन्यू में जाकर टर्मिनल>नया टर्मिनल पर क्लिक करके उसे खोलें. इस ट्यूटोरियल में दिए गए सभी निर्देशों को इस टर्मिनल में चलाया जा सकता है.
  • Cloud Shell टर्मिनल में, यहां दी गई कमांड का इस्तेमाल करके यह देखा जा सकता है कि प्रोजेक्ट की पुष्टि पहले ही हो चुकी है या नहीं.
gcloud auth list
  • अपने प्रोजेक्ट की पुष्टि करने के लिए, Cloud Shell में यह कमांड चलाएं
gcloud config list project
  • प्रोजेक्ट आईडी को कॉपी करें और इसे सेट करने के लिए, इस निर्देश का इस्तेमाल करें
gcloud config set project <YOUR_PROJECT_ID>
  • अगर आपको अपना प्रोजेक्ट आईडी याद नहीं है, तो
gcloud projects list

4. एपीआई चालू करें

इस लैब को चलाने के लिए, हमें कुछ एपीआई सेवाएं चालू करनी होंगी. Cloud Shell में यह कमांड चलाएं.

gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com

पेश है एपीआई

  • Vertex AI API (aiplatform.googleapis.com) की मदद से, Vertex AI प्लैटफ़ॉर्म को ऐक्सेस किया जा सकता है. इससे आपका ऐप्लिकेशन, Gemini मॉडल के साथ इंटरैक्ट कर सकता है. जैसे, टेक्स्ट जनरेट करना, चैट सेशन, और फ़ंक्शन कॉल करना.
  • Cloud Resource Manager API (cloudresourcemanager.googleapis.com) की मदद से, अपने Google Cloud प्रोजेक्ट के मेटाडेटा को प्रोग्राम के हिसाब से मैनेज किया जा सकता है. जैसे, प्रोजेक्ट आईडी और नाम. प्रोजेक्ट की पहचान और अनुमतियों की पुष्टि करने के लिए, अक्सर अन्य टूल और एसडीके को इसकी ज़रूरत होती है.

5. पुष्टि करें कि आपके क्रेडिट लागू कर दिए गए हैं

प्रोजेक्ट सेटअप करने के दौरान, आपने बिना शुल्क के क्रेडिट पाने के लिए आवेदन किया था. इससे आपको Google Cloud की सेवाओं का इस्तेमाल करने की सुविधा मिलती है. क्रेडिट लागू करने पर, "Google Cloud Platform का ट्रायल बिलिंग खाता" नाम का एक नया मुफ़्त बिलिंग खाता बनता है. यह पक्का करने के लिए कि क्रेडिट लागू हो गए हैं, Cloud Shell Editor में यह तरीका अपनाएं

curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3

अगर यह अनुरोध सफल रहा, तो आपको नीचे दिए गए जैसा नतीजा दिखेगा: अगर आपको "प्रोजेक्ट को लिंक कर दिया गया है" दिखता है, तो इसका मतलब है कि आपका बिलिंग खाता सही तरीके से सेट किया गया है. ऊपर दिया गया तरीका अपनाकर, यह देखा जा सकता है कि आपका खाता लिंक है या नहीं. अगर लिंक नहीं है, तो इसे लिंक कर दिया जाएगा. अगर आपने प्रोजेक्ट नहीं चुना है, तो आपको प्रोजेक्ट चुनने के लिए कहा जाएगा. इसके अलावा, प्रोजेक्ट सेटअप में दिए गए चरणों का पालन करके, पहले से ही प्रोजेक्ट चुना जा सकता है. e0268411fd0691a2.png

तीसरी इमेज: लिंक किए गए बिलिंग खाते की पुष्टि

6. Google Antigravity के बारे में जानकारी

Google Antigravity, एआई पर आधारित सॉफ़्टवेयर डेवलपमेंट टूल है. इसे Google DeepMind ने बनाया है. Google Antigravity, सॉफ़्टवेयर डेवलपमेंट के बारे में लंबे समय से इकट्ठा की गई जानकारी का इस्तेमाल करता है. साथ ही, यह एआई की नई टेक्नोलॉजी का इस्तेमाल करता है, ताकि डेवलपर को एआई की मदद से डेवलपमेंट का बेहतर अनुभव मिल सके.

यहां Google Antigravity की कुछ मुख्य सुविधाओं के बारे में बताया गया है.

नीचे दी गई इमेज में, Google Antigravity के बुनियादी एलिमेंट दिखाए गए हैं.

  1. 👉ब्राउज़र खोलें और उसके अलग-अलग हिस्सों को एक्सप्लोर करना शुरू करें.

97fa1980f95fdafa.png

चौथी इमेज: Google Antigravity के बुनियादी एलिमेंट, टेबल 1 में दी गई जानकारी

पहली टेबल: Google Antigravity में मौजूद बुनियादी कॉम्पोनेंट की जानकारी

Component Index

Component Name

Function

1

Agent Manager

Provide access to your agent manager where you can manage all your agents

2

Toggle Agent Pane

Toggles and untoggles your agent pane

3

New Session

Starts a new Agent Conversation while keeping old ones separately.

4

Past Conversations

Retrieve previous conversations

5

Agent Pane

The agent pane where you can have conversation with the AI agent

6

Explorer

File explorer

  1. Gemini 3 और Nanobanana मॉडल पहले से मौजूद हैं: Google Antigravity की मदद से, Google के फ़्लैगशिप मॉडल के सबसे नए वर्शन इस्तेमाल किए जा सकते हैं. जैसे, Gemini 3 और Nanobanana. इन मॉडल के साथ-साथ, Claude जैसे तीसरे पक्ष के मॉडल का भी इस्तेमाल किया जा सकता है.

10476e79399c0f8b.png

पांचवीं इमेज: Google Antigravity 2 में, आपके पास कई मॉडल इस्तेमाल करने का विकल्प होता है. एजेंट की मदद से कोडिंग करना: Antigravity, एजेंट की मदद से कोडिंग करने की सुविधा देता है. इससे डेवलपर को कोडिंग करने में आसानी होती है और वे ज़्यादा काम कर पाते हैं.

  1. प्लानिंग और उपयोगकर्ता का पूरा कंट्रोल: एजेंट, आपके इनपुट के आधार पर टास्क को एक प्लान में बदल देता है. इस प्लान को लागू करने से पहले, एजेंट आपसे इसकी मंज़ूरी लेगा. इससे यह पक्का होता है कि उपयोगकर्ता, टास्क पूरा होने से पहले कभी भी एजेंट के काम करने का तरीका बदल सकता है.
  2. उपयोगकर्ता से मिला सुझाव/राय:एजेंट के काम करने के दौरान, उपयोगकर्ता उसे सुझाव/राय दे सकता है. ऐसा तब किया जा सकता है, जब उपयोगकर्ता को एजेंट को कुछ और निर्देश देने हों.
  3. एक साथ कई एजेंट: अलग-अलग टास्क पर एक साथ काम करने के लिए, एक से ज़्यादा एजेंट बनाए जा सकते हैं. उदाहरण के लिए, एजेंट A आपके पुष्टि करने के लॉजिक को फिर से फ़ैक्टर कर सकता है, एजेंट B नए एपीआई के लिए यूनिट टेस्ट लिख सकता है, और एजेंट C बैकग्राउंड में किसी लाइब्रेरी पर रिसर्च कर सकता है.
  4. एडिटर, टर्मिनल, और ब्राउज़र पर एजेंट: Google Antigravity एजेंट, कई प्लैटफ़ॉर्म पर काम करते हैं.
  5. एडिटर: Google Antigravity एजेंट, कोड लिखते हैं और आपको एडिटर में लिखा गया कोड दिखाते हैं.
  6. टर्मिनल: कुछ निर्देश पूरे करने के लिए, Google Antigravity एजेंट को आपके टर्मिनल का ऐक्सेस चाहिए. यह इस बात पर निर्भर करता है कि आपको कौन-कौनसे काम करने हैं. ज़रूरत पड़ने पर, एजेंट आपके लिए निर्देश लागू कर सकते हैं.
  7. ब्राउज़र: एजेंट आपके ब्राउज़र के साथ भी काम कर सकते हैं. यह खास तौर पर तब मददगार होता है, जब आपको अपने वेब ऐप्लिकेशन की जांच करनी हो. एजेंट, आपके ऐप्लिकेशन को वेब ब्राउज़र में चला सकता है, उसकी जांच कर सकता है, और उसे डीबग कर सकता है.

7. एआई की मदद से, स्पेसिफ़िकेशन के आधार पर डेवलपमेंट करने के बारे में जानकारी

स्पेसिफ़िकेशन के आधार पर डेवलपमेंट, सॉफ़्टवेयर इंजीनियरिंग का एक नया पैराडाइम है. इसमें डेवलपमेंट के पूरे लाइफ़साइकल के दौरान, स्ट्रक्चर्ड स्पेसिफ़िकेशन और एआई एजेंट को मुख्य भूमिका दी जाती है. एआई कोडिंग के लिए आम तौर पर इस्तेमाल किए जाने वाले "प्रॉम्प्ट-एंड-पैच" (ट्रायल और गड़बड़ी) के तरीके के उलट, एसडीडी में बारीकी से ज़रूरी जानकारी इकट्ठा करने, सिस्टम/आर्किटेक्चर डिज़ाइन करने, और टेस्ट प्लान बनाने को प्राथमिकता दी जाती है. यह वॉटरफ़ॉल मॉडल के डिज़ाइन फ़ेज़ से मिलता-जुलता है. हालांकि, यह ऑटोमेशन की मदद से इसे मॉडर्न एजाइल इटरेटिव लूप में इंटिग्रेट करता है. हालांकि, इस प्रोसेस के लिए आपको पहले से ही बारीकी से प्लानिंग करनी होती है और दस्तावेज़ तैयार करने होते हैं, लेकिन यह एक दोहराई जाने वाली प्रोसेस है. ऐसा इसलिए, क्योंकि एआई एजेंट तेज़ी से लागू करने और टेस्टिंग की सुविधा देते हैं. इससे आपको तुरंत सुझाव मिल सकते हैं. इनका इस्तेमाल दस्तावेज़ को बेहतर बनाने के लिए किया जा सकता है.

मुख्य सिद्धांत

इस मॉडल में, इंजीनियर "कोड राइटर" से "सिस्टम आर्किटेक्ट" की भूमिका में आ जाते हैं. समस्याओं और समाधानों के बारे में सटीक जानकारी देने की ज़िम्मेदारी मुख्य रूप से इंसानों की होती है. यह विस्तृत आउटपुट, सिंगल सोर्स ऑफ़ ट्रुथ (एसएसओटी) के तौर पर काम करता है. इसका इस्तेमाल एआई एजेंट, कोडबेस को जनरेट करने, उसकी पुष्टि करने, और उसे बेहतर बनाने के लिए करते हैं.

एसडीडी का लाइफ़साइकल

इस प्रोसेस में ये कॉम्पोनेंट होते हैं. पहले तीन चरण, इंसानों के लिए बनाए गए हैं, जबकि चौथे और पांचवें चरण में एआई एजेंट पर फ़ोकस किया गया है. यह एक दोहराई जाने वाली प्रोसेस है. इसमें एक साइकल के खत्म होने के बाद, मिले सुझाव/राय का इस्तेमाल करके स्पेसिफ़िकेशन को बेहतर बनाया जा सकता है.

  1. ज़रूरतें इकट्ठा करना: कारोबारी नियमों, उपयोगकर्ता की ज़रूरतों, और सिस्टम की सीमाओं की पहचान करना.
  2. आर्किटेक्चरल डिज़ाइन: सिस्टम स्ट्रक्चर, डेटा मॉडल, और इंटिग्रेशन पॉइंट तय करना.
  3. सिस्टम और टेस्ट स्पेसिफ़िकेशन: मशीन से पढ़े जा सकने वाले (या बहुत ज़्यादा स्ट्रक्चर्ड) ऐसे दस्तावेज़ बनाना जिनमें यह बताया गया हो कि सिस्टम क्या करता है और इसकी पुष्टि कैसे की जाएगी.
  4. कोड अपने-आप जनरेट होना: एआई एजेंट, स्पेसिफ़िकेशन का इस्तेमाल करके, प्रोडक्शन के लिए तैयार कोड जनरेट करते हैं.
  5. जांच और पुष्टि: ऑटोमेटेड सुइट, जनरेट किए गए कोड की पुष्टि, टेस्ट स्पेसिफ़िकेशन के हिसाब से करते हैं.

काम करने के मुख्य सिद्धांत

  1. डिज़ाइन-लागू करने का लूप

पहले से पांचवें चरण तक की प्रोसेस, एक सीधी लकीर जैसी नहीं है. यह लगातार मिलने वाले सुझाव, शिकायत या राय पर आधारित होती है. कोड जनरेट करने (चौथा चरण) और टेस्टिंग (पांचवां चरण) की प्रोसेस ज़्यादातर अपने-आप होती है. इसलिए, इंजीनियरिंग टीम अपना ज़्यादातर समय पहले तीन चरणों पर लगा सकती है. जब कोई गड़बड़ी मिलती है या किसी सुविधा में बदलाव होता है, तो इंजीनियर कोड में नहीं, बल्कि स्पेसिफ़िकेशन में बदलाव करता है. इसके बाद, लूप को फिर से ट्रिगर करता है.

  1. मॉड्यूलर ग्रैन्युलैरिटी

सिस्टम की इंटिग्रिटी बनाए रखने के लिए, SDD को मोनोलिथिक ब्लॉक के बजाय फ़ाइन-ग्रेन्ड मॉड्यूल पर लागू किया जाना चाहिए.

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

इस पैराडाइम में, सिस्टम स्पेसिफ़िकेशन ब्लूप्रिंट है और टेस्ट स्पेसिफ़िकेशन जज है. टेस्ट स्पेसिफ़िकेशन से यह पक्का किया जाता है कि जनरेट किया गया कोड, पहले से तय की गई क्वालिटी की ज़रूरी शर्तों के मुताबिक हो. इस पूरी प्रोसेस को मौजूदा सीआई/सीडी पाइपलाइन में आसानी से इंटिग्रेट किया जा सकता है. इससे यह पक्का किया जा सकता है कि सिस्टम की परफ़ॉर्मेंस से जुड़ी ज़रूरी शर्तें भी पूरी हों.

इस लैब में, हम Google Antigravity का इस्तेमाल करके, स्पेसिफ़िकेशन के आधार पर डेवलपमेंट करने के बारे में बुनियादी बातें जानेंगे

8. Google Antigravity की मदद से वेब ऐप्लिकेशन डेवलप करना

इस लैब में, हम एक सामान्य फ़ोटो गैलरी ऐप्लिकेशन बनाएंगे. इमेज जनरेट करने वाला मॉडल, Nanobanana को Google Antigravity में बनाया गया है. हम ज़रूरी इमेज बनाने के लिए, Nanobanana का इस्तेमाल करेंगे.

वेब ब्राउज़र सेटअप करना

वेब ब्राउज़र का इस्तेमाल, ऐप्लिकेशन की अपने-आप जांच करने के लिए किया जाएगा. यहां दिए गए चरणों में, हम ब्राउज़र को सेट अप करेंगे, ताकि Antigravity ऐप्लिकेशन की अपने-आप जांच कर सके.

  1. 👉सबसे ऊपर दाएं कोने में मौजूद, सेटिंग बटन (गियर आइकॉन) पर क्लिक करें. इसके बाद, "Open Antigravity User Settings" चुनें
  2. 👉बाईं ओर मौजूद पैनल में, एजेंट पर क्लिक करें. इसके बाद, ARTIFACT सेक्शन में जाकर, नीति की समीक्षा करें. "हमेशा आगे बढ़ें" चुनें ac522e46ce7d5d4d.png
  3. 👉बाईं ओर मौजूद पैनल में, ब्राउज़र पर क्लिक करें. इसके बाद, पक्का करें कि ब्राउज़र टूल चालू हों. b49bb10330435c2d.png

Google Antigravity की मदद से ऐप्लिकेशन बनाना

  1. 👉 Google Antigravity आइकॉन पर क्लिक करके, Google Antigravity खोलें
  2. 👉अपने निजी फ़ोल्डर में "Gallery" नाम का फ़ोल्डर बनाएं. उदाहरण के लिए, डेस्कटॉप.
  3. 👉Antigravity में Open Folder दबाएं और Gallery फ़ोल्डर चुनें. इससे गैलरी फ़ोल्डर में एक नया वर्कस्पेस खुलेगा.
  4. 👉अगर एजेंट पैनल पहले से खुला नहीं है, तो "एजेंट पैनल टॉगल करें" बटन पर क्लिक करके इसे खोलें. चौथी इमेज में दिए गए दूसरे बटन को देखें.
  5. 👉एजेंट पैन में अपने निर्देश टाइप करके, कोडिंग शुरू की जा सकती है. निर्देशों को ज़्यादा से ज़्यादा साफ़ तौर पर बताना बहुत ज़रूरी है. एजेंट पैनल में यह जानकारी डालें
     **English Version:**

Create a photo granary with following specs.

1. Visual Design & Layout
Title: The gallery must prominently display the title "My photo gallery" at the top.
Modern Grid: Images will be arranged in a responsive grid that spans the full width of the browser.
Clean Aesthetic: Use a minimalist design with consistent spacing (margins/padding) between photos and no heavy borders or shadows.
Image Scaling: Photos will automatically adjust their size to fit any screen (mobile to desktop) while maintaining their focus using modern CSS cropping techniques.

2. Photo Content
Quantity: The page will feature a total of 20 photos. 
Nature Themes: The collection will include a diverse range of nature photography:
Landscape: Mountains, deserts, and forests.
Water: Waterfalls, oceans, and lakes.
Atmosphere: Northern lights, sunsets, and starry skies.
Macro: Close-ups of flowers, leaves, and moss.
Generate all the needed photos

3. Core Functionality (The "Lightroom" Effect)
Full-Screen View: Clicking any photo triggers a "Lightbox" mode where the background dims and the selected image appears in high resolution at the center of the screen.
Manual Navigation:
Right Arrow: Swaps the current view to the next image.
Left Arrow: Swaps the current view to the previous image.
Infinite Loop: Navigation is continuous; moving "next" from the 20th photo returns the user to the 1st photo.
Exit Strategy: Users can exit the full-screen view by clicking a "Close" button or tapping the dimmed area outside the image.

4. Technical Constraints (Strict)
Vanilla JavaScript Only: Absolutely no external libraries or frameworks (like jQuery, React, or Bootstrap). All logic must be written in raw, standard JavaScript.
Native HTML & CSS: Use only the built-in capabilities of modern web browsers to handle the layout and animations.
Zero Dependencies: The app should function perfectly as a standalone project with no need to download or link to outside scripts.

5. Perform the following tests
Open the App in a web browser
Click on the images and see the image opens in the lightbox
Check the navigation

जापानी वर्शन:

以下の仕様でフォトギャラリーを作成してください。
1. ビジュアルデザインとレイアウト
タイトル: ページ上部に「My photo gallery」というタイトルを大きく表示すること。
モダンなグリッド: ブラウザの全幅に広がる、レスポンシブなグリッドレイアウトで画像を配置すること。
クリーンな審美性: ミニマリストなデザインを採用し、写真間の余白（マージン/パディング）を一定に保つこと。重い枠線やドロップシャドウは使用しない。
画像のスケーリング: モダンなCSSのトリミング技術（object-fitなど）を使用し、モバイルからデスクトップまで、フォーカスを維持したまま画面サイズに合わせて自動調整されるようにすること。

2. 写真の内容
枚数: 合計20枚の写真を掲載。
自然のテーマ: 多様な自然写真のコレクションにすること。
風景: 山、砂漠、森林。
水: 滝、海、湖。
空気・雰囲気: オーロラ、夕焼け、星空。
マクロ: 花、葉、苔の接写。
画像生成: 2枚の画像を生成し、それらを繰り返して20箇所に配置すること。

3. コア機能（ライトボックス・エフェクト）
全画面表示: 写真をクリックすると「ライトボックス」モードが起動し、背景が暗転して選択された画像が画面中央に高解像度で表示されること。
手動ナビゲーション:
右矢印: 次の画像に切り替え。
左矢印: 前の画像に切り替え。
無限ループ: ナビゲーションは連続的であること。20枚目の写真で「次へ」を押すと1枚目に戻る仕様。
終了方法: 「閉じる」ボタンをクリックするか、画像外の暗転したエリアをタップすることで全画面表示を終了できること。

4. 技術的制約（厳守）
純正JavaScript限定: 外部ライブラリやフレームワーク（jQuery、React、Bootstrapなど）は一切使用禁止。すべてのロジックは標準のJavaScript（生コード）で記述すること。
ネイティブのHTML & CSS: レイアウトやアニメーションには、モダンブラウザの標準機能のみを使用すること。
依存関係ゼロ: 外部スクリプトのダウンロードやリンクを必要とせず、単体で完全に動作するプロジェクトにすること。

5. 以下のテストを実行します
ウェブブラウザでアプリを開きます
画像をクリックすると、ライトボックスで画像が開きます
ナビゲーションを確認します
  1. 👉'चलाएं' बटन पर क्लिक करें. एजेंट को चलाने के बाद, वह आपको इस तरह का एक्ज़ीक्यूशन प्लान दिखाएगा.

c9da191c4cbcc952.png

पांचवीं इमेज: Antigravity agent, आपको लागू करने का प्लान दिखाएगा

  1. 👉आपको पुष्टि करने के लिए कहा जाएगा. पुष्टि करने के लिए, कृपया नीचे दिए गए तरीके का इस्तेमाल करें. Antigravity, टास्क पूरा करने के लिए Nanobanana और चुने गए एलएलएम मॉडल का इस्तेमाल अपने-आप करेगा.

a92a8d5848528448.png छठी इमेज: Antigravity को कोई निर्देश चलाना है. निर्देश चलाने की अनुमति देने के लिए , चलाएं दबाएं.

82b9cec15b05938b.png इमेज 7: प्रॉम्प्ट मिलने पर, 'सभी स्वीकार करें' दबाएं.

  1. 👉कोड जनरेट होने के बाद, Antigravity ब्राउज़र खोलेगा और टेस्टिंग शुरू करेगा. जांच के बाद, आपको जांच के नतीजे मिलने चाहिए. 7ab8b13a5c3f62a9.png आठवां डायग्राम: Antigravity आपको टेस्ट के नतीजे दिखाएगा
  2. 👉अगर प्रॉम्प्ट किया जाता है, तो एजेंट पैनल में जनरेट किए गए सभी कोड सेव करने के लिए, "सभी स्वीकार करें" दबाएं.
  3. 👉Antigravity के एक्सप्लोरर पैन में , आपको नया जनरेट किया गया कोड दिखेगा. 91770e05b17c1ea1.png नौवीं इमेज: फ़ाइनल कोड
  4. 👉ऐप्लिकेशन की जांच करने के लिए, index.html पर राइट क्लिक करें. इसके बाद, फ़ाइल का पाथ पाएं और उसे वेब ब्राउज़र के यूआरएल बार में चिपकाएं.

da11208a3259d0b.png

दसवीं इमेज: ऐप्लिकेशन की जांच करने के लिए, अपने वेब ब्राउज़र में index.html फ़ाइल का पाथ कॉपी करें

9. डिप्लॉय करने के लिए एनवायरमेंट सेट अप करना

  1. 👉अपना Google Cloud प्रोजेक्ट आईडी पाएं: https://console.cloud.google.com पर जाएं
  2. 👉सबसे ऊपर बाईं ओर मौजूद प्रोजेक्ट आईडी पर क्लिक करें और इसे कहीं कॉपी कर लें. हम इसका इस्तेमाल अगले चरणों में करेंगे. 828046e5e6906764.png इमेज 11: अपना प्रोजेक्ट आईडी कॉपी करें और इसे आने वाले समय में इस्तेमाल करने के लिए कहीं सेव करें
  3. 👉Antigravity में, मेन्यू से टर्मिनल->नया टर्मिनल पर क्लिक करके टर्मिनल खोलें.
  4. 👉हमें एनवायरमेंट वैरिएबल सेट करने होंगे. ये वैरिएबल, Windows और Mac/Linux के लिए अलग-अलग होते हैं. "YOUR CLOUD PROJECT" की जगह, दूसरे चरण में नोट किया गया प्रोजेक्ट आईडी डालें. Windows Powershell का इस्तेमाल करने वालों के लिए सूचना: Powershell को एडमिन मोड में खोलें
#This is only for Powershell users.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

#For Windows (Powershell) follow the following steps.
$env:GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
$env:GOOGLE_CLOUD_LOCATION="us-central1"

#For Windows Command Prompt  follow the following steps.
set GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
set GOOGLE_CLOUD_LOCATION="us-central1"


#for Mac/Linux follow the following steps.
export GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
export GOOGLE_CLOUD_LOCATION="us-central1"
  1. 👉कंसोल में लॉग इन करें. इसके बाद, ब्राउज़र में Google Cloud में लॉग इन करें.
gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR CLOUD PROJECT

630c164efb606a4.png इमेज 12: पुष्टि करना

  1. 👉Cloud Run MCP Server इंस्टॉल करें. Antigravity विंडो में सबसे ऊपर दाईं ओर, "..." पर क्लिक करें. आपको "MCP सर्वर" विकल्प दिखेगा. इस पर क्लिक करें. एमसीपी सर्वर, एजेंट के लिए एक्सटेंशन की तरह होते हैं. इनकी मदद से एजेंट, बाहरी डेटा और टूल ऐक्सेस कर पाते हैं.
  2. 👉सर्च बॉक्स में "Cloud Run" डालें और "Cloud Run" पर क्लिक करें be1a5aa6de8601f1.png इमेज 13: Cloud Run MCP सर्वर
  3. 👉एमसीपी सर्वर के टाइटल के बगल में मौजूद, बैक ऐरो बटन दबाकर एजेंट पैन पर वापस जाएं. अब हम Google Cloud Run के साथ इंटरैक्ट करना शुरू कर सकते हैं. एजेंट पैन में यह जानकारी डालें. इससे Cloud Run MCP सर्वर का इस्तेमाल अपने-आप होना चाहिए. साथ ही, आपको Cloud Run में चल रही सेवाओं की सूची दिखनी चाहिए.
Find me the list of services running in Cloud Run.
  1. 👉ऐप्लिकेशन को डिप्लॉय करने के लिए, यह कमांड इस्तेमाल करें. आम भाषा का इस्तेमाल करके, आसानी से डिप्लॉय किया जा सकता है. Antigravity, डिप्लॉय करने के लिए एमसीपी सर्वर का इस्तेमाल अपने-आप करेगा.
Deploy this gallery static web application to cloud run with service name "photogallery". Use nginx and assume nginx will use port 80
  1. 👉एजेंट को आपको यह दिखाना चाहिए कि ऐप्लिकेशन कहां डिप्लॉय किया गया था. उदाहरण के लिए, https://photogallery-85469421903.us-central1.run.app . Cloud MCP Server की मदद से, अपने वेब ऐप्लिकेशन को Cloud Run पर आसानी से डिप्लॉय किया जा सकता है.

10. व्यवस्थित करें

अब हम उस डेटा को मिटा देते हैं जिसे हमने अभी बनाया है.

  1. 👉हमने अभी जो Cloud Run ऐप्लिकेशन बनाया है उसे मिटाएं. Cloud Run को ऐक्सेस करके, Cloud Run पर जाएं . आपको पिछले चरण में बनाया गया ऐप्लिकेशन दिखना चाहिए. ऐप्लिकेशन के बगल में मौजूद बॉक्स पर सही का निशान लगाएं. इसके बाद, 'मिटाएं' बटन पर क्लिक करें.

db630152398108cb.png इमेज 38: Cloud Run ऐप्लिकेशन को मिटाना

11. नतीजा

बधाई हो! आपने स्पेसिफ़िकेशन के आधार पर डेवलपमेंट करने के तरीकों का पालन करके, Google Antigravity का इस्तेमाल करके ऐप्लिकेशन बना लिया है.आपने ऐप्लिकेशन को Cloud Run पर डिप्लॉय करने का तरीका भी जान लिया है. यह एक अहम उपलब्धि है. इसमें क्लाउड-नेटिव ऐप्लिकेशन के मुख्य लाइफ़साइकल को शामिल किया गया है. इससे आपको अपने मुश्किल सिस्टम को डिप्लॉय करने के लिए एक मज़बूत आधार मिलता है.

रीकैप

इस लैब में, आपने इनके बारे में सीखा:

  • Google Antigravity का इस्तेमाल करके, एक से ज़्यादा एजेंट वाला ऐप्लिकेशन बनाना
  • ऐप्लिकेशन को Cloud Run पर डिप्लॉय करना

काम के संसाधन