1. Panoramica
In questo codelab, ti eserciterai a utilizzare l'agente di prototipazione delle app in Firebase Studio per creare un'app progettata per aiutarti a imparare una nuova lingua. A questo punto, potrai perfezionare e migliorare l'app, pubblicandola facoltativamente su Firebase App Hosting.
Obiettivi didattici
- Best practice per i prompt in Firebase Studio
- Iterare su un'app per aggiungere funzionalità e correggere bug
- Pubblicare un'app su Firebase App Hosting e condividerla con altri
- Monitorare le metriche chiave tramite il riquadro della panoramica dell'app App Hosting
Che cosa ti serve
- Un browser a tua scelta, ad esempio Google Chrome
- Un Account Google per la creazione e la gestione del tuo progetto Firebase
2. Genera la tua app utilizzando l'agente di prototipazione delle app
L'agente Prototipazione app utilizza Gemini in Firebase per creare la tua app. Anche se utilizzi prompt identici, il risultato potrebbe non avere lo stesso aspetto o lo stesso comportamento di quello mostrato in questo codelab. Se hai difficoltà, abbiamo fornito un insieme di file che puoi aggiungere al tuo spazio di lavoro per riprendere il lab in diversi checkpoint di questo codelab.
- Accedi al tuo Account Google e apri Firebase Studio.
- Nel campo Prototipa un'app con l'AI, inserisci una descrizione dell'app che vuoi creare. Per questo codelab, creerai un'app che ti aiuterà a imparare una nuova lingua attraverso storie, flashcard e un tutor AI. Inserisci un prompt, ad esempio:
An app to help someone learn a new language. The app should include AI-generated stories in the target language, where users can click vocab words or the entire story to see it in English. A different section includes flashcards, where the user is shown a word in the chosen language and can click it to flip the card and see the word in English. The final section includes an AI chatbot that allows the user to have simple conversations in the chosen language or ask questions in English about what a word means or how to form a sentence in the chosen language. All content should be beginner-friendly, focusing on basic greetings, common questions/answers, and vocabulary relevant to the lessons or stories. To start, the app should teach the user French, although we might add additional languages in the future. - Fai clic su Prototipo con l'AI.
- Rivedi il progetto dell'app suggerito. Fai clic su
Personalizza per modificare il progetto:- Modifica il nome dell'app in Speak Easy.
- Modifica la combinazione di colori come segue:
Primary color: Asparagus green (#98BF64) for a calm and friendly feel. Secondary color: Light parchment (#F5EBCD) to complement the primary color. Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
Allegato per caricare un'immagine durante la procedura di prompt o blueprint. Le immagini non devono superare i 3 MiB. - Fai clic su Salva.
- Quando il progetto ha incorporato gli aggiornamenti, fai clic su Prototipa questa app.
- Poiché questa app include elementi di AI, l'agente ti chiede una chiave Gemini. Aggiungi la tua chiave API Gemini o fai clic su Genera automaticamente per generare una chiave API Gemini. Se fai clic su Genera automaticamente, Firebase Studio crea un progetto Firebase e genera una chiave API Gemini per te.
- L'agente di prototipazione di app utilizza il progetto dell'app per creare una prima versione dell'app. Al termine, viene visualizzata l'anteprima dell'app insieme a un'interfaccia di chat di Gemini. Prenditi un momento per testare l'app. Anche se non ha l'aspetto che avevi immaginato, la sezione successiva descrive come aggiungere nuove funzionalità e perfezionare il design.
3. (Facoltativo) Ottieni il codice
Se hai difficoltà o vuoi seguire più da vicino l'app di esempio, utilizza i file di esempio forniti in diversi checkpoint del codelab.
- Scarica i file nella cartella.
- In Firebase Studio, fai clic su
Passa al codice per aprire la Vista codice. - Trascina i file scaricati nel riquadro Esplora di Firebase Studio. Consenti ai file di sostituire eventuali file esistenti.
- Fai clic su Passa a Prototyper per continuare il codelab utilizzando la versione di esempio dell'app.
4. Testare, iterare ed eseguire il debug della funzionalità dell'app
Durante l'anteprima dell'app, potresti notare bug o funzionalità impreviste. Nella versione di esempio dell'app, aggiungeremo le seguenti modifiche e correzioni:
- Nel generatore di storie con l'AI, gli utenti dovrebbero essere in grado di fare clic sulle parole del vocabolario per ottenere una definizione in inglese.
- Le schede dovrebbero essere visualizzate in francese e poi passare all'inglese quando vengono selezionate.
- L'utente dovrebbe essere in grado di accedere a una pagina delle impostazioni e passare all'apprendimento del giapponese anziché del francese.
Obiettivo 1: aggiungere parole del vocabolario al generatore di storie con l'AI
(Facoltativo) Per utilizzare la versione di esempio dell'app da questo punto, scarica e trascina questi file nel riquadro Explorer di Firebase Studio nella visualizzazione Codice.
- Nell'interfaccia della chat, descrivi la funzionalità che vuoi aggiungere:
In the AI Story Generator, users should be able to click vocab words or phrases to get the definition in English. Words or phrases should be underlined to indicate they can be clicked. - Testare l'app nella finestra di anteprima. Aggiornerai l'aspetto dell'app in un secondo momento, quindi per ora concentrati solo sulla funzionalità.
- Se l'app non funziona come previsto, continua a chiedere all'agente di prototipazione di apportare modifiche. Ad esempio:
IMPORTANT: Be sure to underline and provide a definition for most words and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the story appears multiple times, only underline and define the first instance. - Fai clic su Passa al codice per aprire la visualizzazione del codice, dove puoi vedere tutti i file della tua app e modificare direttamente il codice. Se c'è un bug che Gemini non riesce a risolvere, a volte è più facile modificare manualmente un file. Quando è tutto pronto, passa alla modalità Prototyper per continuare a utilizzare l'agente di prototipazione di app.
Obiettivo 2: aggiungi le traduzioni alle schede
(Facoltativo) Per utilizzare la versione di esempio dell'app da questo punto, scarica e trascina questi file nel riquadro Explorer di Firebase Studio nella visualizzazione Codice.
Segui la stessa procedura descritta sopra, utilizzando l'interfaccia di chat per descrivere la funzionalità, testarla nella finestra di anteprima, quindi utilizza prompt aggiuntivi o la visualizzazione Codice per aggiungere le traduzioni alle schede flash. Prova un prompt come:
The flash cards should appear in the target language to start, then switch to
English when clicked.
A volte, l'agente Prototipazione app non riconosce la presenza di un bug. Descrivere ciò che vedi e ciò che deve essere corretto può essere più efficace, ad esempio:
The flip button for the flash cards isn't working. Can you debug it? All flash
cards are only showing in English.
Obiettivo 3: aggiungi una nuova lingua
(Facoltativo) Per utilizzare la versione di esempio dell'app da questo punto, scarica e trascina questi file nel riquadro Explorer di Firebase Studio nella visualizzazione Codice.
Prova un prompt come:
Add a settings section to the app, where users can swap to a new language
to learn. Add Japanese to the list of languages the user can pick from. If
the user selects Japanese, the AI-generated stories, flash cards, and chatbot
tutor should all use Japanese instead of French.
5. Esegui l'iterazione sul design della tua app
(Facoltativo) Per utilizzare la versione di esempio dell'app da questo punto, scarica e trascina questi file nel riquadro Explorer di Firebase Studio nella visualizzazione Codice.
Ora che la tua app ha tutte le funzionalità che desideri, è il momento di lavorare sullo stile.
Cambiare la combinazione di colori dell'app
Puoi specificare i colori che vuoi utilizzare o lasciare che sia l'agente Prototipazione app a prendere l'iniziativa. Nell'interfaccia di chat, puoi anche fare clic sull'opzione Allegato per caricare un'immagine dei colori o dello stile che vuoi utilizzare. Se preferisci utilizzare un prompt, prova:
Add color to the design of the app. Use modern, clean colors that adhere
to accessibility standards and have a calming feel.
Aggiornare il testo utilizzato nell'app
Ad esempio, invece di "AI Chatbot Tutor", potresti voler che dica solo "Chat":
Change the text "AI Chatbot Tutor" to "Chat".
Modificare l'interfaccia utente dell'app per renderla più intuitiva
Ad esempio, anziché chiedere all'utente di premere un pulsante per inviare il testo, potresti consentirgli di premere Return sulla tastiera:
In the story generator section, allow the user to press the return key on
the keyboard to submit the text.
Aggiungi l'opzione per consentire all'utente di scegliere tra la modalità Chiaro e la modalità Buio
Molti utenti potrebbero preferire la possibilità di scegliere tra un tema più chiaro o più scuro per l'app. Valuta quale potrebbe essere il posto più logico per trovare questa opzione:
Add an icon in the upper right corner to dynamically switch the color theme of
the app between dark mode and light mode.
Suggerimenti per i prompt e il debug
- Ricevi aiuto con i prompt:se hai difficoltà a spiegare all'agente Prototipazione app cosa vuoi, prova a chiedere a Gemini per Google di aiutarti a perfezionare il prompt. Scopri di più sui prompt efficaci.
- Test su altri dispositivi: in modalità Prototipo, fai clic su
Condividi link di anteprima per testare l'app su altri dispositivi. - Utilizza gli strumenti integrati:nella visualizzazione Codice, utilizza le funzionalità di debug e generazione di report integrate di Firebase Studio per esaminare, eseguire il debug e controllare la tua app.
- Inizia in modo semplice:lavora su una funzionalità alla volta. Ti consigliamo di iniziare con un insieme di funzionalità di base nel prototipo, per poi espanderlo una volta che funzionano come previsto.
- Descrivi i bug:se qualcosa non funziona, descrivi il comportamento attuale all'agente Prototipazione app, seguito dal comportamento che desideri.
- Esegui il rollback quando necessario:quando l'agente Prototipazione app fraintende un prompt o introduce un problema difficile da risolvere, fai clic sul pulsante Ripristina per ripristinare una versione precedente dell'app e riprovare con un prompt diverso.
6. (Facoltativo) Pubblica l'app
(Facoltativo) Per utilizzare la versione di esempio dell'app da questo punto, scarica e trascina questi file nel riquadro Explorer di Firebase Studio nella visualizzazione Codice.
Dopo aver testato l'app e aver verificato che ti soddisfa, puoi pubblicarla sul web con Firebase App Hosting.
- Fai clic su Pubblica per creare un nuovo progetto Firebase e iniziare la configurazione di App Hosting. Viene visualizzato il riquadro Pubblica la tua app.
- Nel passaggio Progetto Firebase, prendi nota del nome del progetto Firebase creato per te, poi fai clic su Avanti.
- Nel passaggio Collega l'account di fatturazione Cloud, scegli una delle seguenti opzioni:
- Seleziona l'account di fatturazione Cloud che vuoi collegare al tuo progetto Firebase.
- Se non hai un account di fatturazione Cloud o vuoi crearne uno nuovo, fai clic su Crea un account di fatturazione Cloud. Si apre il testo di Google Cloud, dove puoi creare un nuovo account di fatturazione Cloud self-service. Dopo aver creato l'account, torna a Firebase Studio e selezionalo dall'elenco Collega fatturazione Cloud.
- Fai clic su Avanti. Firebase Studio collega l'account di fatturazione al progetto associato al tuo spazio di lavoro, creato quando hai generato automaticamente una chiave API Gemini o quando hai fatto clic su Pubblica. Dopodiché, App Hosting configura un ambiente completamente gestito per la tua app in Google Cloud.
- Fai clic su Crea la tua prima implementazione. Firebase Studio avvia l'implementazione di App Hosting. Per completare l'operazione potrebbero essere necessari fino a 10 minuti. Per scoprire di più su cosa succede dietro le quinte, consulta Procedura di build di App Hosting.
- Al termine dell'implementazione, viene visualizzata la Panoramica app con un URL e approfondimenti sull'app basati sull'osservabilità di App Hosting. Per utilizzare un dominio personalizzato (ad esempio example.com o app.example.com) anziché il dominio generato da Firebase, puoi aggiungere un dominio personalizzato nel testo Firebase.
Per saperne di più su App Hosting, consulta Informazioni su App Hosting e sul suo funzionamento.
7. (Facoltativo) Monitorare la tua app
Il riquadro Panoramica app di App Hosting fornisce metriche e informazioni chiave sulla tua app, consentendoti di monitorare le prestazioni della tua app web utilizzando gli strumenti di osservabilità integrati di App Hosting. Una volta implementato il sito, puoi accedere alla panoramica facendo clic su Pubblica. Da questo riquadro puoi:
- Fai clic su Crea rollout per rilasciare una nuova versione della tua app.
- Condividi il link alla tua app o aprirla direttamente in Visita la tua app.
- Esamina un riepilogo del rendimento della tua app negli ultimi 7 giorni, incluso il numero totale di richieste e lo stato dell'ultimo lancio. Fai clic su Visualizza dettagli per accedere a ulteriori informazioni nel testo di Firebase.
- Visualizza un grafico del numero di richieste ricevute dalla tua app nelle ultime 24 ore, suddivise per codice di stato HTTP.
Se chiudi il riquadro Panoramica app, puoi riaprirlo in qualsiasi momento facendo clic su Pubblica.
Scopri di più sulla gestione e sul monitoraggio delle implementazioni di App Hosting in Gestire le implementazioni e le release.
8. Conclusione
Complimenti! Hai creato un'app utilizzando Firebase Studio. Potresti aggiungere molte altre funzionalità all'app, ad esempio un dizionario più ampio, altre lingue, audio, animazioni o una selezione della difficoltà. Continua a sperimentare con la tua app o crea qualcosa di nuovo.