Google Antigravity की मदद से बनाना

1. परिचय

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

इस कोडलैब में, हम Antigravity का इस्तेमाल करके असल ऐप्लिकेशन बनाएंगे. हम वेब पर की जाने वाली सामान्य रिसर्च से लेकर, फ़ुल-स्टैक ऐप्लिकेशन और एंटरप्राइज़-ग्रेड यूनिट टेस्ट जनरेट करने की सुविधा पर काम करेंगे.

ज़रूरी शर्तें:

  • Antigravity और Antigravity IDE इंस्टॉल और कॉन्फ़िगर किया गया हो.
  • Google Antigravity के बारे में बुनियादी जानकारी. हमारा सुझाव है कि आप यह कोडलैब पूरा करें: Google Antigravity का इस्तेमाल शुरू करना.

2. इस्तेमाल के उदाहरणों के बारे में जानकारी

आपको Antigravity के बारे में बुनियादी जानकारी है. इसलिए, आइए इसके कुछ इस्तेमाल के उदाहरणों पर नज़र डालते हैं. ध्यान दें कि Antigravity, एजेंट फ़र्स्ट प्लैटफ़ॉर्म है. इसका मतलब है कि ज़्यादातर मामलों में, हम सिर्फ़ एजेंट को निर्देश देते हैं. इसके बाद, एजेंट खुद ही अपना काम करता है. अगर ज़रूरी हो, तो अनुमतियां मांगता है, आर्टफ़ैक्ट बनाता है, और काम पूरा होने पर हमें सूचना देता है. इस वजह से, हम यहां दिए गए हर इस्तेमाल के उदाहरण में, एजेंट की बातचीत का हर आउटपुट नहीं दिखा सकते. हम आपको निर्देश और अनुमानित नतीजों के कुछ ज़रूरी स्क्रीनशॉट शेयर करेंगे. हालांकि, ऐसा हो सकता है कि आपके नतीजे थोड़े अलग हों.

हम इस्तेमाल के ऐसे उदाहरणों के बारे में बताएंगे जिनमें बाहरी साइटों की मदद से कुछ टास्क अपने-आप पूरे हो जाते हैं. साथ ही, किसी प्रोजेक्ट के लिए यूनिट टेस्ट केस जनरेट और उनकी पुष्टि की जा सकती है. इसके अलावा, पूरी वेबसाइट भी डेवलप की जा सकती है. चलिए।

3. खबरों की हाइलाइट

यह इस्तेमाल का एक सामान्य उदाहरण है. हालांकि, यह एक ऐसा आधार हो सकता है जिसकी मदद से वेब ब्राउज़र का इस्तेमाल करके वेबसाइटों पर जाया जा सकता है, जानकारी निकाली जा सकती है, कुछ कार्रवाइयां की जा सकती हैं, और फिर उपयोगकर्ता को डेटा वापस भेजा जा सकता है.

इस मामले में, हम Google News की साइट पर जाएंगे और वहां से कुछ जानकारी निकालेंगे. हालांकि, अपनी पसंद की किसी साइट पर आसानी से एक्सपेरिमेंट किया जा सकता है और देखा जा सकता है कि वह कैसा काम करती है.

हम मान लेंगे कि हमारे पास एक रूट फ़ोल्डर है. इसके तहत, हम अलग-अलग प्रोजेक्ट बनाएंगे. इन प्रोजेक्ट के बारे में हम इस कोडलैब में जानेंगे. हमारे डिवाइस पर मौजूद इस रूट फ़ोल्डर का नाम agy2-pprojects है.

सबसे पहले, ऊपर दिए गए फ़ोल्डर में news-highlights नाम का एक फ़ोल्डर बनाएं, ताकि नए सिरे से काम शुरू किया जा सके.

Antigravity लॉन्च करें और एक नया प्रोजेक्ट बनाएं. इसमें news-highlights फ़ोल्डर जोड़ें.

नई इंपोर्ट की गई news-highlights workspace में नई बातचीत शुरू करने के लिए:

58c4419125240f8f.png

