Logo EMPE

Manual de Uso da Extensão

Guia rápido para usar a extensão Frontend Teams Cup no VS Code durante a competição, desde o login até o envio dos arquivos oficiais.
VS Code Ambiente oficial index.html + style.css
Abrir no Marketplace

1. Finalidade da Extensão

A extensão Frontend Teams Cup foi criada para apoiar a participação na competição dentro do VS Code, centralizando a autenticação, a sincronização com o servidor e o fluxo de edição e envio das atividades.

  • autenticação do participante;
  • sincronização do usuário e do time com o servidor;
  • definição da dinâmica atual;
  • obtenção e envio de index.html e style.css;
  • acesso a gabaritos, preview e ferramentas de apoio;
  • monitoramento de conformidade da sessão.
Em resumo, a extensão transforma o VS Code no ambiente oficial de trabalho da competição.

2. Instalação

A extensão pode ser instalada pelo gerenciador de extensões do VS Code, pesquisando pelo nome Frontend Teams Cup.

Também é possível instalar diretamente pelo Marketplace oficial:

Frontend Teams Cup no Marketplace

3. O Que a Extensão Faz

  • entrada com Gmail;
  • sincronização da conta com o cadastro da competição;
  • abertura do perfil do time;
  • edição do perfil do usuário;
  • abertura do ranking;
  • definição do código da dinâmica;
  • verificação manual e automática da abertura do evento;
  • download de gabaritos e medidas;
  • obtenção dos arquivos oficiais do servidor;
  • envio dos arquivos alterados;
  • restauração de backup local de sessão segura;
  • visualização de gabarito/preview com cores e tamanhos;
  • abertura de navegador de execução;
  • listagem de extensões ativas;
  • detecção de agente de IA;
  • log de atividades suspeitas;
  • bloqueios de segurança para reduzir uso indevido do ambiente.

4. Requisitos Para Uso

  • o VS Code deve estar aberto com uma pasta de projeto vazia;
  • é imprescindível que a pasta esteja vazia antes de iniciar a sessão;
  • o computador precisa de internet e acesso ao servidor da competição;
  • o usuário precisa estar cadastrado no sistema;
  • o time do usuário deve estar vinculado corretamente no servidor.

5. Estrutura Esperada do Workspace

A extensão trabalha principalmente com estes arquivos na raiz do projeto:

  • index.html
  • style.css

A pasta aberta é usada temporariamente para edição da dinâmica digitada. Ao inserir um novo código de dinâmica, o sistema traz os últimos arquivos enviados ao servidor.

Arquivos fora da estrutura esperada podem inutilizar a sessão. Um exemplo comum é executar o projeto com F5 enquanto o CSS está em foco, criando a pasta .vscode. Nesse caso, é necessário excluir arquivos/pastas indevidos e acionar o desbloqueio no menu da extensão.

6. Comandos Principais

Entrar com Gmail

Realiza autenticação e sincroniza e-mail, usuário, time e dados detalhados do time. Use no início da sessão ou quando precisar trocar de conta.

Sair e Desincronizar Conta

Limpa o estado local da extensão, incluindo usuário, time, dinâmica atual, pontuação exibida, estados de bloqueio e monitoramento interno.

Use quando for trocar de participante ou recomeçar a sessão sem reiniciar o VS Code.