Introdução ao Mundo Web com Spring Boot! 🚀

Prof. Me. Danilo Bueno

layout: image-right image: https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExdW43emQ1MWprdXloNWh1a3lmeTIxejZ1NXA4bThrM3YzeXAweGRmZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/9J7tdYltWyXIY/giphy.gif --- npm run build 2>&1 | tail -n 80

SOFTWARE

Você já imaginou um dia SEM apps? 📱❌

Quando o Instagram cai…

Software no Cotidiano

🔹 TikTok | 🎮 Free Fire | 📲 WhatsApp | 🛒 Shopee

Curiosidade

O WhatsApp processa 100 BILHÕES de mensagens por dia! 📈

Do SIMPLES ao COMPLEXO

[APP DE TAREFAS] <–––   [JOGO ONLINE]   <––– [SISTEMA AÉREO]
  (To-Do List)         (Ex: Fortnite)      (Controle de voo)

Ambientes de Software

“Não é magia… é arquitetura!” 🧙💻

Centralizado

Tudo em UM LUGAR
Ex: Jogo offline 🎮, sistema de biblioteca antigo 📚
Vantagem: Simples de gerenciar
Desvantagem: Se o servidor cai, TODO MUNDO cai! 💥

Distribuído

Partes espalhadas em VÁRIOS LUGARES
Ex: WhatsApp 🌍 (seus dados estão em +30 países!), Bitcoin ₿
Super poder: Escalabilidade infinita 🚀

Modelo Cliente-Servidor (Distribuído)

Cliente (Seu dispositivo):
- Faz pedidos 📨
- Ex: Navegador, app do Instagram, jogo online
Servidor (Computador remoto):
- Processa pedidos 🧠
- Armazena dados 💾
- Ex: Servidor AWS, Google Cloud, servidor de jogos
Comunicação via Protocolos:
- HTTP/HTTPS 🌐 (Web)
- TCP/IP 📡 (Dados)

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

Entendendo as tecnologias envolvidas

Peças do quebra-cabeça web 🧩

🌐 Modelo cliente-servidor
🔄 Requisição = Pedido formal | Resposta = Resultado
🔗 URL como endereço digital (https://www.ifsp.edu.br)
🌍 Navegador = Interface do usuário (sua janela digital)

Fluxo mágico:
Digita URL → Enter → Navegador envia requisição → Servidor responde com página!

💡 Você sabia? Cada aba do navegador pode fazer +100 requisições para carregar um site!

Anatomia de uma REQUISIÇÃO HTTP

A requisição é um texto que contém informações sobre o pedido, como o método HTTP, o caminho do recurso, o protocolo, o host, o tipo de conteúdo que o cliente aceita, etc.

Abaixo está o exemplo da mensagem enviada pelo cliente

GET /estudeaqui HTTP/1.1    # 👈 Método + Caminho
Host: www.ifsp.edu.br       # 🌍 Destino
User-Agent: curl/7.68.0     # 🕶️ Identificação
Accept: */*                 # 📦 Formato esperado

Anatomia de uma RESPOSTA HTTP

Resposta do servidor:

HTTP/1.1 200 OK                       # ✅ Status
Content-Type: text/html               # 📄 Formato
Date: Wed, 25 Oct 2023 10:00:00 GMT   # ⏰ Horário

<!DOCTYPE html>                       # 🏗️ Começa o HTML...
<html>
<head><title>IFSP - Estude Aqui</title>

Teste você também, acesse o terminal e digite: curl -v https://www.ifsp.edu.br/estudeaqui

layout: image image: ./_assets/itpweb2.request.png backgroundSize: contain

layout: image image: ./_assets/itpweb2.server-is-down.png

Servidor HTTP: o porteiro digital

Servidores trabalhando 24/7 como guardiões da web

Como Funciona?

Sempre Alertas
- Fica “escutando” na porta 80 (HTTP) ou 443 (HTTPS) 🎧
Processamento Rápido
- Analisa cabeçalhos HTTP 📚
- Roteia para aplicação correta ↔️
Exemplos Populares
- Apache 🐧 | Nginx 🚀 | Tomcat ☕

💡 Sabia que? O Netflix usa 100,000+ servidores para stream global! 🍿🌍

layout: image-right image: https://preview.redd.it/z6mbo9dyc1x51.jpg?width=1080&crop=smart&auto=webp&s=f477257b68b1f8b03e533ae52b36648e12fa802a

Aplicação Web: o cérebro por trás

Opções de Desenvolvimento:

Do Zero
- Vantagem: Controle total 🎛️
- Desafio: Complexidade alta 🧗
Frameworks
- Spring Boot (Java) ☕
- Laravel (PHP) 🟧
- Django (Python) 🐍

Para pensar um pouco: quais as diferenças entre o site do IFSP e YouTube?

layout: image image: ./_assets/itpweb2.webapp-complex.webp backgroundSize: contain

🚀 SPRING BOOT!

É uma ferramenta que agiliza o desenvolvimento de aplicações Web com o Spring Framework
É conhecido como Framework, pois proporciona um conjunto de ferramentas e padrões pré-definidos para o desenvolvimento
A utilização de frameworks possui várias vantagens: bibliotecas, padrões de design, ferramentas de dev, padrões de código, etc..
Requisitos: Java, Maven e um editor de texto ou IDE (Integrated Development Environment)
Mascote Oficial?: Springy (Pesquise no Google!)

💡 Fato Nerd: A Netflix usa Spring Boot para gerenciar seu catálogo! 🍿

Criando seu projeto do zero

Acesse start.spring.io
Customize seu “personagem”:
- Language: Java ☕
- Project: Maven
- Dependencies: Spring Web 🌐
Gere o projeto → Download ⬇️
Extraia o ZIP e abra no VS Code 💻

Pro Tip: Use a extensão Spring Initializr direto no VS Code! 🧩

Estrutura do projeto

Onde a mágica acontece

meu-app/
├── src/
│   ├── main/
│   │   ├── java/       👨💻 Código-fonte (.java)
│   │   └── resources/  🎨 CSS + HTML + Configs
│   └── test/           🧪 Testes unitários
└── pom.xml             📦 Lista de dependências

Dica Ouro: A pasta static/ guarda seus arquivos CSS/JS! 🖌️

layout: image-right image: https://media.giphy.com/media/3o7abKhOpu0NwenH3O/giphy.gif backgroundSize: contain

Rodando o app!

seu momento “Hello World”

Checklist antes de rodar

Java instalado? java -version ✅
Maven instalado? mvn -version ✅
VS Code aberto na pasta certa? 📂

Comandos que salvam vidas:

# Liga o motor! 🏎️💨
.mvn spring-boot:run

# Se travar, reinicie:
.mvn clean spring-boot:run

Troubleshooting:

Porta 8080 ocupada? ➡️ Feche a aplicação e rode novamente
Erro no Maven? ➡️ Delete a pasta .m2 e tente novamente

Se por algum motivo seu maven não estiver corretamente configurado no VSCode, você pode executar o comando mvnw spring-boot:run que utilizará o Maven Wrapper para compilar e executar o projeto.

Links importantes

Utilize os artigos para ler e entender mais sobre o assunto.

“Grandes devs copiam, devs lendários entendem” - Anonymous

layout: center class: text-center

Obrigado!

[email protected] · website/docs · github