Proyectos

13/10/2022

/ , , ,

Todos los servicios desde tu app

Avanza Previsión es la entidad aseguradora creada por Grupo Mutualidad Abogacía con la adquisición de Mutualidad de la Ingeniería, implantando un modelo sólido e innovador, flexible y abierto, para adaptarse a las necesidades de previsión y de ahorro tanto de los ingenieros como del resto de colectivos y particulares.

Para esta nueva entidad desarrollamos su nueva área privada de clientes, abordando un proyecto completo end-to-end que cubre el análisis, diseño técnico e implementación de la solución.

La aplicación está disponible tanto versión web como aplicación móvil para Apple y Android, poniendo a disposición de todos los asegurados de servicios como el completo catálogo de productos disponibles, actualización de datos, nuevas contrataciones, seguimiento de productos contratados, contacto con asesores, etc.

Desde el punto de vista tecnológico usamos IONIC, Angular, .Net Core, Identity Server, CI/CD y Azure DevOps mientras que metodológicamente utilizamos metodologías Agile como Scrum y Kanban.

Proyectos

12/10/2022

/ , , , , ,

Implantación de Microsoft 365

Contexto

La Mutualidad de la Abogacía es una entidad sin ánimo de lucro que ofrece a los profesionales del mundo del Derecho a sus familias soluciones para cubrir todas sus necesidades de previsión, ahorro e inversión.

En la continua búsqueda de ofrecer más y mejores servicios tanto a los mutualistas como a sus propios empleados, la Mutualidad desea abordar un proyecto de mejora de su infraestructura tecnológica que le permita mejorar la comunicación tanto a nivel de compañía como entre sus empleados, mejorando la gestión del conocimiento y fomentando la colaboración entre los empleados.

Debido a la necesidad de cambios y el crecimiento dentro del grupo en los próximos años, se ve en la necesidad de implantar una intranet corporativa y un ecosistema de aplicaciones que les facilite la comunicación, la gestión del conocimiento y automatizar los procedimientos internos de la compañía.

Retos

Este proyecto plantea retos tecnológicos y humanos. Tecnológicamente se plantea el reto de la migración de la infraestructura técnica inicial, basada en repositorios de archivos descentralizados y correo on premise, a una infraestructura en la nube sin pérdida de datos ni de servicio.

Desde el punto de vista humano, se plantean los retos de adopción de las nuevas herramientas y la capacitación de los responsables de su administración. Esto hace necesaria una colaboración estrecha con los departamentos de IT, Comunicación y RRHH de la Mutualidad.

La solución

ITERIAM realiza la conceptualización, diseño y desarrollo de la intranet corporativa y gestión documental, mejorando la comunicación corporativa e interdepartamental y fomentando el trabajo colaborativo.

Esta intranet se implementa haciendo uso de diferentes soluciones de Microsoft 365, principalmente:

  • SharePoint Online para el desarrollo del sitio de la intranet y los subsitios correspondientes a las distintas áreas departamentales.
  • Power Automate, para la creación de flujos de aprobación de los distintos repositorios documentales.
  • Power BI, para la implementación de cuadros de mando para la Dirección que faciliten la toma de decisiones de negocio.
  • Microsoft Teams, para la creación de grupos de trabajo y espacios colaborativos integrados en la propia intranet.

El proyecto se divide en varias fases:

  • Una primera fase para la construcción una intranet unidireccional, con contenidos orientados a la comunicación corporativa, el acceso a las aplicaciones y los repositorios documentales centralizados.
  • Una segunda fase en la que se implementaron los distintos flujos de aprobación en base a los tipos documentales y procesos definidos por el área de Calidad.
  • Una tercera fase en la que se incorporaron todas las opciones colaborativas y de gestión de equipos.

Esta división de fases permitirá a la Mutualidad de la Abogacía ir evolucionado su intranet hacia una red social corporativa según vayan adoptando los usuarios las diferentes herramientas y nuevas formas de trabajo, y se vayan incluyendo diferentes piezas de la solución Microsoft 365.

