PWA – Prototyping of Web Applications Una Herramienta de Soporte a la Ingeniería de Requerimientos Universidad Nacional de Asunción Facultad Politécnica

PWA – Prototyping of Web Applications Una Herramienta de Soporte a la Ingeniería de Requerimientos TRABAJO DE FIN DE GRADO Autores 2 Tutor: DANIEL EDUARDO RIVAS LÓPEZ. LEPOLDO ARSENIO POLETTI OJEDA. Prof. M.Sc. LUIS GILBERTO SALINAS. ASUNCIÓN

PWA – Prototyping of Web Applications Agenda 3 1.Justificación. 2.Objetivos. 3.Introducción a la Ingeniería del Software. 4.Ingeniería Web. 5.Ingeniería de Requerimientos. 6.Prototipado. 7.Propuesta. 8.PWA. 9.Prototipo Generado. 10.Caso de Estudio. 11.Conclusiones y Trabajos Futuros.

Justificación 1 PWA – Prototyping of Web Applications 4

Introducción  La primera etapa dentro de la concepción de un sistema consiste en entender y representar de un modo apropiado los requerimientos que presenta el usuario.  Sin embargo, uno de los desafíos más importantes con el que se encuentra el ingeniero de software es comprender las verdaderas necesidades de los clientes.  Ocurren problemas a causa de especificaciones incompletas, mal estructuradas, escasa participación de usuarios, etc.  Las aplicaciones web no escapan a estos problemas, siendo una de las más desarrolladas, hoy en día, y con escasas herramientas enfocadas a la especificación de requerimientos.  Todo esto hace que se pierda una gran cantidad de tiempo y dinero durante el proceso de desarrollo de software. Justificación PWA – Prototyping of Web Applications 5

Justificación  La ingeniería de requerimientos nace de manera tal a ofrecer una posible solución a estos problemas.  Una opción propuesta por la ingeniería de requerimientos es mediante el prototipado de aplicaciones.  El prototipo de un producto software es una versión inicial que permite llegar de manera eficaz al entendimiento de los requisitos, reducir la complejidad del problema y ofrecer una pronta validación del diseño del sistema.  Una herramienta que permita generar estos prototipos, permitiría a los desarrolladores optimizar el tiempo, capturando y validando requerimientos de manera tal a entregar el producto final con una mayor calidad y dentro de los plazos establecidos. Justificación PWA – Prototyping of Web Applications 6

Objetivos 2 PWA – Prototyping of Web Applications 7

Objetivos Objetivo General  Desarrollar una herramienta, basada en modelos de proceso de la ingeniería web, que permita la generación automática de prototipos de manera a satisfacer los objetivos propuestos por la ingeniería de requerimientos. Objetivos Específicos  Mejorar la obtención y el análisis de los requerimientos.  Facilitar la validación de los requerimientos.  Automatizar el proceso del prototipado de manera a agilizar las etapas iníciales del desarrollo de software. PWA – Prototyping of Web Applications 8 Objetivos

Ingeniería del Software 3 PWA – Prototyping of Web Applications 9

Conceptos Básicos  La Ingeniería del Software es una disciplina de la ingeniería o área de la informática que concierne a todos los aspectos de la producción de software.  Concierne a teorías, métodos y herramientas para el desarrollo profesional de software. Ingeniería del Software PWA – Prototyping of Web Applications 10  Entre las metas que se propone podemos citar:  Obtener un producto exitoso.  Aumentar la productividad.  Realizar el proceso de desarrollo de manera eficiente.  Definimos como Proceso del Software a un conjunto estructurado de actividades requeridas para desarrollar un sistema de software.  Las actividades varían dependiendo de la organización y del tipo de sistema a desarrollarse.

Modelos de Proceso Metodologías Tradicionales  Modelo en Cascada.  Modelo Evolutivo.  Prototipado.  Modelo en Espiral. Metodologías Ágiles  SCRUM.  Programación Extrema (XP). PWA – Prototyping of Web Applications 11 Ingeniería del Software Captura de Requerimientos Análisis y DiseñoImplementación Pruebas DespliegueMantemiento

Ingeniería Web 4 PWA – Prototyping of Web Applications 12

Ingeniería Web  La ingeniería web podría definirse como el proceso utilizado para crear, implantar y mantener aplicaciones web de alta calidad [Murugesan2001]. Metodologías Web  Object Oriented Hypermedia Design Method - OOHDM.  UML-Based Web Engineering - UWE.  Agile Web Applications - AWA. PWA – Prototyping of Web Applications 13 Ingeniería Web

