Módulo 2 · Ciclo Comum · IN02 · Aula 1 de 11
Introdução aos
Sistemas Web
Como a Internet funciona — e por onde começamos a construir aplicações web modernas
🌐 Arquitetura Cliente-Servidor
🔄 Protocolo HTTP
⚡ Frontend & Backend
🗄️ Banco de Dados
📦 JSON
🟢 Node.js + Express
⏱️ Daily — 15 Minutos
O que você fez? O que vai fazer? Algum impedimento?
15:00
✅ O que fiz 🎯 O que vou fazer 🚧 Impedimentos 📦 Progresso do projeto
📋 Agenda da Aula 1
Estrutura e objetivos da aula de hoje

🕐 Bloco 1 — Internet e Arquitetura Web (25 min)

Como a Internet funciona, cliente-servidor, HTTP e estrutura de aplicações modernas.

🕑 Bloco 2 — Frontend vs Backend (25 min)

Separação de responsabilidades, camadas de uma aplicação e o papel de cada tecnologia.

🕒 Bloco 3 — JSON e Stack Node.js + Express (25 min)

Formato de dados JSON, ecosistema Node.js e primeiros passos com Express.

🎯 Objetivo da Aula

Ao final, o aluno deve compreender como uma requisição web percorre todas as camadas da aplicação.

O que é a Internet?
A infraestrutura global que conecta tudo

🌐 Internet

Rede global de computadores conectados via cabos, fibra óptica e ondas de rádio. Criada como ARPANET em 1969, aberta ao público nos anos 90.

🕸️ World Wide Web (WWW)

Sistema de documentos e aplicações interligados que rodam sobre a Internet. Inventado por Tim Berners-Lee em 1989. A Web é parte da Internet.

📱 Aplicação Web

Programa acessível via URL no navegador. Combina interface visual com lógica de negócio em servidores remotos.

📅 Evolução da Web

Arquitetura Cliente-Servidor
O modelo fundamental que sustenta toda a web
🖥️
Cliente
Navegador / App
HTTP Request
🌐
Internet
DNS + TCP/IP
Roteamento
⚙️
Servidor Web
Node.js / Express
SQL Query
🗄️
Banco de Dados
PostgreSQL

👤 Cliente (quem pede)

  • Navegador web — Chrome, Firefox, Safari
  • Aplicativo mobile (iOS / Android)
  • Outro servidor chamando uma API

🏢 Servidor (quem responde)

  • Recebe e interpreta a requisição HTTP
  • Executa a lógica de negócio
  • Consulta banco de dados
  • Retorna resposta: JSON, HTML ou arquivo
O que acontece em 50ms?
Jornada completa de uma requisição web — do clique à tela
1
🔤 Você digita a URL
https://meuapp.com/usuarios
2
📖 DNS resolve o domínio
meuapp.com → 192.168.1.50 (IP do servidor)
3
🤝 TCP/IP estabelece conexão
Handshake de 3 vias: SYN → SYN-ACK → ACK
4
📨 HTTP envia a requisição
GET /usuarios HTTP/1.1 com headers
5
⚙️ Servidor autentica e processa
Valida token, consulta banco, monta JSON
6
📬 Servidor retorna resposta
HTTP 200 OK + JSON com os dados
7
🎨 Navegador renderiza
JS processa o JSON e atualiza a interface
Tudo isso em ~50–200ms!
Com CDN e HTTP/2 pode chegar a menos de 20ms
Requisição HTTP na Prática
Veja como navegador e servidor conversam
HTTP Request → meuapp.com
HTTP Response ← meuapp.com

Métodos HTTP
Os verbos que definem o que o cliente quer fazer
GET
Buscar dados
Solicita um recurso. Sem corpo na requisição.
GET /usuarios/42
POST
Criar recurso
Envia dados para criar algo novo.
POST /usuarios
PUT
Atualizar tudo
Substitui um recurso inteiro.
PUT /usuarios/42
PATCH
Atualizar parte
Modifica campos específicos.
PATCH /usuarios/42
DELETE
Remover
Remove o recurso especificado.
DELETE /usuarios/42