Resultados

La Mutualidad de la Abogacía dispone en la actualidad de una intranet muy visual, flexible y fácil de administrar, lo que les permite ser completamente autónomos y sin mantenimiento de desarrollo. Además, ha mejorado la comunicación corporativa, la colaboración interdepartamental y la gestión metodológica y documental, mejorando la productividad y el sentimiento de pertenencia de sus empleados.

Proyectos

12/10/2022

/ , , , , ,

Servicio gestionado de canales online

La Mutualidad de la Abogacía es una entidad sin ánimo de lucro que ofrece a los profesionales del mundo del Derecho a sus familias soluciones para cubrir todas sus necesidades de previsión, ahorro e inversión.

En ITERIAM llevamos colaborando con ellos más de tres años para la evolución continua de sus Canales Online a través de un modelo de Servicio Gestionado. A través de este servicio nos responsabilizamos del desarrollo evolutivo y los mantenimientos correctivo, preventivo y perfectivo de todos los servicios del área de canales online.

Estos servicios son principalmente el área privada de los mutualistas y su aplicación móvil, la plataforma de onboarding digital y el portal privado de la Fundación.

En coordinación con la PMO de la Mutualidad, se define la estrategia digital, coordinando, planificando y priorizando el porfolio de proyectos y evolutivos relacionados con los canales online para clientes, en función de la carga de trabajo del equipo base multidisciplinar asignado. Esto permite un desarrollo y evolución continua de los diferentes canales, adaptándolos a las necesidades tecnológicas y de negocio de forma ágil.

El equipo, en colaboración con las áreas de Arquitectura y Sistemas de la Mutualidad, es responsable también del despliegue y monitorización de los distintos servicios dentro de canales online, incluidas las app en los diferentes stores.

ITERIAM establece un modelo de gestión que permite realizar un ajuste proporcionado y flexible ante cambios de la demanda de la Mutualidad, ampliando o reduciendo el equipo base en función de la demanda.

Desde el punto de vista tecnológico, trabajamos en este cliente con:

  • Web y App
    • ReactJS, Javascript y webpack
    • IONIC, Angular, Cordova
  • Back-end
    • .Net Core, Azure DevOps, CI/CD, Identity Server
    • .NET, Web API, MVC, despliegues en IIS
    • Azure Service Bus
  • SalesForce
  • Control de versiones y desarrollo de software colaborativo: TFS, Gitlab

Desde el punto de vista metodológico, utilizamos metodologías Agile como Scrum y Kanban.

Proyectos

02/10/2022

/ , , , , , ,

Escalamos el equipo de desarrollo de canales digitales

Contexto

La contratación de talentos en el sector de las nuevas tecnologías es una de las tareas más complejas para una empresa.

En ITERIAM ayudamos a acelerar este proceso aumentando la capacidad interna de nuestros clientes con el mejor talento, trabajando de forma colaborativa para alcanzar resultados exitosos y de la manera más rentable.

Con más de 30 años de historia, RSI proporciona a través de pago por servicio soluciones bancarias a más de 15 entidades financieras de primer nivel, con más de 8 millones de clientes que realizan una media de 5.000 millones de transacciones al año.

RSI tiene la necesidad de ir gestionando la demanda de desarrollo de aplicaciones para sus clientes, y en particular, la solución de eBanking cobra vital importancia para la compañía para competir ofreciendo soluciones tanto web como app que ofrezcan una experiencia de usuario memorable, facilidad de uso y rapidez en todas las operaciones sin necesidad de desplazarse a una oficina.

Enfoque de la colaboración

ITERIAM monta una célula de desarrollo front-end dentro de nuestro Centro de Desarrollo Especializado, ofreciendo un servicio ágil, flexible y personalizado para RSI asumiendo la demanda cambiante de trabajo según las necesidades de las diferentes entidades financieras.

