Post on 12-Jan-2022
1
DESARROLLO DE UNA PROGRESSIVE WEB APP (PWA) PARA GESTIONAR
PLATAFORMAS TECNOLÓGICAS MODELADAS CON BPM
FRANCISCO JAVIER IBÁÑEZ PINEDA
UNIVERSIDAD CATÓLICA DE PEREIRA
FACULTAD DE CIENCIAS BÁSICAS E INGENIERÍA
PROGRAMA DE INGENIERÍA DE SISTEMAS Y TELECOMUNICACIONES
PEREIRA
2019
2
DESARROLLO DE UNA PROGRESSIVE WEB APP (PWA) PARA GESTIONAR
PLATAFORMAS TECNOLÓGICAS MODELADAS CON BPM
DIRECTOR DE PROYECTO DE GRADO:
DANIEL FELIPE BLANDÓN GÓMEZ
INGENIERO DE SISTEMAS Y TELECOMUNICACIONES
UNIVERSIDAD CATÓLICA DE PEREIRA
FACULTAD DE CIENCIAS BÁSICAS E INGENIERÍA
PROGRAMA DE INGENIERÍA DE SISTEMAS Y TELECOMUNICACIONES
PEREIRA
2019
3
DEDICATORIA
Dedicado a mis padres, dos personas que me han brindado todas las herramientas para forjar
mi vida con base en valores y principios, que me han dado su apoyo incondicional en cada
etapa y que con su amor y consejo constante me han guiado a lo largo de este camino.
Francisco Javier.
4
AGRADECIMIENTOS
Agradezco primero que todo a Dios por permitirme vivir esta experiencia con altos y bajos
en el camino, a mis padres por su apoyo y tenacidad a lo largo de mi vida, a mi familia por
la confianza y apoyo constante.
Agradezco a la Universidad Católica de Pereira por brindarme una formación académica
integral y fortalecer mis valores personales y profesionales.
Igualmente quiero agradecer al director de este proyecto y al grupo de profesores de la
facultad de ciencias básicas e ingeniería por su profesionalismo, vocación y disponibilidad
para formar excelentes profesionales.
Finalmente agradezco a todas las personas que de una u otra forma hicieron parte de este
proceso.
Francisco Javier Ibáñez Pineda.
5
RESUMEN
El objetivo de este Proyecto de Grado es el desarrollo de una Aplicación Web Progresiva
(PWA por sus siglas en inglés) en la cual se puede realizar la gestión y documentación de
plataformas tecnológicas modelas con BPM (Business Process Management). El modelo de
la aplicación cumple con los requisitos del modelo de negocio que tuvieron origen durante la
práctica académica del autor en el WORLD BASC ORGANIZATION sede Miami, y que
posteriormente quedara como propuesta para este trabajo.
Su objetivo principal está orientado a mejorar los procesos de gestión y documentación de
las áreas de TI en una organización a través de una aplicación; por tanto, el desarrollo
metodológico se basó principalmente en el método descriptivo, esquema utilizado para
recopilar datos y capturar los requisitos de la empresa en cuestión.
El análisis de los procesos de la aplicación se hizo con BPM, y el diseño de la ejecución a
través de mockups; lo anterior, bajo el enfoque de desarrollo iterativo centrado en el modelo,
propuesto en 2010 por ingenieros de IBM.
La solución escogida consiste en utilizar React y Material UI para el front-end. El back-end,
se trabajó con React, Node.js local y Firebase que proporciona una base de datos NoSql.
Firebase es un componente de Google Cloud Platform que ofrece soluciones para el
despliegue de aplicaciones bajo la tecnología Serverless en diferentes lenguajes de
programación, a través del proceso de transpilación.
El resultado del proyecto de grado es una PWA que permite agregar un modelo de 3 capas
de BPM: Procesos del negocio, Sistemas de Información e Infraestructura tecnológica.
También, las relaciones entre capas a fin de conocer la dependencia entre ellas y
principalmente que procesos de la organización se afectan si llega a ocurrir algún fallo, ya
sea de sistemas de información o infraestructura.
Palabras clave: BPM, Aplicación Web Progresiva, Javascript, React, Microservicios,
Firebase, SOA, Node.Js, Computación en la nube, Serverless.
6
ABSTRACT
The objective of this Degree Project is the development of a Progressive Web Application
(PWA) in which the management and documentation of model technology platforms with
BPM (Business Process Management) can be carried out. The application model complies
with the requirements of the business model that originated during the author's academic
practice at the WORLD BASC ORGANIZATION headquarters in Miami, and which will
subsequently remain as a proposal for this work.
Its main objective is aimed at improving the management and documentation processes of IT
areas in an organization through an application; Therefore, the methodological development
was based mainly on the descriptive method, scheme used to collect data and capture the
requirements of the company in question.
The analysis of the application processes was done with BPM, and the design of the execution
through mockups; The above, under the model-centered iterative development approach,
proposed in 2010 by IBM engineers.
The solution chosen is to use React and Material UI for the front-end. The back-end, worked
with React, local Node.js and Firebase that provides a NoSql database. Firebase is a
component of Google Cloud Platform that offers solutions for deploying applications under
Serverless technology in different programming languages, through the transpilation process.
The result of the degree project is a PWA that allows adding a 3-layer BPM model: Business
processes, Information Systems and Technological Infrastructure. Also, the relationships
between layers in order to know the dependence between them and mainly what processes
of the organization are affected if a failure occurs, whether of information systems or
infrastructure.
Keywords: BPM, Progressive Web Application, Javascript, React, Microservices, Firebase,
SOA, Node.Js, Cloud Computing, Serverless.
7
INTRODUCCIÓN
El modelado de procesos de negocio que se implementa en las organizaciones para tener
entendimiento de los procesos de manera gráfica es una metodología que describe claramente
el estándar BPM (Business Process Management). En general, las metodologías que utilizan
modelos gráficos para representar: diseños, procesos, casos de uso, actividades, diagramas
etc., se han convertido en herramientas valiosas para ordenar y dar un enfoque más sistémico
y estandarizado a la documentación de procesos y sistemas de información en las
organizaciones.
BPM por ejemplo, soporta tres niveles de modelado de procesos: mapas de procesos,
descripciones de procesos y modelado de procesos. Sobre estos aspectos se profundizará en
el desarrollo de este trabajo.
Según Gartner, la “Arquitectura Empresarial es un proceso de planeación estratégica que
transforma la visión empresarial de negocio y la estrategia en un cambio empresarial
efectivo”, conociendo cómo la tecnología ha venido siendo fundamental para el desarrollo de
las organizaciones; se plantea la propuesta de desarrollar una aplicación que permita
modelar la Plataforma tecnológica (Hardware y Software) de una empresa en la que se
integren:
• La arquitectura del Negocio (Organización, recursos, procesos).
• La arquitectura de Sistemas de Información (Información, aplicaciones y datos).
• La arquitectura tecnológica (Telecomunicaciones, redes, plataformas).
• La relación entre ellas para conocer cómo interactúan y se integran.
En este trabajo se logra abordar esta necesidad para las organizaciones. En primer lugar se
identifica el problema referente a la construcción del prototipo, el objetivo general y objetivos
específicos, la justificación del proyecto, el alcance, las delimitaciones y el marco
metodológico.
En un segundo momento se mencionan los conceptos teóricos de las tecnologías implicadas
para el desarrollo del prototipo. Conceptos que van desde la aplicación de modelos con base
en los requisitos del negocio (BPM), hasta la utilización de microservicios.
En los temas posteriores se describe la realización de la PWA, utilizando el enfoque centrado
en el modelo en el cual se realiza un análisis, modelado y diseño de la aplicación para luego
llevarlo a una fase de implementación.
Finalmente, se presentan las conclusiones y recomendaciones que pueden enriquecer más la
aplicación.
8
CONTENIDO
DEDICATORIA ..................................................................................................................... 3
AGRADECIMIENTOS .......................................................................................................... 4
RESUMEN ............................................................................................................................. 5
ABSTRACT ........................................................................................................................... 6
INTRODUCCIÓN .................................................................................................................. 7
CONTENIDO ......................................................................................................................... 8
INDICE DE ILUSTRACIONES .......................................................................................... 11
INDICE DE TABLAS .......................................................................................................... 13
1. PLANTEAMIENTO DEL PROYECTO ...................................................................... 14
1.1. NOMBRE DEL PROYECTO ............................................................................... 14
1.2. PLANTEAMIENTO DEL PROBLEMA .............................................................. 14
1.3. IDENTIFICACIÓN DEL PROBLEMA ................................................................ 14
1.4. OBJETIVOS .......................................................................................................... 15
1.4.1. OBJETIVO GENERAL ................................................................................. 15
1.4.2. OBJETIVOS ESPECÍFICOS ......................................................................... 15
1.5. JUSTIFICACIÓN .................................................................................................. 15
1.6. ALCANCE Y DELIMITACIÓN DEL PROYECTO ............................................ 16
1.6.1. ALCANCE ..................................................................................................... 16
1.6.2. DELIMITACIÓN ........................................................................................... 17
1.7. MARCO METODOLÓGICO ................................................................................ 17
1.7.1. METODOLOGÍA DEL PROYECTO ............................................................ 17
1.7.2. METODOLOGÍA DE DESARROLLO DE LA APLICACIÓN ................... 17
2. MARCO TEÓRICO ...................................................................................................... 19
2.1. ANTECEDENTES ................................................................................................ 19
2.1.1. AURA PORTAL ............................................................................................ 19
2.1.2. WORKFLOWGEN ........................................................................................ 20
2.1.3. BIZAGI ........................................................................................................... 20
2.1.4. NAGIOS ......................................................................................................... 21
9
2.1.5. PANDORAFMS ............................................................................................. 21
2.2. METODOLOGÍAS ................................................................................................ 22
2.2.1. MÉTODO DESCRIPTIVO ............................................................................ 22
2.2.2. DESARROLLO ITERATIVO EN SOLUCIONES DE GESTIÓN DE
PROCESOS DE NEGOCIOS ....................................................................................... 23
2.2.3. OPCIONES DE DESARROLLO ITERATIVO ............................................ 23
2.2.4. ARQUITECTURA ORIENTADA A SERVICIOS (SOA)........................... 26
2.3. CONCEPTOS TEÓRICOS .................................................................................... 26
2.3.1. BPM (BUSINESS PROCESS MANAGEMENT) ......................................... 26
2.3.2. PWA (PROGRESSIVE WEB APP) .............................................................. 27
2.3.3. MICROSERVICES ........................................................................................ 28
2.3.4. TRANSPILAR ............................................................................................... 28
2.4. TECNOLOGÍAS ................................................................................................... 29
2.4.1. CLOUD COMPUTING .................................................................................. 29
2.4.2. GOOGLE CLOUD PLATFORM ................................................................... 29
2.4.3. SERVERLESS (SIN SERVIDOR) ................................................................ 30
2.5. LENGUAJES DE PROGRAMACIÓN ................................................................. 31
2.5.1. JAVASCRIPT ................................................................................................ 31
2.5.2. REACT ........................................................................................................... 31
2.6. ENTORNOS DE EJECUCIÓN ............................................................................. 33
2.6.1. NODE JS ........................................................................................................ 33
2.6.2. FIREBASE ..................................................................................................... 34
3. FASE DE MODELO (ANÁLISIS Y MODELADO) ................................................... 36
3.1. HITOS DE LA FASE DE MODELO .................................................................... 36
3.2. DESCRIPCIÓN DE LA SOLUCIÓN ................................................................... 36
3.3. DIAGRAMA BPMN DE LOS PROCESOS DE LA APLICACIÓN ................... 38
3.4. MODELO BPMN DE LA APLICACIÓN ............................................................ 40
4. FASE DE IMPLEMENTACIÓN .................................................................................. 41
4.1. HITOS DEL PROYECTO PWA ........................................................................... 41
4.2. REQUERIMIENTOS FUNCIONALES DE LA PWA ......................................... 41
4.3. REQUERIMIENTOS NO FUNCIONALES DE LA PWA .................................. 42
10
4.4. DIAGRAMAS DE SECUENCIA REQUERIMIENTOS FUNCIONALES ......... 42
R1 Validar el ingreso a la aplicación con credenciales de acceso.(ilustración 16) ....... 43
R2. Permitir gestionar registros de procesos del negocio. ............................................ 44
R3 Permitir realizar el registro de sistemas de información ......................................... 45
R 4 Permitir gestionar registros de infraestructura tecnológica .................................... 46
R5 Permitir gestionar relaciones entre procesos, sistemas de información e
infraestructura................................................................................................................ 47
R6 Mostrar las relaciones registradas............................................................................ 49
R7 Permitir al usuario cerrar sesión .............................................................................. 49
4.5. CASOS DE USO DEL SISTEMA ........................................................................ 50
4.6. DEFINICIÓN DE LA ARQUITECTURA ............................................................ 51
4.7. DISEÑO DE LA APLICACIÓN (MOCKUPS) .................................................... 52
4.8. DISEÑO DE LA BASE DE DATOS NOSQL ...................................................... 59
4.9. DESPLIEGUE DEL SERVIDOR (SERVERLESS) ............................................. 60
4.9.1. FIREBASE HOSTING ................................................................................... 60
4.9.2. FIREBASE DATABASE ............................................................................... 61
4.9.3. FIREBASE AUTHENTICATION ................................................................. 63
4.10. PUBLICACIÓN DE LA PWA .......................................................................... 64
4.11. CASOS DE USO DE PRUEBA......................................................................... 68
4.11.1. CASE DE USO INICIAR SESIÓN (CU0) .................................................... 68
4.11.2. CASO DE USO REGISTRAR PROCESOS DEL NEGOCIO (CU1) ........... 69
4.11.3. CASO DE USO REGISTRAR SISTEMAS DE INFORMACIÓN (CU2) .... 70
4.11.4. CASO DE USO REGISTRAR ARQUIT. TECNOLÓGICA (CU3) ............. 71
4.11.5. CASO DE USO REGISTRAR RELACIONES 3 CAPAS (CU4) ................. 72
4.11.6. CASO DE USO CERRAR SESIÓN (CU5) ................................................... 73
5. CONCLUSIONES ........................................................................................................ 74
6. RECOMENDACIONES ............................................................................................... 75
7. REFERENCIAS BIBLIOGRÁFICAS .......................................................................... 76
8. ANEXOS ....................................................................................................................... 79
8.1. ANEXO 1. INSTRUMENTO DE ENCUESTA PARA WORLD BASC
ORGANIZATION ............................................................................................................ 79
11
INDICE DE ILUSTRACIONES
Ilustración 1 Centrado en la implementación [5] ................................................................ 24
Ilustración 2 Centrado en la implementación con actualizaciones periódicas al modelo [5]
.............................................................................................................................................. 24
Ilustración 3 Iteraciones paralelas en el modelo y la implementación [5] .......................... 25
Ilustración 4 Centrado en el modelo: las iteraciones tienen lugar en el modelo [5] ........... 25
Ilustración 5 Modo de operación offline en una PWA [13] ................................................ 28
Ilustración 6 Alcance Global GCP [17] .............................................................................. 30
Ilustración 7 Representación DOM Virtual [21]................................................................. 32
Ilustración 8 Diferencia entre DOM real vs virtual [21] ..................................................... 33
Ilustración 9 DOM real actualizado [21] ............................................................................ 33
Ilustración 10 Firebase Services [23] .................................................................................. 35
Ilustración 11 Modelo de Arquitecturas en 3 capas ............................................................ 37
Ilustración 12 Proceso de registro de los Procesos del Negocio ......................................... 38
Ilustración 13 Proceso de registro de Sistemas de Información ......................................... 39
Ilustración 14 Proceso de registro de Arquitectura Tecnológica ........................................ 39
Ilustración 15 Modelo BPMN de relación en 3 capas ........................................................ 40
Ilustración 16 R1 Diagrama de secuencia iniciar sesión..................................................... 43
Ilustración 17 R2 Diagrama de secuencia crear registro..................................................... 44
Ilustración 18 R2 Diagrama de secuencia Editar/Eliminar registro .................................... 45
Ilustración 19 R3 Diagrama de secuencia registrar Sistema de Información ..................... 46
Ilustración 20 R3 Diagrama de secuencia Editar/Eliminar Sistema de Información .......... 46
Ilustración 21 R4 Diagrama de Secuencia registrar Arquitectura Tecnológica .................. 47
Ilustración 22 R4 Diagrama de secuencia Editar/Eliminar Arq. Tecnológica .................... 47
Ilustración 23 R5 Diagrama de secuencia registrar relación 3 capas .................................. 48
Ilustración 24 R5 Diagrama de secuencia Editar/Eliminar Relación de 3 capas ................ 49
Ilustración 25 R7. Diagrama de secuencia cerrar sesión .................................................... 50
Ilustración 26 Casos de uso para la PWA ........................................................................... 50
Ilustración 27 Arquitectura Tecnológica PWA ................................................................... 51
Ilustración 28 Página de entrada a la PWA......................................................................... 52
Ilustración 29 Inicio de sesión ............................................................................................ 52
Ilustración 30 Página de menú ............................................................................................ 53
Ilustración 31 Paso 1. Registro de Proceso ......................................................................... 53
Ilustración 32 Paso 2. Registro de Procedimientos ............................................................. 54
Ilustración 33 Paso 3. Asociación de áreas ........................................................................ 54
Ilustración 34 Registro de Sistemas de Información .......................................................... 55
Ilustración 35 Registro de Infraestructura 1 ........................................................................ 55
Ilustración 36 Registro de Infraestructura 2 ........................................................................ 56
Ilustración 37 Registro de Infraestructura 3 ........................................................................ 56
12
Ilustración 38 Relación de las 3 capas paso 1 ..................................................................... 57
Ilustración 39 Relación de las 3 capas paso 2 ..................................................................... 57
Ilustración 40 Relación de las 3 capas paso 3 ..................................................................... 58
Ilustración 41 Página con lista de registros ......................................................................... 58
Ilustración 42 Modelo de Datos de Nivel NoSql ................................................................ 59
Ilustración 43 Panel de control del hosting de Firebase...................................................... 60
Ilustración 44 Base de datos Firestore para PWA .............................................................. 61
Ilustración 45 Base de Datos Firebase – PWA (Procesos) ................................................. 62
Ilustración 46 Base de datos Firebase – PWA (Procedimientos) ....................................... 62
Ilustración 47 Autenticación en Firebase para la PWA ...................................................... 63
Ilustración 48 Modo de inicio de sesión PWA ................................................................... 63
Ilustración 49 Comando npm para iniciar web server local ............................................... 64
Ilustración 50 Servidor local desplegado ............................................................................ 64
Ilustración 51 Instalación Firebase Tools en Node JS ........................................................ 65
Ilustración 52 Transpilación de la PWA ............................................................................. 65
Ilustración 53 Autenticación en Firebase (Consola) ........................................................... 65
Ilustración 54 Solicitud de permisos Firebase .................................................................... 66
Ilustración 55 Inicialización del proyecto Firebase ............................................................ 66
Ilustración 56 Deploy de la PWA en Firebase .................................................................... 67
Ilustración 57 PWA desplegada en el hosting de Firebase ................................................. 67
Ilustración 58 CU0 (Iniciar sesión) ..................................................................................... 68
Ilustración 59 CU1 (Registrar Procesos del Negocio) ........................................................ 69
Ilustración 60 CU2 (Registrar SI) ....................................................................................... 70
Ilustración 61 CU3 (Registrar Arq. Tec.) .......................................................................... 71
Ilustración 62 CU4 (Registrar relaciones 3 capas).............................................................. 72
Ilustración 63 CU5 (Cerrar Sesión) .................................................................................... 73
13
INDICE DE TABLAS
Tabla 1 Diferencias entre DOM real vs DOM virtual [21] ................................................. 32
Tabla 2 Hito de la Fase de Modelo ...................................................................................... 36
Tabla 3 Hito Fase de Implementación ................................................................................. 41
Tabla 4 Requerimientos PWA ............................................................................................. 42
14
1. PLANTEAMIENTO DEL PROYECTO
1.1. NOMBRE DEL PROYECTO
DESARROLLO DE UNA PROGRESSIVE WEB APP (PWA) PARA GESTIONAR
PLATAFORMAS TECNOLÓGICAS MODELADAS CON BPM
1.2. PLANTEAMIENTO DEL PROBLEMA
El estado actual de las pequeñas y medianas empresas (Pymes) se basa en que la información
de sus procesos y funciones no se encuentra documentada en su totalidad. La información
por lo general se encuentra en el conocimiento que tienen las personas por su experiencia en
los diferentes cargos.
Particularmente en las áreas de TI no tienen información de sus procesos, hay dificultad para
identificar necesidades en cuanto a sistemas de información de acuerdo con los procesos que
realiza la empresa y ante un fallo se desconoce qué áreas se ven afectadas y qué contingencias
se pueden hacer para dar una solución.
Ahora bien, existen herramientas como: nagios, zenoss, icinga, solarwinds entre otras, para
monitorear redes y servicios en las redes, son aplicaciones de índole comercial y de código
abierto; sin embargo, la mayoría de ellas se centra en la verificación del funcionamiento de
los dispositivos, de las bases de datos, la seguridad, el análisis de rendimiento y la
comprensión de los datos que se obtienen de su gestión. No en la relación que tiene la
tecnología con los procesos de la organización.
1.3. IDENTIFICACIÓN DEL PROBLEMA
Durante la práctica académica realizada por el autor en el WORLD BASC Miami,
organización compuesta de 21 capítulos en 11 países, cada uno con servicios independientes,
se identificó que no existía una documentación centralizada sobre que plataforma tecnológica
soportaba la operación de esta multinacional.
No se tenía un mapa que contemplara procesos (por sede), arquitectura de software utilizada
e infraestructura tecnológica requerida para conocer las capacidades de la operación.
Ante incidencias presentadas con la infraestructura tecnológica o los sistemas de
información, no se conocía qué procesos se afectan en la multinacional.
15
1.4. OBJETIVOS
1.4.1. OBJETIVO GENERAL
Desarrollar una PWA (Progressive Web App) para gestionar plataformas tecnológicas
modeladas con BPM
1.4.2. OBJETIVOS ESPECÍFICOS
• Elaborar el modelado de procesos genéricos de negocio en tres arquitecturas, bajo la
metodología BPM.
• Definir los casos de uso con base en los requerimientos de los modelos BPM.
• Diseñar prototipo no funcional (Mockups) de la PWA.
• Desarrollar la PWA para el entorno de desarrollo Firebase de Google.
• Realizar pruebas funcionales a la PWA.
1.5. JUSTIFICACIÓN
La metodología BPM es sin duda, parte fundamental para realizar desarrollos que cumplan
con los requisitos necesarios si se trata de procesos y procedimientos, según Sandy Kemsley
[1] “La forma de crear aplicaciones basadas en procesos ha cambiado. En el pasado, los
modelos a nivel de negocio se creaban en como una pequeña parte de los requerimientos de
negocio y normalmente recreados por TI en una herramienta de implementación de procesos
independiente. Ahora, los modelos de procesos se han convertido en una pieza más
importante de los requerimientos de negocio – en algunos casos, casi reemplazando
completamente los requerimientos escritos.”.
Esta perspectiva ofrece un punto de partida distinto, y para las áreas de TI mucho más cercano
al lenguaje de la ingeniería, ya que con BPM es posible modelar cualquier proceso y así
mismo convertirlo en un artefacto para el análisis y diseño de una aplicación.
La aplicación propuesta basada en un modelo de 3 capas BPM, en la cual se puede registrar
la información relacionada con la plataforma tecnológica de la organización compuesta
principalmente por: procesos, sistemas de información e infraestructura tecnológica. Aporta
una nueva mirada, desde la perspectiva de cómo estos componentes no se pueden separar y
por lo tanto, se deben analizar en conjunto.
Generalmente las aplicaciones de monitoreo de TI se ocupan de analizar servidores,
servicios, bases de datos, equipos de redes, seguridad. Muy pocas se centran en cómo afectan
los incidentes de TI a los procesos de la organización; y en el caso de algún cambio en los
procesos, qué se debe tener en cuenta frente a los sistemas de información y la infraestructura.
16
Los beneficios de una aplicación que maneje una perspectiva de 3 capas BPM van más allá
de sólo monitorear la infraestructura:
1. Se pueden identificar falencias entre cada arquitectura, ya sea por un nuevo proceso, la
implementación o cambió de un sistema de información o por la implantación de alguna
tecnología.
2. Se podrían generar preguntas como: ¿Qué procesos se afectarían al fallar un sistema de
información o servidor?, previendo posibles alternativas.
3. Con esta información se puede realizar la planificación de los sistemas de información
de la empresa, debido a que se cuenta con la relación procesos-sistemas de información.
4. Se pueden conocer las necesidades actuales de la organización en infraestructura, ya que
se tendría el inventario de la infraestructura y sus capacidades.
5. Podrían plantearse soluciones tecnológicas que redunden en un buen desempeño para los
procesos, por tener claridad en qué está soportando la infraestructura existente.
6. Sería posible brindar un mejor servicio de TI, conociendo de antemano qué procesos se
ven afectados en una incidencia.
7. Se agilizaría el tiempo de respuesta invertido en las actividades de mantenimiento y
actualización de la infraestructura tecnológica, planeando migraciones temporales hacia
otras infraestructuras.
8. Los puntos anteriores permitirían una eficiencia operativa mayor, y a nivel económico se
podrían reducir costos por la identificación de reprocesos e incluso por la adecuada
planeación de los recursos y sus capacidades.
1.6. ALCANCE Y DELIMITACIÓN DEL PROYECTO
1.6.1. ALCANCE
La Progressive Web App para gestionar plataformas tecnológicas modeladas con BPM, tiene
como alcance la gestión de la información registrada en la aplicación de las capas de:
procesos, sistemas de información e infraestructura tecnológica de una organización.
Esta versión, compuesta de 4 módulos permitirá registrar cada capa y relacionarlas, no se
incluye el modelado de procesos BPM directamente.
17
1.6.2. DELIMITACIÓN
La implementación de la aplicación se realizará con la información obtenida de algunos
procesos identificados durante la práctica académica en el WORLD BASC sede Miami,
principalmente el de capacitación y certificación.
Como se dijo anteriormente, este ejercicio fue fruto del trabajo de práctica académica
realizado en el 2017. No obstante, se espera que la organización pueda evaluar esta aplicación
en la reunión de la junta directiva del año 2020.
1.7. MARCO METODOLÓGICO
1.7.1. METODOLOGÍA DEL PROYECTO
La metodología que se utilizó en el desarrollo de este proyecto se fundamenta en el método
descriptivo [2], con el cual se logró recoger, organizar, resumir y analizar los resultados de
las observaciones y encuestas realizadas durante la práctica académica en el WORLD BASC
ORGANIZATION sede Miami. Así, se recopilaron datos a fin de tener una idea clara de la
situación de la empresa en cuestión.
1.7.2. METODOLOGÍA DE DESARROLLO DE LA APLICACIÓN
Partiendo de la premisa que BPM no es una metodología de desarrollo de software, se eligió
el enfoque de desarrollo iterativo en soluciones de gestión de procesos de negocios de IBM
[3] que comprende dos fases: Modelo e Implementación.
A partir de los modelos hechos con BPM en la fase de modelo, se continúa con la fase de
implementación, donde se realiza ingeniería de software para llevar un proceso ordenado
para el desarrollo de la aplicación.
La metodología para abordar esta aplicación fue concebida en dos fases:
1. La fase de modelo, que se realizó con BPM [4] bajo el enfoque de desarrollo iterativo,
centrados en el modelo, se crearon los procesos que realiza la aplicación y se define
la relación de tres capas BPM (Procesos, Sistemas de Información e Infraestructura
tecnológica).
18
Esta fase inicial tuvo dos tareas, primero el análisis de la información recogida
durante el proceso de práctica académica y segundo, el modelado con BPM de lo que
hace la aplicación para el registro de la información y la relación entre capas.
2. La fase de implementación, en la que se integró el desarrollo de la PWA con procesos
de ingeniería de software: elicitación de requerimientos, diagramas UML para diseño
de la arquitectura de la aplicación en el back-end, diseño de mockups para el front-
end, la codificación con la arquitectura de React y Firebase, los casos de pruebas
unitarias y el despliegue de la aplicación en cloud.
Aunque no se adopta una metodología de desarrollo de software como tal para realizar el
desarrollo debido a que se dio mayor enfoque a BPM, sí se realiza ingeniería de software con
algunos de los elementos principales, requerimientos y diagramas UML.
19
2. MARCO TEÓRICO
2.1. ANTECEDENTES
Al hacer revisión de software especializado para gestión de procesos BPM se encuentran
unos que principalmente incorporan la metodología para la elaboración de diagramas de
procesos y flujos de trabajo, incorporan funcionalidades como notificaciones vía email o
notificaciones push y ofrecen integración con otro tipo de plataformas para complementarse.
Por otro lado, las herramientas de monitoreo como ya se ha dicho, se centran en los
dispositivos de red, equipos servidores y servicios como: bases de datos, servicios web,
aplicaciones entre otros. A continuación, se nombran algunos de las más populares en
internet.
2.1.1. AURA PORTAL
AuraPortal es un iBPMS (Intelligent Business Process Management Suite) que, sin necesidad
de programación, le permite digitalizar cada paso de todo tipo de procesos en una
plataforma digital fácil de usar y compatible con las aplicaciones ERP y CRM ya existentes.
[5]
Se trata de una herramienta capaz de integrarse con muchas aplicaciones para lograr
mejores resultados, orientada a automatizar y mejorar procesos.
Con la App Instant Workflow de AuraPortal, los usuarios de negocio, comerciales,
responsables de sistemas, etc. estarán al día de cualquier aviso o tarea importante en su
workflow, de modo que puedan actuar al instante. [5]
Es la plataforma más completa que se ha encontrado en la indagación para este trabajo, en
el sitio web no hay precios de venta, su modelo de negocio tiene varias verticales, entre
ellas la implementación de la plataforma a través de consultorías. tiene las siguientes
funcionalidades. La plataforma digital BPM tiene las siguientes funcionalidades:
Automatización de Procesos Reglas de Negocio y Datos
Gestión Dinámica de Casos Inteligencia Artificial Azure
Interfaz de Usuario (UI) Conectividad (RPA, Blockchain...)
Movilidad Empresarial
Análisis y Decisión Inteligente
Gestión Documental
20
2.1.2. WORKFLOWGEN
De la empresa ADVANTYS, WorkflowGen es una plataforma low-code BPMN desarrollada
para implementar funciones avanzadas de diseño, automatización y optimización de
procesos.
"WorkflowGen es una plataforma robusta de automatización de flujo de trabajo diseñada
para permitir la simplicidad de los entornos de bajo código, sin imponer los compromisos
implícitos que la mayoría de estos conlleva" [6]
Aunque es menos robusta que Aura Portal, también es una plataforma que permite modelar
procesos y realizar diferentes funcionalidades, también se comercializa a través de
consultoría y contacto con la organización.
Entre las principales funcionalidades de la plataforma se encuentran:
Gestión de usuarios
Personalización del portal
Reportes
Notificaciones
Editor de formularios
API GraphQL
Webhooks entrantes
Webhooks salientes
Servicios web API
Aplicaciones workflow
Integrar WorkflowGen con Slack
2.1.3. BIZAGI
Bizagi es una de las plataformas más completas para modelar, simular y automatizar
procesos.
“Comúnmente existe el modelamiento de procesos para entendimiento y modelamiento de
procesos para automatización. Con Bizagi BPM Suite los dos están perfectamente
conectados. La facilidad de uso del ambiente de modelamiento y la simplicidad del contenido
del proceso significa que el negocio y el área de TI hablan el mismo lenguaje – el lenguaje
del proceso” [7]
Esta plataforma está compuesta de 3 productos que tienen planes por separado, para usuarios
individuales, equipos de trabajo y para empresas. Modeler, Studio y Automation.
21
Las funcionalidades de Bizagi son bastante amplías tanto que, han desarrollado cantidades
de integradores hacia otras plataformas al igual que diferentes widgets para enriquecer los
procesos. [7]. Las capacidades de Bizagi se categorizan en:
Modelado de procesos Movilidad
Automatización de procesos digitales Integración SAP
Gestión de procesos del negocio Integración SharePoint
Gestión de casos Integración ECM
Inteligencia artificial y Machine Lerning …
Contextualización
Integración
Integración RPA
2.1.4. NAGIOS
Es un sistema de monitoreo de código abierto para gestión de redes. Nagios permite la
creación de dispositivos de red con las características propias del fabricante, y a través del
protocolo SNMP verificar su estado. FAN Full Automated Nagios, es una distribución
CENTOS que empaquetó Nagios, Centreón y Nagvis, generando una suite muy buena para
configurar de manera gráfica Nagios sin necesidad de código. [8]
Nagios ha evolucionado demasiado, además de la versión community tiene la comercial la
cual oscila entre los $US 2.000 y $US 3.000 de acuerdo con los servicios de soporte elegidos.
Las principales funciones de monitoreo de Nagios son:
Monitoreo integral: Sitios web, bases de datos, protocolos (Capa 3, 4 y 7 de OSI), soluciones
cloud, virtualización, sistemas operativos, aplicaciones, almacenamiento, seguridad
perimetral, email entre otros.
2.1.5. PANDORAFMS
“Pandora FMS es un software de monitorización para gestión de infraestructura TI. Esto
incluye equipamiento de red, servidores Windows y Unix, infraestructura virtualizada y todo
tipo de aplicaciones. Pandora FMS tiene multitud de funcionalidades, lo cual lo convierte
en un software de nueva generación que cubre todos los aspectos de monitorización
necesarios para su organización.” [9]
22
Esta plataforma trabaja bajo la tecnología de agentes la cual maneja para la versión
community 1000 agentes, para la NMS 3000 agentes y la Enterprise agentes ilimitados. Las
versiones NMS y Enterprise se comercializan con valores entre € 2625 y € 3750 el primer
año.
Las funcionalidades de PandoraFms incluye monitorización de procesos del negocio, algo
cercano al objetivo de este proyecto, no obstante, se define a nivel de monitoreo más que a
la relación entre arquitecturas. Algunas de las funciones encontradas en su portal son:
Monitorización MSP (Múltiples usuarios y dispositivos)
Monitorización de servidores
Monitorización de entornos virtuales
Monitorización de procesos de negocio
Recolección de logs
Inventario
Monitorización mainframe
Gestión de incidencias / ITSM
Similar a Nagios, Icinga, Zenoss y otros más, este tipo de aplicaciones se centra más en el
monitoreo, cada una de ellas tiene algunas características diferentes pero la generalidad es la
misma para todos.
2.2. METODOLOGÍAS
2.2.1. MÉTODO DESCRIPTIVO
De conformidad con la teoría, durante el proceso de práctica se partió de la observación
directa y de la información obtenida a través de encuestas y entrevistas para interpretar y
presentar la realidad de la organización. Prueba de ello es el instrumento de la encuesta
(Anexo 1) que se aplicó a los diferentes capítulos y del cual se identificaron algunas
necesidades.
El método utilizado para el levantamiento de la información se llevó a cabo conforme con:
1. La observación directa que se realizó a los diferentes procesos y capítulos de la
organización; también el conocimiento adquirido a través de las informaciones
indirectas obtenidas. Es decir, las situaciones que se evidenciaban durante el
levantamiento de la información.
23
2. La aplicación de otras técnicas (cuestionario, entrevista) con la finalidad de conocer la
operación de la organización para “obtener, interpretar y presentar, con la mayor
exactitud posible, los requerimientos y necesidades de acuerdo con los criterios
previamente establecidos” [2]. (Proceso, objetivo, actividades, información, sistemas de
información).
2.2.2. DESARROLLO ITERATIVO EN SOLUCIONES DE GESTIÓN DE
PROCESOS DE NEGOCIOS
“El desarrollo iterativo es un enfoque de desarrollo de software que permite la convergencia
de una solución con las metas deseadas a través de sucesivos perfeccionamientos a los
requerimientos y los artefactos de desarrollo” [3]. En este enfoque específicamente no se
incluyen todas las fases del proceso de desarrollo, ya que se pueden hacer iteraciones (ciclos
de perfeccionamiento, según los autores) en las fases que se consideren, (iteraciones de
análisis, iteraciones de diseño etc.), ahora bien, quien determina cuales son las fases en las
que se centrarán las iteraciones, es el enfoque de desarrollo iterativo como se verá a
continuación.
2.2.3. OPCIONES DE DESARROLLO ITERATIVO
Las opciones de desarrollo iterativo propuestas por los ingenieros de IBM para la gestión de
procesos de negocio, se basan en las herramientas que IBM tiene para tal fin, sin embargo,
aplica muy bien para el desarrollo del presente proyecto, ya que la base es BPM y se hará la
implementación en una arquitectura similar a la utilizada.
Las opciones de desarrollo iterativo son las siguientes:
1. Centrado en la implementación
En este enfoque la mayoría de las iteraciones se realizan del lado de la implementación. Se
utiliza en proyectos donde no hay mucho tiempo para analizar y modelar pero se corre el
riesgo de que el producto final no esté muy acorde al modelo planteado.
La ilustración 1 enseña las iteraciones que se realizan en la fase de Implementación.
24
Ilustración 1 Centrado en la implementación [3]
2. Centrado en la implementación con actualizaciones periódicas al modelo
La principal diferencia con el enfoque anterior está dada por las notificaciones que
retroalimentan para hacer cambios al modelo, pueden llegar a generar tiempos largos si son
cambios considerables. El análisis se realiza rápidamente para dar paso a la implementación
como se observa en la ilustración 2.
Ilustración 2 Centrado en la implementación con actualizaciones periódicas al modelo [3]
3. Iteraciones paralelas en el modelo y la implementación
Este enfoque permite realizar modificaciones tanto en el modelo como la implementación,
se pueden agregar implementaciones al modelo sino fueron modeladas previamente, esto
puede reducir dependencias entre fases. Una desventaja es que se pueden duplicar esfuerzos
debido al doble trabajo, además los cambios generados en la implementación podrían no
obedecer a un análisis riguroso, ni a los procesos. Ilustración 3.
25
Ilustración 3 Iteraciones paralelas en el modelo y la implementación [3]
4. Centrado en el modelo
Como se observa en la ilustración 4, en este enfoque las iteraciones tienen lugar en el modelo.
Una vez aprobados los cambios y pasada cada iteración, se pasa a la implementación. Tiene
mayor análisis, reduce costos y errores en la implementación, aunque esta puede tardar más,
debido a la espera de la terminación del modelo. Generalmente los requisitos de
implementación no se detectan en la fase de modelo (diseño).
Ilustración 4 Centrado en el modelo: las iteraciones tienen lugar en el modelo [3]
Los autores recomiendan este último modelo ya que permite el desarrollo de soluciones BPM
mucho más acertadas. Este enfoque produce numerosos beneficios, que incluyen:
• Gobernabilidad: facilita el control y la autorización de cambios antes de la
implementación.
• Sincronización entre modelo e implementación: la sincronización unidireccional requiere
menos esfuerzo y asegura la minimización de conflictos.
• Productividad: el mayor grado de generación de códigos ahorra tiempo y exige el
cumplimiento de las mejores prácticas desde el inicio
• Calidad de la solución: promueve hábitos de “análisis primero” que con mayor seguridad
garantizan el cumplimiento de los requerimientos de negocios.
26
• Mejor alineación entre el negocio e IT: la equivalencia estructural entre los modelos del
proceso de negocios y la implementación es más factible con este enfoque. [3]
Luego de elegir el enfoque centrado en el modelo para el análisis de los procesos y el modelo
de estos, para la implementación se considera necesario realizar un proceso de ingeniería que
dé cuenta del resultado del proyecto. Por tanto, se incluyeron elementos con los cuales se
realizó la aplicación y que están alineados con el enfoque adoptado.
2.2.4. ARQUITECTURA ORIENTADA A SERVICIOS (SOA)
“SOA es un modelo arquitectónico cuyos objetivos son: mejorar la agilidad organizacional,
implementar la orientación de servicios y alinear los objetivos de negocio y los objetivos del
departamento de TI”. [10]
Bajo esta premisa, se parte de que SOA permite y valida lo que este proyecto desea alcanzar
en términos de alinear procesos y objetivos del negocio.
Esta arquitectura opera en base a tecnologías que logran que sus componentes se relacionen,
a través de un protocolo de comunicación en red.
Con SOA se pueden aprovechar más los servicios, reutilizarlos y además, soporta múltiples
protocolos de mensajes.
Se referencia SOA ya que al consultar algunas fuentes, se compara con lo que ahora se está
trabajando para aplicaciones web progresivas llamado microservicios.
2.3. CONCEPTOS TEÓRICOS
2.3.1. BPM (BUSINESS PROCESS MANAGEMENT)
Business Process Management (BPM) es un conjunto de métodos, herramientas y tecnologías
que se utiliza para diseñar, simbolizar, analizar y controlar procesos de negocio. BPM es un
enfoque centrado en los procesos que se combina con las tecnologías de la información y
metodologías de proceso y gobierno. [11]
27
BPM enseña la gestión de procesos de negocio con el objetivo de mantener o mejorar ciertos
aspectos. Los procesos de negocio se refieren a la serie de actividades que una empresa lleva
a cabo dentro de su misión. En síntesis, “es una estrategia para la gestión y mejora del
rendimiento de un negocio a través de la optimización continua de los procesos de negocio
en un ciclo repetitivo y cerrado de modelado, ejecución y medición”. [12]
2.3.2. PWA (PROGRESSIVE WEB APP)
Aplicaciones web progresivas, se trata de una metodología de desarrollo para la creación de
sitios web rápidos y confiables. El término progresivo se refiere al enfoque de aprovechar las
capacidades que están disponibles en el entorno de la aplicación en lugar de tener requisitos
rígidos. [13]
Este tipo de aplicaciones combinan las mejores características de aplicaciones web y
aplicaciones nativas, se están convirtiendo en el nuevo estándar para el desarrollo de
aplicaciones web y móviles, sobre todo porque operan en cualquier navegador.
Una Progressive Web App puede ejecutarse en una pestaña del navegador, pero también es
instalable. “Se ejecuta como una aplicación, en una ventana de aplicación sin una barra de
direcciones u otra interfaz de usuario del navegador. Y como todas las demás aplicaciones
instaladas, es una aplicación de nivel superior en el gestor de tareas.” [14]
Si bien una PWA puede tratarse como una aplicación estándar en un dispositivo, la capacidad
de ejecutarse desde una URL facilita el uso de la aplicación en cualquier dispositivo con un
navegador.
A diferencia de las aplicaciones de escritorio que han tenido acceso total a las capacidades
del hardware, una PWA tiene un acceso más allá del contenido de su sitio original [15]. Esto
demuestra un modelo seguro para la web, ya que sólo se consumen los servicios elegidos.
En la ilustración 5 puede observarse que pueden programarse diferentes “Service Workers”
y activarse o no de acuerdo con los requerimientos obtenidos.
28
Ilustración 5 Modo de operación offline en una PWA [14]
2.3.3. MICROSERVICES
Consiste en pequeños servicios más ligeros que SOA, su independencia logra que se puedan
mezclar diferentes lenguajes, almacenamientos propios, protocolos ligeros de comunicación
entre otras posibilidades, aunque con un alcance limitado. [10]
Firebase es la plataforma elegida para la integración de la PWA con la nube y de la cual se
consumen diferentes microservicios que serán utilizados por la aplicación.
2.3.4. TRANSPILAR
En programación generalmente se conoce como compilar el proceso por el cual un
“compilador” convierte código de alto nivel en lenguaje de máquina. Es lo que muchos
desarrolladores hacen; por ejemplo en Java, se escribe un programa y el compilador de Java
lo convierte a código bytes que se interpreta en tiempo de ejecución por su máquina virtual.
Transpilar, funciona en la abstracción de lenguajes de alto nivel, y el código de salida es
legible por humanos. No se puede ejecutar directamente sino se invoca su propio compilador
o intérprete. Por ejemplo, un transpilador puede convertir código Java a código C ++. El
programador necesitará invocar un compilador de C ++ antes de ejecutar el código de
máquina que haya transpilado. [16]
29
2.4. TECNOLOGÍAS
2.4.1. CLOUD COMPUTING
La computación en la nube como dicen varios autores se trata de un paradigma que permite
ofrecer en centros de datos remotos, servicios de información y aplicaciones a través de
Internet.
Cloud computing permite que los usuarios (personas o empresas) gestionen archivos y
utilicen aplicaciones sin necesidad de instalarlas en sus dispositivos. Esta tecnología ofrece
un uso más eficiente de los recursos tecnológicos, como almacenamiento, memoria,
procesamiento y ancho de banda, ya que gracias a la elasticidad de la nube, se puede comprar
estrictamente lo necesario.
Un ejemplo de computación en nube es el sistema de documentos y aplicaciones de Google
Suite, para su uso no es necesario instalar software o tener un servidor, sólo con tener
conexión a Internet se pueden utilizar cualquiera de sus servicios.
Existen varios modelos de prestación de servicios en la nube, PaaS, IaaS, SaaS [17], que
dependiendo de la necesidad se pueden adquirir. En otras palabras: cloud computing es más
un servicio, que podemos consumir de la misma manera que consumimos la electricidad o el
agua.
2.4.2. GOOGLE CLOUD PLATFORM
En términos técnicos GCP no es más que la suma de recursos técnicos (hardware y software)
distribuidos geográficamente para ofrecerlos a los clientes de las diferentes zonas, algunos
recursos solo pueden acceder a otros recursos si es que están en la misma región. Estos son
los recursos regionales y entre ellos se encuentran las direcciones IP externas. Y, por último,
hay recursos que solo pueden acceder a recursos que se encuentren dentro de la misma zona.
Se trata de los recursos zonales y abarcan las instancias de VM y sus tipos, además de los
discos. [18]
En la ilustración 6, se presenta la relación entre el alcance global, las regiones, las zonas y
algunos de sus recursos:
30
Ilustración 6 Alcance Global GCP [18]
Se entiende por tanto que GCP opera con un modelo de computación en la nube; no obstante,
lo que se conoce en cloud como productos de software y hardware en GCP pasan a ser
servicios. Y con ellos se puede acceder a los recursos subyacentes [18].
2.4.3. SERVERLESS (SIN SERVIDOR)
Según el señor Ken Fromm según publicación en el 2012, “ La frase "sin servidor" no
significa que los servidores ya no estén involucrados. Simplemente significa que los
desarrolladores ya no tienen que pensar tanto en ellos”. [19]
Bajo este modelo, los recursos informáticos se utilizan como servicios para que el cliente no
tenga que gestionar las capacidades físicas o los límites; es decir, los proveedores de servicios
asumen la responsabilidad de administrar servidores, almacenes de datos y otros recursos de
infraestructura.
En la computación sin servidor, el proveedor en la nube (AWS, Azure o Google Cloud) es
responsable de ejecutar un fragmento de código (el programador aloja a través de ciertas
herramientas, generalmente CLI (Interfaces de línea de comandos)) mediante la asignación
dinámica de los recursos, y el cobro se genera solo por la cantidad de recursos utilizados para
ejecutar el código.
31
El código, generalmente, se ejecuta dentro de contenedores sin estado que pueden ser
activados por una variedad de eventos que incluyen solicitudes HTTP, eventos de base de
datos, servicios de colas, alertas de monitoreo, carga de archivos, eventos programados
(trabajos cron), etc. [20]
2.5. LENGUAJES DE PROGRAMACIÓN
2.5.1. JAVASCRIPT
Sin duda uno de los lenguajes de programación web que más ha trascendido en los últimos
tiempos, se ha dado paso entre muchos otros y es un estándar ECMA1 [21]
JavaScript es un lenguaje interpretado, orientado a objetos, débilmente tipado, el cual permite
realizar actividades complejas en una página web como mostrar actualizaciones de contenido
en el momento, interactuar con mapas, animaciones gráficas, etc. Es el tercer estándar en las
tecnologías para la web después de HTML y CSS.
2.5.2. REACT
Más que un lenguaje de programación se trata de una librería JavaScript de código abierto,
con la cual se pueden desarrollar interfaces de usuario. Su mayor potencial radica en la
facilidad de crear aplicaciones en una sola página.
React permite diseñar vistas para cada estado de una aplicación, actualizando sólo la
información que cambia. Hace uso del paradigma “programación orientada a componentes”,
de esta manera se logra definir una lógica con la cual se dinamiza una aplicación ya que cada
componente puede tener o no un estado. [22]
El DOM (Document Object Model) es parte fundamental en React ya que tiene un DOM
virtual, por lo que su funcionamiento se basa en una diferenciación con el DOM real. La tabla
1 enseña las diferencias entre cada DOM.
1 European Computer Manufacturers Association
32
Tabla 1 Diferencias entre DOM real vs DOM virtual [22]
Un DOM virtual es un objeto JavaScript, y una copia del DOM real. Es un árbol de nodos
que enumera los elementos, atributos y contenido como objetos y propiedades. La función
de procesamiento de React crea un árbol de nodos a partir de los componentes React. Luego
actualiza este árbol en respuesta a las transformaciones en el modelo de datos que son
causadas por varias acciones realizadas por el usuario o por el sistema. Este DOM virtual
funciona en tres simples pasos. [22]
1) Cada vez que cambia un dato subyacente, la interfaz de usuario se vuelve a
representar en el DOM virtual. Ilustración 7.
Ilustración 7 Representación DOM Virtual [22]
2) Seguidamente, se calcula la diferencia entre la representación DOM anterior y la
nueva, la ilustración 8 muestra la comparación.
33
Ilustración 8 Diferencia entre DOM real vs virtual [22]
3) Una vez hechos los cálculos, el DOM real se actualiza solo con las cosas que han
cambiado como se observa en la ilustración 9.
Ilustración 9 DOM real actualizado [22]
2.6. ENTORNOS DE EJECUCIÓN
2.6.1. NODE JS
Node es más que un servidor web. Sin embargo, no es como Apache o Tomcat. La función
principal de estos servidores es que permiten implementar aplicaciones web en diferentes
ambientes (On premise u hosting). Una similitud de Node es que, así como en Apache se
puede agregar un módulo PHP para crear páginas web dinámicas, o un módulo SSL para
conexiones seguras, Node también tiene el concepto de módulos que se pueden agregar a su
núcleo creados por su comunidad. [23]
34
Node agrega el concepto de “JavaScript del lado del servidor” mediante el V8, motor
JavaScript subyacente que usa Google en Chrome.
Para hacerse a una idea de las capacidades de Node se cita este ejemplo:
“En lenguajes como Java™ y PHP, cada conexión genera un nuevo hilo que potencialmente
viene acompañado de 2 MB de memoria. En un sistema que tiene 8 GB de RAM, esto da un
número máximo teórico de conexiones concurrentes de cerca de 4.000 usuarios…” por el
contrario Node… “En lugar de generar un nuevo hilo para cada conexión (y de asignarle la
memoria acompañante), cada conexión dispara una ejecución de evento dentro del proceso
del motor de Node. Node también afirma que nunca se quedará en punto muerto, porque no
se permiten bloqueos y porque no se bloquea directamente para llamados E/S. Node afirma
que un servidor que lo ejecute puede soportar decenas de miles de conexiones concurrentes.”
[23]
Esta diferencia permite pensar en aplicaciones de alta concurrencia, generando confianza al
momento de diseñar una arquitectura.
2.6.2. FIREBASE
Firebase es una plataforma para el desarrollo de aplicaciones web y aplicaciones móviles
adquirida por Google en 2014. Firebase es una de las arquitecturas serverless que incorporan
servicios “Backend as a Service” (BaaS), y “Funciones como servicio” (FaaS).
Según [24] las principales características que Firebase ofrece de acuerdo a sus servicios son:
Entorno de Desarrollo: Permite la creación de mejores aplicaciones, minimizando el
tiempo de optimización y desarrollo, mediante funciones como: detección de errores y de
testeo. Poder almacenar todo en la nube, configuración de manera remota, entre otras.
Generación de Analíticas: El rendimiento de la aplicación se puede revisar mediante
analíticas web, en un panel de administración donde se pueden observas, usuarios, tiempo de
visitas, ancho de banda, lecturas/escrituras etc.
Gestión de usuarios: Permite gestionar de manera fácil todos los usuarios de las
aplicaciones; además, se pueden captar nuevos usuarios, con invitaciones o notificaciones
push directamente desde la plataforma.
Versatilidad: Firebase ofrece aplicaciones multiplataforma integradas para iOS, Android y
Javascript, sin necesidad de salir de la propia plataforma.
Son muchas las ventajas de esta plataforma y los servicios también. Se muestran a
continuación en la ilustración 10 los más usados y los que se incluyeron en este proyecto:
35
Ilustración 10 Firebase Services [24]
36
3. FASE DE MODELO (ANÁLISIS Y MODELADO)
3.1. HITOS DE LA FASE DE MODELO
En el desarrollo de esta fase se tuvo en cuenta la información obtenida durante la práctica
académica para su respectivo análisis. Cabe resaltar que la cantidad de días no se toman
estrictamente como días de trabajo, se trata del tiempo estipulado para la tarea. La tabla 2
indica la programación estipulada para dichas actividades.
Descripción del hito Inicio Número
de días
Fase 1 (Análisis y Modelado)
Análisis de información 25/09/2019 4
Modelado de procesos BPM 29/09/2019 5
Tabla 2 Hito de la Fase de Modelo
3.2. DESCRIPCIÓN DE LA SOLUCIÓN
Teniendo en cuenta que WORLD BASC ORGANIZATION Miami, tiene la necesidad de
mejorar los servicios de TI debido a que no existe documentación que permita conocer el
estado de la infraestructura tecnológica y los sistemas de información, se plantea hacer una
aplicación web progresiva bajo el modelo de tres capas BPM que plantea [25] en cuanto a
tecnología y negocio como se observa en la ilustración 11.
Esta aplicación incluye el registro de los procesos de la organización, de los sistemas de
información existentes, la infraestructura tecnológica y por último, las relaciones entre cada
capa: procesos – sistemas de información, procesos – infraestructura, sistemas de
información – infraestructura. Así, se obtendrá un diagnóstico completo con el cual se sepa
el estado de cada capa y su relación con las demás.
37
Ilustración 11 Modelo de Arquitecturas en 3 capas
Con la misma información se espera identificar qué áreas o procesos tiene en total la
organización, cuántos de ellos manejan sistemas de información, qué infraestructura los
soporta, ante cualquier incidencia, qué procesos se afectan etc.
Este primer modelo, se centra más en la documentación de las arquitecturas existentes pero
futuros modelos incluirían el monitoreo de los dispositivos, los servicios y sistemas de
información, además la notificación de alertas ante cualquier error o falla presentado en la
organización cabe aclarar que éstas son funcionalidades no contempladas en este proyecto.
38
3.3. DIAGRAMA BPMN DE LOS PROCESOS DE LA APLICACIÓN
Los procesos identificados para la aplicación se realizaron en la plataforma BPMS (Business
Process Management Suite) Bizagi Modeler, y corresponden al objetivo de análisis y diseño
que son el insumo para el modelo de la aplicación.
Ilustración 12 Proceso de registro de los Procesos del Negocio
Los procesos del negocio son el insumo principal con el cual se dará origen a la arquitectura
de software. Cada proceso se vinculará a un área por lo menos, ya que algunos procesos
pueden ser realizados por más de un área. En la ilustración 12 se presenta el modelo BPM
para registrar procesos.
El siguiente proceso (ilustración 13) es el de registro de sistemas de información con el cuál
se vincularán los procesos que usan alguno de estos.
39
Ilustración 13 Proceso de registro de Sistemas de Información
Ilustración 14 Proceso de registro de Arquitectura Tecnológica
En la ilustración 14, se define el proceso que incluye todo en materia de equipos, dispositivos,
nube, redes de datos etc., requeridos para la operación de la organización.
Finalmente, en la ilustración 15 se presenta el modelo que integra los anteriores, con el cual
se procederá a generar requerimientos, casos de uso y el diseño de la aplicación.
40
3.4. MODELO BPMN DE LA APLICACIÓN
El siguiente modelo (ilustración 15) representa la interacción entre los modelos anteriores,
además es la representación esperada a alto nivel de lo que debe hacer la aplicación.
Ilustración 15 Modelo BPMN de relación en 3 capas
Con los modelos de procesos del negocio, se continúa a la fase de implementación donde se
definen los requerimientos para la construcción de la PWA, se definen las tareas de ingeniería
de software necesarias y se culmina con el producto.
41
4. FASE DE IMPLEMENTACIÓN
4.1. HITOS DEL PROYECTO PWA
La siguiente tabla despliega la estructura de desglose de trabajo realizado para la consecución
de los objetivos planteados en la fase de implementación.
Descripción del hito Inicio Número
de días
Fase 2 (Implementación: Desarrollo de la
PWA)
Elicitación de Requerimientos 5/10/2019 1
Modelos UML 6/10/2019 1
Mokcups de la PWA 7/10/2019 5
Preparación del ambiente de codificación 12/10/2019 1
Codificación Front-end 13/10/2019 12
Codificación Back-end 25/10/2019 12
Despliegue PWA - Firebase (versión 1) 6/11/2019 1
Elaboración de casos de pruebas 7/11/2019 4
Refactoring 10/11/2019 6
Despliegue PWA - Firebase (versión final) 15/11/2019 4
Tabla 3 Hito Fase de Implementación
4.2. REQUERIMIENTOS FUNCIONALES DE LA PWA
Luego de realizar un levantamiento de requerimientos basado en el método descriptivo, se
logró determinar una solución que contempla el desarrollo de una aplicación para gestionar
la información referente a: Procesos del negocio, Sistemas de información que usan los
42
diferentes procesos y la infraestructura tecnológica que está soportando técnicamente dichos
sistemas. En este sentido, se definieron los siguientes requerimientos.
CÓDIGO DESCRIPCIÓN DEL REQUISITO ENCARGADO PRIORIDAD
R1 Validar el ingreso a la aplicación con
credenciales de acceso.
Usuario Alta
R2 Permitir gestionar registros de procesos
del negocio
Usuario Alta
R3 Permitir gestionar registros de sistemas
de información
Usuario Alta
R4 Permitir gestionar registros de
infraestructura tecnológica
Usuario Alta
R5 Permitir gestionar relaciones entre
procesos, sistemas de información e
infraestructura
Usuario Alta
R6 Mostrar las relaciones registradas Usuario Media
R7 Permitir al usuario cerrar sesión Usuario Alta Tabla 4 Requerimientos PWA
4.3. REQUERIMIENTOS NO FUNCIONALES DE LA PWA
• Garantizar generalmente la accesibilidad, rapidez, y estabilidad de la PWA para
lograr un uso eficiente de la memoria RAM.
• Diseñar una interfaz amigable y predecible para una buena experiencia de los
usuarios.
• Protección de los datos tanto de usuarios como de la organización.
• El sistema debe ser escalable para futuras implementaciones.
4.4. DIAGRAMAS DE SECUENCIA REQUERIMIENTOS FUNCIONALES
Teniendo en cuenta los requerimientos de la aplicación, se realizan los siguientes diagramas
donde se muestra la interacción de cada componente dentro de la aplicación y su respectiva
secuencia dentro del flujo de trabajo.
43
R1 Validar el ingreso a la aplicación con credenciales de acceso.(ilustración 16)
Ilustración 16 R1 Diagrama de secuencia iniciar sesión
44
R2. Permitir gestionar registros de procesos del negocio.
Este requerimiento se cumple mediante tres funciones, crear, actualizar y eliminar, en la
Ilustración 17 se muestra la secuencia de la aplicación cuando el usuario va a crear un nuevo
registro de proceso de negocio.
Ilustración 17 R2 Diagrama de secuencia crear registro
45
Para el caso de actualizar y eliminar se integraron en el mismo diagrama ya que la función
comparte la misma ventana para realizar según la preferencia la acción indicada. En la
ilustración 18 se puede observar.
Ilustración 18 R2 Diagrama de secuencia Editar/Eliminar registro
R3 Permitir realizar el registro de sistemas de información
Este requerimiento al igual que los anteriores, tiene las funciones básicas de crear, actualizar
y eliminar, se presenta en dos diagramas. La Ilustración 19 describe la secuencia para agregar
un registro y la ilustración 20 para editarlo y eliminarlo.
46
Ilustración 19 R3 Diagrama de secuencia registrar Sistema de Información
Ilustración 20 R3 Diagrama de secuencia Editar/Eliminar Sistema de Información
R 4 Permitir gestionar registros de infraestructura tecnológica
En las ilustraciones 21 y 22 al igual que los requerimientos anteriores, se muestran las
secuencias para gestionar la infraestructura tecnológica.
47
Ilustración 21 R4 Diagrama de Secuencia registrar Arquitectura Tecnológica
Ilustración 22 R4 Diagrama de secuencia Editar/Eliminar Arq. Tecnológica
R5 Permitir gestionar relaciones entre procesos, sistemas de información e infraestructura
Para este requerimiento se presentan dos diagramas igualmente, ilustración 23 donde se
crea la relación de 3 capas y posteriormente en la ilustración 24 como se pueden editar o
eliminar.
48
Ilustración 23 R5 Diagrama de secuencia registrar relación 3 capas
49
Ilustración 24 R5 Diagrama de secuencia Editar/Eliminar Relación de 3 capas
R6 Mostrar las relaciones registradas
Las relaciones 3 capas creadas en la aplicación se pueden observar cada vez que se ingresa
a la IU-Relaciones 3 capas, por lo tanto no se considera necesario realizar un diagrama para
este requerimiento, siempre está disponible.
R7 Permitir al usuario cerrar sesión
Finalmente, el diagrama presentado en la ilustración 25 demuestra que el cierre de sesión se
realiza desde cualquier interfaz y se dispara la secuencia.
50
Ilustración 25 R7. Diagrama de secuencia cerrar sesión
4.5. CASOS DE USO DEL SISTEMA
Los casos de uso generados para la PWA, se realizan para tener un modelo donde se pueda
observar el actor y su rol en la aplicación.
Ilustración 26 Casos de uso para la PWA
51
4.6. DEFINICIÓN DE LA ARQUITECTURA
En la ilustración 27 se expresa la arquitectura planteada para el funcionamiento de la PWA
BPM. En el primer cuadrante está el front-end con las funciones desarrolladas en React y
transpiladas con Node.js, las tecnologías de desarrollo en las que se creó la PWA. A través
de Chrome principalmente o un sistema operativo móvil como iOS o Android se puede abrir
la PWA y acceder a los servicios que provee firebase (previamente configurados) y que
fueron usados en la aplicación. Por último, el respaldo de los servicios ofrecidos por firebase,
como por ejemplo Hosting, (servicio Serverless de Google) está soportado por la Cloud de
Google.
Esta arquitectura proporciona una base vanguardista a la aplicación, con mejor rendimiento,
mecanismos de seguridad probados, apta para crecer y recibir recursos adecuados, sin costo
de hardware, y con capacidad de administrarse desde cualquier lugar.
Ilustración 27 Arquitectura Tecnológica PWA
52
4.7. DISEÑO DE LA APLICACIÓN (MOCKUPS)
Ilustración 28 Página de entrada a la PWA
El diseño de la PWA se compone de una serie de páginas definidas a partir de los
requerimientos que se levantaron y sus respectivos casos de uso, el inicio de sesión es el
primero.
Ilustración 29 Inicio de sesión
53
Luego de iniciar sesión, el usuario llegará a una página donde encontrará el menú a modo
de cartas, también un menú en la barra lateral.
Ilustración 30 Página de menú
El primer caso de uso “ Procesos del negocio” se despliega en una modal que tendrá 3 pasos:
Ilustración 31 Paso 1. Registro de Proceso
54
El paso 1 (ilustración 31) es la definición del proceso, donde se solicitan los datos básicos
para su creación.
Ilustración 32 Paso 2. Registro de Procedimientos
Ilustración 33 Paso 3. Asociación de áreas
55
El registro de procedimientos (ilustración 32) es un paso más detallado ya que incluye la
relación de actividades que lo componen. La asociación de áreas permite que cada proceso
tenga como mínimo un área asociada, entendiendo que pueden ser más.
Ilustración 34 Registro de Sistemas de Información
Este caso de uso (ilustración 34) solo tiene una página ya que en esta se registra la
información que compone el sistema de información, nombre, lenguaje de programación,
base de datos, tipo de arquitectura y plataforma.
Ilustración 35 Registro de Infraestructura 1
56
En el caso de registrar la infraestructura tecnológica (ilustración 35), se diseñaron 3 páginas
en las cuales se recoge la información de cada dispositivo, tal como se muestra en los
mockups. Ilustración 36 a 38.
Ilustración 36 Registro de Infraestructura 2
Ilustración 37 Registro de Infraestructura 3
57
Finalmente, el caso de uso para relacionar las 3 capas: procesos, sistemas de información e
infraestructura, se muestra en las ilustraciones 38 a 40.
Ilustración 38 Relación de las 3 capas paso 1
Ilustración 39 Relación de las 3 capas paso 2
58
Ilustración 40 Relación de las 3 capas paso 3
Todos los casos de uso al terminar de registrar la información caen a una página en la que se
listan los registros que se ingresan a la aplicación. Ilustración 41
Ilustración 41 Página con lista de registros
59
4.8. DISEÑO DE LA BASE DE DATOS NOSQL
Como parte fundamental para la aplicación se utilizó el servicio Database de Firebase, en el
cual se diseñó la estructura de la base de datos. En la ilustración 42 se hizo un esbozo de nivel
con las colecciones y documentos usadas.
Ilustración 42 Modelo de Datos de Nivel NoSql
60
4.9. DESPLIEGUE DEL SERVIDOR (SERVERLESS)
Como se indicó en la metodología de desarrollo, para este proyecto se hizo uso de la
tecnología Google Cloud, específicamente con Firebase que para este caso fue el proveedor
de “hosting” y en el cual se desplegó el código de la PWA.
4.9.1. FIREBASE HOSTING
Un hosting seguro y de fácil despliegue de contenido y microservicios de la plataforma,
además de permitir ver el contenido de la plataforma mediante conexión segura. Cuenta con
una rápida función de reversión de versiones. Para hacer uso de firebase hosting se deberá
seguir con los siguientes cuatro pasos:
1. Instalar Firebase CLI
2. Configurar un directorio del proyecto
3. Implementar el sitio
4. Vincular el sitio a una aplicación web de Firebase (opcional)
En la ilustración 43 se puede observar la configuración del sitio creado para el proyecto y en
el despliegue de la PWA, se evidencia la utilización de Hosting para alojar los archivos de la
aplicación.
Ilustración 43 Panel de control del hosting de Firebase
61
4.9.2. FIREBASE DATABASE
Esta base de datos se aloja en la nube. Los datos de la plataforma se almacenan en formato
JSON y se sincronizan automáticamente con los clientes conectados, manteniéndolos
actualizados con los datos más recientes.
Firebase recomienda que la estructura de datos debe evitar anidaciones para optimizar el
rendimiento de la plataforma, que para el caso de esta tecnología puede soportar hasta 32
niveles. La estructura de datos debe ser compacta con rutas independientes o no normalizadas
que permitan hacer llamados eficaces de los datos. Firebase permite crear la base de datos
por medio de una estructura de colecciones y documentos, pudiendo definir aparte de los
datos, reglas, índices y recibir estadísticas de uso. La ilustración 44 presenta la estructura de
datos de la aplicación BPM.
Ilustración 44 Base de datos Firestore para PWA
Ya que el modelo de la PWA está definido por procesos del negocio (procesos y
procedimientos), dónde el proceso BPM (colección) cuenta con cuatro procedimientos
(documentos) para almacenar los datos de: procesos, sistemas, arquitectura tecnológica y
relaciones, database permite anidar la información de la siguiente manera:
1) En la ilustración 44 se observa una colección llamada “process-01” en la cual hay un
primer registro nombrado BPMN que es la colección raíz de la data. Luego está
“procedures” que son las opciones del menú definidas en los casos de uso.(Ilustración
45)
62
Ilustración 45 Base de Datos Firebase – PWA (Procesos)
2) En la siguiente ilustración, se observa que cada proceso (en este caso sistemas de
información) tiene procedimientos (Sistemas registrados) y estos a su vez los datos
registrados de cada sistema.
Ilustración 46 Base de datos Firebase – PWA (Procedimientos)
63
4.9.3. FIREBASE AUTHENTICATION
El servicio para identificar los usuarios que accederán a la plataforma, se realizó con este
servicio, el cual permite autenticación con contraseñas, números de teléfono y proveedores
de identidad federada como Google, Facebook, Twitter entre otros. Para el caso de la
aplicación BPM el método de autenticación está federado con el correo electrónico de
Google. (Ilustración 47 y 48)
Ilustración 47 Autenticación en Firebase para la PWA
Ilustración 48 Modo de inicio de sesión PWA
64
4.10. PUBLICACIÓN DE LA PWA
El despliegue de la aplicación se puede realizar en diferentes momentos. En primer lugar,
instalando Node.js es posible trabajar un servidor local sin mayor inconveniente,
simplemente se define el directorio donde va a estar la aplicación y con un par de comandos
ya se tiene el ambiente listo para probarla en localhost:3000. (Ilustración 49 y 50)
Ilustración 49 Comando npm para iniciar web server local
Ilustración 50 Servidor local desplegado
Asimismo, a través de los comandos de Node.js se pueden instalar paquetes para conectarse
con Firebase (ilustración 51), con las herramientas que proveen estos paquetes, se puede
hacer el despliegue para que la aplicación corra directamente en el hosting.
65
Ilustración 51 Instalación Firebase Tools en Node JS
Es importante tener en cuenta que antes de hacer el despliegue de la PWA en Firebase, se
debe transpilar la aplicación con Node.js (El comando es: npm run build, ilustración 52), de
esta manera la aplicación resultante será interpretada en Firebase y cualquier navegador
donde sea abierta.
Ilustración 52 Transpilación de la PWA
Finalmente se realiza la autenticación, inicialización y deploy para publicar la PWA en
Firebase, todo a través de la línea de comandos. (Ilustraciones 53 y 54)
Ilustración 53 Autenticación en Firebase (Consola)
66
Ilustración 54 Solicitud de permisos Firebase
Luego con el comando firebase init (ilustración 55) se inicializa el proyecto y se elige la
característica que se utilizará.
Ilustración 55 Inicialización del proyecto Firebase
67
Por último el despliegue de la aplicación. Como se observa en las ilustraciones 56 y 57.
Ilustración 56 Deploy de la PWA en Firebase
Ilustración 57 PWA desplegada en el hosting de Firebase
68
4.11. CASOS DE USO DE PRUEBA
Los casos de pruebas unitarias se realizaron a cada caso de uso para verificar los
requerimientos y la funcionalidad de estos.
4.11.1. CASE DE USO INICIAR SESIÓN (CU0)
Ilustración 58 CU0 (Iniciar sesión)
69
4.11.2. CASO DE USO REGISTRAR PROCESOS DEL NEGOCIO (CU1)
Ilustración 59 CU1 (Registrar Procesos del Negocio)
Funcionalidad
Tipo de prueba Método
Responsable Francisco Ibáñez Estado caso de prueba
Prerrequisitos
Corrida 1 2 3
Si
No
Corrida 1 2 3
Si
No
Corrida 1 2 3
Si
No
Corrida 1 2 3
Si
No
Caja Blanca
Caja Negra
Documento de referencia Documentos requerimientos
CASOS DE PRUEBA PROYECTO BPMN
El usuario del sistema tiene la posibilidad de registrar, consultar, editar y eliminar procesos de la
arquitectura de negocio.
Unitaria Caja Negra, caja Blanca
Pendiente
Ítem 3 Se cumple Descripción
Iniciar sesión en el sistema con usuario y contraseña
- Ingresar en la opción del menú Arquitectura de Negocio
Ítem 1 Se cumple Descripción
Verificar la función de consultar. Deberá aparecer una lista con
información de cada proceso.
Ítem 2 Se cumple Descripción
Verificar la función de registrar. Se podrá hacer clic en el botón
crear. Deberá aparecer un formulario para registrar procesos,
procedimientos y áreas asociadas. Finalmente deberá aparecer un
botón para guardar los cambios. Verificar almacenamiento de datos
registrados en listado inicial.
Desarrollo
Pruebas
Verificar la función de modificar. Se podrá hacer clic en el ícono de
lápiz (edición) para cada proceso a modificar y aparecer un
formulario con datos previamente registrados. Finalmente deberá
aparecer un botón para guardar los cambios. Verificar
almacenamiento de datos modificados
Ítem 4 Se cumple Descripción
Verificar la función de eliminar. Se deberá ingresar al ícono de
edición (Lápiz) de cada proceso a eliminar y desplegarse formulario
con un botón Eliminar. Verificar eliminación en listado inicial.
70
4.11.3. CASO DE USO REGISTRAR SISTEMAS DE INFORMACIÓN (CU2)
Ilustración 60 CU2 (Registrar SI)
Funcionalidad
Tipo de prueba Método
Responsable Francisco Ibáñez Estado caso de prueba
Prerrequisitos
Corrida 1 2 3
Si
No
Corrida 1 2 3
Si
No
Corrida 1 2 3
Si
No
Corrida 1 2 3
Si
No
Caja Blanca
Caja Negra
Documento de referencia Documentos requerimientos
CASOS DE PRUEBA PROYECTO BPMN
El usuario del sistema tiene la posibilidad de registrar, consultar, editar y eliminar sistemas de
información.
Unitaria Caja Negra, caja Blanca
Pendiente
Ítem 3 Se cumple Descripción
Iniciar sesión en el sistema con usuario y contraseña
- Ingresar en la opción del menú Sistemas de Información
Ítem 1 Se cumple Descripción
Verificar la función de consultar. Deberá aparecer una lista con
información de cada sistema de información
Ítem 2 Se cumple Descripción
Verificar la función de registrar. Se podrá hacer clic en el botón
crear. Deberá aparecer un formulario para registrar información
referente al sistema tales como: nombre, lenguaje, tipo, base de
datos, etc. Finalmente deberá aparecer un botón para guardar los
cambios. Verificar almacenamiento de datos registrados en listado
inicial.
Desarrollo
Pruebas
Verificar la función de modificar. Se podrá hacer clic en el ícono de
lápiz (edición) para cada sistema de información a modificar y
aparecer un formulario con datos previamente registrados.
Finalmente deberá aparecer un botón para guardar los cambios.
Verificar almacenamiento de datos modificados
Ítem 4 Se cumple Descripción
Verificar la función de eliminar. Se deberá ingresar al ícono de
edición (Lápiz) de cada sistema de información a eliminar y
desplegarse formulario con un botón Eliminar. Verificar eliminación
en listado inicial.
71
4.11.4. CASO DE USO REGISTRAR ARQUIT. TECNOLÓGICA (CU3)
Ilustración 61 CU3 (Registrar Arq. Tec.)
Funcionalidad
Tipo de prueba Método
Responsable Francisco Ibáñez Estado caso de prueba
Prerrequisitos
Corrida 1 2 3
Si
No
Corrida 1 2 3
Si
No
Corrida 1 2 3
Si
No
Corrida 1 2 3
Si
No
Caja Blanca
Caja Negra
Ítem 2 Se cumple Descripción
Verificar la función de eliminar. Se deberá ingresar al ícono de
edición (Lápiz) de la arquitectura tecnológica a eliminar y
desplegarse formulario con un botón Eliminar. Verificar eliminación
en listado inicial.
Ítem 3 Se cumple Descripción
Verificar la función de modificar. Se podrá hacer clic en el ícono de
lápiz (edición) para cada arquitectura tecnológica a modificar y
aparecer un formulario con datos previamente registrados.
Finalmente deberá aparecer un botón para guardar los cambios.
Verificar almacenamiento de datos modificados
Ítem 4 Se cumple Descripción
Pendiente
Desarrollo
Pruebas
CASOS DE PRUEBA PROYECTO BPMN
El usuario del sistema tiene la posibilidad de registrar, consultar, editar y eliminar arquitectura
tecnológica
Unitaria Caja Negra, caja Blanca
Verificar la función de registrar. Se podrá hacer clic en el botón
crear. Deberá aparecer un formulario para registrar servidores,
unidades de almacenamiento y racks. Finalmente deberá aparecer un
botón para guardar los cambios. Verificar almacenamiento de datos
registrados en listado inicial.
Documento de referencia Documentos requerimientos
Iniciar sesión en el sistema con usuario y contraseña
- Ingresar en la opción del menú Arquitectura Tecnológica
Ítem 1 Se cumple Descripción
Verificar la función de consultar. Deberá aparecer una lista con
información de cada arquitectura tecnológica registrada
72
4.11.5. CASO DE USO REGISTRAR RELACIONES 3 CAPAS (CU4)
Ilustración 62 CU4 (Registrar relaciones 3 capas)
Funcionalidad
Tipo de prueba Método
Responsable Francisco Ibáñez Estado caso de prueba
Prerrequisitos
Corrida 1 2 3
Si
No
Corrida 1 2 3
Si
No
Corrida 1 2 3
Si
No
Corrida 1 2 3
Si
No
Caja Blanca
Caja Negra
Documento de referencia Documentos requerimientos
CASOS DE PRUEBA PROYECTO BPMN
El usuario del sistema tiene la posibilidad de registrar, consultar, editar y eliminar relaciones (3 capas)
Unitaria Caja Negra, caja Blanca
Pendiente
Ítem 3 Se cumple Descripción
Iniciar sesión en el sistema con usuario y contraseña
- Ingresar en la opción del menú relaciones.
Ítem 1 Se cumple Descripción
Verificar la función de consultar. Deberá aparecer una lista con
información de cada relación a tres capas
Ítem 2 Se cumple Descripción
Verificar la función de registrar. Se podrá hacer clic en el botón
crear. Deberá aparecer un formulario para relacionar proceso,
sistema de información y arquitectura tecnológica. Finalmente
deberá aparecer un botón para guardar los cambios. Verificar
almacenamiento de datos registrados en listado inicial.
Desarrollo
Pruebas
Verificar la función de modificar. Se podrá hacer clic en el ícono de
lápiz (edición) para cada relación a modificar y aparecer un
formulario con relaciones previamente registradas. Finalmente
deberá aparecer un botón para guardar los cambios. Verificar
almacenamiento de datos modificados
Ítem 4 Se cumple Descripción
Verificar la función de eliminar. Se deberá ingresar al ícono de
edición (Lápiz) de la relación a eliminar y desplegarse un formulario
con un botón Eliminar. Verificar eliminación en listado inicial.
73
4.11.6. CASO DE USO CERRAR SESIÓN (CU5)
Ilustración 63 CU5 (Cerrar Sesión)
Funcionalidad
Tipo de prueba Método
Responsable Francisco Ibáñez Estado caso de prueba
Prerrequisitos
Corrida 1 2 3
Si
No
Caja Blanca
Caja Negra
Desarrollo
Pruebas
- Haber ingresado a la aplicación
Ítem 1 Se cumple Descripción
Verificar la función de cerrar sesión. Deberá hacer clic en el icono
superior izquierdo y elegir la opción "cerrar sesión" y salir a la
pantalla inicial de la plataforma.
CASOS DE PRUEBA PROYECTO BPMN
El usuario del sistema tiene la posibilidad de cerrar sesión.
Unitaria Caja Negra, caja Blanca
Pendiente
Documento de referencia Documentos requerimientos
74
5. CONCLUSIONES
• Se logró elaborar el modelado de procesos genéricos de negocio en tres arquitecturas,
bajo la metodología BPM; por tanto, se pudo validar que la metodología permite
modelar cualquier proceso, siempre y cuando se tenga claridad de lo que se quiere
alcanzar. En este caso, una PWA para poder gestionar la información de las
organizaciones en cuanto a tecnología.
• Se definieron los casos de uso de la PWA con los mismos requerimientos de los
modelos BPM. Lo cual permitió mayor coherencia para abordar la ingeniería de
software.
• Se diseñaron los diagramas de secuencia y los mockups de la PWA como
complemento sustancial para la fase de implementación, según el enfoque de
desarrollo iterativo centrado en el modelo.
• Adoptar tecnología cloud contribuye satisfactoriamente al desarrollo de aplicaciones.
Los servicios de Firebase abren posibilidades para futuros proyectos del programa de
Ingeniería de Sistemas y Telecomunicaciones.
• Realizar las pruebas funcionales a la PWA, permitió corroborar que la metodología
centrada en el modelo realmente aplica; ya que, haber hecho un buen análisis, modelo
y diseño disminuyó considerablemente los errores en la fase de implementación.
• Este tipo de proyectos permiten adquirir nuevas habilidades para el desarrollo de
soluciones. React, Node y Firebase son tecnologías que deberían enseñarse en los
programas académicos.
75
6. RECOMENDACIONES
• Se recomienda añadir nuevas funcionalidades, como la de permitir que los sistemas
de información y los dispositivos pueden configurarse con protocolos como el SNMP
v3 para realizar monitoreo en tiempo real y verificar funcionamiento.
• Agregar la función de notificaciones para informar cambios en cualquiera de las capas
de la PWA puede ser una buena mejora para enriquecer el sistema.
• Se deben desarrollar dashboards con la información de cada proceso, y las estadísticas
recogidas de los cambios hechos en la aplicación.
• Es necesario hacer más gráfico el registro de la información principalmente en las
relaciones, de manera que se puedan arrastrar y vincular elementos.
76
7. REFERENCIAS BIBLIOGRÁFICAS
[1] Club BPM, El Libro del BPM, Madrid: Print Marketing, S.L., 2011.
[2] R. Calduch Cervera, «El método descriptivo,» de Métodos y Técnicas de Investigación
Internacional, Madrid, Universidad Complutense de Madrid, 2014, pp. 29-31.
[3] J. De Freitas y T. -. I. Chau, «Desarrollo iterativo en soluciones de gestión deprocesos de
negocios,» developersWorks, pp. 1-19, 2010.
[4] J. Berrocal, J. M. García y J. M. Murillo, «Hacia una gestión del proceso software dirigida por
Procesos de Negocio,» de Quercus Software Engineering Group, Cáceres, 2007.
[5] Aura Portal, «Aura Portal,» 2002. [En línea]. Available:
https://www.auraportal.com/es/destacados/el-valor-de-rpa-bpm/. [Último acceso: 31
Agosto 2019].
[6] N. Palmer, «bpm.com Enabling the Digital Enterprise,» bpm.com, 5 Mayo 2018. [En línea].
Available: https://bpm.com/first-impressions/first-impressions-advantys-workflowgen.
[Último acceso: 31 Agosto 2019].
[7] E. Gonzalez y a. G. Collaboration & Workflow IT Manager, «bizagi.com,» Collaboration &
Workflow IT Manager, 2002. [En línea]. Available: https://www.bizagi.com/es/productos.
[Último acceso: 31 Agosto 2019].
[8] O. LI-KIANG-CHEONG, C. JUDITH, D. DUMORTIER y T. COHEN, «Full Automated Nagios,» FAN,
19 Octubre 2011. [En línea]. Available:
http://www.fullyautomatednagios.org/documentation/. [Último acceso: 31 Agosto 2019].
[9] Artica Soluciones Tecnológicas, «PANDORAFMS COMMUNITY,» Artica Soluciones
Tecnológicas, 2004. [En línea]. Available: https://pandorafms.org/es/. [Último acceso: 31
Agosto 2019].
[10] J. C. Cantó, «Bilib - Centro de Apoyo Tecnológico de Castilla-La Mancha,» Bilib, 28 11 2018.
[En línea]. Available: https://www.bilib.es/actualidad/blog/noticia/articulo/arquitectura-
web-soa-vs-microservices-aplicaciones-y-diferencias/. [Último acceso: 31 Agosto 2019].
[11] A. e. a. Arsanjani, Business Process Management Design Guide:Using IBM Business Process
Manager, Copyright International Business Machines Corporation, 2015.
77
[12] TechTarget, «TechTarget, Inc.,» Das, Manoj; Deb, Manas; Wilkins, Mark, 27 Noviembre 2012.
[En línea]. Available: https://searchdatacenter.techtarget.com/es/cronica/Introduccion-a-
BPM-el-que-el-por-que-y-el-como. [Último acceso: 1 Septiembre 2019].
[13] T. Alter, Building Proggressive Web Apps, O' Reilly Media Inc., 2017.
[14] Google Developers, «Web Fundamentals,» Google, [En línea]. Available:
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp. [Último
acceso: 1 Septiembre 2019].
[15] B. Frankston, «CircleID,» Iomemo Inc., 2002. [En línea]. Available:
http://www.circleid.com/posts/20180712_a_progressive_web_apps_world/. [Último
acceso: 7 Septiembre 2019].
[16] arvindpdnmn y gurumoorthyP, «Devopedia,» [En línea]. Available:
https://devopedia.org/transpiler. [Último acceso: 7 Septiembre 2019].
[17] J. Barabas, «IBM,» IBM, [En línea]. Available: https://www.ibm.com/co-es/cloud/learn/iaas-
paas-saas. [Último acceso: 1 Septiembre 2019].
[18] Google, «Google Cloud,» [En línea]. Available:
https://cloud.google.com/docs/overview/?hl=es-419. [Último acceso: 8 Septiembre 2019].
[19] K. Fromm, «readwrite,» 2003. [En línea]. Available: https://readwrite.com/2012/10/15/why-
the-future-of-software-and-apps-is-serverless/. [Último acceso: 7 Septiembre 2019].
[20] Anomaly Innovations., «Serverless Stack,» [En línea]. Available: https://serverless-
stack.com/chapters/what-is-serverless.html. [Último acceso: 7 Septiembre 2019].
[21] W3Schools, «w3schools.com,» Refsnes Data, 1999. [En línea]. Available:
https://www.w3schools.com/js/default.asp. [Último acceso: 7 Septiembre 2019].
[22] Facebook Open Source, «React,» Facebook Inc., [En línea]. Available: https://reactjs.org/.
[Último acceso: 7 Septiembre 2019].
[23] M. Abernethy, «IBM,» 14 Junio 2011. [En línea]. Available:
https://www.ibm.com/developerworks/ssa/opensource/library/os-nodejs/index.html.
[Último acceso: 7 Septiembre 2019].
[24] U. Patel, «Tristate Technology,» 2012. [En línea]. Available:
https://www.tristatetechnology.com/blog/firebase-backend-mobile-app/. [Último acceso: 7
Septiembre 2019].
78
[25] F. Pinciroli, «Modelado de Procesos con BPMN 2.0,» de Conferencia Universidad Católica de
Pereira, Pereira, 2017.
79
8. ANEXOS
8.1. ANEXO 1. INSTRUMENTO DE ENCUESTA PARA WORLD BASC
ORGANIZATION
Fuente: Elaboración Propia