Visualizza l'anteprima dell'app

Firebase Studio offre diversi modi per visualizzare l'anteprima e testare la tua applicazione durante lo sviluppo. Questi includono l'utilizzo del App Prototyping agent e il visualizzatore di anteprime web integrato e i visualizzatori di anteprime web e Android disponibili nei workspace di Firebase Studio.

Abilitare e configurare l'ambiente di anteprima

Se utilizzi un modello o generi l'app utilizzando App Prototyping agent, le anteprime sono spesso già configurate. Se le anteprime non sono già configurate nel modello, puoi configurarle nel file di configurazione Nix del progetto.

1. Dal workspace, apri .idx/dev.nix.

   Firebase Studio genera automaticamente questo file quando crei un nuovo workspace e include tutti gli ambienti di anteprima applicabili in base al modello selezionato. Se il file non è nel tuo Firebase Studio repository di codice, crealo e imposta l'attributo idx.previews su true. Aggiungi quindi gli attributi di configurazione, come mostrato nell'esempio seguente:

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in Firebase Studio, see
     # https://firebase.google.com/docs/studio/customize-workspace
   
     # Enable previews and customize configuration
     idx.previews = {
       enable = true;
       previews = {
         # The following object sets web previews
         web = {
           command = [
             "npm"
             "run"
             "start"
             "--"
             "--port"
             "$PORT"
             "--host"
             "0.0.0.0"
             "--disable-host-check"
           ];
           manager = "web";
           # Optionally, specify a directory that contains your web app
           # cwd = "app/client";
         };
         # The following object sets Android previews
         # Note that this is supported only on Flutter workspaces
         android = {
           manager = "flutter";
         };
       };
     };
   }
   

   Per un elenco completo degli attributi Nix in Firebase Studio, consulta Nix + Firebase Studio.

2. Ricompila l'ambiente:

   • Dalla tavolozza dei comandi (Cmd+Shift+P/Ctrl+Shift+P), esegui il Firebase Studio: riavvio forzato comando.
   • Nella notifica Configurazione dell'ambiente aggiornata, fai clic su Ricompila ambiente.

   Quando ricompili l'ambiente dopo aver modificato il file dev.nix, nel workspace viene visualizzato il riquadro di anteprima con le schede Android e/o Web, a seconda di ciò che hai abilitato.

Utilizzare le anteprime delle app

Firebase Studio offre anteprime web su Chrome ed emulatori Android nei workspace Flutter che installano l'app nell'ambiente di anteprima. In questo modo puoi testare completamente l'app, end-to-end, direttamente dal workspace.

Aggiornare le anteprime per web e Android

Firebase Studio si integra con le funzionalità di ricaricamento rapido dei framework sottostanti (come npm run start e flutter hot-reload) per offrirti un ciclo di sviluppo interno semplificato. Firebase Studio fornisce i seguenti tipi di ricaricamento:

• Ricaricamento a caldo automatico: i ricaricamenti a caldo vengono eseguiti automaticamente quando salvi un file. A volte noto come Hot Module Replacement (o HMR), un ricaricamento a caldo aggiorna l'app senza ricaricare la pagina (per le app web) o senza riavviare o reinstallare l'app (per gli emulatori). Questo approccio è utile per preservare lo stato live dell'app, ma potrebbe non funzionare sempre come previsto.

• Ricaricamento completo manuale: questa opzione è equivalente a un aggiornamento della pagina (per le app web) o a un riavvio dell'app (per gli emulatori). Ti consigliamo di utilizzare un ricaricamento completo per acquisire modifiche significative al codice sorgente, ad esempio quando esegui il refactoring di grandi blocchi di codice.

• Riavvio forzato manuale: questa opzione esegue un riavvio completo del sistema di anteprima di Firebase Studio che include l'arresto e il riavvio del server web dell'app.

Tutte le opzioni di ricaricamento sono disponibili utilizzando la barra degli strumenti di anteprima o la tavolozza dei comandi (Cmd+Shift+P su Mac o Ctrl+Shift+P su ChromeOS, Windows o Linux), nella categoria Firebase Studio.

Per utilizzare la barra degli strumenti di anteprima:

1. Fai clic sull'icona Ricarica per aggiornare la pagina. In questo modo viene forzato un ricaricamento completo. Per un tipo di aggiornamento diverso, fai clic sulla freccia accanto all'icona di ricaricamento per espandere il menu.

2. Seleziona l'opzione di aggiornamento che preferisci dal menu: Ricaricamento a caldo, Ricaricamento completo o Riavvio forzato.

Condividere l'anteprima web con altri utenti

Puoi condividere l'anteprima web dell'app con altri utenti per ricevere feedback abilitando l'accesso e poi condividendo il link diretto all'anteprima:

1. Nella barra degli strumenti di anteprima web, fai clic sull'icona Condividi link di anteprima a destra della barra degli indirizzi per aprire il menu di condivisione.

2. Consenti ad altri utenti di accedere al tuo workspace utilizzando una di queste opzioni:

   • Rendi pubblica l'anteprima: rendi l'anteprima del workspace accessibile pubblicamente. In questo modo, chiunque su internet può raggiungere il server di anteprima in esecuzione sul tuo workspace mentre il workspace è attivo e finché non disattivi l'accesso pubblico.

   • Gestisci l'accesso al workspace. Condividi il workspace solo con le persone a cui vuoi concedere l'accesso.

3. Seleziona Copia URL di anteprima per copiare un link diretto all'anteprima del workspace, che puoi poi inviare alle persone da cui vuoi ricevere feedback. Puoi anche utilizzare il codice QR visualizzato per aprire l'anteprima sul tuo dispositivo mobile.

Configurare il salvataggio automatico e il ricaricamento rapido

Per impostazione predefinita, Firebase Studio salva automaticamente il tuo lavoro un secondo dopo che hai smesso di digitare, attivando i ricaricamenti a caldo automatici. Se vuoi Firebase Studio salvare il tuo lavoro a un intervallo diverso, modifica l' impostazione di salvataggio automatico. Puoi anche disattivare il salvataggio automatico.

Backend di anteprima disconnesso

Puoi ignorare il messaggio "Backend di anteprima disconnesso".

Passaggi successivi

• Pubblicare con Firebase.
• Monitorare l'app.