Unidad: 11 — Introducción al Desarrollo Web con Java
Duración estimada: 90 minutos
Nivel: Intermedio-Avanzado

En todos los labs anteriores el sistema RPG vivía como un programa de consola: lo ejecutabas desde la terminal, imprimía texto y terminaba. Nadie más podía usarlo sin tener Java instalado.

En una aplicación real los usuarios acceden desde un navegador web, desde cualquier dispositivo, sin instalar nada. En este laboratorio daremos el primer paso hacia ese mundo.

• Instalar y configurar el ambiente de desarrollo web en VS Code
• Entender los conceptos fundamentales del desarrollo web con Java
• Comprender el patrón MVC (Model – View – Controller)
• Crear tu primer proyecto Spring Boot
• Mostrar un "Hola Mundo" en el navegador

CLIENTE (navegador)           SERVIDOR (tu computadora)
────────────────────          ──────────────────────────
Chrome / Firefox      ─────►  Spring Boot + Tomcat
                              (recibe la petición,
                     ◄─────    prepara la respuesta HTML)

Esa comunicación se llama HTTP:
  Petición:  GET http://localhost:8080/saludo
  Respuesta: <html>¡Hola Mundo!</html>

HTTP — HyperText Transfer Protocol
El protocolo que usan los navegadores y servidores para comunicarse. Cuando escribes una URL y presionas Enter, el navegador envía una petición HTTP. El servidor procesa y responde con HTML.

Servidor web
Un programa que escucha peticiones HTTP y responde. Antes necesitabas instalarlo por separado (Apache Tomcat). Spring Boot lo incluye embebido — se activa solo al correr tu programa.

localhost:8080
localhost = tu propia computadora. :8080 = el puerto donde escucha tu servidor. Es como una dirección dentro de tu máquina.

MVC es la arquitectura que Spring Boot usa para organizar el código web:

  NAVEGADOR
      │
      │  GET /saludo
      │
      ▼
  ┌───────────────┐
  │  CONTROLLER   │  ← Recibe la petición HTTP
  │  (Java)       │    Decide qué datos mostrar
  └───────┬───────┘    Elige la plantilla HTML
          │
          │  "dame los datos"
          ▼
  ┌───────────────┐
  │    MODEL      │  ← Los datos (objetos Java)
  │  (Java POJO)  │    En este lab: un String con el saludo
  └───────┬───────┘    En Lab12: lista de Personajes
          │
          │  datos listos
          ▼
  ┌───────────────┐
  │     VIEW      │  ← Plantilla HTML (Thymeleaf)
  │   (HTML)      │    Mezcla datos + diseño
  └───────────────┘
          │
          │  HTML renderizado
          ▼
      NAVEGADOR muestra la página

Abre una terminal y ejecuta:

java -version

Debe mostrar: openjdk version "17.x.x" o superior.

Si no está instalado: descarga Eclipse Temurin 17 desde
https://adoptium.net → selecciona tu sistema operativo → instala.

Abre VS Code → panel de Extensiones (Ctrl+Shift+X) → instala estas tres:

💡 "Extension Pack for Java" instala 6 extensiones de un solo golpe: soporte de lenguaje, depurador, Maven, gestor de proyectos y más.

1. Abre el navegador → https://start.spring.io

2. Configura el formulario:

   Campo	Valor
   Project	Maven
   Language	Java
   Spring Boot	3.3.x (la más reciente estable)
   Group	com.gremio
   Artifact	hola-mundo
   Packaging	Jar
   Java	17

3. Haz clic en ADD DEPENDENCIES y agrega:

   • ✅ Spring Web — activa el servidor HTTP
   • ✅ Thymeleaf — motor de plantillas HTML

4. Haz clic en GENERATE → descarga hola-mundo.zip

5. Descomprime el archivo:

   • Mac/Linux: unzip ~/Downloads/hola-mundo.zip -d ~/Documentos/
   • Windows: clic derecho → Extraer todo → elige Documentos

6. En VS Code: File → Open Folder → selecciona la carpeta hola-mundo

7. Acepta "Do you trust the authors?" → Yes

8. Espera ~2 minutos: Maven descarga las librerías de internet.
   Verás "Downloading..." en la barra de estado de VS Code.

Spring Initializr generó esta estructura:

hola-mundo/
├── src/
│   └── main/
│       ├── java/com/gremio/
│       │   └── HolaMundoApplication.java   ← punto de entrada
│       └── resources/
│           ├── templates/                  ← aquí irán los HTML
│           │   └── (vacío por ahora)
│           └── application.properties      ← configuración
└── pom.xml                                 ← dependencias Maven

Abre HolaMundoApplication.java y observa:

@SpringBootApplication
public class HolaMundoApplication {
    public static void main(String[] args) {
        SpringApplication.run(HolaMundoApplication.class, args);
    }
}

💡 @SpringBootApplication activa todo Spring Boot: escaneo de clases, configuración automática y el servidor Tomcat embebido.
El main() es el mismo punto de entrada que conoces — solo que ahora arranca un servidor web en lugar de imprimir texto.

Crea la carpeta controller/ dentro de com/gremio/:

• Clic derecho sobre com/gremio/ → New Folder → controller

