Iniziare a utilizzare lo sviluppo basato sulle specifiche in Antigravity

1. Obiettivo di questo lab

In questo lab pratico imparerai a utilizzare Antigravity per creare applicazioni utilizzando Google Antigravity e a eseguirne il deployment in Google Cloud. Questo lab ti introdurrà anche al concetto di sviluppo basato sulle specifiche.

Obiettivi didattici

Scopri le nozioni di base di Google Antigravity.
Comprendere le nozioni di base dello sviluppo basato sulle specifiche
Scopri come eseguire facilmente il deployment delle app in Cloud Run.

Figura 1: Antigravity è lo strumento di sviluppo incentrato sugli agenti sviluppato da Google.

2. Configurazione dell'ambiente

Installa Antigravity:

                   👉Download the  [Google Antigravity](https://antigravity.google/docs/get-started) for your environment from  [here](https://antigravity.google/).

👉 Installa Antigravity nel tuo ambiente.

👉 Vai alla cartella in cui è installato Antigravity e fai doppio clic per aprire il programma di installazione.

👉 Segui le istruzioni di installazione per installare Antigravity nel tuo ambiente.

Installa Python

👉 Vai a https://www.python.org/downloads/ e installa Python per il tuo sistema.

Installa gcloud

👉 gcloud è uno strumento a riga di comando che ti consente di eseguire varie operazioni su Google Cloud. Segui le istruzioni riportate qui per installare gcloud nel tuo ambiente.

👉 Una volta installato, verifica l'installazione aprendo il terminale di sistema e digitando gcloud.

Figura 2: dopo aver installato gcloud , puoi testare l'installazione digitando gcloud nel terminale

3. Configurazione del progetto

Se non hai già un progetto che puoi utilizzare, dovrai crearne uno nuovo nella console GCP. Seleziona il progetto nel selettore di progetti (in alto a sinistra nella console Google Cloud)

Figura 2: facendo clic sulla casella accanto al logo Google Cloud puoi selezionare il progetto. Assicurati che il progetto sia selezionato.

In questo lab utilizzeremo l'editor di Cloud Shell per svolgere le nostre attività. Apri Cloud Shell e imposta il progetto utilizzando Cloud Shell.
Fai clic su questo link per andare direttamente all'editor di Cloud Shell.
Apri il terminale se non è già aperto facendo clic su Terminale > Nuovo terminale dal menu. Puoi eseguire tutti i comandi di questo tutorial in questo terminale.
Puoi verificare se il progetto è già autenticato utilizzando il seguente comando nel terminale Cloud Shell.

gcloud auth list

Esegui questo comando in Cloud Shell per confermare il tuo progetto

gcloud config list project

Copia l'ID progetto e utilizza il seguente comando per impostarlo

gcloud config set project <YOUR_PROJECT_ID>

Se non ricordi l'ID progetto, puoi elencare tutti i tuoi ID progetto con

gcloud projects list

4. Abilita API

Per eseguire questo lab, dobbiamo abilitare alcuni servizi API. Esegui questo comando in Cloud Shell.

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

Ti presentiamo le API

L'API Vertex AI (aiplatform.googleapis.com) consente l'accesso alla piattaforma Vertex AI , consentendo alla tua applicazione di interagire con i modelli Gemini per la generazione di testo, le sessioni di chat e la chiamata di funzioni.
L'API Cloud Resource Manager (cloudresourcemanager.googleapis.com) ti consente di gestire in modo programmatico i metadati dei tuoi progetti Google Cloud, come l'ID e il nome del progetto, spesso richiesti da altri strumenti e SDK per verificare l'identità e le autorizzazioni del progetto.

5. Conferma se i tuoi crediti sono stati applicati

Nella fase di configurazione del progetto hai richiesto i crediti senza costi che ti consentono di utilizzare i servizi in Google Cloud. Quando applichi i crediti, viene creato un nuovo account di fatturazione senza costi denominato "Account di fatturazione di prova di Google Cloud Platform". Per assicurarti che i crediti siano stati applicati, segui questi passaggi nell'editor di Cloud Shell:

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

Se l'operazione va a buon fine, dovresti visualizzare il risultato come di seguito: se vedi "Progetto collegato correttamente", il tuo account di fatturazione è impostato correttamente. Se esegui il passaggio precedente, puoi controllare se il tuo account è collegato. In caso contrario, verrà collegato automaticamente. Se non hai selezionato il progetto, ti verrà chiesto di sceglierne uno oppure puoi farlo in anticipo seguendo i passaggi di configurazione del progetto.

Figura 3: conferma del collegamento dell'account di fatturazione

6. Introduzione a Google Antigravity

Google Antigravity è uno strumento di sviluppo software AI-first sviluppato da Google DeepMind. Google Antigravity sfrutta il know-how di sviluppo software accumulato per un lungo periodo di tempo con l'AI all'avanguardia per offrire agli sviluppatori un'esperienza di sviluppo fluida e senza interruzioni basata sull'AI.

Ecco alcune delle caratteristiche principali di Google Antigravity.

La figura seguente mostra gli elementi di base di Google Antigravity.

👉 Apri il browser e inizia a esplorare le varie parti.

Figura 4: gli elementi di base di Google Antigravity, i dettagli nella Tabella 1

Tabella 1: dettagli dei componenti di base di 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`

Modelli Gemini 3 e Nanobanana integrati: con Google Antigravity puoi utilizzare i modelli di punta di Google più recenti, come Gemini 3 e Nanobanana. Oltre a questi modelli, puoi utilizzare anche modelli di terze parti come Claude.

Figura 5: in Google Antigravity 2 puoi scegliere di utilizzare molti modelli. Programmazione basata su agenti: Antigravity offre un'esperienza di programmazione nativa basata su agenti che consente agli sviluppatori di rimanere produttivi senza ostacoli.

Pianificazione e controllo completo dell'utente: l'agente prende il tuo input e lo converte in un piano che ti chiederà di approvare prima dell'esecuzione. In questo modo, l'utente può modificare la direzione dell'agente in qualsiasi momento prima dell'esecuzione dell'attività.
Feedback dell'utente:durante l'esecuzione dell'agente, l'utente può fornire un feedback se ha bisogno di fornire istruzioni aggiuntive.
Multi Agents: puoi generare più agenti per lavorare su attività diverse contemporaneamente. Ad esempio, l'agente A può eseguire il refactoring della logica di autenticazione, l'agente B può scrivere test unitari per una nuova API e l'agente C può eseguire ricerche su una libreria in background.
Agente nell'editor, nel terminale e nel browser: gli agenti Google Antigravity funzionano su più piattaforme.
Editor: gli agenti Google Antigravity scrivono il codice e te lo presentano nell'editor.
Terminale: a seconda delle attività, gli agenti di Google Antigravity potrebbero dover accedere al tuo terminale per eseguire alcuni comandi. Gli agenti possono eseguire i comandi per te quando necessario.
Browser: gli agenti possono anche lavorare con il tuo browser. Ciò è particolarmente utile se devi testare le tue applicazioni web. L'agente può eseguire l'applicazione nel browser web, testarla ed eseguirne il debug.

7. Introduzione allo sviluppo basato sulle specifiche dell'AI

Lo Spec-Driven Development è un paradigma emergente dell'ingegneria del software che pone le specifiche strutturate e gli agenti AI al centro del ciclo di vita dello sviluppo. A differenza dell'approccio "prompt-and-patch" (prova ed errore) comune nella programmazione di base dell'AI, SDD dà la priorità alla raccolta meticolosa dei requisiti, alla progettazione del sistema/dell'architettura e alla pianificazione dei test. Prende in prestito il rigore della fase di progettazione del modello a cascata, ma lo integra in un ciclo iterativo agile moderno tramite l'automazione. Anche se il processo richiede una pianificazione e una documentazione meticolose in anticipo, si tratta in realtà di un processo iterativo, poiché gli agenti AI consentono un'implementazione e un test rapidi. In questo modo, puoi ricevere feedback più rapidi che possono essere utilizzati per migliorare la documentazione.

La filosofia di base

In questo modello, gli ingegneri umani passano da "scrittori di codice" ad "architetti di sistema". La responsabilità umana principale è la descrizione ad alta fedeltà di problemi e soluzioni. Questo output dettagliato funge da unica fonte attendibile, che gli agenti AI utilizzano per generare, verificare e perfezionare la base di codice.

Ciclo di vita di SDD

Il processo è costituito dai seguenti componenti. I passaggi 1-3 sono molto incentrati sull'uomo, mentre i passaggi 4-5 sono incentrati sull'agente AI. Si tratta di un processo iterativo in cui, al termine di un ciclo, il feedback può essere utilizzato per migliorare la specifica.

Raccolta dei requisiti:identificazione definitiva della logica di business, delle esigenze degli utenti e dei vincoli di sistema.
Progettazione dell'architettura:definizione della struttura del sistema, dei modelli di dati e dei punti di integrazione.
Specifiche di sistema e di test:la creazione di documenti leggibili automaticamente (o altamente strutturati) che definiscono cosa fa il sistema e come verrà convalidato.
Generazione automatica di codice: gli agenti AI utilizzano le specifiche per produrre codice pronto per la produzione.
Test e convalida:le suite automatizzate verificano il codice generato in base alla specifica di test.

Principi operativi chiave

Il ciclo di progettazione e implementazione

I passaggi da 1 a 5 non sono un percorso lineare, ma un ciclo di feedback continuo. Poiché la generazione di codice (passaggio 4) e il test (passaggio 5) sono in gran parte automatizzati, il team di ingegneria può dedicare la maggior parte della propria larghezza di banda alle prime tre fasi. Quando viene trovato un bug o una funzionalità cambia, l'ingegnere aggiorna la specifica, non il codice, e riavvia il ciclo.

Granularità modulare

Per mantenere l'integrità del sistema, SDD deve essere applicato a moduli granulari anziché a blocchi monolitici.

Isolamento:se la convalida di un modulo specifico non riesce, solo questo modulo deve essere specificato e generato di nuovo.
Scalabilità:moduli piccoli e ben definiti impediscono le "allucinazioni" dell'AI e garantiscono che la finestra contestuale dell'agente AI rimanga mirata e precisa.

Quality Control (Controllo di qualità)

In questo paradigma, la specifica del sistema è il progetto e la specifica del test è il giudice. La specifica di test garantisce che il codice generato sia sempre conforme ai requisiti di qualità predeterminati. L'intero processo può essere integrato perfettamente nella pipeline CICD esistente, garantendo che l'integrità complessiva del sistema soddisfi anche il requisito di qualità.

In questo lab esploreremo le nozioni di base dello sviluppo basato sulle specifiche utilizzando Google Antigravity.

8. Sviluppare un'applicazione web con Google Antigravity

In questo lab creeremo una semplice applicazione di galleria fotografica. Nanobanana, il modello di generazione di immagini, è integrato in Google Antigravity. Utilizzeremo Nanobanana per creare le immagini necessarie.

Configurare il browser web

Il browser web verrà utilizzato per il test automatico dell'app. Nei passaggi riportati di seguito configureremo il browser in modo che Antigravity possa testare automaticamente l'applicazione.

👉 Fai clic sul pulsante Impostazioni (icona a forma di ingranaggio) nell'angolo in alto a destra e seleziona "Apri impostazioni utente Antigravity".
👉 Fai clic su Agente nel riquadro a sinistra e, nella sezione ARTIFACT, seleziona "Procedi sempre" in Review Policy (Norme di revisione)
👉 Fai clic su Browser nel riquadro a sinistra e assicurati che l'opzione Attiva strumenti del browser sia selezionata.

Crea un'applicazione con Google Antigravity

👉 Apri Google Antigravity facendo clic sull'icona Google Antigravity.
👉 Crea una cartella chiamata "Galleria" nella tua cartella personale, ad esempio. Computer.
👉 Premi Apri cartella in Antigravity e seleziona la cartella Galleria. Si aprirà un nuovo spazio di lavoro nella cartella Galleria.
👉 Se il riquadro Agente non è già aperto, aprilo facendo clic sul pulsante "Attiva/disattiva riquadro Agente". Fai riferimento alla Figura 4, pulsante n. 2.
👉 Puoi iniziare a programmare digitando le istruzioni nel riquadro dell'agente. È molto importante rendere le istruzioni il più chiare possibile. Inserisci quanto segue nel riquadro dell'agente
```
 **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

Versione giapponese:

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

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

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

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

5. 以下のテストを実行します
ウェブブラウザでアプリを開きます
画像をクリックすると、ライトボックスで画像が開きます
ナビゲーションを確認します

👉 Fai clic sul pulsante Esegui. Una volta eseguito, l'agente dovrebbe mostrare il piano di esecuzione come di seguito.

Figura 5: L'agente antigravità ti mostrerà il piano di implementazione

👉 Ti verrà chiesto di confermare. Conferma quando ti viene richiesto, come mostrato di seguito. Antigravity utilizzerà automaticamente Nanobanana e il modello LLM selezionato per eseguire l'attività.

Figura 6: Antigravity vuole eseguire un comando , premi Esegui per consentire l'esecuzione.

Figura 7: premi Accetta tutto quando richiesto.

👉 Una volta generato il codice, Antigravity aprirà il browser e inizierà il test. Dopo il test, dovresti ricevere i risultati. Figura 8: Antigravity mostrerà i risultati del test
👉 Se richiesto, premi "Accetta tutto" per salvare tutto il codice generato nel riquadro dell'agente.
👉 Nel riquadro Explorer di Antigravity , dovresti trovare il codice appena generato. Figura 9: codice finale
👉 Per testare l'applicazione, fai clic con il tasto destro del mouse su index.html, ottieni il percorso del file e incollalo nella barra degli indirizzi del browser web.

Figura 10: per testare l'app, copia semplicemente il percorso del file index.html nel browser web

9. Configura l'ambiente per il deployment

👉 Ottieni l'ID progetto Google Cloud: vai alla pagina https://console.cloud.google.com.
👉 Fai clic in alto a sinistra e copia l'ID progetto da qualche parte, lo useremo nei passaggi successivi. Figura 11: copia l'ID progetto e conservalo per riferimento futuro
👉 In Antigravity, apri il terminale facendo clic su Terminale -> Nuovo terminale dal menu.
👉 Dobbiamo impostare le variabili di ambiente, che sono diverse per Windows e Mac/Linux. Sostituisci "YOUR CLOUD PROJECT" con quello annotato nel passaggio 2. Nota per gli utenti di Windows PowerShell: apri PowerShell in modalità amministratore

#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"

👉 Accedi alla console, quando ti viene richiesto di accedere a Google Cloud nel browser.

gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR CLOUD PROJECT

Figura 12: esegui l'autenticazione

👉 Installa il server MCP di Cloud Run. In alto a destra nella finestra Antigravity, fai clic su "..." . Dovresti visualizzare l'opzione "Server MCP". Fai clic. I server MCP sono come le estensioni dell'agente che consentono agli agenti di accedere a dati e strumenti esterni.
👉 Inserisci "Cloud Run" nella casella di ricerca e fai clic su "Cloud Run". Figura 13: server MCP Cloud Run
👉 Torna al riquadro dell'agente premendo il tasto Freccia indietro accanto al titolo Server MCP. Ora possiamo iniziare a interagire con Google Cloud Run. Inserisci quanto segue nel riquadro dell'agente. In questo modo, il server Cloud Run MCP dovrebbe essere utilizzato automaticamente e dovrebbe essere visualizzato l'elenco dei servizi in esecuzione in Cloud Run.

Find me the list of services running in Cloud Run.

👉 Esegui il deployment dell'app con il seguente comando. Puoi semplicemente eseguire il deployment utilizzando il linguaggio naturale. Antigravity utilizzerà automaticamente il server MCP per il deployment.

Deploy this gallery static web application to cloud run with service name "photogallery". Use nginx and assume nginx will use port 80

👉 L'agente dovrebbe mostrarti dove è stata eseguita la distribuzione dell'app. Ad esempio, https://photogallery-85469421903.us-central1.run.app . Cloud MCP Server semplifica notevolmente il deployment della tua app web in Cloud Run.

10. Esegui la pulizia

Ora puliamo ciò che abbiamo appena creato.

👉 Elimina l'app Cloud Run che abbiamo appena creato. Vai a Cloud Run accedendo a Cloud Run . Dovresti riuscire a vedere l'app che hai creato nel passaggio precedente. Seleziona la casella accanto all'app e fai clic sul pulsante Elimina.

Figura 38: Eliminazione dell'app Cloud Run

11. Conclusione

Complimenti! Hai creato correttamente un'app utilizzando Google Antigravity seguendo le pratiche di sviluppo basate sulle specifiche.Hai anche imparato a eseguire il deployment dell'applicazione in Cloud Run. Si tratta di un risultato significativo che copre il ciclo di vita principale di un'applicazione cloud-native moderna, fornendoti una base solida per il deployment dei tuoi sistemi complessi.

Riepilogo

In questo lab hai imparato a:

Crea un'applicazione multi-agente utilizzando Google Antigravity
Esegui il deployment dell'applicazione in Cloud Run.

Risorse utili