DESARROLLO DE UNA PROGRESSIVE WEB APP (PWA) PARA · PDF file desarrollo de una progressive web...

Click here to load reader

  • date post

    12-Aug-2020
  • Category

    Documents

  • view

    1
  • download

    0

Embed Size (px)

Transcript of DESARROLLO DE UNA PROGRESSIVE WEB APP (PWA) PARA · PDF file desarrollo de una progressive web...

  • 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 .....................................................................................