Visualizza l'anteprima dell'app

Firebase Studio offre diversi modi per visualizzare l'anteprima e testare la tua applicazione durante lo sviluppo. Ciò include l'utilizzo di App Prototyping agent e lo sfruttamento dei visualizzatori di anteprima web integrati, nonché dei visualizzatori di anteprima web e Android disponibili all'interno dei workspace Firebase Studio.

Attivare e configurare l'ambiente di anteprima

Se utilizzi un modello o generi la tua 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. Dallo spazio 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 è presente nel repository di codice Firebase Studio, crealo e imposta l'attributo idx.previews su true. Poi, 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: Hard restart.
   • Nella notifica Configurazione dell'ambiente aggiornata, fai clic su Ricrea ambiente.

   Quando ricompili l'ambiente dopo aver modificato il file dev.nix, nel riquadro di anteprima dell'area di lavoro vengono visualizzate una o entrambe le schede Android e Web, a seconda di ciò che hai attivato.

Punto chiave: puoi visualizzare l'anteprima dell'app in una scheda del browser separata facendo clic sull'icona Apri in una nuova finestra nella barra degli strumenti della finestra di anteprima. Questo link popup è utile anche per mostrare a un amico o a un collega il tuo lavoro in corso tramite la condivisione dello spazio di lavoro. Se chiudi un'anteprima e vuoi riaprirla, apri la tavolozza dei comandi e cerca il comando di anteprima appropriato.

Utilizzare le anteprime delle app

Firebase Studio offre anteprime web su Chrome e su emulatori Android negli spazi di lavoro Flutter che installano l'app nell'ambiente di anteprima. In questo modo puoi testare la tua app completamente, end-to-end, direttamente dal tuo spazio di lavoro.

Aggiornare le anteprime per il 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 ricariche:

• Ricarica rapida automatica: le ricariche rapide vengono eseguite automaticamente quando salvi un file. A volte noto come Hot Module Replacement (o HMR), un ricaricamento rapido 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 attivo dell'app, ma potrebbe non funzionare sempre come previsto.

• Ricarica completa manuale: questa opzione equivale 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 della tua app.

Tutte le opzioni di ricaricamento 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. In questo modo viene forzato un ricaricamento completo. Per un altro tipo di aggiornamento, fai clic sulla freccia accanto all'icona di ricarica per espandere il menu.

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

Condividere l'anteprima web con altre persone

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 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 spazio di lavoro utilizzando una delle seguenti opzioni:

   • Rendi pubblica l'anteprima: rendi l'anteprima del tuo spazio di lavoro accessibile pubblicamente. In questo modo, chiunque su internet può raggiungere il server di anteprima in esecuzione nel tuo spazio di lavoro mentre il tuo spazio di lavoro è attivo e finché 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.

     Avviso: la condivisione dello spazio di lavoro consente ad altri utenti di apportare modifiche al tuo codice e accedere ad altre informazioni private come i token di autenticazione salvati nello spazio di lavoro, quindi condividi solo con persone di cui ti fidi. Scopri di più su Condividere il tuo spazio di lavoro.

3. Seleziona Copia URL anteprima per copiare un link diretto all'anteprima dello spazio di lavoro, 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 rapidi automatici. Se vuoi che Firebase Studio salvi il tuo lavoro a un intervallo diverso, modifica l'impostazione di salvataggio automatico. Puoi anche disattivare il salvataggio automatico.

Configurare il salvataggio automatico

1. Apri Firebase Studio.
2. Fai clic sull'icona Impostazioni.
3. Cerca File: Salvataggio automatico e verifica che il campo sia impostato su `afterDelay`.
4. Cerca File: ritardo salvataggio automatico.
5. Inserisci un nuovo intervallo di ritardo del salvataggio automatico, espresso in millisecondi. Le modifiche al tuo lavoro ora vengono salvate automaticamente in base alla nuova impostazione di ritardo del salvataggio automatico.

Disattiva il salvataggio automatico

1. Apri Firebase Studio.
2. Fai clic sull'icona Impostazioni.
3. Cerca File: salvataggio automatico.
4. Fai clic sul menu a discesa e seleziona Off.

Backend dell'anteprima disconnesso

Puoi ignorare senza problemi il messaggio "Preview backend disconnected".

Passaggi successivi

• Pubblica con Firebase.
• Monitorare la tua app.