PWA – Prototyping of Web Applications

PWA – Prototyping of Web Applications

Una Herramienta de Soporte a la Ingeniería de Requerimientos

Universidad Nacional de Asunción

Facultad Politécnica

Ingeniería Informática



Una Herramienta de Soporte a la Ingeniería de Requerimientos

TRABAJO DE FIN DE GRADO

Autores

2

Tutor:

LEPOLDO ARSENIO POLETTI OJEDA.

DANIEL EDUARDO RIVAS LÓPEZ.

Prof. M.Sc. LUIS GILBERTO SALINAS.

ASUNCIÓN - 2012


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. Herramienta de Soporte.

9. Generación de Prototipos.

10.Caso de Estudio.

11.Conclusiones y Trabajos Futuros.

Justificación

PWA – Prototyping of Web Applications 4

Introducción

La primera etapa dentro del proceso de desarrollo 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 usuarios.

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


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


Objetivos


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 del desarrollo de software.


Objetivos

Ingeniería del Software


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.



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



Ingeniería Web


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.


Ingeniería Web

Metodologías Web

UWE - UML-Based Web Engineering

UWE es un proceso de desarrollo para aplicaciones Web que se centra en el diseño sistemático, la personalización y la generación semi-automática del sistema.


Ingeniería Web

Fases de Desarrollo:

Análisis de Requerimientos.

Modelado Conceptual.

Diseño Navegacional.

Modelado de la Presentación.

Metodologías Web

AWA – Agile Web Applications

Requerimientos.

Planificación.

Modelado.

Implementación.

Evaluación y Retroalimentación.


Ingeniería Web

Ingeniería de Requerimientos


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



Costo de detección de errores



Procesos Principales



Prototipado


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


Algunos beneficios que se obtienen al desarrollar un prototipo son:

Funcionalidades que el usuario olvida mencionar son detectadas rápidamente.

Los mal entendidos son detectados tan pronto como las funciones del prototipo son demostradas.

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.


Prototipado

Herramientas para la Creación de Prototipos

Pencil.

Wireframe Software.

Mockups.


Prototipado

Diseño de Prototipos

Diseño y Ejecución de Prototipos

iPLOTZ.

Pidoco.

Prototyper.

Propuesta


Propuesta

En este trabajo se propone una herramienta de soporte a la Ingeniería de Requerimientos que permita mejorar el proceso de desarrollo y la calidad del software.

Basado en la investigación del estado del arte.

Se investigaron otras herramientas como: Prototyper, Genexus, Mockups, etc.

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


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 fue diseñada enfatizando los siguientes puntos:

Proceso de Desarrollo PWA


Propuesta


Se obtienen los requerimientos básicos.

Se van definiendo mejor a medida que avance el ciclo de vida.


Propuesta


Modelo de Datos.

Modelo de Presentación.

Modelo de Navegación.


Propuesta



Propuesta



Propuesta

Generación de Prototipo:

ConceptualConceptual

PresentaciónPresentación

NavegaciónNavegación

Prototipo

del

Sistema



Propuesta

Herramienta de Soporte



Las actividades principales de PWA se centran en el Modelado y la Generación de Prototipo.

El modelado en el Ciclo de Vida de Desarrollo de Prototipos se realiza para plasmar los conceptos que surgieron de la Captura de Requerimiento.



Herramienta de Modelado – ArgoUML ArgoUML en su versión 0.27.

Herramienta de Diseño de Software muy amigable de código abierto.

Independiente de la plataforma, completamente desarrollado en JAVA.

Utiliza estándares abiertos como XMI, SVG y PGML.

Soporta la creación de diferentes tipos de diagramas UML:- Diagramas de clases.

- Diagramas de estado.

- Diagramas de caso de uso.

- Diagramas de actividades.

- Diagramas de integración.

- Diagramas de despliegue.

- Diagramas de secuencia.



Mecanismos de Extensibilidad –UML

Puede ser aplicado a cualquier elemento del modelo, como clases, atributos, paquetes, componentes, etc.

Generalmente se utiliza para representar un uso particular o para agrupar elementos con características similares.



Estereotipos

Extienden las propiedades de un elemento UML permitiendo añadir nueva información en la especificación de este.

