פיתוח באמצעות Google Antigravity

1. מבוא

בשיעור Codelab הזה תלמדו על Google Antigravity, פלטפורמת פיתוח אג'נטית שנועדה לעזור לכם לפתח בעידן הסוכנים. Antigravity משמשת כמרכז הבקרה המרכזי של סוכני ה-AI שלכם, ומספקת פלטפורמה מאוחדת להפעלת הפעילויות שלהם, למעקב אחריהן ולתיאום ביניהן.

בשיעור Codelab הזה נשתמש ב-Antigravity כדי ליצור אפליקציות אמיתיות. נעבור ממחקר אינטרנטי פשוט ליצירת אפליקציות פול סטאק ובדיקות יחידה ברמת הארגון.

דרישות מוקדמות:

2. מידע על תרחישים לדוגמה

עכשיו, אחרי שיש לך הבנה בסיסית של Antigravity, נתעמק בכמה תרחישי שימוש כדי לראות אותו בפעולה. חשוב לזכור ש-Antigravity היא פלטפורמה שמבוססת על סוכנים. כלומר, ברוב המקרים אנחנו פשוט נותנים הוראה לסוכן, והסוכן פועל באופן עצמאי, מבצע את המשימה, מבקש הרשאות אם צריך, יוצר את הארטיפקטים ומודיע לנו כשהמשימה מסתיימת. כתוצאה מכך, אנחנו לא יכולים להציג כל פלט של שיחת הסוכן בכל אחד מתרחישי השימוש הבאים. אנחנו נשתף את ההוראות וכמה צילומי מסך נחוצים של התוצאות הצפויות, אבל יכול להיות שהתוצאות שלכם יהיו שונות.

התרחישים לדוגמה שנסקור כוללים אוטומציה של כמה משימות באתרים חיצוניים, יצירה ואימות של מקרים לבדיקת יחידות בפרויקט ופיתוח מלא של אתר. קדימה.

3. המיטב מהחדשות

זהו תרחיש שימוש פשוט, אבל הוא יכול לשמש כבסיס לשימוש בדפדפן אינטרנט כדי לבקר באתרים, לחלץ מידע, לבצע פעולות מסוימות ואז להחזיר נתונים למשתמש.

במקרה הזה, נבקר באתר של חדשות Google ונשלוף ממנו מידע. אבל אתם יכולים להתנסות בקלות באתר שתבחרו ולראות איך זה עובד.

נניח שיש לנו תיקיית שורש שמתחתיה ניצור את הפרויקטים השונים שיוצגו ב-codelab הזה. תיקיית הבסיס הזו במחשב שלנו נקראת agy2-pprojects.

קודם יוצרים תיקייה בשם news-highlights בתיקייה שלמעלה כדי להתחיל מחדש.

מפעילים את Antigravity ויוצרים פרויקט חדש. מוסיפים את התיקייה news-highlights.

מתחילים שיחה חדשה במרחב news-highlights החדש שיובא:

58c4419125240f8f.png

אחר כך נותנים את ההוראה הבאה: "תעבור לכתובת news.google.com ותספק לי את החדשות העיקריות כרגע".

69859175cdace3c2.png

התהליך של הסוכן יתחיל והוא יקבע שהוא צריך לבקר באתר news.google.com ולבקש את ההרשאה שלכם. יכול להיות שתתבקשו כמה פעמים לקרוא כתובות URL, ותוכלו לתת הרשאה לפרויקט הזה וכו'.

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 למעלה או להחליף את מצב החלונית העזר בפינה השמאלית העליונה. תופיע תצוגת Artifact, ותוכלו לראות שתוכנית ההטמעה מוצגת שם לבדיקה.

e12b6e1270405137.png

למטה מוצגת תוכנית הטמעה לדוגמה שנוצרה עבור ההרצה שלנו:

5069ec7ab1ae6310.png

