Dai un'occhiata al nuovo Cookbook dell'API Gemini e al nostro forum della community.

Questa pagina è stata tradotta dall'API Cloud Translation.

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

Crea uno strumento di assistente alla programmazione per generare interfacce utente Flutter o qualsiasi componente di codice di cui vuoi eseguire rapidamente l'iterazione. Creare un'interfaccia utente può essere divertente e gratificante, ma è anche un duro lavoro. Non si tratta solo di ottenere il codice giusto, ma anche di creare l'aspetto giusto e di far concordare il team su una direzione progettuale.

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

Per una panoramica video del progetto e di come estenderlo, inclusi approfondimenti dalle persone che lo hanno realizzato, dai un'occhiata al generatore di codice AI Flutter - Build with Google AI. Altrimenti, puoi iniziare a estendere il progetto seguendo le istruzioni riportate di seguito.

Screenshot dell'agente Flutter Theme in esecuzione in VS Code

Figura 1. Agente Flutter Theme in esecuzione nella finestra Host per lo sviluppo di estensioni di codice VS.

Configurazione del progetto

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

Installa i prerequisiti

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

Per installare il software richiesto:

Installa il codice visivo di Studio per la tua piattaforma.
Installa node e npm seguendo le istruzioni di installazione per la tua piattaforma.
Se non hai già 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, è necessario un software per il controllo del codice sorgente git.
Per scaricare e configurare il codice del progetto:

Clona il repository git utilizzando il comando seguente.

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

Facoltativamente, configura il repository Git locale in modo che utilizzi il check-out sparse, in modo da avere solo i file per il progetto dell'agente di Documenti.
```
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 riuscire a testare l'installazione eseguendo Flutter Theme Agent come estensione di sviluppo in VS Code sul tuo dispositivo. Il test apre una finestra separata VS Code Extensions Development Host in cui è disponibile la nuova estensione. In questa nuova finestra, configurerai 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 poi 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 debug. Questo passaggio apre una finestra separata per Host per lo sviluppo dell'estensione di VS Code.
Apri le impostazioni di VS Code selezionando Codice > Impostazioni > Impostazioni.
Ottieni una chiave API di 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 chiave API Gemini:
```
"google.ai.apiKey": "your-api-key-here"
```
Salva le modifiche apportate al file settings.json e chiudi le schede delle impostazioni.

Per testare i comandi dell'estensione:

Nella finestra Extensions Development Host di VS Code, scrivi un commento di codice per descrivere il componente dell'interfaccia utente che vuoi generare.
Seleziona il testo del commento con le caratteristiche del componente.
Per aprire la tavolozza dei comandi, seleziona Visualizza > Tavolozza dei comandi.
Nella tavolozza dei comandi, digita Flutter Theme e seleziona uno dei comandi con quel prefisso.

Modifica comando esistente

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

Entrambi i comandi di commento e recensione utilizzano alcuni approcci di prompt con esempi di codice e commenti per quel codice, oltre ad alcune istruzioni generali per il modello linguistico dell'IA. Queste informazioni sul contesto dei prompt guida il modello linguistico Gemini nella generazione di una risposta. Modificando le istruzioni dei prompt, gli esempi o entrambi nei comandi di commento o di revisione, puoi modificare il comportamento di ciascuno dei comandi esistenti.

Questa serie di istruzioni spiega come modificare il comando buttonstyle.ts cambiando il testo del prompt.

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 poi la cartella flutter_theme_agent/.
Apri flutter_theme_agent/src/buttonstyle.ts file.

Per modificare il comportamento del comando buttonstyle.ts:\

Nel file buttonstyle.ts, modifica la costante BUTTONSTYLE_CONTEXT in modo da 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.
...

Se vuoi, nel file buttonstyle.ts, costante BUTTONSTYLE_CONTEXT, aggiungi un altro esempio di istruzione e output di stile pulsante oppure 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 apportate al file buttonstyle.ts.

Per testare il comando modificato:

Nella finestra del progetto dell'estensione VS Code, riavvia il debugger selezionando Esegui > Riavvia debug.
Nella finestra Extensions Development Host di VS Code, seleziona un commento di codice nella finestra dell'editor che descriva lo stile del pulsante desiderato, ad esempio:
```
// blue, lickable buttons that light up when you hover over them`
```
Per aprire la tavolozza dei comandi, seleziona Visualizza > Tavolozza dei comandi.
Nella tavolozza dei comandi, digita Flutter e seleziona il comando Tema Flutter Agent: Create a Flutter ButtonStyle.

Crea nuovo comando

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

Screenshot dell'agente Flutter Theme con il nuovo comando visibile

Figura 2. Nuovo comando agente tema Flutter nella finestra Host di sviluppo 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 che include l'oggetto ColorScheme, così non dovrai rimuovere questa sintassi dopo la generazione e visualizzare l'output più velocemente.

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 della richiesta nel file colorscheme2.ts. Modifica le istruzioni per la generazione del codice COLORSCHEME_CONTEXT rimuovendo il testo ColorScheme( dal codice di esempio alla riga 51 e rendila una riga vuota.
```
...
Here's the example of good Dart code:

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

Rimuovi le parentesi di chiusura ")" dalla fine dell'elenco dei colori e lascia 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 alla riga 87, rimuovi il testo ColorScheme( e rendilo una riga vuota.
Alla riga 115, rimuovi la parentesi di chiusura ")" dalla fine dell'elenco dei colori e trasformala in una riga vuota.

Nella stringa COLORSCHEME_CONTEXT, aggiungi un'istruzione per non includere la sintassi che lo include:

...
- 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 apportate al file colorscheme2.ts.

Integra 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 inserire il nuovo comando nell'estensione e abilita VS Code per poter richiamare il nuovo comando.

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 del comando nell'estensione aggiungendo una nuova istruzione di importazione.
```
import { generateColorScheme2 } from './components/colorscheme2';
```

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

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

Salva le modifiche apportate al file extension.ts.

Per integrare il comando name con il pacchetto dell'estensione:

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 apportate al file package.json.

Testa il nuovo comando

Una volta completata la codifica del comando e integrato con l'estensione, puoi testarlo. Il nuovo comando è disponibile solo nella finestra Extensions Development Host di VS Code 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 VS Code, riavvia il debugger selezionando Esegui > Riavvia debug. In questo modo viene riavviata una finestra Host sviluppo estensione separata.
Nella finestra Extensions Development Host 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 desiderato e seleziona il testo del commento.
Per aprire la tavolozza dei comandi, seleziona Visualizza > Tavolozza dei comandi.
Nella tavolozza dei comandi, digita Flutter Theme e seleziona il comando Agente tema Flutter: My New Code Builder.

Altre risorse

Per ulteriori informazioni sul progetto Flutter Theme Agent, consulta il repository del codice. Se hai bisogno di assistenza per creare l'applicazione o cerchi collaboratori per sviluppatori, visita il server discord della community di Google Developers.

Applicazioni di produzione

Se prevedi di eseguire il deployment di Flutter Theme Agent per un pubblico ampio, tieni presente che l'utilizzo dell'API Google Gemini potrebbe essere soggetto a limitazioni di frequenza e altre limitazioni di utilizzo. Se stai considerando la creazione di un'applicazione di produzione con il modello Gemini, dai un'occhiata ai servizi Vertex AI di Google Cloud per aumentare la scalabilità e l'affidabilità della tua app.