Estas propiedades asignadas al elemento se aplican en forma de pares nombre = valor.

Valores Etiquetados

Modelado de Datos


Propuesta

PWA utiliza el Diagrama de Clases para el Modelado de Datos del Sistema.

Este diagrama se extiende por medio de estereotipos a nivel de los atributos de las clases.

+Atributos

+Clases

Diagrama de Clases

Base de Datos

+ Columnas

+Tablas

+ Restricciones de Integridad

+Relaciones

+Estereotipos

Modelado de Datos La mejor manera de dar soporte a la creación de un Modelo de

Datos físico, a partir de un Modelo UML, es estableciendo un conjunto de reglas o patrones para la transformación del Modelo de Clases UML.

Los Reglamentos de Transformación definen como transformar Clases UML a Tablas, asociaciones y generalizaciones a Relaciones, etc.



Diagrama de Presentación

El siguiente paso en PWA luego del modelado de los Datos es el modelado de las distintas interfaces para presentar los datos que tendrá el sistema, este modelado se realiza con la ayuda del Diagrama de Presentación.

El Diagrama de Presentación y los Componentes extendidos de PWA están inspirados en el Diagrama de Presentación de UWE.

En PWA se tiene una serie de estereotipos y valores etiquetados que son definidos a nivel de componente, estos estereotipos son utilizados para extender el Modelo y poder definir las distintas interfaces que tendrá el sistema.



Definición de elementos utilizados en el modelo propuesto



Estereotipos y los valores etiquetados- Relacionados entre

sí.

- Cardinalidad.

- Valores Etiquetados.

- Reglas para verificar el modelo.

Diagrama de Presentación



Resultado del Diagrama de Ejemplo «Data Table»

- {applyTo= Administrador}

- {columns= nombre,apellido}

- {labels=Nombre,Apellido}

- {selectionAppearance =CHECKBOX}



selectionAppearance = CHECKBOX

Acceso a la lista de Administradores

Panel de Presentación 1

Panel de Presentación 2

Ir a Visualizar Datos

Resultado del Diagrama de Ejemplo «Input Form»

- {applyTo= oficina}

- {columns= codigo,tipo,miembroDepartamento,fecha}

- {labels=Código,Tipo,Nombre Completo, Fecha Inicio}



Validación de Datos

Validación de Tipo Dato

Lista de Selección para asociar a Tabla relacionada

Botón de Navegación tipo

Imagen

Componentes de Prototipado Diseño interfaces.

Estereotipos y los valores etiquetados- Componentes Extendidos están relacionados entre sí.

- Cardinalidad .

- Valores Etiquetados.

- Reglas para verificar el modelo.



Diagrama de Presentación de Prototipado



Resultado del Diagrama de Ejemplo «Text Item»

- {label= Nombre}

- {requiered= S}

- {defaultValue=Ingrese su nombre}

- {readOnly=N}



Acceso al Prototipo

Etiquetas de Componentes

useTextField=N

Etiquetas de Componentes Requeridos en Negrita

«Date Item»- {label= Fecha de Ingreso}

- {requiered= S}

- {readOnly=N}

- {useTextField=N}

Grupo de Presentación Predeterminado En PWA existe la posibilidad de crear Grupos de Presentación

Predeterminados, este Grupo de Presentación se define utilizando el Diagrama de Despliegue de ArgoUML y utilizando un Componente Extendido «Default Presentation Group».

El Componente Extendido Grupo de Presentación sirve para crear un Prototipo en forma automática para las Clases que se definen en su valor etiquetado “applyToGroup”.



Resultado del Diagrama de Ejemplo



Opciones para Crear o Listar

Listado sobre la tabla Departamento

Doble click sobre un Registro para

Acceder a la Visualización

Opción crear nuevo Departamento

Validación de datos requeridos y tipos de datos

Botones para guardar, editar y borrar.

Diagrama de Navegación

El Diagrama de Navegación en PWA está inspirado en el Modelo de Navegación de UWE, este Diagrama Modela las funcionalidades del sistema, además define a través de qué pagina se puede acceder a una funcionalidad especifica e indica el comportamiento que toma la aplicación luego de una acción específica.

