1 / 75

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. PWA – Prototyping of Web Applications. Una Herramienta de Soporte a la Ingeniería de Requerimientos.

taipa
Télécharger la présentation

PWA – Prototyping of Web Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. Agenda Justificación. Objetivos. Introducción a la Ingeniería del Software. Ingeniería Web. Ingeniería de Requerimientos. Prototipado. Propuesta. Herramienta de Soporte. Generación de Prototipos. Caso de Estudio. Conclusiones y Trabajos Futuros. PWA – Prototyping of Web Applications 3

  4. Justificación PWA – Prototyping of Web Applications 4

  5. 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 Introducción PWA – Prototyping of Web Applications 5

  6. 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 Justificación PWA – Prototyping of Web Applications 6

  7. Objetivos PWA – Prototyping of Web Applications 7

  8. 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. PWA – Prototyping of Web Applications 8

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

  10. La Ingeniería del Software es una disciplina de la ingeniería o área de la informáticaque 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 Conceptos Básicos • 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. PWA – Prototyping of Web Applications 10

  11. Ingeniería del Software 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

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

  13. 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. PWA – Prototyping of Web Applications 13

  14. 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. • Fases de Desarrollo: • Análisis de Requerimientos. • Modelado Conceptual. • DiseñoNavegacional. • Modelado de la Presentación. PWA – Prototyping of Web Applications 14

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

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

  17. 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 Conceptos Básicos PWA – Prototyping of Web Applications 17

  18. Ingeniería de Requerimientos Costo de detección de errores PWA – Prototyping of Web Applications 18

  19. Ingeniería de Requerimientos Procesos Principales PWA – Prototyping of Web Applications 19

  20. Prototipado PWA – Prototyping of Web Applications 20

  21. 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 Conceptos Básicos • 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. PWA – Prototyping of Web Applications 21

  22. Prototipado 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

  23. Prototipado Herramientas para la Creación de Prototipos Diseño de Prototipos • Pencil. • Wireframe Software. • Mockups. Diseño y Ejecución de Prototipos • iPLOTZ. • Pidoco. • Prototyper. PWA – Prototyping of Web Applications 23

  24. Propuesta PWA – Prototyping of Web Applications 24

  25. 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 Propuesta PWA – Prototyping of Web Applications 25

  26. 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 Características de la Herramienta Propuesta PWA fue diseñada enfatizando los siguientes puntos: PWA – Prototyping of Web Applications 26

  27. Propuesta Proceso de Desarrollo PWA PWA – Prototyping of Web Applications 27

  28. Propuesta Proceso de Desarrollo PWA • Se obtienen los requerimientos básicos. • Se van definiendo mejor a medida que avance el ciclo de vida. PWA – Prototyping of Web Applications 28

  29. Propuesta Proceso de Desarrollo PWA • Modelo de Datos. • Modelo de Presentación. • Modelo de Navegación. PWA – Prototyping of Web Applications 29

  30. Propuesta Proceso de Desarrollo PWA PWA – Prototyping of Web Applications 30

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

  32. Propuesta Proceso de Desarrollo PWA PWA – Prototyping of Web Applications 32

  33. Herramienta de Soporte PWA – Prototyping of Web Applications 33

  34. Herramienta de Soporte 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. PWA – Prototyping of Web Applications 34

  35. 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. Herramienta de Soporte Herramienta de Modelado – ArgoUML PWA – Prototyping of Web Applications 35

  36. 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. Herramienta de Soporte Mecanismos de Extensibilidad –UML Estereotipos Valores Etiquetados • 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. PWA – Prototyping of Web Applications 36

  37. Propuesta Modelado de Datos • 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. Base de Datos Diagrama de Clases +Clases +Tablas +Atributos + Columnas +Relaciones + Restricciones de Integridad +Estereotipos PWA – Prototyping of Web Applications 37

  38. 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. Herramienta de Soporte Modelado de Datos PWA – Prototyping of Web Applications 38

  39. 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. Herramienta de Soporte Diagrama de Presentación PWA – Prototyping of Web Applications 39

  40. Herramienta de Soporte 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. PWA – Prototyping of Web Applications 40

  41. Herramienta de Soporte Diagrama de Presentación PWA – Prototyping of Web Applications 41

  42. «Data Table» {applyTo= Administrador} {columns= nombre,apellido} {labels=Nombre,Apellido} {selectionAppearance =CHECKBOX} Herramienta de Soporte Panel de Presentación 1 Panel de Presentación 2 Acceso a la lista de Administradores selectionAppearance = CHECKBOX Ir a Visualizar Datos Resultado del Diagrama de Ejemplo PWA – Prototyping of Web Applications 42

  43. «Input Form» {applyTo= oficina} {columns= codigo,tipo,miembroDepartamento,fecha} {labels=Código,Tipo,Nombre Completo, Fecha Inicio} Herramienta de Soporte Validación de Datos Botón de Navegación tipo Imagen Lista de Selección para asociar a Tabla relacionada Validación de Tipo Dato Resultado del Diagrama de Ejemplo PWA – Prototyping of Web Applications 43

  44. Diseño interfaces. Estereotipos y los valores etiquetados Componentes Extendidos están relacionados entre sí. Cardinalidad . Valores Etiquetados. Reglas para verificar el modelo. Herramienta de Soporte Componentes de Prototipado PWA – Prototyping of Web Applications 44

  45. Herramienta de Soporte Diagrama de Presentación de Prototipado PWA – Prototyping of Web Applications 45

  46. «Text Item» {label= Nombre} {requiered= S} {defaultValue=Ingrese su nombre} {readOnly=N} Herramienta de Soporte Etiquetas de Componentes Etiquetas de ComponentesRequeridos en Negrita Acceso al Prototipo useTextField=N Resultado del Diagrama de Ejemplo • «Date Item» • {label= Fecha de Ingreso} • {requiered= S} • {readOnly=N} • {useTextField=N} PWA – Prototyping of Web Applications 46

  47. 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”. Herramienta de Soporte Grupo de Presentación Predeterminado PWA – Prototyping of Web Applications 47

  48. Herramienta de Soporte Validación de datos requeridos y tipos de datos Botones para guardar, editar y borrar. Opción crear nuevo Departamento Listado sobre la tabla Departamento Doble click sobre un Registro para Acceder a la Visualización Opciones para Crear o Listar Resultado del Diagrama de Ejemplo PWA – Prototyping of Web Applications 48

  49. 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. Herramienta de Soporte Diagrama de Navegación PWA – Prototyping of Web Applications 49

  50. 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. Herramienta de Soporte Componentes de Navegación • PWA soporta cuatro Componentes Extendidos principales para el Diseño del Diagrama de Navegación. Cada uno de ellos con sus Valores Etiquetados. PWA – Prototyping of Web Applications 50

More Related