इसके बाद, यह निर्देश दें: "news.google.com पर जाओ और मुझे अभी की मुख्य खबरें दिखाओ."

69859175cdace3c2.png

इससे एजेंट की प्रोसेस शुरू हो जाएगी. साथ ही, यह तय हो जाएगा कि उसे news.google.com साइट पर जाना है और आपसे अनुमति लेनी है. यह यूआरएल पढ़ने के लिए, आपसे कई बार अनुरोध कर सकता है. आपके पास इस प्रोजेक्ट के लिए अनुमति देने का विकल्प होता है.

85f14eddde22704c.png

आपको जवाब जनरेट करने की प्रोसेस पर ध्यान देना चाहिए. साथ ही, यह देखना चाहिए कि एजेंट अपना काम कैसे करता है. यहां एजेंट के काम करने का एक उदाहरण दिया गया है:

7be51d200fb1296f.png

इन्हें आज़माएँ

  • इसे समझने के बाद, ऐसी वेबसाइट चुनें जो उपलब्ध हो और जिससे आपको एजेंट को कुछ डेटा पाने/खास जानकारी पाने के लिए भेजना हो. किसी ऐसी वेबसाइट के बारे में सोचें जिसमें डैशबोर्ड और चार्ट मौजूद हैं. इसके बाद, उससे कुछ वैल्यू चुनने के लिए कहें.
  • यह प्रॉम्प्ट आज़माएँ: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. Python + Flask की मदद से डाइनैमिक वेबसाइट जनरेट करना

अब हम पूरा वेब ऐप्लिकेशन जनरेट करने के लिए आगे बढ़ते हैं. हम जिस वेब ऐप्लिकेशन को बनाने जा रहे हैं वह एक ऐसी साइट है जो एक दिन के टेक्निकल इवेंट के बारे में जानकारी देती है. इस इवेंट में, दिन भर अलग-अलग स्पीकर अपनी बात रखते हैं.

एक बार फिर, conference-website नाम का एक नया फ़ोल्डर बनाएं. पक्का करें कि आपने Antigravity Agent इंटरफ़ेस में एक नया प्रोजेक्ट बनाया हो और उसमें conference-website फ़ोल्डर जोड़ा हो.

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

I would like to generate a website that is a 1-day technical conference informational site.

The website should have the following functionality:
        1. A home page that shows the current date, location, schedule and time table.
        2. The 1-day event is a list of 8 talks in total.
        3. Each talk has 1 or 2 max. speakers. 
        4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
        5. Each speaker has a First Name, Last Name and LinkedIn url.
        6. Allow for users to search by category, speaker, title.
        7. Give a lunch break of 60 minutes.
        8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
        9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript. 
        10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes. 
11. Launch the web application for me to review. 

Antigravity, अनुरोध का विश्लेषण करेगा और सबसे पहले लागू करने का प्लान बनाएगा. यह आपके लिए implementation_plan.md नाम का एक मुख्य आर्टफ़ैक्ट बनाएगा. इससे आपको यह समझने में मदद मिलेगी कि यह प्रॉम्प्ट में बताई गई ज़रूरी शर्तों को पूरा करने के लिए, कैसे प्लान करता है. यहां आउटपुट का एक उदाहरण दिया गया है:

8f516fd94f4ad57.png

आगे बढ़ें पर क्लिक करने से पहले, लागू करने का प्लान देखें. इसके लिए, ऊपर मौजूद implementation_plan.md फ़ाइल के लिंक पर क्लिक करें या सबसे ऊपर दाईं ओर मौजूद, सहायक पैनल को टॉगल करें. इससे आपको आर्टफ़ैक्ट व्यू दिखेगा. साथ ही, आपको दिखेगा कि लागू करने का प्लान आपकी समीक्षा के लिए उपलब्ध है.

e12b6e1270405137.png

यहां दिए गए उदाहरण में, हमारे रन के लिए जनरेट किया गया सैंपल इंप्लीमेंटेशन प्लान दिखाया गया है:

5069ec7ab1ae6310.png

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

