tercer congreso internacional online de … · este estudio se desarrolla un prototipo de software,...

14
1 DESARROLLO DE UN PROTOTIPO, BASADO EN LA METODOLOGÍA PARA DEFINIR UN PROCESO DE INTEGRACIÓN ENTRE LOS MARCOS DE TRABAJO SCRUM, DJANGO REST FRAMEWORK Y VUE.JS, IMPLEMENTADO PARA EL DESARROLLO DE SOFTWARE, DESDE EL ENFOQUE DE AGILIDAD Y GESTIÓN DE LA CALIDAD Jesús Gabriel Arévalo Aguilar Luis Rafel Viecco Rivadeneira Universidad de La Guajira, Facultad de Ingenierías Laura de Jesús Arévalo Aguilar Universidad de La Guajira, Facultad de Ciencias de la Educación Resumen Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos de trabajo SCRUM (Platzi & Yesica, 2017), Django REST Framework (Django REST framweork, 2011) y Vue.js (You, 2014), implementado para el desarrollo de software, desde el enfoque de agilidad y gestión de la calidad. El uso de esta metodología soporta el proceso de desarrollo de software con mayor precisión porque permite, a través de la definición de tres fases, administrar y controlar cada actividad del proyecto; donde el estándar IEEE (G, 2008) se integra para definir las especificaciones requeridas, el uso del marco para el desarrollo reduce significativamente los tiempos del mismo y aplica metodologías para la agilidad del proyecto, pero aún no garantiza que el producto sea de calidad; para lo cual se complementan con las normas ISO (ISO - Organización Internacional de Normalización, 2019), que permiten evaluar el cumplimiento de los parámetros que son estables para medir la calidad del producto de software. De esta manera se implementa la guía definida para la aplicación de técnicas de programación desde el concepto de agilidad y gestión de la calidad. Abstrac This study develops a software prototype, based on the methodology to define an integration process between the SCRUM, Django REST framework and Vue.js frameworks, implemented for software development, from the agility and management approach of the quality. The use of this methodology supports the software development process with greater precision because it allows, through the definition of three phases, to manage and control each project activity; where the IEEE 830 standard is integrated to define the required specifications, the use of the framework for development significantly reduces its timeframes and applies methodologies for project agility, but does not yet guarantee that the product is of quality; for which they are complemented with the ISO 25000 standards, which allow to evaluate the compliance of the parameters that are stable to measure the quality of the software product. In this way, the defined guide for the application of programming techniques TERCER CONGRESO INTERNACIONAL ONLINE DE INVESTIGACIÓN E INNOVACIÓN EDUCATIVA

Upload: others

Post on 15-May-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

1

DESARROLLO DE UN PROTOTIPO, BASADO EN LA METODOLOGÍA PARA DEFINIR UN PROCESO DE INTEGRACIÓN ENTRE LOS MARCOS DE TRABAJO SCRUM, DJANGO REST FRAMEWORK Y VUE.JS, IMPLEMENTADO PARA EL DESARROLLO DE SOFTWARE, DESDE EL ENFOQUE DE AGILIDAD Y GESTIÓN DE LA CALIDAD Jesús Gabriel Arévalo Aguilar Luis Rafel Viecco Rivadeneira Universidad de La Guajira, Facultad de Ingenierías Laura de Jesús Arévalo Aguilar Universidad de La Guajira, Facultad de Ciencias de la Educación Resumen

Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos de trabajo SCRUM (Platzi & Yesica, 2017), Django REST Framework (Django REST framweork, 2011) y Vue.js (You, 2014), implementado para el desarrollo de software, desde el enfoque de agilidad y gestión de la calidad. El uso de esta metodología soporta el proceso de desarrollo de software con mayor precisión porque permite, a través de la definición de tres fases, administrar y controlar cada actividad del proyecto; donde el estándar IEEE (G, 2008) se integra para definir las especificaciones requeridas, el uso del marco para el desarrollo reduce significativamente los tiempos del mismo y aplica metodologías para la agilidad del proyecto, pero aún no garantiza que el producto sea de calidad; para lo cual se complementan con las normas ISO (ISO - Organización Internacional de Normalización, 2019), que permiten evaluar el cumplimiento de los parámetros que son estables para medir la calidad del producto de software. De esta manera se implementa la guía definida para la aplicación de técnicas de programación desde el concepto de agilidad y gestión de la calidad. Abstrac