Metodologías Web OOHDM - Object Oriented Hypermedia Design Method  Diseño Conceptual.  Diseño Navegacional.  Diseño de Interfaz Abstracto.  Implementación. UWE - UML-Based Web Engineering  Análisis de Requerimientos.  Modelado Conceptual.  Diseño Navegacional.  Modelado de Presentación. PWA – Prototyping of Web Applications 14 Ingeniería Web

Metodologías Web AWA – Agile Web Applications  Requerimientos.  Planificación.  Modelado.  Implementación.  Evaluación y Retroalimentación. PWA – Prototyping of Web Applications 15 Ingeniería Web

Ingeniería de Requerimientos 5 PWA – Prototyping of Web Applications 16

Conceptos Básicos  Se denomina Ingeniería de Requerimientos al conjunto de todas las actividades involucradas al descubrimiento, análisis, documentación y mantenimiento de los requerimientos para un producto.  Las actividades del Proceso de la Ingeniería de Requerimientos incluyen la extracción de requerimientos, el análisis, la negociación y la validación.  El objetivo principal es entregar una especificación de requisitos de software correcta y completa.  El costo de detección de errores tiene un aumento exponencial a medida que el desarrollo avanza en sus etapas [Boehm1981]. Ingeniería de Requerimientos PWA – Prototyping of Web Applications 17

Costo de detección de errores Ingeniería de Requerimientos PWA – Prototyping of Web Applications 18 Requerimientos Diseño Implementación ValidaciónEvolución Tiempo Costo

Procesos Principales Ingeniería de Requerimientos PWA – Prototyping of Web Applications 19 Obtención y Análisis de Requerimientos - Entrevistas - Tormenta de Ideas - Cuestionarios- Prototipos Especificación de Requerimientos - Lenguaje Natural- Escenarios - Plantillas- Casos de Usos Validación de Requerimientos - Revisiones- Casos de Pruebas - Auditorías- Prototipos

Prototipado 6 PWA – Prototyping of Web Applications 20

Conceptos Básicos  Para muchos usuarios resulta difícil imaginar cómo se verá el sistema a partir de solamente la especificación de requerimientos.  Una manera de visualizar y entender mejor estas especificaciones de requerimientos es desarrollando un prototipo del sistema. Prototipado PWA – Prototyping of Web Applications 21  Algunos beneficios que se obtienen al desarrollar un prototipo son:  Los mal entendidos son detectados tan pronto como las funciones del prototipo son demostradas.  Servicios que el usuario olvida mencionar son detectados rápidamente.  El prototipo sirve como una base para escribir las especificaciones de manera a garantizar la calidad del sistema.

Prototipo de Software Propósito  El propósito principal del prototipado es capturar y validar los requerimientos del software. Enfoque de Desarrollo  Enfoque cerrado o prototipo desechable.  Enfoque abierto o prototipo evolutivo. PWA – Prototyping of Web Applications 22 Prototipado

Propuesta 7 PWA – Prototyping of Web Applications 23

Propuesta  Basado en la investigación del estado del arte.  En este trabajo se propone una herramienta de soporte a la Ingeniería de Requerimientos que permita mejorar la calidad del software.  Basado exclusivamente en técnicas, notaciones y mecanismos de extensión UML (Unified Modeling Lenguage) y la metodología UWE.  Prototyping of Web Applications - PWA Propuesta PWA – Prototyping of Web Applications 24

Características de la Herramienta Propuesta  Mejorar la obtención y el análisis de los requerimientos.  Facilitar la validación de los requerimientos.  Utilización de un lenguaje sencillo.  Mejorar la calidad del software.  Disminuir los costos y retrasos del proyecto.  Evitar rechazos de usuarios finales.  Soporte para el proceso de prototipado evolutivo.  Generación de un sistema robusto. Diseñado con una arquitectura actual y muy competente en el mercado mundial. Propuesta PWA – Prototyping of Web Applications 25 PWA fue diseñada enfatizando los siguientes puntos:

Proceso de Desarrollo PWA PWA – Prototyping of Web Applications 26 Propuesta Captura de Requerimientos Modelado Generación de Prototipo Validación de Requerimientos

