Pianificare e creare app con Gemini CLI Conductor

1. Introduzione

In questo codelab, imparerai a pianificare e creare applicazioni software con l'estensione Conductor di Gemini CLI. Inizierai creando un'applicazione "greenfield" completamente da zero. Poi, la tratterai come un progetto "brownfield", iterando su di essa per aggiungere autenticazione e spazio di archiviazione.

In questo lab proverai a:

• Installare Gemini CLI e l'estensione Conductor
• Creare da zero un'app web "Picker Wheel" utilizzando le funzionalità di pianificazione e implementazione di Conductor
• Aggiungere la personalizzazione all'applicazione aggiungendo l'autenticazione e lo spazio di archiviazione utilizzando Firebase

Obiettivi didattici

• Come utilizzare l'estensione Conductor per pianificare, implementare e rivedere un'applicazione "greenfield"
• Come utilizzare l'estensione Conductor per aggiungere funzionalità a un'applicazione "brownfield"

Che cosa ti serve

• Un browser web come Chrome
• Un progetto cloud Google Cloud con la fatturazione abilitata
• Node.js installato (versione 18 o successive consigliata)
• Un editor di codice locale come Visual Studio Code

2. Prima di iniziare

Crea un progetto Google Cloud

1. Nella console Google Cloud, nella pagina di selezione del progetto, seleziona o crea un progetto Google Cloud.
2. Verifica che la fatturazione sia attivata per il tuo progetto Cloud. Scopri come verificare se la fatturazione è abilitata in un progetto.

Avvia Cloud Shell

L'utilizzo di Cloud Shell ci consente di completare questa sezione senza dover installare localmente gli strumenti CLI gcloud e firebase.

Cloud Shell è un ambiente a riga di comando in esecuzione in Google Cloud che viene precaricato con gli strumenti necessari.

1. Fai clic su Attiva Cloud Shell nella parte superiore della console Google Cloud.
2. Una volta eseguita la connessione a Cloud Shell, verifica l'autenticazione:

   gcloud auth list
   

3. Verifica che il progetto sia configurato:

   gcloud config get project
   

4. Se il progetto non è impostato come previsto, impostalo:

   export PROJECT_ID=<YOUR_PROJECT_ID>
   gcloud config set project $PROJECT_ID
   

Abilita API

Abilita l'API Firebase Management nel tuo progetto Google Cloud.

gcloud services enable firebase.googleapis.com

Aggiungi Firebase al tuo progetto

L'interfaccia a riga di comando di Firebase è preinstallata in Cloud Shell. Da Cloud Shell, accedi con lo stesso Account Google che ti dà accesso al progetto Google Cloud. Se lavori in locale, installa l'interfaccia a riga di comando di Firebase seguendo le istruzioni.

firebase login

Esegui questo comando per aggiungere Firebase al tuo progetto Google Cloud:

firebase projects:addfirebase

Se è la prima volta che esegui l'interfaccia a riga di comando firebase, rispondi a tutte le domande che ti vengono poste.

Esci da Cloud Shell

Puoi chiudere la finestra di Cloud Shell. Nella sezione seguente configureremo l'ambiente locale.

3. Installa Gemini CLI e Conductor in locale

In questo passaggio, preparerai il tuo ambiente di sviluppo locale installando Gemini CLI e l'estensione Conductor utilizzando l'editor di codice locale e il terminale.

Installa Gemini CLI

1. Installa l'ultima versione di Gemini CLI a livello globale utilizzando npm:

   npm install -g @google/gemini-cli
   

   Se visualizzi errori di autorizzazione, potresti dover utilizzare un gestore di versioni come nvm o eseguire questo comando come root utilizzando sudo.

2. Riavvia il terminale in modo che gemini venga aggiunto al tuo PATH.
3. Verifica che l'installazione abbia installato la versione più recente:

   gemini --version
   

4. Crea una nuova directory di progetto e passa a questa directory: in una sezione successiva creeremo un progetto in una picker-wheel directory. Crea subito la directory e passa a questa directory:

   mkdir picker-wheel
   cd picker-wheel
   

5. Autenticati:
   • Avvia Gemini CLI.

     gemini
     

   • Quando ti viene chiesto "Vuoi considerare attendibili i file in questa cartella?", seleziona Considera attendibile la cartella (picker-wheel).
   • Quando ti viene chiesto "Come vuoi autenticarti per questo progetto?", seleziona Vertex AI. Segui la guida all'autenticazione per ottenere una chiave API Google Cloud e impostare la variabile di ambiente GOOGLE_API_KEY. Prenditi un momento per esplorare i diversi livelli di utilizzo e i relativi limiti di frequenza delle API .