Los principales beneficios de esta colaboración son:

  • Sinergias. Proporcionamos talento cualificado que se adapta e integra rápidamente en la estructura operativa del cliente, compartiendo una cultura similar, aportando nuestra experiencia en otros ámbitos y hablando el mismo idioma.
  • Escalabilidad. Los equipos de TI del cliente pueden crecer rápidamente en su negocio sin el coste adicional de contratación, manteniendo el control de los equipos y de sus proyectos.
  • Control. RSI se mantiene enfocado en la gestión de su negocio y nosotros nos encargamos de proveer el talento adecuado con las habilidades técnicas y la experiencia que necesita en cada momento.
  • Flexibilidad. Existe la posibilidad de aumentar o disminuir el tamaño del equipo según las necesidades y la duración del proyecto.
  • Rentabilidad. Reducción de costes operativos y gastos directos de contratación. Nosotros proveemos talento con las habilidades necesarias que formaran parte del equipo el tiempo que cada proyecto lo demande.

En este caso particular el equipo de conforma con especialistas en desarrollo de soluciones web y aplicaciones móviles con VueJS.

Proyectos

02/10/2022

/ , , , , , , , ,

Contratación de productos 100% online

Contexto

Los métodos de captación de nuevos mutualistas estaban limitados a operaciones presenciales, bien a través de las oficinas de Atención al Mutualista, o a través de la red de comerciales de la Mutualidad.

Además, el proceso de contratación requería una serie de validaciones previas y aportar determinada documentación obligatoria, que ralentizaba la gestión y retrasaba el alta efectiva del cliente, impidiéndole operar normalmente hasta el inicio del mes siguiente.

Retos

La Mutualidad de la Abogacía desea disponer de una plataforma de onboarding digital que permita a los no mutualistas contratar sus productos de manera sencilla, ágil y sin bloqueos durante el proceso.

La solución debe permitir realizar la contratación de forma online y sin fricciones, gestionando el alta del mutualista al momento para que pueda comenzar a operar a través del área privada sin esperas, y evitando al máximo la intervención del personal de la Mutualidad.

La solución

ITERIAM participa en la conceptualización de un proceso orientado al cliente, que elimine o mitigue todas las validaciones previas a la contratación asociadas a los procesos de suscripción internos.

Como parte la conceptualización de este proceso, se analizan diversas soluciones KYC (Know Your Customer) y de firma electrónica para encontrar las que mejor se adecúen al proceso y la forma de trabajo del área de Suscripción.

Estas soluciones deben dar solución a diferentes aspectos:

  • Identificación del cliente y la prueba de vida para evitar fraudes.
  • Identificación de PRP (Personas con Responsabilidad Pública) para la prevención de blanqueo de capitales (PBC).
  • Confirmación de la titularidad de la cuenta bancaria proporcionada.
  • Firma electrónica del contrato.

Una vez conceptualizado el proceso y seleccionadas las soluciones que mejor se adapten, ITERIAM realiza la integración y parametrización de la plataforma, adaptándola para ofrecer los productos de ahorro e inversión de la Mutualidad.

Resultados

La plataforma de onboarding digital ofrece la posibilidad de contratar un producto en menos de un minuto y con tan solo 5 pasos:

  • Identificándose con el DNI o pasaporte de forma síncrona, con la opción de incluir un selfie o vídeo para la prueba de vida y alcanzar el nivel más alto de seguridad, equivalente a la identificación presencial.
  • Configurando el producto en función de las condiciones determinadas por PBC, y ofreciendo a los usuarios simuladores online de su inversión.
  • Introduciendo la cuenta bancaria asociada al producto y validando su titularidad.
  • Opcionalmente, aportando la documentación requerida.
  • Firmando electrónicamente, cumpliendo con la regulación eIDAS, el condicionado particular del producto contratado.

La plataforma envía recordatorios en caso de abandonar el proceso antes de su finalización, permitiendo continuar el proceso donde se abandonó mediante la introducción de un código OTP.

Proyectos

02/10/2022

/ , , , , , ,