Proceso de Desarrollo PWA  Se obtienen los requerimientos a grandes rasgos.  Se van definiendo mejor a medida que avance el ciclo de vida. PWA – Prototyping of Web Applications 27 Propuesta Captura de Requerimientos Modelado Generación de Prototipo Validación de Requerimientos

Proceso de Desarrollo PWA  Modelo de Datos.  Modelo de Navegación.  Modelo de Presentación. PWA – Prototyping of Web Applications 28 Propuesta Captura de Requerimientos Modelado Generación de Prototipo Validación de Requerimientos

Proceso de Desarrollo PWA PWA – Prototyping of Web Applications 29 Propuesta Captura de Requerimientos Modelado Generación de Prototipo Validación de Requerimientos

Proceso de Desarrollo PWA PWA – Prototyping of Web Applications 30 Propuesta Entrada Salida Modelado PWA Prototipo del Sistema Conceptual Navegación Presentación Generación de Prototipo:

Proceso de Desarrollo PWA PWA – Prototyping of Web Applications 31 Propuesta Captura de Requerimientos Modelado Generación de Prototipo Validación de Requerimientos

Caso de Estudio 10 PWA – Prototyping of Web Applications 32

Caso de Estudio  A continuación se presenta el proceso de desarrollo de una aplicación web utilizando la herramienta PWA y la metodología AWA.  El proyecto consiste en el desarrollo de un sistema web para una cooperativa.  La cooperativa se encuentra compuesta por socios de la familia Viveros, que desean una mejor forma de administrar su capital construyendo su propia cooperativa familiar.  Los usuarios del sistema son básicamente los socios y funcionarios de la misma.  Los funcionarios pueden realizar aperturas de libretas de ahorro, operaciones de depósitos, extracciones, créditos, aportes y solidaridad.  Los socios pueden acceder a verificar el estado de sus cuentas y realizar operaciones sobre las mismas. Caso de Estudio PWA – Prototyping of Web Applications 33

Desarrollo del Caso de Estudio CoFaVi Equipo Cliente  Lic. Ramón Rojas: Director de la cooperativa.  Lic. Carmelo Ramírez: encargado de la sección de informática. Equipo de Desarrollo  Leopoldo Poletti.  Eduardo Rivas. PWA – Prototyping of Web Applications 34 Caso de Estudio

Desarrollo del Caso de Estudio CoFaVi Herramientas de Desarrollo  Sistema Operativo: Windows XP, Vista y Seven.  Entorno de Desarrollo: Netbeans 6.7.  Herramienta de Diseño y Modelado: ArgoUML  Servidor de Aplicaciones: Glassfish v2.1 y Tomcat  Base de Datos: PostgreSQL  Controlador de Versiones: Subversion. PWA – Prototyping of Web Applications 35 Caso de Estudio

Desarrollo del Caso de Estudio CoFaVi Requerimientos Iniciales  Administración de Usuarios: crear, editar, visualizar, listar, borrar.  Administración de Socios, Familiares y Funcionarios: crear, editar, visualizar, listar, borrar.  Administración de Roles: crear, editar, visualizar, listar, borrar.  Control de Acceso.  Apertura de libretas de ahorro.  Realizar operaciones de depósito y extracción (ahorros).  Realizar operaciones de créditos.  Registro de aporte y solidaridad.  Realizar operaciones de préstamos. PWA – Prototyping of Web Applications 36 Caso de Estudio

Iteración Nº 1 Funcionalidades Implementadas  Administración de Usuarios: crear, editar, listar, visualizar, borrar.  Administración de Socios y Funcionarios: crear, editar, listar, visualizar, borrar.  Administración de Roles: crear, editar, listar, visualizar, borrar.  Control de Acceso.  Apertura de libretas de ahorro.  Realizar operaciones de depósito y extracción (ahorros).  Realizar operaciones de créditos. PWA – Prototyping of Web Applications 37 Caso de Estudio Fecha de Inicio de la Iteración: 05/03/2011

Resumen de la Iteración Nº 1 PWA – Prototyping of Web Applications 38 Caso de Estudio Fecha de Fin de la Iteración: 19/03/2011 Resumen de Tiempo TareaTiempo Requerimientos14 Hs. Planificación6 Hs. Modelado24 Hs. Implementación5 min. Evaluación y Retroalimentación6 Hs. Pruebas3 Hs. Total de Tiempo Empleado:53 Hs. 5 min.