6. Esci da Gemini CLI: digita /quit dal terminale CLI per terminare la sessione live di Gemini CLI prima di continuare.

Installa l'estensione Conductor

Conductor è un'estensione Gemini CLI open source creata da Google che abilita funzionalità di sviluppo basate sul contesto, come la pianificazione e il monitoraggio dell'implementazione.

1. Installa l'estensione:

   gemini extensions install https://github.com/gemini-cli-extensions/conductor
   

2. Verifica l'installazione:
   • Avvia Gemini CLI.

     gemini
     

   • Digita /conductor e vedrai un elenco di comandi come setup, newTrack, implement e così via.
3. Esci da Gemini CLI: digita /quit dal terminale CLI per terminare la sessione live di Gemini CLI prima di continuare.

4. Sviluppo greenfield: la ruota di selezione

Ora che l'ambiente è configurato, creerai una nuova applicazione da zero. Creerai una "ruota di selezione", un'app web leggera che gira per selezionare un'opzione casuale.

Configura il contesto del prodotto

1. Verifica di trovarti nella picker-wheel directory che hai creato nella sezione precedente:

   pwd
   

2. Avvia Gemini CLI: avvia una nuova sessione di Gemini CLI dalla directory del progetto.

   gemini
   

3. Inizializza Conductor: esegui il comando di configurazione per creare lo scaffolding del progetto e configurare l'ambiente Conductor.

   /conductor:setup
   

4. Segui i prompt inter1attivi: i prompt interattivi che visualizzi non corrisponderanno esattamente a questi esempi. Concentrati su un design più semplice per familiarizzare con il flusso di lavoro di Conductor.
   • Obiettivo del prodotto: un'applicazione web che visualizza una ruota girevole configurabile per selezionare un elemento casuale da un elenco.
     • Segmento di pubblico di destinazione → Pubblico generale
     • Interazione → Tocca/fai clic per girare
     • Personalizzazione → Di base
     • Piattaforma → Priorità al desktop
   • Linee guida relative ai prodotti: genera automaticamente.
   • Stack tecnologico:
     • Linguaggi → TypeScript/JavaScript: ideale per il web full-stack
     • Frontend → Vue.js: interfacce web intuitive
     • Backend → Express.js: backend Node veloce
     • Database → Nessuno: non è necessario alcun database
   • Flusso di lavoro: standard.
   • Requisiti del prodotto:
     • Storie utente → Opzioni personalizzabili, visualizzazione chiara del vincitore
     • Funzionalità principali → Elenco di opzioni modificabile, colori casuali
     • Vincoli → Solo lato client, prestazioni elevate
     • Non funzionali → Elevata copertura dei test, TypeScript e Vue.js, design adattabile
   Conductor genererà file di contesto in una directory conductor/.

Crea una nuova traccia

Una "traccia" in Conductor rappresenta una funzionalità o un'unità di lavoro.

1. Avvia una nuova traccia utilizzando /conductor:newTrack. Conductor potrebbe proporre una traccia iniziale in base al contesto del prodotto. In alternativa, puoi proporre la tua o chiedere a Conductor di suggerire una traccia.
2. Esamina il piano generato: Conductor genererà un file index.md, un file spec.md e un file plan.md all'interno di conductor/tracks/{track-id}/. Prenditi un momento per leggerli. Se tutto sembra a posto, Conductor ti chiederà di salvare ed eseguire il commit dei file di configurazione iniziali.

Implementa la traccia

1. Avvia l'implementazione:

   /conductor:implement
   

   Conductor ora elaborerà il piano, scrivendo il codice per il progetto.

   Suggerimento:per evitare di rimanere bloccati su shell interattive o processi a lunga esecuzione (come server di sviluppo o watcher di test), dobbiamo assicurarci che Conductor sappia esattamente come gestire questi comandi specifici. Strumenti come Vite (npm run dev) e Vitest (npm run test) spesso vengono eseguiti in "modalità di monitoraggio" per impostazione predefinita, il che mantiene il processo aperto a tempo indeterminato. Puoi indicare a Conductor di disattivare la modalità di monitoraggio o utilizzare is_background: true durante l'esecuzione dei comandi aggiornando workflow.md.

