FRAMEWORK GRÁFICO PARA UN LABORATORIO DE ESTRUCTURAS DE DATOS

JUAN DAVID CASTRO MORENO

Asesor Jorge Villalobos

UNIVERSIDAD DE LOS ANDES

INGENIERÍA DE SISTEMAS Y COMPUTACIÓN

BOGOTÁ

2005

1

CONTENIDO 1 Introducción. …………………………………………………………3 2 Estado del arte. …………………………………………………….…5 3 Presentación de la plataforma. ………………………………..6

3.1 Aportes de la plataforma a los usuarios … ………………….7 3.2 Funcionalidad básica. …………………………………………………..8

4 Presentación arquitectura de la plataforma. ………….… 10

4.1 Vista Física. ……………………………………………..………………..10 4.2 Diseño del framework. …………………………………………………13 4.3 Interfaz gráfica. ……………………………………………………………15

5 Ejemplo ilustrado. ………………………………………………….20

5.1 Creación de una estructura. …………………..……………………21 5.2 Experimentación sobre una estructura. ………………………26

6 Puntos abiertos para la continuación del proyecto. …….31 7 Bibliografía. ……………………………………………………………33 8 Anexos. ………………………………………………………………….34

2

1 INTRODUCCIÓN

El presente documento pretende dar una visión general del trabajo de grado que desarrollé. Teniendo en cuenta que esto solo constituye una parte del trabajo de grado se sugiere al lector tener acceso directo a las fuentes de la aplicación para obtener la utilidad total del proyecto. Además de lo contenido en este documento encontrará los diagramas correspondientes al diseño como anexos. El presente documento, y el proyecto de grado en si, es el fruto del trabajo de 4 personas, Danilo Pérez, Camilo Jiménez, Jorge Villalobos y yo, juntos formamos un equipo, y por ende los resultados obtenidos son del grupo y se dieron gracias a esa unión. Agradezco de manera muy especial el trabajo de todos ellos y hago explicita la participación de ellos en este documento como lo citan las referencias bibliográficas. En el ámbito académico es común finalizar los ciclos retomando las etapas y los conocimientos que se trataron durante el ciclo entero. Al finalizar mi carrera profesional creo que es una muy buena idea retomar no solo los conceptos que me fueron impartidos durante mis cursos sino retomar la manera como estos fueron impartidos. En este punto de mi desarrollo académico puedo afirmar con seguridad que la manera como los conceptos básicos sobre la informática y la computación me fueron impartidos tiene una marcada importancia en mis intenciones de continuar adquiriendo nuevos conocimientos y poner en práctica los ya adquiridos; además de la clara influencia que tienen estos métodos en el momento puntual de asumirlos como experiencia propia. Desde el punto de vista que tengo en este momento cuento con la capacidad de argumentar que el sistema de enseñanza tiene muchos puntos susceptibles de mejorar (sin la intención de demeritar la estupenda labor de los pedagogos de la universidad), mejoras que redundarían en una mejor y más fácil adopción de los conceptos bases de la informática (entra en ésta área la algorítmica, programación, computación, etc.) por parte de los estudiantes de primeros años de educación universitaria, y permitiría no solo la posibilidad de aumentar el número de temas impartidos en un curso dado, sino la seguridad de que el estudiante ha afianzado los conceptos y podrá hacer uso de éstos en su futuro profesional. Puntualizando la problemática, el presente trabajo busca brindar una alternativa que permita a los profesores de programación y algorítmica

3

impartir de una manera más sencilla y provechosa para el estudiante los principales temas y conceptos de sus cursos. Para esto se presentará (a lo largo de este documento) una herramienta para la ejecución de un laboratorio de estructuras de datos que tiene la capacidad de crecer y evolucionar con el paso del tiempo para lograr hacer frente a los diferentes contextos que se puedan presentar, permitiendo contar en un momento dado con funcionalidad extra o modificar la ya existente. Específicamente durante este proyecto de grado se pensó en una problemática puntual (a pesar de proponer una solución que puede ser usada con diversos problemas); el método de enseñanza de estructuras de datos durante el tercer curso de programación dentro del pénsum de Ingeniería de Sistemas y Computación en la universidad de Los Andes. La dificultad de comprender las estructuras de datos radica en la difícil visualización o materialización del concepto. Es claro que las herramientas y la versatilidad ofrecida por un tablero no son nunca suficientes para lograr que los estudiantes consigan aterrizar los conceptos para comprender y asimilar con certeza los nuevos conocimientos. Por esto nos atrevimos a proponer, diseñar e implementar una herramienta que permita al estudiante visualizar animaciones gráficas de las principales estructuras de datos al tiempo que tiene una directa interacción con ellas; todo esto con el menor tiempo de desarrollo y el más fácil uso posible para el instructor. Luego de una investigación logramos proponer nuestra primera versión del diseño que la plataforma debía tener, este diseño se expone a groso modo a continuación.

4

Figura 1. Visualización Inicial del proyecto.

Se presentó un núcleo centrar al cual se le asignarán o instalarán diferentes módulos para cumplir con diferentes funcionalidades, de esta manera la plataforma lograría ser fácilmente extensible y se lograrían desarrollar nuevos módulos a un bajo costo, ya que el núcleo central incluiría funcionalidad común y de utilidad para todos los módulos. Los módulos expuestos en la gráfica se presentan como ejemplos de futuras funcionalidades que podría tener soportar la plataforma. El resultado de ésta primera aproximación fue la visualización de lo que se desearía de la plataforma, una visión de todos los requerimientos funcionales y no funcionales junto con una arquitectura que pudiera llegar a satisfacerlos, esta arquitectura no representó la decisión final con la que se inició el desarrollo pero sí conformó una buena base para lograr el diseño final. El documento de diseño completo se encuentra en el Anexo 1.

2 ESTADO DEL ARTE Durante la investigación realizada nos encontramos con la existencia de diversos entrenadores, entre ellos se destacan los siguientes:

Núcleo

Anima Reposito XtremePairProgra

Bitáco Asesoria del

5

Figura 2. Logo RoboCode.[3]