Crea SaludoController.java dentro de esa carpeta:

package com.gremio.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class SaludoController {

    @GetMapping("/saludo")
    public String saludo(Model model) {

        // Aquí preparamos los datos (el Model)
        String mensaje  = "¡Hola Mundo desde Spring Boot!";
        String gremio   = "Gran Gremio de Aventureros";
        int    nivel    = 1;

        // Los enviamos a la vista
        model.addAttribute("mensaje", mensaje);
        model.addAttribute("gremio",  gremio);
        model.addAttribute("nivel",   nivel);

        return "saludo";   // busca templates/saludo.html
    }
}

💡 @Controller — le dice a Spring que esta clase maneja peticiones HTTP.
@GetMapping("/saludo") — mapea la URL /saludo a este método.
Model model — Spring lo inyecta automáticamente; con él pasas datos a la vista.

Crea src/main/resources/templates/saludo.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hola Mundo - Spring Boot</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 80px;
            background-color: #1a1a2e;
            color: #e0e0e0;
        }
        h1  { color: #f0c040; font-size: 2.5em; }
        h2  { color: #4a90d9; }
        p   { font-size: 1.2em; }
        .caja {
            display: inline-block;
            border: 2px solid #4a90d9;
            border-radius: 12px;
            padding: 30px 60px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="caja">
        <h1 th:text="${mensaje}">Mensaje aquí</h1>
        <h2 th:text="${gremio}">Nombre del gremio</h2>
        <p>Nivel del gremio: <strong th:text="${nivel}">0</strong></p>
    </div>
</body>
</html>

💡 th:text="${mensaje}" — Thymeleaf reemplaza el contenido de la etiqueta con el valor que pusiste en model.addAttribute("mensaje", ...).
Si abres el HTML directo en el navegador (sin servidor), muestra el texto estático que escribiste entre las etiquetas — el th:text se ignora.

Opción A — Terminal integrada de VS Code (Ctrl+ `):

# Mac / Linux:
./mvnw spring-boot:run

# Windows:
mvnw.cmd spring-boot:run

Opción B — Spring Boot Dashboard (panel izquierdo de VS Code):
Ícono de Spring Boot → hola-mundo → botón ▶ Run

Cuando la consola muestre:

Started HolaMundoApplication in X.XXX seconds
Tomcat started on port(s): 8080

Abre el navegador en: http://localhost:8080/saludo

¡Tu primer "Hola Mundo" en el navegador! 🎉

Ahora que el Hola Mundo funciona, agrega un poco de estructura:

Crea la carpeta model/ en com/gremio/.

Crea Aventurero.java — tu primera clase Model:

package com.gremio.model;

public class Aventurero {

    private String nombre;
    private String clase;   // "Guerrero", "Druida", etc.
    private int    nivel;

    public Aventurero(String nombre, String clase, int nivel) {
        this.nombre = nombre;
        this.clase  = clase;
        this.nivel  = nivel;
    }

    public String getNombre() { return nombre; }
    public String getClase()  { return clase; }
    public int    getNivel()  { return nivel; }
}

Modifica SaludoController.java para usar el Model:

@GetMapping("/aventurero")
public String aventurero(Model model) {
    Aventurero a = new Aventurero("Sylva", "Druida", 10);
    model.addAttribute("aventurero", a);
    return "aventurero";
}

Crea templates/aventurero.html que muestre los datos del aventurero:

• Nombre del aventurero con th:text="${aventurero.nombre}"
• Clase con th:text="${aventurero.clase}"
• Nivel con th:text="${aventurero.nivel}"

Prueba en: http://localhost:8080/aventurero

http://localhost:8080/saludo

┌─────────────────────────────────────────┐
│                                         │
│   ¡Hola Mundo desde Spring Boot!        │
│   Gran Gremio de Aventureros            │
│   Nivel del gremio: 1                   │
│                                         │
└─────────────────────────────────────────┘

http://localhost:8080/aventurero

┌─────────────────────────────────────────┐
│                                         │
│   Aventurero: Sylva                     │
│   Clase: Druida                         │
│   Nivel: 10                             │
│                                         │
└─────────────────────────────────────────┘

Responde en respuestas.txt:

1. ¿Cuál es la diferencia entre una aplicación de consola (Labs 01–10) y una aplicación web? ¿Qué ventajas tiene la web?
2. Explica con tus palabras qué hace cada capa del MVC en este laboratorio. ¿Qué pasaría si el Controller devolviera el nombre incorrecto de la plantilla?
3. ¿Por qué crees que Thymeleaf puede mostrar el HTML sin el servidor activo? ¿Qué ventaja tiene eso para el desarrollo?

Sube al repositorio la carpeta lab11_holamundo con el proyecto completo:

lab11_holamundo/
├── pom.xml
└── src/
    └── main/
        ├── java/com/gremio/
        │   ├── HolaMundoApplication.java
        │   ├── controller/
        │   │   └── SaludoController.java
        │   └── model/
        │       └── Aventurero.java
        └── resources/
            ├── templates/
            │   ├── saludo.html
            │   └── aventurero.html
            └── application.properties

Laboratorio preparado para el curso de Programación Orientada a Objetos — Ago-Dic 2025