Exercicis pràctics API REST amb Spring Boot (i Angular)

RAs i competències treballats

Desenvolupament Web en Entorn Servidor (DWES)

RA 3: Accedeix a bases de dades des de llenguatges de script de servidor.

• Com es cobreix:
• Ús de JPA (Java Persistence API) i Hibernate.
• Creació d'Entitats (@Entity) i Repositoris (JpaRepository).
• Connexió i configuració amb bases de dades (H2 o MySQL).
• Operacions CRUD (Create, Read, Update, Delete) contra la BD.

RA 5: Desenvolupa serveis web.

Aquest és el RA més important per a aquesta col·lecció, ja que l'objectiu és crear APIs.

• Com es cobreix:
• Creació de Controladors REST (@RestController).
• Definició de rutes i mètodes HTTP (@GetMapping, @PostMapping, @PutMapping, @DeleteMapping).
• Intercanvi d'informació en format JSON.
• Gestió de codis d'estat HTTP (200 OK, 201 Created, 404 Not Found, etc.).
• Consum de serveis (en aquest cas es prepara el servei per ser consumit).

RA 2: Genera pàgines web dinàmiques (Lògica de servidor).

Tot i que no generem HTML al servidor (ho fa Angular), sí que generem respostes dinàmiques basades en lògica de negoci.

• Com es cobreix:
• Implementació de la capa de Service.
• Lògica condicional (Ex: Validar si una sala està ocupada abans de reservar, filtrar per preu).
• Ús de llibreries de validació (@Valid, @NotNull).

---

Desenvolupament Web en Entorn Client (DWEC)

RA 5: Desenvolupa aplicacions web interactives utilitzant frameworks (Angular).

És l'objectiu principal de la segona meitat dels exercicis.

• Com es cobreix:
• Estructuració en Components (@Component).
• Ús de Templates i directives estructurals (*ngFor, *ngIf).
• Enllaç de dades (Data Binding): Interpolació {{ }}, propietats [ ] i esdeveniments ( ).
• Ús de Mòduls (app.module.ts).

RA 4: Es comunica de forma asíncrona amb el servidor.

Això és imprescindible per connectar amb l'API de Spring Boot.

• Com es cobreix:
• Ús del servei HttpClient d'Angular.
• Gestió d'Observables i subscripcions (.subscribe()).
• Enviament de paràmetres per GET (Query Params) i cossos per POST (JSON Body).
• Gestió d'errors de connexió.

RA 2: Gestiona esdeveniments i formularis.

Necessari per a la interacció de l'usuari amb l'API.

• Com es cobreix:
• Gestió de l'esdeveniment (click) als botons.
• Ús de Two-way binding ([(ngModel)]) per als filtres i inputs.
• Validació visual de formularis (Ex: botons deshabilitats, missatges d'error).

---

Resum visual del Mapatge

Mòdul	RA Oficial	Concepte clau de l'exercici	Exemple Pràctic
DWES	RA 3 (Dades)	JpaRepository, @Entity	Guardar productes a la BD.
DWES	RA 5 (Serveis)	@RestController, JSON	Endpoint GET /api/tasques.
DWES	RA 2 (Lògica)	@Service, Validacions	Comprovar si la sala està lliure.
DWEC	RA 5 (Framework)	Components, *ngFor	Crear la "Card" del producte.
DWEC	RA 4 (AJAX)	HttpClient, Observables	Rebre el JSON de Spring Boot.
DWEC	RA 2 (Events)	(click), [(ngModel)]	El botó "Filtrar" crida l'API.

Competència Transversal: Integració de Sistemes

Aquests exercicis també treballen una competència clau del cicle que no sempre surt explícita als RAs però és vital pel Projecte Final: La integració Full Stack. L'alumne aprèn a resoldre el problema clau: "Per què no es veuen les dades?" (CORS, URLs incorrectes, formats de JSON que no casen amb la interfície TypeScript, etc.).

Aquest és un recull de 5 propostes d'exercicis pràctics, ordenats de menor a major complexitat. Estan pensats per fer la part de back amb Spring Boot (dins les competències de DWES), però es poden complementar fent el front-end amb Angular (en l'àmbit de les competències de DWEC).

Consideracions prèvies

Abans de començar, assegura't de tenir un projecte Spring Boot funcional amb les dependències bàsiques (Spring Web, Spring Data JPA, H2/MySQL, etc.). Pots utilitzar Spring Initializr per generar l'estructura inicial.

Per a tots els exercicis, l'estructura base del backend hauria d'incloure:

• Capes: Controller, Service, Repository (JPA) i Entity.
• Base de Dades: H2 (per començar ràpid) o MySQL.
• Format: Totes les respostes han de ser en JSON.