This study develops a software prototype, based on the methodology to define an integration process between the SCRUM, Django REST framework and Vue.js frameworks, implemented for software development, from the agility and management approach of the quality. The use of this methodology supports the software development process with greater precision because it allows, through the definition of three phases, to manage and control each project activity; where the IEEE 830 standard is integrated to define the required specifications, the use of the framework for development significantly reduces its timeframes and applies methodologies for project agility, but does not yet guarantee that the product is of quality; for which they are complemented with the ISO 25000 standards, which allow to evaluate the compliance of the parameters that are stable to measure the quality of the software product. In this way, the defined guide for the application of programming techniques

TERCER CONGRESO INTERNACIONAL ONLINE DE INVESTIGACIÓN E INNOVACIÓN

EDUCATIVA

Page 2: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

2

from the concept of agility and quality management is implemented. 1 Introducción

Durante la ejecución de proyectos de desarrollo de software, se generan gran cantidad de requerimientos para definir las etapas del mismo, al transcurrir del tiempo, se han dispuesto guías que han aportado métodos pare el desarrollo de las etapas definidas en un proyecto, una de las metodologías utilizada con gran frecuencia a lo largo de la historia, fue la programación en cascada, en donde se definen una serie de etapas secuenciales en el siguiente orden i) planificación, ii) diseño, iii) implementación, iv) verificación, v) mantenimiento. Posteriormente, y con base a las necesidades de la industria del software, surgieron metodologías en pro de implementar enfoques de agilidad en el proceso de ejecución, como Programación Extrema o XP por su sigla en inglés de eXtreme Programming.

Desde entonces han surgido marcos de trabajos, que permiten definir la estructura para la ejecución de un proyecto como SCRUM, no obstante, otras metodologías se especializan por un lado en brindar un enfoque práctico para el desarrollo del código correspondiente del lado del servidor o bacKend como Djando REST framewrok, y por otro lado para el código del lado del cliente o frontend como Vue.js, separando la capa de presentación y la capa de acceso de datos, sirviendo de bases en investigaciones en donde se definen la integración de estos componentes, aplicando el enfoque de agilidad y gestión de la calidad.

A partir del uso de la metodología para definir un proceso de integración entre los marcos de trabajo Scrum, Django REST Framework y Vue.js, implementado para el desarrollo de software, desde el enfoque de agilidad y gestión de la calidad (Arevalo Aguilar, Viecco Rivadeneira, & Arevalo Aguilar, 2019), en este estudio en particular, se desarrolla un prototipo de software, documentando la trazabilidad del proceso metodológico, en cada una de las etapas de la arquitectura de software. El desarrollo de este estudio, se presenta de la siguiente manera: i) Metodología de referencia, ii) Desarrollo un prototipo de software, iii) Resultados y discusión, y iv) Conclusiones. 2 Metodología de referencia

En la actualizada gran parte de la ejecución de un proyecto de desarrollo de software, se apoya en marcos de trabajo o framewok (palabra traducida en inglés), debido al dinamismo que estos marcos aporta en el proceso de elaboración de un software, permitiendo definir una estructura de desarrollo y replicarla las veces que sea necesaria para disminuir los tiempo en el que escribe el código, independientemente si el desarrollo es del lado del servidor (backend) o del lado del cliente (frontend), existen varias de marcos especializados para cada etapa de la arquitectura de software. El prototipo de software desarrollado en este estudio, se fundamenta en un proceso metodológico en donde se integran componente de diferentes marcos de trabajo para el desarrollo de software, a nivel de backend, frontend y estructuración de las actividades a ejecutar. Incluyendo normas/estándares que al igual que los marcos de referencia apoyan el proceso, permitiendo brindar un enfoque de agilidad y gestión de la calidad.

La metodología para definir un proceso de integración entre los marcos de trabajo Scrum, Django REST Framework y Vue.js, implementado para el desarrollo de software, desde el enfoque de agilidad y gestión de la calidad; es referente para este artículo, y se desarrolló a partir del análisis de las características particulares de cada marco de trabajo, analizando la trazabilidad en cada una de las capas de la arquitectura, asimismo se seleccionaron estándares para especificar los requerimientos y evaluar la calidad del software. Además se encuentran inmerso la descripción de cada paso de las fases metodológicas y la siguiente representación gráfica.

Page 3: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

3