🧩 CRUD ↔ HTTP

As 4 operações fundamentais de qualquer sistema (Create · Read · Update · Delete) mapeiam diretamente: POST → GET → PUT/PATCH → DELETE

1xx · Informacional
RARO · PROTOCOLO
"Estou processando — segure aí" · Respostas intermediárias antes do resultado final
root@inteli:~ — bash — curl 1xx demo

💡 Quando aparece 1xx?

100 Continue — cliente pergunta "posso mandar o payload grande?" antes de enviar. 101 Switching Protocols — handshake de WebSocket / HTTP/2 upgrade. Você raramente escreve código para 1xx — libs cuidam disso.

2xx · Sucesso ✅
OK · CREATED · NO CONTENT
"Deu certo" · A família que você mais vai retornar nas suas APIs
root@inteli:~ — bash — curl 2xx demo

💡 Regra prática

200 leitura / update bem-sucedido · 201 recurso criado (sempre com Location:) · 204 ação concluída sem corpo (delete, logout). Nunca retorne 200 com {"error":...} dentro — use 4xx/5xx apropriados.

3xx · Redirecionamento ↪️
MOVED · FOUND · NOT MODIFIED
"O recurso mudou de lugar" · Ou "você já tem a versão atual em cache"
root@inteli:~ — bash — curl 3xx demo

💡 Diferenças sutis

301 Moved Permanently — browser atualiza bookmarks e caches para sempre · 302 Found — redirect temporário · 304 Not Modified — resposta sem corpo, economiza banda quando ETag ou Last-Modified batem com o cache local.

4xx · Erro do Cliente ❌
BAD REQUEST · UNAUTH · NOT FOUND
"A culpa é de quem chamou" · Payload errado, token faltando, rota inexistente
root@inteli:~ — bash — curl 4xx demo

💡 Os 3 mais comuns

400 payload inválido (formato, tipo) · 401 não autenticado (sem token ou expirado) · 403 autenticado mas sem permissão · 404 recurso não existe. Sempre inclua mensagem de erro útil no corpo.

5xx · Erro do Servidor 💥
INTERNAL · BAD GATEWAY · UNAVAILABLE
"Algo quebrou do nosso lado" · O alerta no Slack toca 🚨 e alguém acorda
root@inteli:~ — bash — curl 5xx demo

💡 Todo 5xx é observabilidade

500 exceção não tratada no app · 502 proxy reverso não alcançou o upstream · 503 fora do ar / rate-limited (use Retry-After). Log estruturado + X-Request-ID + alerta automático = sobrevida em produção.

Frontend vs Backend
Dois mundos que precisam trabalhar juntos
Aspecto🖥️ Frontend⚙️ Backend
Onde roda No navegador do usuário No servidor (nuvem / on-prem)
Linguagens HTML · CSS · JavaScript Node.js · Python · Java · Go
Responsabilidade Interface visual, UX, interatividade Lógica de negócio, segurança, dados
Acesso a dados ❌ Nunca acessa o banco diretamente ✅ Acessa banco, arquivos, APIs externas
Comunicação Chama APIs via fetch() Expõe endpoints REST ou GraphQL
As 3 Camadas de uma Aplicação Web
Separação de responsabilidades que organiza e escala
🎨
Camada de Apresentação — Frontend
HTML · CSS · JavaScript · React / Vue
O que o usuário vê e interage. Roda no navegador. Consome APIs via HTTP.
⬇️ HTTP / REST API
⚙️
Camada de Aplicação — Backend
Node.js · Express.js · REST API
Lógica de negócio, autenticação, validações, orquestração de dados.
⬇️ SQL / ORM
🗄️
Camada de Dados — Persistência
PostgreSQL · SQL · Sequelize ORM
Armazena, organiza e recupera dados de forma estruturada e confiável.
JSON — A Língua Franca da Web
Como Frontend e Backend trocam dados
response.json

O que é JSON?

JavaScript Object Notation — formato leve para troca de dados. Legível por humanos e fácil de parsear por máquinas.