La mejor app para gestionar tu salud

Punto de acceso único a todos los servicios

Sanitas como empresa puntera en el ramo de salud con una cuota superior al 20% y referente en innovación en el sector evoluciona de forma continua su proyecto MiSanitas, canal de acceso para los asegurados a todos sus servicios digitales.

En 2021 el 12% de las consultas fueron digitales hasta alcanzar 782.000, con picos que superan las 4.200 diarias. Y todas esas consultas se realizan a través de MiSanitas.

Los asegurados tienen la posibilidad de realizar de forma sencilla y desde un punto único todas sus gestiones:

  • Pedir citas médicas, gestionarlas, reprogramarlas y cancelarlas
  • Buscar médicos, hospitales, centros médicos o clínicas dentales
  • Encontrar el centro de urgencia y especialista más cercano
  • Consultar el histórico de visitas al médico y las citas pendientes
  • Guardar médicos favoritos
  • Consultar informes médicos, analíticas, radiografías, etc.
  • Subir informes de otros centros para tener toda la información de salud en un solo lugar
  • Acceder a la tarjeta de salud digital (y de los hijos)
  • Hacer gestiones de la póliza, como solicitar reembolsos y autorizaciones
  • Ver los recibos y copagos en tiempo real
  • Consultar, modificar y personalizar el perfil de cada beneficiario
  • Cambiar la cuenta bancaria y periodicidad
  • Acceder a la biblioteca de consejos de salud

Escalamos los equipos de desarrollo

ITERIAM lleva cuatro años participando en este proyecto escalando el equipo del área de Digital de Sanitas mediante la conformación de squads ágiles siguiendo metodologías como Lean Startup o Scrum. Aportamos diferentes perfiles técnicos (product owners, scrum masters, líderes técnicos, UX, desarrolladores front-end, desarrolladores back-end, testers, maquetadores, etc.) y adecuamos la gestión de la demanda con un trato cercano, transparente y comprometido para cumplir con los objetivos de negocio.

La solución técnica se implementa tanto para web como app, realizando integraciones con todos los servicios digitales de la aseguradora mediante una arquitectura de microservicios y ofreciendo una magnífica experiencia de usuario al cliente.

Proyectos

19/09/2022

/ , , , , ,

Modernización de aplicaciones de gestión interna

Contexto

IKEA es probablemente la tienda de muebles más conocida a nivel mundial.

Desde el punto de tecnologías de información, al igual que otras grandes multinacionales, existen tanto sistemas corporativos como soluciones locales a cada país que posteriormente tendrán que consolidar información con los primeros.

IKEA Ibérica disponía de un parque de aplicaciones de escritorio que daban servicios de contabilidad, facturación e impuestos de forma local e independiente de los sistemas corporativos del grupo. Como directriz corporativa, se debía adaptar tecnológicamente ese conjunto de aplicaciones – denominadas internamente como “Service Office” – adecuando la solución tecnológica a los requisitos establecidos por la organización.

Los retos

Como bien sabemos en ITERIAM, la actualización tecnológica de un sistema no solo depende de la tecnología y es muy importante la metodología de trabajo en un proyecto de migración de entornos obsoletos a entornos actualizados.

En muchos casos no existe documentación suficiente y el conocimiento de los aplicativos se encuentra en las personas.

Adicionalmente, en este caso se añadía la complejidad del tiempo, ya que las nuevas aplicaciones deberían estar listas para el inicio del año fiscal, 1 de enero de 2019.

La solución

Aunque inicialmente el proyecto debía ser una actualización tecnológica, desde ITERIAM se planteó un proyecto más ambicioso que incluyese también una redefinición funcional de todas esas aplicaciones aprovechando las ventajas que nos ofrecerían las nuevas tecnologías.

Para llevar a cabo una modernización exitosa de estas aplicaciones debíamos hacer un acercamiento mixto. Por un lado, colaborar activamente con los responsables de las aplicaciones para conocer todo el alcance funcional, recoger los nuevos requisitos y definir correctamente todas las integraciones entre ellas y con los sistemas corporativos. Por otro lado, analizar en profundidad el código fuente de las aplicaciones mediante el uso de herramientas.

