DESARROLLO DE UNA PROGRESSIVE WEB APP (PWA) PARA...

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



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



12

Ilustración 38 Relación de las 3 capas paso 1 ..................................................................... 57



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



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.



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


58


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


Verificar la función de consultar. Deberá aparecer una lista con

información de cada proceso.


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


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



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



El usuario del sistema tiene la posibilidad de registrar, consultar, editar y eliminar sistemas de

información.


Pendiente



- Ingresar en la opción del menú Sistemas de Información



información de cada sistema de informació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


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



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



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



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.



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


Pendiente

Desarrollo

Pruebas


El usuario del sistema tiene la posibilidad de registrar, consultar, editar y eliminar arquitectura

tecnológica



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.



- Ingresar en la opción del menú Arquitectura Tecnológica



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



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



El usuario del sistema tiene la posibilidad de registrar, consultar, editar y eliminar relaciones (3 capas)


Pendiente



- Ingresar en la opción del menú relaciones.



información de cada relación a tres capas



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


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



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



Prerrequisitos

Corrida 1 2 3

Si

No

Caja Blanca

Caja Negra

Desarrollo

Pruebas

- Haber ingresado a la aplicació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.


El usuario del sistema tiene la posibilidad de cerrar sesión.


Pendiente


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

DESARROLLO DE UNA PROGRESSIVE WEB APP (PWA) PARA...

Documents

Transcript of DESARROLLO DE UNA PROGRESSIVE WEB APP (PWA) PARA...