Esta é uma submissão para o Desafio Amazon Q Developer "Quack The Code": That's Entertainment!
🎮 O que eu construí
The Golden Duck: As Crônicas da Navegação é um jogo educativo baseado em texto, com estética retrô inspirada no DOS/Windows 95. O jogador aprende a navegar em sistemas operacionais utilizando apenas o teclado, através de missões narrativas interativas. O jogo estimula a memória, lógica e habilidades de navegação em sistemas, sendo acessível para usuários com deficiência visual.
Cada cena é um módulo JavaScript independente e parte de um mecanismo de jogo modular mais amplo, criado com o uso e a orientação do Amazon Q Developer. A interface do usuário imita interfaces de terminal antigas, com considerações modernas de acessibilidade. O jogo foi construído inteiramente do zero com HTML, CSS e JavaScript puros — graças às sugestões arquitetônicas do Q Developer e às suas eficientes implementação.
Demonstração
💻 Repositório do Código
Explore o código e confira os documentos complementares, como:
Sinta-se à vontade para abrir sugestões, issues ou pull requests!
Repositório no GitHub – Golden Duck Game
🤖 Como utilizei o Amazon Q Developer
Todo o processo de desenvolvimento foi feito com Amazon Q Developer no VSCode e a experiência foi divertida, produtiva e educativa. Veja como foi:
1. Configuração Inicial
- Instalei o plugin Amazon Q Developer no VSCode.
- Registrei um Builder ID para autenticação.
- Criei o arquivo de contexto do projeto com as informações do jogo.
2. Primeiros Passos com o Q Developer
Solicitei ao Q Developer que me explicasse e ajudasse a analisar, planejar e estruturar o código do jogo. Ele:
- Analisou o contexto fornecido.
- Planejou a arquitetura do projeto.
- Selecionei o botão de confirmação "Run" e ele criou e implementou os arquivos necessários.
Após isso, ele explicou como funciona o sistema modular em JavaScript para o jogo, passando uma visão geral sobre a arquitetura, o fluxo de cada capítulo, como funciona esse fluxo, as principais funcionalidades, benefícios da arquitetura e até ensina como adicionar um novo “capítulo” e fornece exemplos de um fluxo de capítulo completo
Nota: Logo de começo já gostei da descrição das implementações de cada arquivo que ele gerou e também da integração ao terminal, dando a opção prática para criar as pastas e estrutura do diretório para implementação
3. Execução e Testes Iniciais
- Executei o projeto utilizando o Live Server.
- A interface retrô estava conforme o esperado, mas o jogo não funcionava corretamente.
- Então comecei a inspecionar o código e identificar os pontos de falha.
4. Depuração com o Q Developer
A depuração foi tranquila, considerando a explicação anterior que o Q Developer fez, a qualidade e os comentários no código e a implementação de mensagem de erro no console:
render() {
if (!this.gameEngine) {
console.error('Game engine not set for scene:', this.id);
return;
}
// Clear the screen first
this.gameEngine.renderContent('');
// Render each component
this.components.forEach(component => {
if (typeof component.render === 'function') {
component.render();
}
});
}
- O console exibiu o erro:
Game engine not set for scene: tutorial. - Informei e solicitei ao Q Developer uma análise do erro.
- Ele identificou e corrigiu o problema no arquivo
scene.js.
Depois de aplicar a correção, o jogo funcionou!
Ele até adicionou um pequeno utilitário auxiliar de depuração para auxiliar no desenvolvimento.
Então antes de seguir com o desenvolvimento, eu testei o bate papo com várias abas e desabilitei o agente de código para utilizar uma das abas apenas para dialogo, perguntas, sugestões, etc. Conversei com ele sobre a escolha das tecnologias, o design system adotado e pedi uma explicação mais detalhada sobre o "debug helper".
5. Testes Unitários
- Pedi ao Q Developer para gerar testes unitários
- Ele configurou o
package.json, criou a estrutura de testes e explicou o processo. - Alguns testes falharam inicialmente, mas com ajustes conseguimos validar a maioria deles.
Nota: O processo pode legar algum tempo
6. Revisão de Código e Melhorias
Solicitei uma revisão da base de código focando em vulnerabilidades de segurança e acessibilidade. O Q Developer sugeriu e eu pedi para que ele implementou melhorias, atualizando também a documentação do projeto. Rodei os testes e teve uma falha a mais comparado a antes, mas estava tudo funcionando ok
7. Documentação e Fluxo de Trabalho
Para finalizar, utilizei o Q Developer para gerar as documentação e manter o README.md atualizado.
Ele também gerou arquivos adicionais como CONTRIBUTING.md, Chapter Creation Guide, Architecture Document, Educational Design Document e até um flowchart.
Por fim, pedi que ele gerasse um artigo de submissão para o desafio em Markdown resumindo toda a jornada, com tom educacional e formatação clara — o que se tornou a base para este post.
📚 Valor Educacional
O processo de desenvolvimento com o Amazon Q Developer foi altamente educativo. Aprendi sobre:
- Estruturação de projetos modulares em JavaScript.
- Implementação de testes unitários com Jest.
- Melhores práticas de acessibilidade e segurança em aplicações web.
- Importância da documentação clara e objetiva.
🧠 Conclusão
O Amazon Q Developer foi um parceiro essencial na criação do "The Golden Duck". Desde a concepção até a implementação, depuração, testes e documentação, sua assistência tornou o processo mais eficiente e educativo. Recomendo fortemente o uso do Amazon Q Developer — especialmente para quem deseja aprender na prática, com orientação contextualizada, e ganhar mais confiança ao desenvolver projetos reais.
O resultado é um jogo que não apenas ensina a navegação pelo teclado, mas também demonstra como a assistência de IA pode aprimorar o processo de desenvolvimento, permitindo que os desenvolvedores criem aplicativos mais robustos, acessíveis e educacionais.