Ilustración 1 – Mapa de proceso integrado

En la Ilustración 1 – Mapa de proceso integrado, se define gráficamente la metodología, donde se puede

observar que el modelo integrado se centra en la unificación de las fases de planeación (planning), desarrollo (development) y entrega (delivery), agrupados en una interacción (iteration). Es importante resaltar que para la ejecución de un proyecto se pueden desarrollar varias iteraciones.

En la fase de planeación el(los) Stakeholder especificación de los requisitos al Product Owner, consiguientemente, en el Product Backlog, se establece y se comunica al Scrum Master los requisitos priorizados. Por su parte, el Team Scrum y el Scrum Master son responsables de la planificación de cada sprint, en donde se apoyan al estándar IEE830 para definir las especificaciones de los requisitos de software, obteniendo como resultado de esta actividad el Sprint Backlog, donde se define la visión general de la perspectiva del producto, las restricciones que se imponen al desarrollo, los requisitos específicos a nivel de funcionalidades, diseño y rendimiento, y también los criterios de aceptación del producto. El uso del estándar IEEE 830, se establece i) Resumen del modelo y ii) Requisitos.

En esta fase de desarrollo, se ejecutan cada una de las actividades que se planificaron para cada Sprint, responsabilidad directa del Team Scrum, donde los entregables se desarrollan de forma incremental en cada Sprint. Para lo cual es necesario que en el lado del backend implemente Django rest framework, y sus tres componentes fundamentales correspondientes a: i) Los enrutadores, ii) Las vistas, y iii) Los serializadores. En el contenido metodológico, se encuentran inmersos los pasos para la instalación de Python, Django Rest Framework, entre otros componentes como el virtualenv, el manejador de dependencias pip, la conexión con base de datos, la creación de un proyecto y de las aplicaciones.

Para el desarrollo de la interfaz, se requiere el uso de vue.js, implementando el npm su administrador de dependencias, Vue CLI que permite la creación de interfaces de usuario integrando componentes de HTML, CSS y JavaScript, además de crear y compartir soluciones reutilizables para necesidades comunes. Estas interfaces consumirán los datos procesados de la API construida con Django rest framework, para lo cual es necesario usar Axios, que es un cliente, también se comunica con las funciones del servidor para ejecutar las acciones principales de CRUD – sigla en inglés de Create, Read, Update y Delecte, correspondiente a Crear, Leer, Actualizar y Eliminar. Asimismo se llevan a cabo reuniones diarias o Standup de 15 minutos para discutir el progreso y los inconvenientes que surgen.

Al final de cada Sprint, comienza la aplicación de las pruebas de calidad del producto, apoyado en la norma ISO 25000, donde se evalúan los requisitos de calidad, para la verificación y la entrega incremental del producto al Product Owner y en los casos en que se requieren partes interesadas relevantes. Durante esta fase, al final de cada Sprint, también se verifican los requisitos funcionales, el diseño, el rendimiento y los criterios de aceptación del producto, además del progreso y el ritmo de entrega, se monitorean las funcionalidades probadas y la retrospectiva del proceso. Y la forma en que trabaja el equipo, incluidas técnicas, prácticas y herramientas de desarrollo.

Page 4: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

4

3 Desarrollo de un prototipo de software

Los Sistemas de Información Hospitalaria o HIS, son sistemas que apoyan la gestión administrativa, asistencial y financiera de una institución que presta los servicios de salud o IPS. Los HIS contemplan los módulos para las secciones financieras, agenda médica, recepción, configuraciones, atención, laboratorio, entre otros. En este artículo, con el fin de desarrollar un prototipo de software, nos apoyaremos en HIS Medical (Software-IPS), que es un software orientad a la web, desarrollado con herramientas y lenguaje de programación libres. Mediante esta herramienta se administración los datos que se generan por un lado en la prestación de servicios de asistenciales de las IPS y por otro lado, los datos de la parte administrativas de estas instituciones.

HIS Medical, cuenta certificado de registro de soporte lógico No. 13-53-105 (libro-toma-partida) del 26 de abril de 2016, emitido por la oficina de registro, de la unidad administrativa especial de la dirección nacional de derecho de autor adscrita al Ministerio del Interior de Colombia y se encuentra implementado en varias IPS del departamento de La Guajira. El prototipo desarrollado en este estudio se apoyó en el módulo de captura de datos de pacientes de HIS Medical, y se desarrolló en una iteración de las fases de planeación, desarrollo y entrega, con el fin de validar la trazabilidad entre las mismas. 3.1 Fase de planeación. 3.1.1 Resumen del modelo