Robocode[3], aplicación que presenta una arena de batallas entre robots, robots que son programados por el estudiante, quien genera algoritmos para darle cierto comportamiento de batalla. Estos algoritmos son ingresados haciendo uso de un framework que permite manejar la reacción ante un ataque, métodos de defensa, huida, ataque, etc. Este programa fue desarrollado por Alphaworks de IBM, y se distingue por usar la diversión y los juegos de video para enseñar algoritmia a estudiantes de informática. Este mismo centro desarrolló CodeRally[5] y CodeRuler[4]. El primero permite al estudiante programar el comportamiento de un auto de carreras para realizar competencias y el segundo realizar partidos a partir de reglas en un mundo de castillos, batallas, caminos, etc. Estos dos proyectos fueron construidos como plugins de Eclipse. Además de estos proyectos la universidad de Los Andes ha desarrollado algunos proyectos en este tema, ejemplo de esto es el proyecto CuPi2, que plantea una serie de entrenadores de programación incluidos dentro de un completo sistema de enseñanza dentro de los cursos del pénsum de Ingeniería de Sistemas y Computación de la universidad; la universidad está dedicando un especial esfuerzo a la investigación en este campo, ya que es claro que los beneficios obtenidos sobrepasaran con creces el esfuerzo invertido; se logrará formar mejores profesionales, no solo dentro del plantel, sino dentro del sistema educativo del país, ya que estas tecnologías son abiertas para el uso de cualquier otra institución educativa.

6

Otros proyectos se pueden encontrar dentro de la investigación en este campo, algunos de estos fueron recogidos en [1], este análisis se cita a continuación. “Por otro lado, están los trabajos realizados en el área de visualización y animación de algoritmos. Cabe resaltar el esfuerzo que la Universidad del Sur Bahía Blanca / Argentina demuestra con aplicaciones basadas en el tema. Aquí encontramos a SVED [5], un sistema para la visualización de algoritmos de búsqueda y modificaciones de distintas estructuras de datos. Su atractivo se enfoca hacia su visión de ser un recurso didáctico para la enseñanza de la programación mediante interfaces gráficas amigables y sencillas de visualizar e implementar. Por otro lado, se encuentra ZEUS [6], una aplicación desarrollada en 1991 por el Systems Research Center. Ésta provee un entorno para la animación de algoritmos más general que SVED. Es importante también el trabajo que se desarrolla en el Gergia Tech, donde brindan un framework para la animación de algoritmos llamado POLKA [7]. Éste basa su propósito general en la construcción de algoritmos y animaciones de programas. POLKA es descendiente del sistema XTANGO, cuya finalidad es muy arecida, y hace uso de una interfaz para UNIX llamada SAMBA [8], que genera animaciones interactivas para interpretaciones en códigos ASCII. Dentro de este grupo se destaca el trabajo desarrollado por John Stasko [14][15][16] quien ha concentrado sus esfuerzos en el tema de visualización de estructuras de datos.” [1]

3 PRESENTACIÓN DE LA PLATAFORMA

LED (Laboratorio de Estructuras de Datos) es una plataforma diseñada y desarrollada para dar apoyo a la enseñanza y al aprendizaje de los temas relacionados con estructuras de datos, esto dirige la herramienta a dos tipos diferentes de usuarios: el profesor; desarrollador de estructuras de datos y extensor de la plataforma, y el estudiante; animador de algoritmos sobre las estructuras animables. 3.1 Aportes de la plataforma a los usuarios: El hecho de contar con una herramienta especialmente desarrollada para estos dos tipos trae beneficios puntuales para ambos, algunos de estos son:

7

Estudiante:

• Más rápido, mejor y más fácil aprendizaje de los conceptos al contar con un modelo visual y real de las estructuras de datos.

• Posibilidad de interactuar directamente con las estructuras obteniendo retroalimentación sobre su comportamiento inmediatamente.

• Capacidad de realizar pruebas sobre las estructuras en un ambiente controlado.

Profesor: • Facilidad para impartir las lecciones dado que cuenta con una

herramienta visual que le permite trabajar sobre modelos físicos y perceptibles a la vista.

• Bajos tiempos de desarrollo de estructuras animables nuevas. • Posibilidad de crear nuevos ejercicios prácticos (experimentos)

basados en el uso de la herramienta. • Fácil extensión de la plataforma.

Además de esto, LED provee un ambiente flexible que permite adicionar y retirar componentes funcionales sin necesidad de tener que construir de nuevo la herramienta entera, además de esto se provee la capacidad de realizar actualizaciones y descargar nuevas estructuras desde un servidor remoto. 3.2 Funcionalidad básica: La funcionalidad básica de la plataforma esta descrita a continuación:

8

Actor Funcionalidad Descripcion estudiante Animar un algoritmo de

alguna de las estructuras disponibles en el ambiente de trabajo

El estudiante debe seleccionar una estructura de datos entre las que están instaladas en el motor de LED. Luego, escoge entre todos los intérpretes posibles de la estructura aquel que le permite una mejor comprensión del algoritmo sobre el que quiere trabajar. Un intérprete puede ser, por ejemplo, un visualizador gráfico de los estados por los que pasa la estructura durante la ejecución del algoritmo. El tercer paso es escoger un generador de datos para llenar la estructura. El laboratorio cuenta con distintos generadores de datos, todos parametrizables. Por último, el estudiante selecciona el algoritmo que quiere animar, entre los que tiene disponibles la estructura. Con esta información LED genera la estructura de datos y ejecuta el algoritmo pedido, asegurándose que los sensores y manejadores de traza asociados con el intérprete seleccionado estén adecuadamente instalados sobre la estructura. Finalmente, le da control al intérprete, quien le permite navegar al estudiante por los resultados obtenidos.

estudiante Hacer una prueba sobre un algoritmo desarrollado por el estudiante.

Es una variante de la funcionalidad anterior, en la cual el estudiante desarrolla el algoritmo cuya operación quiere visualizar. En este caso el laboratorio apoya al estudiante en el desarrollo del algoritmo.

9

estudiante Hacer un experimento. Un experimento es un conjunto estructurado de pruebas para las cuales hay una definición global de parte del estudiante, y una visualización del conjunto de los resultados como un todo. Para esto, el estudiante comienza seleccionando la estructura sobre la cual va a trabajar. Luego define el número de pruebas que van a conformar el experimento. El siguiente paso es definir la manera como se van a generar los datos para cada una de las pruebas. Esto se puede hacer de manera individual o describiendo una secuencia de crecimiento o decrecimiento. Después, el estudiante selecciona un intérprete que permita consolidar los resultados de las pruebas. Finalmente, selecciona o desarrolla el algoritmo sobre el cual quiere trabajar.

