APLICACIÓN WEB PARA EL CENTRO PSICOTERAPÉUTICO RENACER

ANDRES FERNANDO SAA MONTAÑO

PROYECTO DE APLICACIÓN

Director del proyecto

PHD. GUILLERMO ROBERTO SOLARTE MARTINEZ

UNIVERSIDAD TECNOLÓGICA DE PEREIRA

FACULTAD DE INGENIERÍAS

PROGRAMA DE INGENIERÍA EN SISTEMAS Y COMPUTACIÓN

2019

Pereira, 15 de Enero de 2020

Notas de aceptación:

Firma del presidente del jurado

Firma del jurado

Firma del jurado

TABLA DE CONTENIDO

INTRODUCCIÓN ............................................................................................................................ 1

1.

GLOSARIO ............................................................................................................................... 4

2.

ESTADO DEL ARTE ............................................................................................................... 5 2.1. DEFINICIONES IMPORTANTES ...................................................................................... 5 2.1.1. ¿Qué es Frontend? ...................................................................................................... 5 2.1.2 ¿Qué es React? ............................................................................................................. 5

3.

ANTECEDENTES ................................................................................................................... 7

4.

DEFINICIÓN DEL PROBLEMA ........................................................................................... 10

5.

JUSTIFICACIÓN ................................................................................................................... 11

6.

OBJETIVOS ........................................................................................................................... 12

7.

PRESUPUESTO ................................................................................................................... 13

8.

METODOLOGÍA .................................................................................................................... 14

8.1.

DIAGRAMAS .................................................................................................................. 16

8.1.1.

Arquitectura para web ........................................................................................... 16

8.1.2.

Estándar de facto en web ..................................................................................... 16

8.1.3.

Diagrama usando WAE ........................................................................................ 16

8.2.

DESARROLLO .............................................................................................................. 17

8.3.

PROTOTIPO .................................................................................................................. 20

9.

CONCLUSIONES .................................................................................................................. 26

10.

RECOMENDACIONES ..................................................................................................... 27 BIBLIOGRAFÍA .............................................................................................................................. 28

INTRODUCCIÓN

La salud mental es un estado de equilibrio emocional, cognitivo y conductual que permite al individuo desenvolverse de manera responsable en su entorno familiar, social y laboral, así como gozar de bienestar y calidad de vida. Actualmente los factores de riesgo para la salud mental en Colombia se dividen en categorías (Felizzola, 2000):

 Factores socioculturales y ambientales:

En lo económico: Se han producido despidos masivos de trabajadores y el crecimiento del desempleo ha alcanzado cifras nunca registradas en el país como se menciona en el Ministerio de Salud. La salud en las Américas 1. Población menor: El maltrato infantil es un riesgo creciente en el país, junto con la orfandad, el trabajo infantil y el consumo de sustancias psicoactivas en adolescentes 2.

Núcleo familiar: Son uno de los elementos que está fallando debido a los cambios sociales radicales y rápidos que vive la población como la urbanización, condiciones de trabajo precarias, cambios en la estructura familiar, etc.

Situación de la tercera edad: Datos anteriores a 1993 han registrado que el 87,5% de esta población no se beneficiaba de la seguridad social; 42% no percibía ingresos; 41,9% estaba en situación de miseria; 11% vivía en tugurios y 39% debía trabajar para subsistir.

 Factores biológicos:

Transición demográfica: el índice de envejecimiento (IE) para 1997 se calculaba en 20 por cada 100 jóvenes (menores de 15) y para el 2025 se pronostica en 54 por cada uno de estos 3.

 Accidentes y desastres: estos factores provocan el 12,1% de los casos de alteración mental4.

Desplazamiento forzado: según cálculos entre diciembre de 1995 y diciembre de 1996 se desplazaron por causa de la violencia 36.202 hogares, y aproximadamente cada hora en el territorio nacional se desplazan cuatro familias por la misma causa5.

1 Ministerio de Salud. La salud en las Américas, vol. I y II Washington, 1998. 2 Ministerio de Salud. O.P.S. y O.M.S. Lineamientos de atención en salud para las personas con deficiencia, discapacidad y/o minusvalía. Bogotá, 1996. 3 Ministerio de Salud. e 1. N.S... Informe epidemiológico nacional, quincenal. Vol. 4, Núm. 7, Santafé de Bogotá, 15 de abril de 1999.