• Funcionalidades: Permitir el ingreso de los datos de un paciente para la atención médica. • Características del usuario: el usuario debe contar con permiso para agregar, actualizar, visualizar los

datos de los pacientes. Debe contar con experiencia en manejo de herramientas office, especialmente en Excel y tener conocimientos básicos acerca del uso de los.

3.1.2 Requisitos

• Requisitos de interfaz externa: es necesario validad los datos del paciente con la base de datos que entregan cada mes las empresas promotoras de salud o EPS, a las IPS para la atención de los usuarios, en algunos casos esta validación se puede hacer de manera interna previo cargue de la actualización de la base de datos en el HIS. Tabla 1- Requerimientos funcionales

• Requerimientos funcionales:

Identificador : FN-01

Descripción : En esta sección el modulo debe permitir el ingreso de los pacientes, la visualización y actualización de los mismos.

Datos

Entrada : Datos personales del paciente

Proceso : Validar datos del paciente con los de la EPS

Salida : Información del paciente

Condiciones Iniciales : Verificar el estado de afiliación del paciente

Finales : Verificar el ingreso exitoso de los datos del paciente

Tabla 2 - Requerimientos de diseño

• Requerimientos de diseño:

Requisito Descripción

DI-01 Formulario con todos los datos, personales, de ubicacion y de afiliacion de la EPS del paciente

DI-02 Formulario con diseño facil, que permita ingresar e intuir el diligenciamientio de los datos

Page 5: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

5

3.2 Fase de desarrollo 3.2.1 Configuración de Python, virtualenv, pip y Django, creación del proyecto de software, módulo de datos

del paciente y conexión con la base de datos (Backend)

Ilustración 2 – Configuración de Python Verificar si Python está instalado, o descargar la última versión e instalar, en este desarrollo se utilizó la versión 3.7.3 cómo se observa en la siguiente imagen.

Ilustración 3 – Comando de instalación del entorno virtual Instalar el entorno virtual desde CDM, como se observa a continuación

Ilustración 4 – Comando de instalación de pip Instalar pip, el manejador de dependencias de python.

Ilustración 5 - comando de instalación de Django Instalar el marco de trabajo de Django.

Una vez finalizadas las instalaciones indicadas, se debe activar el entorno virtual, para lo cual se debe localizar el archivo activate.bat y ejecutarlo. Ya se encuentran las herramientas para el desarrollo de software del lado de servidor o backend. Posterior a las configuraciones anteriores, se debe crear un proyecto, el cual va a ir ganando valor en cada entrega planificada por Sprint; asimismo; se debe de crear cada app (modulo) en el proyecto, configurar la conexión con la base de datos, realizar configuraciones generales, definir y migrar los modelos, finalmente se instala la librería djangorestframework para poder disponer de una api en el banckend que permita administrar los datos de cada paciente para la atención médica.

Para la creación de un proyecto, desde la consola de comando se deben de ubicar en el directorio donde se configuro previamente el entorno de trabajo de Python, activar el entorno virtual el cual se ha denominado para el prototipo HISJA, que estará al inicio de cada línea de instrucción de la consola entre paréntesis indicado que se está trabajando en el entono indicado, una vez verificado, se debe ejecutar los comandos de la siguiente ilustración, en este caso como nombre del proyecto se indicara his_medical Ilustración 6 – Creación del proyecto de software

Al finalizar las instrucciones, aparecerá el nuevo directorio his_medical, en el cual se debe acceder y crear la app de pacientes en donde se va a configurar el modelo de datos para luego migrarlos al motor de base de datos correspondientes. Ilustración 7 - Creación de un app en python

La ejecución de la línea anterior, generará los archivos .py indicando que son archivos de pyhton y pueden ser editados con cualquier editor de texto, y el directorio de migrations en donde se estarán guardando todas las migraciones de esa app en específico.

Page 6: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

6

Ilustración 8 – Estructura de directorios de la app pacientes