---

1. Nivell Inicial: Exercicis bàsics per començar amb APIs REST

1.1 La Llista de Tasques (ToDo List)

Nivell: Inicial (El "Hello World" de les APIs).

Objectiu: Entendre el CRUD bàsic sense relacions entre taules.

• Descripció: Una API per gestionar tasques pendents.
• Entitat Tasca: id, titol, descripcio, feta (boolean).
• Endpoints DWES (Spring Boot):
  • GET /api/tasques: Retorna totes les tasques.
  • POST /api/tasques: Crea una nova tasca.
  • PUT /api/tasques/{id}: Marca una tasca com a feta o edita el títol.
  • DELETE /api/tasques/{id}: Elimina una tasca.

Integració DWEC (Angular):

• Llistat de tasques amb possibilitat de marcar com a feta.
• Formulari senzill per afegir tasques.
• Ideal per aprendre a llistar (*ngFor) i fer servir checkboxes que llencen peticions PUT automàticament.

1.2 El Mur de Missatges (Guestbook)

Nivell: Inicial.

Objectiu: Treballar amb dates automàtiques (LocalDateTime) i ordenació.

• Descripció: Un lloc on els usuaris poden deixar missatges anònims o signats.
• Entitat Missatge: id, autor (pot ser "Anònim" per defecte), contingut, dataHora (automàtica).
• Endpoints DWES (Spring Boot):
  • POST /api/missatges: Crea el missatge. Important: L'alumne ha d'assignar la LocalDateTime.now() al backend, no ha de venir del frontend.
  • GET /api/missatges: Retorna la llista. Repte: Han de sortir ordenats del més recent al més antic.

Integració DWEC (Angular):

• Ús de "Pipes" de data a Angular ({{ missatge.dataHora | date:'short' }}) per formatar el timestamp que ve de Java.

1.3 Agenda de Contactes (Validacions)

Nivell: Inicial.

Objectiu: Aprofundir en les validacions de format (@Email, @Pattern).

• Descripció: Una agenda telefònica simple.
• Entitat Contacte: id, nom, telefon, email.
• Endpoints DWES (Spring Boot):
  • POST /api/contactes: Crear contacte.
• Validació: El telèfon ha de tenir 9 dígits (Regex/Pattern) i l'email ha de ser vàlid (@Email).
  • GET /api/contactes/cerca/{nom}: Buscar contactes pel seu nom.

Integració DWEC (Angular): * Formulari amb validacions visuals: si l'email no té @, el botó de "Guardar" està deshabilitat.

1.4 Diccionari / Glossari de Termes

Nivell: Inicial.

Objectiu: Gestionar el codi d'estat 404 (Not Found) correctament i evitar duplicats.

• Descripció: Una base de dades de paraules i les seves definicions.
• Entitat Paraula: id, terme (unique), definicio.
• Endpoints DWES (Spring Boot):
  • GET /api/diccionari/{terme}: Busca per la paraula exacta. Si no existeix -> 404 Not Found.
  • POST /api/diccionari: Si s'intenta afegir una paraula que ja existeix (comprovar al Service), retornar 409 Conflict o una excepció controlada.

Integració DWEC (Angular):

• Un cercador simple. Si la paraula no existeix, mostra un botó: "Aquesta paraula no existeix. Vols crear-la?".

Nivell Intermedi: Exercicis amb més lògica i complexitat

2.1 Catàleg de Productes Tecnològics

Nivell: Bàsic - Intermedi.

Objectiu: Validacions i filtres senzills (Query Parameters).

• Descripció: Gestió d'inventari d'una botiga d'informàtica.
• Entitat Producte: id, nom, preu, imatgeUrl (string), stock (enter).
• Endpoints DWES (Spring Boot):
  • GET /api/productes: Llistat general.
  • GET /api/productes?minPreu=100&maxPreu=500: Introducció a @RequestParam per filtrar.
  • Validació: Al fer POST, impedir preus negatius o noms buits (ús de @Valid i @NotNull).

Integració DWEC (Angular):

• Creació de "Cards" (targetes) visualment atractives mostrant la imatge.
• Formularis reactius (cercau informació per saber què són els formularis reactius) per validar que el preu és correcte abans d'enviar.

2.2 Sistema de Votacions (Rànquing)

Nivell: Inicial - Intermedi.

Objectiu: Crear endpoints d'acció específica (no només guardar/editar dades, sinó modificar un comptador).