📋 Tipos de valor suportados

  • string — "texto entre aspas duplas"
  • number — 42, 3.14 (sem aspas)
  • boolean — true / false
  • array — [1, 2, 3]
  • object — {"chave": "valor"}
  • null — ausência de valor

🔄 No código JavaScript

Receber: JSON.parse(texto) → objeto JS
Enviar: JSON.stringify(obj) → texto JSON

Nossa Stack no Módulo 2
Tecnologias para construir um sistema web completo do zero
🌐
HTML / CSS
Estrutura e visual
JavaScript
Lógica no browser
🟢
Node.js
JS no servidor
🚂
Express.js
Framework HTTP
🐘
PostgreSQL
Banco relacional

🔍 Por que esta stack?

  • Uma linguagem: JavaScript em todo o sistema
  • Padrão de mercado: Node + Express amplamente usados
  • PostgreSQL: banco robusto, gratuito e confiável
  • Curva suave: ótimo para aprender do zero

🏗️ O que vamos construir

  • API REST completa com Node.js + Express
  • Banco de dados modelado em PostgreSQL
  • Frontend que consome a API via fetch
  • Testes automatizados da API
Use Cases · Do Requisito à Narrativa
Como transformar cada RF em uma história completa que o sistema precisa suportar

🎬 O que é um Use Case?

Uma descrição narrativa de como um ator (pessoa ou sistema) interage com o software para alcançar um objetivo de negócio.

Não é tela, não é código — é o "filme" do que acontece passo a passo, incluindo o que dá errado.

🔗 RF → UC

Cada RF de alto nível vira um ou mais UCs detalhados.

RF-01 Atendente registra pedido

UC-01 Registrar Pedido   UC-02 Cancelar Pedido   UC-03 Consultar Status

🗣️ Linguagem comum

Negócio e dev falam a mesma história — sem ambiguidade, sem jargão técnico desnecessário.

🔀 Cobre caminhos tortos

Fluxos alternativos capturam o que pode dar errado antes de virar bug em produção.

✅ Base de testes

Cada fluxo vira um cenário de teste com entrada, passos e resultado esperado.

Anatomia de um Use Case
Os 7 campos obrigatórios de todo UC bem formado — o "esqueleto" que você vai preencher no artefato
UC-ID
Identificação + Nome
Código único e nome no infinitivo: "Registrar Pedido", "Cancelar Reserva".
ATOR
Ator(es) principal(is)
Papel que dispara o caso — não é pessoa específica. Ex.: Atendente, Gerente, Sistema de Pagamento.
PRÉ
Pré-condição
Estado do sistema antes. "Atendente autenticado", "Produto existe no catálogo".
FLUXO
Fluxo Principal (caminho feliz)
Passos numerados: ator age → sistema responde → até o objetivo. Um verbo por passo.
ALT
Fluxos Alternativos e Exceções
"No passo 3, se X, então Y". Inclui validações, erros e mensagens ao usuário.
PÓS
Pós-condição
Estado depois. "Pedido salvo com status=PENDENTE", "Estoque decrementado".
REGRAS
Regras de Negócio + RNFs vinculadas
Rastreabilidade: lista de IDs de RN-* e RNF-* que o UC precisa respeitar.

✍️ Passos no imperativo

Comece com verbo + objeto. Evite "o usuário deseja". Use: "Informar CPF", "Selecionar item".

📐 Granularidade

Um UC = um objetivo atômico. Se virou épico, quebre em UCs menores.

🚫 Nada de UI

Não diga "clicar no botão azul". Diga "Confirmar envio". UI muda; intenção não.

🔁 «include» vs «extend»

include: reuso obrigatório (autenticar). extend: caminho opcional (aplicar cupom).

Diagrama de Use Cases (UML)
A visão panorâmica — quem usa o sistema e para quê · Loja Universitária 🛍️
Sistema · Loja Universitária Atendente Gerente UC-01 · Registrar Pedido UC-02 · Cancelar Pedido UC-03 · Consultar Estoque UC-04 · Gerar Relatório UC-05 · Autenticar «include»

