IDEs, Editores e Ambiente de Desenvolvimento

Introdução

Antes de escrever a primeira linha do projeto semestral, precisamos de um ambiente de desenvolvimento configurado e funcionando. A escolha das ferramentas certas afeta diretamente a produtividade, a qualidade do código e a facilidade de identificar erros ao longo do semestre.

Vamos conhecer as principais categorias de ferramentas, entender o que cada uma oferece e — através de uma pesquisa e avaliação — decidir qual combinação cada grupo adotará durante a disciplina.

1. O que é uma IDE e por que ela importa?

Uma IDE (Integrated Development Environment) reúne em um único programa os recursos necessários para escrever, executar e depurar código. Um simples editor de texto também serve para escrever JavaScript, mas uma IDE ou editor avançado oferece:

>Realce de sintaxe — cores que facilitam a leitura do código. >Autocompletar inteligente — sugestões de funções, métodos e variáveis enquanto você digita. >Detecção de erros em tempo real — sublinha problemas antes mesmo de executar. >Debugger integrado — permite pausar o programa, inspecionar variáveis e acompanhar o fluxo de execução linha a linha. >Terminal integrado — executa comandos Node.js, Git e npm sem sair da ferramenta. >Integração com Git — faz commits, ajuda gerenciar alterações e resolver conflitos visualmente. >Extensões e plugins — adicionam suporte a frameworks, formatadores e muito mais.

2. Ferramentas disponíveis

As ferramentas estao organizadas por categoria. Escolher pelo menos uma ferramenta de cada categoria obrigatória e justificar a escolha no relatório.

2.1 IDEs e editores de código

Ferramenta central do desenvolvimento. É onde se escreve, organiza e depura o código. Para desenvolvimento web com JavaScript, as principais opções são:

2.2 Controle de versão e colaboração

Essenciais para trabalhar em equipe e manter o histórico de evolução do projeto. Usaremos Git e GitHub no decorrer do semestre.

2.3 Gerenciamento de pacotes e dependências

Permitem instalar e gerenciar bibliotecas externas no projeto JavaScript/Node.js.

2.4 Banco de dados e clientes de banco

Vamos conectar o projeto web a um banco de dados relacional. Além do SGBD, é útil ter um cliente gráfico para visualizar e consultar os dados durante o desenvolvimento.

2.5 Teste e depuração de APIs

Indispensáveis para testar os endpoints da API REST que vamos construir no projeto.

2.6 Qualidade e padronização de código

Garantem que o código do projeto siga um padrão consistente entre todos os integrantes da equipe.

2.7 Deploy e ambiente de execução

3. Como avaliar uma ferramenta

Comparem ferramentas de forma estruturada.

4. O que é debugging e por que ele e importante

Debugging e o processo de encontrar e corrigir erros no código.. Em vez de usar de>console.log para imprimir variáveis em todo lugar, uma IDE com debugger permite:

>Definir breakpoints — pontos onde a execucão pausa automáticamente. >Inspecionar variáveis — ver o valor exato de cada variável no momento da pausa. >Executar passo a passo — avançar linha a linha para entender o fluxo do programa. >Avaliar expressões — testar expressões JavaScript diretamente no estado atual do programa. >Inspecionar a pilha de chamadas — ver quais funções foram chamadas ate chegar na linha atual.

Debugging no VS Code com Node.js

O VS Code possui debugger nativo para Node.js. Para usar, crie um arquivo de>.vscode/launch.json na raiz do projeto com o seguinte conteudo:

de>{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Executar projeto",
      "program": "${workspaceFolder}/src/index.js",
      "skipFiles": ["/**"]
    }
  ]
}

Com o arquivo configurado, clique na margem esquerda de qualquer linha para adicionar um breakpoint (um circulo vermelho aparecera). Em seguida pressione de>F5 para iniciar o debugging. A execucão pausara na linha marcada e o painel lateral mostrara todas as variáveis disponiveis naquele momento.

Debugging no navegador (frontend)

Para o código. JavaScript que roda no navegador, o debugger ja esta embutido nas ferramentas de desenvolvedor. Pressione de>F12, va para a aba Sources, encontre o arquivo de>.js e clique na linha desejada para adicionar um breakpoint. Funciona da mesma forma: a execucão pausa, as variáveis ficam visiveis e você avanca passo a passo.

5. Atividade

Etapa 1 — Divisão e pesquisa

Cada integrante fica responsável por pesquisar um subconjunto das categorias abaixo. Ao final, reúnam as informações e discutam em conjunto.

Etapa 2 — Instalação e configuração

Apos definir quais ferramentas adotarão, cada integrante instala e configura o seu ambiente. Ao final desta etapa, todos devem conseguir:

>Abrir um arquivo de>.js no editor escolhido com realce de sintaxe ativo. >Executar de>node arquivo.js pelo terminal integrado. >Colocar um breakpoint e iniciar o debugger. >Fazer um commit e push para o repositório da disciplina pelo Git integrado ou GitHub Desktop. >Conectar ao banco de dados pelo cliente grafico escolhido. >Enviar uma requisicão GET de teste pelo cliente de API escolhido.

Etapa 3 — Relatório

Preencher o template de relatório disponivel e entregar no repositório da disciplina antes do final da aula. O relatório deve conter:

>Ferramentas comparadas e descricão breve de cada uma. >Tabela comparativa com notas por criterio. >Conclusão indicando qual ferramenta foi escolhida em cada categoria e por que. >Print ou descricão do ambiente configurado.