Con este acercamiento podemos tener un conocimiento completo de las aplicaciones.

A partir de aquí, y para cumplir el exigente “time-to-market” trazado por el cliente, organizamos varios equipos ágiles de desarrollo, uno por cada aplicación. El equipo técnico iba balanceando entre aplicaciones para compartir experiencias, reutilizar recursos y cumplir la planificación establecida.

Tecnológicamente, las aplicaciones se migran a un desarrollo web con tecnologías .NET, utilizando Entity Framework, Linq, tratamiento de ficheros planos, XML e importación de ETL, diseño de consultas y procedimientos almacenados en SQLServer y Oracle. Toda la solución está soportada sobre Azure.

Los resultados

En un periodo aproximado de 5 meses, se aborda una modernización de aplicaciones de escritorio obsoletas hasta aplicaciones web basadas en arquitecturas de última generación alineadas con los requisitos corporativos de IKEA.

La involucración de los usuarios desde el primer momento del proyecto permite dar valor a las inversiones pasadas y aumenta la motivación de todas las partes para conseguir los objetivos del proyecto: se consigue formar a los usuarios y desplegar las aplicaciones durante un complicado mes de diciembre, que están operativas desde el 1 de enero de 2019 hasta el día de hoy.

Un proyecto de este tipo ejecutado por personal técnico cualificado permite la reutilización real de código, mejora de la mantenibilidad de las aplicaciones y otros aspectos como la accesibilidad, usabilidad, simplicidad y seguridad de las nuevas aplicaciones.

Desde entonces ITERIAM ofrece a IKEA un servicio de mantenimiento correctivo y evolutivo de estas aplicaciones.

Actualidad

06/09/2022

/ , , , , ,

Arquitecturas CSS

Introducción

Normalmente cuando queremos empezar el desarrollo de una aplicación, solemos pensar en el lenguaje de programación que vamos a usar tanto en la parte de front-end como en la parte de back-end. Una vez elegidos, continuamos pensando en la arquitectura que van a tener ambas partes.

Centrándonos en la parte de front, además de pensar en la arquitectura del lenguaje de programación elegido, tendremos que plantearnos la arquitectura de nuestro código CSS y que nos va a permitir agilizar todo el desarrollo.

Eso sí, no hay que confundir arquitectura con metodología en CSS. Mientras que la arquitectura se va a encargar de organizar las carpetas del proyecto, la metodología se va a encargar de especificar en cómo se va a nombrar las clases.

Teniendo claro esto, he indagado en las diferentes arquitecturas CSS que existen y de las cuales he seleccionado dos para analizar en este artículo: la arquitectura SMACSS y la arquitectura ITCSS. Estas dos arquitecturas se centran en organizar el CSS dependiendo de su función en una categoría o capa.

Arquitectura SMACSS

SMACSS (Scalabre and Modilar Architecture for CSS) nos va a permitir que el código CSS que desarrollemos sea escalable y modular como indica su «imaginativo» nombre. Para conseguirlo, empezamos observando los patrones que caracteriza a cada una de las categorías. Esto se hace, ya que cuando comencemos el desarrollo, sepamos en que categoría agruparlo. Las categorías son las siguientes:

Base

Son aquellos estilos que aplican directamente a los propios elementos HTML y que vamos a usar para establecer los estilos por defecto en nuestra aplicación. También se incluyen aquellos estilos que nos van a permitir eliminar o restablecer las bases a aplicar en todos los navegadores. Esto último hay que planteárselo bien, ya que, si se va a restablecer de nuevo algún valor por defecto en los elementos reseteados, no tiene sentido que se restablezca en primer lugar.

Layout

