Tiempo de lectura: 5 minutos

¿Alguna vez has intentado descifrar el prospecto de un medicamento con prisa o con la vista cansada?

La información oficial de medicamentos en España está disponible públicamente gracias a la Agencia Española de Medicamentos y Productos Sanitarios (AEMPS) y su base de datos CIMA. Sin embargo, enfrentarse a un prospecto tradicional en papel o a un PDF farragoso no es una experiencia accesible: letra microscópica, terminología clínica densa y cero adaptación a la vida cotidiana de un paciente, de unos padres con un niño enfermo a las dos de la mañana, o de una persona mayor polimedicada.

Con esa necesidad en mente nació Prospecto Fácil (Easy CIMA): una aplicación web progresiva (PWA) diseñada bajo los principios de diseño universal, lenguaje claro y máxima resiliencia técnica.

En este artículo quiero desgranar el proyecto desde dentro: qué problemas sanitarios resuelve y, sobre todo, cómo está planteada su arquitectura moderna apoyada en Angular, el Edge de Cloudflare Pages y el backend serverless de Firebase (Auth y Firestore).

🌟 ¿Qué es y qué hace Prospecto Fácil?

El objetivo principal de la aplicación es convertir datos farmacéuticos oficiales en herramientas útiles y comprensibles para el día a día:

1. Búsqueda oficial en vivo y escáner óptico: Conexión directa con los más de 15.000 medicamentos autorizados de CIMA por nombre, principio activo o escaneando el código de barras (EAN-13 / Datamatrix) con la cámara del móvil mediante la Barcode Detection API.
2. Lectura en voz alta (Text-to-Speech) y traducción a lenguaje claro: Síntesis de voz nativa del navegador para personas con problemas de visión y un asistente de simplificación para eliminar tecnicismos innecesarios.
3. Seguridad clínica en tiempo real:
   • Alertas de desabastecimiento: Notificación inmediata si la AEMPS reporta problemas de suministro con ese fármaco.
   • Control de alérgenos y excipientes de declaración obligatoria: Detección de gluten, lactosa, sacarosa o soja.
   • Matriz de interacciones medicamentosas: Advertencias visuales automáticas cuando se combinan tratamientos incompatibles.
4. Botiquín familiar y pastillero inteligente: Organización de tratamientos por franjas horarias (🌅 Mañana, ☀️ Tarde, 🌙 Noche, 🛌 Antes de dormir), diario de síntomas y exportación de tomas a calendarios nativos mediante ficheros estándares .ics.
5. Calculadora pediátrica: Cálculo automático de dosis de antitérmicos y antibióticos infantiles habituales según el peso del niño, acompañado de una jeringa dosificadora visual interactiva para evitar errores de administración.
6. Farmacias de guardia y urgencias: Localización georreferenciada sobre mapas libres (Leaflet / OpenStreetMap) de los puntos sanitarios y boticas de guardia más cercanos.
7. Accesibilidad WCAG 2.1 Nivel AA: Diseñada bajo filosofía Mobile-First, con botones y áreas táctiles de al menos $44\text{px}$44px, soporte íntegro por teclado, alto contraste visual e interfaz Neobrutalista orientada a la legibilidad.

🏛️ La Arquitectura Global del Sistema

🧩 Desglose Capa a Capa

1. El Frontend: Angular 21 (Signals, PWA y Accesibilidad Extrema)

La aplicación cliente está construida sobre las últimas versiones de Angular, aprovechando al máximo sus características modernas:

• Componentes Standalone & Angular Signals: Estado reactivo granular sin sobrecoste de renderizado, garantizando una fluidez de 60 FPS en cualquier dispositivo móvil.
• Patrón Local-First: El usuario puede usar el 100% de la aplicación sin registrarse. El botiquín, las alarmas y las preferencias se persisten en local (LocalStorage / almacenamiento local resiliente). Si el usuario decide conectarse, sus datos se sincronizan con la nube sin fricciones.
• Zero-Framework UI Bloat: En lugar de pesadas bibliotecas de UI que penalizan el rendimiento, se utiliza un sistema de estilos CSS moderno con diseño de alto contraste (Neobrutalismo accesible), asegurando que la primera carga sea casi instantánea

2. El Despliegue en el Edge: Cloudflare Pages + Pages Functions

