Skip to content

Commit 695873e

Browse files
Neto-UserNeto-User
authored
add file
Adiciona new página
1 parent a52cc4d commit 695873e

3 files changed

Lines changed: 254 additions & 0 deletions

File tree

‎VersionamentoAPI/index.html‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR" class="scroll-smooth">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Painel Interativo: Explorando o Versionamento de APIs</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
12+
<!-- Chosen Palette: Calm Harmony -->
13+
<!-- Application Structure Plan: A aplicação foi desenhada como uma narrativa de página única para guiar o usuário de forma lógica, do "o quê" e "porquê" para o "como". A estrutura temática (Introdução -> Importância -> Métodos -> Comparação -> Conclusão) foi escolhida para construir o conhecimento progressivamente, tornando um tópico técnico mais digerível. A interatividade, como abas para os métodos e um gráfico comparativo, visa engajar o usuário e facilitar a comparação direta das abordagens, melhorando a retenção da informação em comparação com a leitura de um texto estático. -->
14+
<!-- Visualization & Content Choices: O conteúdo foi dividido em seções claras. Para a seção "Métodos", foram usadas abas interativas (HTML/CSS/JS) para organizar as informações sem sobrecarregar o usuário, permitindo que ele se concentre em um método por vez. Para a "Comparação", um gráfico de barras (Chart.js/Canvas) foi escolhido por ser a forma mais eficaz de comparar visualmente múltiplos critérios (simplicidade, clareza, etc.) entre diferentes métodos. Esta abordagem visual e interativa transforma a análise em uma experiência de descoberta. -->
15+
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
16+
<link rel="stylesheet" href="style.css">
17+
</head>
18+
<body class="antialiased">
19+
20+
<header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm">
21+
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
22+
<h1 class="text-xl font-bold text-indigo-700">Versionamento de APIs</h1>
23+
<div class="hidden md:flex space-x-8">
24+
<a href="#intro" class="text-gray-600 hover:text-indigo-600">Introdução</a>
25+
<a href="#importance" class="text-gray-600 hover:text-indigo-600">Por que é Importante?</a>
26+
<a href="#methods" class="text-gray-600 hover:text-indigo-600">Métodos</a>
27+
<a href="#comparison" class="text-gray-600 hover:text-indigo-600">Comparativo</a>
28+
</div>
29+
</nav>
30+
</header>
31+
32+
<main class="container mx-auto px-6 py-12">
33+
34+
<section id="intro" class="text-center mb-20">
35+
<h2 class="text-4xl font-bold mb-4 text-stone-800">Gerenciando a Evolução e a Compatibilidade</h2>
36+
<p class="max-w-3xl mx-auto text-lg text-stone-600">
37+
Bem-vindo a este painel interativo sobre versionamento de APIs. Aqui, exploraremos a prática de gerenciar mudanças em uma API sem quebrar as aplicações que a consomem. O objetivo é entender como garantir que as regras de negócio possam evoluir de forma segura e estável, mantendo a confiança dos seus clientes.
38+
</p>
39+
</section>
40+
41+
<section id="importance" class="mb-20">
42+
<div class="text-center mb-12">
43+
<h3 class="text-3xl font-bold text-stone-800">Por Que o Versionamento é Essencial?</h3>
44+
<p class="mt-2 text-stone-600">Sem uma estratégia de versionamento, qualquer mudança pode gerar um efeito cascata. Esta seção detalha os problemas críticos que o versionamento resolve, garantindo estabilidade e permitindo a inovação contínua.</p>
45+
</div>
46+
<div class="grid md:grid-cols-3 gap-8">
47+
<div class="bg-white p-6 rounded-lg shadow-md border border-stone-200">
48+
<h4 class="text-xl font-semibold mb-2 text-indigo-700">Evita a Interrupção de Serviços</h4>
49+
<p class="text-stone-600">Clientes podem ter suas aplicações paradas se a API mudar drasticamente. O versionamento garante que versões antigas continuem funcionando, dando tempo para uma migração planejada.</p>
50+
</div>
51+
<div class="bg-white p-6 rounded-lg shadow-md border border-stone-200">
52+
<h4 class="text-xl font-semibold mb-2 text-indigo-700">Reduz Custos de Manutenção</h4>
53+
<p class="text-stone-600">Coordenar atualizações simultâneas em todos os sistemas dependentes é caro e complexo. O versionamento permite que os consumidores atualizem em seu próprio ritmo.</p>
54+
</div>
55+
<div class="bg-white p-6 rounded-lg shadow-md border border-stone-200">
56+
<h4 class="text-xl font-semibold mb-2 text-indigo-700">Acelera a Inovação</h4>
57+
<p class="text-stone-600">O medo de quebrar integrações existentes pode paralisar a evolução da API. Com o versionamento, novas funcionalidades podem ser lançadas em novas versões sem impactar as antigas.</p>
58+
</div>
59+
</div>
60+
</section>
61+
62+
<section id="methods" class="mb-20">
63+
<div class="text-center mb-12">
64+
<h3 class="text-3xl font-bold text-stone-800">Como Versionar uma API?</h3>
65+
<p class="mt-2 text-stone-600">Existem duas abordagens principais: pela URL ou pelo cabeçalho HTTP. Clique nas abas abaixo para explorar as diferentes formas dentro de cada método, com exemplos práticos e uma análise de suas características.</p>
66+
</div>
67+
<div>
68+
<div class="mb-6 flex justify-center border-b border-stone-300">
69+
<button id="btn-url" class="py-3 px-6 border-b-2 tab-active">Versionamento por URL</button>
70+
<button id="btn-header" class="py-3 px-6 border-b-2 border-transparent text-stone-500">Versionamento via Header</button>
71+
</div>
72+
73+
<div id="content-url">
74+
<div class="grid md:grid-cols-3 gap-6">
75+
<div class="bg-white p-6 rounded-lg border border-stone-200">
76+
<h4 class="font-bold text-lg mb-2">Por Path (Caminho)</h4>
77+
<p class="text-sm text-stone-600 mb-4">A abordagem mais popular. A versão é clara e faz parte do caminho do recurso.</p>
78+
<div class="code-block">seuhost.com/api/v1/recursos</div>
79+
<p class="mt-4 text-xs text-indigo-600 font-medium">✓ Dev Friendly, simples e claro.</p>
80+
</div>
81+
<div class="bg-white p-6 rounded-lg border border-stone-200">
82+
<h4 class="font-bold text-lg mb-2">Por Subdomínio</h4>
83+
<p class="text-sm text-stone-600 mb-4">A versão é colocada no início da URL. Intuitiva, mas menos comum.</p>
84+
<div class="code-block">v1.seuhost.com/api/recursos</div>
85+
<p class="mt-4 text-xs text-stone-500">✗ Pode complicar a gestão de SSL.</p>
86+
</div>
87+
<div class="bg-white p-6 rounded-lg border border-stone-200">
88+
<h4 class="font-bold text-lg mb-2">Por Query String</h4>
89+
<p class="text-sm text-stone-600 mb-4">A versão é um parâmetro. Caiu em desuso por dificultar a leitura.</p>
90+
<div class="code-block">seuhost.com/api?version=1.0</div>
91+
<p class="mt-4 text-xs text-stone-500">✗ URL menos legível e navegável.</p>
92+
</div>
93+
</div>
94+
</div>
95+
96+
<div id="content-header" class="hidden">
97+
<div class="grid md:grid-cols-2 gap-6">
98+
<div class="bg-white p-6 rounded-lg border border-stone-200">
99+
<h4 class="font-bold text-lg mb-2">Com Header Customizado</h4>
100+
<p class="text-sm text-stone-600 mb-4">Usa um cabeçalho próprio para a versão. Mantém a URL limpa, mas a versão fica "escondida".</p>
101+
<div class="code-block">API-Version: v1</div>
102+
<p class="mt-4 text-xs text-indigo-600 font-medium">✓ URL limpa, mais simples que o Accept.</p>
103+
</div>
104+
<div class="bg-white p-6 rounded-lg border border-stone-200">
105+
<h4 class="font-bold text-lg mb-2">Com Accept Padrão</h4>
106+
<p class="text-sm text-stone-600 mb-4">Usa o cabeçalho `Accept`. É a forma mais correta segundo a especificação HTTP.</p>
107+
<div class="code-block">Accept: application/vnd.seuhost.v1+json</div>
108+
<p class="mt-4 text-xs text-stone-500">✗ Pouco prático e não intuitivo para explorar.</p>
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
</section>
114+
115+
116+
</main>
117+
118+
<footer class="bg-stone-800 text-white mt-20">
119+
<div class="container mx-auto px-6 py-8 text-center">
120+
<p>Painel Interativo sobre Versionamento de APIs.</p>
121+
<p class="text-sm text-stone-400 mt-2">Uma demonstração de como transformar relatórios técnicos em experiências interativas.</p>
122+
</div>
123+
</footer>
124+
125+
126+
<script src="script.js"></script>
127+
</body>
128+
</html>

