Diseño e implementación

5.  Diseño e implementación 

En este capítulo se describirán el diseño y la implementación del enfoque propuesto.        Inicialmente, se realizará una introducción detallando los requerimientos funcionales y las        tecnologías empleadas; luego se describirá el diseño del sistema desde el punto de vista        arquitectónico por medio de vistas estáticas y dinámicas. Finalmente se analizará el enfoque por        medio del diseño detallado de los distintos componentes que forman parte del sistema.  

5.1 Requerimientos funcionales

El desarrollo del presente trabajo se basó en una serie de requerimientos funcionales sobre los        cuales se realizaron el diseño y la implementación del enfoque propuesto. Los requerimientos        fueron:  

● Desarrollar un ambiente donde se puedan visualizar oportunidades de refactoring de una        manera gráfica e intuitiva. 

● Permitir seleccionar al usuario contratos WSDL a ser analizados. 

● Permitir seleccionar qué contratos WSDL serán analizados y brindar posibilidad de        agregar o eliminar contratos al grupo de contratos importados. 

● Permitir seleccionar al usuario más de un algoritmo de agrupamiento o clusterización        para el mismo conjunto de contratos WSDL. 

● Señalar antipatrones en los contratos WSDL.  ● Sugerir soluciones a los antipatrones encontrados. 

● Mostrar de una manera gráfica la cantidad de antipatrones encontrados y la cantidad de        soluciones propuestas. 

● Permitir al usuario seleccionar varios gráficos donde se puedan apreciar visualmente los        grupos o clusters formados como resultado de ejecutar los algoritmos. 

● Desarrollar una interfaz sencilla de manera que el usuario pueda acceder fácilmente a las        funcionalidades más relevantes del sistema. 

● Permitir la posibilidad de navegar los contratos WSDL que fueron analizados con un        resaltador de sintaxis que facilite su lectura. 

● Permitir la utilización del sistema sin necesidad de instalar software local. 

5.2 Tecnologías utilizadas 

En esta sección se describirán las tecnologías adoptadas para la realización del sistema. Una de        las primeras decisiones tomadas fue el ambiente de desarrollo. Como se requería no instalar        ningún software para utilizar el sistema se optó por crear una aplicación con plataforma web        donde los usuarios podrán importar sus WSDL y realizar las operaciones correspondientes.        Como tecnología web principal se utiliza Ruby on Rails (RoR) v 2.1 ya que se basa en la      19        arquitectura _​Model View Controller (MVC)      _​, la cual aporta muchos beneficios a la hora de        realizar una aplicación web. Por otro lado RoR cuenta con muchos componentes creados por la        comunidad de esta herramienta, lo cual brinda un punto extra a la hora de decidir qué        plataforma utilizar. 

Para el   _​front end de la aplicación se utilizó el framework UI llamado Bootstrap , el cuál fue        20        creado por la famosa compañía Twitter. Dicho framework facilita la maquetación de la        aplicación web, no sólo agregando estilos sino que además brinda muchas funcionalidades como        la creación de     _​tabs_​, menús, y en general funcionalidades básicas con Javascript. También se        utilizaron dos bibliotecas de Javascript, una llamada jQuery con la cual, además de realizar      21        funciones de UI también se lleva a cabo un parseo de los archivos WSDL seleccionados por el        usuario y se arman los paneles de información presentados al usuario y la otra biblioteca        responsable de la renderización de los gráficos llamada D3 , herramienta útil a la hora de      22        responder a cambios en nuestros datos y actualizar de manera muy fácil y transparente. 

Se utilizaron dos aplicaciones web escritas en Java, la primera es la mencionada en el capítulo de        trabajos relacionados,   _​Anti­pattern detector, realizada por integrantes del ISISTAN. Cabe        destacar que a esta aplicación se le agregó un wrapper para que pueda ser ejecutada como una        aplicación web, aunque de todas maneras es tratada en este trabajo como una caja negra. La        segunda aplicación web también está escrita utilizando Java, la cuál se la denomina       _​Service  Clusterer_​. A la hora de crear los proyectos para realizar los cambios pertinentes en la aplicación       

Service Clusterer_​ se utilizó Maven. 

Las dos soluciones Web integradas en la herramienta fueron acopladas utilizando       _​SpringBoot_​.  Se decidió por esta herramienta ya que como ambos componentes son accesibles a través de        servicios Web,   _​SpringBoot_​, además de incorporar todas las soluciones web del framework,        cuenta además con un servidor embebido lo cual facilita la configuración y publicación de        servicios a través de un servidor Tomcat. 

Para el análisis y comparación de resultados a través de métricas se utilizó la herramienta IDE       

RStudio_​, en el caso particular para el cálculo de las distancias inter e intra cluster, otorgando así        las soluciones y las distancias para el algoritmo de clusterización jerárquica basados en la matriz        de distancias de la herramienta. 

19 _{http://www.rubyonrails.org/} 

20 _{http://www.getbootstrap.com/} 

21 _{https://www.jquery.com/} 

5.3 Diseño del enfoque propuesto 

En esta sección se explicará cómo fue el desarrollo del enfoque propuesto. En primer lugar, se        mostrará la arquitectura de la aplicación y, posteriormente, se desarrollará el diseño detallado        del enfoque. Ambas secciones cuentan con diagramas que serán de ayuda para comprender las        decisiones tomadas. 

5.3.1 Arquitectura del sistema

Se propone la utilización de una arquitectura cliente servidor (Figura 5.1), debido a que uno de        los requisitos fue que el usuario no debería instalar ningún tipo de software a la hora de utilizar        la aplicación de modo que se decidió crear una aplicación web. La especificación del componente        cliente se abordará más adelante en el informe pero con menos detalle, ya que dicho        componente se mapea directamente al navegador web (      _​browser_​) que utiliza el usuario a la hora        de acceder a la aplicación creada. 

  Figura 5.1: Diagrama general de la arquitectura. 

En la sección de arquitectura se realizará una descripción de la misma junto con sus principales        características. En primer lugar, se mostrará una vista estática del servidor donde se verán los        distintos componentes que forman parte del mismo, y luego se mostrará la interacción entre los        componentes mediante una vista dinámica.