Apresentando Branch: uma extensão de código VS para visualizar e testar rotas RESTful

Jan 27 2023

Imagine ser capaz de interagir com todo o seu back-end de seu ambiente de codificação com o clique de um botão. Bem-vindo à Filial! Por que? Os servidores podem conter muitos roteadores, rotas e terminais diferentes.

Imagine ser capaz de interagir com todo o seu back-end de seu ambiente de codificação com o clique de um botão. Bem-vindo à Filial!

Visualização da Hierarquia de Rotas RESTful

Por que?

Os servidores podem conter muitos roteadores, rotas e terminais diferentes. Navegar em todos esses pontos de extremidade diferentes pode ser um desafio. Além disso, o teste requer deixar seu ambiente de codificação para abrir um cliente de API externo e colar em sua rota encadeada sem verificar se ela existe em seu próprio aplicativo. Depois de fazer sua solicitação, esses resultados ficam no outro cliente da API, não compartilhados com seu ambiente de codificação.

O Branch oferece uma maneira fácil e digerível para os desenvolvedores visualizarem seu ambiente de servidor em tempo real enquanto fazem ajustes em seu próprio código. Nossa ferramenta gera automaticamente uma árvore hierárquica de todas as rotas existentes, portanto, não há necessidade de vasculhar o diretório do servidor para juntar mentalmente cada uma individualmente. A árvore é formada apenas abrindo a extensão e, uma vez concluída, verificar um endpoint é tão simples quanto clicar em um nó. Se necessário, basta inserir o corpo da solicitação ou ID no parâmetro de sua URL e clicar no botão de solicitação destacado. Depois que a solicitação for concluída, você verá os dados de resposta do servidor na caixa de dados de resposta.

Como funciona?

Sob o capô, o Branch é alimentado por dois algoritmos exclusivos que foram desenvolvidos para dois objetivos específicos:

Raspe os arquivos dos clientes procurando a arquitetura de rota RESTful tradicional.
Formate os dados brutos copiados em um objeto JSON aninhado que representa um caminho hierárquico da porta ao roteador para cada endpoint exclusivo.

Antes de entrarmos no segundo algoritmo, vamos falar sobre por que tudo isso é necessário. A chave para nossa extensão é a ferramenta de visualização de rota. A Branch é capaz de fazer isso funcionar utilizando a biblioteca javascript D3.js. A D3 se descreve como “trazendo dados à vida”. Nesse caso, podemos pegar um diretório de servidor inteiro e usá-lo para construir uma árvore interativa.

O segundo algoritmo do qual Branch depende, em seguida, pega os dados raspados e os formata em um objeto JSON aninhado. Esse objeto aninhado é a chave para criar nossa visualização de árvore dinâmica e requer uma chave específica e uma estrutura de valor flexível o suficiente para funcionar com qualquer esquema.

Para alcançar a hierarquia:

Raspamos o diretório do servidor para encontrar PORT, que se tornará o nó pai na árvore
Raspamos o diretório do roteador para encontrar todos os filhos, netos, etc., até chegarmos ao ponto final de cada rota
Por fim, anexamos todos os métodos disponíveis correspondentes a cada endpoint

Exemplo de objeto criado com scraper, que será utilizado para formar a árvore D3

Antes de entrarmos na funcionalidade de exibição em árvore do nosso produto, devemos mencionar como todo esse conteúdo aparece na janela do VS Code. O WebView é diferente do navegador porque não há index.html. Usamos a API VS Code WebView para escrever HTML e inserir nossas tags de script para funcionalidade javascript por meio do método getWebViewContent.

Depois que Branch raspou e formatou os dados, por meio da API do VS Code, passamos o objeto JSON aninhado como uma mensagem para o arquivo de visualização usando um ouvinte de evento. A API do VS Code prefere que os dados sejam passados do arquivo para o WebView utilizando o método window.postMessage.

Depois que a árvore é formada, o usuário pode clicar nos nós e adicionar parâmetros de consulta ou um corpo de solicitação para testar os métodos de rota específicos. Sob o capô, a Branch utiliza a manipulação do DOM para ler as entradas dos clientes e, em seguida, passa tudo para a API de busca. A Branch exibe os dados de resposta de maneira organizada em um editor de código, CodeMirror, que dá ao usuário a aparência de um ambiente de codificação.

Suportando Arquitetura RESTful

Você ouve sobre arquitetura RESTful o tempo todo, mas como implementá-la com confiança em seu aplicativo? A Branch fornece as ferramentas necessárias para garantir que você esteja tomando as melhores decisões na configuração de suas solicitações para que sejam fáceis de ver e testar, tudo dentro do mesmo espaço em que você já está trabalhando. Você está enviando de volta as informações corretas para o cliente? O banco de dados está recebendo as informações corretamente em cada solicitação? Quaisquer problemas decorrentes dessas questões podem ser resolvidos mais rapidamente usando o Branch para identificar as alterações e ajustes necessários que podem fazer com que seu aplicativo seja executado de maneira mais suave e com menos efeitos colaterais.