एजेंट, सोर्स कोड फ़ाइलें जनरेट करना जारी रखता है. साथ ही, आपको यह भी दिखेगा कि वह टास्क नाम के दूसरे आर्टफ़ैक्ट को अपडेट करता है. यह उन कार्रवाइयों या टास्क की सूची होती है जिन्हें फ़ाइनल नतीजे पाने के लिए पूरा करना होता है.

टास्क देखने के लिए, टास्क पर कभी भी क्लिक किया जा सकता है. इसके अलावा, टास्क देखने के लिए आर्टफ़ैक्ट की सूची पर भी जाया जा सकता है. यहां एक सैंपल लिस्टिंग दिखाई गई है:

caf136694efc222f.png

आखिरी टास्क के दौरान, जब Antigravity ऐप्लिकेशन को चलाने और उसकी पुष्टि करने की कोशिश करता है, तब वह Python एनवायरमेंट सेट अप करेगा. इसके लिए, उसे आपकी अनुमति की ज़रूरत होगी. साथ ही, उसे डिपेंडेंसी इंस्टॉल करने और अन्य काम करने की अनुमति भी चाहिए होगी. ज़रूरत के मुताबिक अनुमतियां दें.

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

d0f61eb85d348030.png

यहां सिलसिलेवार तरीके से दिए गए निर्देशों का एक सैंपल दिखाया गया है:

fb18995f34c286ae.png

यूआरएल पर जाने के बाद, हमें यह वेबसाइट मिली:

2b2ee3149d59da7a.png

अगर आपको जनरेट किया गया कोड देखना है, तो सबसे ऊपर दाएं कोने में मौजूद, आईडीई खोलें पर क्लिक करें. इससे Antigravity IDE खुल जाएगा. इसका इस्तेमाल करके, जनरेट किया गया कोड देखा जा सकता है. यहां एक सैंपल स्क्रीनशॉट दिखाया गया है:

12798431169dd8cf.png

इन्हें आज़माएँ

  • ऐप्लिकेशन में कोई अतिरिक्त सुविधा जोड़ें. एजेंट को जानकारी दें और देखें कि वह अपने टास्क को कैसे पूरा करता है. इसके लिए, वह सबसे पहले काम की सूची में बदलाव करता है. इसके बाद, लागू करने के प्लान में बदलाव करता है.
  • इवेंट के शेड्यूल में अतिरिक्त डेटा जोड़ें. उदाहरण के लिए, Add two more talks to the schedule.
  • एजेंट से ऐप्लिकेशन के लिए README या ज़्यादा दस्तावेज़ जनरेट करने के लिए कहें.

5. बेहतर तरीके से काम करने में मदद करने वाला कोई सामान्य ऐप्लिकेशन जनरेट करना

अब हम एक सामान्य Pomodoro टाइमर वेब ऐप्लिकेशन जनरेट करने जा रहे हैं.

pomodoro-timer फ़ोल्डर बनाएं. पक्का करें कि आप Agent Manager में हों और आपने pomodoro-timer वर्कस्पेस को इंपोर्ट करके चुना हो. इस प्रॉम्प्ट का इस्तेमाल करें:

Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.

ध्यान दें कि यह कैसे लागू करने का प्लान और काम की सूची बनाता है. फ़्लो पर ध्यान दें. ऐसा हो सकता है कि कुछ मामलों में, आपको समीक्षा करने के लिए कहा जाए.

यहां, वॉकट्रू मैसेज और टास्क के साथ एक सैंपल रन दिखाया गया है:

df0db367ba475db2.png

फ़ाइनल ऐप्लिकेशन ऐसा दिखता है. यह काफ़ी अच्छा लग रहा है.

ef8ac58d0677e56.png

इन्हें आज़माएँ

  • ऐप्लिकेशन में कुछ इमेज जोड़ें. उदाहरण के लिए, ऐप्लिकेशन में टाइमर की इमेज जोड़ें.
  • आपको जिस ऐप्लिकेशन को जनरेट करना है उसके कुछ वर्शन आज़माकर देखें. स्टाइल और इमेज के साथ एक्सपेरिमेंट करें. साथ ही, बदलाव करने के लिए कहें वगैरह.

