Graduado en Ingeniería Informática
Universidad Politécnica de Madrid
Escuela Técnica Superior de Ingenieros Informáticos
TRABAJO FIN DE GRADO
Editor web de conexiones para la
creación visual de aplicaciones
composicionales mediante mashup
Autor: Jaime Pajuelo Chávez
Director: Francisco Javier Soriano Camino
i
ÍNDICE
DEL
DOCUMENTO
RESUMEN ... vii
CAPÍTULO 1 ... 1
INTRODUCCIÓN Y OBJETIVOS ... 1
1.1 Motivaciones del trabajo ... 1
1.2 Objetivos del trabajo ... 2
1.3 Organización del resto del documento ... 3
CAPÍTULO 2 ... 4
ESTADO DEL ARTE ... 4
2.1 Tecnologías de Diseño y Programación Web ... 4
2.1.1 Python ... 4
2.1.2 Django ... 5
2.1.3 HyperText Markup Language (HTML) ... 6
2.1.4 JavaScript ... 7
2.1.5 JavaScript Object Notation (JSON) ... 8
2.1.6 Cascading Style Sheets (CSS) ... 9
2.1.7 Syntactically Awesome Style Sheets (SASS) ... 9
2.2 Aplicaciones Web ... 10
2.2.1 Widget ... 10
2.2.2 Mashup ... 11
2.3 Plataformas de Desarrollo de Mashups ... 12
2.3.1 WireCloud ... 12
2.4 Plataformas de Alojamiento ... 13
2.4.1 GitHub ... 14
CAPÍTULO 3 ... 16
DESARROLLO ... 16
3.1 Fase de Análisis ... 17
3.1.1 Estado Actual de la Plataforma WireCloud ... 17
3.1.2 Identificación de los Actores Principales ... 22
ii
3.1.4 Requisitos Específicos ... 32
3.2 Fase de Implementación ... 38
3.2.1 Estructura del sistema ... 38
3.2.2 Documentación del sistema ... 40
3.2.3 Evaluación del sistema ... 47
3.2.4 Persistencia de los datos ... 47
3.2.5 Publicación de un mashup ... 48
3.2.6 Gestión de Errores ... 49
3.2.7 Migración de Datos ... 49
3.3 Diseño de un mashup a partir de comportamientos ... 50
CAPÍTULO 4 ... 53
RESULTADOS Y CONCLUSIONES ... 53
4.1 Conclusiones Técnicas ... 53
4.2 Aportaciones Personales ... 55
4.3 Líneas Futuras ... 56
ANEXOS ... 58
1. MANUAL DE USUARIO ... 58
1.1 Introducción... 58
1.2 Interfaz general ... 59
1.2.1 Barra de herramientas ... 59
1.2.2 Área de visualización del esquema de conexiones ... 62
1.3 Especificación de las aplicaciones web ... 63
1.3.1 Instancia de una aplicación web ... 63
1.4 Sistema de recomendaciones ... 63
1.5 Vista global frente a un comportamiento parcial... 64
1.5.1 Crear la instancia de una aplicación web ... 64
1.5.2 Modificar la posición actual de una aplicación web instanciada ... 66
1.5.3 Modificar el orden de los puntos de una aplicación web instanciada ... 68
1.5.4 Modificar el tamaño de un operador instanciado... 71
1.5.5 Modificar la información básica de un comportamiento parcial ... 72
iii
1.5.7 Activar un comportamiento parcial ... 74
1.5.8 Compartir la instancia de una aplicación web ... 75
1.5.9 Crear una conexión ... 76
1.5.10 Compartir una conexión ... 77
1.5.11 Modificar la curvatura de una conexión ... 78
1.5.12 Modificar el punto extremo de una conexión ... 79
1.5.13 Borrar la instancia de una aplicación web ... 80
1.5.14 Borrar una conexión ... 81
1.5.15 Borrar un comportamiento parcial ... 82
1.5.16 Visualizar previamente un comportamiento parcial ... 84
1.6 Vista independiente de un comportamiento parcial ... 85
2. CÓDIGO FUENTE ... 87
2.1 Plataforma GitHub ... 87
BIBLIOGRAFÍA ... 88
iv
TABLA
DE
ILUSTRACIONES
Figura 1: logo de Python ... 4
Figura 2: logo de Django ... 5
Figura 3: arquitectura Modelo-Vista-Controlador ... 6
Figura 4: logo de HTML5 ... 6
Figura 5: logo JavaScript... 7
Figura 6: esquema simplificado de la jerarquía DOM ... 8
Figura 7: logo de JSON ... 8
Figura 8: logo de CSS3 ... 9
Figura 9: logo de SASS ... 9
Figura 10: ejemplos de aplicaciones web widget ... 11
Figura 11: arquitectura cliente-servidor de un mashup ... 11
Figura 12: ejemplo de aplicación web mashup ... 12
Figura 13: logo de WireCloud ... 12
Figura 14: logo de GitHub ... 14
Figura 15: funcionamiento básico de un repositorio local ... 15
Figura 16: la tienda web de WireCloud en FI-WARE ... 18
Figura 17: el menú deslizante de aplicaciones en un entorno de desarrollo ... 19
Figura 18: esquema de conexiones de un mashup complejo ... 21
Figura 19: distribución de paquetes y módulos ... 39
Figura 20: identificación de los módulos modificados y nuevos ... 40
Figura 21: diagrama general de clases ... 41
Figura 22: visualización del entorno de trabajo ... 50
Figura 23: primer comportamiento parcial identificado ... 51
Figura 24: representación del primer comportamiento parcial... 51
Figura 25: segundo comportamiento parcial identificado ... 52
Figura 26: representación del segundo comportamiento parcial ... 52
Figura 27: vista global del primer caso de uso ... 54
Figura 28: vista independiente de un comportamiento parcial ... 55
Figura 29: ejemplo de visualización de un mashup por comportamientos... 59
Figura 30: panel de aplicaciones web ... 60
Figura 31: formulario de creación de un comportamiento parcial ... 60
Figura 32: panel de comportamientos parciales ... 61
Figura 33: formulario de actualización de un comportamiento parcial ... 61
Figura 34: vista global frente al comportamiento parcial activo ... 62
Figura 35: vista independiente del comportamiento activo ... 62
Figura 36: instancias de aplicaciones web ... 63
v
Figura 38: selección de una aplicación web ... 65
Figura 39: paso intermedio en la creación de una instancia ... 65
Figura 40: resultado de la creación de una instancia ... 66
Figura 41: selección de una instancia a mover ... 66
Figura 42: paso intermedio en la movilización de una instancia ... 67
Figura 43: nueva posición de una instancia ... 67
Figura 44: selección simultanea de dos instancias ... 68
Figura 45: ubicación del botón de configuración ... 68
Figura 46: opción de reordenar ... 69
Figura 47: visualización para reordenamiento de entradas o salidas ... 69
Figura 48: selección de un punto de entrada ... 69
Figura 49: nueva posición del punto de entrada seleccionado ... 70
Figura 50: nuevo estado de las listas de entradas y salidas ... 70
Figura 51: reordenamiento finalizado ... 71
Figura 52: localización del botón de configuración ... 71
Figura 53: selección de la opción de minimizar ... 71
Figura 54: visualización de una instancia minimizada ... 72
Figura 55: selección del botón de preferencias ... 72
Figura 56: formulario de actualización del comportamiento parcial ... 72
Figura 57: introducción de nuevos datos ... 73
Figura 58: actulización completada de la información básica... 73
Figura 59: fomulario de creación de un comportamiento parcial ... 73
Figura 60: introducción de datos en el formulario ... 74
Figura 61: visualización del nuevo comportamiento parcial ... 74
Figura 62: búsqueda del comportamiento parcial a activar ... 75
Figura 63: nuevo comportamiento parcial activo ... 75
Figura 64: visualización de una instancia en el fondo ... 75
Figura 65: localización del botón de añadir ... 76
Figura 66: nueva intancia en el comportamiento activo ... 76
Figura 67: selección del punto extremo izquierdo de una conexión ... 76
Figura 68: paso intermedio en la creación de una conexión ... 77
Figura 69: conexión creada ... 77
Figura 70: visualización de una conexión en el fondo ... 78
Figura 71: nueva conexión en el comportamiento activo ... 78
Figura 72: estado de edición de una conexión ... 79
Figura 73: modificación de la curvatura de una conexión ... 79
Figura 74: localización del botón de borrar... 80
Figura 75: posibilidad de borrado en cascada ... 81
Figura 76: borrado completo de una instancia ... 81
vi
Figura 78: conexión borrada y visible en el fondo ... 82
Figura 79: despliegue del panel de comportamientos parciales ... 83
Figura 80: visualización del botón de borrar un comportamiento parcial ... 83
Figura 81: vista posterior al borrado del comportamiento parcial ... 84
Figura 82: apertura del panel de comportamientos parciales ... 84
Figura 83: visualización previa de un comportamiento parcial ... 85
Figura 84: visualización de un comportamiento parcial en la vista global ... 86
Resumen
vii
RESUMEN
A lo largo de este documento se describe el trabajo llevado a cabo para el logro de todos objetivos de este Trabajo Fin de Grado, el cual tiene como objetivo principal la mejora de la herramienta de edición de las conexiones internas de un mashup proporcionada actualmente por la plataforma web WireCloud.
WireCloud es una plataforma web centrada en la construcción visual de mashups de aplicaciones a partir de la interconexión de pequeñas aplicaciones web denominadas widgets. Los principales inconvenientes presentes en el actual editor de conexiones que incluye esta plataforma afectan principalmente a sus usuarios con poca experiencia en diseño web. Estos usuarios tienen dificultades a la hora de interpretar el esquema de conexiones de un mashup ajeno y también, de crear el esquema de conexiones de un mashup propio.
La mejora realizada supone un cambio en la metáfora utilizada para la creación de las conexiones, que ahora se organiza en torno a unidades conceptuales denominadas
comportamientos que representan subconjuntos cohesionados de conexiones con significado (representando por si mismos comportamientos relevantes del mashup). Con este cambio se logra solventar los inconvenientes que presenta el actual sistema, principalmente la necesidad de crear (y visualizar) simultáneamente todas las conexiones requeridas por el mashup, lo cual supone que:
a) es difícil identificar con qué propósito se ha creado cada conexión y qué relación guardan unas conexiones con otras.
b) existe un riesgo de olvidar alguna conexión, fundamentalmente por ser difícil la interpretación del propósito de cada conexión y por la imposibilidad de identificar y nombrar conjuntos de conexiones que tienen un propósito determinado.
viii
This document describes the work carried out for the achievement of all targets of this Final Project, which has as its main objective the improvement of the edition tool of the mashup’s internal connections that is currently provided by WireCloud.
WireCloud is a web platform focused on building visual of web mashups from the interconnection of web applications called web widgets. The main drawbacks present in the current web editor of connections, includes on this platform, mainly affect to users with little experience in web design. These users have difficulties for interpreting the wiring diagram of any web mashup and also, creating the wiring diagram of an own web mashup.
The improvement made a change in the metaphor used for creating connections, now managing a conceptual units called behaviors that represent subsets of meaningful connections. This change overcomes the drawbacks of the current system, mainly the need to create and display simultaneously all connections required by the web mashup, which means that:
a) Difficultly identify what purpose is created each connection and how they relate to each other connections.
b) There is the risk of forgetting some connection, mainly for being difficult to interpret the purpose of each connection and the inability to identify and name sets of connections that have a specific purpose.
Before deploying the source code, the study of the technologies currently used WireCloud was performed, plus the study of the situation of the previous editor and new features and advantages searched for this new editor was performed too. For the latter purpose was defined several case studies that helped to specify what understood by behavior in the design of the connections of a web mashup and also that helped to define the best visual organization of the new behavior-oriented wiring editor.
Capítulo 1
|
Introducción y objetivos1
CAPÍTULO 1
INTRODUCCIÓN Y OBJETIVOS
En Internet, el concepto de una aplicación web 2.0 [1] fue impulsado en el año 2004 permitiendo a un usuario final convertirse en un contribuidor más; en otras palabras, pasar de ser un simple observador de contenidos web a ser un creador capaz de participar e interactuar dentro de una comunidad virtual.
Dentro de este ámbito, el auge de las aplicaciones web de tipo mashup ha revolucionado la forma de diseñar una aplicación web. Un mashup [2] [3] brinda a un usuario final la oportunidad de combinar el contenido de más de una fuente, con la finalidad de crear un nuevo contenido completo e incluso, en algunos casos, innovador de una manera fácil y relativamente rápida.
Con el paso del tiempo han surgido plataformas centradas en el diseño de este tipo de aplicación web, entre las cuales se encuentra WireCloud [4]. Esta plataforma destaca por múltiples funcionalidades novedosas, sobre todo por dirigir un paradigma de desarrollo que en cada nueva publicación pretende acercarse más a usuarios finales. Actualmente, WireCloud incluye un editor web de conexiones que permite elaborar un mashup a través de la interconexión de diferentes aplicaciones web.
Gracias a la disponibilidad del código fuente de la plataforma WireCloud, liberado bajo la Licencia Publica General de Affero (GNU AGPLv3, del inglés GNU Affero General Public v3) y alojado en un repositorio remoto público, se permite el estudio y la modificación de los módulos relativos al editor de conexiones mencionado anteriormente, Dicho esto, el estudio de estos módulos se ha tomado como punto de partida y la modificación de estos hará posible el logro de los objetivos principales de este Trabajo Fin de Grado.
1.1 Motivaciones del trabajo
2
La plataforma WireCloud proporciona dicha funcionalidad mediante un paradigma de composición de datos guiado por eventos. Por medio del cual, su estable editor web de conexiones permite a cualquier usuario visualizar todas las aplicaciones web que componen cierto mashup. Y además, ofrece la oportunidad de conectarlos entre sí de una manera sencilla e intuitiva, a través de los diferentes puntos de entrada y de salida que estos incluyen.
En la versión de desarrollo más reciente de esta plataforma, se puede observar un inconveniente, que concierne a usuarios con poca experiencia en diseño web, relativo a la dificultad para interpretar el esquema de conexiones de un mashup ajeno o a la dificultad para organizar las conexiones entre un gran número de aplicaciones web composicionales presentes en un mashup propio. A consecuencia de la observación citada, se pretende llevar a cabo la mejora del editor web de conexiones para así solventar estas dos situaciones, de modo que WireCloud incluya un paradigma de desarrollo más orientado a usuarios finales sin conocimientos de programación ni experiencia en diseño web.
1.2 Objetivos del trabajo
Este trabajo tiene como objetivo principal el desarrollo de un nuevo editor web de conexiones para la plataforma WireCloud, el cual sustituya a la versión actual, respetando los puntos fuertes como es su trabajado motor de conectividad, e incluya un diseño del esquema de conexiones orientado a comportamientos. Haciendo posible que cualquier usuario pueda visualizar más cómodamente y con más información un complejo esquema de conexiones e incluso, pueda organizar de forma más intuitiva un gran número de aplicaciones web composicionales de un mashup propio.
Un comportamiento, en el contexto de diseño web de un mashup, se refiere al grupo de aplicaciones web composicionales de un mashup, incluyendo ciertas conexiones existentes entre ellas, que persiguen una finalidad concreta que puede describirse mediante una frase (representando un comportamiento específico del mashup). En numerosas ocasiones, el comportamiento global de un mashup puede distribuirse en más de un comportamiento parcial.
Capítulo 1
|
Introducción y objetivos3
1.3 Organización del resto del documento
El resto del documento se organiza del siguiente modo:
- En el capítulo 2 se mencionan las tecnologías de diseño y programación web que actualmente WireCloud hace uso además de un mejor análisis de esta plataforma web, explicando a parte las diferentes aplicaciones web que permite instalar y la plataforma de alojamiento donde se encuentra con acceso público la versión más reciente de WireCloud.
- Como consiguiente, el capítulo 3 detalla las fases de estudio y de implementación que se llevaron a cabo para lograr el desarrollo del nuevo editor web. También se incluye, la demostración del diseño de un mashup dada a partir de los comportamientos parciales identificados.
4
CAPÍTULO 2
ESTADO DEL ARTE
Como punto de partida para la evolución de este trabajo, se ha realizado en primer lugar un estudio exhaustivo de las tecnologías de diseño y programación web que actualmente la plataforma WireCloud hace uso. Estas tecnologías son descritas a lo largo de este capítulo además de los diferentes tipos de aplicaciones web, que surgieron a partir del nacimiento del concepto Web 2.0, que la plataforma citada permite.
También se incluye una descripción más detallada de la plataforma en la se llevará a cabo la implementación del nuevo editor web de conexiones orientado a comportamientos, citando los puntos fuertes y la trabajaba herramienta de edición por los cuales fue elegida. En última instancia, y no menos importante, se menciona la plataforma de alojamiento de repositorios remotos donde se encuentra, hoy en día, alojada públicamente WireCloud. El buen uso de las funcionalidades que ofrece esta plataforma de alojamiento permitirá controlar la evolución del código fuente del nuevo editor web.
2.1 Tecnologías de Diseño y Programación Web
En primer lugar, se estudian las tecnologías de diseño y programación web que utiliza la plataforma WireCloud para su continua evolución. A día de hoy, estas tecnologías web son muy conocidas mundialmente y además están soportadas por cualquier navegador web actual, por esta razón se decidió continuar con la misma línea de desarrollo para lograr la correcta realización del código fuente del nuevo editor web.
2.1.1 Python
Figura 1: logo de Python
Capítulo 2
|
Estado del Arte5
diferentes estilos de programación. Estos estilos de programación pueden ser: orientado a objetos, imperativo y, en menor medida, funcional.
Guido van Rossum, creador y principal autor de este lenguaje, publicó la primera versión estable, la 0.9.0, en 1991. A partir de esta fecha, Python fue haciéndose y ganándose un hueco entre los lenguajes más utilizados hoy en día. Actualmente, la Python Software Foundation (PSF) [6] administra todo el código, documentación y especificaciones añadidas desde la fecha del lanzamiento de la versión alfa de Python 2.1.
Esta organización sin ánimo de lucro fue fundada en el año 2001, posee una licencia de código abierto compatible con la Licencia Pública General de GNU [7] a partir de la versión de Python 2.1.1. Por último, en estos últimos años este lenguaje de programación se ha hecho muy popular gracias a varias razones:
- En primer lugar, incorpora una gran cantidad de bibliotecas que permiten realizar multitud de tareas, en su mayoría habituales, sin la necesidad de programarlas desde cero.
- En segundo lugar, es de destacar la sintaxis inmensamente visual basada en una notación indentada, que obliga a adaptarse a unas mismas notaciones con el objetivo de que todos los programas tengan un aspecto muy similar.
- Para acabar, la compatibilidad que ofrece con un gran número de plataformas.
Respecto al uso de este lenguaje en la plataforma WireCloud, se debe mencionar que la rama principal de todas las funcionalidades que esta ofrece desde el lado del servidor. Python, acompañado de la tecnología de diseño web que a continuación se menciona, hacen posible el despliegue del servicio web además de gestionar las diferentes pruebas que evalúan el correcto funcionamiento de esta.
2.1.2 Django
Figura 2: logo de Django
6
casi a diario; y esta liberado bajo la licencia BSD [9], lo que significa que es gratuito y de código abierto.
Entre sus principales características, Django se adapta a la filosofía Modelo-Vista-Controlador (MVC) [10] que permite separar el proyecto en las diferentes partes que componen una aplicación web; y se adhiere al principio conocido como “Una vez y sólo una” (DRY, del inglés Don’t Repeat Yourself) que promueve la reducción de la duplicación de cualquier pieza de información.
Figura 3: arquitectura Modelo-Vista-Controlador
2.1.3 HyperText Markup Language (HTML)
Figura 4: logo de HTML5
HTML [11] es un lenguaje de marcado utilizado para la elaboración de páginas web. Al ser también un estándar, este lenguaje tolera que una página web pueda ser interpretada por cualquier navegador web.
Capítulo 2
|
Estado del Arte7
las cuales se han ido incorporando elementos nuevos o suprimiendo elementos que habían quedado obsoletos, con el fin de hacerlo más eficiente.
Para crear o editar un documento HTML puede utilizarse cualquier editor de texto plano. Existen otros editores con características WYSIWYG (del inglés What You See Is What You Get) que permiten ver el resultado de lo que se está editando en tiempo real. Algunos ejemplos de estos últimos son KompoZer, Microsoft FrontPage o Adobe Dreamweaver. Asimismo, existen otros editores conocidos como WYSIWYM (del inglés What You See Is What You Mean), que dan más importancia al contenido y al significado que a la apariencia visual. Entre los objetivos que tienen estos editores encontramos la separación que realizan entre el contenido y la presentación.
HTML5 [14] es la quinta revisión importante de este lenguaje. Esta versión establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Alguno de los elementos de HTML 4.01 ha quedado obsoleto, incluyendo aquellos elementos puramente de presentación. También hay un renovado énfasis en la importancia del manejo del DOM [15] para el comportamiento de la Web. 2.0.
El W3C ha puesto su sello de recomendación a esta última versión, indicando con ello que nos encontramos ante un estándar ya finalizado. Esta denominación pone punto final a casi ocho años de trabajo continuado para sustituir al obsoleto HTML 4.01 que debutó como lenguaje básico de Internet en 1999.
2.1.4 JavaScript
Figura 5: logo JavaScript
JavaScript es un lenguaje de programación interpretado, creado por Netscape [16], que ofrece un paradigma de programación orientado a objetos basado en prototipos. A pesar de su nombre, JavaScript no guarda relación alguna con el lenguaje de programación Java.
8
Hay que resaltar dos tipos de JavaScript: uno centrado en el lado del servidor y otro, por el contrario, en el lado del cliente. En este último, éste es muy popular respecto a otros debido a que cualquier navegador web soporta su uso sin necesidad de procesos intermedios. Hoy por hoy, JavaScript se utiliza principalmente para la creación de aplicaciones web dinámicas.
Para interactuar con una página web, JavaScript contiene el Modelo de Objetos del Documento (DOM, del inglés “Document Object Model”) que permite ver el mismo documento HTML de otra manera, describiendo el contenido del documento como un conjunto de objetos accesibles y manipulables dinámicamente; y ofreciendo la capacidad de manipular los eventos que se producen tanto en el navegador web como en las acciones del usuario.
Figura 6: esquema simplificado de la jerarquía DOM
2.1.5 JavaScript Object Notation (JSON)
Figura 7: logo de JSON
JSON [18] es un formato ligero para el intercambio de datos. Básicamente, este estándar, es un texto plano basado en pares atributo-valor. Entre los tipos de valores que se puede encontrar en JSON podemos ver los siguientes: enteros, cadenas de caracteres, booleanos, listas y objetos.
Capítulo 2
|
Estado del Arte9
admite que pueda ser usado para el intercambio de información entre distintas tecnologías.
2.1.6 Cascading Style Sheets (CSS)
Figura 8: logo de CSS3
CSS [20] es un lenguaje utilizado en la presentación de un documento estructurado, escrito en HTML o XML. Este lenguaje permite, a los programadores web, controlar el estilo y el aspecto de un documento facilitando el diseño y mantenimiento de múltiples páginas web.
La sintaxis de este lenguaje está basada en reglas; es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o varias de esas reglas aplicadas a un documento. Estas reglas pueden dividirse en dos partes: un selector y una declaración. A su vez, esta última está compuesta por una propiedad junto con el valor que se le asigne. Por otro lado, el selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto.
Tras la aparición de este lenguaje, surgió la necesidad de estandarizar su uso para todos los navegadores web. El organismo encargado de la estandarización fue W3C, la cual definió la primera versión en 1996. Posteriormente, se han desarrollado diferentes versiones hasta alcanzar CSS3 [21], la versión más actual.
A diferencia de CSS2, que fue una gran especificación que definía varias funcionalidades, su actual versión, mencionada anteriormente, está dividida en varios módulos. A día de hoy, en definición esta versión nos ofrece una gran variedad de opciones muy significativas para las necesidades del diseño web actual. Estas van desde opciones de sombreado y redondeado, hasta funciones avanzadas de movimiento y transformación, CSS3 es el estándar que dominará la web por los siguientes años.
2.1.7 Syntactically Awesome Style Sheets (SASS)
10
Sass [22] es un metalenguaje de la parte superior de CSS que se utiliza para describir el estilo de un documento de manera limpia y estructural. Este proporciona una sintaxis más simple y elegante para CSS e implementa varias características útiles para la creación de hojas de estilo manejables.
Se pueden distinguir dos sintaxis: la primera, conocida como Sassy CSS (SCSS), es un superconjunto de las sintaxis en CSS3; y la segunda, conocida como una sintaxis de sangría, está diseñada para gente que prefiere similitud con CSS.
La implementación oficial de Sass es de código abierto y se encuentra escrita en Ruby [23]; sin embargo existen otras implementaciones, entre las que se incluye una en Python.
2.2 Aplicaciones Web
A lo largo de este punto se hará mención de las aplicaciones web que han sido estudiadas para un mejor entendimiento de los elementos con los que trabaja la plataforma en la cual se realiza este Trabajo Fin de Grado.
2.2.1 Widget
Un widget [24] es una pequeña aplicación web que puede ser instalado y ejecutado fácilmente por un usuario final, definiendo funcionalidades limitadas o nuevos contenidos. El origen de la palabra widget proviene de la combinación de las palabras window y gadget. Su objetivo principal es enriquecer los contenidos y las funcionalidades actuales del servicio web donde es aplicado, sin la necesidad de programar o crear nuevos contenidos.
Internamente, este tipo de aplicación puede interactuar con otros servicios distribuidos en Internet con el objetivo de ofrecer contenidos, como texto, imagen, audio o video, de casi cualquier temática y funcionalidad. La facilidad de diseñar estos contenidos se debe a que pueden desarrollarse en pocas líneas de código y utilizando lenguajes de programación tan conocidos como JavaScript o Adobe Flash [25].
Capítulo 2
|
Estado del Arte11
Figura 10: ejemplos de aplicaciones web widget
2.2.2 Mashup
Un mashup también es una aplicación web. En este caso, utiliza el contenido de más de una aplicación o recurso web para crear, de manera relativamente fácil, un nuevo contenido completo visualizado en una única interfaz gráfica. Por esta razón este tipo de aplicación es uno de los pilares de la Web 2.0, una web social y colaborativa donde los usuarios finales también pueden participar e interactuar entre sí.
Figura 11: arquitectura cliente-servidor de un mashup
12
Según el objetivo que presenten pueden diferenciarse los siguientes tipos: - Para consumidores, enfocados al usuario final.
- Para negocios, enfocados al cliente.
- Para datos, enfocados a la combinación de datos de dos o más fuentes.
Figura 12: ejemplo de aplicación web mashup
2.3 Plataformas de Desarrollo de Mashups
En lo que concierne a las plataformas de desarrollo de mashups a continuación se dará una descripción detallada de la plataforma WireCloud, en la que desarrollará el nuevo editor web de conexiones.
2.3.1 WireCloud
Figura 13: logo de WireCloud
Capítulo 2
|
Estado del Arte13
concretamente por los miembros del laboratorio de “Computer Networks & Web Technologies” (CoNWeT) [29].
Un punto interesante respecto a esta plataforma web, es que forma parte de un proyecto europeo conocido como FI-WARE [30]. En este proyecto europeo, juega un papel importante entre los conocidos “Generic Enablers” donde hace referencia al mashup de aplicaciones web. Como consecuencia de esto, WireCloud implementa todas las APIs definidas en este Generic Enabler y cuya documentación se encuentra en la página oficial de FI-WARE.
Los servicios más destacados que ofrece esta plataforma, permiten al usuario lo siguiente: - Subir un componente web compatible, como un widget, operador o mashup, para utilizarlo posteriormente en la creación de un mashup o compartirlo con el resto de usuarios.
- Añadir un componente web subido a un espacio de trabajo donde se diseña un nuevo mashup. En el caso de un mashup subido, crea un espacio de trabajo a partir de este.
- Descargar un componente web desde una tienda conectada, en la cual se comparten diferentes tipos de componentes web por parte de todos los usuarios. - Modificar la conectividad entre los diferentes componentes web que compone un
entorno de trabajo.
El editor del mapa de conexiones que ofrece WireCloud es la base fundamental de esta plataforma, el cual se diferencia con otros muchos editores. Gracias a su complejo motor de conexiones, un usuario puede editar o crear conexiones entre componentes web de un mashup de una manera fácil y rápida.
2.4 Plataformas de Alojamiento
14 2.4.1 GitHub
Figura 14: logo de GitHub
GitHub es una plataforma de desarrollo colaborativo de software para alojar proyectos utilizando el sistema de control de versiones Git [32]. El código se almacena de forma pública, aunque también se ofrece la opción de privatizar creando una cuenta de pago. Esta plataforma permite alojar repositorios de código y brindar herramientas muy útiles para el trabajo en equipo, dentro de un proyecto. Además de eso, un usuario puede contribuir a mejorar el software de los demás. Para poder alcanzar esta meta, GitHub provee de funcionalidades para hacer un fork y solicitar pulls.
Realizar un fork es simplemente clonar un repositorio ajeno (genera una copia en tu cuenta), para eliminar algún bug o modificar cosas de él. Una vez realizadas tus modificaciones puedes enviar un pull al dueño del proyecto, el cual podrá analizar los cambios que has realizado fácilmente, y si considera interesante tu contribución, adjuntarlo con el repositorio original.
Capítulo 2
|
Estado del Arte15
Figura 15: funcionamiento básico de un repositorio local
16
CAPÍTULO 3
DESARROLLO
A lo largo de este capítulo, se describe el desarrollo y la implementación del nuevo editor web de conexiones orientado a comportamientos para la plataforma WireCloud. Como se ha mencionado con anterioridad, esta plataforma de diseño de aplicaciones web de tipo mashup incluye un editor web de conexiones cuyo paradigma de desarrollo necesita ser actualizado con el propósito de dirigirse cada vez más a usuarios finales. Y el alcance de este propósito se logrará resolviendo los objetivos principales de este trabajo.
Tras llevar a cabo un análisis profundo de la situación actual del editor web de conexiones que facilita esta plataforma, y detallar las nuevas características que el nuevo diseño debe tener en cuenta, se dispuso la implementación de un nuevo sistema prácticamente desde cero. Además, este nuevo sistema debe cumplir también con las necesidades actuales, satisfechas por el actual editor web de conexiones, de la plataforma WireCloud; e incluso, tener en mente la posibilidad de instalación en otras plataformas similares. A continuación, se citan los sistemas que se han mantenido inmunes a posibles modificaciones debido a su trabajado código:
- Sistema de arrastrado: permite modificar la posición actual de cualquier aplicación web dentro de los límites establecidos por el sistema.
- Motor de conectividad: permite crear una conexión entre diferentes aplicaciones web, indicando el punto de entrada de una y el punto de salida de otra.
- Sistema de recomendaciones: permite conocer las posibles conexiones entre diferentes aplicaciones web a partir de las descripciones dadas en los puntos de entrada y de salida de estas.
Capítulo 3
|
Desarrollo17
Profundizando en el funcionamiento del nuevo sistema, este debe permitir a cualquier usuario visualizar todas las aplicaciones web que componen cierto mashup; además de, ofrecer la oportunidad de conectarlas entre sí de una manera sencilla e intuitiva, a través de los diferentes puntos de entrada y de salida que estas incluyen. Todo esto, por medio de un sistema orientado a comportamientos.
Un comportamiento, en el contexto de diseño web de un mashup, se refiere al grupo de aplicaciones web composicionales de un mashup, incluyendo ciertas conexiones existentes entre ellas, que persiguen una finalidad común. Incluyendo la posibilidad de que el comportamiento global de un mashup pueda distribuirse en uno o más comportamientos parciales, los cuales puedan visualizarse independientemente y puedan compartir cualquier aplicación web o conexión que participen en otros comportamientos. Después de esta aclaración, un editor web de conexiones orientado a comportamientos permite gestionar los diferentes comportamientos parciales que un usuario considere dentro de cierto mashup, y visualizarlos de forma independiente o respecto al comportamiento global. Así como, la fácil ubicación de todas las aplicaciones web, disponibles en la cuenta del usuario, con el objetivo de utilizarlos posteriormente en el esquema de conexiones.
Por último, se mantiene el estilo y la logística de la plataforma WireCloud utilizando JavaScript, en la implementación del código fuente; Sass, en el diseño web; y Python tanto para las pruebas de unidad y de integración, como para el código de migración de datos a este nuevo sistema.
3.1 Fase de Análisis
En este apartado se describe la fase de análisis, comenzando con una explicación detallada del estado actual de la plataforma WireCloud y una identificación de los actores principales del sistema y los posibles casos de uso. Para concluir, se mencionan los requisitos específicos del nuevo sistema que satisfacen los objetivos principales de este trabajo.
3.1.1 Estado Actual de la Plataforma WireCloud
18
que permite interconectar diferentes aplicaciones web de tipo widget u operador a través de los puntos de entrada y de salida que estas disponen.
También ofrece la posibilidad de conectarse a una tienda web con la finalidad de proporcionar a los usuarios una forma de publicar cualquier entorno de trabajo como un mashup y de instalar cualquier aplicación web (widget, operador o mashup) aportada por algún diseñador registrado. En otras palabras, los usuarios pueden compartir sus aplicaciones web a través de este sistema de publicaciones.
Figura 16: la tienda web de WireCloud en FI-WARE
Capítulo 3
|
Desarrollo19
Figura 17: el menú deslizante de aplicaciones en un entorno de desarrollo
Los widgets dentro de WireCloud se pueden ver como pequeñas aplicaciones web que disponen de una interfaz gráfica, con la cual un usuario pueda interactuar, y de un conjunto de puntos de entrada y de salida que permiten recibir y enviar información. La funcionalidad de un widget está definida por el diseñador. Y la utilidad principal de estas aplicaciones web en esta plataforma, es la de conectarse con otras aplicaciones web de tipo widget u operador de modo que tengan un papel importante dentro de un mashup. Volviendo al editor web de conexiones del que dispone ahora WireCloud, se debe destacar la importancia que los operadores están teniendo a la hora de conectar aplicaciones web que intercambian información casi compatible. En esta plataforma, los operadores pueden verse como pequeñas aplicaciones web que no disponen de una interfaz gráfica pero sí disponen de un conjunto de puntos de entrada y de salida. Desde la parte visual de un mashup, estos operadores no serían visibles al carecer de interfaz gráfica. Aun así, la utilidad principal de estos reside en el esquema de conexiones de un mashup, donde puede proporcionar datos de servicios externos o modificar la estructura o los datos que pasan entre dos aplicaciones web.
20
se detalla un análisis profundo de los puntos fuertes y débiles que se observan en el actual editor web.
El editor web de conexiones que integra actualmente WireCloud permite al usuario lo siguiente:
1. Disponer de las aplicaciones web accesibles en el entorno de trabajo actual para utilizarlas en el área de edición del esquema de conexiones. Estas se encuentran listadas en el lateral izquierdo de la pantalla y pueden ser arrastradas con el cursor a la posición que el usuario desee dentro de los límites del área mencionada antes. 2. Crear, modificar y borrar conexiones entre las diferentes instancias disponibles en
el área de edición del esquema de conexiones de una manera rápida e intuitiva. 3. Reconocer fácilmente el contenido de la instancia de un widget u operador; es
decir, el título y los puntos de entrada y de salida. Además de, diferenciar la instancia de un widget de la de un operador.
4. Recomendar posibles conexiones a partir de las descripciones dadas por los desarrolladores en los diferentes puntos de entrada y de salida de los que disponen cada instancia de aplicaciones web utilizadas en el área de edición del esquema de conexiones.
5. Minimizar un operador y reordenar los puntos de entrada y de salida de una instancia cualquiera con el objetivo de visualizar de mejor manera el esquema de conexiones.
Capítulo 3
|
Desarrollo21
Figura 18: esquema de conexiones de un mashup complejo
En la ilustración de arriba pueden contemplarse las dos situaciones que este trabajo intenta solventar. Desde el punto de vista de un usuario ajeno, con un nivel técnico medio-bajo en diseño, puede ver este esquema de conexiones como inentendible. Y desde el punto de vista del propietario, la continuación o edición de este esquema de conexiones puede ser de difícil ejecución.
Después de explicar el estado actual del editor web de conexiones, se enumeran los puntos a mejorar respecto a este estado:
1. La interfaz general debe modificarse para gestionar una mejor barra de herramientas, de esta manera permitir añadir nuevas funcionalidades en este trabajo e incluso más adelante.
2. La nueva barra de herramientas debe ofrecer la opción de listar tanto los widgets y operadores accesibles en ese momento, como los comportamientos parciales que se vayan identificando.
3. La nueva barra de herramientas debe ofrecer, de una manera fácil y rápida, cambiar de perspectiva; es decir, de la vista global del esquema de conexiones frente a un comportamiento parcial a la vista independiente de un comportamiento parcial.
22
5. El área de edición del esquema de conexiones debe mejorarse para contrastar los componentes de un comportamiento parcial y de ese modo, tener visibles el resto de componentes del mashup como si estuvieran en segundo plano.
3.1.2 Identificación de los Actores Principales
En esta sección, se identifican los actores principales del nuevo sistema. Como el objetivo principal del paradigma de desarrollo, que incluye la plataforma WireCloud, que se desea mejorar para dirigirse más usuarios finales, estos son los únicos actores principales que se pueden encontrar. Entonces, se incluyen tanto usuarios con un nivel técnico avanzado en diseño web, como usuarios con poca experiencia en ello.
Teniendo identificado al actor principal, este tiene como objetivo principal la construcción de un mashup a partir de la interconexión de diferentes aplicaciones web y la descripción de cada comportamiento parcial identificado en el esquema de conexiones final, con el propósito de que otros usuarios o el mismo puedan comprender el comportamiento global de dicho mashup de manera rápida y simple, sin importar la complejidad del esquema de conexiones o el número elevado de aplicaciones web usadas. Otros objetivos y no menos importantes que los actores principales pueden perseguir, se enumeran a continuación:
1. Disponer, en todo momento, de las aplicaciones web disponibles en el entorno de trabajo actual para su futuro uso en el esquema de conexiones dado.
2. Distribuir, de manera fácil e intuitiva, las diferentes aplicaciones web que componen o compondrán el mashup en cuestión, además de las conexiones existentes, en los comportamientos parciales que el usuario ha identificado. 3. Visualizar el esquema de conexiones de cada comportamiento parcial creado de
forma independiente o respecto al comportamiento global del mashup.
Capítulo 3
|
Desarrollo23 3.1.3 Identificación de los Casos de Uso
En esta sección, se presentan los diferentes casos de uso identificados en este nuevo sistema. Esta identificación se ha realizado a partir del estudio del actual editor web de conexiones que proporciona WireCloud y el análisis de los requisitos iniciales especificados en este trabajo. Los siguientes casos de uso son el resultado del estudio y el análisis mencionado antes, los cuales fomentan una idea más concreta de los puntos a implementar e indican como el sistema debería interactuar con los actores principales. 3.1.3.1 Visualizar el Esquema de Conexiones
Precondiciones: el usuario debe estar registrado e identificado en la plataforma.
Objetivo: visualizar el esquema de conexiones del entorno de trabajo o mashup actual.
Procedimiento: el usuario selecciona de la barra de herramientas del entorno de trabajo actual, la opción de visualizar el esquema de conexiones. Esta acción muestra una nueva barra de herramientas y el esquema de conexiones del mashup en cuestión.
Postcondiciones: el sistema crea y activa un comportamiento parcial en el caso de que el entorno de trabajo o mashup actual no contenga ninguno.
3.1.3.2 Añadir un Widget desde la Barra de Herramientas
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos un widget disponible en el entorno de trabajo actual y tener activa la vista del esquema de conexiones del comportamiento global del mashup.
Objetivo: utilizar un widget en el esquema de conexiones del comportamiento activo.
Procedimiento: el usuario despliega una lista de aplicaciones web de tipo widget disponibles en el entorno de trabajo actual, selecciona una de estas que se encuentre habilitada y la arrastra hasta la posición que desee, dentro del esquema de conexiones del comportamiento global del mashup.
24
3.1.3.3 Añadir un Operador desde la Barra de Herramientas
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además, tener al menos una aplicación web de tipo operador instalada en la cuenta actual y tener activa la vista del esquema de conexiones del comportamiento global del mashup.
Objetivo: utilizar un operador en el esquema de conexiones del comportamiento activo.
Procedimiento: el usuario despliega una lista de aplicaciones web de tipo operador instaladas en la cuenta actual, selecciona una de estas que se encuentre habilitada y la arrastras hasta la posición que desee, dentro del esquema de conexiones del comportamiento global del mashup.
Postcondiciones: el sistema permite crear más de una instancia por cada operador, lo cual indica que el operador seleccionado seguirá habilitado.
3.1.3.4 Identificar de los puntos de entrada o de salida
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos una instancia de una aplicación web en el esquema de conexiones del comportamiento global del mashup.
Objetivo: distinguir los puntos de entrada y de salida de cualquier instancia de aplicación web en el esquema de conexiones del comportamiento global del mashup.
Procedimiento: cada instancia de aplicación web distribuye los puntos de entrada al lateral izquierdo y los puntos de salida al lateral derecho.
3.1.3.5 Distinguir una instancia
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos una instancia de un widget y otra de operador en el esquema de conexiones del comportamiento global del mashup.
Objetivo: distinguir las instancias de las aplicaciones web de tipo widget y de tipo operador en el esquema de conexiones del comportamiento global del mashup.
Capítulo 3
|
Desarrollo25 3.1.3.6 Crear una Conexión
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos dos instancias de aplicaciones web, que incluyan puntos de entrada y de salida, disponibles en el esquema de conexiones del comportamiento global del entorno de trabajo actual o mashup y tener activa la vista del esquema de conexiones del comportamiento global del mashup.
Objetivo: crear una conexión entre el punto de salida y el punto de entrada de dos instancias diferentes de aplicaciones web en el comportamiento activo.
Procedimiento: el usuario selecciona el punto de salida de la instancia de una aplicación web y desplaza el cursor hasta el punto de entrada de otra instancia, o viceversas, creando de este modo una conexión en el comportamiento activo.
Postcondiciones: el sistema añade una o ambas instancias de aplicaciones web en el caso de que estuvieran visibles en el fondo. Por defecto, si la nueva conexión ya existía en el comportamiento activo, esta será eliminada ya que no se permite duplicidad en las conexiones.
3.1.3.7 Resaltar una Instancia
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos una instancia de una aplicación web disponible en el esquema de conexiones del comportamiento global del entorno de trabajo actual.
Objetivo: destacar visualmente una instancia de una aplicación web respecto al resto de instancias del esquema de conexiones del comportamiento global del entorno de trabajo actual.
Procedimiento: el usuario selecciona una instancia de una aplicación web del esquema de conexiones.
26 3.1.3.8 Resaltar una Conexión
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos una conexión disponible en el esquema de conexiones del comportamiento global del entorno de trabajo actual.
Objetivo: destacar visualmente una conexión respecto al resto de conexiones del esquema de conexiones del comportamiento global del mashup.
Procedimiento: el usuario selecciona una conexión del esquema de conexiones del comportamiento global del mashup.
Postcondiciones: en el caso de que esta conexión no pertenezca al comportamiento activo, el resaltado será un poco transparente.
3.1.3.9 Modificar la Posición Actual de una Instancia
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos una aplicación web disponible en el entorno de trabajo actual y tener al menos una instancia disponible en el esquema de conexiones del comportamiento global del mashup.
Objetivo: modificar la posición actual de una instancia de una aplicación web disponible en el esquema de conexiones del comportamiento global del mashup actual.
Procedimiento: el usuario selecciona y arrastra una instancia de una aplicación web a otra posición dentro del área del esquema de conexiones del comportamiento global del mashup.
3.1.3.10 Modificar la Posición Actual de más de una Instancia
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener más de una aplicación web disponible en el entorno de trabajo actual y tener más de una instancia en el esquema de conexiones del comportamiento global del mashup.
Objetivo: modificar la posición actual de más de una instancia en el esquema de conexiones del comportamiento global del mashup.
Capítulo 3
|
Desarrollo27
3.1.3.11 Modificar el Orden de los Puntos de Entrada y de Salida
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos una instancia en el esquema de conexiones del comportamiento activo.
Objetivo: modificar el orden de los puntos de entrada o de salida de una instancia de una aplicación web perteneciente al comportamiento activo.
Procedimiento: el usuario selecciona la opción de configuración de una instancia en la parte superior izquierda, esta acción despliega una lista de opciones, entre las cuales está la de reordenar los puntos de entrada o de salida de dicha instancia. Ahora estará disponible la modificación de la lista de puntos, lo cual el usuario puede seleccionar cualquier punto y desplazarlo a la posición que el desee.
3.1.3.12 Modificar la Curvatura de una Conexión
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos una conexión disponible en el esquema de conexiones del comportamiento activo.
Objetivo: modificar la curvatura de una conexión del esquema de conexiones del comportamiento activo.
Procedimiento: el usuario selecciona una conexión perteneciente al comportamiento activo, tras esta acción, aparecen las opciones para modificar la curvatura tanto en el lado del punto de entrada como en el de salida, en forma de tiradores. Estos tiradores permiten modificar dicha curvatura como el usuario desee.
3.1.3.13 Modificar el Punto de Entrada o de Salida de una Conexión
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos una conexión disponible en el esquema de conexiones del comportamiento activo.
Objetivo: modificar el punto de entrada o de salida de una conexión perteneciente al comportamiento activo.
28 3.1.3.14 Crear un Comportamiento
Precondiciones: el usuario debe estar registrado e identificado en la plataforma.
Objetivo: crear un comportamiento en el esquema de conexiones del comportamiento global del mashup.
Procedimiento: en la barra de herramientas, el usuario puede crear un nuevo comportamiento a partir de un formulario a rellenar con los campos de título y descripción. Estos campos son opcionales. En el formulario se le ofrece la posibilidad de crear un nuevo comportamiento, además de activarlo en la misma acción. Por defecto, este comportamiento se crea vacío.
3.1.3.15 Añadir un Widget desde el Esquema de Conexiones
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos un widget disponible en el entorno de trabajo actual y tener activa la vista del esquema de conexiones del comportamiento global del mashup.
Objetivo: utilizar una instancia de un widget ya existente en el comportamiento global del mashup en el esquema de conexiones del comportamiento activo.
Procedimiento: el usuario selecciona la instancia visible en el fondo del esquema de conexiones, y selecciona la opción de añadir al comportamiento activo.
3.1.3.16 Añadir un Operador desde el Esquema de Conexiones
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; es decir, tener al menos una instancia de una aplicación web de tipo operador disponible en el esquema de conexiones y tener activa la vista del esquema de conexiones del comportamiento global del entorno de trabajo actual.
Objetivo: utilizar una instancia de un operador ya existente en el comportamiento global del mashup en el esquema de conexiones del comportamiento activo.
Capítulo 3
|
Desarrollo29
3.1.3.17 Añadir una Conexión desde el Esquema de Conexiones
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos una conexión disponible en el esquema de conexiones y tener activa la vista del esquema de conexiones del comportamiento global del entorno de trabajo actual.
Objetivo: utilizar una conexión existente en el comportamiento global del mashup en el esquema de conexiones del comportamiento activo.
Procedimiento: el usuario selecciona una conexión visible en el fondo del esquema de conexiones, mostrando de este modo la opción de añadirla en el comportamiento activo.
Postcondiciones: el sistema la añade al comportamiento activo si uno o ambos extremos de esta conexión también estaban visibles en el fondo.
3.1.3.18 Modificar la Información Básica de un Comportamiento
Precondiciones: el usuario debe estar registrado e identificado en la plataforma.
Objetivo: modificar la información básica (título y descripción) de un comportamiento creado.
Procedimiento: desde la barra de herramientas, el usuario puede listar los comportamientos parciales existentes en el entorno de trabajo actual. Entonces, el usuario selecciona la opción de preferencias en la parte derecha superior de un comportamiento, abriendo de este modo un formulario con los datos actualmente guardados de dicho comportamiento parcial. El usuario modifica la información básica disponible y selecciona la opción de guardar los cambios producidos.
3.1.3.19 Borrar una Conexión
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos una conexión disponible en el esquema de conexiones del comportamiento activo.
Objetivo: borrar una conexión existente en el esquema de conexiones del comportamiento activo.
30
Postcondiciones: si dicha conexión pertenece a otro comportamiento parcial, se fijara en el fondo del esquema de conexiones; sino, se borrará también del comportamiento global del mashup.
3.1.3.20 Borrar la instancia de un Widget
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos una instancia de un widget disponible en el esquema de conexiones del comportamiento activo.
Objetivo: borrar la instancia de un widget existente en el esquema de conexiones del comportamiento activo.
Procedimiento: el usuario selecciona la opción de borrado mostrada en la parte superior derecha del widget perteneciente al comportamiento activo, borrando además las conexiones entrantes y salientes.
Postcondiciones: si dicha instancia pertenece a otro comportamiento parcial, se fijara en el fondo del esquema de conexiones; sino, se borrará también del comportamiento global del mashup y se habilitará en el menú de herramientas.
3.1.3.21 Borrar la instancia de un Operador
Precondiciones: el usuario debe estar registrado e identificado en la plataforma; además de, tener al menos una instancia de un operador disponible en el esquema de conexiones del comportamiento activo.
Objetivo: borrar la instancia de un operador existente en el esquema de conexiones del comportamiento activo.
Procedimiento: el usuario selecciona la opción de borrado mostrada en la parte superior derecha del operador perteneciente al comportamiento activo, borrando también las conexiones entrantes y salientes.
Postcondiciones: si dicha instancia pertenece a otro comportamiento parcial, se fijará en el fondo del esquema de conexiones; sino, se borrará también del comportamiento global del mashup.
3.1.3.22 Activar la Vista Global
Capítulo 3
|
Desarrollo31
Objetivo: conocer el esquema de conexiones del comportamiento global del mashup.
Procedimiento: en la sección de herramientas, el usuario puede activar la vista del esquema de conexiones del comportamiento global. Esta acción, mostrará todas las instancias de aplicaciones web y las conexiones del esquema de conexiones del comportamiento global del mashup, resaltando las instancias y las conexiones pertenecientes al comportamiento activo y fijando al fondo el resto de componentes.
Postcondiciones: el sistema oculta todas las opciones accesibles en los componentes fijados al fondo.
3.1.3.23 Desactivar la Vista Global
Precondiciones: el usuario debe estar registrado e identificado en la plataforma.
Objetivo: conocer el esquema de conexiones del comportamiento activo.
Descripción: en la sección de herramientas, el usuario puede desactivar la vista del esquema de conexiones del comportamiento global del mashup. Esta acción, muestra una vista independiente del comportamiento activo; es decir, se muestran los componentes pertenecientes a este.
Postcondiciones: cualquier modificación realizada en esta vista, no afectará al resto de comportamientos parciales ni mucho menos al comportamiento global.
3.1.3.24 Borrar un Comportamiento
Precondiciones: el usuario debe estar registrado e identificado en la plataforma.
Objetivo: borrar un comportamiento parcial disponible en el esquema de conexiones del entorno de trabajo actual.
Procedimiento: en el formulario de edición de un comportamiento, el usuario puede observar la opción de borrado de este. Esta opción solo se muestra si no es el último comportamiento parcial de dicho esquema de conexiones. Al seleccionar esta opción, el comportamiento parcial específico será borrado del mashup.
Postcondiciones: el sistema borrará todos los componentes de dicho comportamiento. 3.1.3.25 Activar un Comportamiento
32
Objetivo: mostrar el esquema de conexiones de un comportamiento parcial.
Procedimiento: el usuario selecciona el comportamiento que desea visualizar desde el panel de comportamientos parciales. Esta acción resalta los componentes del esquema de conexiones del comportamiento seleccionado por encima del resto de componentes del comportamiento global del mashup.
3.1.4 Requisitos Específicos
En esta sección, se presentan los requisitos específicos que serán satisfechos por el nuevo editor web de conexiones. Esta lista es el resultado de un estudio profundo de los posibles casos de uso. Para la definición de los requisitos se ha seguido la siguiente nomenclatura <Tipo de requisito>.<Identificador numérico>:
- Primer campo: define el tipo de requisito lo cual permite diferenciar entre requisitos funcionales, no funcionales o de diseño.
- Segundo campo: define el identificador número de cada requisito y sigue una notación por niveles.
3.1.4.1 Requisitos Generales del Sistema
Los requisitos mencionados a continuación, tienen relación a la presentación general de la herramienta de edición una vez el usuario seleccione abrir este desde el entorno de trabajo actual.
DIS.1.1: la interfaz del sistema presentará una barra de herramientas para gestionar los comportamientos parciales, las aplicaciones web y activar la vista independiente del comportamiento activo. Esta barra se ubicará en el lateral izquierdo, facilitando así su ubicación, y se mostrará siempre en todo momento.
FUN.1.1: el sistema permitirá cambiar en cualquier momento de la vista del esquema de conexiones del comportamiento global a la vista independiente del esquema de conexiones del comportamiento activo.
Capítulo 3
|
Desarrollo33
FUN.1.3: si un operador es desinstalado de la cuenta del usuario, el sistema no lo borrará del mapa de conexiones, sino se mostrará de otra manera para notificar al usuario que ha sido borrado y pueda mover las conexiones entrantes y salientes.
3.1.4.2 Requisitos del Panel de Comportamientos Parciales
Los requisitos que se mencionan a continuación, prestan su atención al panel deslizante hacia la derecha, accesible desde la barra de herramientas, dedicada únicamente a los comportamientos parciales identificados por el usuario.
DIS.2.1: la interfaz del sistema presentará un panel relativo a los comportamientos parciales. Este panel se ubicará en el lateral izquierdo, facilitando así su ubicación, y se ocultará siempre que se realice cualquier operación fuera de este.
DIS.2.2: en el panel de comportamientos parciales, cada comportamiento será diferenciado por un título y una descripción; y a su vez, por el número de componentes (widgets, operadores y conexiones) del esquema de conexiones.
DIS.2.3: en el panel de comportamientos parciales, el comportamiento activo se resaltará más que el resto de comportamientos creados.
FUN.2.1: el sistema permitirá visualizar una lista con los comportamientos parciales pertenecientes al mashup. Si el mashup no tiene ningún comportamiento parcial creado, el sistema creará uno por defecto.
FUN.2.2: el sistema permitirá crear un comportamiento parcial a través de un formulario con los siguientes campos: título y descripción. Estos campos son opcionales. Además, el sistema ofrecerá la posibilidad de activarlo en la misma operación.
FUN.2.3: el sistema permitirá activar cualquier comportamiento parcial. Si el mashup no tiene ningún comportamiento activo, el sistema activará el primero de la lista por defecto.
FUN.2.4: el sistema no permitirá activar más de un comportamiento parcial al mismo tiempo, ni tampoco desactivarlos todos. Por defecto, siempre se tendrá un comportamiento activo.
34
FUN.2.6: el sistema permitirá borrar un comportamiento parcial. Esta operación eliminará el comportamiento del panel dedicado a ellos, además de, los componentes pertenecientes a él del esquema de conexiones del comportamiento global del mashup. Si dicho comportamiento estaba activado, el sistema activará el primero de la nueva lista por defecto. Esta operación no se mostrará accesible en el caso de que sea el último comportamiento.
FUN.2.7: el sistema permitirá visualizar previamente el esquema de conexiones de un comportamiento parcial con la finalidad de encontrar de forma más rápida un componente. Esta operación se llevará a cabo, exclusivamente en la vista del esquema de conexiones del comportamiento global, cuando el cursor esté por encima de un comportamiento parcial. Dicha operación no implicará la activación de este.
3.1.4.3 Requisitos del Panel de Aplicaciones Web
Los requisitos mencionados a continuación, están dedicados al panel deslizante hacia la derecha, accesible desde la barra de herramientas, que se centra únicamente a las aplicaciones web accesibles en ese momento desde el entorno de trabajo actual.
DIS.3.1: la interfaz del sistema presentará un panel relativo a las aplicaciones web. Esta sección se ubicará en el lateral izquierdo, facilitando así su ubicación, y se ocultará siempre que se realice cualquier operación fuera de este.
FUN.3.1: el sistema permitirá visualizar una lista con los widgets utilizados en el entorno de trabajo actual.
FUN.3.2: el sistema permitirá crear una única instancia por cada widget. El widget instanciado aparecerá como inhabilitado en la lista.
FUN.3.3: el sistema permitirá visualizar una lista con los operadores instalados en la cuenta del usuario.
FUN.3.4: el sistema permitirá crear varias instancias por cada operador.
Capítulo 3
|
Desarrollo35
3.1.4.4 Requisitos Generales del Esquema de Conexiones
Respecto a los requisitos siguientes, estos se llevan a cabo sin tener en cuenta si la vista global esta activada o no.
DIS.4.1: la interfaz del sistema presentará una sección relativa al esquema de conexiones del mashup. Esta sección abarcará prácticamente todo el espacio posible.
DIS.4.2: el sistema mostrará en todo momento las operaciones posibles con respecto a los componentes pertenecientes al comportamiento activo.
DIS.4.3: el sistema permitirá distinguir visualmente entre las aplicaciones web instanciadas de tipo widget y de tipo operador.
FUN.4.1: el sistema permitirá actualizar la posición de cualquiera aplicación web instanciada, dentro del área de esta sección.
FUN.4.2: el sistema permitirá minimizar o recuperar el tamaño de las aplicaciones web instanciadas de tipo operador.
FUN.4.3: el sistema permitirá actualizar la posición de un conjunto de aplicaciones web instanciadas previamente seleccionadas; es decir, una selección múltiple.
FUN.4.4: el sistema permitirá ofrecer recomendaciones sobre las posibles conexiones entre las aplicaciones web instanciadas. Estas recomendaciones estarán basadas en palabras claves que cada entrada y salida tendrán en su descripción.
3.1.4.5 Requisitos de la Vista Global
Respecto a estos requisitos, solo se llevan a cabo cuando el usuario tiene activado la vista global del esquema de conexiones frente a un comportamiento parcial indicado por el usuario.
DIS.5.1: el sistema mostrará la posibilidad de añadir una instancia visible en el fondo cuando el cursor este sobre ella.