👤 Ator

Papel externo que interage. Não é pessoa específica — é função.

⬭ Elipse

Cada elipse = um caso de uso. Nome no formato verbo + objeto.

▭ Fronteira

O retângulo tracejado delimita o que é escopo do sistema.

┄┄ «include»

UC-01 sempre executa UC-05 (autenticar). Reuso mandatório.

«include» vs «extend»
Os dois tipos de reuso entre use cases — quando o passo é obrigatório e quando é opcional
«include» Reuso OBRIGATÓRIO

UC-A sempre executa UC-B. Sem exceção.

UC-01 Registrar Pedido UC-05 Autenticar «include»
📖 Leia como

"Para Registrar Pedido, o sistema sempre inclui Autenticar."

✅ Use quando: há um passo comum a vários UCs — autenticação, validação, auditoria, logging.
«extend» Reuso OPCIONAL

UC-B pode estender UC-A em condição específica.

UC-01 Registrar Pedido UC-06 Aplicar Cupom «extend» [cliente tem cupom válido]
📖 Leia como

"Se o cliente tem cupom válido, Aplicar Cupom estende Registrar Pedido."

✅ Use quando: há comportamento extra que pode ou não acontecer — cupom, brinde, alerta de fraude, upsell.
Aspecto «include» — obrigatório «extend» — opcional
Execução Sempre que UC-A roda Só se a condição valer
Direção da seta UC base → UC incluído UC extensão → UC base
O UC base sabe? Sim — referencia UC-B no fluxo Não — UC-A ignora UC-B
Exemplos reais Autenticar · Validar CPF · Gerar log Aplicar cupom · Alerta fraude · Upsell
UC-01 · Registrar Pedido
Exemplo completo rastreado aos RF/RN/RNF — Minimundo: Loja Universitária 🛍️
UC-ID: UC-01  ·  Nome: Registrar Pedido
Ator principal: Atendente  ·  Atores secundários: Sistema de Estoque
Pré-condições: Atendente autenticado (role=atendente) · Produto(s) existente(s) no catálogo
Fluxo Principal:
  1. Atendente inicia um novo pedido informando o cliente.
  2. Atendente adiciona ≥1 item (produto + quantidade).
  3. Sistema consulta o estoque de cada item («include» UC-03).
  4. Sistema calcula o total e apresenta resumo ao Atendente.
  5. Atendente confirma o pedido.
  6. Sistema persiste o pedido com status=PENDENTE e decrementa o estoque.
  7. Sistema retorna o id do pedido.
Fluxos Alternativos e Exceções:
  • A1 (passo 3): Estoque insuficiente → sistema exibe "Produto X indisponível" e retorna ao passo 2 para ajuste.
  • A2 (passo 5): Atendente cancela antes de confirmar → rascunho descartado, sem efeito no estoque.
  • E1 (qualquer passo): Falha de conexão com BD → sistema preserva rascunho local e exibe erro 503.
Pós-condição (sucesso): Pedido gravado com status=PENDENTE · estoque reduzido · evento PEDIDO_CRIADO emitido.
Regras / RNFs vinculadas:
RN-01 · estoque ≥ 0 RN-04 · preço congelado RNF-DES · p95 < 500ms RNF-SEG · role=atendente

🧭 Rastreabilidade

Atende: RF-01 · RF-02
Obedece: RN-01 · RN-04
Mede-se por: RNF-DES · RNF-SEG

🎯 Critérios de aceite

  • Pedido com 3 itens grava em ≤ 500ms @ p95
  • Item sem estoque retorna 409 sem gravar
  • Sem role=atendente403

🧪 Esboço de teste

