Visualizza l'anteprima dell'app

Firebase Studio fornisce un'anteprima che mostra una visualizzazione in tempo reale della tua applicazione insieme all'editor di codice.

Attiva e configura l'ambiente di anteprima

Se utilizzi un modello, spesso le anteprime sono già configurate per te. Se le anteprime non sono già configurate nel modello, puoi configurarle nel file di configurazione Nix del progetto.

1. Dall'area di lavoro, apri .idx/dev.nix.

   Firebase Studio genera automaticamente questo file quando crei un nuovo spazio di lavoro e include tutti gli ambienti di anteprima applicabili in base al modello selezionato. Se il file non è nel tuo repository di codice Firebase Studio, creane uno e imposta l'attributo idx.previews su true. Aggiungi 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. Ricostruisci l'ambiente:

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

   Quando ricostruisci l'ambiente dopo aver modificato il file dev.nix, nella tua area di lavoro viene visualizzato il riquadro di anteprima con una o entrambe le schede Android e Web, a seconda di cosa hai attivato.

Utilizzare le anteprime delle app

Firebase Studio offre anteprime web su emulatori Chrome e Android negli spazi di lavoro Flutter che installano la tua app nell'ambiente di anteprima. In questo modo, puoi testare completamente la tua app, da un'estremità all'altra, direttamente dal tuo spazio di lavoro.

Aggiornare le anteprime per il web e Android

Firebase Studio si basa sulle funzionalità di ricarica dinamica dei framework di base (come npm run start e flutter hot-reload) per offrire un ciclo di sviluppo interno semplificato. Firebase Studio fornisce i seguenti tipi di ricarica:

• Ricarica dinamica automatica: le ricariche dinamiche vengono eseguite automaticamente quando salvi un file. A volte nota come sostituzione dei moduli a caldo (o HMR), un caricamento مجددe 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 mantenere lo stato attivo dell'app, ma potrebbe non funzionare sempre come previsto.

• Ricarica completa 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 registrare modifiche significative al codice sorgente, ad esempio durante 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 ricarica sono disponibili utilizzando la barra degli strumenti di anteprima o il riquadro 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. Viene forzata una ricarica completa. Per un tipo di aggiornamento diverso, fai clic sulla freccia accanto all'icona di aggiornamento per espandere il menu.

2. Seleziona l'opzione di aggiornamento che preferisci dal menu: Ricarica dinamica, Ricarica completa o Riavvio forzato.

Condividere l'anteprima web con altri

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

1. Nella barra degli strumenti dell'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 spazio di lavoro utilizzando una delle seguenti opzioni:

   • Rendi pubblica l'anteprima: rendi pubblica l'anteprima della tua area di lavoro. In questo modo, chiunque su internet può raggiungere il server di anteprima in esecuzione nella tua area di lavoro mentre è attiva e fino a quando non disattivi l'accesso pubblico.

   • Gestisci l'accesso allo spazio di lavoro. Condividi il tuo spazio di lavoro solo con le persone a cui vuoi concedere l'accesso.

3. Seleziona Copia URL di anteprima per copiare un link diretto all'anteprima dell'area di lavoro, che potrai poi inviare a chi vuoi ricevere un 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 il ricaricamento automatico. Se vuoi Firebase Studio salvare il tuo lavoro a un intervallo diverso, modifica l'impostazione del salvataggio automatico. Puoi anche disattivare il salvataggio automatico.

Passaggi successivi

• Pubblica con Firebase.
• Monitora la tua app.