Como habilitar ou configurar uma página do Swagger para servir de documentação / interação para nosso API Gateway? Em determinada aula criamos uma página html simples utilizando o Mock...fique na dúvida de como usar o swagger para expor nossa API.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Como habilitar ou configurar uma página do Swagger para servir de documentação / interação para nosso API Gateway? Em determinada aula criamos uma página html simples utilizando o Mock...fique na dúvida de como usar o swagger para expor nossa API.
Olá, José.
Tudo bem?
Para habilitar e configurar uma página do Swagger para servir de documentação e interação para o seu API Gateway, você pode seguir os seguintes passos:
Defina o Swagger Specification: Crie um arquivo de especificação OpenAPI (anteriormente conhecido como Swagger). Esse arquivo pode estar em formato JSON ou YAML e deve descrever todas as rotas, métodos, parâmetros e respostas da sua API.
Hospede o Swagger UI: Você pode hospedar o Swagger UI em um bucket do S3 ou em um servidor web. O Swagger UI é uma interface de usuário que interpreta o arquivo de especificação OpenAPI e gera a documentação interativa.
Configure o Swagger UI para apontar para sua API: No arquivo index.html do Swagger UI, configure a URL do seu arquivo de especificação OpenAPI. Por exemplo:
<script>
window.onload = function() {
// Configura a URL do arquivo de especificação OpenAPI
const ui = SwaggerUIBundle({
url: "https://caminho-para-seu-arquivo-openapi.json",
dom_id: '#swagger-ui',
});
};
</script>
Integre com o API Gateway: No API Gateway, você pode criar um endpoint que sirva o arquivo de especificação OpenAPI. Certifique-se de que o endpoint esteja acessível publicamente ou protegido conforme necessário.
Acesse a documentação: Após configurar tudo, você pode acessar a documentação interativa do Swagger UI através do URL onde você hospedou o Swagger UI.
Aqui está um exemplo prático de como você pode estruturar o arquivo index.html do Swagger UI:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.52.5/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.52.5/swagger-ui-bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.52.5/swagger-ui-standalone-preset.js"></script>
<script>
window.onload = function() {
const ui = SwaggerUIBundle({
url: "https://caminho-para-seu-arquivo-openapi.json",
dom_id: '#swagger-ui',
});
};
</script>
</body>
</html>
Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.