// fluxo principal
POST /pedidos { itens:[…] }
expect 201 + id
// A1 sem estoque
POST /pedidos { item:999 }
expect 409
Roteiro do Módulo 2
11 aulas — do conceito ao sistema web completo
1
📍 Introdução aos Sistemas Web
Você está aqui! HTTP, stack, arquitetura
2
🗄️ Banco de Dados I
Conceitos, modelo conceitual, SQL básico
3
🔄 Banco de Dados II
CRUD: INSERT, SELECT, UPDATE, DELETE
4
🔗 Banco de Dados III
JOINs e consultas complexas
5
⚙️ Back-End I
Node.js, Models e Controllers
6
🔌 Back-End II
Endpoints de leitura e escrita
7
🎨 Front-End I
HTML, DOM e JavaScript
8
🔄 Front-End II
JavaScript assíncrono e fetch()
9
🧪 Testes e Automação
Testes unitários e de integração
10
💅 Front-End III
CSS e JavaScript avançado
11
🌐 Mergulhando nas Redes
TCP/IP, DNS, CDN e resiliência
RM-ODP — As 5 Visões do Sistema
Reference Model for Open Distributed Processing · ISO/IEC 10746 · O framework que organiza tudo que vamos construir
🏢
Enterprise — O QUÊ e PARA QUEM
Quem usa? Qual o problema do negócio? Quais os objetivos? · Aulas 1–3
Personas, requisitos funcionais, regras de negócio, fluxo principal do sistema.
📋
Information — OS DADOS
Que informações o sistema precisa persistir? Entidades e fluxos de dados. · Aulas 2–4
Modelo ER, DER, modelo relacional, SQL, integridade e rastreabilidade.
⚙️
Computational — A LÓGICA
Quais serviços e interfaces o sistema oferece? · Aulas 5–6
Componentes (Model, Controller), operações, endpoints REST e contratos da API.
🔧
Engineering — A INTEGRAÇÃO
Como os componentes se comunicam? Como distribuir? · Aulas 7–8 e 11
Infraestrutura, protocolos, integração front-back, rede e resiliência.
💻
Technology — O COMO (Stack)
Quais tecnologias concretas implementam tudo isso? · Aulas 1 e 9
Node.js, Express, PostgreSQL, HTML/CSS/JS — as escolhas técnicas reais.
Esta Aula: Enterprise + Technology
Aula 1 · RF, RNF (8 eixos) e Artefato esperado

🎯 Requisito Funcional (RF) desta Aula

"Identificar o problema, os usuários e o fluxo principal do sistema."

  • Entender a diferença entre cliente, servidor, banco e rede
  • Identificar usuários e objetivos do projeto
  • Relacionar páginas, ações do usuário e respostas esperadas
  • Levantar RF e RNF iniciais do projeto

📦 Artefato esperado

  • 🗺️ Mapa inicial do sistema web
  • 📋 Lista preliminar de RF e RNF
  • 📖 Vocabulário básico do domínio

⚖️ RNF — 8 Eixos ISO/IEC 25010

Foco desta aula: Usabilidade · Desempenho · Segurança
EixoRequisito introdutório
🎨 UsabilidadeInterface deve ser clara e intuitiva para o usuário final
⚡ DesempenhoRespostas HTTP em menos de 2 segundos em condições normais
🔒 SegurançaComunicação via HTTPS; dados sensíveis nunca expostos no front
🔄 ConfiabilidadeSistema deve tratar erros e exibir mensagens compreensíveis
🔧 SuportabilidadeCódigo organizado, comentado e versionado desde o início
Matrizes de Requisitos · RF, RN e RNF
Como cada tipo aparece no artefato — Minimundo: Loja Universitária 🛍️

🎯 Matriz de RF

ID Funcionalidade
RF-01Atendente registra pedido com ≥1 item
RF-02Sistema consulta estoque antes de confirmar
RF-03Gerente visualiza relatório diário de vendas
RF-04Atendente cancela pedido pendente
Responde: o que o sistema faz.

📏 Matriz de RN

ID Regra
RN-01Estoque nunca pode ficar negativo
RN-02Pedido só é cancelável em ≤ 1h da criação
RN-03E-mail do cliente é único na base
RN-04Preço unitário é congelado no momento da venda
Responde: quais restrições governam o comportamento.

⚖️ Matriz de RNF