Una vez definidas la interfaces del sistema que se quiere Modelar a través del Diagrama de Navegación en PWA definimos el comportamiento del sistema indicando la navegación que se tendrá luego de cada acción.



Componentes de Navegación En el Diagrama de Navegación de PWA, para extender los Componentes

al igual que el Diagrama de Presentación, se trabaja básicamente con los conceptos de estereotipos y los valores etiquetados.



PWA soporta cuatro Componentes Extendidos principales para el Diseño del Diagrama de Navegación. Cada uno de ellos con sus Valores Etiquetados.

Componentes de Navegación



Generación de Prototipos


Estructura de la Herramienta de Generación de Prototipos



BD Generador (Acceso)

Aplicación WEB

CORE (GENERADOR DE

PROTOTIPO)

BD Prototipo Generado

- XMI

- Imágenes

- Prototipo Generado

- Estructura de BD

Arquitectura del Prototipo Generado



Data Base

Entity Hibernate

EJB

Servlet

Google Web Toolkit

web browser

Características Principales del Prototipo Generado

Base de Datos para PostgreSQL o MySQL.

Servidor de Aplicaciones Glassfish.

Proyecto Enterprise de NetBeans.

Basado en EJB y GWT.

Generación automática de Módulo de Seguridad (usuarios, roles).



Caso de Estudio


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


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.


Caso de Estudio


Herramientas de Desarrollo

Sistema Operativo: Windows XP, Vista y Seven.

Entorno de Desarrollo: Netbeans 6.7.

Herramienta de Diseño y Modelado: ArgoUML 0.27.

Servidor de Aplicaciones: Tomcat 6.0.18 y Glassfish v2.1.

Base de Datos: PostgreSQL 8.1.4.

Controlador de Versiones: Subversion.


Caso de Estudio


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.

Realizar operaciones de créditos.

Registro de aporte y solidaridad.

Realizar operaciones de préstamos.


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.

Realizar operaciones de créditos.


Caso de Estudio

Fecha de Inicio de la Iteración: 05/03/2011

Resumen de la Iteración Nº 1


Caso de Estudio

Fecha de Fin de la Iteración: 19/03/2011

Resumen de Tiempo

Tarea Tiempo

Requerimientos 14 Hs.

Planificación 6 Hs.

Modelado 24 Hs.

Implementación 5 min.

Evaluación y Retroalimentación 6 Hs.

Pruebas 3 Hs.

Total de Tiempo Empleado: 53 Hs. 5 min.

Resumen de Iteraciones


Caso de Estudio

Iteración Funcionalidades Tiempo

2

Adm. Aportes.Adm.Solidaridad.Adm. Tipos de Ahorros.Cuentas por Socios.

20 Hs. 5 min.

3Adm. Familiares de Socios.Proyección de Préstamos para Socios.

10 Hs. 5 min.

4 Correcciones y modificaciones. 7 Hs.

Análisis Final del Desarrollo del Proyecto


Caso de Estudio

Total de Funcionalidades Implementadas: 29.

Tiempo Total Utilizado: 90 Hs. 15 min.

Resultados


Caso de Estudio

Con la ayuda de la herramienta PWA se ha podido desarrollar, de manera exitosa, una aplicación web para la gestión de la cooperativa CoFaVi.

PWA permitió agilizar el proceso de desarrollo de la aplicación optimizando el tiempo de implementación y mejorando el proceso de captura y validación de requerimientos.

La aplicación permite a los funcionarios administrar las cuentas y el estado de los socios.

También permite a los socios visualizar el estado de sus cuentas, realizar operaciones básicas sobre las mismas y proyecciones de préstamos.


Caso de Estudio


Caso de Estudio

Otros Casos de Pruebas


Caso de Estudio

Sistema que permite llevar un control sobre el alquiler y ventas de películas para socios de un video club, así como también la administración de los empleados del mismo.

Sistema Académico

Video Club

Sistema académico básico que permite la administración de profesores, materias y grupos de investigación que pertenecen a un departamento.

Conclusiones y Trabajos Futuros


Conclusiones

