1. Introduzione
Google Antigravity (di seguito denominato Antigravity) è un IDE agentico di Google. Nel codelab Introduzione ad Antigravity puoi imparare le nozioni di base di Antigravity. In questo codelab utilizzeremo Antigravity per creare applicazioni reali. Passeremo dalla semplice ricerca web alla generazione di applicazioni full-stack e test delle unità di livello aziendale.
Prerequisiti:
- Google Antigravity installato e configurato.
- Conoscenza di base di Google Antigravity. Ti consigliamo di completare il codelab: Introduzione a Google Antigravity.
2. Informazioni sui casi d'uso
Ora che hai una conoscenza di base di Antigravity, esaminiamo alcuni casi d'uso per vederlo in azione. Tieni presente che Antigravity è una piattaforma che dà la priorità agli agenti. Ciò significa che, nella maggior parte dei casi, diamo semplicemente un'istruzione all'agente, che poi svolge il suo compito, chiede le autorizzazioni se necessario, produce gli artefatti e ci avvisa quando l'attività è completata. Di conseguenza, non possiamo produrre ogni singolo output della conversazione dell'agente in ciascuno dei seguenti casi d'uso. Condivideremo le istruzioni e alcuni screenshot necessari dei risultati previsti, ma i tuoi risultati potrebbero essere leggermente diversi.
I casi d'uso che tratteremo vanno dall'automazione di alcune attività con siti esterni alla generazione e alla verifica di casi di test delle unità per un progetto, fino allo sviluppo di un sito web completo. Iniziamo.
3. Approfondimenti delle notizie
Questo è un caso d'uso semplice, ma può essere la base per utilizzare il browser web per visitare i siti web, estrarre informazioni, eseguire alcune azioni e quindi restituire i dati all'utente.
In questo caso, visiteremo il sito di Google News ed estrarremo alcune informazioni. Tuttavia, puoi sperimentare facilmente con un sito di tua scelta e vedere come va.
Assicurati di trovarti in Agent Manager e di aver selezionato Playground, come mostrato di seguito:
Poi dai la seguente istruzione: "visit news.google.com and get me the highlights at the moment."
In questo modo, verrà avviato il processo dell'agente, che determinerà la necessità di avviare il browser e così via. Presta attenzione al processo di Ragionamento e osserva come l'agente svolge il suo lavoro. Se tutto va bene, dovrebbe avviare il browser Antigravity e visitare il sito come mostrato di seguito. Il bordo blu intorno al sito indica che l'agente sta controllando il browser e navigando nel sito per ottenere le informazioni.
Al termine del lavoro, dovresti vedere anche la generazione degli artefatti, come mostrato di seguito:
Di seguito è riportata un'esecuzione di esempio dell'agente:
Tieni presente che a sinistra è presente il processo di pensiero. Puoi anche scorrere i punti e visualizzare la riproduzione e altri dati.
Cosa provare
- Una volta compreso questo concetto, scegli un sito web disponibile da cui vuoi che l'agente recuperi/riassuma alcuni dati. Prendi in considerazione un sito web che sai che contiene dashboard e grafici e chiedi all'agente di scegliere alcuni valori.
- Prova il seguente prompt:
Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.
4. Generare un sito web dinamico con Python + Flask
Ora passiamo alla generazione di un'applicazione web completa. L'applicazione web che creeremo è un sito che fornisce informazioni su un evento tecnico di un giorno, con interventi di più relatori durante la giornata.
Ancora una volta, assicurati di trovarti in Agent Manager e di aver selezionato Playground. Per assicurarti di iniziare da zero, avvia una nuova chat di Playground e scegli la modalità Planning per assicurarti che l'agente pianifichi prima di eseguire.
Dai il seguente prompt:
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.
Puoi iniziare la conversazione con il prompt riportato sopra:
Man mano che l'agente svolge il suo compito, procederà con la creazione degli artefatti:
- Artefatto dell'attività
- Artefatto di implementazione
- Artefatto della procedura dettagliata
L'artefatto dell'attività riportato di seguito è la sequenza iniziale di attività che l'agente ha decifrato in base all'attività assegnata. Di seguito è riportato uno screenshot di esempio dell'esecuzione:
Poi fai clic sull'artefatto Piano di implementazione. Di seguito è riportato uno screenshot di esempio:
Infine, hai l'artefatto Procedura dettagliata. Contiene tutto ciò che l'agente ha fatto, come mostrato di seguito:
Tieni presente che ha avviato il server e mi ha fornito l'URL, su cui ho fatto clic e ho l'applicazione. Di seguito è riportato uno screenshot di esempio:
Se passi all'Editor, nella schermata vedrai la cartella in cui viene generata l'applicazione Python Flask. Noterai anche che la Agent mode è taggata a destra e puoi continuare la conversazione anche lì.
Ora, supponiamo di voler aggiungere altri interventi all'evento. Possiamo rimanere nell'editor e nel riquadro dell'agente e dare un'istruzione come Add two more talks to the schedule.
In questo modo, l'agente analizzerà il requisito, aggiornerà l'attività e il piano di implementazione e poi convaliderà anche la funzionalità aggiornata. Di seguito è riportata una conversazione di esempio:
Se vuoi, puoi tornare ad Agent Manager. Questa procedura dovrebbe aiutarti a comprendere il processo di passaggio da Agent Manager all'editor, apportare le modifiche di conseguenza e così via.
Cosa provare
- Aggiungi altre funzionalità che ti interessano all'applicazione. Fornisci i dettagli all'agente e osserva come svolge il suo compito modificando prima l'elenco di attività, poi il piano di implementazione e così via.
- Chiedi all'agente di generare un file README o altra documentazione per l'applicazione.
5. Generare una semplice app di produttività
Ora genereremo una semplice applicazione web per il timer Pomodoro.
Assicurati di trovarti in Agent Manager e di aver selezionato Playground. Dai il seguente prompt:
Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.
Osserva come crea l'elenco delle attività e il piano di implementazione e poi li esegue. Continua a prestare attenzione al flusso, potrebbero esserci situazioni in cui ti verrà chiesto di esaminare. Di seguito è riportata un'esecuzione di esempio.
In questo caso, dovrebbe anche avviare il browser Antigravity, eseguire i propri test e poi confermare che i test sono riusciti. Una delle cose che ha generato è un artefatto multimediale che contiene il video della verifica. Questo è un ottimo modo per vedere cosa ha testato. Ho anche suggerito alcune modifiche di stile che non sono state applicate e l'agente è riuscito a farlo.
L'app finale era simile a quella riportata di seguito e sembrava piuttosto buona.
Che ne dici di aggiungere una bella immagine del timer all'applicazione? Tutto ciò che dobbiamo fare è dare un'istruzione di follow-up come indicato di seguito:
Add an image to the application that displays a timer.
In questo modo, l'agente ha aggiunto una nuova attività all'artefatto dell'attività:
Poi ha generato un'immagine mentre svolgeva l'attività:
Infine, l'app aveva l'immagine come richiesto:
Cosa provare
- Tieni presente che lo sfondo dell'icona della clessidra nell'applicazione non è trasparente. Prova a chiedere all'agente di renderlo trasparente.
- Prova alcune varianti di qualsiasi applicazione che vuoi generare. Gioca con gli stili, le immagini, chiedi modifiche e così via.
6. Generare test delle unità, stub di simulazione e convalidare i test
L'ultimo caso d'uso che proveremo qui è quello di generare test delle unità per un file di codice specifico che abbiamo e di chiedere all'agente di eseguire e convalidare i test.
Per questo, avremo uno spazio di lavoro con un singolo file Python, come mostrato di seguito:
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}
Assicurati di avere il file Python riportato sopra localmente in una cartella e di caricarlo come spazio di lavoro in Antigravity.
Si tratta di un semplice servizio di ordini che ha la seguente funzionalità chiave nella funzione checkout:
- Verifica che il carrello non sia vuoto.
- Controlla le scorte di tutti gli articoli.
- Calcola il prezzo finale.
- Addebita il pagamento.
- Aggiorna l'inventario.
Assegneremo all'agente il compito di generare scenari di test, fornire implementazioni di simulazione ed eseguire i test per assicurarci che siano riusciti.
Apriremo la cartella dello spazio di lavoro specifico e noterai che ora possiamo utilizzare anche il simbolo @ per fare riferimento al file. Ad esempio, potremmo fare quanto segue:
Viene visualizzata una spiegazione di cosa è questo file:
Possiamo chiedere di generare una visualizzazione migliore tramite il prompt:
Can you visually show this class for better understanding
Il passaggio successivo consiste nel generare i test delle unità e chiedere all'agente di provarli. Do il seguente prompt:
generate unit tests for this module and test it out with mock implementations.
Ha generato il seguente artefatto dell'attività e ha svolto il suo compito.
Puoi anche visualizzare i dettagli dei test eseguiti:
Uno dei file generati era anche il file di test. Di seguito è riportato uno screenshot:
Cosa provare
Prendi il tuo codice e vedi cosa puoi chiedere all'agente di fare, dall'aggiunta di altre funzionalità al refactoring di parti del codice.
7. Complimenti
Complimenti! Hai utilizzato correttamente Google Antigravity per:
- Eseguire ricerche sul web in modo autonomo.
- Creare e iterare applicazioni web full-stack.
- Generare asset e perfezionare l'estetica dell'interfaccia utente.
- Scrivere e convalidare test delle unità complessi con simulazioni.
Ora è tutto pronto per lasciare che Antigravity gestisca il lavoro pesante sui tuoi progetti.
Documenti di riferimento
- Codelab : Introduzione a Google Antigravity
- Sito ufficiale : https://antigravity.google/
- Documentazione: https://antigravity.google/docs
- Casi d'uso : https://antigravity.google/use-cases
- Download : https://antigravity.google/download
- Canale YouTube di Google Antigravity : https://www.youtube.com/@googleantigravity