Son aquellos estilos que tienen por objecto aplicarse sobre los componentes de estructura de nuestra aplicación. Por ejemplo, el header o el footer. Para aplicarle los estilos, se hace mediante el uso del selector ID. Sin embargo, hay veces en que el layout tiene que adaptarse a las preferencias del usuario, para ello se usará una clase con el prefijo ‘l-’. Para el caso de los IDs, se nombran con precisión y sin usar un espacio en la nomenclatura. Esto ayuda a identificar fácilmente la categoría de estos estilos y a separarlos de las categorías module y state.

Module

Son aquellos estilos que aplican sobre los diferentes componentes de nuestra aplicación. Por ejemplo, la barra de navegación y el carrusel de imágenes. Estos se ubican normalmente dentro de los componentes layout aunque también pueden ubicarse dentro de otros componentes module. Para garantizar la flexibilidad, los componentes modules deben de estar diseñados para existir como componentes independientes. Para aplicarles los estilos, se hace mediante nombres de clase y hay que evitar usar IDs y selectores de elementos.

State

Son aquellos estilos que modifican los estilos de un componente cuando se da una condición. Por ejemplo, una sección de un acordeón puede estar oculta o desplegada. Hay bastantes similitudes entre un estilo aplicado a un sub-module y a un state. Ambos modifican el aspecto de un componente, pero se diferencia en lo siguiente:

  • Las reglas de state se pueden aplicar tanto a las reglas layout como a las reglas module.
  • Las reglas de state indican una dependencia con Javascript.

Las reglas de state se aplican mediante el uso de las clases. También está permitido el uso del ‘!important’, pero sólo cuando sea estrictamente necesario y evitando usarse para todas las demás reglas.

Theme

Son aquellos estilos que definen los colores y las imágenes que le dan su apariencia a nuestra aplicación. Se debe separar cada tema en su propio conjunto de estilos. Esta categoría puede afectar a las demás y se aplica mediante el uso de clases. Debe tener un nombre que especifique el tema que es y se recomienda tener un archivo por cada tema.

Arquitectura ITCSS

ITCSS (Inverted Triangle architecture for CSS) es una arquitectura CSS que nos va a permitir que el código CSS que desarrollemos sea escalable y manejable. Esto se consigue mediante la organización de los ficheros CSS de tal manera que nos permita manejar la especificidad de estos. Según su especificidad, se separa el código CSS en varias capas que se pueden representar como las secciones de un triángulo invertido. Estas capas son las siguientes:

Settings

Se utiliza con preprocesadores y es donde colocaremos el código de declaración de variables. Por ejemplo, las fuentes y las definiciones de colores.

Tools

Se utiliza con preprocesadores y es donde colocaremos los mixins y las funciones de uso global. En esta capa y en la anterior es importante no generar ningún código CSS.

Generic

Se utiliza para reiniciar y/o normalizar los estilos de los elementos HTML de nuestra aplicación. A partir de esta capa, empezaremos a generar código CSS.

Elements

Se utiliza para establecer los estilos de los elementos HTML de nuestra aplicación. A diferencia de la anterior capa, esta no tiene por objecto convertir los elementos HTML en lienzos en blanco, sino busca darle los valores por defecto a los mismos elementos HTML orientándolo a la propia aplicación.

Objects

Se utiliza para establecer los estilos de los componentes de estructura de nuestra aplicación. Por ejemplo, el header, el grid, el container y el wrap. La capa objects se aplica mediante el uso de las clases con el prefijo ‘o-’.

Components

Se utiliza para establecer los estilos de los componentes de la interfaz de usuario. Por ejemplo, la barra de búsqueda o el botón de una red social. La capa components se aplica mediante el uso de las clases con el prefijo ‘c-’.

Utilities

Se utiliza para sobrescribir o anular los estilos establecidos anteriormente en las demás capas. Es la única capa en la que está permitido el uso del ‘!important’. La capa utilities se aplica mediante el uso de las clases con el prefijo ‘u-’.

Proyectos

01/09/2022

/ , , , , , ,

Planes de salud digitales

Contexto

