Visualizar o app

O Firebase Studio fornece um visualizador que renderiza uma visualização em tempo real do aplicativo com o editor de código.

Ativar e configurar o ambiente de visualização

Se você usa um modelo, as visualizações geralmente já estão configuradas. Se as visualizações ainda não estiverem configuradas no modelo, você poderá configurá-las 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 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 conferir uma lista completa de atributos do Nix em Firebase Studio, consulte Nix + Firebase Studio.

2. Recriar o ambiente:

   • Na paleta de comandos (Cmd+Shift+P/Ctrl+Shift+P), execute o comando Firebase Studio: Hard restart.
   • 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 aparece no seu espaço de trabalho mostrando uma ou ambas as guias Android e Web, dependendo do que você ativou.

Usar visualizações de apps

O Firebase Studio oferece visualizações da Web em emuladores do Chrome e do Android em espaços de trabalho do Flutter que instalam seu app no ambiente de visualização. Isso permite testar o app completamente, diretamente no seu espaço de trabalho.

Atualizar visualizações para a Web e o Android

O Firebase Studio se conecta às funcionalidades de recarga imediata dos frameworks subjacentes (como npm run start e flutter hot-reload) para oferecer um ciclo de desenvolvimento interno simplificado. Firebase Studio oferece os seguintes tipos de recargas:

• Recarregar automaticamente: as recargas automáticas são realizadas automaticamente quando você salva um arquivo. Às vezes conhecida como Hot Module Replacement (ou HMR, na sigla em inglês), uma recarga dinâmica atualiza seu app sem recarregar a página (para apps da Web) ou sem reiniciar ou reinstalar o app (para emuladores). Essa abordagem é útil para preservar o estado ativo do app, mas pode não funcionar como esperado.

• Recarregamento manual completo: essa opção equivale a uma atualização de página (para apps da Web) ou uma reinicialização de app (para emuladores). Recomendamos usar uma recarga completa para capturar mudanças significativas no código-fonte, como ao refatorar grandes partes 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 app.

Todas as opções de recarga estão disponíveis usando a barra de ferramentas de visualização ou a 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 atualização para abrir o menu.

2. Selecione a opção de atualização desejada no menu: Recarregar dinâmico, Recarregar completamente ou Reiniciar completamente.

Compartilhar a visualização da Web com outras pessoas

Para compartilhar a visualização da Web do app com outras pessoas e receber feedback, ative o acesso e compartilhe o link direto para a visualização:

1. Na barra de ferramentas de visualização da Web, clique no ícone Compartilhar link de visualização, à 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 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 dar acesso.

3. Selecione Copiar URL da visualização 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. Você também pode usar o código QR que aparece para abrir a visualização no seu dispositivo móvel.

Configurar o salvamento automático e a recarga dinâmica

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 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

• Publicar com o Firebase.
• Monitore seu app.