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

1. מבוא

‫Google Antigravity (שנקרא בהמשך המסמך Antigravity) הוא סביבת פיתוח משולבת (IDE) מבוססת-סוכן מבית Google. ב-Getting started with Antigravity codelab (תחילת העבודה עם Antigravity codelab) אפשר ללמוד את היסודות של Antigravity. בשיעור הזה נשתמש ב-Antigravity כדי ליצור אפליקציות אמיתיות. נעבור ממחקר אינטרנטי פשוט ליצירת אפליקציות מלאות ובדיקות יחידה ברמה של ארגונים.

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

• ‫Google Antigravity מותקן ומוגדר.
• הבנה בסיסית של Google Antigravity. מומלץ להשלים את ה-Codelab: Getting Started with Google Antigravity.

‫לזיכויים ב-Google Cloud: כדי לעזור לכם להשתמש ב-Antigravity עם פרויקטים ב-Google Cloud, אתם יכולים לממש את הזיכויים בחינם ב-Google Cloud באמצעות הקישור הזה. כדי להפעיל את הקרדיט וליצור פרויקט חדש, אפשר לפעול לפי ההוראות כאן.

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

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

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

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

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

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

מוודאים שאתם נמצאים ב-Agent Manager ושהאפשרות Playground נבחרה, כמו שמוצג בהמשך:

ואז נותנים את ההוראה הבאה:

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

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

דוגמה להרצה על ידי הסוכן:

שימו לב שמימין מופיע תהליך החשיבה. אפשר גם לגלול בין הנקודות ולצפות בהפעלה ובנתונים אחרים.

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

• אחרי שמבינים את זה, בוחרים אתר שזמין ושרוצים שהסוכן ילך אליו ויביא ממנו נתונים או יסכם אותם. תחשבו על אתר שיש בו מרכזי בקרה ותרשימים, ותבקשו ממנו לבחור כמה ערכים.
• אפשר לנסות את ההנחיה הבאה: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. יצירת אתר דינמי באמצעות Python + Flask

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

שוב, מוודאים שאתם נמצאים ב-Agent Manager וסימנתם את Playground.

מזינים את ההנחיה הבאה:

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. 

אתם יכולים להתחיל את השיחה עם ההנחיה שלמעלה:

במהלך ביצוע המשימה, הסוכן ימשיך ליצור את הארטיפקטים:

• תוצר פיתוח של משימה
• פריט הטמעה
• פריט הדרכה מפורטת

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

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

ולבסוף, יש את ארטיפקט ההדרכה המפורטת. הוא מכיל את כל הפעולות שהסוכן ביצע, כפי שמוצג בהמשך:

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

אם עוברים אל Editor, אפשר לראות במסך שהוא מכיל את התיקייה שבה נוצרת אפליקציית Python Flask. תראו גם שהסמל Agent mode מתויג בצד שמאל, ואפשר להמשיך את השיחה גם שם.

נניח שאנחנו רוצים להוסיף עוד הרצאות לאירוע. אנחנו יכולים להישאר בכלי העריכה ובחלונית הסוכן, ולתת הוראה כמו Add two more talks to the schedule.

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

אם רוצים, אפשר לחזור אל Agent Manager. התהליך הזה יעזור לכם להבין את התהליך של המעבר מניהול סוכנים לעריכה, ביצוע שינויים בהתאם וכן הלאה.

הערה: במהלך ביצוע המשימה הזו, הסוכן ניסה להפעיל את שרת Flask ביציאה 5000, שהייתה בשימוש במכונה הנוכחית. הוא המשיך לנסות את הפורט החופשי הבא, עד שהחליט להשתמש ב-8080 והצליח להפעיל את השרת.

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

• להוסיף פונקציונליות נוספת לאפליקציה. מספקים את הפרטים לסוכן ורואים איך הוא מבצע את המשימה. קודם הוא משנה את רשימת המשימות, אחר כך את תוכנית ההטמעה וכן הלאה.
• מבקשים מ-Agent ליצור קובץ README או תיעוד נוסף לאפליקציה.

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

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

מוודאים שאתם נמצאים ב-Agent Manager ובחרתם את Playground. מזינים את ההנחיה הבאה:

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

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

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

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

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

Add an image to the application that displays a timer.

כתוצאה מכך, הנציג הוסיף משימה חדשה לארטיפקט Task:

הוא יצר תמונה תוך כדי ביצוע המשימה:

לבסוף, האפליקציה יצרה את התמונה שביקשנו:

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

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

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 שלמעלה נמצא בתיקייה במחשב וטוענים אותו כסביבת עבודה ב-Antigravity.

זהו שירות הזמנות פשוט עם הפונקציונליות העיקרית הבאה בפונקציית checkout:

1. בודק שהעגלה לא ריקה.
2. בודקים את המלאי של כל הפריטים.
3. חישוב המחיר הסופי.
4. תשלום חיובים.
5. מעדכן את המלאי.

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

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

מופיע הסבר על הקובץ:

אפשר לבקש ממנו ליצור תרשים טוב יותר באמצעות ההנחיה:

Can you visually show this class for better understanding

השלב הבא הוא ליצור את בדיקות היחידה ולבקש מהסוכן לבצע אותן. ההנחיה שנתתי:

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

הוא יצר את תוצר הפיתוח (Artifact) הבא של המשימה והמשיך למשימה הבאה.

אפשר גם לראות את פרטי הבדיקות שהכלי הריץ:

אחד מהקבצים שנוצרו היה גם קובץ הבדיקה. צילום מסך של ההודעה מוצג בהמשך:

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

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

7. מזל טוב

מעולה! השתמשת בהצלחה ב-Google Antigravity כדי:

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

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

מאמרי עזרה

• ‫Codelab : תחילת העבודה עם Google Antigravity
• האתר הרשמי : https://antigravity.google/
• תיעוד: https://antigravity.google/docs
• תרחישי שימוש : https://antigravity.google/use-cases
• הורדה : https://antigravity.google/download
• ערוץ YouTube של Google Antigravity : ‏ https://www.youtube.com/@googleantigravity