Alojar una Single Page Application (SPA) para el sector salud plantea un reto mayúsculo: el SEO y las tarjetas sociales (Open Graph). Si un usuario comparte el enlace a la ficha de un medicamento por WhatsApp, Twitter o Telegram, un cliente puramente renderizado en el navegador solo mostraría una tarjeta genérica.

Aquí es donde entra la potencia de Cloudflare Pages:

• Despliegue Continuo (CI/CD) Global: Cada git push genera un build optimizado que se distribuye a más de 300 centros de datos de Cloudflare con latencia mínima y protección DDoS nativa.
• Cloudflare Pages Functions (/functions):
  • Inyección dinámica de OpenGraph en el Edge: En rutas como /medicamento/:id, una función intercepta la petición entrante, consulta la información del fármaco y reescribe los metadatos HTML (og:title, og:image, og:description) antes de enviar el HTML al rastreador de la red social.
  • Proxies de geolocalización y servicios: Funciones intermedias que gestionan la búsqueda de centros de salud y farmacias de urgencia resolviendo cabeceras CORS y aplicando políticas de caché inteligente en el CDN.
  • Seguridad por cabeceras HTTP: Implementación de _headers estrictos con Content Security Policy (CSP), mitigando inyecciones y asegurando privacidad médica.

3. Backend, Identidad y Sincronización: Firebase Auth & Firestore

En lugar de mantener un servidor tradicional con base de datos propia, Firebase actúa como la columna vertebral para la gestión de usuarios:

A. Autenticación con Firebase Auth (auth.service.ts)

• Integración fluida con autenticación mediante Google.
• Gestión reactiva del ciclo de vida de la sesión mediante Signals de Angular (currentUser, isAuthenticated).
• Caching del usuario para arranque inmediato offline mientras se verifica la persistencia del token.

B. Persistencia reactiva con Cloud Firestore (firestore-sync.service.ts)

• Modelo NoSQL centrado en el usuario: Toda la información médica confidencial (medicamentos guardados, tratamientos activos, perfiles familiares y registro de alérgenos) se almacena bajo el árbol de documentos /users/{uid}.
• Seguridad granular (Firestore Security Rules): Reglas estrictas donde cada usuario solo puede leer y escribir su propia información:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
      match /{document=**} {
        allow read, write: if request.auth != null && request.auth.uid == userId;
      }
    }
  }
}

Sincronización bidireccional inteligente: Si el usuario modifica su botiquín en el móvil, los cambios se reflejan en tiempo real en la nube y se recuperan al abrir la app en la tablet o el ordenador.

💡 Lecciones Aprendidas y Desafíos Técnicos

Durante el desarrollo de Prospecto Fácil surgieron varios retos arquitectónicos interesantes:

1. La resiliencia en salud no es negociable: Las APIs externas (como CIMA) pueden tener caídas puntuales o microcortes. La arquitectura cuenta con adaptadores resilientes, fallbacks locales y estados de carga no bloqueantes para que la app nunca se quede en blanco.
2. El poder del Edge Computing para las SPAs: Combinar Angular en el cliente con Cloudflare Pages Functions en el borde de la red ofrece lo mejor de los dos mundos: la experiencia fluida de una PWA sin perder la capacidad de tener SEO enriquecido y previsualizaciones dinámicas.
3. Privacidad ante todo: Los datos de salud son extremadamente sensibles. El enfoque Local-First garantiza que quien no desee registrarse pueda disfrutar de la app sin enviar ni un solo dato personal a ningún servidor externo.

🚀 Conclusiones y Próximos Pasos

Construir Prospecto Fácil demuestra que hoy en día es posible crear herramientas sanitarias de impacto ciudadano con tecnologías modernas, accesibles y manteniendo costes de infraestructura prácticamente a cero gracias a las capas gratuitas de Cloudflare Pages y Firebase.

La aplicación sigue evolucionando con nuevas mejoras en su hoja de ruta: integración de recordatorios mediante notificaciones push enriquecidas, mejoras en el asistente de lectura y mayor cobertura de farmacias de urgencia para todas las comunidades autónomas.

¿Qué te parece la arquitectura elegida? ¿Has utilizado Cloudflare Pages Functions junto con Firebase en tus proyectos? ¡Déjame tus opiniones o preguntas en la sección de comentarios!