estudiante Actualizar los componentes.

A través de esta funcionalidad el estudante puede cargar nuevos componentes instalados en el ambiente de trabajo componentes en su ambiente de trabajo. Para esto LED se conecta con el servidor que tenga configurado, verifica la versión de las estructuras que encuentra, y pregunta al estudiante si quiere instalarlas en el ambiente de trabajo. Esto permite de manera dinámica actualizar los elementos de trabajo del estudiante.

profesor Crear una nueva estructura.

El profesor puede crear una nueva estructura, utilizando los elementos disponibles en el framework. La creación de una estructura implica la construcción de todos los componentes necesarios para permitir la animación de la estructura. Eso implica el desarrollo o adaptación de la siguiente cadena de componentes: sensor, manejador de trazas, interprete de prueba, interprete de experimento.

10

profesor Crear un nuevo componente para extender una estructura existente.

El profesor puede también definir un nuevo componente para una estructura existente. Eso puede ir desde la creación de un nuevo sensor, hasta el desarrollo de un nuevo experimento. El laboratorio provee todas las herramientas necesarias para que este desarrollo resulte del menor nivel de complejidad posible.

profesor Publicar un nuevo componente.

El profesor puede publicar en el servidor al que está conectado los nuevos componentes que desarrolló o adaptó.

Tabla 1. Funcionalidad básica LED [1]

4 PRESENTACIÓN DE LA ARQUITECTURA DE LA PLATAFORMA

4.1 Vista física

11

Figura 3. Arquitectura física de LED [1] Físicamente la plataforma esta compuesta por dos partes esenciales, una que provee la funcionalidad requerida para el manejo de experimentos sobre estructuras de datos al usuario final (estudiante y profesor) y otra que provee la funcionalidad necesaria para realizar actualizaciones de la plataforma y descarga de nuevas estructuras de datos. “Como plataforma base para el desarrollo de la aplicación principal se escogió Eclipse [11]. Se trata de una herramienta creada por IBM y OTI para el desarrollo integrado de aplicaciones. Su atractivo y fortaleza radica en su arquitectura más que en su funcionalidad. Se basa en un modelo de plugins que permite “conectar” y “desconectar” componentes funcionales de software de forma casi transparente. Eclipse se construyó bajo una arquitectura de microkernel o micronúcleo. Es decir, que solo tiene un pequeño núcleo y el resto de servicios se montan en torno a éste. Dicho núcleo consiste en un ambiente dinámico de descubrimiento, cargado y ejecución de plugins. Sobre él se ensamblan una serie de plug-ins formando módulos o subsistemas de distinta función que definen y utilizan puntos de extensión entre sí. Son estos subsistemas los que le dan el verdadero comportamiento a la plataforma, puesto que

12

el núcleo sólo conoce los conceptos base. De esta forma, se va incorporando la funcionalidad deseada a la plataforma.” [1] LED está construido como un conjunto de plugins de Eclipse, aprovechando así la gran flexibilidad y facilidades de adaptación que éste propone. El primero de los plugins implementa la funcionalidad requerida a nivel del modelo de base y de la interfaz gráfica. Este plugin define a su vez, puntos de extensión por medio de los cuales se conectan las estructuras de datos y herramientas que se desarrollan. Puntos que permiten también que se extiendan nuevas funcionalidades a la herramienta para adicionar nuevos servicios. De igual forma, las estructuras de datos que hacen parte de la plataforma, se construyen como plugins de Eclipse, haciendo uso de los puntos de extensión definidos. Se pueden ver, entonces, las estructuras de datos como plugins del motor de LED, como se muestra en la figura 4.

Figura 4. Arquitectura del framework y herramientas en términos de plugins [1]

El servidor central de LED es un servidor Web tradicional en el cual se publican todos los componentes y/o módulos que se pueden descargar, estas descargas se realizan usando el protocolo HTTP y adaptando la funcionalidad que contiene Eclipse para el manejo de éste.

4.2 Diseño del framework El framework de LED está diseñado para proveer funcionalidad general y de utilidad para el desarrollo de las estructuras de datos, el manejo de actualizaciones, interfaz gráfica, etc.

13

A continuación se presenta una visión global del modelo del framework[1] en su propia terminología. Definir un concepto de estructura: El modelo debe entender y soportar la generalidad que describe a una estructura de datos y proponer en un siguiente nivel un punto de convergencia para todas las posibles estructuras. Definir patrones de monitoreo con el fin de simular el comportamiento de una estructura de datos: El concepto de laboratorio nos lleva a definir un modelo de experimentación. En este caso del comportamiento de una estructura de datos. Es necesario establecer un patrón que permita recoger de forma estándar la información relevante para el análisis de algoritmos. Definir patrones de traducción con el fin de interpretar el comportamiento de una estructura de datos. Es fundamental definir un punto de convergencia en el que se interpreten los patrones de monitoreo con el fin de establecer un nexo entre la interacción de una estructura de datos en un algoritmo y su visualización y/o análisis posterior. Definir el concepto de prueba y experimento: El modelo de LED debe tener en cuenta la ejecución de uno o más algoritmos y evaluar diferentes interpretaciones según sea el caso. En este orden de ideas, se propone un framework basado en plugins desarrollados para proveer diferentes funcionalidades, a saber, un core (Lógica del negocio, concepto general de estructura, GUI, patrón de monitoreo), estructuras animables base (Concepto específico de estructura) e intérpretes (Patrón de traducción). Asociado a esto se definen tres niveles, y se toma como primero una estructura de datos y su funcionalidad. Este primer nivel establece a la estructura de datos como una LedStructure, lo que le da un lugar dentro del modelo y una interacción definida con el core y los intérpretes. En un nivel superior, se tiene en cuenta un patrón de monitoreo basado en eventos, sensores y trazas con el fin de analizar la interacción de una estructura de datos en un algoritmo. Cada evento toma en cuenta casos genéricos como adicionar, eliminar y modificar, además de posibles casos especiales como eventos de registros de tiempos y de análisis de complejidad. Registrado como un observador de la estructura, un sensor