4 Cruz Roja Internacional. Infracciones a la misión médica en el conflicto armado colombiano. Bogotá, 1999.

5Calderón. Los desastres: reacciones psicológicas y psicosociales. En: La salud mental en situaciones de desastre. Editorial Uniantioquia, Medellín, 1993: 51-69. http://bdigital.unal.edu.co/22915/1/19605-64997-1-PB.pdf

Según el boletín de salud mental del 2018 (Salud, 2018), la atención a pacientes está dividida por rangos de edades, se puede observar que la población entre 7 y

11 años les toma en promedio 11,8 horas acceder al servicio de salud mental, los

que están entre 12 y 17 años les toma 11,7 horas, los que están entre 18 y 44 años les toma 32,3 horas y aquellos de 45 años o más les toma 9,6 horas. Los tiempos mencionados son demasiado altos y pueden afectar los tiempos que asignan las personas para sus actividades diarias.

En Pereira se creó el Centro Psicoterapéutico Renacer soportado por la psicóloga Viviana Ramos Espinosa quien se graduó de la Universidad del Quindío y desde entonces ha dedicado parte de su vida a mejorar la salud mental de las personas generando un impacto positivo en cientos de ellas.

El Centro Psicoterapéutico Renacer es un centro de atención integral con énfasis en la atención psicológica y manejo del estrés para las personas en general, su finalidad y propósito es acoger y enseñar a las personas a obtener un equilibrio emocional, promoviendo la importancia del manejo del estrés y las emociones por medio de productos y servicios de calidad que se dividen en las siguientes categorías:

-

Nivel Organizacional  Gestión del talento humano  Manejo del estrés laboral  Análisis y descripción de cargos  Selección de personal  Evaluación de desempeño  Medición de clima y cultura organizacional  Bienestar laboral  Capacitación y aprendizaje organizacional  Gestión por competencias  Comunicación efectiva  Atención al cliente  Liderazgo y trabajo en equipo  Trabajo y sentido de vida  Inteligencia emocional en el trabajo  Desempeño y compromiso en el trabajo  Psicología de la salud ocupacional y factores de riesgo psicosocial  Técnicas de relajación como yoga, mándalas, talleres antiestrés, etc.

 Intervención individuo, familia y organización  Manejo de adicciones: Tabaquismo, alcoholismo, drogadicción, etc.

 Valoración psicológica y psicosocial, aplicación e interpretación de pruebas psicotécnicas  Panorama de riesgos psicosociales

-

Nivel Educativo  Escuelas de padres  Elaboración de proyectos de vida  Orientación vocacional

-

Nivel Social  Procesos de desarrollo comunitario

-

Nivel Clínico  Psicoterapia a personas con trastornos psicológicos (estrés, depresión, etc.)

 Asesoría psicológica individual  Asesoría psicológica grupal  Seminarios, convivencia y talleres vivenciales  Otros Servicios  Clases de yoga  Arte terapia  Reflexología Estos ayudan a disminuir la tensión generada por las actividades del día a día.

1. GLOSARIO

En la documentación de este proyecto se usan muchos términos técnicos a nivel de tecnologías en desarrollo web, esta sección es muy útil para que el lector entienda las palabras más relevantes y pueda tener mejor entendimiento del contexto. API: Se traduce como interfaz de programación de aplicaciones y su función principal es proveer a otras aplicaciones de funciones y métodos que ya están listos para usarse. En palabras sencillas se encarga de que las aplicaciones puedan interactuar entre sí.

Aplicación web: Es toda aplicación o herramienta a la que se puede acceder mediante un navegador, sea a través de internet o una red local. Desarrollo web: Define la creación de sitios o aplicaciones web para internet o una intranet. Para conseguirlo se hace uso de tecnologías del lado del servidor y del cliente que involucran una combinación de procesos de bases de datos con el uso de un navegador web con la finalidad de realizar ciertas tareas o mostrar información.

Framework: Es una plataforma que ya viene con librerías o módulos específicos que nos permite como programadores enforcarnos más en la organización y desarrollo de la aplicación.

