Visualizar o app

O Project IDX permite visualizar seu trabalho renderizando uma imagem ao vivo do aplicativo com o editor de código. As visualizações da Web do IDX renderizam um frame inline (iFrame) do servidor da Web do app e um emulador do Android baseado na nuvem.

Ativar e configurar o ambiente de visualização

Para visualizar seu app no espaço de trabalho, configure o ambiente de visualização.

1. Ative as visualizações no arquivo de configuração .idx/dev.nix. O IDX 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. Crie o arquivo se ele não estiver no repositório de código IDX. Defina o atributo idx.previews como true e adicione atributos de configuração, como mostrado no exemplo a seguir:

   { pkgs, ... }: {
   
   # NOTE: This is an excerpt of a complete Nix configuration example.
   # For more information about the dev.nix file in IDX, see
   # https://developers.google.com/idx/guides/customize-idx-env
   
   # 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";
       };
       # 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 Nix no IDX, consulte Nix + IDX (link em inglês).

2. Recrie seu ambiente:

   • Execute o comando Project IDX: reinicialização forçada na paleta de comandos (Cmd+Shift+P/Ctrl+Shift+P).
   • Clique em Recriar ambiente na notificação Configuração atualizada do ambiente.

   Quando você recriar o ambiente depois de modificar o arquivo dev.nix, o painel de visualização vai aparecer no espaço de trabalho mostrando as guias Android e Web, dependendo do que você tiver ativado. No entanto, talvez seja necessário aguardar um pouco para que o ambiente seja recriado. Tente fechar o espaço de trabalho e reabri-lo no painel do IDX.

Importante: você pode conferir seu app em outra guia do navegador clicando no ícone Abrir em uma nova janela na barra de ferramentas da janela. Esse link também é útil para demonstrar seu trabalho em andamento para um amigo ou colega usando o compartilhamento do espaço de trabalho.

Usar visualizações de apps

O IDX 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 para que você possa testá-lo de ponta a ponta, diretamente do seu espaço de trabalho.

Atualizar visualizações para Web e Android

O IDX se conecta às funcionalidades de recarga automática dos frameworks subjacentes (como npm run start e flutter hot-reload) para oferecer um loop de desenvolvimento interno estreito. Esta seção aborda os diferentes tipos de recarregamentos para ajudar a solucionar problemas caso o comportamento padrão no IDX não funcione bem para seu caso de uso.

• Recarga automática automática: as recargas automáticas são realizadas automaticamente quando você salva um arquivo. Às vezes conhecida como Hot Module Replace (ou HMR), uma recarga automática atualiza o app sem recarregar a página (para apps da Web) ou sem reiniciar ou reinstalar o app (para emuladores). Essa abordagem é excelente para preservar o estado ativo do app, mas às vezes pode não funcionar como esperado.

• Reload completo manual: essa opção equivale a uma atualização de página (para apps da Web) ou a uma reinicialização de app (para emuladores). Recomendamos o uso de uma atualização completa para capturar mudanças significativas no seu código-fonte, como ao refatorar grandes blocos de código.

• Reinicialização forçada manual: essa opção executa uma reinicialização completa do sistema de visualização do IDX, o que inclui interromper e reiniciar o servidor da Web do app.

Todas as opções de recarregamento 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 IDX.

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

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

2. Selecione a opção de atualização que você quer no menu: Hot Reload, Full Reload ou Hard Restart.

   

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

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

Configurar o salvamento automático

1. Abra o projeto IDX.
2. Clique no ícone Settings. A janela Configurações é exibida.
3. Pesquise Files: Auto Save e verifique se o campo está definido como "afterDelay".
4. Pesquise Arquivos: Tempo para salvar automaticamente. O campo "Atraso para o salvamento automático" é exibido.
5. Insira um novo intervalo de atraso do salvamento automático, expresso em milissegundos. As mudanças no seu trabalho agora são salvas automaticamente com base na nova configuração de atraso do salvamento automático.

Desativar o salvamento automático

1. Abra o projeto IDX.
2. Clique no ícone Settings. A janela Configurações é exibida.
3. Pesquise Arquivos: Salvar automaticamente.
4. Clique no menu suspenso e selecione off. O salvamento automático está desativado.