14

analiza los diferentes eventos que ésta pueda generar y los almacena como tal en una traza, la cual provee un ambiente de registro de eventos en el tiempo. Pueden existir varios sensores asociados a una o más estructuras, al igual que trazas a uno o más sensores. Correspondiendo a un tercer nivel, vimos necesario la definición de intérpretes, los cuales definen una interfaz para la visualización de la información obtenida por medio del patrón de monitoreo. Estos están asociados con trazas según sea el caso. Respondiendo a la última de las características que se definieron anteriormente, el modelo de LED cuenta con la opción de analizar la interacción de una estructura de datos en una o varias ejecuciones de un mismo algoritmo. Para ello, se establecen dos entes: Prueba y Experimento. Una prueba es el desarrollo de una repetición para los tres niveles en el modelo, y un Experimento es un conjunto de Pruebas. Cada uno de ellos posee un alcance determinado por los indicadores de análisis que resultan de una o más ejecuciones de algoritmos (Por ejemplo: Mientras en una repetición el tiempo de demora puede ser irrelevante, en varias puede inferir gráficas de análisis de eficiencia con distintos datos). Como podemos ver, el modelo de LED gira en torno al análisis de estructuras y se define como un conjunto de plugins, cada uno de ellos con funcionalidades y objetivos específicos. Siguiendo los niveles estructura – patrón de monitoreo (evento, sensor, traza) – patrón de traducción (intérpretes específicos), el modelo permite un manejo dinámico de estructuras y una clara diferenciación entre un Core (Lógica del negocio), una estructura y los diferentes intérpretes de esta.[1] 4.3 Interfaz Gráfica En segunda instancia encontramos el nivel de Interfaz Gráfica. Presenta un modelo para la manipulación de artefactos gráficos como soporte a la animación de algoritmos sobre estructuras de datos animables. La arquitectura que soporta el manejo gráfico de la herramienta se compone esencialmente de 4 módulos. Su propósito es asegurar que el trabajo del usuario desarrollador de estructuras sea ajeno a la plataforma final de graficación (SWT). Esto garantiza una estandarización en las interfaces y una más fácil y natural evolución y/o migración a nuevas plataformas. De igual forma, está orientado a

15

facilitar la creación de nuevas interfaces y a la reducción en su tiempo de desarrollo. Los conceptos generales que hacen parte de este nivel se pueden apreciar en la Figura 5.

Figura 5. Diagrama conceptual UI. A continuación se describen lo módulos que conforman el diseño de la Interfaz Gráfica: Core

Está compuesto por las clases encargadas de manejar los paneles, las constantes y el uso directo de la tecnología de manejo gráfico (SWT). Aquí encontramos:

16

Figura 6. Diagrama de clases Core

o LedPanel: Esta clase debe ser extendida por todas las estructuras que provean interacción gráfica. Cada instancia de una clase que extienda de LedPanel representa una pestaña dentro de la vista correspondiente a la estructura en ejecución.

Figura 7. Imagen de una vista general con pestañas, la imagen tiene una flecha indicando las pestañas.

Expone todos los métodos necesarios para manejar la totalidad de los elementos gráficos, v. gr. agregar botones, agregar ítems, dibujar líneas, círculos, cuadrados, etc., cambiar colores del fondo, exportar imágenes, etc. o LedPaintListener:

17

Es la única clase que tiene relación con la plataforma de manejo gráfico SWT, esta clase expone la funcionalidad para manejar todos los ítems gráficos con sus diferentes atributos.

Figura 8. Uso de LedPaintListener o LedUI: Encapsula las constantes relacionadas con toda la aplicación, constantes como colores, tipos de líneas, tipos de textos, etc.

Layout

Este módulo contiene la interfaz que debe ser implementada por todos los layouts. Adicionalmente contiene los layouts disponibles por defecto.

Figura 9. Uso de LedLayout

Ítems

Contiene las clases que dan soporte a los ítems gráficos compuestos LED. Estos ítems tienen soporte especial como uso de layouts,

18

manejo de eventos (clic), incorporación de texto, manejo de colores y coordenadas, etc. El módulo además de contener la interfaz que define los ítems tiene algunos ítems ya desarrollados y listos para su uso. Aquí encontramos:

Figura 10. Diagrama de clases Ítems.

o ILedActiveItem: Interfaz que implementan todos los ítems activos, es decir los ítems que responden al evento clic. o ILedEventHandler: Interfaz que debe ser implementada por la clase que maneja el evento clic asociado al ítem activo. o LedConnector: Esta clase presta la funcionalidad para dibujar conectores entre dos ítems, este conector maneja automáticamente sus coordenadas según la posición de los ítems que conecta.

19

Figura 11. LedConector

Figura 12. Uso de LedConector

o LedBox Esta clase es un ejemplo de ítem activo; corresponde a un cuadrado que puede tener cualquier texto en su interior.

Figura 13. Imagen de ejecución dos ítems y un LedConnector.

20

5 EJEMPLO ILUSTRADO DE CREACIÓN Y USO DE ESTRUCTURAS ANIMABLES

El ejemplo que se presenta a continuación fue tomado de [1]. En esta sección se ilustra, a través de un ejemplo simplificado, el procedimiento que se usa para la creación de una estructura de datos, para posteriormente poder experimentar sobre ella. Para ello, se divide el próximo ejemplo en dos secciones, de acuerdo con los actores que realizarán cada procedimiento. En primera instancia, se presenta la creación de un árbol AVL por parte de un profesor. De este proceso se obtiene un paquete con una estructura y un conjunto de intérpretes asociados, que constituye una unidad de instalación en LED. Luego, se muestra la manera como un estudiante utiliza dicho paquete dentro del laboratorio para hacer una prueba. 5.1 Creación de una estructura Para el proceso de crear una nueva estructura de datos dentro del laboratorio, el profesor cuenta con soporte tanto a nivel de framework como de herramientas. A continuación se describe el proceso paso a paso: · Definición del proyecto. Como primera medida, se le indica a la plataforma que se desea construir una nueva estructura de datos. Esto se lleva a cabo mediante la definición de un nuevo proyecto Eclipse de creación de estructura LED. Para ello se introducen los siguientes datos: el nombre del proyecto, el identificador y nombre de la nueva estructura y el nombre la clase que implementará la funcionalidad de esta (figura 5).

