Começar a usar o projeto IDX

O Project IDX oferece um ambiente de desenvolvimento colaborativo baseado em nuvem que simplifica o processo de criação de aplicativos com uma combinação quase ilimitada de frameworks e bibliotecas.

Depois de configurar um espaço de trabalho IDX, você pode compartilhar um ambiente de desenvolvimento flexível e totalmente funcional com sua equipe em segundos: os espaços de trabalho IDX são acessíveis em qualquer dispositivo e vêm com ferramentas integradas para agilizar seu processo de desenvolvimento.

Para começar:

• Ative os cookies de terceiros no seu navegador.
• Configure o IDX para o primeiro uso.
• Crie um espaço de trabalho.
• Configure seu espaço de trabalho.

Antes de começar

Antes de começar, talvez seja necessário ativar cookies de terceiros no seu navegador. O Project IDX exige 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. Acesse idx.google.com.
5. Clique no ícone de visibilidade na barra de endereço visibility_off para abrir o painel Proteção contra rastreamento. Ative a configuração Cookies de terceiros para permitir cookies de terceiros temporariamente. Isso ativa os 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 rastreamento entre sites
3. Acesse idx.google.com.

Firefox

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

Opera

1. Acesse idx.google.com.
2. Abra o menu e clique em Configurações.
3. Acesse 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. Acesse idx.google.com.

Arco

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. Acesse idx.google.com.

Corajosa

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

Configurar o IDX

• 
• 
• 
• 

Se esta for a primeira vez que você usar o IDX, será necessário inicializar o IDX. Se você já usou o IDX com sua conta atual, prossiga para Criar um espaço de trabalho.

Para configurar o IDX pela primeira vez:

1. Abra o Project IDX.

   Na primeira vez que você abrir o IDX, será necessário ler e aceitar os Termos de Serviço.

2. Leia os Termos de Serviço do Google e os Termos e Condições do SDK do Android e, se você aceitar, marque a caixa de seleção Concordo com os Termos de Serviço do Google e os Termos e Condições do SDK do Android incorporados neste documento.

3. Opcionalmente, ative o recebimento de atualizações e avisos sobre o produto e participe de estudos de pesquisa para melhorar o IDX.

4. Quando você receber a solicitação para ativar os recursos de IA:

   • Para configurar a assistência da IA no IDX para todos os espaços de trabalho, clique em Ativar recursos de IA. Leia a observação sobre IA e privacidade e clique em Continuar para ativar os recursos de IA e abrir o IDX ou clique em Voltar.

   • Para adiar a assistência por IA, clique em Não agora.

O painel IDX é carregado. Agora você já pode criar um espaço de trabalho.

Dica: é possível reativar os recursos de IA a qualquer momento.

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 seu código, um editor de código (com plug-ins relevantes para seu projeto) e toolchains que oferecem suporte ao desenvolvimento de apps. É como criar um novo projeto no ambiente de desenvolvimento de área de trabalho local, exceto que você tem um computador e um sistema operacional inteiros pré-configurados e dedicados exclusivamente à criação do aplicativo, em execução no navegador na nuvem, acessível onde quer que você esteja.

Os espaços de trabalho do Project IDX são otimizados para conter uma única base de código, para que você possa manter os ambientes e as dependências do sistema de diferentes aplicativos isolados uns dos outros. É possível criar vários espaços de trabalho para usar com diferentes aplicativos e frameworks.

Importante: há um limite para o 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 de desenvolvedor do Google diretamente no IDX depois de atingir o limite de espaço de trabalho, clique em Concluir a configuração na notificação no painel de modelos.

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

1. Abra o Project IDX.

