Aplicación web para la creación y modificación de ficheros de juegos para la Aplicación de Juegos Didácticos en el Aula (AJDA)

Equation Chapter 1 Section 1 Proyecto Fin de Grado Grado en Ingeniería de las Tecnologías de Telecomunicación Aplicación web para la creación y modificación de ficheros de juegos para la Aplicación de Juegos Didácticos en el Aula (AJDA) Departamento de Ingeniería Telemática Escuela Técnica Superior de Ingeniería Universidad de Sevilla Autor: Carlos Ramos León Tutor: Francisco Javier Muñoz Calle Sevilla, 2018 2 3 Trabajo Fin de Grado Grado en Ingeniería de las Tecnologías de Telecomunicación Aplicación web para la creación y modificación de ficheros de juegos para la Aplicación de Juegos Didácticos en el Aula (AJDA) Autor: Carlos Ramos León Tutor: Francisco Javier Muñoz Calle Profesor titular Departamento de Ingeniería Telemática Escuela Técnica Superior de Ingeniería Universidad de Sevilla Sevilla, 2018 4 5 Trabajo Fin de Grado: Aplicación web para la creación y modificación de ficheros de juegos para la Aplicación de Juegos Didácticos en el Aula (AJDA) Autor: Carlos Ramos León Tutor: Francisco Javier Muñoz Calle El tribunal nombrado para juzgar el Proyecto arriba indicado, compuesto por los siguientes miembros: Presidente: Vocales: Secretario: Acuerdan otorgarle la calificación de: Sevilla, 2018 6 El Secretario del Tribunal 7 A mi familia A mis maestros A mis amigos 8 9 Agradecimientos Durante esta etapa de mi vida, muchas son las personas que han pasado por ella, tantos en los buenos como en los malos momentos y por eso me gustaría agradecerles todo el apoyo recibido para alcanzar mis metas, porque sin ellos, esto no hubiera sido posible. En primer lugar, agradecer a mis padres Francisco y María Montserrat por todo el sacrificio y trabajo realizado para que tanto mi hermano como yo tuviésemos la oportunidad de formarnos y poder cumplir nuestros objetivos en la vida, sin ellos, nada de esto hubiese sido posible. En segundo lugar, agradecer al resto de mi familia todo el apoyo recibido y por todas las experiencias vividas y compartidas, las cuáles me han llevado a ser como soy hoy en día. Agradecer profundamente a mi pareja, Rosa, la cual me ha acompañado en esta etapa desde el principio y que, sin su apoyo, esto hubiese sido muy complicado. Gracias por acompañarme en los buenos y los malos momentos vividos y sobretodo, gracias por estar ahí en los malos momentos, que sin duda son los que más me han ayudado a salir adelante. Me siento muy orgulloso y afortunado de estar a tu lado y que cada día que pasa me haces sentir muy especial. Eres una persona indispensable en mi vida. Agradecer a mis compañeros todo el esfuerzo realizado, esas batallas que a veces se ganaban y a veces se perdían, sin ellos esto hubiese sido aún más duro. Javi, Rafa, Lolo, Ana, Juanmi, Antonio, Salva. Me llevo de ellos en esta etapa a grandes personas, grandes amigos y únicas personas las cuales me siento afortunado por haberlas conocido. Gracias también a mi tutor Francisco Javier, por darme la oportunidad de realizar este proyecto junto a él. Gracias por su implicación, sus conocimientos y su profesionalidad, he aprendido mucho de usted como profesor y como persona. Por último y no por eso menos importante, quiero agradecer desde lo más profundo de mi corazón y dedicar este trabajo de fin de grado y título de Grado en Ingeniería de las Tecnologías de la Telecomunicación a mi madre, María Montserrat, porque ella ha sido principal responsable de que pudiera lograr este objetivo. Sin su fuerza y ánimos no hubiese sido capaz de lograrlo. Te quiero mamá. Carlos Ramos León Sevilla, 2018 16 17 ÍNDICE DE FIGURAS Ilustración 1-1: Menú de selección de tipos AJDA 22 Ilustración 1-2: Generador de ficheros de preguntas AJDA 22 Ilustración 1-3: MVC JSF 24 Ilustración 2-1: Logo JSF 27 Ilustración 2-2: Ventajas PrimeFaces 29 Ilustración 2-3: Logo PrimeFaces 29 Ilustración 2-4: Ejemplo de Managed Bean usando anotaciones 30 Ilustración 2-5: Ejemplo de Managed Bean usando la config XML 30 Ilustración 2-6: Uso de la etiquete @ViewScoped 31 Ilustración 2-7: Logo AJAX 31 Ilustración 2-8: Funcionamiento básico AJAX 32 Ilustración 2-9: Ejecución de componentes JSF 33 Ilustración 2-10: Renderizado 33 Ilustración 2-11: Ejemplo con h:inputText 34 Ilustración 2-12: Ejemplo con h:outputText 34 Ilustración 2-13: Logo XML 35 Ilustración 2-14: Función XML 35 Ilustración 2-15: Logo iText 36 Ilustración 2-16: Esquema iTEXT 36 Ilustración 3-1: Logo NetBeans 39 Ilustración 3-2: Interfaz gráfica de NetBeans. 40 Ilustración 3-3: Logo Apache 41 Ilustración 3-4: Logo Google Chrome 41 Ilustración 3-5: Depurador de Chrome 42 Ilustración 3-6: Logo GitHub 42 Ilustración 3-7: Logo Git 43 Ilustración 3-8: Uso de GitHub en el proyecto. 43 Ilustración 4-1: Estructura de directorios 44 Ilustración 4-2: Página principal generador de ficheros de Juegos 45 Ilustración 4-3: Tipos de preguntas 45 Ilustración 4-4: Menú principal aplicación 47 Ilustración 4-5: Creación de nuevo fichero de preguntas 48 Ilustración 4-6: Importar fichero de preguntas 49 Ilustración 4-7: Error al importar por formato de fichero 49 18 Ilustración 4-8: Error al importar por tipo de juego incompatible 50 Ilustración 4-9: Conversión a formato PDF o TXT 50 19 1 INTRODUCCIÓN ada vez es más común que en cualquier tipo de entidad (empresa, asociación, negocio, autónomo, institución…) necesite una solución informática ajustada a sus necesidades. Y cada vez es más habitual que se nombre una “Aplicación Web” como la respuesta a estas necesidades. Entre los beneficios que las aplicaciones desarrolladas para la web tienen respecto a las aplicaciones de escritorio se encuentran: • El trabajo a distancia se realiza con mayor facilidad. • Para trabajar en la aplicación Web solo se necesita un equipo con un buen navegador Web y conexión a internet. • Las aplicaciones Web no necesitan conocimientos previos de informática. Con una aplicación Web tendrá total disponibilidad en cuanto a hora y lugar, podrá trabajar en ella en cualquier momento y en cualquier lugar del mundo siempre que tenga conexión a internet. • Las aplicaciones Web le permiten centralizar todas las áreas de trabajo. 1.1 Motivación y objetivos Este proyecto pretende desarrollar una aplicación web para la manipulación de los ficheros de juegos que utiliza la aplicación del proyecyo AJDA. Con la finalidad de que el usuario de esta aplicación pueda crear, modificar y/o exportar cómodamente ficheros de juegos sin tener conocimiento de cómo la aplicación de AJDA los utiliza para la creación de los juegos didácticos en el aula. Esta aplicación estará formada principalmente por una página web la cual se implementará con el lenguaje de programación JSF, basándonos en Primefaces, la biblioteca de componentes para Java Server Faces (JSF) que cuenta con un conjunto de componentes enriquecidos que facilitan la creación de las aplicaciones web. Por último, quiero destacar que, entre todas las razones que me han llevado a decidirme por este proyecto de programación web, la cual ha sido durante toda mi etapa en el grado la que más curiosidad me ha despertado, ha sido la posibilidad de poder aprender un lenguaje nuevo, como es JSF y adentrarme en él a través de su biblioteca de componentes de Primefaces. Ya que aquí, ví una oportunidad de mejora de mi carrera profesional y tenía que aprovecharla. Una vez descritos las motivaciones y objetivos que me han llevado a relizar esto, se detallará a continuación el problema a resolver y la solución que se propone. C "Los programas deben ser escritos para que los lean las personas, y sólo incidentalmente, para que lo ejecuten las máquinas". Abelson and Sussman 21 1.2 Descripción del problema El principal escollo que tiene el uso de la aplicación de AJDA en el aula, es la necesidad, de los usuarios de dicha aplicación, de realizar un curso formativo, que principalmente está enfocado para aquellos usuarios inexpertos en el mundo de la informática, con la finalidad de poder utilizar en clase los ficheros de preguntas de juegos que se utilizan en esta aplicación. Otro problema que se propone en este proyecto es que los ficheros de juegos que se corren en la aplicación están definidos en formato txt, y el propio usuario de la aplicación debe aprender cómo ésta interpreta cada línea de dicho fichero para la creación del juego sin que haya ningún error. Esto hace que la aplicación sea un poco deficiente en ese aspecto ya que este problema debería ser transparente para el usuario. El usuario no debería poder manipular esos ficheros txt, si no que se deberían manipular a través de la aplicación. Atacando el problema mencionado anteriormente, nuestra aplicación busca que el usuario a través de la página pueda crear y manipular estos ficheros de juegos de manera más eficiente a como se hace actualmente en la aplicación de AJDA y, además, añadir la funcionalidad de poder mezclar diferentes tipos de juegos compatibles, que en la aplicación actual si se quería hacer, se tendrían que hacer cambiando a mano los ficheros txt. En resumen, la idea de esta página es que, lo mencionado anteriormente, sea transparente para el usuario y no tenga que modificar manualmente ningún fichero txt, con la finalidad de que la aplicación de AJDA sea más intuitiva y con el objetivo final de no tener que realizar ningún curso formativo. 1.3 Antecedentes Como principal antecedente a nuestro trabajo, temenos la aplicación de AJDA: Aplicación de Juegos Didácticos en el Aula Aplicación de juegos didácticos en el aula es un proyecto que pone al servicio de la comunidad educativa una amplia colección de juegos y materiales relacionados con ellos, con el objetivo de que sirvan como recursos didácticos de aplicación en el aula. La parte que nos ocupa de esta aplicación es el generador de ficheros, el cuál es una página web para la creación y modificación de ficheros de juegos que utiliza la aplicación para generar el juego didáctico. Contiene una gran variedad de juegos didácticos para cualquier nivel de enseñanza, se generan a través de dicha web, y se guardan en ficheros de texto. Según la manera en la que introducimos la información, se cuentan con diferentes modalidades o tipos de juegos: preguntas con respuestas conopciones, preguntas con respuestas de campo de texto, preguntas con respuestas de cifras, etc.. En función del tipo de juego escogido, cuando se genere el fichero de preguntas, lo hará, como se ha dicho previamente, en formato txt, el cual no posee una estructura común entre diferentes tipos de juegos existentes, sino que todo lo contrario. Cada fichero de cada tipo de juego tiene una estructura diferente, la cual, se trata de forma distinta en la aplicación. 22 Ilustración 1-1: Menú de selección de tipos AJDA Ilustración 1-2: Generador de ficheros de preguntas AJDA 23 1.4 Descripción de la solución En este apartado explicaremos el funcionamiento, características principals y arquitectura que sigue este Proyecto. 1.4.1 Introducción El objetivo principal de este proyecto es facilitar al usuario de la aplicación AJDA la creación y modificación de ficheros de preguntas para su uso en juegos de la aplicación en clase o para la elaboración de preguntas de exámenes a partir de las preguntas del juego. A través de la aplicación, el usuario podrá crear un nuevo ficero de juego, importar tanto en formato xml o txt ficheros ya creados, reutilizar ficheros de distinto tipo al que se quiere crear que sean compatibles, así como exportar a formato pdf las preguntas de un fichero de juego de la aplicación AJDA. 1.4.2 Objetivos Cuando iniciamos el navegador y accedemos a la aplicación web, nos encontramos una página web con las siguientes alternativas: ➢ En primer lugar, un selector de tipo de juego con el que se va a trabajar. ➢ Una vez elegido el tipo de juego podremos: ✓ Crear desde cero un nuevo fichero de preguntas. ✓ Importar un fichero de preguntas ya generado. ✓ Exportar un fichero de preguntas ya generado en formato xml para su conversion a pdf o nuevamente a txt para usarlo en la aplicación AJDA. ➢ Cuando tenemos las preguntas del fichero de juego importadas a la página web, podremos realizar lo siguiente: ✓ Modificar el contenido de la pregunta. ✓ Añadir/Eliminar respuestas. ✓ Añadir/Eliminar preguntas. ✓ Minimizar o expandir preguntas. 24 Ilustración 1-3: MVC JSF 1.4.3 Arquitectura JSF utiliza el framework MVC (Modelo-Vista-Controlador) para gestionar las aplicaciones web, así que hemos seguido una arquitectura basada en el modelo vista controlador (MVC), que es un estilo de arquitectura de software que separa los datos de una aplicación, la interfaz de usuario, y la lógica de control en tres componentes distintos. La correspondencia entre cada parte M, V, y C y cada uno de los elementos de la aplicación es la siguiente: ➢ Modelo: Se entiende a éste como todo el conjunto de datos y toda la lógica de negocio que procesa esos datos. En JSF el Modelo se implementa en las clases managed bean, también conocidos como backing beans. ➢ Vista: Constituye también la vista de la aplicación. Aquí se sitúan los elementos para la entrada y salida de datos de usuario implementados con la tecnología Facelets de JSF y con el lenguaje EL de expresiones. ➢ Controlador: Lo proporciona JSF a través de la clase FacesServlet. Gestiona las acciones del usuario sobre la Vista y muestra la información adecuada en la misma. Esta aplicación web se construye como una pantalla con la que va interactuando el usuario. Esta pantalla contiene textos, botones, imágenes, tablas y elementos de selección que el usuario modifica. Todos estos elementos están agrupados en formularios HTML, que es la forma que tienen las páginas web de mandar los datos introducidos por el usuario. El controlador JSF asocia a la pantalla clases java que recoge y trata la información del usuario, así como responder a las acciones del usuario. JSF nos resuelve de forma automática tareas como: ➢ Mostrar datos al usuario en cajas de texto y tablas. ➢ Recoger los datos introducidos por el usuario en los campos del formulario. ➢ Realizar validaciones de los datos introducidos por el usuario. ➢ Rellenar campos, listas, combos y otros elementos a medida que el usuario va interactuando con la pantalla. ➢ Controlar los eventos que ocurren en los controles (pulsaciones de teclas, botones y movimientos el ratón). 25 Esta aplicación se apoya en un HashMap para el almacenamiento de los datos acerca de los ficheros de juegos, tipos, características, etc. Con la intención de emular una base de datos, que aún no está desarrollada, para que en el futuro, cuando se acoplen todos los proyectos involucrados en la mejora de la aplicación AJDA, esta información se extraiga de dicha base de datos. 1.5 Composición de la memoria En este apartado se resume los puntos tratados en esta memoria, con la intención de tener una vision global de la organización del documento: 1. Introducción: En este punto abordaremos temas como la motivación y objetivos, así como la descripción del problema y de la solución. 2. Tecnologías utilizadas: En esta sección hablaremos de las tecnologías utilizadas para la realización de este Proyecto y también se explicará por qué se usan. 3. Herramientas utilizadas: Este punto se centra en la descripción de las herramientas utilizadas para implementar este Proyecto y el motive de su utilización. 4. Estructura y desarrollo de la aplicación web: Aquí entraremos más en detalle de la descripción de la solución de la cual hablamos en la introdución. Explicaremos la estructura de directorios que temenos, detallando la funcionalidad de cada fichero y explicando cómo sería la interfaz que tendría el usuario y cómo usarla. 5. Plan de pruebas: Consta de las pruebas que se le ha hecho a la aplicación con la finalidad de comprobar qu se cumplen los objetivos del Proyecto. 6. Conclusiones: Se incluye una conclusión final tras la realización del proyecto y una valoración del mismo a nivel general y personal. 7. Líneas de mejora: Se mencionarán algunas tecnologías para mejorar este servicio y un razonamiento de las mismas. 8. Referencias y Bibliografía 32 Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. No es una tecnología en sí mismo si no que es una combinación de cuatro tecnologías ya existentes: ✓ XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño que acompaña a la información. ✓ Document Object Model (DOM) accedido con un lenguaje de scripting por parte del usuario, especialmente implementaciones ECMAScript como JavaScript y JScript, para mostrar e interactuar dinámicamente con la información presentada. ✓ El objeto XMLHttpRequest para intercambiar datos de forma asíncrona con el servidor web. En algunos frameworks y en algunas situaciones concretas, se usa un objeto iframe en lugar del XMLHttpRequest para realizar dichos intercambios. PHP es un lenguaje de programación de uso general de script del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico también utilizado en el método Ajax. ✓ XML es el formato usado generalmente para la transferencia de datos solicitados al servidor, aunque cualquier formato puede funcionar, incluyendo HTML preformateado, texto plano, JSON y hasta EBML. Ilustración 2-8: Funcionamiento básico AJAX 33 Ilustración 2-10: Renderizado 2.4.2 JSF Ajax (Ejecución y Render) Para entender como funciona AJAX en JSF hay que entender que aunque el ciclo de vida de JSF es muy complejo se puede dividir en dos grupos fundamentales. A estos grupos se les denomina Ejecución y Renderizado. La parte de ejecución hace referencia, como su nombre indica, a todo el ciclo de vida que está ligado a la propia ejecución de los componentes, dejando de lado la ultima fase, la fase de renderizado. En cambio, la segunda fase es opuesta a la primera solo se encarga del renderizado. JSF y AJAX nos permiten aplicar estas fases a controles diferentes y obtener un resultado. Por ejemplo, podemos hacer que el control de h:inputText pase por todas las fases de ejecución. Ilustración 2-9: Ejecución de componentes JSF 34 Ilustración 2-11: Ejemplo con h:inputText Ilustración 2-12: Ejemplo con h:outputText Pero que no le haga falta pasar por la fase de render ya que esta renderizado correctamente. Ahora podemos hacer que el control h:outputText funcione de la forma contraria y no pase por ninguna fase salvo la ultima. 35 Ilustración 2-13: Logo XML 2.5 XML (Extensible Markup Language) 2.5.1 Definición Es un meta-lenguaje que permite definir lenguajes de marcas desarrollado por el World Wide Web Consortium (W3C) utilizado para almacenar datos en forma legible. Proviene del lenguaje SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML) para estructurar documentos grandes. A diferencia de otros lenguajes, XML da soporte a bases de datos, siendo útil cuando varias aplicaciones deben comunicarse entre sí o integrar información. 2.5.2 Uso enel Proyecto El uso de este lenguaje a lo largo de este Proyecto es muy importante, ya que a partir de este se va a poder sacar los diferentes formatos de los ficheros de juegos de la aplicación. Actualmente, la aplicación crea archivos de juego en formato XML o los convierte desde txt a XML (Si se important en este formato). Una vez temenos el fichero en formato XML, se podrá subir a la aplicación con el fin de convertirlo a otros formatos como PDF o de nuevo a txt. 2.6 IText 2.6.1 Definición iText es una biblioteca Open Source para crear y manipular archivos PDF, RTF, y HTML en Java. El mismo documento puede ser exportado en múltiples formatos, o múltiples instancias del mismo formato. Los datos pueden ser escritos a un fichero o, por ejemplo, desde un servlet a un navegador web. Ilustración 2-14: Función XML 36 Ilustración 2-16: Esquema iTEXT El soporte de PDF de iText es bastante extensivo. Este soporta firmas basadas en PKI de PDF, cifrado de 40bit y 128-bit, corrección de colores, PDF/X, gestión de colores por perfiles ICC, y es anfitriona de otras características. La ventaja que ofrece iText sobre otras librerías de generación de documentos PDF que existen para la plataforma java, es que la clase que genera los PDF ya esta compilada, no hay que hacer una transformación xslt cada vez que se genera el documento, con lo que la generación es mucho más rápida y se consumen muchos menos recursos del sistema. 2.6.2 Uso en el Proyecto En este Proyecto se hará uso de esta tecnología para exportar los ficheros de juegos generados por la aplicación en formato XML. La aplicación recogerá todas las preguntas que tiene dicho fichero, con sus respectivas respuestas y soluciones, y lo exporta a un formato de almacenamiento para documentos digitales independiente de plataformas de software o hardware (PDF). Con la finalidad de que el usuario de la aplicación disponga de las preeguntas y respuestas del juego en un formato más legible para las presonas y de esta forma poder utilizar dicho contenido para la elaboración de un examen en papel por ejemplo. Ilustración 2-15: Logo iText 37 3 HERRAMIENTAS UTILIZADAS lo largo de esta sección describiremos las herramientas utilizadas para la elaboración del proyecto. Es importante saber que las herramientas para el desarrollo de software desempeñan un importante papel en el desarrollo de aplicaciones, con lo cual es muy importante elegir bien las herramientas que se van a utilizar para conseguir los hitos que se proponen. Pero más importante es aún tener un conocimiento previo sobre ellas y su funcionalidad, si no, de nada sierve el uso de las mismas. 3.1 NetBeans NetBeans es un Entorno de Desarrollo Integrado (IDE) para la creación de aplicaciones en Java para escritorio, móvil o web. También permite desarrollarlas en HTML5 (HTML, JavaScript y CSS) y dispone de herramientas para programadores en PHP, C y C++. NetBeans es un IDE desarrollado en Java y de código abierto. La plataforma NetBeans permite que las aplicaciones sean desarrolladas a partir de un conjunto de componentes de software llamados módulos. Un módulo es un archivo Java que contiene clases de java escritas para interactuar con las APIs de NetBeans y un archivo especial (manifest file) que lo identifica como módulo. Las aplicaciones construidas a partir de módulos pueden ser extendidas agregándole nuevos módulos. Debido a que los módulos pueden ser desarrollados independientemente, las aplicaciones basadas en la plataforma NetBeans pueden ser extendidas fácilmente por otros desarrolladores de software. La plataforma ofrece servicios reusables comunes para las aplicaciones de escritorio, permitiendo a los desarrolladores centrarse en la lógica de sus aplicaciones. Algunas de las características de la aplicación son: ▪ Gestión de la interfaz de usuario (menús y barras de herramientas) ▪ Gestión de configuración de usuario A “Una de las mayores y más simples herramientas para aprender más es hacer cada día más.” - Washington IrvingEsto es una cita al principio de un capítulo. - El autor de la cita - Ilustración 3-1: Logo NetBeans 40 ▪ Gestión de almacenamiento (guardar o cargar algún tipo de dato) ▪ Gestión de ventana ▪ Marco Asistente (soporta diálogos paso a paso) ▪ Librería visual de Netbeans ▪ Herramientas de desarrollo integrado En este proyecto se ha elegido este entorno de desarrollo para la realización completa del proyecto, ya que NetBeans ofrece un fuerte apoyo al desarrollo de aplicaciones basadas en MVC en Java. Servlet desarrollo / JSP, y es bastante simple en comparación con Eclipse, por ejemplo, especialmente en el campo de la implementación y depuración. 3.2 Apache Tomcat Apache Tomcat funciona como un contenedor de servlets desarrollado bajo el proyecto Jakarta en la Apache Software Foundation. Tomcat implementa las especificaciones de los servlets y de JavaServer Pages (JSP) de Oracle Corporation. Tomcat es un servidor web con soporte de servlets y JSPs, puede funcionar como servidor web por sí mismo. No es un servidor de aplicaciones, como JBoss o JOnAS. Incluye el compilador Jasper, que compila JSPs convirtiéndolas en servlets. El motor de servlets de Tomcat a menudo se presenta en combinación con el servidor web Apache. Tomcat posee más tiempo en el campo y es un contenedor web con soporte de servlets y JSP, es más ligero, tiene menos complejidad y uso de recursos asi como de modularidad. Es por estos motivos, por los que he elegido utilizar este servidor en lugar de otros como GlassFish. Ilustración 3-2: Interfaz gráfica de NetBeans. 41 3.3 Google Chrome Google Chrome es un navegador web de código abierto desarrollado por Google. Este navegador está constituido por componentes de otros navegadores de código abierto como WebKit y Mozilla. El objetivo de Google Chrome es lograr un navegador con una interfaz sencilla, y una muy buena estabilidad, velocidad y seguridad. Se ha utilizado esta herramienta para la interacción del usuario con la aplicación web junto con lss funciones que se ofrece. Otro de los motivos por los cuales se ha elegido este navegador es para el uso de la herramienta de depuración de código del cliente, ya que JSF y todos los frameworks de componentes que complementan JSF integran en mayor o menor medida javascript mediante acciones o eventos. JSF y Javascript se complementan perfectamente y nos permiten entre otras cosas, aumentar la capacidad AJAX para nuestra aplicación y realizar llamadas asincronas a servicios mediante REST, acción que mejorar notablemente el rendimiento de nuestra aplicación. Ilustración 3-4: Logo Google Chrome Ilustración 3-3: Logo Apache 48 4.3 Acciones que el usuario puede realizar 4.3.1 Creación de un nuevo fichero de juego Una de las acciones que puede realizar el usuariode la aplicación es la de generar un nuevo fichero de preguntas de juego desde cero. Para ello es necesario seleccionar tipo de formato de respuestas y posteriormente el tipo de juego. Una vez seleccionado esto, se pueden ir añadiendo tantas preguntas como se quiera. Cuando les tenemos todas, sólo nos falta pulsar el botón de generar fichero y se generará un nuevo fichero de preguntas de juego en formato XML. Ilustración 4-5: Creación de nuevo fichero de preguntas 4.3.2 Importar preguntas desde un fichero existente (XML o TXT) Con esta acción podremos importar a la aplicación tanto ficheros de formato XML como de formato TXT con la finalidad de modificar su contenido, mezclar diferentes tipos de juegos compatibles, cambiar el número de preguntas, respuestas, etc. Para ello, se realiza un click en el botón de seleccionar archivo de el menú de Cargar, seleccionamos el archivo que queremos subir a la aplicación desde nuestro equipo y clickamos en el botón de importar. La propia aplicación se encargará de comprobar que el fichero que se quiere importar es del tipo permitido (TXT o XML), además de comprobar si el tipo de fichero de preguntas a importar es compatible con el que se ha seleccionado en la aplicación. 49 Ilustración 4-6: Importar fichero de preguntas Ilustración 4-7: Error al importar por formato de fichero 50 Ilustración 4-8: Error al importar por tipo de juego incompatible 4.3.3 Exportar ficheros a formato PDF o TXT Una acción muy útil que puede realizar el usuario de la aplicación es la posibilidad de convertir ficheros de juegos procedentes de la aplicación AJDA (en formato TXT) o ficheros generados por esta aplicación (en formato XML) a formatos como PDF o de nuevo a TXT, con la finalidad de importarlos de nuevo a la aplicación AJDA una vez modificados. Ilustración 4-9: Conversión a formato PDF o TXT 51 5 PLAN DE PRUEBAS “Lo mismo que el hierro se oxida por falta de uso y el agua estancada se vuelve putrefacta, también la inactividad destruye el intelecto.” -Leonardo da Vinci. n esta sección hablaremos de las pruebas a las que se someterá esta aplicación, con la correspondiente aclaración de cada prueba en concreto. 5.1 Introducción El plan de prueba describe el ámbito del esfuerzo de prueba general y proporciona un registro del proceso de planificación de prueba. Las pruebas son básicamente un conjunto de actividades dentro del desarrollo de software. Dependiendo del tipo de pruebas, estas actividades podrán ser implementadas en cualquier momento de dicho proceso de desarrollo. Un plan de pruebas identifica los requisitos, riesgos, casos de prueba y entornos de prueba que hay que probar, los objetivos de negocio y calidad, las planificaciones de prueba y otros elementos. • Pruebas unitarias: Estas pruebas se basan en ejecutar cada módulo, lo que provee un mejor modo de manejar la integración de las unidades en componentes mayores. Son independientes unas de otras y deben cubrir la totalidad del código. • Pruebas de integración: Una vez superado las pruebas unitarias, estas pruebas se realizan en el ámbito del desarrollo software, las cuales prueban que todos los elementos unitarios funcionan juntos correctamente. • Pruebas de validación: Se centran en las acciones y reacciones visibles para el usuario. 5.2 Pruebas 5.2.1 Pruebas unitarias Nombre PU-01 Objetivo Creación de panels de preguntas Prerrequisitos de la prueba Creación de un nuevo panel de pregunta, el cual posee las opciones de borrar pregunta y añadir/borrar respuestas, del tipo previamente seleccionado que se E 53 añadirá debajo de la última pregunta creada o importada en la aplicación Procedimiento Una vez se ha seleccionado el tipo de fichero a generar, se pueden crear manualmente preguntas nuevas que añadir al fichero que queremos obtener, para ello pulsamos el botón de añadir pregunta. Superación de la prueba Cuando se elege tipo de fichero de preguntas, aparecerá visible el botón de añadir preguntas con el que la aplicación añade un nuevo de panel de preguntas vacío a la aplicación, el cual hay que cumplimentar, para su posterior generación en formato XML. Comentarios El botón de añadir pregunta solo aparecerá visible cuando se haya seleccionado un tipo de fichero de preguntas en los selectors de la aplicación. Tabla 1: PU-01 Nombre PU-02 Objetivo Generación de fichero XML Prerrequisitos de la prueba Generar un fichero de preguntas de un juego en formato XML Procedimiento Una vez se tengan todos los panels de preguntas completes, se generará un fichero con esa información en formato XML Superación de la prueba La aplicación ha detectado que todos los campos estan cumplimentados y se corresponden al tipo de juego seleccionado y descarga un fichero en formato XML con dicha información. Comentarios Es necesario haber rellenado todos los campos obligatorios y haber tenido en cuenta las restricciones de cada tipo de juego. Tabla 2: PU-02 Nombre PU-03 Objetivo Importación de fichero XML 54 Prerrequisitos de la prueba Importar un fichero de preguntas de un juego en formato XML Procedimiento Una vez se tenga el tipo de juego seleccionado, se podrá importar las preguntas de un fichero de preguntas completo en formato XML. Superación de la prueba La aplicación ha comprobado que se ha seleccionado el tipo de juego y que el fichero de preguntas a importar es compatible con el tipo anteriormente seleccionado, con lo cual, importa todas las preguntas a la aplicación. Comentarios Es necesario haber seleccionado el tipo de juego e importar un juego compatible con el seleccionado, de lo contrario se informará al usuario de q dicho fichero no es compatible y no se importará. Tabla 3: PU-03 Nombre PU-04 Objetivo Importación de fichero TXT Prerrequisitos de la prueba Importar un fichero de preguntas de un juego en formato TXT Procedimiento Una vez se tenga el tipo de juego seleccionado, se podrá importar las preguntas de un fichero de preguntas completo en formato TXT. Superación de la prueba La aplicación ha comprobado que se ha seleccionado el tipo de juego y que el fichero de preguntas a importar es compatible con el tipo anteriormente seleccionado, con lo cual, importa todas las preguntas a la aplicación. Comentarios Es necesario haber seleccionado el tipo de juego e importar un juego compatible con el seleccionado, de lo contrario se informará al usuario de q dicho fichero no es compatible y no se importará. Tabla 4: PU-04 Nombre PU-05 Objetivo Conversión de fichero a PDF Prerrequisitos de la prueba Importar un fichero de preguntas de un juego en formato XML en la sección exporter para su 55 conversion a formato PDF. Procedimiento En la sección exportar de la aplicación seleccionamos el fichero XML generado por la aplicación con las preguntas del juego para subirlo al navegador. Una vez lo temenos subido, pulsando sobre el botón PDF, se descargará automáticamente un fichero en formato PDF con la información del fichero en formato XML. Superación de la prueba La aplicación comprueba que el formato del XML es el adecuado para su conversion y genera el fichero en formato PDF para su descarga automática en el navegador. Comentarios Sólo se podrá subir al navegador ficheros con formato XML que hayan sido generados por la aplicación. Tabla 5: PU-05 Nombre PU-06 Objetivo Conversión de fichero a TXT Prerrequisitos de la prueba Importar un fichero de preguntas de un juego en formato XML en la sección exportar para su conversion a formato TXT soportado por la aplicación AJDA. Procedimiento En la sección exporter de la aplicación seleccionamos el fichero XML generado por la aplicación con las preguntas del juego para subirlo al navegador. Una vez lo temenos subido, pulsando sobre el botón TXT, se descargará automáticamente un fichero en formato TXT con la información del fichero en formato XML. Superación de la prueba La aplicación comprueba que el formato del XML es el adecuado para su conversion y genera el fichero en formato TXT para su descarga automática en el navegador. Comentarios Sólo se podrá subir al navegador ficheros con formato XML que hayan sido generados por la aplicación. Tabla 6: PU-06 56 5.2.2 Pruebas de integración Nombre PI-01 Objetivo Importación de tipo de fichero de preguntas distinto al seleccionado pero compatible y generación en XML. Prerrequisitos de la prueba Importar un fichero de preguntas de un juego compatible con el que temenos actualmente seleccionado en el selector de tipos. Procedimiento Se importa un fichero compatible, se añaden más preguntas y/o se modifican las importadas. Se pulsa el botón generar fichero el cual hace las validaciones pertinentes para comprobar que todas las preguntas cumplen las propiedades del tipo de fichero seleccionado en el selector para su posterior generación en XML. Superación de la prueba La aplicación es capaz de comprobar que el fichero importado es de tipo compatible y al pulsar sobre el botón generar fichero, comprueba que todas las preguntas cumplen las propiedades del tipo elegido y las que no, manda un aviso al usuario para que éste la adapte conforme las propiedades del tipo seleccionado. Comentarios Cuando una pregunta no cumple las propiedades del tipo elegido, se mostrará un mensaje de error en la parte superior derecha de la pantallaindicando el numero de preguntas con errores y se marcarán en la aplicación las preguntas que sean erróneas. Tabla 7: PI-01 Nombre PI-02 Objetivo Conversión a formato PDF o TXT de un fichero en formato XML previamente generado por el usuario en la aplicación Prerrequisitos de la prueba Generar unn fichero en formato XML desde esta aplicación web, por ejemplo uno como en el caso de la prueba de integración anterior. Procedimiento En la sección exportar de la aplicación seleccionamos el fichero XML generado por la aplicación con las 57 preguntas del juego para subirlo al navegador. Una vez lo temenos subido, pulsando sobre el botón PDF o TXT, Se validará que el contenido está en el formato correcto creado por esta aplicación y se descargará automáticamente un fichero en formato PDF o TXT con la información del fichero en formato XML. Superación de la prueba La aplicación comprueba que el formato del XML es el adecuado para su conversion y genera el fichero en formato PDF o TXT para su descarga automática en el navegador. Comentarios Cuando se importa un XML a esta sección y pasa el filtro de extension de fichero importado, si la aplicación no detecta que el contenido de dicho fichero está en el formato generado por esta aplicación no se procederá a su conversion. Tabla 8: PI-02 5.2.3 Pruebas de validación Nombre PV-01 Objetivo Se generan ficheros de preguntas de juegos con los que el usuario puede utilizarlos para elaborar pruebas manuscritas o para importarlos a la aplicación AJDA. Prerrequisitos de la prueba • Generar unn fichero en formato XML desde esta aplicación web. • Exportar dicho fichero a formato TXT (para su uso en AJDA) o PDF para su uso en pruebas manuscritas. Procedimiento El usuario puede crear/modificar ficheros de preguntas de juegos para su posterior exportación al formato que más le convenga. Superación de la prueba Se deberá generar un fichero de preguntas de juegos, si todo está bien, en el formato elegido XML, PDF o TXT. Comentarios Tabla 9: PV-01 64