Sanitas ofrece a sus asegurados distintos planes de prevención de salud, categorizados como digitales y no digitales. Los asistenciales son aquellos que el asesor puede dar de alta el plan a un cliente, y los digitales son aquellos en los que el cliente se da de alta sobre dicho programa desde la app.

Con el objetivo de ofrecer el mejor servicio a sus clientes, los asesores realizan un seguimiento individualizado de los objetivos en sus planes contratados. Sin embargo, este seguimiento resulta muy costoso para los asesores, ya que implica utilizar aplicaciones distintas dependiendo del tipo de plan, y no existe sincronización entre ambas aplicaciones.

Por ello, Sanitas se plantea el objetivo de desarrollar una única aplicación que a los asesores la gestión de todos los planes de forma conjunta, simplificando el proceso de gestión y mejorando la usabilidad del sistema.

Retos

La actualización tecnológica de un sistema no solo depende de la tecnología, es muy importante la metodología de trabajo en un proyecto de migración de entornos obsoletos a entornos actualizados. Adicionalmente, en este caso se añadía la complejidad del tiempo, ya que la nueva aplicación debería estar lista con el inicio del año fiscal.

Para la gestión de los programas digitales y asistenciales se necesita encontrar una plataforma única, flexible y escalable que le permita abordar el desarrollo de nuevos programas y la evolución y mantenimiento de los actuales, además de permitir dar de alta a no asegurados.

Además, se desea aprovechar para la creación de un nuevo programa digital preventivo para ayudar a los asegurados en la prevención de enfermedades, trabajando áreas como la nutrición, la actividad física y la promoción de hábitos saludables. Dicho plan se une a otros planes digitales que se han ido elaborando en los últimos años como nutrición, entrenador personal, embarazo o salud infantil.

La solución debe permitir mejorar los costes de licenciamiento y de servicios profesionales necesarios para el desarrollo y mantenimiento de los sistemas para poder optimizar los presupuestos disponibles.

Por último, el sistema debe sincronizarse con sistemas terceros para la actualización periódica de los datos clientes, estado de los planes, etc., facilitar al explotación de datos y el reporte de información.

La solución

Para llevar a cabo una modernización exitosa de estas aplicaciones debemos hacer un acercamiento mixto. Por un lado, colaborar activamente con los responsables de las aplicaciones para conocer todo el alcance funcional, recoger los nuevos requisitos y definir correctamente todas las integraciones entre ellas y con los sistemas corporativos. Por otro lado, analizar en profundidad el código fuente de las aplicaciones ya existentes mediante el uso de herramientas.

Con este acercamiento podemos tener un conocimiento completo de las aplicaciones para su ejecución, que se plantea en tres grandes líneas:

  • Migración de planes asistenciales al nuevo modelo de datos unificado.
  • Creación de un MVP del nuevo plan preventivo digital, incorporando funcionalidades de forma progresiva.
  • Migración de los planes digitales.

Como solución técnica se desarrolla un front-end en Angular 12, comunicado con el back-end mediante una arquitectura de microservicios Java Spring Boot sobre Docker Swarm.

Adicionalmente, se desarrollaron procesos batch (Spring Batch) para la sincronización con los sistemas terceros.

Resultados

Desde el punto de vista de los asesores, se mejora su productividad y rendimiento la disponer de un entorno unificado, mejorando la visión 360 del cliente, la gestión y la usabilidad del sistema.

Desde el punto de vista global de Sanitas, se consigue un ahorro de costes en licencias al dejar de utilizar Dynamics para la gestión de los planes asistenciales, así como una mejora importante en el time-to-market en la integración de nuevos planes.

Actualidad

18/11/2021

/ , , , ,

Primeros pasos con SVELTE

Introducción

Svelte  (o SvelteJS) es un framework para desarrollar aplicaciones JavaScript por Rich Harris y basado en componentes para crear aplicaciones reactivas.

A diferencia de otros frameworks como Angular, Vue o React, el código es compilado previamente para que el navegador pueda entenderlo.