21

“Figura 5”. Wizard de creación de proyecto de una nueva estructuras[1]

· Al definir el nuevo proyecto, se le presenta al usuario un editor que permitirá darle forma al paquete que se construye. Por un lado permite especificar las piezas funcionales que arman el proyecto: estructura, eventos e intérpretes. También es posible definir la parte descriptiva del proyecto, indicando información como: el autor, la descripción y tipo de licencia del proyecto entre otros. Esto se muestra en la figura 6. · Luego, se procede con la implementación de la funcionalidad que proveerá la nueva estructura. Al momento de creación del nuevo proyecto, se genera el archivo java para la clase de la estructura especificada. Este archivo parte de una plantilla predefinida de código, que extiende y utiliza las clases que el framework provee. Así, se hace

22

uso automáticamente de los mecanismos provistos por Eclipse para la interacción entre plug-ins, tomando como punto de enlace el punto de extensión definido por el motor. Es aquí donde se definen los atributos, métodos y demás 8 clases que le darán forma a la nueva estructura. Para este caso, los necesarios para la definición de un árbol AVL. Teniendo entre estos la adición, eliminación de datos, recorridos, etc.

“Figura 6. Editor del proyecto[1]”

· Una vez desarrollada la nueva estructura de datos, se procede a definir los eventos que ésta generará cuando se manipule a través de algún algoritmo. El editor del proyecto permite realizar este procedimiento de forma sencilla presentando una lista de los eventos existentes (figura 7). Si se desea se pueden crear nuevos eventos que se ajusten a las necesidades particulares de la estructura. Para ello se indican los nombres de las clases que implementarán la funcionalidad de los nuevos eventos. Así como con la estructura de datos, en ese caso se generan también las plantillas que proveen la base para la creación de los eventos.

23

“Figura 7”. Declaración de eventos[1]

“Figura 8”. Declaración de intérpretes[1]

· La siguiente etapa es la definición de los intérpretes. Se declaran a través del respectivo editor de LED, ya sea adicionando existentes o definiendo nuevos (figura 8). Para la implementación de nuevos

24

intérpretes, es posible utilizar los elementos provistos por el framework, descritos anteriormente. En el ejemplo utilizamos el intérprete definido por la plataforma para la animación de algoritmos sobre árboles AVL. · Finalmente, una vez terminada la declaración y definición de las distintas piezas del proyecto, los componentes desarrollados pueden publicarse en el servidor del laboratorio. Para esto, existe una herramienta que permite especificar la ruta donde se publicará la nueva estructura, como se aprecia en la figura 9. Con esto, la herramienta empaqueta el proyecto en su forma final (como un plugin especial Eclipse en un archivo JAR). Luego lo monta en el servidor especificado, para su posterior descarga y utilización por parte otros usuarios.

25

“Figura 9”. Publicación de una estructura en el servidor del laboratorio[1]

5.2 Experimentación sobre una estructura El procedimiento llevado a cabo por un estudiante para interactuar con una estructura existente es sencillo. Primero, debe escoger la estructura sobre la que quiere trabajar. Luego, adiciona los intérpretes necesarios para llevar a cabo la prueba o el experimento. Enseguida, parametriza la prueba, indicando cosas como el llenado de los datos y el número de iteraciones. Finalmente ejecuta el experimento y analiza los resultados utilizando para esto los intérpretes escogidos. A continuación se muestra este procedimiento paso a paso: · El primer paso es crear un nuevo proyecto de experimentación en LED, como se muestra en la figura 10. Simplemente se le da un nombre al proyecto para identificarlo. Con esto, se abre un editor que permitirá escoger la estructura con la que se va a experimentar.

26

“Figura 10”. Creación de un nuevo experimento[1]

· El segundo paso es seleccionar la estructura y parametrizar la prueba. La herramienta cuenta con un editor especial que permite escoger de forma sencilla e intuitiva la estructura de datos con la cual se quiere trabajar. De igual forma permite definir la prueba que se quiere realizar sobre la estructura escogida y los parámetros del experimento como tal. Como se puede ver en la figura 11, se debe dar valor algunos parámetros tales como la forma de llenar la estructura de datos, los intérpretes que se utilizarán, el número de iteraciones de la prueba, y la posibilidad de definir un método personalizado dentro de ésta.

27

“Figura 11”. Editor de experimentos en LED. [1]

· En la figura 12 se muestra la manera de crear un método que va a ser animado. Dicho método o procedimiento pertenece a una clase especial dentro del framework que permite su integración con el resto del experimento. De esta forma, se extiende la funcionalidad básica de un experimento. Esto, junto con la definición y escogencia de distintos intérpretes, brindan una gran flexibilidad en la definición de experimentos que se pueden realizar.

28

“Figura 12”. Edición del método personalizado. [1]

· Una vez definidos los parámetros del experimento que se quiere realizar, se procede a su ejecución. Para ello simplemente se pulsa el botón Ejecutar Experimento de la herramienta. Esto ejecuta los pasos definidos para la prueba de acuerdo con los parámetros indicados. Luego de la ejecución, se despliegan los intérpretes escogidos con los datos recogidos y traducidos de acuerdo al criterio de cada uno (figura 13). Luego de la ejecución del experimento el estudiante puede entonces, analizar la información recogida de éste. También cuenta con la posibilidad de guardar los resultados para su posterior estudio. [1]

29

“Figura 13”. Ejecución del experimento. [1]

6 PUNTOS ABIERTOS PARA LA CONTINUACIÓN DEL PROYECTO Luego de este primer desarrollo de LED, es posible imaginar nuevos puntos de investigación y trabajo, el desarrollo de nuevos módulos con nuevas funcionalidades constituye uno muy importante, así como la expansión y mejoramiento del desarrollado en esta etapa. Otro punto importante de investigación es evaluar el real impacto que tiene la aplicación sobre los dos tipos de usuarios planteados, es decir, el impacto que tiene sobre la forma de impartir los conocimientos por parte de los maestros y la facilidad de aprendizaje por parte de los estudiantes, este punto debería tener en cuenta tanto el resultado final del proceso de enseñanza como la comodidad de los actores en este proceso, es decir, el trabajo debería concluir que tan como se siente un estudiante usando la herramienta y que tan viable es para el profesor su uso.

