F01 — O mapa: cada peça da stack como um posto do restaurante
Entenda o que são servidor, HTTP, API, JSON, banco de dados, framework e ORM percorrendo a viagem de um pedido — e descubra onde a analogia do restaurante quebra.
Em uma frase: Um sistema como o MySuperStore é um restaurante: cada tecnologia é um posto de trabalho com uma função clara. Pergunta guia: Quando alguém toca em 'Comprar', quais peças de software acordam e por que cada uma precisa existir?
Vídeo da lição F01 · NotebookLM
Material multimídia da lição
O caminho de um clique até o banco de dados
Resumo visual do trajeto de um pedido: do navegador ao Caddy, urls.py, serializer, view, ORM e PostgreSQL.
Vídeo MP4
Passo 1 · Antes de ler: preveja
Tente responder antes de abrir o gabarito
Errar uma previsão mostra exatamente onde está a lacuna. Chute mentalmente ou no papel antes de revelar a resposta do professor.
1. Uma cliente toca em 'Comprar'. O pedido passa por quantos computadores diferentes até ser gravado de forma definitiva?
2. Onde fica gravado o fato 'esta bolsa foi vendida': no celular dela, na tela do site ou em outro lugar?
3. Se o servidor cair no meio do caminho, o pedido existe ou não?
Modelo mental único · O restaurante
Clique em cada posto para ver a tecnologia real
Front-end (Next.js + React)Next.js + React hospedado na Vercel
O salão e o cardápio
O cliente precisa de uma tela clara e rápida para navegar e pedir.
1. A viagem de um pedido (do toque ao banco)
Quando a cliente toca em Comprar, a tela (Front-end) monta uma comanda em formato JSON e envia pela rede via HTTPS. O porteiro (Caddy) confere o certificado e entrega ao Django.
Lá dentro, o garçom (urls.py) direciona para o cozinheiro (View), o conferente (Serializer) valida os dados, o cozinheiro consulta a despensa (PostgreSQL) via tradutor (ORM) e grava o pedido. Só então volta a resposta '201 Criado' em JSON.
2. Onde a analogia do restaurante quebra (muito importante!)
Toda analogia ajuda a lembrar, mas ela não é a coisa real. Na internet, três fenômenos acontecem que não existem num restaurante comum:
1) Mil clientes na mesma última unidade: um restaurante atende uma mesa por vez; na web, duas pessoas clicam em 'Comprar' no mesmo milissegundo. Sem trava no banco, você vende a mesma peça duas vezes.
2) O entregador que toca a campainha duas vezes: o provedor de pagamento pode enviar o mesmo webhook repetido se a rede oscilar. Sem idempotência, você confirma e repassa duas vezes.
3) O cliente pode falsificar a comanda: no navegador, qualquer pessoa pode abrir o DevTools e tentar enviar preço R$ 0,01. O servidor precisa recalcular tudo.
Quebre de propósito
Remover a validação no servidor e confiar só no navegador
Experimento: Imagine um checkout onde o navegador envia { produto_id: 1, preco_total: '0.01' } e a View grava direto sem consultar o preço no banco.
O que falha: Qualquer usuário técnico altera o JSON no navegador antes do envio e compra um produto de R$ 200,00 por R$ 0,01.
Por que a regra existe: Quem mostra (front-end) nunca decide valor nem estoque. Quem decide e recalcula é sempre o back-end consultando o banco.
Armadilhas comuns (errado × certo)
Errado
Certo
Por quê
Achar que o navegador guarda o estoque oficial
O banco de dados (PostgreSQL) é a única fonte da verdade
Dados no navegador podem ser alterados pelo usuário e somem se trocar de aparelho.
Confundir Framework (Django) com Biblioteca
Biblioteca você chama (ex.: math); Framework chama o seu código na hora certa
No Django, você escreve views e models e o framework orquestra o ciclo HTTP.
Mão na massa
Exercício com pista e gabarito
Mapeie no papel: se um cliente reclamar 'paguei o PIX e a tela não atualizou sozinha', quais dois postos do restaurante estão envolvidos?
Ver pista
Pense em quem avisa o servidor que o dinheiro caiu e quem mantém o canal aberto com a tela.
Ver gabarito
O Webhook (entregador do provedor de pagamento tocando a campainha do servidor) e o WebSocket (interfone entre a cozinha e a mesa para atualizar a tela na hora).
Quiz da lição
Quiz com explicação de cada erro
Revisão espaçada · 1, 3 e 7 dias
Fichas de revisão (clique para virar)
Se você só lembrar de 3 coisas desta lição:
Quem mostra (front-end) não decide; quem decide e grava é o back-end no banco de dados.
Cada tecnologia resolve um problema específico — não decore nomes, entenda o posto de trabalho.
Na web, requisições chegam em paralelo e falham no meio: por isso existem travas, transações e idempotência.