Psicoterapia: Es una relación entre un terapeuta o psicólogo y un paciente, en la cual el paciente comunica al terapeuta sus problemas, sufrimientos y dificultades que el terapeuta o psicólogo puede abordar mediante ciertas estrategias para su resolución para que el paciente pueda llevar una vida más plena.

2. ESTADO DEL ARTE

Antes de entrar en materia sobre el estado del arte es necesario que entendamos un poco de contexto sobre las tecnologías que usarán para este proyecto.

2.1. DEFINICIONES IMPORTANTES

2.1.1. ¿Qué es Frontend?

El desarrollo web en la actualidad se divide en dos Frontend y Backend, el Frontend es todo aquello que tiene que ver con el navegador y está ligado a la experiencia de usuario, mientras que el Backend está ligado al almacenamiento de los datos y a la seguridad de estos.

Para ser un desarrollador Frontend es necesario tener unas buenas bases en HTML, CSS y JavaScript. HTML es usado para establecer la estructura de la aplicación web, si estuviéramos hablando de un cuerpo humano este serían los huesos. CSS se usa para definir los estilos para esa estructura, que serían los colores, animaciones, etc. JavaScript por su parte es el lenguaje de programación que nos permite realizar cuantas cosas nos imaginemos, desde manipular los elementos del HTML y CSS hasta crear eventos para ellos. Además, es uno de los lenguajes más demandados en la actualidad tanto para Frontend como Backend.

2.1.2 ¿Qué es React?

Es una librería o framework de JavaScript creada por Facebook para crear interfaces de usuario de una forma más sencilla, versátil y entretenida. Esta usa todas las herramientas que ya hemos comentado previamente sobre Frontend y es uno de los frameworks más usados y demandados en la industria tecnológica actualmente.

Ya teniendo un contexto más claro de lo que hablamos podemos proceder con el estado del arte de React que es la tecnología con la que desarrollaremos este proyecto.

Como se menciona en (Sacha & Greif, 2018) React es una librería de JavaScript declarativa, eficiente y flexible para construir interfaces de usuario. Su popularidad está aumentando año con año entre los desarrolladores, en los resultados de esta encuesta se ve reflejado que las personas que la han usado la volverían a usar. Desde un 48% en 2016 a un 64% en 2018. Los desarrolladores mencionados destacaron los aspectos que más gustan al usar esta librería, en este caso mencionaremos los más relevantes:

 Estilo de programación y patrones elegantes.  Ecosistema de paquetes enriquecido.  Una opción bien establecida en el mercado.  Buena documentación.

 Alto rendimiento.

Los países en los que más se usa esta librería son:

1. Estados Unidos

2. Australia

3. Canadá

3. ANTECEDENTES

Según la Encuesta Nacional de Salud Mental (ENSM) realizada en Colombia en

2015 (Salud, 2018), quienes solicitan mayores atenciones a salud mental son los

cuidadores de niños entre los 7 a 11 años con un 48%, mientras que los que menos lo hacen son las personas de 45 años en adelante.

Indicador Población por grupos etáreos

7

a

11

12 a

17

18 a

44

45

y más Solicitan atención por problemas en su salud mental en los últimos 12 meses

48.1

%

35.2

%

38.5

%

34.3%

Recibieron algún tipo de atención en salud mental luego de ser solicitada

92.7

%

88.5

%

94.0

%

88.9%

Medicamento ordenado por el médico

100

%

86.5

%

87.5

%

Medicamento ordenado por la EPS

71.7

%

80.5

%

72.5

%

97.9%

Acceso a psicoterapia por psicología

83.1

%

*

72.7

%

52.7%

Promedio del tiempo (hora) requerido para acceder al servicio de salud mental

11.8

11.7

32.3

9.6

Tabla 1 - Resultado de la Encuesta Nacional de Salud Mental (ENSM) de 2015. Según la tabla anterior podemos observar que el tiempo para que las personas entre

18 y 44 años puedan ser atendidas por el servicio de salud mental es muy alto (32,3

Horas). Este es el sector de la población a la que más queremos ayudar con una atención psicoterapéutica y por medio de este proyecto se podría disminuir ese tiempo de atención significativamente, además de que los pacientes reciban una atención más personalizada.

Además de las cifras mencionadas la revolución tecnológica en la que vivimos hoy en día ha cambiado la forma en cómo nos comunicamos, viajamos, nos relacionamos con otras personas, trabajamos, compramos, entre otros. Pero también ha traído consigo una serie de problemas psicológicos que está afectando sobre todo a la población más joven del planeta.