Iteración Nº 2 Funcionalidades Implementadas  Administración de Aportes: crear, editar, visualizar, listar, borrar.  Administración de Solidaridad: crear, editar, visualizar, listar, borrar.  Administración de Tipos de Ahorros: crear, editar, visualizar, listar, borrar.  Consulta de Cuentas por Socios. PWA – Prototyping of Web Applications 39 Caso de Estudio Fecha de Inicio de la Iteración: 21/03/2011

Resumen de la Iteración Nº 2 PWA – Prototyping of Web Applications 40 Caso de Estudio Fecha de Fin de la Iteración: 02/04/2011 Resumen de Tiempo TareaTiempo Requerimientos2 Hs. Planificación3 Hs. Modelado10 Hs. Implementación5 min. Evaluación y Retroalimentación3 Hs. Pruebas2 Hs. Total de Tiempo Empleado:20 Hs. 5 min.

Iteración Nº 3 Funcionalidades Implementadas  Administración de Familiares de Socios: crear, editar, visualizar, listar, borrar.  Proyección de Préstamos para Socios. PWA – Prototyping of Web Applications 41 Caso de Estudio Fecha de Inicio de la Iteración: 04/04/2011

Resumen de la Iteración Nº 3 PWA – Prototyping of Web Applications 42 Caso de Estudio Fecha de Fin de la Iteración: 16/04/2011 Resumen de Tiempo TareaTiempo Requerimientos2 Hs. Planificación2 Hs. Modelado3 Hs. Implementación5 min. Evaluación y Retroalimentación2 Hs. Pruebas1 Hs. Total de Tiempo Empleado:10 Hs. 5 min.

Resumen de la Iteración Nº 4 PWA – Prototyping of Web Applications 43 Caso de Estudio Fecha de Inicio de la Iteración: 18/04/2011 Fecha de Fin de la Iteración: 30/04/2011 Resumen de Tiempo TareaTiempo Requerimientos30 min. Planificación30 min. Implementación4 Hs. Evaluación y Retroalimentación1 Hs. Pruebas1 Hs. Total de Tiempo Empleado:7 Hs.

Análisis Final del Desarrollo del Proyecto PWA – Prototyping of Web Applications 44 Caso de Estudio Total de Funcionalidades Implementadas: 29. Tiempo Total Utilizado: 90 Hs. 20 min. Estimación del Tamaño del Proyecto con CMMI PE = (C + AV + ASW + AHW + S) * T * O * R * D  C: Clasificación.  AV: Actor Visual.  ASW: Actores de Software.  AHW: Actores de Hardware. En donde:  S: Salidas.  T: Tecnología Utilizada.  O: Optimización.  R: Reusabilidad.  D: Dominio del Problema.

PWA – Prototyping of Web Applications 45 Caso de Estudio Estimación del Tamaño del Proyecto con CMMI Nº Nombre de la Funcionalidad CAVASWAHWTORSD Punto de Estimación 1 Registro de Usuario Vista/Edición de Usuario Eliminar Usuario Registro de Funcionario Vista/Edición de Funcionario Eliminar Funcionario … … … ……………………… 28 Agregar Relación de Familiares a Socios Proyección de Préstamos para Socios TOTAL:426.00

PWA – Prototyping of Web Applications 46 Caso de Estudio Estimación del Tiempo con CMMI Etapa de ProcesoPorcentajeTotal Requerimientos25% Análisis y Diseño30% Implementación100% Prueba50% Despliegue5%21.30 Planificación10%42.60 Adm. Conf.10%42.60 Monit. y Control15%63.90 TOTAL

Estimación del Tiempo Ahorrado  Total de horas sin implementación con AWA: 90 hs.  Total de horas de implementación estimada: 426 hs.  Total de horas necesarias con AWA puro: = 516 hs.  Total de horas con CMMI: 1044 hs.  Total de horas con PWA + AWA: hs. PWA – Prototyping of Web Applications 47 Caso de Estudio PWA permite ahorrar las horas de implementación con cualquier metodología utilizada. Para este caso: 426 hs.

Estimación del Tiempo Ahorrado PWA – Prototyping of Web Applications 48 Caso de Estudio

Conclusiones y Trabajos Futuros 11 PWA – Prototyping of Web Applications 49