אתם יכולים להוסיף את ההערות שלכם לתוכנית ולתת שוב הנחיה לסוכן, או לאשר את תוכנית ההטמעה כמו שהיא ולעבור לשלב הבא בלחיצה על הלחצן המשך בממשק השיחה.

הסוכן ממשיך ליצור את קובצי קוד המקור, ותוכלו לראות שהוא מעדכן גם ארטיפקט אחר שנקרא Task (משימה). זו רשימה של פעולות או משימות שהמודל זיהה שצריך לבצע כדי להגיע לתוצאה הסופית.

אפשר ללחוץ על המשימה בכל שלב, או להיכנס לרשימת הארטיפקטים כדי לראות את המשימות. דוגמה לכרטיס מוצר:

caf136694efc222f.png

בשלב מסוים במשימה האחרונה, שבו המודל מנסה להריץ ולאמת את האפליקציה, Antigravity יגדיר סביבת Python ויבקש את ההרשאה שלכם להגדיר את הסביבה, להתקין את התלות ועוד. כן, צריך לתת את ההרשאות לפי הצורך.

אחרי שהאימות יסתיים בהצלחה, הפרטים יודגשו, ויוצג גם פריט מידע שנוצר בתהליך פיתוח נוסף, Walkthrough, שכולל פרטים על התכונות שהושלמו, על סטאק תוכנות, על תוצאות האימות ועל ההוראות.

d0f61eb85d348030.png

דוגמה להדרכה:

fb18995f34c286ae.png

למטה מוצג האתר הסופי שאליו מגיעים כשנכנסים לכתובת ה-URL:

2b2ee3149d59da7a.png

כדי לראות את הקוד שנוצר, אפשר ללחוץ על Open IDE בפינה השמאלית העליונה. כך תיפתח Antigravity IDE, שבה אפשר לראות את הקוד שנוצר. צילום מסך לדוגמה מוצג בהמשך:

12798431169dd8cf.png

דברים שכדאי לנסות

  • להוסיף פונקציונליות נוספת לאפליקציה. מספקים לסוכן את הפרטים ורואים איך הוא מבצע את המשימה: קודם הוא משנה את רשימת המשימות, אחר כך את תוכנית ההטמעה וכן הלאה.
  • מוסיפים נתונים נוספים ללוח הזמנים של האירוע. לדוגמה, Add two more talks to the schedule.
  • לבקש מהסוכן ליצור קובץ README או תיעוד נוסף לאפליקציה.

5. יצירת אפליקציית פרודוקטיביות פשוטה

עכשיו ניצור אפליקציית אינטרנט פשוטה של טיימר פומודורו.

יוצרים תיקייה pomodoro-timer. מוודאים שאתם נמצאים ב-Agent Manager, ייבאתם את סביבת העבודה pomodoro-timer ובחרתם אותה. מתחילים עם ההנחיה הבאה:

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

שימו לב איך הוא יוצר את תוכנית ההטמעה, את רשימת המשימות ואז מבצע אותן. חשוב להמשיך לעקוב אחרי התהליך, כי יכול להיות שיהיו מצבים שבהם תתבקשו לבדוק את התוצאות.

דוגמה להרצה עם ההודעה והמשימות של Walkthrough:

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. עדכון המלאי.

אנחנו הולכים להקצות לסוכן את המשימה של יצירת מקרי בדיקה של יחידות, לספק יישומי Mock ולהריץ את הבדיקות כדי לוודא שהן מצליחות.

נפתח את תיקיית סביבת העבודה הספציפית שלנו ותוכלו לראות שעכשיו אפשר להשתמש גם בסמל @ כדי להפנות לקובץ. לדוגמה, אפשר להתחיל להקליד @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 בהצלחה כדי:

  • מחקר עצמאי באינטרנט.
  • פיתוח איטרטיבי של אפליקציות אינטרנט full-stack.
  • כתיבה ואימות של בדיקות יחידה מורכבות באמצעות mocks.

עכשיו אפשר להשתמש ב-Antigravity כדי לבצע את המשימות המורכבות בפרויקטים שלכם.

מסמכי עזר