Skip to main content

Frontend

El servicio Frontend es la capa de presentación de la plataforma ASPA. Actúa como el punto de interacción directo, permitiendo al usuario operar el sistema de forma visual e intuitiva a través de su navegador web sin necesidad de poseer conocimientos técnicos previos.

Funcionalidad​

Las responsabilidades principales de este componente se centran en la interacción y la presentación de datos:

  • Configuración de análisis: Proveer la interfaz gráfica mediante la cual el usuario puede seleccionar y ajustar los filtros deseados sobre los conjuntos de datos territoriales.
  • Generación de peticiones: Procesar las selecciones del usuario para construir el FilterPayload. Este objeto de datos es fundamental, ya que encapsula y estructura todos los parámetros de filtrado necesarios para que el microservicio Back Node pueda llevar a cabo su responsabilidad funcional.
  • Visualización de resultados: Recibir la información ya procesada por el sistema y representarla gráficamente, integrando los datos de accesibilidad y los tiempos de viaje en mapas.

La estructura actual de un FilterPayload sería la siguiente:

FilterPayload {
  generatedAt: string;
  filters: {
    normal: {
      originSelections: string[];
      destinationSelections: string[];
      originCategory: string | null;
      destinationCategory: string | null;
      originFilterMode: string;
      destinationFilterMode: string;
      timeFilter?: {
        mode: 'more' | 'less' | 'between' | null;
        minutes?: number | null;
        fromMinutes?: number | null;
        toMinutes?: number | null;
      } | null;
    };
    province: {
      originSelection?: {
        provinces: string[];
        municipalities: string[];
        allProvinces: boolean;
        allMunicipalities: boolean;
      };
      destinationSelection?: {
        provinces: string[];
        municipalities: string[];
        allProvinces: boolean;
        allMunicipalities: boolean;
      };
      selection?: {
        provinces: string[];
        municipalities: string[];
        allProvinces: boolean;
      };
    };
    time?: {
      operator: '<' | '>' | 'between';
      value: number | [number, number];
    } | null;
  };
  destinationSelectionMode?: 'include' | 'exclude';
  destinationSelectionIds?: string[];
  pasive?: boolean;
  layerN?: number;
  addedColumns?: string[];
};

Detalles técnicos y arquitectura​

A nivel de desarrollo, este servicio está construido bajo un enfoque moderno que prioriza el rendimiento, la escalabilidad y la mantenibilidad del código:

  • Stack tecnológico: Desarrollado íntegramente en TypeScript para garantizar la seguridad del tipado estático. Utiliza la librería React para la creación de interfaces interactivas y se apoya en el framework Next.js para optimizar el enrutamiento y el rendimiento general de la aplicación.
  • Arquitectura modular: El código fuente mantiene una separación clara entre las vistas de usuario, y los componentes reutilizables, que se ensamblan para construir dichas vistas.
  • Control de calidad y Testing: Para asegurar la estabilidad del sistema frente a futuros cambios, el servicio incluye una batería de pruebas unitarias encargada de validar la lógica del código, implementada a través del entorno de pruebas Vitest.