Documentação / O IDE

Mapa fullstack

Liga cada chamada HTTP do front-end ao endpoint do back-end que a atende, navega entre os dois e avisa quando uma alteração quebra o contrato.

O mapa fullstack relaciona as chamadas HTTP do seu front-end com os endpoints do seu back-end. Assim você vê quais chamadas não têm endpoint, quais endpoints ninguém usa e o que quebraria com uma alteração.

Abrir o mapa

Ferramentas › Mapa fullstack. Ele não tem atalho padrão; você também o encontra com Ctrl+Shift+A.

O mapa precisa dos dois lados. Qualquer uma destas formas serve:

  • duas pastas raiz no mesmo espaço de trabalho;
  • os dois projetos abertos na visualização dividida;
  • um único projeto que tenha front-end e back-end.

Se houver apenas um lado, o Yuli pede que você adicione o outro projeto ao espaço de trabalho ou o abra na visualização dividida.

Filtros

Filtro Mostra
Todos O mapa inteiro.
Com chamadas Endpoints que o front-end usa.
Chamadas sem endpoint Chamadas do front-end sem endpoint no back-end: prováveis erros.
Endpoints sem uso Endpoints que nenhuma chamada do front-end usa.
Contrato O contrato entre os dois lados.
Tarefas fullstack Tarefas que mexem no front-end e no back-end ao mesmo tempo.

Cada relação tem uma confiança. Você pode ficar apenas com as de ≥ 70 % ou ≥ 90 %.

A partir de Faça Você chega a
Uma chamada HTTP do front-end Ctrl+Clic ou F12 O método do back-end que a atende
Um endpoint do back-end Ctrl+Clic Usos a partir do frontend

Acima de cada endpoint, uma linha (CodeLens) diz «n usos a partir do frontend». Acima de uma chamada sem endpoint, você verá «⚠ sem endpoint no backend».

O contrato

Ao salvar, o Yuli verifica se a alteração quebra alguma chamada do outro lado. Se for o caso, você verá isso no painel Problemas e em um aviso.

Em Alterações da IA, as alterações do agente mostram um cartão «Contrato fullstack: n chamadas do frontend quebrariam» antes que você as aplique.

O que ele detecta

Back-end

Spring MVC e WebFlux, JAX-RS e Struts.

Front-end

Tipo Clientes
Nativos fetch e XMLHttpRequest
Bibliotecas axios, ky, ofetch, jQuery
Frameworks HttpClient do Angular, SWR, React Query
Gerados Clientes OpenAPI gerados (TypeScript, JavaScript, Vue, Svelte)

Veja também REST Client e diagramas e Navegação.