Saltar al contenido principal

Arquitectura del Sistema

Visión General de la Arquitectura​

La aplicación implementa una arquitectura headless de e-commerce que separa el frontend del backend, permitiendo mayor flexibilidad, escalabilidad y personalización. La arquitectura está compuesta por los siguientes componentes principales:

  • Frontend (Next.js)
  • Proxy de Magento
  • Magento
  • Directus
  • Typesense

Componentes Principales​

  1. Frontend (Next.js):

    • Aplicación React/Next.js que sirve como la capa de presentación
    • Implementa SSR (Server-Side Rendering) para mejoras de SEO y rendimiento
    • Maneja el enrutamiento, la interfaz de usuario y la experiencia del usuario

  2. Proxy de Magento:

    • Capa intermedia que gestiona las comunicaciones con Magento
    • Maneja sesiones y cookies para mantener la autenticación
    • Permite superar limitaciones de CORS en desarrollo

  3. CMS (Directus):

    • Sistema headless para gestión de contenido
    • Almacena datos no comerciales: banners, páginas de aterrizaje, promociones, etc.
    • Proporciona una API GraphQL para consumir el contenido

  4. Motor de Búsqueda (Typesense):

    • Proporciona búsqueda rápida y relevante para el catálogo de productos
    • Mantiene índices optimizados para consultas de productos
    • Compatible con los componentes de Algolia para react

  5. Backend de E-commerce (Magento):

    • Maneja la lógica de negocio principal de e-commerce
    • Gestiona catálogo, inventario, precios, carritos, pedidos y usuarios para headless
    • Expone APIs GraphQL y REST que el frontend consume

Patrones de Diseño Utilizados​

  1. Patrón Proxy:

    • Implementado en la comunicación con Magento para manejar CORS y sesiones
    • Útil en modo desarrollo para preservar la sesión de usuario por medio de las cookies de magento

  2. Patrón Servicio:

    • Los servicios como MagentoService.js, DirectusService.ts, etc., encapsulan la lógica de comunicación con APIs externas

  3. Patrón Contexto (React Context):

    • Utilizado para compartir estado global como datos del usuario, carrito, etc.

  4. Patrón Factory:

    • Se utilizan múltiples factories para decidir que componente se renderizará basado en un string o atributo en particular