30

31

7 REFERENCIAS BIBLIOGRÁFICAS

[1] Villalobos, J. , Pérez D.,Castro J, Jiménez C. Construcción de un Laboratorio Flexible de Estructuras de Datos, Universidad de Los Andes, Mayo 2005. [2] Gamma, E. and Beck, K. Contributing to Eclipse: Principles, Patterns, and Plugins, Addison Wesley Professional, 2003. [3] “Robocode”, http://aplhaworks.ibm.com/tech/robocode [4] “CodeRuler”, http://aphaworks.ibm.com/tech/coderuler [5] “CodeRally”, http://aphaworks.ibm.com/tech/coderally [6] Alpha Works, IBM. http://www.alphaworks.ibm.com [7] Eclipse, http://www.eclipse.org [8] D´Anjou, J., Fairbrother, S., Kehn, D., Kellerman, J., McCarthy , P. Java(TM) Developer's Guide to Eclipse, The (2nd Edition), Addison-Wesley Professional; 2 edition 2004. [9] Clayberg, E., Rubel, D. Eclipse: Building Commercial-Quality Plug-ins (Eclipse Series), Addison-Wesley Professional 2004. [10] Northover, S., Wilson M. SWT : The Standard Widget Toolkit, Volume 1, Addison-Wesley Professional 2004. [11] Villalobos, J. Diseño y Manejo de Estructuras de Datos en C, McGraw-Hill, 1996. [12] Scarpino M., Holder S., Stanford Ng., Mihalkovic L., SWT/JFace in Action : GUI Design with Eclipse 3.0, Manning Publications 2004 [13] Harris, R. and Warner, R. The Definitive Guide to SWT and JFACE, Apress, 2004.

32

[14] “Polka Animation System”, http://www.cc.gatech.edu/gvu/softviz/parviz/polka.html [15] “Samba Algorithm Animation System”, http://www.cc.gatech.edu/gvu/softviz/algoanim/samba.html

33

8 ANEXOS Anexo 1. PRIMERA APROXIMACIÓN A LA SOLUCIÓN Este documento presenta el primer diseño de la solución, este diseño fue nuestro punto de partida hacia la solución final. La herramienta está compuesta por una serie de módulos independientes entre si que ofrecen ciertas funcionalidades al usuario. La herramienta posee un núcleo central capaz de ofrecer al usuario los servicios de cada módulo instalado en el él.

Cada uno de los módulos que componen la herramienta pueden ser instalados y desinstalados independientemente de los otros módulos.

Núcleo Central

Animator Repositorio XtremePairPrograming

Bitácora Asesoria del Profesor

34

Modulo para animación de algoritmos sobre estructuras de datos:

El primer módulo inicialmente planteado ofrece funcionalidades para el trabajo de estructuras de datos; exponiendo los siguientes servicios para los usuarios finales:

• Animación de algoritmos sobre estructuras de datos por parte de los estudiantes.

• Monitoreo de la ejecución sobre diferentes aspectos por parte de los estudiantes.

• Visualización de variables temporales dentro de las animaciones por parte de los estudiantes.

• Creación de nuevas estructuras de datos por parte de los instructores. • Creación de nuevos monitores de ejecución por parte de los instructores. • Creación de nuevas variables temporales por parte de los instructores.

Estas funcionalidades dentro de una aplicación al alcance de los estudiantes y junto con una adecuada instrucción permitirá, sin duda, la mejor y más sencilla adopción de los conceptos por parte del estudiante ya que facilitará la visualización y formación de un esquema mental de una noción que era abstracta en primera medida. Para el mejor entendimiento de éste módulo se hará explícito el mundo del problema, para tener convergencia en el entendimiento de los términos usados:

• Animator: Nombre del módulo entero de animación de algoritmos sobre estructuras de datos.

• Estructura animable: Estructura de datos desarrollada dentro de Animator y por lo tanto se encuentra disponible para el uso de los estudiantes. Este ente debe contar con la estructura necesaria para pertenecer a Animator y debe exponer toda la funcionalidad necesaria para permitir al estudiante su completo uso.

• Animación: Una animación corresponde a la visualización de una estructura animable dentro de una interfaz gráfica permitiendo ver con claridad los movimientos que se llevan a cabo dentro de la estructura de datos.

• Variable Temporal Animable: Una variable temporal animable corresponde a un tipo de variable asociada a un algoritmo, este tipo de variable, al igual que las estructuras animables, debe haber sido desarrollado dentro de

35

Animator y contar con la estructura adecuada. Estas variables temporales son visibles al estudiante dentro de la animación del algoritmo, incluso pueden ser estructuras animables.

• Monitor de ejecución: corresponde a un ente que permite al estudiante tener información a cerca de la ejecución de su algoritmo, estos datos pueden o no ser visibles en tiempo de ejecución dentro de la animación.

Según la funcionalidad expuesta es clara la división de usuarios que se tienen:

• Estudiante: Usuario final de la herramienta que está interesando en desarrollar algoritmos sobre las estructuras animables para ejecutar sus animación, visualizar y manipular la estructura de datos, variables temporales y monitores de ejecución.

• Desarrollador: Usuario final de la herramienta que está interesado en desarrollar nuevas estructuras de datos animables, variables temporales y monitores de ejecución. En su desarrollo de nuevas estructuras puede hacer uso tanto del framework central como de otras estructuras de datos animables.

Los casos de uso para estos dos usuarios son: Desarrollador de Estructuras Animables:

1. Crear proyecto: Estructura Animable

36

1.1 Indicar el nombre del proyecto Al crear un Nuevo proyecto Estructura Animable, el usuario debe poder elegir el nombre del proyecto.

1.2 Indicar el nombre de la estructura

La estructura a desarrollar deberá tener un nombre, el que verá el usuario final (el estudiante) al momento de iniciar un proyecto animable, este nombre deberá ser elegido por el desarrollador de la estructura.

