Spring Boot ft Trinity
trinity
0:00 / 0:00
Spring Boot ft Trinity
8 просмотров · 3 дн. назад
trinity
228 подписчиков
8 просмотров · 3 дн. назад
🚀 ¡Aprendé a crear tu primera página web con Spring Boot, Java y HTML desde Visual Studio Code!
¿Te enredaste con la instalación de Java, la configuración del proyecto o las extensiones? 😅 En este video vamos paso a paso, desde la preparación del entorno hasta ver nuestra primera página HTML funcionando en el navegador.
Trabajamos siguiendo una guía práctica para entender qué estamos haciendo y para qué sirve cada herramienta. La idea es que puedas acompañar el proceso, realizar los pasos en tu computadora y comprender cómo se conecta el código Java con la página que ve el usuario.
☕ PREPARACIÓN DEL ENTORNO CON JAVA
Comenzamos preparando el JDK de Java 21, que utilizaremos para desarrollar nuestro proyecto. Explicamos la importancia de identificar correctamente la carpeta del JDK y su carpeta bin, donde se encuentran herramientas como java y javac.
También abordamos una duda muy común: ¿qué pasa si ya tengo otra versión de Java instalada? En nuestro caso, hablamos de cómo mantener Java 26 y Java 21 en la misma computadora, seleccionando la versión adecuada para trabajar con el proyecto.
Revisamos la función de JAVA_HOME y Path, y comprobamos la versión activa mediante los comandos java -version y javac -version.
💻 CONFIGURACIÓN DE VISUAL STUDIO CODE
Preparamos Visual Studio Code instalando Extension Pack for Java y Spring Boot Extension Pack. Estas herramientas nos ayudan a escribir código, trabajar con proyectos Java y ejecutar nuestra aplicación.
Después utilizamos Spring Initializr para generar un proyecto Maven. Durante este proceso seleccionamos el lenguaje, la versión de Java, el nombre del grupo, el nombre del proyecto y el tipo de empaquetado Jar.
📦 DEPENDENCIAS QUE UTILIZAMOS
Agregamos tres dependencias para este primer ejercicio:
🔹 Spring Web: permite desarrollar la aplicación web y atender las peticiones que llegan desde el navegador.
🔹 Spring Boot DevTools: facilita el trabajo durante el desarrollo, con funciones como el reinicio automático de la aplicación ante determinados cambios.
🔹 Thymeleaf: permite trabajar con plantillas HTML que la aplicación procesa para mostrar páginas al usuario.
📂 CONOCEMOS LA ESTRUCTURA DEL PROYECTO
Una vez creado el proyecto, revisamos sus carpetas y archivos principales. Identificamos dónde se escribe el código Java, dónde se guardan los recursos y en qué carpeta debemos colocar nuestras plantillas HTML.
También revisamos pom.xml, donde se encuentra la configuración de Maven y las dependencias del proyecto.
🧩 INTRODUCCIÓN A MODELO, VISTA Y CONTROLADOR
Explicamos de forma sencilla la idea de MVC:
• Modelo: representa los datos y las reglas de la aplicación.
• Vista: presenta la información que verá el usuario.
• Controlador: recibe las peticiones y coordina la respuesta.
En este ejercicio nos concentramos principalmente en el controlador y la vista. Todavía no desarrollamos un modelo propio ni conectamos una base de datos: primero queremos comprender cómo mostrar una página desde Spring Boot.
⚙️ CREAMOS NUESTRO CONTROLADOR
Creamos el paquete controller y la clase UserController. Luego utilizamos la anotación @Controller para que Spring identifique la clase como un controlador.
También agregamos @GetMapping para indicar qué método debe responder cuando visitamos la dirección /detalles.
Explicamos qué significa devolver el texto "detalles" desde el método: ese valor indica el nombre de la plantilla que queremos mostrar, y Thymeleaf permite resolverla como nuestra vista HTML.
🌐 CREAMOS LA PÁGINA HTML
Dentro de src/main/resources/templates creamos el archivo detalles.html y agregamos una estructura HTML básica con un título y un mensaje.
Este paso nos permite ver cómo se relacionan la dirección que escribimos en el navegador, el método del controlador y la plantilla que aparece en pantalla.
▶️ EJECUTAMOS LA APLICACIÓN
Finalmente, iniciamos el proyecto desde Spring Boot Dashboard en Visual Studio Code y revisamos la consola para comprobar que la aplicación haya arrancado.
Después abrimos en el navegador:
👉 http://localhost:8080/detalles
Esta dirección funciona en nuestra computadora mientras la aplicación está en ejecución y utiliza el puerto 8080.
🎉 ¡Así conseguimos mostrar nuestra primera página web con Spring Boot!
Este ejercicio es un punto de partida para seguir aprendiendo a crear más páginas, recibir información mediante formularios y trabajar con datos. Primero construimos una base sencilla para comprender el recorrido de una petición desde el navegador hasta el controlador y la vista.
🎓 Si estás comenzando con Java y desarrollo web, podés pausar el video, repetir cada paso y comparar lo que aparece en tu pantalla.
👍 Dejá tu like si el tutorial te ayudó.
💬 Contame en los comentarios qué parte te costó más o qué error te apareció.
🔔 Suscribite para seguir aprendiendo programación paso a paso.
¡Vamos aprendiendo juntos, una línea de código a la vez! ☕💻