Gemini 2.0 Flash è ora pronto per la produzione. Scopri di più

Questa pagina è stata tradotta dall'API Cloud Translation.

Creare un generatore di codice Flutter basato sull'IA con Gemini

Crea uno strumento di assistenza alla programmazione per generare interfacce utente Flutter o qualsiasi componente di codice su cui vuoi eseguire rapidamente l'iterazione. La creazione di interfacce utente può essere divertente e gratificante, ma è anche un lavoro duro. Non si tratta solo di scrivere un codice corretto, ma anche di ottenere un aspetto corretto e di far sì che il team concordi su una direzione di progettazione.

Questo tutorial mostra come estendere Flutter Theme Agent, uno strumento di assistenza per il codice basato sull'IA creato dal team Flutter Developer Relations di Google. Questo progetto open source è un'estensione per Visual Studio Code di Microsoft (VS Code) che genera componenti specifici di un tema Flutter o dell'oggetto ThemeData, tra cui combinazioni di colori, stili di testo e stili di pulsanti. Puoi modificare il progetto per migliorare il funzionamento di queste funzioni esistenti o creare nuovi comandi per supportare meglio il tuo flusso di lavoro di sviluppo.

Per una panoramica video del progetto e su come estenderlo, inclusi approfondimenti da parte di chi lo ha creato, consulta AI Flutter Code Generator - Build with Google AI. In caso contrario, puoi iniziare a estendere il progetto seguendo le istruzioni riportate di seguito.

Screenshot di Flutter Theme Agent in esecuzione in VS Code

Figura 1. Flutter Theme Agent in esecuzione nella finestra dell'host di sviluppo dell'estensione VS Code.

Configurazione del progetto

Queste istruzioni illustrano la procedura di configurazione del progetto Flutter Theme Agent per lo sviluppo e i test. I passaggi generali sono l'installazione di alcuni software di prerequisiti, l'impostazione di alcune variabili di ambiente, la clonazione del progetto dal repository di codice ed esecuzione dell'installazione della configurazione.

Installa i prerequisiti

Il progetto Flutter Theme Agent viene eseguito come estensione di Visual Studio Code (VS Code) di Microsoft e utilizza Node.js e npm per gestire i pacchetti ed eseguire l'applicazione. Le seguenti istruzioni di installazione si riferiscono a una macchina ospitante Linux.

Per installare il software necessario:

Installa Visual Studio Code per la tua piattaforma.
Installa node e npm seguendo le istruzioni di installazione per la tua piattaforma.
Se non hai ancora installato Flutter per VS Code, segui le istruzioni di installazione.

Clona e configura il progetto

Scarica il codice del progetto e utilizza il comando di installazione npm per scaricare le dipendenze richieste e configurare il progetto. Per recuperare il codice sorgente del progetto, hai bisogno del software di controllo del codice sorgente git.
Per scaricare e configurare il codice del progetto:

Clona il repository Git utilizzando il seguente comando.

git clone https://github.com/google/generative-ai-docs`

Facoltativamente, configura il tuo repository Git locale in modo da utilizzare il controllo sparse, in modo da avere solo i file per il progetto Docs Agent.
```
cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent
```

Vai alla directory principale del progetto Flutter Theme Agent.

cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/

Esegui il comando di installazione per scaricare le dipendenze e configurare il progetto:
```
npm install
```

Configurare e testare l'estensione

Ora dovresti essere in grado di testare l'installazione eseguendo Flutter Theme Agent come estensione di sviluppo in VS Code sul tuo dispositivo. Il test apre una nuova finestra di Extension Development Host di VS Code in cui è disponibile la nuova estensione. In questa nuova finestra, configura la chiave API utilizzata dall'estensione per accedere all'API Google Gemini.

Per configurare e testare la configurazione:

Avvia l'applicazione VS Code.
In VS Code, crea una nuova finestra selezionando File > Nuova finestra.
Apri il progetto Flutter Theme Agent selezionando File > Apri cartella e la cartella flutter_theme_agent/.
In VS Code, apri il file flutter_theme_agent/package.json.
Esegui l'estensione in modalità di debug selezionando Esegui > Avvia il debug. Questo passaggio apre una finestra separata di Extension Development Host di VS Code.
Apri le impostazioni di VS Code selezionando Codice > Impostazioni > Impostazioni.
Ottieni una chiave API Google Gemini dal sito per sviluppatori di IA generativa e copia la stringa della chiave.
Imposta la chiave API come impostazione di configurazione. Nel campo Impostazioni di ricerca, digita flutter theme, seleziona la scheda Utente e nell'impostazione Google > Gemini: chiave API, fai clic sul link Modifica in settings.json e aggiungi la tua chiave API Gemini:
```
"google.ai.apiKey": "your-api-key-here"
```
Salva le modifiche nel file settings.json e chiudi le schede delle impostazioni.

