Web Server e HTML

Prof. Me. Danilo Bueno

Local vs Produção

No desenvolvimento é comum termos ambientes distintos (dev != prod)

Desenvolvimento (Local): Você programa e testa tudo no seu computador.
Produção: A aplicação roda em servidores reais, longe do seu PC.

Pense: quando você joga online, o jogo é hospedado em servidores. Aqui é a mesma ideia!

layout: image image: ./_assets/itpweb2.client-server.png backgroundSize: contain

layout: image image: ./_assets/itpweb2.http-server-local.png backgroundSize: cover

Dev. Local

Para o cliente (navegador) acessar o servidor, precisa conhecer o endereço.
Cada aplicação pode usar uma porta diferente! Exemplos:
- porta 80 é a porta padrão da Web.
- porta 3306 padrão do MySQL
Usamos o endereço de loopback: 127.0.0.1 ou http://localhost/.

É importante entender como essas peças se encaixam no quebra-cabeças!

layout: image image: ./_assets/itpweb2.localhost-joke.jpg backgroundSize: cover

Configurando o Servidor HTTP

Um servidor HTTP é um programa que recebe pedidos (requisições) e responde com dados.
Exemplos famosos: Apache, Nginx e Tomcat.
No SpringBoot, o Tomcat já vem integrado.
Para configurar: adicione a dependência Spring Boot Starter Web.
Rode o comando:
```
mvn clean spring-boot:run
```
Acesse em: http://localhost:8080

Imagine: é como se seu PC estivesse “ouvindo” pedidos para mostrar uma página da web.

Analisando a aplicação

Quando acessamos o endereço do site (domínio), estamos entrando na “porta de entrada” da aplicação.
A URL / é especial: ela representa a página principal, como o endereço de sua casa.
Se o servidor não tiver um mapeamento definido para essa URL, ele não sabe para onde direcionar a requisição.
Essa URL também é conhecida pelo nome de rotas

Rotas

A rota/URL é um caminho que indica ao usuário um recurso.
Esse recurso pode ser de variados tipos tais como: HTML, CSS, mp3, png, pdf, etc..
É possível a criação de novas rotas na aplicação

Criando Novas Rotas

Para criar novas rotas, criamos uma classe especial chamada Controlador.
Controlador:
- Atua como um “guia” que direciona as requisições para o método correto.
Convenção de Nomes:
- O nome da classe deve terminar com Controller.
- Exemplos: HomeController.java, ProductController.java, CartController.java.

Assim como um gerente em uma loja sabe direcionar um cliente para a seção certa, o controlador direciona a requisição para a função que vai processá-la.

Recapitulando

Rota padrão de toda aplicação:
- A URL/rota / é a porta de entrada da sua aplicação – assim como o endereço da sua casa.
Rotas:
- São os caminhos que levam aos recursos (HTML, imagens, etc).
Controladores:
- São os “guias” que conectam as rotas aos métodos que processam as requisições.

Dominar esses conceitos é o primeiro passo para construir suas próprias aplicações web!

Criando seus primeiros endpoints em Spring Boot

@Controller //Transforma a classe em controlador
public class HomeController {

    @GetMapping("/home") //Define o endereço URL
    @ResponseBody //Envia resposta direta
    public String home() {
        return "ola mundo"; //Mensagem pro navegador
    }
}

Tradução para o Português
”Quando alguém acessar /home, manda a mensagem de texto ‘olá mundo’”

Novidade: temos anotações no código!

Anotações

São uma forma de adicionar metadados a uma classe ou método
São usadas pelo compilador ou por outras ferrametnas para alterar/modificar o comportamento do código
São precedidas pelo símbolo @ e podem incluir parâmetros
São amplamente utilizadas em frameworks e bibliotecas
Exemplos:
- @Override: Indica que um método está substituindo um método da superclasse.
- @Deprecated: Indica que um elemento (método, classe, etc.) está obsoleto e pode ser removido em versões futuras.

Classe controladora

@Controller:
Indica que a classe é um controlador Spring, responsável por lidar com requisições WEB.
@GetMapping(“/home”):
Mapeia requisições HTTP do tipo GET para o caminho /home.
Quando um usuário acessar essa URL, o método home() será invocado.
@ResponseBody:
Informa que o valor retornado pelo método (a String "ola mundo") deve ser escrito diretamente na resposta HTTP.
Método home():
Retorna a mensagem "ola mundo", que será exibida no navegador ao acessar a rota /home.

Erros Comuns

Para Evitar Vergonha 😳

❌ Esqueceu @ResponseBody: White Label Error
❌ URL com nome digitado errado (typo): 404 Not Found
❌ Não reiniciou o servidor: Alterações não aparecem
❌ Colocou espaço no @GetMapping("/erro ") -> rota não encontrada

Pro Tip: Sempre verifique os logs do terminal! 📠

layout: full title: diagrama de sequencia

sequenceDiagram
    participant Cliente as 🌐 Cliente (Browser)
    participant Spring as 🍃 Spring Boot
    participant HomeController as 🎮 HomeController

    Note over Cliente: Usuário digita http://localhost:8080/home
    Cliente->>+Spring: GET /home 📨
    
    Note right of Spring: 1. Procura mapeamento @GetMapping("/home")
    Spring->>+HomeController: 2. Chama método home() 🔍
    
    Note right of HomeController: 3. Executa lógica do método
    HomeController-->>-Spring: 4. Retorna "ola mundo" 💌
    
    Spring-->>-Cliente: 5. Resposta HTTP 200 OK 🚀
    
    Note over Cliente: Exibe "ola mundo" na tela!

layout: statement

e o HTML dinâmico?

ate agora nada!

Modificando o HTML antes de enviar

@GetMapping("/segundos")
@ResponseBody
public String mostrarSegundos() {
    return "<h1>Segundos:</h1>" +
           "<p>" + LocalTime.now().getSecond() + "</p>";
}

@GetMapping("/segundos"): cria um endpoint na URL /segundos
@ResponseBody: fala pro Spring “Envie direto essa String como resposta!”
LocalTime.now().getSecond(): Pega os segundos do horário atual do servidor (nesse caso seu PC)
Concatenção de Strings: Monta o HTML juntando texto fixo + hora dinâmica

Fluxo:
Cada atualização → Nova chamada ao método → Novo HTML gerado com hora atual!

Links Importantes

layout: center class: text-center

Obrigado!

[email protected] · website/docs · github