Según la ENSM los adolescentes en Colombia ni siquiera tienen acceso al servicio de psicoterapia por psicología debido a la falta de disponibilidad de éste. Esto dificulta que los problemas psicológicos relacionados con la tecnología (Valencia), 2018) que sufren los adolescentes sean resueltos.

¿Cuáles son estos problemas psicológicos relacionados con la tecnología?

● Nomofobia

Es un miedo irracional a estar sin el teléfono móvil o smartphone, probablemente debido a que se ha convertido en una extensión de nuestro cuerpo. De tal forma que cuando no lo tienen a la mano se sienten incomunicados.

Los síntomas de este trastorno son: Dolor de cabeza y de estómago, ansiedad, estrés y pensamiento obsesivo.

Este trastorno se produce con frecuencia en adolescentes.

● Síndrome de la llamada imaginaria

Se produce cuando tenemos la extraña sensación de que nuestro teléfono celular sonó o vibró cuando en realidad no es así. Esto se convierte en el síndrome descrito cuando se tiene esta sensación de forma continua. El cerebro humano tiende a relacionar cualquier impulso que recibe con el móvil lo que provoca que pensemos inmediatamente que está sonando o que vibra.

● Dependencia de internet

Actualmente estamos casi permanentemente conectados a internet debido a los smartphones, las redes sociales, los chats, las páginas de contactos y un largo etcétera. Si no sabemos poner un límite la dependencia de internet puede producir ansiedad, estrés y alteraciones en nuestra conducta, además de aislamiento.

● Dependencia de Videojuegos en línea

Esta es una derivación de la dependencia de internet la cual produce que las personas permanezcan una gran cantidad de horas dentro de estos juegos, muchas veces sin dormir y en algunas ocasiones sin comer solo para subir de nivel o conseguir algo dentro del mismo.

El tratamiento para esta dependencia es parecido al tratamiento cuando se producen problemas con las drogas o el alcohol.

A pesar de estos problemas el internet ha ayudado a que psicólogos en cualquier lugar del mundo puedan atender a pacientes con movilidad reducida o problemas que no les permiten movilizarse (Valencia), 2018).

Este proyecto inicia por la necesidad de aumentar y mejorar la interacción entre los psicólogos del centro psicoterapéutico y sus pacientes. De esta forma se podría atender a los pacientes con los problemas psicológicos ya mencionados y muchos otros, además de llevar un seguimiento más efectivo de los casos.

4. DEFINICIÓN DEL PROBLEMA

El servicio de salud mental en el centro renacer todavía sigue siendo precario porque la atención se realiza de manera presencial y los registros de los pacientes atendidos se hacen de forma manual (Salud, 2018) incrementado así la cantidad de pacientes y el tiempo de acceso al servicio, además del traslado constante de los pacientes a los sitios de atención para obtener el servicio puede significar un gasto adicional. Existen estudios del Instituto de Política de Dinero y Salud Mental (Institute, 2019) que sugieren que las personas con problemas psicológicos se les dificulta el obtener, administrar el dinero y manejar sus gastos. Esta dificultad financiera les genera ansiedad y estrés los cuales empeoran su problema. Estos tipos de pacientes que tienen problemas psicológicos y no son atendidas a tiempo, tienden a ser agresivos con sus familias a través de distintas formas de abuso (verbales, físicas, etc.) (Felizzola, 2000).

5. JUSTIFICACIÓN

Las personas entre los 18 y 44 años serán los principales beneficiados por la realización de este proyecto, porque son a los que más tiempo les toma ser atendidos por el sistema de salud mental actual. Son aproximadamente 32 horas para acceder al servicio, sin contar el tiempo de atención efectiva (Salud, 2018). Por medio de la implementación de este proyecto ese tiempo se podría reducir en aproximadamente un 80% incluyendo la atención efectiva de los pacientes en el rango de edad mencionado. Al final también pueden resultar beneficiados indirectamente otros grupos etáreos de la población que deseen acceder al servicio, pero el grupo entre los 18 y 44 años son el foco principal. Además, se contaría con la capacidad de atender a los adolescentes (grupo entre los 11 y 17 años) que hoy en día no cuentan con acceso a servicios de atención de psicoterapia por psicología.