Per testare i comandi delle estensioni:

Nella finestra Extension Development Host (Host di sviluppo dell'estensione) di VS Code, scrivi un commento di codice che descriva il componente dell'interfaccia utente che vuoi generare.
Seleziona il testo del commento con le caratteristiche del componente.
Apri la tavolozza dei comandi selezionando Visualizza > Riquadro dei comandi.
Nella tavolozza dei comandi, digita Flutter Theme e seleziona uno dei comandi con questo prefisso.

Modificare un comando esistente

La modifica dei comandi forniti in Flutter Theme Agent è il modo più semplice per cambiare il comportamento e le funzionalità dell'estensione.

Sia i comandi di commento che di revisione utilizzano un approccio di impostazione di alcuni prompt con esempi di codice e commenti per quel codice, nonché alcune istruzioni generali per il modello linguistico di IA. Queste informazioni sul contesto del prompt guidano il modello linguistico Gemini nella generazione di una risposta. Modificando le istruzioni del prompt, gli esempi o entrambi nei comandi di commento o di revisione, puoi cambiare il comportamento di ciascuno dei comandi esistenti.

Questo insieme di istruzioni spiega come modificare il comando buttonstyle.ts modificando il testo del prompt del comando.

Per prepararti a modificare il comando buttonstyle.ts:\

Avvia l'applicazione VS Code.
In VS Code, crea una nuova finestra selezionando File > Nuova finestra.
Apri il progetto Flutter Theme Agent selezionando File > Apri cartella e la cartella flutter_theme_agent/.
Apri il file flutter_theme_agent/src/buttonstyle.ts.

Per modificare il comportamento del comando buttonstyle.ts:

Nel file buttonstyle.ts, modifica la costante BUTTONSTYLE_CONTEXT per includere istruzioni diverse.

const BUTTONSTYLE_CONTEXT=`
ButtonStyle should only define properties that exist for a ButtonStyle
object. ButtonStyle objects have the following properties. The buttons
can ONLY be styled by setting these properties. No other properties:
alignment → AlignmentGeometry? // The alignment of the button's child.
...

Facoltativamente, nel file buttonstyle.ts, costante BUTTONSTYLE_CONTEXT, aggiungi un altro esempio di istruzione e output di stile pulsante o sostituisci uno degli esempi esistenti.

...
Here's an example prompt:
Create a ButtonStyle where the button is green by default and blue on hover state. And elevation is 14, no surface tint color, and the splash effect is turned off.
Here's an example of good Dart code:
ButtonStyle(
  backgroundColor: MaterialStateProperty.resolveWith<Color?>(
...

Salva le modifiche nel file buttonstyle.ts.

Per testare il comando modificato:

Nella finestra del progetto dell'estensione VS Code, riavvia il debugger selezionando Esegui > Riavvia il debug.
Nella finestra Extension Development Host (Host di sviluppo delle estensioni) di VS Code, seleziona un commento di codice nella finestra dell'editor che descriva lo stile del pulsante che preferisci, ad esempio:
```
// blue, lickable buttons that light up when you hover over them`
```
Apri la tavolozza dei comandi selezionando Visualizza > Riquadro dei comandi.
Nella tavolozza dei comandi, digita Flutter e seleziona il comando Agente tema Flutter: crea uno stile pulsante Flutter.

Crea nuovo comando

Puoi estendere l'agente di temi Flutter creando nuovi comandi che eseguono attività completamente nuove con l'API Gemini. Ogni file di comando, ad esempio buttonstyle.ts e colorscheme.ts, è per lo più autonomo e include il codice per raccogliere il testo dall'editor attivo, comporre un prompt, connettersi all'API Gemini, inviare un prompt e gestire la risposta.

Screenshot di Flutter Theme Agent con il nuovo comando visibile

Figura 2. Nuovo comando Flutter Theme Agent nella finestra dell'host di sviluppo dell'estensione VS Code.

Questo insieme di istruzioni spiega come creare un nuovo comando utilizzando il codice di un comando esistente, colorscheme.ts, come modello. Questo aggiornamento modifica il comando in modo da non includere la sintassi di contenimento dell'oggetto ColorScheme, in modo da non dover rimuovere questa sintassi dopo la generazione e visualizzare più rapidamente l'output.

Per creare un comando che generi solo un elenco di colori per un oggetto ColorScheme:

Crea una copia del file flutter_theme_agent/src/colorscheme.ts denominato colorscheme2.ts nella directory src/.
In VS Code, apri il file src/colorscheme2.ts.

Nel file colorscheme2.ts, rinomina la funzione generateColorScheme in generateColorScheme2:

export async function generateColorScheme2(){
  vscode.window.showInformationMessage('Generating Color Scheme...');

Modifica le istruzioni del prompt nel file colorscheme2.ts. Modifica le istruzioni di generazione del codice COLORSCHEME_CONTEXT rimuovendo il testo ColorScheme( dal codice di esempio nella riga 51 e inserisci una riga vuota.
```
...
Here's the example of good Dart code:

  brightness: Brightness.light,
  primary: Color(0xffFF80AB),
...
```

Rimuovi il carattere di parentesi tonde di chiusura ")" dalla fine dell'elenco di colori e inserisci una riga vuota.

...
  inversePrimary: Color(0xffD15B9D),
  surfaceTint: Color(0xffFF80AB),

This example code is a good ...

Ripeti queste modifiche per il secondo esempio. Nella stringa COLORSCHEME_CONTEXT nella riga 87, rimuovi il testo ColorScheme( e inserisci una riga vuota.
Nella riga 115, rimuovi il carattere di parentesi chiusa ")" dalla fine dell'elenco dei colori e inserisci una riga vuota.

Nella stringa COLORSCHEME_CONTEXT, aggiungi un'istruzione per non includere la sintassi di chiusura:

...
- The color scheme must be accessible and high-contrast.

In the response, only include the list of colors and nothing else. Do
not include a starting "ColorScheme(" prefix or an ending ")" suffix.

Here's an example user prompt:
...

Salva le modifiche nel file colorscheme2.ts.

Integrare il nuovo comando

Dopo aver completato il codice per il nuovo comando, devi integrarlo con il resto dell'estensione. Aggiorna i file extension.ts e package.json per integrare il nuovo comando nell'estensione e consentire a VS Code di invocarlo.

Per integrare il nuovo comando con il codice dell'estensione:

In VS Code, apri il file flutter_theme_agent/src/extension.ts.
Importa il nuovo codice comando nell'estensione aggiungendo un nuovo statement di importazione.
```
import { generateColorScheme2 } from './components/colorscheme2';
```

Registra il nuovo comando aggiungendo il seguente codice alla funzione activate().

export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2',
        generateColorScheme2);
    ...
}

Salva le modifiche nel file extension.ts.

Per integrare il comando name con il pacchetto di estensioni:

In VS Code, apri il file flutter_theme_agent/package.json.

Aggiungi il nuovo comando alla sezione commands del file del pacchetto.

"contributes": {
  "commands": [
    ...
    {
      "command": "flutter-theme-agent.generateColorScheme2",
      "title": "Flutter Theme Agent: My New Code Generator."
    }
  ],

Salva le modifiche nel file package.json.

Testa il nuovo comando

Una volta completata la codifica del comando e l'integrazione con l'estensione, puoi testarlo. Il nuovo comando è disponibile solo nella finestra VS Code Extension Development Host e non nella finestra VS Code in cui hai modificato il codice dell'estensione.

Per testare il comando modificato:

Nella finestra del progetto dell'estensione di VS Code, riavvia il debugger selezionando Esegui > Riavvia il debug, che riavvia una finestra distinta di Extension Development Host (Host di sviluppo delle estensioni).
Nella finestra Extension Development Host (Host di sviluppo delle estensioni) di VS Code, apri un progetto di sviluppo Flutter.
Nella stessa finestra, apri una finestra dell'editor di codice, digita un commento che descriva il componente dell'interfaccia utente che ti interessa e seleziona il testo del commento.
Apri la tavolozza dei comandi selezionando Visualizza > Riquadro dei comandi.
Nel riquadro dei comandi, digita Flutter Theme e seleziona il comando Flutter Theme Agent: My New Code Generator.

Risorse aggiuntive

Per ulteriori informazioni sul progetto Flutter Theme Agent, consulta il repository del codice. Se hai bisogno di aiuto per creare l'applicazione o stai cercando sviluppatori collaborati, dai un'occhiata al server Discord della community degli sviluppatori Google.

Applicazioni di produzione

Se prevedi di implementare Flutter Theme Agent per un pubblico ampio, tieni presente che il tuo utilizzo dell'API Google Gemini potrebbe essere soggetto a limitazioni di frequenza e altre limitazioni di utilizzo. Se stai valutando la possibilità di creare un'applicazione di produzione con il modello Gemini, consulta i servizi Vertex AI di Google Cloud per aumentare la scalabilità e l'affidabilità della tua app.