Si visitamos la web principal de Svelte podemos desatacar sus tres características principales:

  • Write Less Code. Una de las principales características es que podemos crear componentes con menos líneas de código, que por ejemplo React, donde su creador asegura que si comparamos componentes iguales, estamos ahorrando hasta un 40% de código. Svelte utiliza el principio de Single File Component en el cual, en un mismo archivo tendremos el HTML, Javascript y Css. Esto te puede resultar familiar si has utilizado Vue.
  • No virtual DOM. Lo más interesante de Svelte es, que como hemos comentado, es precompilado. No hace uso del Virtual DOM para realizar cambios en nuestra aplicación, sino que se aprovecha de la previa compilación para realizar los cambios de estados y propiedades.
  • Truly reactive. La programación reactiva es la base de cualquier framework de javascript, donde simplemente es que la interfaz del usuario va cambiando según se vayan modificando los datos de éste.

Vamos a ver paso a paso cómo empezar con un proyecto utilizando Svelte 3.

Instalación

Vamos a ver como crear un proyecto sencillo en Svelte y para ello, seguiremos los pasos que nos indican en la web oficial.

Arrancamos una terminal y ejecutamos el siguiente comando:

npx degit sveltejs/template proyecto-svelte

Con este comando lo que estamos haciendo es hacer una copia del repositorio de Github de sveltejs, pero sin la carpeta .git.

El siguiente paso será situarnos dentro de nuestro proyecto: cd proyecto-svelte y hacer un: npm install para instalar las dependencias del proyecto.

Una vez instaladas todas las dependencias podemos ver los distintos ficheros que nos ha creado.

Estructura del proyecto

Si abrimos nuestro proyecto con un editor, nos encontraremos con la siguiente estructura:

Uno de los ficheros a destacar es rollup.config.js , el cual es una herramienta que lo que hace es compilar todo nuestro código en un solo fichero, más grande y complejo (lo que se llama Bundle) como puede ser Webpack o Parcel.

Seguimos analizando nuestro proyecto y vemos el  fichero package.json . Como podemos ver, tiene una configuración bastante sencilla con pocas dependencias y los diferentes scripts que podemos ejecutar:

Creación de una sencilla aplicación:

Vamos a crear una pequeña aplicación para ver alguna de las características más importantes de este framework:

Empezamos analizando el fichero main.js, el cual es el fichero de entrada de nuestra aplicación. En él, estamos creado una prop que pasaremos a nuestro componente App.svelte.

En el siguiente ejemplo crearemos un pequeño componente donde habrá un contador y en el que veremos algunas de las características de este framework:

Lo primero que haremos es exportar la propname’, donde estamos indicando que es un parámetro del componente. Después crearemos una propiedad llamada contador, y un botón el cual llamará a una función para que cada vez que se haga click en él, el contador se incremente. En este botón hemos añadido la directiva on:click, que será el evento que se lance cada vez que pulsemos sobre él.

Aquí lo interesante que tiene Svelte, es que como tiene un paso previo de compilación, está deduciendo que la variable ‘contador’ es un estado, y cada vez que el valor cambie, vuelve a renderizar el componente.

En la siguiente imagen vemos como traduce Svelte nuestro código:

Arrancar el proyecto

Arrancaremos nuestro proyecto y lo ejecutaremos en modo ‘dev’. Para ello ejecutamos el comando: npm run dev y se nos indicará una dirección localhost con el puerto 5000, el cual no llevará a nuestro entorno de desarrollo.

Así se vería nuestro proyecto en el navegador:

Conclusión

Hasta aquí hemos podido ver como configurar nuestro entorno para trabajar con Svelte y algunas de las ventajas que tiene como son la simplicidad de su código, reactividad y que tiene una curva de aprendizaje muy baja.

Podemos ver ejemplos concretos en su misma página, analizarlos y comprobar la potencia que puede llegar a darnos este framework en el desarrollo de nuevas aplicaciones.