6. OBJETIVOS

General  Implementar una aplicación web para gestionar la atención a pacientes del centro psicoterapéutico renacer.

Específicos

● Levantamiento y análisis de los requerimientos del centro psicoterapéutico.

● Diseño e implementación de la aplicación web.

● Gestionar el hosting (alojamiento) y dominio de la aplicación web.

● Creación de un módulo de estadísticas descriptiva del uso de la aplicación

web.

● Divulgación de la aplicación en el centro psicoterapéutico.

7. PRESUPUESTO

Los gastos para la realización del proyecto corren por cuenta mía y por el cliente para la compra del nombre de dominio.

8. METODOLOGÍA

Fase 1 - Toma de Requerimientos y análisis Se plantea una metodología para el desarrollo que se basa un poco en la metodología scrum. Se realizaron reuniones con el cliente, en este caso la psicóloga Viviana Ramos cada 15 días para mostrar los avances del proyecto y recibir retroalimentación para realizar modificaciones y adiciones. En la primera reunión se estableció que se desarrollaría el proyecto a partir de una web ya existente, la cual se encuentra en el siguiente enlace: https://colombia.publicar.guru/preview/5c0a98b8. Este enlace fue enviado vía correo electrónico junto con un documento en el que se encuentran los servicios ofrecidos por el centro psicoterapéutico.

Con estos elementos a la mano realicé un análisis de la web existente para definir según este modelo negocio qué elementos eran necesarios y cuales descartables. Además de un análisis del diseño revisando proyectos con un modelo de negocio similar y mirando qué colores y elementos de diseño usaban. En la segunda reunión se le mostró al cliente el resultado del análisis para saber si estaba de acuerdo con lo observado y sus sugerencias para empezar a realizar el desarrollo.

Las demás reuniones se realizaron con el objetivo de mostrarle los avances del proyecto al cliente, escuchar sus observaciones y retroalimentación hasta terminar el proyecto.

Fase 2 - Desarrollo Gracias a la experiencia obtenida por proyectos realizados previamente (desde 2016) ya se cuenta con unos conocimientos sólidos en el desarrollo como Frontend (HTML, CSS y JavaScript) (Traversy, What To Learn Before A JavaScript Framework, 2018), por lo tanto, se usaron herramientas de la librería/framework React (Rascia, 2018) que me facilitaran el desarrollo de este proyecto. Las librerías que usé fueron las siguientes: ❏ Reactstrap: estilos listos para usar basados en el Framework Bootstrap 4. ❏ React-router-dom: manejo de enrutamiento para enlaces y páginas. ❏ React-fontawesome: para incluir iconos listos para usar. ❏ Styled-components: para agregar estilos personalizados con la sintaxis propia de CSS.

❏ Sistema control de versiones Manteniendo un control sobre los archivos y sus versiones se usó Git y la plataforma GitHub que facilita la comunicación con otros sistemas como la plataforma de despliegue de la cual hablo más adelante en este documento.

❏ Estructura de las carpetas Llevando un orden en los componentes se decidió dividir primero los que solo van a mostrar contenido estético, pero sin funcionalidades a excepción del componente NavBar.js en una carpeta llamada layout, las páginas de la aplicación quedaron ubicadas en la carpeta pages y para los componentes con funcionalidades, que cuentan con estado y propiedades quedaron ubicados en la carpeta components. Aquí además quedaron alojadas todas las carpetas mencionadas anteriormente.

Los recursos necesarios como las imágenes que se van a mostrar se almacenaron en la carpeta img con subcarpetas donde cada carpeta about, header, services y testimonials contiene las imágenes necesarias para cada sección y páginas relacionadas.

Fase 3 - Despliegue y configuración del dominio El despliegue se realizó usando la plataforma Netlify (Morente, 2017) que brinda la posibilidad de conectarse a una cuenta de GitHub y cargar los archivos cada que se suben cambios en el proyecto por medio de Git. A esto se le llama Integración Continua o Continuous Integration (CI). La plataforma también permite gestionar los mensajes enviados por medio de un formulario (Traversy, Simple Contact Form Submission With Netlify, 2019), y su integración con React es relativamente sencilla, solo hay que seguir una serie de guías para su realización.

