Git es una herramienta de control de versiones local, mientras que
GitHub es un servicio de alojamiento en la nube (repositorio remoto). Git =
autobús local que transporta código; GitHub = terminal donde llegan y se organizan todos los
autobuses.
Configuración Inicial
git config --global user.name "NombreUsuario"
git config --global user.email "correo@ejemplo.com"
git branch -m master main
Repositorio Local
git init
git status
git add .
git commit -m "Mensaje descriptivo"
Conexión Remota
git remote add origin https://github.com/usuario/repo.git
git pull origin main --allow-unrelated-histories
git push origin main
git remote -v
Ramas
git branch
git branch development
git checkout development
git checkout main
git merge development
IDEs: IntelliJ integra Git gráficamente. Trabajo
colaborativo: Añadir como Collaborators en GitHub, siempre hacer
git pull antes de trabajar y antes de git push.
Spring Boot facilita el desarrollo backend con servidor web embebido
(Tomcat). Se inicia con Spring Initializr, seleccionando Maven/Gradle,
versión de Java y dependencias como spring-boot-starter-web.
Controladores REST
Se ejecuta desde el método main (puerto 8080). Anotaciones clave:
@RestController
public class MiControlador {
@GetMapping("/ruta")
public String metodo() {
return "Respuesta";
}
}
Configuración
En application.properties:
server.port=9090
server.servlet.context-path=/api
IoC e Inyección de Dependencias
IoC transfiere la creación de objetos al framework. Una clase no instancia
sus dependencias, sino que las recibe ya construidas (código desacoplado).
Entidades JPA
@Entity
public class Usuario {
@Id
@GeneratedValue
private Long id;
@ManyToOne
private Departamento depto;
}
Implementación de CRUD (Create, Read, Update, Delete) con arquitectura REST.
Dependencias: Spring Web, H2 Database,
Spring Data JPA. Estructura en capas: Controller → Service → Repository →
Entity.
Modelo con Lombok
@Entity
@Data @NoArgsConstructor @AllArgsConstructor
public class Pokemon {
@Id @GeneratedValue
private Long id;
private String nombre;
}
Repository
Extiende JpaRepository para heredar métodos save,
findAll, findById, delete.
Service
Usa @Autowired para inyectar el repository y define la lógica de negocio.
Controller
@RestController
public class PokemonController {
@PostMapping
@GetMapping
@PutMapping
@DeleteMapping("/pokemon/{id}")
}
Usar @RequestBody para mapear JSON a objeto y @PathVariable para
capturar IDs de la URL. Probar con Insomnia/Postman.
Relaciones JPA
@OneToOne, @OneToMany/@ManyToOne,
@ManyToMany. Usar enum para restringir valores (tipo: fuego, agua,
planta).
PostgreSQL
Agregar dependencia en pom.xml y configurar en
application.properties: URL JDBC, usuario, contraseña, dialecto Hibernate y
ddl-auto.
Integración de HTML/CSS en Spring Boot con Thymeleaf.
Agregar dependencia spring-boot-starter-thymeleaf en pom.xml.
Genera carpetas: templates (HTML) y static (CSS, imágenes).
Controlador de Vistas
@Controller
public class VistaController {
@GetMapping("/")
public String index() {
return "index";
}
}
HTML5
Etiquetas: <html>, <head> (metadatos),
<body> (contenido visible). Encabezados
<h1>-<h6>, párrafos <p>, listas
<ul>/<li>, formularios <form>,
<input>, <button>.
CSS y Modelo de Caja
Vincular con <link rel="stylesheet" href="styles.css">. Toda caja tiene:
content → padding → border →
margin. Usar clases (.nombre-clase) para
reutilizar estilos.
Flexbox
.contenedor {
display: flex;
justify-content: center;
align-items: center;
}
input {
border-radius: 5px;
background-color: #f0f0f0;
}
Usar DevTools del navegador (Inspeccionar) para depurar en tiempo real.
Integración Backend-Frontend con Thymeleaf para CRUD
gráfico. Usar @Controller (no RestController) y
Model.addAttribute() para pasar datos a las vistas.
Lectura (Read)
Usar th:each para iterar sobre la colección y th:text para mostrar
propiedades:
<tr th:each="pokemon : ${lista}">
<td th:text="${pokemon.nombre}"></td>
<td th:text="${pokemon.vida}"></td>
</tr>
Creación (Create)
Formulario con method="POST" y th:field para vincular campos a la
entidad. Al guardar, usar redirect:/ para actualizar la vista.
Eliminación (Delete)
Construir URL dinámica con th:href incluyendo el ID:
<a th:href="@{/eliminar/{id}(id=${pokemon.id})}">Eliminar</a>
Actualización (Update)
Fase 1: Buscar por ID y cargar en formulario prellenado. Fase
2: Enviar POST con cambios, persistiendo el ID.
Relaciones
Para ManyToOne, acceder a propiedades del objeto relacionado:
${pokemon.entrenador.nombre}. Manejar ID foráneo en formularios.