No se encontró ninguna herramienta enfocada directamente a la obtención de requerimientos y el prototipado evolutivo 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 y servir de soporte a otras metodologías.



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 captura y validación de los requerimientos de manera a ofrecer una mayor calidad de los productos de software.

Una herramienta que permite automatizar el proceso del prototipado evolutivo 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.



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 o librerías.

Soporte para otras arquitecturas.



¡Gracias por su atención!


¿Preguntas?


Bibliografía

Bibliografía


[Allen2005] Allen Sharon, Terry Evan. “Beginning Relational Data Modeling”. 2ª ed. 2005.[Beck1999] Beck, Kent. “Extreme Programming Explained”. Addison-Wesley. 1999.[Boehm1976] Boehm, Barry W. “Software Engineering”. IEEE TRANSACTIONS ON COMPUTERS, Vol. C-25, NO. 12. 1976.[Escalona2002] Escalona M. J. Koch N. “Ingeniería de Requisitos en Aplicaciones para la Web: Un estudio comparativo”. Universidad de Sevilla. España. 2002.[Garrigós2008] Garrigós Fernández Irene. “A-OOH: Extending Web Applications Design with Dynamic Personalization”. Universidad de Alicante. España. 2008.[Hennicker2000] Hennicker R. Koch N. “A UML-based Methodology for Hypermedia Design”. Proceedings of the Unified Modeling Language Conference, UML´2000, Evans A. and Kent S. (Eds.). LNCS 1939, Springer Verlag, 2000. pp 410-424.[Hennicker2001] Hennicker, Rolf and Koch, Nora. “Systematic Design of Web Applications with UML”. In Siau, Keng and Halpin, Terry A., editors, Unified Modeling Language: Systems Analysis, Design and Development Issues. Idea Group, 2001. pp 1-20.[Koch2002] Koch N, Kraus A. “The Expressive Power of UML-based Web Engineering”. Ludwig-Maximilians-Universität München. Germany. 2002.[Koch2008] Koch N, Knapp A, Zhang G, Baumeister H. “UML-Based Web”. 2008.[Leffingwell2003] Leffingwell, Dean. Widrig, Don. “Managing Software Requirements: A Use Case Approach”. Second Edition. Addison Wesley, 2003.[ManifestoAgil] “Manifesto for Agile Software Development” [en línea] <http://agilemanifesto.org> [consulta: 08 julio 2010].[Murugesan2001] Murugesan, S. Ginige, A. “Web Engineering-An Introduction”. IEEE Multimedia, 2001. pp 14-18.[Pressman2002] Pressman, Roger S. “Ingeniería del Software: Un enfoque práctico”. 5º ed. Madrid, McGraw Hill. 2002.[Pressman2005] Pressman, Roger S. “Ingeniería del Software: Un enfoque práctico”. 6º ed. Madrid, McGraw Hill. 2005.[Quintero2008] Quintero Ricardo. “Desarrollo Dirigido por Modelos de Aplicaciones Web que integran Datos y Funcionalidad a partir de Servicios Web”. Tesis Doctoral. Universidad Politécnica de Valencia. España. 2008.[RossiPastor] Rossi, Pastor, Schawabe, Olsina. “An Approach Based on Standards. Web Engineering: Modelling and Implementing Web Applications”. [s.a].[Rumbaugh1999] Rumbaugh James, Jacobson Ivar, Booch Grady. “The Unified Modeling Language – Reference Manual”. 1999.[Silva2002] Silva D, Mercerat B. “Construyendo aplicaciones web con una metodología de diseño orientada a objetos”. UNAB 2002.[Schwaber1998] Schwaber. D. Rossi G. “An Object Oriented Approach to Web-Based Application Design”. PUC-RIO. Brasil, 1998.[Sommerville2005] Sommerville Ian. “Ingeniería del Software”. 7ª ed. Pearson. 2005.[Villalba2008] Villalba Oracio, Greco Claudia. “Ágil Web Applications (AWA): Una metodología ágil para el desarrollo de aplicaciones”. 2008.[Young2004] Young Ralph R. “The Requirements Engineering Handbook”. ARTECH HOUSE, INC. 2004.

http://agilemanifesto.org/

Documents

PWA – Prototyping of Web Applications