TL;DR
A extensão Apidog para VS Code permite enviar requisições API, gerenciar coleções, executar testes e compartilhar workspaces com sua equipe – tudo sem sair do seu editor. A configuração leva menos de cinco minutos: instale a extensão, faça login na sua conta gratuita do Apidog e seu workspace será carregado diretamente na barra lateral do VS Code.
Introdução
O Apidog começou como um aplicativo de desktop para design, teste e documentação de API. Com o tempo, a equipe lançou uma extensão para VS Code que traz o mesmo workspace diretamente para o seu editor. A extensão não duplica o Apidog – ela se conecta ao seu workspace existente, de modo que coleções, ambientes e casos de teste permaneçam sincronizados, seja você no VS Code, no aplicativo de desktop ou na interface web.
Este guia detalha o fluxo de trabalho completo: instalando a extensão, conectando-se ao seu workspace, enviando requisições, executando testes e usando a extensão do VS Code junto com o aplicativo de desktop.
Passo 1: Instale a extensão Apidog para VS Code
Abra o VS Code e clique no ícone Extensões na barra lateral esquerda (ou pressione Ctrl+Shift+X / Cmd+Shift+X).
Procure por “Apidog” na barra de pesquisa do Marketplace de Extensões. Procure a extensão publicada pela Apidog Inc. – ela mostra o logotipo do Apidog (um ícone escuro com letras API estilizadas).
Clique em Instalar. O VS Code instala a extensão e adiciona um ícone do Apidog à sua Barra de Atividades no lado esquerdo.
Após a instalação, clique no ícone do Apidog na Barra de Atividades. O VS Code abre o painel do Apidog na barra lateral.
Passo 2: Faça login na sua conta Apidog
O painel do Apidog mostra um botão “Entrar”. Clique nele.
Uma aba do navegador é aberta na página de autenticação do Apidog. Se você já tem uma conta Apidog, insira seu e-mail e senha. Se você não tem uma conta, clique em “Cadastrar” – a camada gratuita exige apenas um endereço de e-mail. Sem cartão de crédito.
Após o login, o navegador mostra uma confirmação e pede para você retornar ao VS Code. Clique em “Abrir VS Code” ou retorne ao VS Code manualmente.
O VS Code completa o handshake de autenticação e carrega seu workspace do Apidog na barra lateral.
Como a barra lateral se parece após o login: O painel esquerdo mostra uma visualização em árvore do seu workspace. No topo, você vê o nome do seu workspace. Abaixo disso, suas coleções aparecem como pastas. Cada coleção se expande para mostrar as requisições dentro, organizadas por estrutura de pastas. Os ambientes aparecem em um menu suspenso no topo do painel.
Passo 3: Navegue pelas suas coleções
A barra lateral do Apidog no VS Code espelha a estrutura da coleção do seu workspace do Apidog exatamente.
Para navegar em uma coleção, clique na seta ao lado do nome da coleção. Ela se expande para mostrar pastas e requisições. As pastas se expandem ainda mais em requisições individuais.
Cada requisição aparece como um item de linha com um distintivo colorido mostrando o método HTTP (GET em verde, POST em azul, PUT em laranja, DELETE em vermelho). Clicar em uma requisição a abre na área do editor do VS Code como uma aba.
Usando a barra de pesquisa: Na parte superior do painel do Apidog, há um campo de pesquisa. Digite qualquer palavra-chave para filtrar suas coleções por nome da requisição, URL ou método. Isso é útil quando seu workspace tem dezenas de coleções.
Alternando workspaces: Se sua conta Apidog pertence a vários workspaces (pessoal, de equipe ou específicos de projeto), um seletor de workspace na parte superior do painel permite alternar entre eles.
Passo 4: Envie requisições
Quando você abre uma requisição na barra lateral, ela é carregada na área principal do editor como uma aba. A interface da requisição tem um layout familiar:
Barra superior: Seletor de método (menu suspenso com GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS), campo de URL e botão Enviar.
Abas abaixo da URL: Params, Headers, Body, Auth, Pre-request Scripts, Tests, Settings. Cada aba abre a seção de configuração relevante.
Para enviar uma requisição:
- Confirme o método e a URL na barra superior
- Adicione quaisquer cabeçalhos necessários na aba Headers
- Se a requisição tiver um corpo (POST, PUT), clique em Body e selecione o tipo de conteúdo (JSON, dados de formulário, binário, etc.)
- Clique em Enviar
A resposta aparece na metade inferior da aba. Ela mostra o código de status, tempo de resposta e tamanho da resposta. As abas abaixo da resposta permitem visualizar o corpo (com destaque de sintaxe para JSON e XML), cabeçalhos, cookies e resultados dos testes.
Usando ambientes: O seletor de ambiente na parte superior do painel Apidog define o ambiente ativo. Variáveis como {{base_url}} ou {{token}} são resolvidas para os valores definidos nesse ambiente. Altere os ambientes para executar a mesma requisição contra dev, staging ou produção sem editar URLs.
Passo 5: Edite e crie requisições
Você pode editar requisições existentes diretamente no VS Code. As alterações são sincronizadas automaticamente com seu workspace do Apidog.
Para criar uma nova requisição:
- Clique com o botão direito em uma coleção ou pasta na barra lateral
- Selecione “Nova Requisição”
- Uma aba de requisição em branco é aberta
- Defina o método, URL, cabeçalhos e corpo
- Pressione
Ctrl+S/Cmd+Spara salvar
A nova requisição aparece na barra lateral e é imediatamente acessível a partir do aplicativo de desktop Apidog, da interface web ou do VS Code de qualquer colega de equipe.
Renomeando e organizando: Clique com o botão direito em qualquer requisição ou pasta na barra lateral para acessar as opções de renomear, mover, duplicar e excluir. A reordenação por arrastar e soltar funciona dentro da barra lateral.
Passo 6: Execute testes
O Apidog suporta asserções de teste que são executadas após cada resposta. Na aba Testes de uma requisição aberta, você pode escrever asserções baseadas em JavaScript:
pm.test("Status is 200", function () {
pm.response.to.have.status(200);
});
pm.test("Response contains user id", function () {
const json = pm.response.json();
pm.expect(json.id).to.be.a('number');
});
Após clicar em Enviar, a aba Testes na seção de resposta mostra quais asserções foram aprovadas e quais falharam, com contagens de aprovações/falhas e mensagens de erro para as falhas.
Executando uma coleção: Clique com o botão direito em uma coleção ou pasta na barra lateral e selecione “Executar Coleção”. Um painel de execução é aberto onde você pode definir iterações, atrasos entre requisições e ambientes. Clique em Executar para executar todas as requisições em sequência. Os resultados mostram o status de aprovação/falha para as asserções de cada requisição.
Passo 7: Use a extensão do VS Code e o aplicativo de desktop juntos
A extensão do VS Code e o aplicativo de desktop compartilham o mesmo workspace em tempo real. Não há uma versão “primária” – são duas visualizações dos mesmos dados.
Fluxos de trabalho comuns que usam ambos:
Design no desktop, teste no VS Code: Use o aplicativo de desktop Apidog para definir seu esquema de API, escrever documentação e configurar servidores mock. Em seguida, alterne para o VS Code para executar requisições e escrever asserções de teste sem sair do seu ambiente de desenvolvimento.
Revisão de API da equipe: Um desenvolvedor de backend atualiza um endpoint no aplicativo de desktop. Um desenvolvedor de frontend abre o VS Code com a extensão Apidog e vê imediatamente a requisição atualizada com os novos parâmetros. Sem pull request, sem arquivo JSON para importar.
Escrita de testes no contexto: Você está escrevendo código no VS Code para consumir uma API. Sem trocar de janela, você pode abrir o painel do Apidog, encontrar o endpoint relevante, executá-lo, verificar a forma da resposta e voltar ao seu código – permanecendo no mesmo aplicativo o tempo todo.
O que o aplicativo de desktop faz melhor: Design de esquema, configuração de servidor mock, publicação de documentação de API e gerenciamento de um grande número de ambientes. Esses são recursos primários do aplicativo de desktop que você pode referenciar no VS Code, mas são mais fáceis de configurar na visualização de tela cheia do desktop.
Passo 8: Compartilhe com sua equipe
Se você trabalha com um ou dois outros desenvolvedores, adicione-os ao seu workspace Apidog. Na interface web ou aplicativo de desktop Apidog, vá para as configurações do seu workspace e convide colegas de equipe por e-mail.
Assim que eles aceitarem o convite e instalarem a extensão do VS Code, a barra lateral deles mostrará as mesmas coleções que você vê. Qualquer requisição que eles adicionarem ou modificarem aparece para todos imediatamente.
A camada gratuita suporta até três usuários. As alterações são sincronizadas através da nuvem do Apidog – sem operações git, sem exportações de arquivos, sem conflitos de mesclagem.
FAQ
A extensão Apidog para VS Code funciona sem o aplicativo de desktop?Sim. A extensão é um cliente completo para o seu workspace Apidog. Você não precisa instalar o aplicativo de desktop para usar a extensão.
Posso usar a extensão Apidog para VS Code offline?Você pode visualizar e editar coleções em cache enquanto estiver offline. Enviar requisições para APIs externas requer acesso à internet (assim como a sincronização de alterações). O suporte offline completo depende do estado do cache do seu workspace Apidog.
Como importo coleções existentes do Thunder Client ou Postman?No aplicativo de desktop ou interface web do Apidog, vá em Importar e selecione o formato apropriado (Thunder Client JSON, Postman collection v2.1, OpenAPI, etc.). As coleções importadas aparecerão em seu workspace e serão imediatamente acessíveis a partir da extensão do VS Code.
A extensão do VS Code é o mesmo que criar um novo projeto no Apidog?Não. A extensão se conecta ao seu workspace Apidog existente. Você cria e gerencia workspaces a partir do aplicativo de desktop ou interface web. A extensão do VS Code é um cliente que permite trabalhar dentro desses workspaces a partir do VS Code.
Várias pessoas podem ter a mesma coleção aberta ao mesmo tempo?Sim. A extensão não bloqueia coleções para edição. Se dois usuários editarem a mesma requisição simultaneamente, a última gravação vence. Para edição coordenada, use os recursos de colaboração do aplicativo de desktop.
A extensão suporta preenchimento automático de variáveis de ambiente?Sim. Ao digitar {{ em um campo de URL ou parâmetro, a extensão sugere as variáveis disponíveis do ambiente ativo. Isso ajuda a evitar erros de digitação nos nomes das variáveis.
A extensão Apidog para VS Code funciona melhor como sua ferramenta diária quando você já está desenvolvendo APIs dentro do VS Code. O custo de configuração de dois minutos compensa rapidamente, uma vez que suas coleções, ambientes e workspace da equipe estão todos acessíveis sem trocar de janela.