2. Verifica l'applicazione: durante la fase di implementazione, Conductor ti chiederà di testare manualmente l'applicazione. Ad esempio, ti chiederà di aprire il server web locale, visualizzare l'anteprima dell'applicazione nel browser e verificare le modifiche. Al termine dell'implementazione, dovresti vedere una ruota di selezione funzionante.

   Risoluzione dei problemi:se il codice generato si comporta in modo imprevisto, controlla conductor/tracks/.../plan.md per verificare la presenza di passaggi o errori saltati.

3. Esamina l'implementazione: come ultimo passaggio, puoi chiedere a Conductor di esaminare l'implementazione. Dovrebbe esaminare il codice sorgente, sincronizzare la documentazione del progetto e archiviare la traccia.

   /conductor:review
   

5. Iterazione brownfield: aggiungi la personalizzazione

Ora passerai allo sviluppo "brownfield". Migliorerai l'applicazione web della ruota di selezione della sezione precedente in modo che gli utenti che hanno eseguito l'accesso possano salvare e ripristinare le configurazioni della ruota di selezione.

Se vuoi passare direttamente a un'applicazione brownfield, puoi scaricare il codice golden dell'ultima sezione per un'implementazione di riferimento e continuare a crearlo.

Crea una traccia di personalizzazione

1. Nel seguente esempio "brownfield", utilizzeremo Firebase per l'autenticazione e lo spazio di archiviazione. Installa l'estensione Firebase di Gemini CLI in modo che Conductor possa utilizzarla.

   gemini extensions install https://github.com/gemini-cli-extensions/firebase
   

2. Avvia Gemini CLI: avvia una nuova sessione di Gemini CLI dalla directory del progetto.

   gemini
   

3. Avvia una nuova traccia: avvia una nuova traccia.

   /conductor:newTrack "I want users to be able to log in to their accounts and
   save their picker wheel configurations."
   

4. Segui i prompt inter1attivi: i prompt interattivi che visualizzi non corrisponderanno esattamente a questi esempi. Concentrati su un design più semplice per familiarizzare con il flusso di lavoro di Conductor.
   • Obiettivo della traccia:
     • Provider di autenticazione → Firebase Auth
     • Configurazioni salvate → Opzioni della ruota
     • Archiviazione dati → Firestore
     • Interfaccia utente di accesso a Firestore → Overlay modale
   Conductor genererà file di contesto per una nuova traccia all'interno di conductor/tracks/{track-id}.
5. Esamina il piano generato: prenditi un momento per leggere un file index.md, un file spec.md e un file plan.md all'interno di conductor/tracks/{track-id}/.

   Suggerimento:ti consigliamo di parlare con Gemini per comprendere e discutere il piano il più possibile prima di passare all'implementazione.

6. Implementa: se tutto sembra a posto, puoi avviare l'implementazione.

   /conductor:implement
   

7. Verifica: ricarica l'applicazione. Dovresti vedere un'applicazione aggiornata.

   Se l'AI si blocca durante il test dell'implementazione dell'autenticazione, ricorda di attivare Accesso con Google nella console Firebase in Autenticazione > Metodo di accesso.

   

Di seguito è riportato il codice golden per un'implementazione di riferimento. Devi fornire il tuo progetto Firebase in .firebaserc e le configurazioni Firebase in firebase.ts per avviare correttamente l'applicazione.

6. Libera spazio

Per evitare addebiti continui sul tuo account Google Cloud, elimina le risorse create durante questo codelab.

Elimina il progetto Firebase (e il progetto Google Cloud)

Il modo più semplice per liberare spazio è eliminare completamente il progetto.

1. Nella console Google Cloud, seleziona il progetto che hai creato.
2. Fai clic su ELIMINA.

In alternativa, se vuoi conservare il progetto ma eliminare le risorse:

1. Elimina il database Firestore: vai alla console Firebase > Firestore ed elimina il database.
2. Elimina l'autenticazione: vai alla console Firebase > AutenticazioneMetodo di accesso, disattiva Google.

7. Complimenti

Complimenti! Hai utilizzato correttamente l'estensione Conductor di Gemini CLI per creare un'applicazione web da zero e poi iterare su di essa con funzionalità complesse come l'autenticazione e l'integrazione del database.

Passaggi successivi

• Esplora la modalità di pianificazione di Gemini CLI per una pianificazione leggera
• Esplora altre estensioni di Gemini CLI