8.1. DIAGRAMAS

8.1.1.

Arquitectura para web La mayoría de las aplicaciones desarrolladas hoy en día son las llamadas web, es decir, aquellas que involucran como elemento significativo un navegador web y un protocolo de comunicación HTTP.

8.1.2.

Estándar de facto en web Como se menciona en (Abiztar), en 1998, Jim Conallen definió una extensión a la que denominó WAE (Web Application Extension) para UML. Esta extensión es la convención más difundida y aceptada hasta nuestros días y podríamos decir que define el estándar de facto.

8.1.3.

Diagrama usando WAE

8.2. DESARROLLO

La arquitectura de la aplicación la plantearé de una forma más contemporánea tomando como referencia un artículo muy interesante de un desarrollador Frontend experimentado.

Como se menciona en (Botto, 2016) construir una aplicación es como ensamblar un PC, hay partes que son esenciales solo para que encienda y funcione correctamente, pero cabe la posibilidad de agregarle otras para mejorar la experiencia al usarlo.

Por lo anterior se mencionan a continuación cuáles son esas partes primordiales de la aplicación sin importar el framework que se use:

 Router  Librería HTTP  Capa de interfaz de usuario  Administrador de estado  Lógica Para observar cómo estas interactúan entre sí de una forma más gráfica tenemos la siguiente imagen:

La aplicación se comunica con el backend a través de una librería HTTP, mientras que el usuario interactúa con la aplicación por medio de la capa de interfaz de usuario. La lógica es en donde permanece el código único de la aplicación dependiendo del framework que se use, sea Angular con sus servicios o React con sus componentes.

Router Este se encarga de manejar la navegación del usuario dentro de la aplicación. También pueden proveer parámetros en la url para determinar qué datos se van a mostrar según cambie la url, en React por ejemplo cada que la url cambia podemos renderizar un componente dependiendo de la misma.

Librería HTTP Es la encargada de realizar administrar las peticiones que se realizan al Backend con el fin de obtener datos o realizar ciertas acciones. Conforme la aplicación crece será necesario realizar múltiples peticiones por lo que es muy útil usar librerías HTTP como axios para facilitarnos el trabajo.

Capa de Interfaz de Usuario La capa de interfaz de usuario está casi que obligatoriamente atada al estado y la lógica, para entenderlo de una manera más clara se presenta la siguiente imagen en la cual se representa el flujo de un contador.

Todo lo que está en la interfaz de usuario es o realizar una interacción de doble vía con el usuario, ya que estas incluyen funcionalidades que son activadas por medio de la interacción con el usuario. Sea un clic, movimiento o desplazamiento con el ratón o presionar una tecla con el teclado. Ésta es usualmente la parte más grande de la aplicación y hay muchos frameworks o librerías que nos facilitan el trabajo en este sentido.

Administrador de estado Se encarga de administrar y gestionar todos los cambios en las características de algún elemento importante en nuestra interfaz de usuario. Si habláramos de un video este se encargaría de verificar si está en pausa o reproduciéndose, cual es el nivel de volumen, si está o no en modo pantalla completa, etc. Lógica Es todo aquello que hace única a nuestra aplicación, sea una calculadora, un chat o cualquier otra cosa. Es el puente entre el Frontend y el Backend.

8.3. PROTOTIPO

El prototipo del proyecto se encuentra en el siguiente enlace: https://awesome-pare- 6129b2.netlify.com/ Sus funcionalidades de WhatsApp y el formulario de contacto están funcionando correctamente. Se presentan a continuación capturas de las páginas y componentes de la aplicación.

Teniendo en cuenta que cada vez más personas se encuentran conectadas a través de sus dispositivos móviles presentaremos las vistas de la aplicación en modo móvil. Vistas Móviles Barra de navegación y menú de hamburguesa desplegado Este es uno de los componentes más importantes para facilitar la navegación del usuario en la aplicación.

Ilustración 1 - Menú de navegación

Secciones Página de Inicio Cada una de las secciones que se muestran a continuación son componentes separados que se unieron como piezas para generar la página de inicio o página principal.

Ilustración 2 - Sección principal Ilustración 3 - Sección principal (descripción)

Ilustración 4 - Sección Servicios 1 Ilustración 5 - Sección servicios 2