Para la definición del modelo de datos de la app para administrar los datos del paciente, se debe editar el archivo models.py y definir cada campo del esquema y el tipo de datos según las convenciones del lenguaje de programación, esto permitirá migrar a diversos motores de base de datos el mismo esquema, cuando a ello haya lugar. En la siguiente ilustración, se encuentra la definición del esquema, teniendo en cuenta la estructura de datos para python. Ilustración 9 – Definición del modelo de datos para pacientes

Antes de realizar la migración de debe de instalar el conector de MySQL para python y realizar la configuración necesaria en el archivo de settings.py ubicado en el directorio de la raíz, que tiene el mismo nombre del proyecto. Para la intalacion de conector de la base de datos, indique en la consola de comando la línea de la siguiente ilustración.

Ilustración 10 - Comando para intalar extencion para MySQL de python

A finalizar la instalación, se debe abrir settings.py para configurar la estructura de la conexión de la base de datos e indicar el nombre de la base de datos, que debe crearse previamente desde el administrador de base de dato, asimismo disponer del usuario y contraseña para acceder, en la siguiente ilustración se muestra la estructura dispuesta para el prototipo.

Page 7: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

7

Ilustración 11 – Configuración de la conexión de base de datos

Otra de las configuraciones corresponde a indicar que la nueva aplicación existe, para ello en el mismo archivo settings.py se indica en el apartado de definición de aplicaciones la nueva app como se observa en la siguiente ilustración. Ilustración 12 – Definición de aplicaciones

Primero se debe consultar con la siguiente línea de código si existen nuevas migraciones Ilustración 13 – Consultar si existen migraciones nuevas

Posteriormente se realiza la migración del esquema a la base de datos previamente creada desde el administrador, indicando la instrucción de la siguiente línea en consola.

Ilustración 14 – Migrar esquemas de datos

En la base de datos, además de crearse el modelo definido en el esquema, se crearan de manera automática las tablas de por defecto de python para la configuración de credenciales de acceso, como se observa en la siguiente ilustración. Ilustración 15 – Tablas de la base de datos

Para disponer de este modelo a través de la API, se debe instalar la extensión de djago rest, como se indica en la siguiente sentencia.

Page 8: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

8

Ilustración 16 – Instalación de django REST framework

Luego, en el archivo de settings.py agregar la nueva app instalada, la estructura se modifica nuevamente y queda como se muestra en la siguiente ilustración. Ilustración 17 – Actualización de settings.py

Para finalizar las configuración de la API, se crear los tres archivos i) serializer.py (“permite transportar modelo a través de http”); ii) viewsets.py (“Permite realizar las acciones del CRUD sobre un objeto”) y iii) urls.py (“permite definir las rutas para el modelo, para generar REST FULL API”), en las siguientes ilustraciones se presenta gráficamente el contenido de los archivos para el modelo de datos de los pacientes. Ilustración 18 – Archivo serializer.py

Ilustración 19 – Archivo viewsets.py

Ilustración 20 – Archivo urls.py de la aplicación

Finalmente se debe configurar en la acera del proyecto el archivo urls.py en donde se debe configurar la url para el acceso a la API, como se muestra en la siguiente ilustración.

Ilustración 21 – Archivo urls.py del proyecto

Page 9: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

9

Una vez finalizado todas las configuraciones hasta este punto, se puede correr el servidor de python, con los comandos indicados en la siguiente ilustración, y consular la API a través de url: http://127.0.0.1:8000/api/v1.0/patients/?format=api. Ilustración 22 - comando para correr el servidor de python

Ilustración 23 – Vista en el navegado de la api con registro de prueba para paciente

3.2.2 Configuración del Frontend con Vue.js e integración con el Backend

Para iniciar la configuración del desarrollo del lado del cliente, se debe instalar npm, comando que se utilizara para instalar otras dependencias de vue.js, npm está incluido en el paquete de nodejs, por lo que se recomienda instalar todo el paquete y se descarga desde la web a través de https://nodejs.org/en/. Una vez instalado el paquete de nodejs, se debe verificar la versión de npm como se muestra en la siguiente ilustración, y en la parte inferior a la línea de comando mostrara la versión instalada. Ilustración 24 – Consultar versión de npm

En este punto se requiere por un lado activar el entrorno virtaul de python y por otro instalar la herrameinta vue cli, se puede descargar desde un navegador web a través de https://cli.vuejs.org/guide/installation.html o digitando la línea de comando que se muestra a continuación. Ilustración 25 – Comando para instalar vue cli

Ilustración 26 – Comando para instalar globalmente vue cli

