Obtén una vista previa de la aplicación

Firebase Studio ofrece varias formas de obtener una vista previa de tu aplicación y probarla durante el desarrollo. Esto incluye usar el App Prototyping agent y aprovechar el visor web integrado, y los visores web y de Android disponibles en los espacios de trabajo de Firebase Studio.

Habilita y configura tu entorno de vista previa

Si usas una plantilla o generas tu app con el App Prototyping agent, a menudo las vistas previas ya están configuradas por ti. Si las vistas previas aún no están configuradas en tu plantilla, puedes configurarlas en el archivo de configuración de Nix del proyecto.

1. En tu espacio de trabajo, abre .idx/dev.nix.

   Firebase Studio genera automáticamente este archivo cuando creas un entorno de trabajo nuevo y, además, incluye los entornos de vista previa aplicables según la plantilla que selecciones. Si el archivo no está en tu repositorio de código Firebase Studio, créalo y, luego, establece el atributo idx.previews en true. Luego, agrega atributos de configuración, como se muestra en el siguiente ejemplo:

   { 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";
         };
       };
     };
   }
   

   Para obtener una lista completa de los atributos de Nix en Firebase Studio, consulta Nix + Firebase Studio.

2. Vuelve a compilar tu entorno:

   • En la paleta de comandos (Cmd+Shift+P/Ctrl+Shift+P), ejecuta el comando Firebase Studio: Reinicio forzado.
   • En la notificación Se actualizó la configuración del entorno, haz clic en Volver a compilar el entorno.

   Cuando vuelvas a compilar el entorno después de modificar el archivo dev.nix, aparecerá el panel de vista previa en tu espacio de trabajo, en el que se mostrarán una o ambas pestañas Android y Web, según lo que hayas habilitado.

Usa vistas previas de apps

Firebase Studio ofrece vistas previas web en emuladores de Chrome y Android en espacios de trabajo de Flutter que instalan tu app en el entorno de vista previa. Esto te permite probar tu app por completo, de extremo a extremo, directamente desde tu espacio de trabajo.

Actualiza las vistas previas para la Web y Android

Firebase Studio se conecta a las funciones de recarga en caliente de los marcos de trabajo subyacentes (como npm run start y flutter hot-reload) para proporcionarte un ciclo de desarrollo interno optimizado. Firebase Studio proporciona los siguientes tipos de cargas:

• Recarga en caliente automática: Las recargas en caliente se realizan automáticamente cuando guardas un archivo. A veces, se conoce como Reemplazo de módulo en caliente (o HMR). Una carga en caliente actualiza tu app sin volver a cargar la página (para apps web) o sin reiniciar ni reinstalar la app (para emuladores). Este enfoque es útil para preservar el estado activo de tu app, pero es posible que no siempre funcione como se espera.

• Recarga manual completa: Esta opción equivale a una actualización de página (para apps web) o un reinicio de la app (para emuladores). Te recomendamos que uses una recarga completa para capturar cambios significativos en tu código fuente, como cuando refactorizas grandes fragmentos de código.

• Reinicio forzado manual: Esta opción realiza un reinicio completo del sistema de vista previa de Firebase Studio, lo que incluye detener y reiniciar el servidor web de tu app.

Todas las opciones para volver a cargar están disponibles en la barra de herramientas de vista previa o en la paleta de comandos (Cmd+Shift+P en Mac o Ctrl+Shift+P en ChromeOS, Windows o Linux), en la categoría Firebase Studio.

Para usar la barra de herramientas de vista previa, sigue estos pasos:

1. Haz clic en el ícono Volver a cargar para actualizar la página. Esto fuerza una recarga completa. Para obtener un tipo de actualización diferente, haz clic en la flecha junto al ícono de volver a cargar para expandir el menú.

2. Selecciona la opción de actualización que quieras en el menú: Recarga en caliente, Recarga completa o Reinicio forzado.

Comparte la vista previa web con otras personas

Para compartir la vista previa web de tu app con otras personas y obtener comentarios, habilita el acceso y, luego, comparte el vínculo directo a la vista previa:

1. En la barra de herramientas de vista previa web, haz clic en el ícono Compartir vínculo de vista previa, a la derecha de la barra de direcciones, para abrir el menú de uso compartido.

2. Permite que otras personas accedan a tu espacio de trabajo con una de estas opciones:

   • Hacer pública la vista previa: Haz que la vista previa de tu espacio de trabajo sea de acceso público. Esto permite que cualquier persona en Internet acceda al servidor de vista previa que se ejecuta en tu espacio de trabajo mientras este esté activo y hasta que desactives el acceso público.

   • Administra el acceso al espacio de trabajo. Comparte tu espacio de trabajo solo con las personas a las que quieras otorgar acceso.

3. Selecciona Copiar URL de vista previa para copiar un vínculo directo a la vista previa del espacio de trabajo, que puedes enviar a las personas de las que deseas recibir comentarios. También puedes usar el código QR que aparece para abrir la vista previa en tu dispositivo móvil.

Configura el guardado automático y la recarga en caliente

De forma predeterminada, Firebase Studio guarda automáticamente tu trabajo un segundo después de que dejas de escribir, lo que activa las recargas en caliente automáticas. Si quieres que Firebase Studio guarde tu trabajo en un intervalo diferente, cambia la configuración de guardado automático. También puedes desactivar la función Guardar automáticamente.

Se desconectó el backend de la vista previa

Puedes ignorar el mensaje "Preview backend disconnected".

Próximos pasos

• Publica con Firebase.
• Supervisa tu app.