Introdução ao Desenvolvimento Web

O Que Você Vai Aprender Neste Capítulo

Bem-vindo ao mundo do desenvolvimento web! Neste capítulo, você vai entender como a internet funciona nos bastidores e descobrir os fundamentos que todo desenvolvedor Full Stack precisa conhecer para criar aplicações web modernas.

A Magia Por Trás dos Cliques

Você já parou para pensar como uma página aparece no seu navegador em segundos? Ou como é possível comprar online com apenas alguns cliques? Esses "milagres digitais" acontecem graças a um sofisticado sistema de comunicação entre computadores.

O navegador (cliente) e o servidor trabalham juntos como uma equipe bem coordenada. O navegador pede informações e o servidor responde, enviando páginas, imagens e outros recursos. Esta comunicação é o coração da web.

No universo do Desenvolvimento Full Stack, você se torna um especialista nos dois lados dessa conversa:

• Frontend: A parte visual e interativa que os usuários veem e usam
• Backend: Os processos invisíveis que acontecem no servidor

Nota para iniciantes: Não se preocupe se alguns termos parecerem complexos agora. Ao final deste capítulo, você terá uma compreensão clara dos conceitos fundamentais!

Como a Web Realmente Funciona: A Jornada de um Clique

Quando você digita um endereço web e pressiona Enter, inicia-se uma extraordinária sequência de eventos que acontece em milissegundos. Vamos explorar essa jornada:

A Jornada de uma Requisição Web

1. Resolução de DNS: O navegador precisa descobrir onde está o site que você quer visitar. O DNS (Sistema de Nomes de Domínio) é como uma gigantesca agenda de contatos da internet que traduz nomes amigáveis como "google.com" em endereços IP que os computadores entendem.

2. Estabelecimento de Conexão: Uma vez que seu navegador sabe para onde ir, ele estabelece uma conexão com o servidor usando protocolos como TCP/IP (veremos mais sobre isso adiante).

3. Requisição HTTP: Seu navegador envia uma requisição formal solicitando a página ou recurso desejado.

4. Processamento no Servidor: O servidor recebe a requisição, processa-a (talvez buscando dados em um banco de dados) e prepara uma resposta.

5. Resposta do Servidor: O servidor envia de volta o código HTML, CSS, JavaScript e outros recursos necessários.

6. Renderização: Seu navegador interpreta todo esse código e monta a página visualmente na sua tela.

Analogia do dia a dia: Imagine todo esse processo como pedir uma pizza: você liga para a pizzaria (requisição), fornece seu endereço (como o DNS fornece o IP), faz o pedido específico (HTTP GET), a pizzaria prepara sua pizza (processamento no servidor), entrega o pedido (resposta) e finalmente você desfruta da pizza (renderização na tela).

O Que Acontece em Cada Etapa?

// Exemplo simplificado do que acontece nos bastidores quando você acessa um site
const acessarSite = async (url) => {
  // 1. Resolução de DNS - Traduz o nome do site para um endereço IP
  const ip = await DNS.resolver(url); // Ex: "google.com" → "142.250.190.78"
  
  // 2. Estabelece conexão TCP com o servidor
  const conexao = await TCP.conectar(ip, 80); // Porta 80 é o padrão para HTTP
  
  // 3. Envia requisição HTTP
  const requisicao = {
    metodo: 'GET',
    caminho: '/',
    headers: { 'User-Agent': 'MeuNavegador/1.0' }
  };
  await conexao.enviar(requisicao);
  
  // 4-5. Recebe a resposta do servidor
  const resposta = await conexao.receber();
  
  // 6. Renderiza o conteúdo (HTML, CSS, JS)
  navegador.renderizar(resposta.corpo);
};

Atividades práticas:

1. Experimente abrir o console do desenvolvedor no seu navegador (F12 ou Ctrl+Shift+I) enquanto acessa um site. Na aba "Network", você poderá ver todas as requisições acontecendo em tempo real!

2. Tente explicar para alguém, usando a analogia da pizza, como uma página web chega até o seu navegador. Use sua criatividade para tornar o exemplo ainda mais claro!

3. Reflexão: Que sites você acessa frequentemente? Tente imaginar toda a infraestrutura necessária para que esses sites cheguem até você em segundos.

IP e TCP/IP: A Base da Comunicação na Internet

Para que computadores "conversem", eles precisam de um endereço e de regras claras de comunicação.

O que é IP?

O IP (Internet Protocol) é como o endereço da sua casa, mas na internet. Ele identifica cada dispositivo de forma única.

• IPv4: Exemplo: 192.168.0.1 (endereços mais comuns, mas estão acabando).
• IPv6: Exemplo: 2001:0db8:85a3:0000:0000:8a2e:0370:7334 (criado para suportar mais dispositivos).

O que é TCP/IP?

O TCP/IP é um conjunto de regras (protocolos) que define como os dados são enviados e recebidos na internet.

• TCP (Transmission Control Protocol): Garante que os dados cheguem completos e na ordem certa.
• IP (Internet Protocol): Cuida do endereço e do caminho dos dados.

Camadas do modelo TCP/IP:

