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.