Integración de API - Josecgh/diagAuto-frontend GitHub Wiki
Integración de la API (API Integration)
Todas las peticiones de red se gestionan centralizadamente a través del cliente nativo de Angular (HttpClient) configurado de forma global. La URL base se inyecta desde las variables de entorno (environment.apiUrl). Cada servicio técnico declara sus rutas y endpoints específicos como constantes privadas e inmutables.
Endpoints consumidos
Autenticación y Usuarios — auth.service.ts
| Método |
Endpoint |
Utilizado en |
Nivel de acceso |
| POST |
api/v1/auth/login |
Formulario de inicio de sesión |
Público |
| POST |
api/v1/auth/register |
Formulario de registro de cuentas |
Público |
| GET |
api/v1/auth/me |
Carga el perfil del usuario actual |
Con sesión |
| GET |
api/v1/auth/refresh |
Renovación automática de la cookie JWT |
Público |
| POST |
api/v1/auth/logout |
Cierre de sesión desde el menú de usuario |
Con sesión |
Vehículos y Agenda — vehicle.service.ts
| Método |
Endpoint |
Utilizado en |
Nivel de acceso |
| GET |
/api/v1/vehicles?page={n}&size={n} |
Listado de la agenda privada (Paginado) |
Con sesión |
| POST |
api/v1/vehicles |
Creación de un vehículo en la flota |
Con sesión |
| PUT/PATCH |
api/v1/vehicles/{id} |
Edición de datos generales del coche |
Con sesión |
| DELETE |
api/v1/vehicles/{id} |
Eliminación física de un vehículo del catálogo |
Con sesión |
| PATCH |
/api/v1/vehicles/{id}/toggle-fault |
Alternar o solucionar la avería al vuelo |
Con sesión |
Suscripciones y Facturación — billing.service.ts
| Método |
Endpoint |
Utilizado en |
Nivel de acceso |
| POST |
/api/v1/billing/checkout |
Procesar pago simulado en el Paywall |
Con sesión |
Estructura de envío de datos (Payload - Crear Vehículo)
Cuando el usuario registra un nuevo coche, el servicio HTTP transforma el formulario en el siguiente JSON de transferencia:
{
"brand": "Toyota",
"model": "Auris",
"plate": "1234XYZ",
"kilometers": 145000,
"hasFault": true,
"faultDescription": "Fallo en el alternador y pérdida de tensión en la batería."
}
Mapeos Frontend → Backend
Los estados internos de la interfaz se normalizan mediante diccionarios y constantes inmutables antes de enviarse al backend para asegurar la integridad de las enumeraciones de la base de datos:
| Concepto en la UI |
Valor en frontend |
Enum en el backend |
| Estado de avería |
Averiado |
FAULTY |
| Estado de avería |
Operativo |
HEALTHY |
Backend accountStatus |
Etiqueta mostrada al propietario en DiagAuto |
FREE_TIER |
Plan gratuito (Máximo 4 coches) |
PREMIUM_TIER |
Plan premium (Flota ilimitada) |
Paginación en Angular
El backend devuelve la estructura de paginación nativa de Spring Framework (Page<T>) que incluye las propiedades content, totalElements, totalPages y number.
El servicio vehicle.service.ts se encarga de interceptar y mapear esta respuesta utilizando operadores de RxJS (como map), normalizándola en un formato de interfaz limpio de TypeScript: { items, page, size, totalItems, totalPages }. De este modo, los componentes de la interfaz de la agenda consumen los datos de forma agnóstica a la tecnología del servidor.
Manejo centralizado de errores
| Código de estado |
Comportamiento en el frontend de DiagAuto |
| Error de Red / Servidor Caído |
Se despliega un banner de alerta con role="alert" que dice: "No se ha podido conectar con el servicio de DiagAuto", activando un botón de reintento masivo. |
400 (Bad Request) |
Mensajes de validación de campos en tiempo real (matrícula duplicada o formato inválido). Los datos ingresados en el formulario se preservan intactos. |
401 (Unauthorized) |
El interceptor ejecuta la ruta de refresco de sesión en segundo plano. Si falla, limpia las Signals de autenticación y fuerza la redirección a /login. |
403 (Forbidden) |
Se activa al intentar registrar un 5.º coche bajo un plan básico (FREE_TIER). El interceptor bloquea la petición y el enrutador fuerza de inmediato la carga de la vista del Paywall. |
Mocks temporales todavía en uso
| Ubicación del archivo mock |
Recurso que sustituye |
Razón de uso |
src/app/mocks/billing-checkout.json |
Simulación de la pasarela de pago |
Endpoint de cobros reales de Stripe/PayPal no integrado en esta etapa del proyecto. |