‎VersionamentoAPI/scritp.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
document.addEventListener('DOMContentLoaded', function () {
2+
const btnUrl = document.getElementById('btn-url');
3+
const btnHeader = document.getElementById('btn-header');
4+
const contentUrl = document.getElementById('content-url');
5+
const contentHeader = document.getElementById('content-header');
6+
7+
function showUrlContent() {
8+
contentUrl.classList.remove('hidden');
9+
contentHeader.classList.add('hidden');
10+
btnUrl.classList.add('tab-active');
11+
btnHeader.classList.remove('tab-active');
12+
}
13+
14+
function showHeaderContent() {
15+
contentHeader.classList.remove('hidden');
16+
contentUrl.classList.add('hidden');
17+
btnHeader.classList.add('tab-active');
18+
btnUrl.classList.remove('tab-active');
19+
}
20+
21+
btnUrl.addEventListener('click', showUrlContent);
22+
btnHeader.addEventListener('click', showHeaderContent);
23+
24+
const ctx = document.getElementById('comparisonChart').getContext('2d');
25+
const comparisonChart = new Chart(ctx, {
26+
type: 'bar',
27+
data: {
28+
labels: ['Por Path (URL)', 'Header Customizado', 'Accept Header (HTTP)'],
29+
datasets: [
30+
{
31+
label: 'Clareza / Dev Friendly',
32+
data: [5, 3, 2],
33+
backgroundColor: 'rgba(79, 70, 229, 0.7)',
34+
borderColor: 'rgba(79, 70, 229, 1)',
35+
borderWidth: 1
36+
},
37+
{
38+
label: 'Simplicidade de Implementação',
39+
data: [5, 4, 3],
40+
backgroundColor: 'rgba(30, 64, 175, 0.7)',
41+
borderColor: 'rgba(30, 64, 175, 1)',
42+
borderWidth: 1
43+
},
44+
{
45+
label: 'Conformidade com Padrões HTTP',
46+
data: [3, 2, 5],
47+
backgroundColor: 'rgba(124, 58, 237, 0.7)',
48+
borderColor: 'rgba(124, 58, 237, 1)',
49+
borderWidth: 1
50+
}
51+
]
52+
},
53+
options: {
54+
responsive: true,
55+
maintainAspectRatio: false,
56+
indexAxis: 'y',
57+
scales: {
58+
x: {
59+
beginAtZero: true,
60+
max: 5,
61+
title: {
62+
display: true,
63+
text: 'Pontuação (1=Baixo, 5=Alto)'
64+
}
65+
}
66+
},
67+
plugins: {
68+
title: {
69+
display: true,
70+
text: 'Pontuação dos Métodos de Versionamento',
71+
font: {
72+
size: 16
73+
}
74+
},
75+
tooltip: {
76+
callbacks: {
77+
label: function(context) {
78+
let label = context.dataset.label || '';
79+
if (label) {
80+
label += ': ';
81+
}
82+
if (context.parsed.x !== null) {
83+
label += context.parsed.x + ' de 5';
84+
}
85+
return label;
86+
}
87+
}
88+
}
89+
}
90+
}
91+
});
92+
});

‎VersionamentoAPI/style.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
body {
2+
font-family: 'Inter', sans-serif;
3+
background-color: #F5F5F4; /* stone-100 */
4+
color: #1C1917; /* stone-900 */
5+
}
6+
.chart-container {
7+
position: relative;
8+
width: 100%;
9+
max-width: 800px;
10+
margin-left: auto;
11+
margin-right: auto;
12+
height: 300px;
13+
max-height: 450px;
14+
}
15+
@media (min-width: 768px) {
16+
.chart-container {
17+
height: 400px;
18+
}
19+
}
20+
.tab-active {
21+
border-color: #4F46E5; /* indigo-600 */
22+
background-color: #EEF2FF; /* indigo-50 */
23+
color: #3730A3; /* indigo-800 */
24+
font-weight: 500;
25+
}
26+
.code-block {
27+
background-color: #282c34;
28+
color: #abb2bf;
29+
padding: 1rem;
30+
border-radius: 0.5rem;
31+
font-family: monospace;
32+
white-space: pre-wrap;
33+
word-break: break-all;
34+
}

0 commit comments

Comments
 (0)