Saltar al contenido principal

Arquitectura Desktop (Electron)

La aplicación de escritorio de Yuruary está construida sobre Electron, integrando React y Vite para la interfaz de usuario. Esta combinación nos permite ofrecer una experiencia de usuario fluida y "nativa", al tiempo que mantenemos el acceso a capacidades de bajo nivel del sistema operativo, cruciales para el Staff Administrativo (como el acceso directo a impresoras térmicas para recibos).

Patrón de Procesos y Comunicación​

Electron opera con un modelo de múltiples procesos. A continuación se ilustra cómo interactúan el proceso principal, el puente de seguridad y el proceso de renderizado (UI).

Seguridad y Comunicación (IPC Bridge)​

Mantenemos una estricta separación de contextos mediante contextBridge en el script de precarga (preload.ts).

  • Regla de Oro: La interfaz de usuario (React) NUNCA tiene acceso directo a las APIs de Node.js.
  • Mecanismo: Cuando la UI necesita realizar una acción privilegiada (ej. imprimir un recibo), invoca un método expuesto en el objeto global window.electronAPI.
  • Flujo:
    1. React llama a window.electronAPI.printReceipt(data).
    2. El ipcRenderer envía un mensaje a través del canal seguro.
    3. El Main Process intercepta el mensaje (ipcMain.handle), ejecuta la lógica nativa y retorna el resultado.

Estructura de Carpetas (Feature-Based)​

Organizamos el código para separar claramente las responsabilidades del sistema operativo y de la interfaz.

  • /electron: Contiene todo el código del Main Process.
    • Configuración de ventanas (BrowserWindow).
    • Menús nativos.
    • Manejo de eventos del sistema.
  • /src/features: Módulos de la UI agrupados por funcionalidad de negocio.
    • Caja: Pantallas de cobro y puntos de venta.
    • Dashboard: Vistas generales y métricas.
  • /src/shared: Tipos e interfaces importados de la librería compartida (@softmena/yuruary-types).

Conexión con Backend Local​

A diferencia del Portal Web que se conecta a la nube, el Cliente Desktop está diseñado para operar en la intrana del condominio.

  • Descubrimiento: La aplicación busca el servidor NestJS en la red local. Típicamente apunta a http://host.docker.internal:3000 (en entornos de desarrollo/Docker) o a una IP Estática designada en el servidor de producción.
  • Autenticación: Los tokens de sesión (JWT) se gestionan y almacenan localmente (Secure Storage), asegurando que la sesión persista incluso si hay intermitencias en la conexión a internet externa.