Al instalar vue cli, se debe de especificar el nombre del proyecto, una breve descripción, el autor, entre otros aspectos y esperar a que se instalen las dependencias. Una vez se finalice el proceso de instalación se puede correr el servidor con los comandos indicados en la siguientes imagen y consultar la a través del navegador

Page 10: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

10

http://127.0.0.1:8080/. Ilustración 27 – Comando para correr el servidor de vue

Ilustración 28 - vista del lado del cliente con vue.js

Para diseñar una vista agradable al usuario que permita administrar los datos de los pacientes, nos apoyamos en boostrap-vue, se instala como se muestra en la ilustración a continuación, asimismo, se den realizar las configuración en el archivo main.js para importar la extensión. Ilustración 29 – Comando para instalar boostrap web

Ilustración 30 – Configuraciones en el archivo main.js para importar bootstrap-vue

En este punto se deben de crear los componentes, corresponden a las características más poderosas de Vue, debido a que permiten extender elementos HTML básicos para encapsular código reutilizable. Para el prototipo se desarrollara el componente que permite listar los registros a partir del consumo del api de los pacientes y se denominará ListPatients. Es importante tener en cuenta que los componentes pueden personalizarse dependiendo de la necesidad del proyecto. Se debe crear un nuevo directorio donde se desarrollaran los componentes para los pacientes denominado Patients. Ilustración 31 – Importar componte ListPatients en main.js

Page 11: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

11

Ilustración 32 – Configuración del export default de main.js

Posterior a la configuración del archivo main.js, se debe crear el componente ListPatients.vue en el directorio ListPatients, a continuación se presenta el modelo del prototipo de estudio. Ilustración 33 – Template del componente de ListPatients.vue

Hasta este punto, se no se están consumiendo los datos de la api configurada en el ítem anterior, para ello, se requiere instalar la extensión de axios, que sería el cliente HTTP, el cual puede ser utilizado para las solicitudes REST y realizar las acciones principales del CRUD. La instalación de axios es muy sencilla, se debe instalar del lado del frontend con la instrucción que se muestra a continuación. Ilustración 34 – Instalar el cliente http axios

Es necesario instalar del lado de backend django-cors-headers, los CORS es una aplicación para agregar intercambio de recursos a través de los encabezados, permitiendo solicitudes al api de Django desde otros orígenes. Para la instalación se debe de escribir del lado del backned la siguiente instrucción. Ilustración 35 – Instalación de django-cors-headers

Una vez instalado django-cors-headers se debe configurar los middleware en el archivo settings.py, agregando la línea 'corsheaders.middleware.CorsMiddleware', como se observa en la siguiente imagen.

Page 12: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

12

Ilustración 36 – Configuración de middleware en setting.py

Para finalizar la configuración en settings.py, también de deben agregar las líneas que se observan en la siguiente imagen para indicar la url por la cual se van a consumir los datos de la api. Ilustración 37 – Especificación de url en settings.py para consumo de la api

En el componente de ListPatients.vue, se debe configurar el código script para consumir los datos del api donde están los datos de los pacientes. En la siguiente imagen se indican los campos más representativos del esquema de datos, para que se pueda analizar la estructura del código de manera sencilla. Ilustración 38 – Script del componente de ListPatients.vue

Finalmente al ejecutar el servidor de frontend, y dirigirse a la url http://127.0.0.1:8080/Patients#/ se observara el componente de pacientes con los datos representativos seleccionados y el diseño de las acciones principales para la ejecución del CRUD.

Page 13: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

13

Ilustración 39 – Vista web del componente ListPatients.vue

3.3 Entrega

Una vez finalizado el sprint, se realizan las pruebas para validar la calidad del producto, evaluando los requerimientos basado en la norma ISO 25000, y haciendo entrega incremental del producto al Product Owner. Es importante resaltar que el esquema de datos implementado, se basó en los requisitos de desarrollo de un Sistema tipo HIS, que cuenta con registro de oficina de registro, de la unidad administrativa especial de la dirección nacional de derecho de autor, adscrita al Ministerio del Interior de Colombia y se encuentra implementado en varias IPS del departamento de La Guajira, por lo que ya se han validado el cumplimiento de requisitos funcionados, de diseño, de rendimiento y los criterios de aceptación del producto. Sin embargo, con el fin de finalizar la trazabilidad del proceso de integración de la metodología para definir un proceso de integración entre los marcos de trabajo Scrum, Django REST Framework y Vue.js, implementado para el desarrollo de software, desde el enfoque de agilidad y gestión de la calidad, en la tabla a continuación, se muestran los parámetros seleccionados de la división de medición de calidad corresponde a ISO / IEC 2502n. Tabla 3 – Divisiones de las normas ISO 25000