Ilustración 6 - Sección Testimonios Página Quienes Somos Una breve descripción sobre los aportes del negocio a la sociedad y hasta donde se quiere llegar en el futuro cercano.

Ilustración 7 - Página Quienes Somos

Página de Servicios Aquí tenemos dos componentes, el primero está compuesto de secciones que despliegan la descripción del grupo del servicio y la segunda una imagen con texto en frente en forma de cita.

Ilustración 8 - Página de Servicios

Página de Contacto En esta sección se realizó la integración con la plataforma Netlify en la que se encuentra alojada la aplicación para el manejo de los datos enviados a través del formulario de contacto.

Ilustración 3 - Página de Contacto 2

Ilustración 2 - Página de Contacto 1

9. CONCLUSIONES

De la realización del proyecto podemos concluir que es posible brindar una solución escalable a través de la tecnología en el ámbito de atención terapéutica a los pacientes. De tal forma que ellos reciban una atención eficaz y eficiente la cual no reciben en el sistema de salud regular.

El contenido y los resultados del proyecto pueden servir como base y motivación a aquellas personas apasionadas por la tecnología a crear soluciones que puedan contribuir al bienestar de las personas solucionando problemas que se presentan no solo en el sistema de salud sino en cualquier otra área.

10. RECOMENDACIONES

Lo mejor de trabajar con las tecnologías que hemos mencionado es que podemos escalar el proyecto tanto como queramos. En este caso usar APIs para pagos y agendamiento de citas para consultas más especializadas hasta llegar a usar herramientas que nos permitan realizar un análisis de datos de los pacientes e identificar su perfil psicológico. No hay límites en lo que podría terminar el proyecto realizado.

BIBLIOGRAFÍA

Abiztar. (s.f.). Uso de UML en aplicaciones Web: páginas y relaciones. Obtenido de Abiztar Learning Technologies: https://www.abiztar.com.mx/articulos/uso-de-uml-en-aplicacionesweb.html Botto, M. (10 de Junio de 2016). Blog: Front-end JavaScript single page application architecture. Obtenido de marcobotto: https://marcobotto.com/blog/frontend-javascript-single-pageapplication-architecture/ Felizzola, O. L. (20 de Febrero de 2000). La salud mental en Colombia. Obtenido de http://bdigital.unal.edu.co/22915/1/19605-64997-1-PB.pdf Institute, M. a. (2019). Money and Mental Health: The Facts. Obtenido de https://www.moneyandmentalhealth.org/wp-content/uploads/2019/03/debt-mentalhealth-facts-2019.pdf Morente, I. (20 de Julio de 2017). Guides and Tutorials: Netlify. Obtenido de Netlify: https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-areact-app/ Rascia, T. (20 de Agosto de 2018). Getting Started With React - An Overview and Walkthrough Tutorial: Tania Rascia. Obtenido de Tania Rascia: https://www.taniarascia.com/gettingstarted-with-react/ Sacha, R. M., & Greif, B. R. (1 de Julio de 2018). Front-end Frameworks: State of JS 2018. Obtenido de State of JS 2018: https://2018.stateofjs.com/front-end-frameworks/overview/ Salud, G. G. (1 de Julio de 2018). Boletín de salud mental: Oferta y Acceso a Servicios en Salud Mental en Colombia. Obtenido de Minsalud:

https://www.minsalud.gov.co/sites/rid/Lists/BibliotecaDigital/RIDE/VS/PP/ENT/Boletin-6salud-mental-2018.pdf Traversy, B. (29 de Septiembre de 2018). Deploy Websites in Seconds With Netlify. Obtenido de https://www.youtube.com/watch?v=bjVUqvcCnxM Traversy, B. (9 de Diciembre de 2018). What To Learn Before A JavaScript Framework. Obtenido de https://www.youtube.com/watch?v=qi9VQqYcXqY Traversy, B. (4 de Febrero de 2019). Simple Contact Form Submission With Netlify. Obtenido de https://www.youtube.com/watch?v=6ElQ689HRcY Valencia), E. d. (21 de Marzo de 2018). Problemas Psicológicos y nuevas tecnologías: Universidad Internacional de Valencia (VIU). Obtenido de Universidad Internacional de Valencia (VIU): https://www.universidadviu.com/problemas-psicologicos-nuevas-tecnologias/