[{"data":1,"prerenderedAt":195},["ShallowReactive",2],{"service-projects-es-printer-management-healthcare-chat-integration-photobooth-platform":3},[4,78,137],{"id":5,"title":6,"body":7,"category":56,"challenge":57,"description":50,"extension":58,"featured":59,"image":60,"images":60,"impact":61,"meta":62,"navigation":63,"order":64,"path":65,"seo":66,"slug":67,"solution":68,"stem":69,"tagline":70,"tags":71,"testimonial":60,"testimonial_author":60,"testimonial_role":60,"url":60,"__hash__":77},"projects_es\u002Fprojects\u002Fes\u002Fprinter-management.md","Plataforma de Gestión de Impresoras",{"type":8,"value":9,"toc":49},"minimark",[10,15,19,23,42,46],[11,12,14],"h2",{"id":13},"descripción-del-proyecto","Descripción del Proyecto",[16,17,18],"p",{},"Desarrollado en CAMAO Tec (posteriormente renombrada mmmake), este proyecto consistió en construir una aplicación web de gestión de impresoras para un minorista europeo con múltiples tiendas. El objetivo era ofrecer a los equipos de operaciones una visión clara de todos los dispositivos de impresión físicos en su red de tiendas europeas, incluyendo configuraciones, ubicaciones y metadatos asociados.",[11,20,22],{"id":21},"funcionalidades","Funcionalidades",[24,25,26,30,33,36,39],"ul",{},[27,28,29],"li",{},"Panel de vista general de dispositivos en todas las ubicaciones",[27,31,32],{},"Operaciones CRUD para impresoras, configuraciones y metadatos",[27,34,35],{},"Autenticación OIDC\u002FOAuth con validación de audiencia y control de acceso basado en permisos",[27,37,38],{},"Integración de una biblioteca de componentes UI interna basada en StencilJS",[27,40,41],{},"Capa de datos simulados para mantener el ritmo de entrega durante el desarrollo de la API",[11,43,45],{"id":44},"aspectos-técnicos","Aspectos Técnicos",[16,47,48],{},"La aplicación fue construida con Vue 3, marcando la primera adopción del framework en la empresa. La REST API seguía OpenAPI Spec 3 y requirió implementar un flujo de autenticación OIDC completo contra un proveedor de identidad interno. Donde el diseño divergía de la biblioteca de componentes, colaboré directamente con sus propietarios para identificar y resolver problemas, con correcciones que se propagaron a todos los consumidores del framework.",{"title":50,"searchDepth":51,"depth":51,"links":52},"",2,[53,54,55],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":44,"depth":51,"text":45},"web-app","Un minorista europeo con múltiples tiendas necesitaba una interfaz web para gestionar impresoras físicas en todas sus ubicaciones — con vista general de dispositivos, configuraciones, asignación de ubicaciones y metadatos. El proyecto también sirvió como la primera adopción de Vue en la pila tecnológica de la empresa.","md",false,null,"La aplicación se entregó con éxito y se convirtió en la base para futuras extensiones. El equipo fue incorporado completamente a Vue. Las correcciones aportadas a la biblioteca de componentes beneficiaron a todos los consumidores del framework.",{},true,3,"\u002Fprojects\u002Fes\u002Fprinter-management",{"title":6,"description":50},"printer-management","Desarrollé la aplicación web con Vue 3 y una biblioteca de componentes UI interna basada en StencilJS, conectada a una REST API siguiendo OpenAPI Spec 3 con autenticación OIDC. Implementé el flujo OAuth completo incluyendo validación de audiencia y permisos, cubrí las divergencias entre el diseño y la biblioteca de componentes, y mantuve los plazos usando datos y servicios simulados mientras la API aún estaba en desarrollo. También incorporé al equipo de desarrollo en Vue, con formación en buenas prácticas de diseño de componentes y el ecosistema Vue.","projects\u002Fes\u002Fprinter-management","Gestión de dispositivos en toda Europa para retail",[72,73,74,75,76],"Vue 3","TypeScript","OIDC","REST API","StencilJS","ZJOYN0e-khhfTABnCOIPDOaU0Q3WPC_Et8ogR4BMzjA",{"id":79,"title":80,"body":81,"category":117,"challenge":118,"description":50,"extension":58,"featured":59,"image":60,"images":60,"impact":119,"meta":120,"navigation":63,"order":121,"path":122,"seo":123,"slug":124,"solution":125,"stem":126,"tagline":127,"tags":128,"testimonial":60,"testimonial_author":60,"testimonial_role":60,"url":60,"__hash__":136},"projects_es\u002Fprojects\u002Fes\u002Fhealthcare-chat-integration.md","Integración de Chat en PWA Sanitaria",{"type":8,"value":82,"toc":112},[83,85,88,90,107,109],[11,84,14],{"id":13},[16,86,87],{},"Este proyecto bajo NDA consistió en integrar un sistema de chat en tiempo real en una aplicación web progresiva (PWA) React para clientes y profesionales sanitarios. La app gestionaba datos de usuario de ambos roles y necesitaba un canal de comunicación entre ellos. El alcance era concreto: elegir la tecnología adecuada e implementarla de extremo a extremo bajo presión de tiempo.",[11,89,22],{"id":21},[24,91,92,95,98,101,104],{},[27,93,94],{},"RocketChat integrado vía Docker en la infraestructura existente",[27,96,97],{},"Creación automática de usuarios en RocketChat al registrarse o iniciar sesión",[27,99,100],{},"Endpoints proxy NestJS para creación de salas, gestión de mensajes y lógica de negocio",[27,102,103],{},"Implementación personalizada de cliente WebSocket para mensajería en tiempo real en React",[27,105,106],{},"Pruebas unitarias Jest en todos los nuevos endpoints NestJS con inyección de dependencias y mocking",[11,108,45],{"id":44},[16,110,111],{},"El backend fue generado con Amplication y ya usaba MongoDB, lo que facilitó compartir la misma instancia de base de datos con RocketChat. En lugar de usar la UI predefinida de RocketChat, implementé la conexión WebSocket manualmente para respetar el diseño de interfaz existente del cliente. El sistema de módulos e inyección de dependencias de NestJS facilitó escribir pruebas unitarias aisladas para los nuevos endpoints — la primera cobertura de pruebas del proyecto.",{"title":50,"searchDepth":51,"depth":51,"links":113},[114,115,116],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":44,"depth":51,"text":45},"integration","Una aplicación web sanitaria que conecta clientes y médicos carecía de su función principal — un chat en tiempo real — con una fecha límite inminente. El código existente era una PWA en React con backend NestJS\u002FAmplication, ambos sin pruebas ni controles de calidad. El cliente no tenía estrategia tecnológica y necesitaba tanto una recomendación como una implementación completa.","La función de chat se entregó a tiempo e integrada completamente en la aplicación. Los endpoints NestJS fueron cubiertos con pruebas Jest por primera vez en el proyecto. La solución mantiene la gestión de usuarios centralizada y la mensajería en tiempo real eficiente mediante conexión WebSocket directa.",{},4,"\u002Fprojects\u002Fes\u002Fhealthcare-chat-integration",{"title":80,"description":50},"healthcare-chat-integration","Investigué y evalué soluciones de chat con soporte para React (incluyendo GetStream.io y RocketChat), presenté los resultados al cliente y lideré la integración de RocketChat. Extendí el Docker Compose existente para ejecutar RocketChat sobre la instancia MongoDB del proyecto, desactivé el auto-registro e implementé la creación automática de usuarios en RocketChat al registrarse o iniciar sesión. Construí endpoints proxy en NestJS para la creación de salas y mensajes, cubiertos con pruebas unitarias Jest. En el frontend, implementé una conexión WebSocket personalizada con RocketChat para mensajería en tiempo real dentro del diseño UI existente.","projects\u002Fes\u002Fhealthcare-chat-integration","Chat en tiempo real para una app cliente-médico",[129,130,131,132,133,134,135],"React","NestJS","RocketChat","WebSockets","MongoDB","Jest","PWA","gXFOsb44pHXUp6EGtQA9BL5BZs7S71IoqcH-IlSXJ2U",{"id":138,"title":139,"body":140,"category":56,"challenge":179,"description":50,"extension":58,"featured":59,"image":60,"images":60,"impact":180,"meta":181,"navigation":63,"order":182,"path":183,"seo":184,"slug":185,"solution":186,"stem":187,"tagline":188,"tags":189,"testimonial":60,"testimonial_author":60,"testimonial_role":60,"url":60,"__hash__":194},"projects_es\u002Fprojects\u002Fes\u002Fphotobooth-platform.md","Plataforma de Fotomatón",{"type":8,"value":141,"toc":174},[142,144,147,149,169,171],[11,143,14],{"id":13},[16,145,146],{},"Este proyecto consistió en reconstruir desde cero una plataforma de software para fotomatón para una empresa que alquila fotomatones — incluyendo hardware, personal, overlays personalizados y software — para eventos corporativos y ocasiones en vivo. El MVP existente apenas cumplía los requisitos mínimos y no era apto para uso real en eventos de alto volumen.",[11,148,22],{"id":21},[24,150,151,154,157,160,163,166],{},[27,152,153],{},"Script Node.js que detecta nuevas imágenes de una tarjeta SD con WiFi en tiempo real",[27,155,156],{},"Backend Laravel para ingesta de imágenes, generación de miniaturas y composición de overlays",[27,158,159],{},"Notificaciones WebSocket que envían nuevas imágenes al frontend Vue al instante",[27,161,162],{},"Selección de overlay con previsualización renderizada en el backend (resolución optimizada)",[27,164,165],{},"Generación de imagen en resolución completa con overlay seleccionado al confirmar",[27,167,168],{},"Comando de impresión PHP enviado desde Laravel a la impresora del evento",[11,170,45],{"id":44},[16,172,173],{},"El reto principal era lograr reactividad en tiempo real sin polling. La combinación de un file watcher en Node.js y un broadcaster WebSocket en Laravel mantenía el frontend siempre actualizado en el momento en que una foto llegaba al disco. La generación de miniaturas en el backend era esencial para mantener el frontend ágil — cargar imágenes en resolución completa en un evento en vivo habría causado retrasos notables. El stack Laravel\u002FVue reemplazó una base de código PHP\u002FJS difícil de mantener con una aplicación limpia y estructurada lista para futuras extensiones.",{"title":50,"searchDepth":51,"depth":51,"links":175},[176,177,178],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":44,"depth":51,"text":45},"Una empresa de alquiler de fotomatones operaba un MVP en PHP y HTML\u002FJS sin framework, sin carga de imágenes en tiempo real y con un rendimiento inadecuado para eventos con alto volumen de fotografías. Las fotos recién tomadas no se mostraban en tiempo real, el código no era mantenible y al frontend le faltaba la reactividad necesaria para una experiencia fluida.","La plataforma reemplazó un MVP frágil con una aplicación robusta y mantenible capaz de gestionar eventos de alto volumen. La entrega de imágenes en tiempo real y el despacho inmediato de impresión ofrecieron una experiencia fluida a operadores e invitados. El stack Laravel\u002FVue proporcionó una base limpia para desarrollo futuro.",{},5,"\u002Fprojects\u002Fes\u002Fphotobooth-platform",{"title":139,"description":50},"photobooth-platform","Reescribí la plataforma con un backend Laravel y frontend Vue.js. Un script Node.js escaneaba continuamente el disco de destino en busca de nuevas imágenes capturadas mediante una tarjeta SD con WiFi. Al detectarlas, notificaba al backend Laravel, que procesaba cada imagen — generando miniaturas para previsualización rápida y versiones con overlay para selección. Tras elegir foto y overlay, Laravel generaba la imagen final en resolución completa y enviaba un comando de impresión PHP directamente a la impresora conectada. El frontend recibía actualizaciones en tiempo real vía WebSocket, mostrando nuevas fotos al instante sin recargas manuales.","projects\u002Fes\u002Fphotobooth-platform","Procesamiento de fotos en tiempo real para eventos",[190,191,192,132,193],"Vue.js","Laravel","Node.js","PHP","A8turb3oWE27QFkMMp4MUDAw_Uk43VEjxE3mQutI67o",1787644787833]