Visualizar o app

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

O Firebase Studio conta com um visualizador que renderiza uma prévia em tempo real do aplicativo com seu editor de código.

Ativar e configurar o ambiente de visualização

Geralmente, quando você usa um modelo, as prévias já estão configuradas. Se as prévias ainda não estiverem configuradas no modelo, configure-as no arquivo de configuração do Nix do projeto.

1. No seu espaço de trabalho, abra .idx/dev.nix.

   O Firebase Studio gera esse arquivo automaticamente quando você cria um novo espaço de trabalho e inclui todos os ambientes de visualização aplicáveis com base no modelo selecionado. Se o arquivo não estiver no repositório de código do Firebase Studio, crie-o e defina o atributo idx.previews como true. Em seguida, adicione atributos de configuração, conforme mostrado no exemplo abaixo:

   { 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 ver uma lista completa de atributos do Nix no Firebase Studio, consulte Nix + Firebase Studio.

2. Recrie o ambiente:

   • Na paleta de comandos (Cmd+Shift+P/Ctrl+Shift+P), execute o comando Firebase Studio: reinicialização forçada.
   • Na notificação Configuração do ambiente atualizada, clique em Recriar ambiente.

   Quando você recria o ambiente depois de modificar o arquivo dev.nix, o painel de visualização é exibido no espaço de trabalho mostrando uma ou ambas as guias Android e Web, dependendo do que você ativou.

Usar prévias do aplicativo

O Firebase Studio exibe prévias da Web com emuladores do Chrome e do Android em espaços de trabalho do Flutter que instalam o aplicativo no ambiente de visualização. Isso permite testar o aplicativo por completo, diretamente pelo seu espaço de trabalho.

Atualizar as prévias para a Web e o Android

O Firebase Studio se integra às funcionalidades de recarga automática dos frameworks básicos (como npm run start e flutter hot-reload) para permitir um ciclo de desenvolvimento interno simplificado. O Firebase Studio conta com estes tipos de recargas:

• Recarga automática: essas recargas ocorrem automaticamente quando você salva um arquivo. Às vezes conhecida como Substituição de módulo a quente (ou HMR, na sigla em inglês), uma recarga automática atualiza seu aplicativo sem recarregar a página (para web apps) ou sem reiniciar ou reinstalar o aplicativo (para emuladores). Essa abordagem é útil para preservar o estado ativo do app, mas nem sempre funciona como esperado.

• Recarregamento manual completo: essa opção equivale a uma atualização de página (para web apps) ou uma reinicialização do aplicativo (para emuladores). Recomendamos usar uma recarga completa para assimilar mudanças significativas no código-fonte, como ao refatorar trechos grandes do código.

• Reinicialização forçada manual: essa opção reinicia completamente o sistema de visualização do Firebase Studio, o que inclui a interrupção e a reinicialização do servidor da Web do aplicativo.

Todas as opções de recarga estão disponíveis na barra de ferramentas de visualização ou na paleta de comandos (Cmd+Shift+P no Mac ou Ctrl+Shift+P no ChromeOS, Windows ou Linux), na categoria Firebase Studio.

Para usar a barra de ferramentas de visualização, siga estas etapas:

1. Clique no ícone Recarregar para atualizar a página. Isso força uma recarga completa. Para um tipo diferente de atualização, clique na seta ao lado do ícone de recarga para abrir o menu.

2. Selecione a opção de atualização que você quer no menu: Recarga automática, Recarregamento completo ou Reinicialização forçada.

Compartilhar a prévia da Web com outras pessoas

Para compartilhar a prévia da Web do aplicativo com outras pessoas e receber feedback, ative o acesso e compartilhe o link direto para a prévia:

1. Na barra de ferramentas de visualização da Web, clique no ícone Compartilhar link da prévia, à direita da barra de endereço, para abrir o menu de compartilhamento.

2. Permita que outras pessoas acessem seu espaço de trabalho usando uma destas opções:

   • Tornar a prévia pública: torne a prévia do seu espaço de trabalho acessível ao público. Isso permite que qualquer pessoa na Internet acesse o servidor de visualização em execução no seu espaço de trabalho enquanto ele estiver ativo e até que você desative o acesso público.

   • Gerencie o acesso ao espaço de trabalho. Compartilhe seu espaço de trabalho apenas com as pessoas a quem você quer conceder acesso.

3. Selecione Copiar URL da prévia para copiar um link direto para a visualização do espaço de trabalho, que pode ser enviado para as pessoas de quem você quer receber feedback. Também é possível usar o QR code exibido para abrir a prévia no seu dispositivo móvel.

Configurar o salvamento automático e a recarga automática

Por padrão, o Firebase Studio salva automaticamente seu trabalho um segundo depois que você para de digitar, acionando recargas automáticas. Se você quiser que o Firebase Studio salve seu trabalho em um intervalo diferente, mude a configuração de salvamento automático. Também é possível desativar o salvamento automático.

Próximas etapas

• Publique com o Firebase.
• Monitore seu aplicativo.