1.3 Indicar el nombre de la clase principal Cuando un estudiante desea realizar un proyecto animable debe elegir una estructura animable entre todas las disponibles, la aplicación hará que la clase principal del estudiante herede de la clase principal de la estructura elegida por el estudiante, ésta clase principal debe ser elegida por el desarrollador de la estructura.

1.4 Indicar los requerimientos que necesitará su estructura Al iniciar un proyecto Estructura Animable se desplegará al desarrollador todas las estructuras disponibles en ese momento, éste podrá elegir entre todas éstas las que su estructura va a requerir o usar para su funcionamiento. Esta acción puede ser realizada en cualquier punto durante el desarrollo de la estructura animable.

2. Editar archivo descriptor: El desarrollador tiene la capacidad de editar el archivo descriptor de la estructura animable en cualquier momento; para esto puedo hacer uso de la interfaz ofrecida, mediante la cual podrá agregar, modificar o eliminar elementos del archivo de manera gráfica. También podrá hacer esta edición haciendo uso del editor de texto de la plataforma, directamente sobre el archivo.

3. Probar estructura:

El desarrollador de una estructura deberá tener la capacidad de iniciar una nueva sesión de la plataforma (eclipse, en este caso) en la cual ya se encuentre instalada la estructura que se encuentra desarrollando, en el estado en que ésta se encuentre, esto con el fin de realizar pruebas sobre la estructura en desarrollo fácilmente.

4. Empaquetar versión final

37

Al terminar el desarrollo de una estructura animable la plataforma le permitirla usuario realizar la liberación final de ésta, con la intención de realizar el empaquetamiento final de todos los archivos requeridos, dejando el resulta final listo para ser distribuido y usado por los usuarios finales (estudiantes).

Estudiante:

1. Crear nuevo proyecto Animable 1.1 Indicar nombre y localización del proyecto

Al iniciar un proyecto es estudiante podrá elegir la localización del proyecto y el nombre de éste.

1.2 Elegir la estructura para su proyecto animable.

Al iniciar un proyecto animable se presentara al estudiante un listado con todas las estructuras instaladas en la máquina en el momento, el estudiante elegirá una de las estructuras para su proyecto animable.

1.3 Ejecutar el proyecto animado.

1.3.1 Detener la ejecución (Deseable) 1.3.2 Reanudar la ejecución (Deseable) 1.3.3 Visualizar el estado de las variables temporales 1.3.4 Visualizar el estado de los módulos de monitorio de ejecución

disponibles.

38

2. Instalar nuevas estructuras Realizar todas las operaciones necesarias para que el usuario instale nuevas estructuras con solo localizar el archivo correspondiente a la estructura de datos, sea local o en algún servidor de descargas.

La estructura interior del módulo presenta tres módulos principales:

Módulo para desarrolladores: Módulo dirigido a los desarrolladores de estructuras de datos animables, provee la funcionalidad necesaria para crear un proyecto Estructura Animable, hacer uso de mas estructuras animables y del framework central, realizar la ejecución de la estructura preliminar para ejecutar pruebas y realizar la liberación final de la estructura.

Módulo para estudiantes:

Módulo dirigido a los usuarios de las estructuras animables, requieren hacer proyectos animables y ejecutarlos. No esta pensando que extiendan la plataforma.

Framework central:

Librería base de las estructuras animables, presta la funcionalidad básica de la plataforma base (eclipse, en este caso), y las funciones generales de todas las estructuras animables.

Cada uno de estos módulos cuenta con su estructura propia para garantizar el total cumplimiento de sus responsabilidades. A continuación se muestra la estructura de cada uno de los módulos: Módulo para desarrolladores:

39

El módulo para desarrolladores tiene la responsabilidad de satisfacer todos los requerimientos funcionales y no funcionales que conciernen al desarrollo de nuevas estructuras de datos. Los módulos en su interior tienen las siguientes responsabilidades:

• DeveloperPlugin: Es la clase central del módulo, su responsabilidad es proveer a Animator del wizard de creación de nuevos proyectos para que éste lo disponga al usuario. Así mismo debe controlar la ejecución en modo prueba de las estructuras animables en desarrollo y la liberación final de la estructura animable. Esta clase controla todo el flujo hacia la estructura a través del StructureManager.

• NewDeveloperProjectWizard: Controlar la interacción con el usuario para solicitarle toda la información necesaria para la creación del nuevo proyecto. Así mismo es responsabilidad suya la creación de la estructura de directorios y la generación de código para la(s) clase(s) principal(es) del proyecto y añadir al classpath las librerías correspondientes a las estructuras de datos que el usuario ha decidido usar en su desarrollo.

40

• StructuresLodear: Administra el uso de las estructuras animables

instaladas en la aplicación, de ésta manera tiene la responsabilidad de cargarlas, leer sus constructores, y proveer al módulo encargado de la creación de nuevos proyectos de toda la información necesaria para usar cada una de las estructuras en el desarrollo.

• StructureManager: Controla el flujo de información correspondiente a la estructura animable.

• ProjectTestLauncher: Se encarga de localizar toda la información necesaria para ejecutar una nueva instancia de eclipse que tenga la estructura animable en desarrollo instalada para ser probada, así mismo debe lanzar esta nueva instancia de eclipse.

Módulo para estudiantes:

41

El modulo para el manejo de los proyectos de los estudiantes esta encargado de proveer al estudiante la máxima funcionalidad para que éste pueda crear un nuevo proyecto animable, escribir un algoritmo y animarlo. Las responsabilidades de los entes que lo componen son:

• StudentPlugin: Es la clase central del módulo, su responsabilidad es proveer a Animator del wizard de creación de nuevos proyectos para que éste lo disponga al usuario. Así mismo debe controlar la ejecución e la animación. Esta clase controla todo el flujo hacia la estructura a través del StructureManager.

• NewStudentProjectWizard: Controlar la interacción con el usuario para solicitarle toda la información necesaria para la creación del nuevo proyecto. Así mismo es responsabilidad suya la creación de la estructura de directorios y la generación de código para la(s) clase(s) principal(es) del proyecto y añadir al classpath las librerías correspondientes a las estructuras de datos que el usuario ha decidido usar en su desarrollo.

• StructuresLodear: Administra el uso de las estructuras animables

instaladas en la aplicación, de ésta manera tiene la responsabilidad de cargarlas, leer sus constructores, y proveer al módulo encargado de la creación de nuevos proyectos de toda la información necesaria para usar cada una de las estructuras en el desarrollo.