2. Decida qual método você quer usar para inicializar um novo espaço de trabalho. Se você estiver criando um novo app, crie rapidamente um novo espaço de trabalho usando os seguintes métodos:

   • Usar um modelo oficial do IDX:o Project IDX oferece modelos com suporte oficial que pré-carregam seu espaço de trabalho com os arquivos, pacotes e dependências básicas de que você precisa. É possível selecionar modelos para apps da Web, apps de servidor, apps para dispositivos móveis, serviços de IA e ML, bancos de dados e muito mais, incluindo um espaço de trabalho em branco que inicializa um espaço de trabalho com dependências mínimas.

   • Importar um repositório do GitHub:você pode importar um repositório diretamente do GitHub.

   • Usar um modelo da Comunidade. O Project IDX mantém modelos da comunidade, que estão abertos para contribuições da comunidade. Se você usar um modelo da comunidade, recomendamos compartilhar as modificações úteis ou os novos modelos que você criar.

Modelos oficiais

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

2. Digite 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 no modelo selecionado.

Estamos sempre adicionando novos modelos. Então, volte sempre ou diga o que você quer.

Importação de repositório do Git

1. Clique em Importar um repositório.

2. Insira o URL do repositório. O repositório pode ser hospedado no GitHub, no GitLab ou no Bitbucket.

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

4. Se o repositório for particular, você vai precisar fazer a autenticação no respectivo provedor:

   • No GitHub, siga as instruções para copiar um token de acesso.
   • No GitLab, você pode usar a senha da conta ou criar um token de conta pessoal.
   • No Bitbucket, use seu nome de usuário (não o e-mail) e uma senha do app para fazer a autenticação.

5. Execute npm install (ou flutter pub get) no terminal IDX depois de importar o projeto.

   Dica: o IDX não instala dependências por padrão quando você importa um projeto. Para mudar isso, adicione um gancho onCreate que execute npm install (ou flutter pub get) ao arquivo dev.nix. Depois de adicionar dev.nix ao repositório do projeto, as dependências serão instaladas sempre que os usuários importarem o repositório para o IDX.

Modelos de comunidade

1. Identifique o modelo de comunidade que você quer usar e copie o URL dele.

2. Crie um URL de abertura instantânea do Project IDX com o seguinte formato:

   https://idx.google.com/new?template=TEMPLATE_URL
   

   Por exemplo, se você quiser criar um novo espaço de trabalho com o modelo React Three.js, use este URL:

   https://idx.google.com/new?template=https://github.com/project-idx/community-templates/tree/main/threejs-react
   

3. Clique em Criar. O IDX cria um novo espaço de trabalho com base no modelo que você referencia.

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 sem problemas. Ele também é reproduzível e declarativo. No contexto do IDX, isso significa que você pode compartilhar seu arquivo de configuração do Nix entre os espaços de trabalho para carregar a mesma configuração de ambiente. Saiba mais sobre Nix + IDX.

Criar ou editar o arquivo .idx/dev.nix

A configuração do ambiente é definida no arquivo .idx/dev.nix no repositório de código. Esse arquivo especifica todos os componentes a serem adicionados ao espaço de trabalho, incluindo:

• Ferramentas do sistema disponíveis no registro de pacotes do Nix, incluindo compiladores, pacotes (como go ou angular) e utilitários de linha de comando, como componentes da CLI da gcloud extras.

• Extensões do ambiente de desenvolvimento integrado do registro OpenVSX, como depuradores específicos da linguagem, formatadores de código, extensões oficiais para serviços de nuvem e muito mais.

• Serviços comuns, como docker, mensagens do Pub/Sub, bancos de dados como Postgres e Redis e mais.

Confira o exemplo de arquivo .idx/dev.nix abaixo para uma configuração básica de ambiente de espaço de trabalho que ativa as 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";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

Aplicar nova configuração

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

Depurar falhas de build do ambiente

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

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

Próximas etapas

• Visualizar o app

• Compartilhar seu espaço de trabalho

• Criar modelos personalizados para usar e compartilhar

• Usar um botão "Abrir no IDX" para compartilhar a configuração do espaço de trabalho ou o modelo personalizado