Inizia a utilizzare l'agente di prototipazione di app

Firebase Studio include un'interfaccia basata sul web che ti consente di creare rapidamente prototipi e generare app web basate sull'IA utilizzando prompt multimodali, tra cui linguaggio naturale, immagini e strumenti di disegno. L'agente supporta le app Next.js, con altre piattaforme e framework previsti in futuro.

L'agente di prototipazione di app è un flusso di sviluppo no-code semplificato che utilizza l'AI generativa per sviluppare, testare, eseguire l'iterazione e pubblicare un'app web agentica full-stack. Descrivi la tua idea di app in linguaggio naturale con un'immagine facoltativa e l'agente genera un blueprint dell'app, il codice e un'anteprima web. Per aiutarti a sviluppare e pubblicare la tua app full-stack, Firebase Studio può eseguire automaticamente il provisioning dei seguenti servizi:

  • Se la tua app utilizza l'IA: Firebase Studio aggiunge l'Gemini API per sviluppatori alla tua app, sfruttando la potenza dei flussi di Genkit per lavorare con Gemini. Puoi utilizzare la tua chiave Gemini API o lasciare che Firebase Studio esegui il provisioning di un progetto Firebase e di una chiave API Gemini per te.
  • Se vuoi pubblicare la tua app sul web: Firebase Studio crea un progetto e offre un modo rapido per pubblicare la tua app con Firebase App Hosting.

Puoi perfezionare l'app utilizzando il linguaggio naturale, le immagini e gli strumenti di disegno, modificare direttamente il codice, annullare le modifiche, pubblicare l'app e monitorarne il rendimento, il tutto da Firebase Studio.

Inizia

Per iniziare a utilizzare App Prototyping agent, segui questi passaggi:

  1. Accedi al tuo Account Google e apri Firebase Studio.

  2. Nel campo Prototipa un'app con l'IA, descrivi la tua idea di app in linguaggio naturale.

    Se vuoi, aggiungi un'immagine da abbinare al prompt. Può trattarsi di un diagramma del flusso utente ideale della tua app o di una combinazione di colori a cui vuoi attenerti.Firebase Studio Le immagini possono avere una dimensione massima di 3 MiB.

  3. Fai clic su Prototipo con l'IA.

    L'agente di prototipazione di app restituisce un blueprint dell'app, che fornisce un nome dell'app proposto, le funzionalità di base e le linee guida per lo stile.

  4. Esamina il progetto. Puoi chiedere a Gemini di apportare miglioramenti e modifiche e modificare direttamente il blueprint:

    • Fai clic su Personalizza e modifica direttamente il blueprint. Apporta le modifiche e fai clic su Salva.

    • Nel campo Descrivi… del riquadro della chat, aggiungi domande per chiarire e fornire contesto. Puoi anche caricare altre immagini.

  5. Quando approvi il progetto, fai clic su Crea il prototipo di questa app.

    Gemini genera il codice dal blueprint e restituisce un'anteprima web da esaminare.

  6. Se la tua app utilizza l'IA, ti viene chiesto di aggiungere o generare una chiave Gemini API. Se fai clic su Genera automaticamente,Firebase Studio viene eseguito il provisioning di un progetto Firebase e di una chiave Gemini API per te.

Dopo aver creato l'app iniziale, puoi:

  • Esegui test e iterazioni:testa attentamente l'app e utilizza App Prototyping agent per eseguire l'iterazione sul codice e sul blueprint finché non hai ottenuto il risultato desiderato. Puoi anche fare clic su </> per accedere alla vista codice e modificare il codice nell'area di lavoro Firebase Studio.

  • Esamina e interagisci con la tua app:al termine della generazione del codice, viene visualizzata un'anteprima dell'app. Puoi interagire direttamente con l'anteprima per verificarla. Scopri di più su come anteprime dell'app.

  • Esegui il debug dell'app:fai clic su Icona di impostazione del codice Passa a Codice per aprire la visualizzazione Code, in cui puoi utilizzare le funzionalità di reporting e debug integrate di Firebase Studio per ispezionare, eseguire il debug e controllare la tua app. Torna a Prototyper mode at any time.

  • Pubblicare la tua app con Firebase App Hosting: fai clic su Pubblica per pubblicare la tua app su App Hosting.

  • Monitora e ottimizza le funzionalità dell'app e dell'IA: monitora il rendimento e l'utilizzo della tua app web con l'osservabilità in App Hosting e i flussi di IA generativa con la telemetria di Firebase in Genkit. Scopri di più su come monitorare le app web.

.

Passaggi successivi