• StructureManager: Controla el flujo de información correspondiente a la estructura animable que esta siendo usada por el estudiante.

• ProjectLauncher: Se encarga de localizar toda la información necesaria para ejecutar la animación. Manejo del classpath para iniciar la animación.

Framework Central El framework central corresponde al módulo que expone las principales funcionalidades para la generalidad de las estructuras animables.

42

43

Mecanismos de extensión.

El principal punto de extensión de la plataforma son las estructuras animables, un desarrollador puede producir cualquier estructura de datos que cumpla con las características de la plataforma y la estaría extendiendo. Además de esto la plataforma permite extenderse, a más bajo nivel, en los siguientes puntos: A. Framework central: El framework central está diseñado para ser extendido

en la mayoría de sus módulos. La arquitectura propuesta permite que se agreguen controles a la ventana principal de la aplicación (junto con sus controladores), tipos de nodo (es decir los objetos que componen cada una de las estructuras de datos), monitores de ejecución (módulos que reportan las estadísticas de una ejecución) estos últimos vienen a ser servicios de un manejador de monitores, quien los registra y les avisa cuando algún evento ocurra sobre la estructura.

B. Archivos de descripción:

Los archivos de descripción proveen a la plataforma de toda la información necesaria para cargar módulos en ejecución facilitando en gran medida la extensión de la plataforma.

Definición estructura animable: La siguiente es la estructura lógica de una estructura animable:

44

La siguiente es la vista física.

Una estructura animable está representa dentro de la plataforma por un archivo que empaqueta los siguientes elementos:

1. Archivo xml descriptor de la estructura de datos. <structure name=”name” mainClassName=”” importName=””> <dependencies> <dependecy name=”dependency.jar”> </dependencies>

<initDataModels> <initModel> <method name=”cargarOrden”/> <arguments> <argument type=”String” value=”a”/> </ arguments >

</ initModel >

45

</ initDataModels > </structure>

2. Archivos .class que requiere la estructura. 3. Librerías utilizadas.

Arquitectura Plugin Animator:

La arquitectura general del plugin propone un sistema de servicios que son descubiertos por un módulo central y expuestos al usuario final mediante un wizard de creación de proyectos nuevos. De esta manera es totalmente factible tener en una maquina solo dos de los servicios propuestos inicialmente, así mismo es factible la creación de nuevos proyectos con arquitecturas totalmente independientes. Esto genera una arquitectura aparentemente muy sencilla pero realmente muy útil, muy flexible y muy apropiada para los propósitos que se tienen, ya que podríamos no solo pensar en animación de algoritmos, sino en toda una plataforma de ayuda académica a todo nivel. Procesos críticos: Ejecución de un proyecto de un estudiante:

46

Es importante notar que las clases del estudiante son cargadas e instanciadas usando instrospección, para luego, con este mismo método, llenar la estructura de datos según el método selccionado y por último ejecutar la animación.

Interfaces gráficas: La ventana principal consta de tres botones, y una regleta deslizante horizontal, y una venta central las funciones de estos controles son las siguientes:

1. Primer botón: Iniciar la animación / detener la animación para iniciarla de nuevo desde el mismo punto

2. Segundo botón Detener definitivamente la animación. 3. Tercer botón: Volver al punto inicial.

47

4. Regleta deslizante: Seleccionar la velocidad en la cual se desea ver la animación.

5. Ventana central: en esta ventana se visualizará la animación de la estructura de datos, la ventana cuenta con scroll tanto horizontal como vertical.

Vectores:

48

En las animaciones de vectores tenemos una serie consecutiva de casillas, cada casilla tiene en su parte superior su índice dentro de la estructura para facilitar la comprensión del algoritmo animado. Las ventanas tienen en su interior su valor; en ejemplo números, pero podría ser cualquier otro elemento, v. gr., letras, símbolos, dibujos. Las casillas pueden ser de tres colores diferentes:

a. Negras: Casillas en estado normal b. Rojas: Casilla que cambio su valor en el último movimiento c. Azul: Casilla que asigna su valor a otra casilla, en este caso

aparece momentáneamente una flecha que lleva desde la casilla origen hasta la de destino. Esto se hace para facilitar al estudiante percibir las asignaciones de valor entre elementos de la misma estructura. Esta funcionalidad junto con uso adecuado de las variables temporales pueden dar una perfecta comprensión de algunos complejos algoritmos, por ejemplo, los de ordenamiento.

Listas Sencillamente encadenadas:

49

Single Linked ListsSingle Linked Lists

Play/Pause Stop Reset Speed

te ite

rro

pe

En la interfaz de animación de las listas sencillamente encadenadas la ventana de animación central se divide en dos por una línea horizontal verde; en la parte superior se encuentran los nodos regulares de la lista, es decir con los que no participan en los cambios en un momento dado; y en la parte inferior de la lista se encuentra el nodo (o nodos en algunos casos) que están participando en los cambios de posicionamiento, es decir que si algún nodo cambia su valor no estará en este lugar (en este caso se usará la misma convención de colores que en el caso de los vectores), únicamente entrará en este sector si sus apuntadores cambiaron o bien es un nodo nuevo. De ésta manera se logra visualizar de manera sencilla y certera el movimiento de los nodos y sus apuntadores, proceso crítico en el manejo de las listas encadenadas.

Listad Doblemente Encadenadas.

50

Double Linked ListsDouble Linked Lists

Play/Pause Stop Reset Speed

Double Linked ListsDouble Linked Lists

Play/Pause Stop Reset Speed

% & !! **

$

Pilas:

51

Double Linked ListsDouble Linked Lists

Play/Pause Stop Reset Speed

StacksStacks

Play/Pause Stop Reset Speed

58 46 55 98 90 435 97 93 687

Double Linked ListsDouble Linked Lists

Play/Pause Stop Reset Speed

StacksStacks

Play/Pause Stop Reset Speed

58 46 55 98 90 435 97 93

52

Se debe notar que en las animaciones de pilas y colas no existe el scroll vertical, ya que la estructura tendra una expansión únicamente horizontal (en primera medida). Colas:

Vision general del módulo de animación de algoritmos:

53

54