• Descripció: Una llista de "Candidats" (poden ser videojocs, menjars, llenguatges de programació) als quals es pot votar.
• Entitat Candidat: id, nom, vots (enter, comença a 0).
• Endpoints DWES (Spring Boot):
  • GET /api/candidats: Llista tots els candidats.
  • POST /api/candidats: Afegeix un nou candidat.
  • PUT /api/candidats/{id}/votar: Aquest és la clau. No s'envia un JSON amb el nou valor. Simplement, quan es crida a aquest endpoint, el backend busca l'ID i fa vots + 1.

Integració DWEC (Angular):

• Llistat amb un botó "Votar" al costat de cada ítem. En fer click, s'actualitza el número en temps real sense recarregar la pàgina.

2.3 Registre de Temperatures (IoT Simulat)

Nivell: Intermedi (per la lògica).

Objectiu: Fer càlculs simples al backend (màxims, mínims, mitjanes).

• Descripció: Un sistema que registra temperatures d'una ciutat.
• Entitat Registre: id, ciutat, graus (Double), data.
• Endpoints DWES (Spring Boot):
  • POST /api/temperatures: Guardar un registre (Ex: "Barcelona", 25.5).
  • GET /api/temperatures/estadistiques: Un endpoint especial que no retorna una entitat, sinó un DTO (Data Transfer Object) o Map amb: { "mitjana": 22.5, "maxima": 30.0 }.

Integració DWEC (Angular):

• Mostrar gràfics senzills o targetes amb colors (Vermell si > 30º, Blau si < 10º).

2.4 Gestor de Sèries i Plataformes (Relació 1:N)

Nivell: Intermedi.

Objectiu: Introducció a les relacions JPA (@ManyToOne).

• Descripció: Una API per guardar sèries i a quina plataforma pertanyen (Netflix, HBO, etc.).

• Entitats:

  • Plataforma: id, nom.
  • Serie: id, titol, genere, plataforma_id (Clau forana).

• Endpoints DWES (Spring Boot):

  • GET /api/plataformes: Per omplir un desplegable al frontend.
  • GET /api/series/plataforma/{id}: Retorna totes les sèries d'una plataforma específica (JPA Derived Queries).
  • POST /api/series: Crear una sèrie assignant-li un ID de plataforma.

Integració DWEC (Angular):

• Ús de Select/Dropdown en els formularis (carregats des de l'API).
• Rutes dinàmiques: Clicar a una plataforma i anar a la pàgina de les seves sèries.

Nivell Avançat: Exercicis amb relacions i lògica de negoci

3.1 Directori d'Empleats amb Fotos (Gestió d'Arxius bàsica)

Nivell: Intermedi - Avançat.

Objectiu: Gestionar recursos estàtics o Base64 i cerca.

• Descripció: Un CRUD d'empleats on es pot cercar per càrrec.
  • Entitat Empleat: id, nom, email, carrec, foto (pot ser un String URL o un BLOB si es vol complicar).
  • Endpoints DWES (Spring Boot):
  • GET /api/empleats/cerca/{carrec}: Custom query al repositori.
  • Maneig d'excepcions: Si es busca un empleat que no existeix, retornar un 404 Not Found personalitzat.

Integració DWEC (Angular):

• Barra de cerca en temps real (filtratge).
• Gestió d'errors: Mostrar una alerta maca quan l'API retorna un error 404 o 500.

3.2 Sistema de Reserva de Sales (Lògica de Negoci)