1. Aplicação: Onde estão os protocolos usados por programas (HTTP, FTP, SMTP).
2. Transporte: Garante que os dados cheguem corretamente (TCP, UDP).
3. Internet: Faz o roteamento dos dados (IP).
4. Acesso à Rede: Define como os dados são transmitidos fisicamente (Ethernet, Wi-Fi).

Analogia: Enviar uma carta: você escreve (aplicação), coloca no envelope (transporte), coloca o endereço (internet) e entrega nos Correios (acesso à rede).

Pergunta: Você consegue identificar o endereço IP do seu computador? (Dica: pesquise "qual é o meu IP" no Google.)

Portas: Canais de Comunicação

Quando você executa uma aplicação web localmente, usa o endereço localhost e uma porta, como localhost:3000. A porta é como uma "porta de entrada" específica para cada serviço no seu computador.

• Portas comuns:
  • 80: HTTP (web padrão)
  • 443: HTTPS (web segura)
  • 25: SMTP (e-mail)
• Portas acima de 1023: Usadas por aplicações em desenvolvimento (ex: 3000, 8000).

Dica: Use portas altas para evitar conflitos com serviços essenciais do sistema.

HTTP/HTTPS, Códigos de Status e Ciclo de Vida da Requisição

O que é HTTP?

O HTTP (Hypertext Transfer Protocol) é o protocolo que define como navegadores e servidores trocam informações.

• HTTPS: É o HTTP com segurança (usa criptografia para proteger seus dados).

Códigos de Status HTTP

Quando você faz uma requisição, o servidor responde com um código que indica o resultado:

• 200 OK: Deu tudo certo!
• 301 Moved Permanently: O endereço mudou.
• 404 Not Found: Não encontrado.
• 500 Internal Server Error: Erro no servidor.

Categorias:

• 100–199: Informativo
• 200–299: Sucesso
• 300–399: Redirecionamento
• 400–499: Erro do cliente
• 500–599: Erro do servidor

Veja todos os códigos de status HTTP

Ciclo de Vida de uma Requisição HTTP

1. Cliente envia requisição: O navegador pede um recurso (GET, POST, etc.).
2. Servidor processa: O servidor entende o pedido e prepara a resposta.
3. Servidor responde: Envia o código de status e o conteúdo.
4. Cliente processa: O navegador mostra a página ou o resultado.

Exemplo prático em JavaScript (requisição HTTP):

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(resposta => resposta.json())
  .then(dados => console.log(dados));

Esse código faz uma requisição GET e exibe o resultado no console.

Atividade: Use o navegador para acessar uma página inexistente (ex: /pagina-que-nao-existe) e veja o código de status retornado.

Métodos HTTP

Além do GET e POST, existem outros métodos importantes:

• GET: Busca dados.
• POST: Envia dados (cria recursos).
• PUT: Atualiza ou substitui recursos.
• DELETE: Remove recursos.
• PATCH: Modifica parcialmente um recurso.
• HEAD/OPTIONS: Para operações específicas.

Boas práticas: Use o método correto para cada tipo de operação na sua API.

Ferramentas para Testar Requisições

Durante o desenvolvimento, é comum usar ferramentas como o Postman para testar APIs e entender como as requisições funcionam.

Exemplo de Resolução de DNS

Etapas detalhadas:

1. Você digita www.exemplo.com no navegador.
2. O navegador verifica se já sabe o IP (cache local).
3. Se não souber, pergunta ao servidor DNS do seu provedor.
4. Se o DNS não souber, ele pergunta para outros servidores até encontrar.
5. O IP é devolvido ao navegador, que então acessa o site.

• TTL (Time To Live): Tempo que um registro DNS pode ficar em cache.
• Registros DNS: Instruções sobre como um domínio deve ser resolvido.

Tipos de Registros DNS

• A: Liga um domínio a um endereço IPv4.
• NS: Indica os servidores responsáveis pelo domínio.
• CNAME: Cria um apelido para outro domínio.
• MX: Define os servidores de e-mail.
• TXT: Armazena textos, usado para validação e segurança.

Analogia: O DNS é como uma lista telefônica: você procura o nome (domínio) e encontra o número (IP).

Atividade: Descubra o IP de um site usando o comando ping no terminal (ex: ping google.com).

Glossário

IP: Endereço único de um dispositivo na rede.

DNS: Sistema que traduz nomes de sites para endereços IP.

HTTP/HTTPS: Protocolos para comunicação entre cliente e servidor (HTTPS é seguro).

TCP/IP: Conjunto de regras para comunicação na internet.

Porta: Canal lógico para diferentes serviços em um mesmo dispositivo.

Prática e Reflexão

• Tente acessar um site pelo IP em vez do nome (nem todos permitem, mas vale o teste!).
• Use o Postman ou o navegador para fazer requisições GET e POST.
• Pesquise o significado de outros códigos de status HTTP.
• Explique para alguém como funciona o ciclo de uma requisição web.

📚 Referências:

O que é DNS? - Locaweb
Ferramentas de desenvolvimento do navegador - MDN
Guia de comandos do terminal - MDN
Visual Studio Code - Documentação
O que é TCP/IP - Hostinger
Como funciona a Web - MDN