Começar a usar o projeto IDX

Continue lendo para conferir as noções básicas necessárias para começar a usar o Project IDX.

Antes de começar

Antes de começar, talvez seja necessário ativar cookies de terceiros no seu navegador. O Project IDX requer cookies de terceiros na maioria dos navegadores para autenticar espaços de trabalho.

Chrome

1. Abra Configurações.
2. Abra a guia Privacidade e segurança.
3. Verifique se a opção Permitir todos os cookies está ativada.
4. Abra idx.google.com.
5. Clique no ícone de visibilidade na barra de endereço visibility_off para abrir o painel Proteção de rastreamento. Ative a configuração Cookies de terceiros para permitir cookies de terceiros temporariamente. Isso ativa cookies no IDX por 90 dias.

Safari

1. Abra Safari > Configurações....
2. Desative as seguintes configurações:
   • Avançado > Bloquear todos os cookies
   • Privacidade > Impedir o rastreamento entre sites
3. Abra idx.google.com.

Firefox

Não é necessário ativar cookies de terceiros para o Firefox. Acesse idx.google.com.

Ópera

1. Abra idx.google.com.
2. Abra o menu e clique em Configurações.
3. Abra a seção Privacidade e segurança e expanda a opção Cookies de terceiros.
4. Selecione Bloquear cookies de terceiros no modo de navegação anônima ou Permitir cookies de terceiros.
5. Abra idx.google.com.

Arc

1. Acesse arc://settings.
2. Acesse a seção Privacidade e segurança e expanda a opção Cookies de terceiros.
3. Selecione Bloquear cookies de terceiros no modo de navegação anônima ou Permitir cookies de terceiros.
4. Abra idx.google.com.

Corajosa

Não é necessário ativar cookies de terceiros para o Brave. Acesse idx.google.com.

Criar um espaço de trabalho

Um espaço de trabalho no IDX é um ambiente de desenvolvimento que contém tudo o que você precisa para desenvolver seu aplicativo. Ele contém o código, um editor de código (com plug-ins relevantes para seu projeto) e conjuntos de ferramentas compatíveis com o desenvolvimento de apps. O processo é semelhante à criação de um novo projeto no ambiente de desenvolvimento do computador local, exceto pelo fato de que você tem um computador e um SO completos pré-configurados e dedicados exclusivamente à criação de um aplicativo.

Os espaços de trabalho do Project IDX são otimizados para conter uma codebase por vez. Assim, é possível manter os ambientes e as dependências no nível do sistema de diferentes aplicativos isolados uns dos outros.

Se você estiver criando um novo aplicativo, use modelos de espaço de trabalho gerenciados no IDX para começar rapidamente. Outra opção é importar as bases de código do aplicativo para o IDX.

Importante :há um limite no número de espaços de trabalho que você pode criar. Se você tiver um Perfil do desenvolvedor do Google, poderá criar até cinco espaços de trabalho. Para criar um Perfil do desenvolvedor do Google diretamente no IDX, depois de atingir o limite do espaço de trabalho, clique em Concluir configuração na notificação no painel de modelos.

Para criar um novo espaço de trabalho, siga estas etapas:

• 
• 
• 
• 

1. Abra o Projeto IDX.

2. Na primeira vez que você abrir o IDX, vai precisar ler e aceitar os Termos de Serviço dos produtos do Google, da IA generativa e do SDK do Android. Você também pode ativar o recebimento de comunicados sobre atualizações e anúncios ou estudos com usuários para melhorar nosso produto. Selecione as opções que fazem sentido para você. Clique nos links fornecidos para ler os Termos de Serviço, selecione a opção para aceitá-los e clique em Continuar. Em seguida, você pode decidir Ativar recursos de IA desde o primeiro uso do IDX ou deixá-los desativados clicando em Agora não. É possível ativá-los mais tarde. Se eles forem ativados nesta tela, leia a observação sobre IA e privacidade e clique em Continuar para manter as configurações ou Voltar para desativar os recursos de IA.

3. Selecione o tipo de espaço de trabalho que você quer criar:

   • Modelos: crie um espaço de trabalho pré-carregado com os arquivos e pacotes básicos necessários. Selecione um dos modelos em destaque ou clique em Ver todos os modelos para acessar uma lista completa de frameworks, APIs e linguagens disponíveis. Também é possível encontrar o modelo Espaço de trabalho em branco na biblioteca de modelos.
   • Repositório do GitHub:selecione Importar um repositório para clonar um repositório do GitHub no espaço de trabalho.

Modelos

1. Procure os modelos por tipo de aplicativo ou use a caixa de pesquisa no canto superior direito para filtrar a biblioteca completa de modelos por palavra-chave. O modelo de espaço de trabalho em branco está disponível na categoria Diversos.

2. Insira um nome para o espaço de trabalho e defina outras opções.

3. Clique em Criar. O IDX cria um novo espaço de trabalho com base nas suas seleções.

Estamos sempre adicionando novos modelos. Portanto, volte sempre ou conte o que você quer ver.

Importação do GitHub

1. Insira o URL do repositório.

2. Clique em Criar. O IDX cria um novo espaço de trabalho com base nas suas seleções.

3. Autentique-se no GitHub após o carregamento do espaço de trabalho.

4. Execute npm install (ou flutter pub get) no terminal IDX após importar seu projeto. Por padrão, o IDX não instala dependências de npm quando você importa um projeto.

Configurar seu espaço de trabalho

O IDX usa o Nix para definir a configuração do ambiente para cada espaço de trabalho. O Nix é um gerenciador de pacotes puramente funcional e atribui identificadores exclusivos a cada dependência, o que significa que seu ambiente pode conter várias versões da mesma dependência perfeitamente. Ele também é reproduzível e declarativo. No contexto do IDX, isso significa que é possível compartilhar seu arquivo de configuração Nix em vários espaços de trabalho para carregar a mesma configuração de ambiente. Saiba mais sobre Nix + IDX.

Crie ou edite o arquivo .idx/dev.nix

A configuração do ambiente é definida no arquivo .idx/dev.nix no repositório do seu código. Esse arquivo permite especificar pacotes instalados, variáveis de ambiente e extensões Code OSS.

Confira o exemplo de arquivo .idx/dev.nix abaixo para uma configuração básica de ambiente do espaço de trabalho que permite visualizações de apps no IDX:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_18
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
      };
    };
  };
}

Aplicar nova configuração

Sempre que você adicionar ou atualizar o arquivo de configuração dev.nix, o IDX mostrará uma solicitação no canto inferior direito para Recriar o ambiente. O tempo necessário para recompilar o ambiente depende do número de pacotes necessários para a configuração.

Depurar falhas de compilação do ambiente

Como os arquivos de configuração são códigos legíveis por máquina, eles podem conter erros. Se isso acontecer, pode haver uma falha na criação e não inicialização do ambiente. O IDX mostra uma opção para iniciar um ambiente de Recovery. Esse espaço de trabalho não inclui nenhuma das configurações definidas e apenas executa o OSS de código básico. Isso permite corrigir erros no arquivo de configuração dev.nix e recriar o ambiente.

Em algum momento, o IDX vai mostrar erros de build do ambiente. Por enquanto, você precisa resolver o problema por conta própria.

Próximas etapas

• Visualize o app.

• Compartilhe seu espaço de trabalho.