Actividad entregable

1. ¿Qué trabajamos?

En esta actividad  vamos a construir una aplicación completa en Angular 18

Crearemos una SPA para gestionar productos: podremos mostrar, filtrar, añadir y eliminar productos, utilizando la arquitectura moderna de Angular.

Los componentes principales que vamos a desarrollar serán:

• ProductService (servicio para gestionar los datos)
• ProductsListComponent (lista de productos)
• ProductCardComponent (tarjeta individual)
• ProductFormComponent (formulario para crear)
• ProductFilterComponent (panel de filtros)

Vamos a trabajar con datos reales que vienen de una API pública, concretamente de una URL de NPoint:

https://api.npoint.io/1dee63ad8437c82b24fe

Esta API es solo de lectura, no permite crear ni borrar datos en el servidor.

Más adelante veremos cómo solucionamos esto, y por qué tendremos que usar una pequeña ‘trampilla’ para generar identificadores únicos (UUID).

Otro requisito de la actividad es que la maquetación debe hacerse con Bootstrap, así que toda la interfaz —formularios, tarjetas, botones, estructura— la haremos usando clases de Bootstrap.

La actividad también indica que se evaluarán mejoras opcionales.

Eso significa que quien quiera añadir una interfaz más cuidada, validaciones extra o funcionalidades adicionales, podrá hacerlo y obtendrá más puntuación.

Aquí solo vamos a ver la estructura general del proyecto.