Table Of ContentPA1710-3-Gengular
Gengular: Hacia la automatización de aplicaciones empresariales bajo el paradigma de
arquitectura SPA y el enfoque MDE
DANIEL RAMIREZ ECHEVERRI
PONTIFICIA UNIVERSIDAD JAVERIANA
FACULTAD DE INGENIERÍA
MAESTRÍA EN INGENIERÍA DE SISTEMAS Y COMPUTACIÓN
BOGOTÁ, D.C.
2017
Memoria de Trabajo de Grado - Profundización
PA1710-3-Gengular
Gengular: Hacia la automatización de aplicaciones empresariales bajo el
paradigma de arquitectura SPA y el enfoque MDE
Autor:
Daniel Ramírez Echeverri
MEMORIA DEL TRABAJO DE GRADO REALIZADO PARA CUMPLIR UNO
DE LOS REQUISITOS PARA OPTAR AL TÍTULO DE
MAGÍSTER EN INGENIERÍA DE SISTEMAS Y COMPUTACIÓN
Director
Ing. María Consuelo Franky de Toro Ph.D
Comité de Evaluación del Trabajo de Grado
Ing. Jaime Andrés Pavlich Mariscal Ph.D
Ing. María Catalina Acero Rozo M.Sc
Página web del Trabajo de Grado
http://pegasus.javeriana.edu.co/~PA1710-3-Gengular
PONTIFICIA UNIVERSIDAD JAVERIANA
FACULTAD DE INGENIERÍA
MAESTRÍA EN INGENIERÍA DE SISTEMAS Y COMPUTACIÓN
BOGOTÁ, D.C.
Junio, 2017
Página i
Preparado por el Grupo Investigación Istar- Versión 1.01 – 12/03/2008
Memoria de Trabajo de Grado - Profundización
PONTIFICIA UNIVERSIDAD JAVERIANA
FACULTAD DE INGENIERÍA
MAESTRÍA EN INGENIERÍA DE SISTEMAS Y COMPUTACIÓN
Rector Magnífico
Joaquín Emilio Sánchez García S.J.
Decano Académico Facultad de Ingeniería
Ingeniero Jorge Luis Sánchez Téllez
Decano del Medio Universitario Facultad de Ingeniería
Padre Antonio José Sarmiento Nova, S.J.
Director Maestría en Ingeniería de Sistemas y Computación
Ingeniera Ángela Cristina Carrillo Ramos
Director Departamento de Ingeniería de Sistemas
Ingeniero Efraín Ortiz Pabón
Página ii
Preparado por el Grupo Investigación Istar- Versión 1.01 – 12/03/2008
Memoria de Trabajo de Grado - Profundización
Artículo 23 de la Resolución No. 1 de Junio de 1946
“La Universidad no se hace responsable de los conceptos emitidos por sus alumnos en sus
proyectos de grado. Sólo velará porque no se publique nada contrario al dogma y la moral
católica y porque no contengan ataques o polémicas puramente personales. Antes bien, que
se vean en ellos el anhelo de buscar la verdad y la Justicia”
Página iii
Preparado por el Grupo Investigación Istar- Versión 1.01 – 12/03/2008
Memoria de Trabajo de Grado - Profundización
AGRADECIMIENTOS
Agradezco a Dios, por su bondad y misericordia.
A mis padres, Carlos y Martha, por su incondicional amor y apoyo en todo lo que emprendo.
A mi hermano Sebastián, por sus invaluables consejos y su compañía.
Un agradecimiento especial a la profesora María Consuelo Franky PhD, por su dedicación,
compromiso e intereses durante todo el proyecto, pero sobre todo por sus enseñanzas a lo largo
de la maestría.
También quiero agradecer a la empresa Heinsohn Business Technology, por permitirme
realizar las pruebas con sus componentes empresariales.
Daniel Ramirez Echeverri
Página iv
Preparado por el Grupo Investigación Istar- Versión 1.01 – 12/03/2008
Memoria de Trabajo de Grado - Profundización
Contenido
INTRODUCCIÓN ............................................................................................................12
I - PRESENTACIÓN DEL TRABAJO DE GRADO ............................................................14
1. PROBLEMÁTICA U OPORTUNIDAD DE MEJORA. .........................................................14
2. OBJETIVOS ...............................................................................................................15
2.1. Objetivo General ...................................................................................................... 15
2.2. Objetivos Específicos................................................................................................ 15
3. METODOLOGÍA .........................................................................................................15
4. POTENCIAL DE INNOVACIÓN ....................................................................................17
II - MARCO CONTEXTUAL ..........................................................................................18
III - MARCO TEÓRICO ..................................................................................................21
1. INGENIERÍA DIRIGIDA POR MODELOS (MDE) ..........................................................21
2. MAVEN ....................................................................................................................23
3. SINGLE-PAGE APPLICATION (SPA) ..........................................................................23
3.1. AngularJS ................................................................................................................. 25
3.2. HTML5 ..................................................................................................................... 26
3.3. Bootstrap .................................................................................................................. 28
4. JAVA EMPRESARIAL JEE7 ........................................................................................29
4.1. Invocación de servicios REST .................................................................................. 31
4.2. Componentes de negocio EJB .................................................................................. 31
4.3. Entidades persistentes JPA ....................................................................................... 32
IV - DESARROLLO DEL PROYECTO ..............................................................................33
1. COMPARACIÓN Y SELECCIÓN DE TECNOLOGÍAS SPA ...............................................33
1.1. Comparación de tecnologías SPA ............................................................................ 34
1.2. Arquetipo generador de la arquitectura SPA seleccionada ..................................... 36
2. REQUERIMIENTOS Y FUNCIONALIDADES DEL TRANSFORMADOR ...............................38
3. ARQUITECTURA COMPLETA DE LA SOLUCIÓN ...........................................................42
3.1. Vista de procesos ...................................................................................................... 42
3.2. Vista lógica ............................................................................................................... 43
3.3. Vista de Despliegue de una Aplicación Generada ................................................... 45
Página v
Preparado por el Grupo Investigación Istar- Versión 1.01 – 12/03/2008
Memoria de Trabajo de Grado - Profundización
4. DISEÑO: REGLAS DE TRANSFORMACIÓN ...................................................................46
4.1. Reglas de transformación para páginas ................................................................... 46
4.1.1. Reglas de transformación relativas a flujo de navegación de páginas ..................... 50
4.1.2. Ilustración de la aplicación de las reglas de transformación para páginas ............... 50
4.2. Reglas de transformación para controladores ......................................................... 53
4.2.1. Ilustración de la aplicación de las reglas de transformación para controladores ..... 54
4.3. Reglas de transformación de servicios y entidades de negocio ............................... 56
5. MODELAJE DE COMPONENTES EMPRESARIALES Y ESTRATEGIA DE
TRANSFORMACIÓN/ACOPLE A UNA APLICACIÓN GENERADA ..........................................56
5.1. Modelaje de componentes empresariales ................................................................. 56
5.2. Estrategia de acople de componentes empresariales a una aplicación generada ... 58
6. VALIDACIÓN DEL TRANSFORMADOR ........................................................................62
6.1. Validación al generar la aplicación demo Gestión de Estudiantes ......................... 62
6.2. Validación al generar el componente menú y el componente notificaciones y
realizar su acople al demo ....................................................................................................... 64
6.3. Encuesta de validación ............................................................................................. 67
7. RESULTADOS OBTENIDOS .........................................................................................68
V - CONCLUSIONES Y TRABAJOS FUTUROS ...............................................................69
1. CONCLUSIONES ........................................................................................................69
2. TRABAJOS FUTUROS .................................................................................................70
VI - REFERENCIAS .......................................................................................................71
VII - ANEXOS ............................................................................................................76
Página vi
Preparado por el Grupo Investigación Istar- Versión 1.01 – 12/03/2008
Memoria de Trabajo de Grado - Profundización
Lista de tablas
Tabla 1: Componentes de AngularJS. Adaptado de Ruebbelke y Ford [20]. ......................... 26
Tabla 2: Tipos de entrada y controles para formularios en HTML5. ...................................... 27
Tabla 3: APIs más relevantes incorporadas en HTML5. ........................................................ 28
Tabla 4: Métodos HTTP en servicios web RESTful. .............................................................. 31
Tabla 5: Métodos del EntityManager en JPA. ........................................................................ 32
Tabla 6: Frameworks JavaScript más utilizados. .................................................................... 33
Tabla 7: Evaluación de frameworks JavaScript. Tomado de Koetsier [72] ............................ 35
Tabla 8: Requerimientos y funcionalidades del transformador. ............................................. 41
Tabla 9: Clases que conforman el transformador Gengular.................................................... 44
Tabla 10: Reglas de transformación para páginas. ................................................................. 50
Tabla 11: Reglas de transformación relativas a flujo de navegación de páginas. ................... 50
Tabla 12: Aplicación de las reglas de transformación para páginas. ...................................... 51
Tabla 13: Página resultante después de aplicar las reglas de transformación. ........................ 51
Tabla 14: Código fuente generado para página html crear estudiante. ................................... 53
Tabla 15: Reglas de transformación para controladores. ........................................................ 54
Tabla 16: Aplicación de las reglas de transformación para controladores. ............................. 55
Tabla 17: Código fuente generado para controlador AngularJS. ............................................ 55
Tabla 18: Encuesta de satisfacción a usuarios. ....................................................................... 67
Tabla 19: Medición de código generado aplicación Gestión de Estudiantes. ......................... 68
Página vii
Preparado por el Grupo Investigación Istar- Versión 1.01 – 12/03/2008
Memoria de Trabajo de Grado - Profundización
Lista de figuras
Figura 1: Inversión en I+D por parte de las empresas de software colombianas. Tomado de
MinTIC [57] ............................................................................................................................ 18
Figura 2: Descripción de la empresa caso de estudio, Heinsohn Business Technology. ........ 20
Figura 3: Metodología MDE. Adaptado de Brambilla, Cabot y Wimmer [11]. ..................... 21
Figura 4: Ciclo de vida de desarrollo MDA. Adaptado de Kleppe, Warmer y Bast [39]. ...... 22
Figura 5: Arquitectura de una aplicación SPA. Adaptado de Scott [35]. ............................... 24
Figura 6: Arquitectura de AngularJS. Adaptado de Ruebbelke y Ford [20]. .......................... 25
Figura 7: Sistema de Rejillas de Bootstrap. Tomado de Spurlock [47]. ................................. 29
Figura 8: Arquitectura de Java EE. ......................................................................................... 30
Figura 9: Componentes de Java EE 7. Tomado de Gupta [27]. .............................................. 30
Figura 10: Estructura del arquetipo maven Gengular-archetype. ........................................... 36
Figura 11: Instanciación de arquetipo Maven para crear un proyecto nuevo. ........................ 37
Figura 12: Vista de procesos de Gengular. ............................................................................. 42
Figura 13: Vista lógica de Gengular. ...................................................................................... 43
Figura 14: Vista despliegue de Gengular. ............................................................................... 45
Figura 15: Arquitectura de ISML. .......................................................................................... 46
Figura 16: Arquitectura actual de Componentes Empresariales. ............................................ 57
Figura 17: Estrategia para el modelado de Componentes Empresariales. .............................. 58
Figura 18: Diagrama de clases Gengular-Wizard. .................................................................. 60
Figura 19: Interfaz gráfica del Gengular-Wizard. ................................................................... 61
Figura 20: Página ISML de la aplicación Gestión Estudiantes. .............................................. 62
Figura 21: Controlador ISML de la aplicación Gestión Estudiantes. ..................................... 63
Figura 22: Servicio de persistencia para la aplicación Gestión Estudiantes. .......................... 63
Página viii
Preparado por el Grupo Investigación Istar- Versión 1.01 – 12/03/2008
Memoria de Trabajo de Grado - Profundización
Figura 23: Entidad ISML de la aplicación Gestión Estudiantes. ............................................ 64
Figura 24: Aplicación generada por el transformador Gengular. ........................................... 64
Figura 25: Componente de menú desarrollado ....................................................................... 65
Figura 26: Parametrización Casos de Uso Menú. ................................................................... 65
Figura 27: Componente de notificaciones desarrollado. ......................................................... 66
Figura 28: Acople de componentes utilizando el wizard. ....................................................... 66
Figura 29: Análisis de código generado aplicación Gestión de Estudiantes. .......................... 68
Página ix
Preparado por el Grupo Investigación Istar- Versión 1.01 – 12/03/2008
Description:HTML5-AngularJS-JEE7 y el paradigma de arquitectura de aplicaciones . tecnologías HTML5-AngularJS-JEE7 que facilite la creación de . Unidos, China, Rusia, India, Israel, Irlanda y Brasil, también han logrado incrementar sus.