Nivell: Avançat (per al context d'iniciació).

Objectiu: Lògica de negoci al Service i maneig de dates.

• Descripció: Reservar una sala de reunions per a un dia concret.
• Entitat Reserva: id, nomSala, dia (LocalDate), hora (int), usuari.
• Endpoints DWES (Spring Boot):
  • POST /api/reserves: Aquí està la clau. El Controller crida al Service. El Service ha de comprovar: "Ja hi ha una reserva per aquesta sala a aquesta hora?". Si sí, llença excepció (SalaOcupadaException). Si no, guarda.

Integració DWEC (Angular):

• Ús de calendaris (Datepickers).
• Gestió visual de l'estat (verd lliure / vermell ocupat) basat en la resposta JSON.

---

Recordau el CORS

Per evitar frustracions quan connecteu Angular (port 4200) amb Spring (port 8080), recordau que heu de configurar el CORS a Spring Boot.

Poden afegir aquesta configuració simple al controlador o com a classe de configuració:

@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/api/...")
public class ElMeuController { ... }

Comprovacions per testejar els exercicis

Aquesta és una guia pràctica de proves (testing) per qualcuns dels exercicis anteriors. És molt important que aprengueu a provar les vostres APIs abans de connectar-les amb Angular. Si el backend falla, el frontend no funcionarà.

Assumirem que l'aplicació està corrent a http://localhost:8080.

Eines de Prova

• cURL: Eina de línia de comandes per fer peticions HTTP.
• Postman: Eina gràfica molt popular per provar APIs REST.

Entorn execució proves

Per evitar complicacions innecessàries, en el cas majoritari vostre, que utilitzau Windows, vos recoman: instal·lar si no ho teniu Ubuntu amb el WSL2 (Windows Subsystem for Linux). Així podreu executar cURL i altres eines de línia de comandes sense problemes.

---

Part 1: Proves via Terminal amb cURL

cURL és excel·lent perquè vos obliga a entendre realment què s'està enviant (mètode, capçaleres, body).

1.1 Exercici ToDo List (CRUD Bàsic)

Prova: Crear una nova tasca.Resultat esperat (201 Created):

curl -v -X POST http://localhost:8080/api/tasques \
     -H "Content-Type: application/json" \
     -d '{"titol": "Aprendre Spring", "descripcio": "Repassar els verbs HTTP", "feta": false}'

{
  "id": 1,
  "titol": "Aprendre Spring",
  "descripcio": "Repassar els verbs HTTP",
  "feta": false
}

2.1 Exercici Catàleg (Filtres i Validació)

Prova A: Filtrar productes per preu (Query Params).Resultat esperat (200 OK)Prova B: Intentar crear un producte amb preu negatiu (Validació).Resultat esperat (400 Bad Request)

curl -X GET "http://localhost:8080/api/productes?minPreu=100&maxPreu=500"

Una llista JSON només amb productes dins del rang.

curl -v -X POST http://localhost:8080/api/productes \
     -H "Content-Type: application/json" \
     -d '{"nom": "PC Gamer", "preu": -50, "stock": 10}'

Spring tornarà un JSON d'error indicant que la validació @Positive ha fallat.

3.1 Exercici Empleats (Gestió d'Errors)

Prova: Buscar un càrrec que no existeix per forçar l'error personalitzat.Resultat esperat (404 Not Found)

curl -v -X GET http://localhost:8080/api/empleats/cerca/astronauta

{
  "missatge": "No s'han trobat empleats amb el càrrec: astronauta",
  "timestamp": "..."
}

---

Part 2: Proves guiades amb Postman

Postman és més visual i és l'eina que probablement fareu servir en entorns laborals. Vos recoman crear una "Col·lecció" per guardar aquestes peticions.

1.1 Crear una Tasca (Exercici 1.1)

1. Mètode: Seleccionar POST.
2. URL: http://localhost:8080/api/tasques
3. Pestanya "Body": Seleccionar raw i al desplegable de la dreta (que posa Text) canviar a JSON.
4. Contingut:

   {
       "titol": "Fer l'exercici de Postman",
       "descripcio": "Validar tots els endpoints",
       "feta": false
   }
   

5. Enviar: Clicar Send.
6. Verificació: Mirar a baix que l'Status sigui 201 Created i que torni l'objecte amb id.

2.1 Validar Error de Preu (Exercici 2.1)

1. Mètode: POST.
2. URL: http://localhost:8080/api/productes
3. Body (JSON):

   {
       "nom": "", 
       "preu": 100,
       "stock": -5
   }
   

(Nota: Aquí deixem el nom buit i l'stock negatiu per provar les validacions). 4. Enviar: Clicar Send. 5. Verificació: L'Status ha de ser 400 Bad Request. Al cos de la resposta ha de sortir un detall tipus Validation failed o els missatges que vam definir al model ("El nom no pot estar buit").

3.2 Simular Reserva de Sala Ocupada (Exercici 3.2)

Aquesta prova és vital per entendre que l'API "pensa".

Pas 1: Fer la primera reserva (Èxit)

• Mètode: POST -> http://localhost:8080/api/reserves
• Body: {"sala": "Sala A", "dia": "2023-10-20", "hora": 10}
• Resultat: 201 Created.

Pas 2: Intentar reservar la mateixa sala al mateix moment (Error)

• Mètode: POST (Tornar a clicar Send sense canviar res).
• Resultat Esperat: L'API ha de retornar un codi d'error específic, idealment 409 Conflict (o 400 Bad Request segons com s'hagi programat l'excepció).
• Missatge: "La Sala A ja està reservada a les 10h".

Col·leccions Postman

Guardeu la Col·lecció de Postman i exportau-la a un fitxer ExercicisAPIRESTLlinatge1_nom1.json. Creau una evidència quan genereu aquest fitxer, fent una captura de pantalla de manera que es pugui veure el vostre nom i l'exportació de la col·lecció.

Amb aquest fitxer, si és necessari, vos faré avaluació * Això et permet a tu, com a professor, importar la seva col·lecció i corregir la pràctica en segons, només prement "Run Collection" per veure si tots els semàfors es posen verds.