Desarrollando aplicaciones SMART On FHIR con Auth0 e InterSystems IRIS FHIR Server - Aplicación Angular

Finalizamos esta serie de artículos de SMART On FHIR con Auth0 e InterSystems IRIS FHIR Repository revisando nuestra aplicación desarrollada en Angular 16.

Recordemos como es la arquitectura definida para nuestra solución:

Nuestra aplicación de front-end corresponde con la segunda columna y como véis será la encargada de dos cosas:

1. Redireccionar la petición de login a Auth0 y recibir la respuesta.
2. Enviar y recibir la respuesta de las solicitudes vía REST enviadas al servidor FHIR.

Angular

Angular es un framework para aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. Este diseño de "single page application" nos permite diseñar aplicaciones mucho más dinámicas para el usuario. Como ya explicamos en el primer artículo vamos a usar NGINX como servidor de aplicaciones y proxy inverso que nos evitará problemas derivados del CORS al modificar las cabeceras de las llamadas para que coincidan con el del servidor.

Diseño de la aplicación

Hemos diseñado nuestra aplicación con Angular Material para simular el diseño de una aplicación para móvil. En nuestro ejemplo la aplicación está destinada a registrar una serie de datos del paciente como son el ritmo cardíaco, la presión sanguínea y el peso y para ello enviaremos a nuestro servidor dos tipos de recursos FHIR, el primero será de tipo Patient con el que el usuario registrará sus datos; el segundo corresponderá al recurso Observation en el que enviaremos cada uno de los tipos de datos que vamos a enviar.

La aplicación permitirá al usuario ver una gráfica con la evolución de los datos registrados.

Pantalla de login

Cuando el usuario acceda a la ruta https:\\localhost se visualizará la pantalla inicial desde la que podrá solicitar loguearse.

 

Pulsando en el botón de login la aplicación redirigirá automáticamente al usuario a la página de Auth0 habilitada para la API configurada:

Tras introducir nuestro usuario y contraseña Auth0 nos solicitará que otorguemos permiso a la aplicación para acceder a nuestros datos, una vez confirmado el acceso a dichos datos la Auth0 nos redirigirá a la URL que le indicamos durante el proceso de configuración. Una vez generado el Access Token la librería de Auth0 se encargará de incluirlo en la cabecera de todas las llamadas que lancemos contra el servidor. Podemos verlo en la siguiente imagen:

Pantalla inicial

Una vez logueado tendremos la primera comunicación con nuestro servidor FHIR para solicitarle la información disponible para el usuario logueado, para ello utilizaremos una consulta por parámetro remitiendo una llamada GET del siguiente tipo:

https://localhost:8443/smart/fhir/r5/Patient?email=lperezra%40intersyste...

La respuesta del servidor será un recurso tipo Bundle con la siguiente información:

{
    "resourceType":"Bundle",
    "id":"8c5b1efd-cfdd-11ee-a06b-0242ac190002",
    "type":"searchset",
    "timestamp":"2024-02-20T10:48:14Z",
    "total":0,
    "link":[
        {
            "relation":"self",
            "url":"https://localhost:8443/smart/fhir/r5/Patient?email=lperezra%40intersystems.com"
            
        }
    ]
}

Como vemos tenemos un total de 0 pacientes con ese email, por lo que nuestra aplicación nos va mostrar una pantalla inicial desde la que podremos registrar nuestros datos.

 

Como podéis ver tenemos el campo de email ya cumplimentado con el correo del usuario logueado, esto es así porque como habéis visto en la consulta inicial, lo vamos a usar como identificador. Con el formulario relleno enviaremos mediante POST una llamada del siguiente tipo:

https://localhost:8443/smart/fhir/r5/Patient

Con el cuerpo del mensaje formado por un recurso Patient:

{
    "resourceType":"Patient",
    "birthDate":"1982-03-08",
    "gender":"male",
    "identifier":[
        {
            "type":{
                "text":"ID"
            },
            "value":"12345678A"
        }
    ],
    "name":[
        {
            "family":"PÉREZ RAMOS",
            "given":[
                "LUIS ÁNGEL"
                ]
        }
    ],
    "telecom":[
        {
            "system":"phone",
            "value":"600102030"
        },
        {
            "system":"email",
            "value":"lperezra@intersystems.com"
        }
    ]
}

Con los datos del paciente registrados en nuestro servidor la consulta de paciente nos devolverá ya un resultado, por lo que ya estamos preparados para poder registrar las diferentes observaciones. Veamos que pinta tiene la pantalla inicial:

Pantalla de observaciones

Del mismo modo que hemos enviado los datos del paciente enviaremos las observaciones desde sus pantallas específicas:

Por cada recurso enviado al servidor la aplicación añadirá un nuevo punto a la gráfica:

Para ello lanzará una consulta al servidor solicitando los recursos de tipo Observation pertenecientes al usuario:

https://localhost/smart/fhir/r5/Observation?patient=Patient/1

Y el servidor nos devolverá nuevamente un recurso de tipo Bundle con todas las observaciones registradas para el paciente:

Con el resultado obtenido la aplicación extraerá todos los valores numéricos y constuirá las gráficas pertinentes.

Conclusión

Como habéis visto en este y los anteriores dos artículos, el diseño y creación de aplicaciones SMART On FHIR no tiene una gran complejidad y nos permiten construir de una manera rápida y ágil aplicaciones que aprovechan todas las funcionalidades disponibles en nuestro servidor FHIR.

Una aplicación de este tipo no necesitará del desarrollo de un complejo backend para gestionar las operaciones de tipo CRUD sobre los datos y con el uso de OAuth2 tampoco necesitaremos gestionar los usuarios desde la aplicación, delegando dicha funcionalidad en Auth0 o el servidor de autenticación y autorización elegido.

Con SMART On FHIR podemos, de una manera fácil y sencilla, poner a disposición de pacientes y profesionales médicos de las herramientas necesarias para la gestión de datos clínicos.

¡Muchas gracias por vuestra atención!