mirror of
https://github.com/andwati/copilot-dev-days.git
synced 2026-10-18 10:12:53 +00:00
201 lines
10 KiB
HTML
201 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LSC44NDPLQ"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
gtag('config', 'G-LSC44NDPLQ');
|
|
</script>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VS Code GitHub Copilot Agent Lab | Edição TypeScript</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link rel="alternate" hreflang="en" href="https://copilot-dev-days.github.io/agent-lab-typescript/">
|
|
<link rel="alternate" hreflang="pt-BR" href="https://copilot-dev-days.github.io/agent-lab-typescript/pt_BR/">
|
|
<link rel="alternate" hreflang="es" href="https://copilot-dev-days.github.io/agent-lab-typescript/es/">
|
|
<link rel="alternate" hreflang="x-default" href="https://copilot-dev-days.github.io/agent-lab-typescript/">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<link rel="stylesheet" href="../light-theme.css">
|
|
<script src="../theme-toggle.js"></script>
|
|
</head>
|
|
<body>
|
|
<div style="position:fixed;top:1rem;right:1rem;z-index:1000;display:flex;gap:0.5rem;align-items:center;">
|
|
<div class="locale-picker" id="localePicker">
|
|
<button type="button" class="locale-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Selecionar idioma">🌐</button>
|
|
<ul role="listbox" aria-label="Idioma">
|
|
<li role="option" data-locale="en" aria-selected="false">🇬🇧 English</li>
|
|
<li role="option" data-locale="es" aria-selected="false">🇪🇸 Español</li>
|
|
<li role="option" data-locale="pt-BR" aria-selected="true" class="active">🇧🇷 Português (Brasil)</li>
|
|
</ul>
|
|
</div>
|
|
<button class="theme-toggle" onclick="toggleTheme()">☀️ Claro</button>
|
|
</div>
|
|
<div class="container">
|
|
<section class="hero">
|
|
<span class="hero-badge">🚀 TypeScript + Vite + React + Tailwind</span>
|
|
<h1>VS Code GitHub Copilot Agent Lab</h1>
|
|
<p class="hero-subtitle">
|
|
Construa um jogo de Bingo Social enquanto domina o Agent Mode do VS Code com GitHub Copilot.
|
|
Aprenda engenharia de contexto, agentes personalizados e fluxos de desenvolvimento com IA.
|
|
</p>
|
|
<div class="hero-cta">
|
|
<a href="step.html?step=00-overview" class="btn btn-primary">🚀 Iniciar Workshop</a>
|
|
<a href="../game/" class="btn btn-secondary">🎮 Jogar</a>
|
|
<a href="https://github.com/copilot-dev-days/agent-lab-typescript" class="btn btn-secondary">📦 GitHub Repo</a>
|
|
</div>
|
|
<p class="hero-also">Também disponível em <a href="https://copilot-dev-days.github.io/agent-lab-dotnet/">.NET</a>, <a href="https://copilot-dev-days.github.io/agent-lab-java/">Java</a> e <a href="https://copilot-dev-days.github.io/agent-lab-python/">Python</a></p>
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-value">~1hr</div>
|
|
<div class="stat-label">Duração</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">4</div>
|
|
<div class="stat-label">Partes</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">9</div>
|
|
<div class="stat-label">Etapas</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features">
|
|
<h2 class="section-title">O que Você Vai Aprender</h2>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🧠</div>
|
|
<h3>Engenharia de Contexto</h3>
|
|
<p>Ensine a IA sobre seu código com instruções, tornando as sugestões do Copilot mais precisas e relevantes.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🤖</div>
|
|
<h3>Primitivas Agênticas</h3>
|
|
<p>Use agentes em segundo plano, agentes na nuvem e fluxos personalizados para escalar seu desenvolvimento.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🎨</div>
|
|
<h3>Desenvolvimento Design-First</h3>
|
|
<p>Deixe a IA iterar na UI enquanto você guia a visão criativa com agentes de design especializados.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🧪</div>
|
|
<h3>Desenvolvimento Orientado a Testes</h3>
|
|
<p>Construa funcionalidades confiáveis usando agentes TDD com o fluxo Red-Green-Refactor.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="workshop">
|
|
<h2 class="section-title">Partes do Workshop</h2>
|
|
<div class="parts-list">
|
|
<a href="step.html?step=01-setup" class="part-card">
|
|
<div class="part-number">01</div>
|
|
<div class="part-content">
|
|
<h3>Setup & Engenharia de Contexto</h3>
|
|
<p>Clone, configure e ensine a IA sobre seu projeto</p>
|
|
</div>
|
|
<span class="part-time">15 min</span>
|
|
</a>
|
|
<a href="step.html?step=02-design" class="part-card">
|
|
<div class="part-number">02</div>
|
|
<div class="part-content">
|
|
<h3>Frontend Design-First</h3>
|
|
<p>Redesenhe a UI com temas criativos usando Plan Mode</p>
|
|
</div>
|
|
<span class="part-time">15 min</span>
|
|
</a>
|
|
<a href="step.html?step=03-quiz-master" class="part-card">
|
|
<div class="part-number">03</div>
|
|
<div class="part-content">
|
|
<h3>Quiz Master Personalizado</h3>
|
|
<p>Crie perguntas temáticas com agentes personalizados</p>
|
|
</div>
|
|
<span class="part-time">10 min</span>
|
|
</a>
|
|
<a href="step.html?step=04-multi-agent" class="part-card">
|
|
<div class="part-number">04</div>
|
|
<div class="part-content">
|
|
<h3>Desenvolvimento Multi-Agent</h3>
|
|
<p>Construa novas funcionalidades com agentes de TDD e design</p>
|
|
</div>
|
|
<span class="part-time">20 min</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="prereqs">
|
|
<div class="container">
|
|
<h2 class="section-title">Pré-requisitos</h2>
|
|
<div class="prereqs-grid">
|
|
<div class="prereq-item">
|
|
<span class="prereq-check">✓</span>
|
|
<span>VS Code v1.107+</span>
|
|
</div>
|
|
<div class="prereq-item">
|
|
<span class="prereq-check">✓</span>
|
|
<span>GitHub Copilot</span>
|
|
</div>
|
|
<div class="prereq-item">
|
|
<span class="prereq-check">✓</span>
|
|
<span>Node.js 22+</span>
|
|
</div>
|
|
<div class="prereq-item">
|
|
<span class="prereq-check">✓</span>
|
|
<span>Git instalado</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<footer>
|
|
<div class="footer-links">
|
|
<a href="https://github.com/copilot-dev-days/agent-lab-typescript">GitHub Repository</a>
|
|
<a href="https://www.youtube.com/code">VS Code YouTube</a>
|
|
<a href="https://code.visualstudio.com/docs/copilot/overview">Copilot Docs</a>
|
|
<a href="https://github.com/github/awesome-copilot">Awesome Copilot</a>
|
|
</div>
|
|
<p class="footer-credit">Feito com 💜 pelo time do VS Code</p>
|
|
</footer>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
var match=location.pathname.match(/\/(pt_BR|es)\//);
|
|
var locale=match?match[1]:'en';
|
|
var picker=document.getElementById('localePicker');
|
|
if(!picker)return;
|
|
var btn=picker.querySelector('.locale-toggle'),list=picker.querySelector('ul');
|
|
list.querySelectorAll('li').forEach(function(li){
|
|
var l=li.dataset.locale==='pt-BR'?'pt_BR':li.dataset.locale;
|
|
if(l===locale){li.classList.add('active');li.setAttribute('aria-selected','true');}
|
|
else{li.classList.remove('active');li.setAttribute('aria-selected','false');}
|
|
});
|
|
function open(){list.style.display='block';btn.setAttribute('aria-expanded','true');}
|
|
function close(){list.style.display='none';btn.setAttribute('aria-expanded','false');}
|
|
btn.addEventListener('click',function(e){e.stopPropagation();list.style.display==='block'?close():open();});
|
|
document.addEventListener('click',close);
|
|
document.addEventListener('keydown',function(e){if(e.key==='Escape')close();});
|
|
list.querySelectorAll('li').forEach(function(li){
|
|
li.addEventListener('click',function(e){
|
|
e.stopPropagation();
|
|
var t=li.dataset.locale==='pt-BR'?'pt_BR':li.dataset.locale;
|
|
if(t===locale){close();return;}
|
|
var p=location.pathname;
|
|
if(locale!=='en')p=p.replace(new RegExp('/'+locale+'/'),'/');;
|
|
if(t!=='en')p=p.replace(/\/docs\//,'/docs/'+t+'/');
|
|
localStorage.setItem('preferred-locale',t);
|
|
window.location.href=p+location.search;
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|