6. यूनिट टेस्ट, मॉक स्टब जनरेट करना और टेस्ट की पुष्टि करना

यहां हम जिस आखिरी इस्तेमाल के उदाहरण को आज़माएंगे वह यह है कि हमारे पास मौजूद किसी कोड फ़ाइल के लिए यूनिट टेस्ट जनरेट करना. साथ ही, एजेंट को टेस्ट चलाने और उनकी पुष्टि करने के लिए भी कहना.

इसके लिए, हम एक ऐसा वर्कस्पेस बनाएंगे जिसमें सिर्फ़ एक Python फ़ाइल होगी. इसे नीचे दिखाया गया है:

from typing import Dict

# --- Custom Exceptions ---
class InventoryShortageError(Exception):
    """Raised when there is not enough item stock."""
    pass

class PaymentFailedError(Exception):
    """Raised when the payment gateway rejects the transaction."""
    pass

class InvalidOrderError(Exception):
    """Raised when the order violates business rules."""
    pass

# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
    def get_stock(self, product_id: str) -> int:
        """Connects to DB to check stock."""
        raise NotImplementedError("Real connection required")

    def decrement_stock(self, product_id: str, quantity: int):
        """Connects to DB to reduce stock."""
        raise NotImplementedError("Real connection required")

class PaymentGateway:
    def charge(self, amount: float, currency: str) -> bool:
        """Connects to Stripe/PayPal."""
        raise NotImplementedError("Real connection required")

# --- Main Business Logic ---
class Order:
    def __init__(self, 
                 inventory_service: InventoryService, 
                 payment_gateway: PaymentGateway,
                 customer_email: str,
                 is_vip: bool = False):
        
        self.inventory = inventory_service
        self.payment = payment_gateway
        self.customer_email = customer_email
        self.is_vip = is_vip
        self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
        self.is_paid = False
        self.status = "DRAFT"

    def add_item(self, product_id: str, price: float, quantity: int = 1):
        """Adds items to the cart. Rejects invalid prices or quantities."""
        if price < 0:
            raise ValueError("Price cannot be negative")
        if quantity <= 0:
            raise ValueError("Quantity must be greater than zero")

        if product_id in self.items:
            self.items[product_id]['qty'] += quantity
        else:
            self.items[product_id] = {'price': price, 'qty': quantity}

    def remove_item(self, product_id: str):
        """Removes an item entirely from the cart."""
        if product_id in self.items:
            del self.items[product_id]

    @property
    def total_price(self) -> float:
        """Calculates raw total before discounts."""
        return sum(item['price'] * item['qty'] for item in self.items.values())

    def apply_discount(self) -> float:
        """
        Applies business logic:
        1. VIPs get flat 20% off.
        2. Regulars get 10% off if total > 100.
        3. No discount otherwise.
        """
        total = self.total_price
        
        if self.is_vip:
            return round(total * 0.8, 2)
        elif total > 100:
            return round(total * 0.9, 2)
        
        return round(total, 2)

    def checkout(self):
        """
        Orchestrates the checkout process:
        1. Validates cart is not empty.
        2. Checks stock for all items.
        3. Calculates final price.
        4. Charges payment.
        5. Updates inventory.
        """
        if not self.items:
            raise InvalidOrderError("Cannot checkout an empty cart")

        # 1. Check Inventory Logic
        for product_id, data in self.items.items():
            available_stock = self.inventory.get_stock(product_id)
            if available_stock < data['qty']:
                raise InventoryShortageError(f"Not enough stock for {product_id}")

        # 2. Calculate Final Price
        final_amount = self.apply_discount()

        # 3. Process Payment
        try:
            success = self.payment.charge(final_amount, "USD")
            if not success:
                raise PaymentFailedError("Transaction declined by gateway")
        except Exception as e:
            # Catching generic network errors from the gateway
            raise PaymentFailedError(f"Payment gateway error: {str(e)}")

        # 4. Decrement Stock (Only occurs if payment succeeded)
        for product_id, data in self.items.items():
            self.inventory.decrement_stock(product_id, data['qty'])

        self.is_paid = True
        self.status = "COMPLETED"
        
        return {"status": "success", "charged_amount": final_amount}