Conclusiones  No se encontró ninguna herramienta enfocada directamente a la obtención de requerimientos y el prototipado de aplicaciones web.  Entre las distintas metodologías estudiadas se encontró que el UWE se ajustaba más a las características deseadas debido a las notaciones UML utilizadas.  PWA nace en base a los estudios y metodologías expuestos.  La arquitectura propuesta por PWA ha demostrado ser bastante aceptable, actual y eficiente en cuanto a las arquitecturas utilizadas hoy en día para el desarrollo de aplicaciones web.  PWA y la metodología AWA han demostrado ser una propuesta adecuada y válida para el prototipado de aplicaciones web.  PWA permite ahorrar un alto porcentaje de tiempo en comparación a otras metodologías tradicionales. Conclusiones y Trabajos Futuros PWA – Prototyping of Web Applications 50

Aportes  Estado del arte en Ingeniería de Software, Ingeniería de Requerimientos, Ingeniería Web y Prototipado de Software.  Un modelado simple que resulta fácil de entender y desarrollar.  Una herramienta que permite mejorar la obtención, el análisis y la validación de los requerimientos.  Una herramienta que permite automatizar el proceso de desarrollo de software y disminuir los costos.  Una herramienta sencilla que puede ser utilizada con diferentes metodologías de software de manera agilizar el proceso de desarrollo de las mismas. Conclusiones y Trabajos Futuros PWA – Prototyping of Web Applications 51

Trabajos Futuros  Aumentar la experiencia de desarrollo con PWA.  Entorno de Desarrollo PWA.  Soporte para la inclusión de Lógica de Negocios.  Soporte para cambios realizados en el código.  Soporte para otras arquitecturas. Conclusiones y Trabajos Futuros PWA – Prototyping of Web Applications 52

¡Gracias por su atención! PWA – Prototyping of Web Applications 53

Bibliografía  Mejorar la obtención y el análisis de los requerimientos.  Facilitar la validación de los requerimientos.  Utilización de un lenguaje sencillo.  Mejorar la calidad del software.  Disminuir los costos y retrasos del proyecto. Bibliografía PWA – Prototyping of Web Applications 54 With the use of this free template you accept the following use and license conditions. Not for commercial use.  The template can be used freely by private persons. The commercial employment of the free templates is not permitted. Any further trade with contents as well as making the diagram/template/animations available in changed or unchanged form for downloading on other web sites or multiplying & the selling on data media of any kind are forbidden.  In no event shall PresentationPoint be liable for any indirect, special or consequential damages arising out of or in connection with the use of the template.  In case of questions for commercial usage please get in contact with us.

Here comes your footer  Page 55 Enter your title here Color pallet  This is a dummy text. Please ignore the following content as it is dummy text.  This is definitely some dummy text.  The text here is meaningless as it is used to fill this slide.  Replace this dummy text with our own text. Enter your subtitle here

Here comes your footer  Page 56 Enter your title here  This is a dummy text. Please ignore the following content as it is dummy text.  This is definitely some dummy text.  The text here is meaningless as it is used to fill this slide.  Replace this dummy text with our own text. Enter your subtitle here

Here comes your footer  Page 57 Enter your title here  This is a dummy text. Please ignore the following content as it is dummy text.  This is definitely some dummy text.  The text here is meaningless as it is used to fill this slide.  Replace this dummy text with our own text.  This is a dummy text. Please ignore the following content as it is dummy text.  This is definitely some dummy text.  The text here is meaningless as it is used to fill this slide.  Replace this dummy text with our own text. Enter your subtitle here

Here comes your footer  Page 58 Enter your title here  This is a dummy text. Please ignore the following content as it is dummy text.  This is definitely some dummy text.  The text here is meaningless as it is used to fill this slide.  Replace this dummy text with our own text. Enter your subtitle here

Here comes your footer  Page 59 Enter your title here  This is a dummy text. Please ignore the following content as it is dummy text.  This is definitely some dummy text.  The text here is meaningless as it is used to fill this slide.  Replace this dummy text with our own text. Enter your subtitle here

Here comes your footer  Page 60 Software and Tools for Microsoft PowerPoint. The website with innovative solutions. Save time and money by automating your presentations. With the use of this free template you accept the following use and license conditions. Not for commercial use.  The template can be used freely by private persons. The commercial employment of the free templates is not permitted. Any further trade with contents as well as making the diagram/template/animations available in changed or unchanged form for downloading on other web sites or multiplying & the selling on data media of any kind are forbidden.  In no event shall PresentationPoint be liable for any indirect, special or consequential damages arising out of or in connection with the use of the template.  In case of questions for commercial usage please get in contact with us. Conditions