Eixo Requisito mensurável
⚡ DESPOST /pedidos p95 < 500ms @ 50 req/s (k6)
🔒 SEGRotas /admin exigem role=gerente (401/403)
🔄 CONFUptime ≥ 99,5% mensal (UptimeRobot)
📊 CAPSuporta 100k pedidos/dia; índice (cliente_id, criado_em)
Responde: como o sistema opera.
🔗 Rastreabilidade (exemplo)
RF-02 (consulta estoque) RN-01 (estoque ≥ 0) RNF-DES (p95 < 500ms) · Cada linha do artefato precisa conectar os três.
Da Persona aos Requisitos · o fluxo do levantamento
Tudo começa na persona — UX e Computação se cruzam até virar RF e RNF
Eixo UX — entendimento do usuário
Eixo Computação — descrição técnica
1 · Descoberta
👤
UX
Persona
Quem usa, o que precisa, o que sente.
📏
Computação
Regras de Negócio
O que o domínio impõe — restrições e políticas.
2 · Especificação
🎯
Computação
Use Cases
Atores e fluxos do sistema.
📝
UX
User Stories
Como X, eu quero Y, para que Z.
3 · Requisitos
⚙️
Computação
Requisitos Funcionais (RF)
O que o sistema faz — verificável.
⚖️
Computação
Requisitos Não Funcionais (RNF)
Como o sistema opera — métricas e limites.
🔗 Direção do fluxo
Persona e User Stories são do eixo UX; Regras de Negócio, Use Cases, RF e RNF são do eixo Computação. Cada artefato passa o bastão para o próximo — e a rastreabilidade conecta os três níveis (Descoberta → Especificação → Requisitos).
Artefato de Entrega
Critérios mínimos para o aceite da sprint

📎 Entrega formalizada

Serve como comprovação da sprint — válida mesmo quando a presença no momento não for possível.

🧱 RNFs como base inicial

Estabelecem um ponto de partida. Podem ser refinados nas próximas sprints sem perder rastreabilidade.

✅ RF com critério de aceite

Cada requisito funcional priorizado possui ao menos um critério técnico associado.

📏 Regras de negócio

Numeradas e redigidas de forma a serem implementáveis e testáveis.

🔗 Correspondência RF ↔ RN

Relação explícita entre cada requisito funcional e as regras de negócio que o sustentam.

🧭 Matriz de rastreabilidade

Permite seguir RF → RN sem lacunas nos fluxos priorizados.

Git Flow · Como trabalhamos juntos 🔀
Git flow truncado · Conventional Commits · Merge Request obrigatório

🌿 Git Flow Truncado

Duas branches principais, sem develop:

  • main — sempre deployável
  • feature/<nome> — uma por tarefa
# fluxo da aula
git checkout -b feature/login
git commit -m "feat: ..."
git push origin feature/login
# → abrir Merge Request

📝 Conventional Commits

Formato obrigatório:

<tipo>(<escopo>): <descrição>
feat adicionar login via JWT
fix corrigir 500 em /pedidos
docs atualizar README da API
refactor extrair PedidoService
test cobrir cancelamento
chore bump express 4.19

🔀 Merge Request OBRIGATÓRIO

Nada entra em main sem MR revisado.

  • Abrir MR feature/* → main
  • Descrição: o que e por quê
  • Pelo menos 1 revisor do grupo
  • CI verde antes de aprovar
  • Squash merge preferido
✅ Push direto em main = bloqueado
🚫 Commits proibidos: "wip", "update", "arrumando", "ajustes". Sem tipo → sem merge.
🗄️
Mão na massa: Supabase
Cada aluno(a) deve criar o seu próprio projeto no Supabase e explorar o banco de dados antes da próxima aula.
1️⃣ Criar conta em supabase.com 🔗
2️⃣ Criar um novo projeto
3️⃣ Explorar o Table Editor
4️⃣ Criar tabelas de teste
5️⃣ Inserir e consultar dados
6️⃣ Abrir o SQL Editor
7️⃣ Observar logs e dashboard
8️⃣ Ajustar o template no repositório do grupo
🔗 supabase.com · Traga dúvidas e descobertas para a próxima aula