पक्का करें कि आपके पास ऊपर दी गई Python फ़ाइल (order_service.py) स्थानीय तौर पर नए फ़ोल्डर में उपलब्ध हो. साथ ही, आपने Antigravity में बातचीत के लिए वह प्रोजेक्ट खोला हो.

यह ऑर्डर करने की एक सामान्य सेवा है. इसमें checkout फ़ंक्शन के तहत ये मुख्य सुविधाएं मिलती हैं:

  1. यह कुकी, इस बात की पुष्टि करती है कि कार्ट खाली नहीं है.
  2. सभी आइटम के लिए स्टॉक की जानकारी देखें.
  3. यह कुकी, आखिरी कीमत का हिसाब लगाती है.
  4. पेमेंट के लिए शुल्क.
  5. इन्वेंट्री अपडेट करता है.

हम एजेंट को यूनिट टेस्ट केस जनरेट करने, मॉक इंप्लीमेंटेशन उपलब्ध कराने, और टेस्ट करने का काम असाइन करने जा रहे हैं. इससे यह पक्का किया जा सकेगा कि टेस्ट सफल हों.

हम अपना फ़ाइल फ़ोल्डर खोलेंगे. आपको दिखेगा कि अब फ़ाइल का रेफ़रंस देने के लिए, @ सिंबल का इस्तेमाल भी किया जा सकता है. उदाहरण के लिए, @order टाइप करने पर, हमें order_service.py फ़ाइल दिखनी चाहिए.

c4331bee03c5512c.png

हम आपको एक ऐसा टास्क दे सकते हैं जिससे हमें इस फ़ाइल को समझने में मदद मिलेगी. यह प्रॉम्प्ट दें:

Explain the @order_service.py file

इससे यह पता चलता है कि यह फ़ाइल क्या है:

269ff8450d813970.png

हम प्रॉम्प्ट के ज़रिए, इसे बेहतर विज़ुअलाइज़ेशन जनरेट करने के लिए कह सकते हैं:

Can you visually show this class for better understanding

Antigravity बताता है कि टास्क पूरा हो गया है और उसने एक ऐसा आर्टफ़ैक्ट जनरेट किया है जिसमें विज़ुअलाइज़ेशन शामिल है:

ea389f494786a9ad.png

यहां दिए गए उदाहरण में, विज़ुअलाइज़ेशन को देखा जा सकता है:

70e6822a86f74de9.png

और ये भी:

3ebd94221655a03f.png

हमारा अगला चरण, यूनिट टेस्ट जनरेट करना है. इसके बाद, हम एजेंट से इसे आज़माने के लिए कहेंगे. मैंने यह प्रॉम्प्ट दिया:

generate unit tests for this module and test it out with mock implementations.

इसने अपना काम किया, टेस्ट जनरेट किए, उन्हें चलाया, और एक बग को भी ठीक किया. इसका आउटपुट यहां दिया गया है:

788cd07aadd09a4b.png

इसने जो फ़ाइलें जनरेट की हैं उनमें से एक टेस्ट फ़ाइल भी है. इसका स्क्रीनशॉट यहां दिया गया है:

7a79d27eb34f0530.png

इन्हें आज़माएँ

अपना कोड लें और देखें कि एजेंट से क्या-क्या काम कराया जा सकता है. जैसे, ज़्यादा फ़ंक्शन जोड़ना या कोड के कुछ हिस्सों को फिर से व्यवस्थित करना.

7. बधाई हो

बधाई हो! आपने Google Antigravity का इस्तेमाल करके ये काम किए हैं:

  • वेब पर अपने-आप रिसर्च करना.
  • फ़ुल-स्टैक वेब ऐप्लिकेशन बनाएं और उन्हें बेहतर बनाएं.
  • मॉक का इस्तेमाल करके, मुश्किल यूनिट टेस्ट लिखें और उनकी पुष्टि करें.

अब आपके पास अपने प्रोजेक्ट के लिए, Antigravity की मदद लेने का विकल्प है.

रेफ़रंस दस्तावेज़