1 / 11
Modulo 8 / Projeto Integrador

Desenvolvimento + Code Review

Finalizacao do projeto, revisao de codigo e deploy.

school Aulas 38-39 schedule 4 horas

Conceito

O que e Code Review?

search Definicao

Revisao sistematica do codigo por outro desenvolvedor antes de integrar ao projeto principal.

  • ▸ Pratica padrao em empresas de tecnologia
  • ▸ Encontra bugs antes de ir para producao
  • ▸ Melhora a qualidade do codigo
  • ▸ Compartilha conhecimento entre o time

swap_horiz Fluxo no GitHub

1. Dev cria branch e faz commits
2. Abre um Pull Request (PR)
3. Outro membro revisa o codigo
4. Comentarios e sugestoes de melhoria
5. Aprovacao e merge na main

Checklist

O que revisar?

Funcionalidade

  • ▸ O codigo faz o que deveria?
  • ▸ Cobre casos de erro?
  • ▸ Validacoes estao completas?
  • ▸ Autenticacao esta protegendo?

Qualidade

  • ▸ Nomes de variaveis claros?
  • ▸ Funcoes pequenas e focadas?
  • ▸ Codigo duplicado?
  • ▸ Segue o padrao MVC?

Seguranca

  • ▸ .env no .gitignore?
  • ▸ Senhas com hash (bcrypt)?
  • ▸ Token JWT verificado?
  • ▸ Dados do usuario escapados?

Comunicacao

Comentarios produtivos

Evitar

  • "Isso ta errado."
  • "Faz de outro jeito."
  • "Esse codigo e ruim."
  • "Por que voce fez assim?"

Preferir

  • "Sugestao: usar try/catch aqui para tratar o erro."
  • "O que acha de extrair isso para uma funcao?"
  • "Podemos usar runValidators aqui para garantir."
  • "Ficou bom! So falta tratar o caso de 404."
lightbulb Use prefixos nos comentarios: sugestao:, bug:, duvida:, elogio:

Deploy

Preparando o deploy

checklist Checklist pre-deploy

  • check_circle Todas as rotas funcionando localmente
  • check_circle .env.example atualizado
  • check_circle .gitignore com node_modules e .env
  • check_circle README com instrucoes
  • check_circle Package.json com script start
  • check_circle PORT usando process.env.PORT
  • check_circle MongoDB Atlas com IP liberado (0.0.0.0/0)

cloud_upload Deploy na Vercel

1. Acesse vercel.com e faca login com GitHub
2. Clique em "Add New Project"
3. Selecione o repositorio do projeto
4. Adicione as variaveis de ambiente
5. Clique em "Deploy"
warning Lembre de adicionar MONGODB_URI e JWT_SECRET nas variaveis!

Configuracao

Vercel para Node.js

settings vercel.json

{ "version": 2, "builds": [ { "src": "index.js", "use": "@vercel/node" } ], "routes": [ { "src": "/(.*)", "dest": "index.js" } ] }

code Exportar o app

// No final do index.js // Para a Vercel funcionar: if (process.env.NODE_ENV !== 'production') { app.listen(PORT, () => { console.log( `Servidor na porta ${PORT}` ); }); } // Exportar para a Vercel module.exports = app;
A Vercel importa o app e gerencia o servidor automaticamente.

Qualidade

Testes finais

Roteiro de teste manual

Usuario nao logado
  • ☐ Consegue ver a listagem?
  • ☐ Consegue filtrar/buscar?
  • ☐ Nao consegue criar/editar/excluir?
  • ☐ Consegue criar conta?
  • ☐ Consegue fazer login?
Usuario logado
  • ☐ Consegue criar item?
  • ☐ Consegue editar item?
  • ☐ Consegue excluir item?
  • ☐ Validacao funciona (campo vazio)?
  • ☐ Consegue fazer logout?
Responsivo: teste em tela menor (F12 > toggle device)
Deploy: teste no link da Vercel, nao so no localhost

Roteiro

Organizacao das aulas

today Aula 38

20min Apresentacao: code review e deploy
1h Desenvolvimento e resolucao de bugs
40min Code review cruzado entre equipes

event Aula 39

10min Feedback do code review
1h Finalizacao + deploy na Vercel
30min Testes finais no ambiente de producao
20min Preparacao para a apresentacao

Atividade

Code review cruzado

swap_horiz Como funciona

  1. Cada equipe vai receber o repositorio de outra equipe
  2. Clone o projeto e tente rodar localmente seguindo o README
  3. Revise pelo menos 3 arquivos focando no checklist (funcionalidade, qualidade, seguranca)
  4. Abra Issues no GitHub com seus comentarios e sugestoes
  5. Seja construtivo: a ideia e ajudar, nao criticar
description

README esta claro?

play_arrow

Projeto roda com npm install + npm run dev?

security

.env esta protegido?

Preparacao

Apresentacao final

O que apresentar (10 min por equipe)

2min O que e o projeto e qual problema resolve
5min Demonstracao ao vivo (no link da Vercel)
2min Tecnologias, desafios e aprendizados
1min Perguntas

Dicas

  • ▸ Teste o deploy antes da apresentacao
  • ▸ Tenha dados ja cadastrados para demonstrar
  • ▸ Mostre o fluxo completo: registro, login, CRUD
  • ▸ Mostre o responsivo no celular ou DevTools
  • ▸ Prepare um plano B (localhost) caso o deploy falhe
  • ▸ Todos os membros devem falar
Proxima aula

Aula 40

Apresentacao final dos projetos.

task_alt O que vimos nestas aulas

  • check_circleO que e code review e como fazer
  • check_circleChecklist de revisao (funcionalidade, qualidade, seguranca)
  • check_circleDeploy na Vercel com vercel.json
  • check_circleTestes finais e roteiro de QA
  • check_circlePreparacao para a apresentacao final
Proxima aula
auto_stories Referencia: Vercel Docs
Leandro Medeiros