Items Division ISO / IEC Description

1 25022 Medición de la calidad en uso: La definicion del

2 25023 Medición de la calidad del producto de sistema y software:

3 25024 Medición de la calidad de los datos:

4 Resultados y discusión

El desarrollo del prototipo basado en la metodología para definir un proceso de integración entre los marcos de trabajo SCRUM, Django REST Framework y Vue.js, implementado para el desarrollo de software, desde el enfoque de agilidad y gestión de la calidad, permitió hacer uso de las fases, para administrar y controlar cada actividad para el desarrollo del prototipo para administrar los datos de los pacientes del HIS para recibir atención médica. Se obtuvo como resultado el prototipo referenciado, documentando la trazabilidad del proceso metodológico, en cada una de las etapas de la arquitectura de software. 5 Conclusiones

En este estudio, se desarrolla un prototipo de manera efectiva, en base a la metodología para definir un proceso de integración entre los marcos implementados para el desarrollo de software, desde el enfoque de gestión de agilidad y calidad. Partiendo desde el mapa de proceso, en donde se definen cada una de las fases dentro de la arquitectura de software y se especifican los componentes necesarios para desarrollar cada actividad previamente planificada y se documenta el proceso que conduce al resultado de la integración de los frameworks SCRUM, Django REST framework y Vue.js. La implementación metodológica, permite reducir significativamente la planificación, desarrollo y entrega de software, debido a que se proporcionan cada

Page 14: TERCER CONGRESO INTERNACIONAL ONLINE DE … · Este estudio se desarrolla un prototipo de software, basado en la metodología para definir un proceso de integración entre los marcos

14

componente por iteración, dándole valor agregado al producto final en cada entrega integrando el enfoque ágil y manteniendo la gestión de calidad el producto final. Referencias Arevalo Aguilar, J. G., Viecco Rivadeneira, L. R., & Arevalo Aguilar, L. D. (2019). Methodology to define an

integration process between frameworks SCRUM, Django REST framework y Vue.js, implemented for software development, from quality management approach and agility.

Chavez. (2007). Metodologia de La Investigacion. Django REST framweork. (2011). Obtenido de https://www.django-rest-framework.org/ G, M. (2008). Especificación de Requisitos según el estándar de IEEE 830. International Organization for Standardization. (2011, 10 31). IEEE 42010-2011 - ISO/IEC/IEEE Systems and

software engineering -- Architecture description. Retrieved 06 2019, 12, from https://www.iso.org/standard/50508.html

ISO - Organización Internacional de Normalización. (2019). Portal ISO/IEC 25000. Obtenido de https://iso25000.com/index.php/normas-iso-25000

Mendez, G. (22 de Octubre de 2008). Especificacion de Requisitos segun el estandar IEEE 830. Obtenido de https://www.fdi.ucm.es/profesor/gmendez/docs/is0809/ieee830.pdf

Platzi, & Y. L. (2017). Qué es SCRUM y los roles en SCRUM. Obtenido de https://platzi.com/blog/que-es-scrum-y-los-roles-en-scrum/?utm_source=google&utm_medium=paid&utm_campaign=intention&utm_content=&adgroup=71299386940&gclid=EAIaIQobChMI8IGTt_OP4wIVx4SzCh0H3giVEAAYAiAAEgIZefD_BwE

Vivas, L., Cambarieri, M., Garcia Martinez, N., Petroff, M., & Muñoz Abbate, H. (2014). Un Marco de Trabajo para la Integración de Arquitecturas de Software con Metodologías Ágiles de Desarrollo. ResearchGate, 1288-1297.

You, E. (Febrero de 2014). VUE.JS The Progressive JavaScript Framework. Obtenido de https://vuejs.org/ Agradecimientos Los autores agradecen la ayuda de colegas del grupo de investigación ENAPROT, la facultad de ingeniería y el Centro de investigación de la Universidad de La Guajira, y a los organizadores del Congreso Internacional de Investigación e Innovación Educativa (CIIIE).