Juego de avatares para una herramienta de gamificación
Abstract
The development of this project is based on the contribution of a module to a gamification application for education called Classpip, which is composed of several modules. All the projects that compose Classpip have been implemented following a common software architecture, developed with different open source tools. The main objective of this project is to achieve the development of a game for avatars creation. The teacher manages the avatars game of the different classes from the mobile device, to be able to launch the game during the class. With the material selected by the teacher, the student will dispose from enough material to create the avatar with different elements, fulfilling his will. The concept base of Classpip is the gamification, a tool that uses scores, levels, rewards and other dynamics that games use for any non-recreational environment. The main areas in which it is used are at academic and at work, although the objectives differ from one environment to the other, the techniques are very similar. A survey applied to these two contexts reflects the impact of gamification and all the aspects that it enhances. To give an idea about how Classpip was born, it is explained all the architecture from which all the modules begin. A contribution of different technologies external to the application are needed in order to be able to build a complete project, since it does not extend only to a web platform, but has also been versioned for tablets and smartphones. Once Classpip has been introduced, it is necessary to introduce new notions such as avatar. Conceiving an avatar is not a simple thing, moreover if you do not have a theoretical basis of what it is, it’s even more difficult. That is the reason why it is explained where this idea comes from, which is its purpose and what applications are currently used for avatars. From the applications that are in use it today, the most attractive ones are collected to be able to develop something similar that can capture the public of Classpip. When the objectives to meet have been set is much easier to begin building the module. First we talk about the functions that we want to get implemented by establishing a design (attached to modifications) for each of them. About these functions and the design established, the real implementation is performed, giving details on all the concepts and by last the final result is presented, specifying both the design and the functions with their respective mechanics. Essentially, this document tries to analyze and explain all the features played in the avatars game. Furthermore, the complete module is evaluated in terms of design, functions and how intuitive it is to guide any user regardless of his experience with technology.
Full text
TREBALL DE FI DE GRAU T´ ITULO DEL TFG: Juego de avatares para una herramientas de gamificaci´ on TITULACI ´ ON: Grado en Ingenier´ıa de Sistemas Aeroespaciales, menci´ on Aeronavegaci´ on AUTOR: Eva Clemente Escobar DIRECTORES: Miguel Valero Garc´ıa Roc Meseguer Pallar` es FECHA: 5 de septiembre de 2019
T´ıtulo: Juego de avatares para una herramientas de gamificaci´ on Autor: Eva Clemente Escobar Directores: Miguel Valero Garc´ ıa Roc Meseguer Pallar` es Fecha: 5 de septiembre de 2019 Resumen El desarrollo de este proyecto se basa en la aportaci´ on de un m´ odulo a una aplicaci´ on de gamificaci´ on para la educaci´ on llamada Classpip, que est´ a compuesta de varios m´ odulos. Todos los proyectos que forman Classpip se han implementado siguiendo una arquitectura de software com´ un, desarrollada con diferentes herramientas de c´ odigo abierto. El objetivo de este proyecto es el desarrollo de un juego destinado a la creaci´ on de avatares. El docente gestiona el juego de avatares de las diferentes clases desde el dispositivo m´ ovil, para poder poner en marcha el juego durante la clase. Con el material seleccionado por el profesor, el alumno tendr´ a a su dispoci´ on material suficiente para crear el avatar con diferentes elementos y que sea de su agrado. El concepto base de Classpip es la gamificai´ on, una herramienta que utiliza puntuaciones, niveles, recompensas y otras din´ amicas que usan los videojuegos para cualquier ´ ambito no l´ udico. Los principales ´ ambitos en los que se utiliza son el acad´ emico y el laboral, que aunque difieren los objetivos de un entorno a otro, las t´ ecnicas son muy similares. Un estudio aplicado a estos dos contextos refleja el impacto de la gamificaci´ on y los aspectos que ´ esta potencia. Para dar una idea c´ omo naci´ o Classpip se explica toda la arquitectura de la que parten todos los m´ odulos. Se necesita un aporte de diferentes tecnolog´ ıas externas a la aplicaci´ on con el fin de poder hacer un proyecto completo, ya que no se extiende s´ olo a una plataforma web, sino que tambi´ en ha sido versionada para tablets y smartphones. Una vez se ha introducido Classpip, ser´ a necesari´ o seguir presentado nociones nuevas como la de avatar. Concebir un avatar no es algo sencillo y menos cuando no se tiene una base te´ orica de qu´ e es. Por eso se especifica de d´ onde proviene esta idea, qu´ e finalidad tiene y qu´ e aplicaciones la utilizan m´ as actualmente. De las aplicaciones que la utilizan hoy en d´ ıa se recogen las m´ as atractivas para poder llegar a desarrollar algo similar que pueda captar al p´ ublico de Classpip. Teniendo los objetivos a cumplir es mucho m´ as sencillo comenzar a construir el m´ odulo. Primero se habla de las funciones que quieren implementarse estableciendo un dise˜ no, sujeto a modificaciones, para cada una de ellas. Sobre estas funciones y el dise˜ no se desempe˜ na la implementaci´ on real, dando detalle sobre todos los conceptos y finalmente se presenta el resultado final, especificando tanto dise˜ no como funciones con su respectiva mec´ anica. Esencialmente, este documento trata de analizar y explicar todas las funcionalidades que desempe˜ na el juego de avatares. Adem´ as se eval´ ua el m´ odulo completo en cuestiones de dise˜ no, funciones y lo intuitivo que es para orientarlo a cualquier usuario independientemente de su experiencia con la tecnolog´ ıa.
Title : Avatar game for a gamification tool Author: Eva Clemente Escobar Advisors: Miguel Valero Garc´ ıa Roc Meseguer Pallar` es Date: September 5, 2019 Overview The development of this project is based on the contribution of a module to a gamification application for education called Classpip, which is composed of several modules. All the projects that compose Classpip have been implemented following a common software architecture, developed with different open source tools. The main objective of this project is to achieve the development of a game for avatars creation. The teacher manages the avatars game of the different classes from the mobile device, to be able to launch the game during the class. With the material selected by the teacher, the student will dispose from enough material to create the avatar with different elements, fulfilling his will. The concept base of Classpip is the gamification, a tool that uses scores, levels, rewards and other dynamics that games use for any non-recreational environment. The main areas in which it is used are at academic and at work, although the objectives differ from one environment to the other, the techniques are very similar. A survey applied to these two contexts reflects the impact of gamification and all the aspects that it enhances. To give an idea about how Classpip was born, it is explained all the architecture from which all the modules begin. A contribution of different technologies external to the application are needed in order to be able to build a complete project, since it does not extend only to a web platform, but has also been versioned for tablets and smartphones. Once Classpip has been introduced, it is necessary to introduce new notions such as avatar. Conceiving an avatar is not a simple thing, moreover if you do not have a theoretical basis of what it is, it’s even more difficult. That is the reason why it is explained where this idea comes from, which is its purpose and what applications are currently used for avatars. From the applications that are in use it today, the most attractive ones are collected to be able to develop something similar that can capture the public of Classpip. When the objectives to meet have been set is much easier to begin building the module. First we talk about the functions that we want to get implemented by establishing a design (attached to modifications) for each of them. About these functions and the design established, the real implementation is performed, giving details on all the concepts and by last the final result is presented, specifying both the design and the functions with their respective mechanics. Essentially, this document tries to analyze and explain all the features played in the avatars game. Furthermore, the complete module is evaluated in terms of design, functions and how intuitive it is to guide any user regardless of his experience with technology.
A mi familia, por haber hecho posible que pueda llegar a ser lo que siempre quise ser A mis compa˜ neros de piso, por haberse convertido en familia y por hacer de un lugar extra˜ no un hogar A Anna Ru´ ız, una gran amiga y uno de mis puntos de apoyo m´ as fuertes durante toda la carrera A Miguel y Roc por haber invertido tiempo en aconsejarme y guiarme durante todo este trabajo
´ INDICE GENERAL INTRODUCCI ´ ON ................................. 1 CAP´ ITULO 1.LA GAMIFICACI ´ ON . . . . . . . . . . . . . . . . . . . . . . 3 1.1. Qu´ e es gamificaci´ on .............................. 3 1.2. Gamificaci´ on en el sector laboral ....................... 4 1.2.1. Productividad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 1.3. Gamificaci´ on en las aulas ........................... 5 1.3.1. Diversi´ on . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.3.2. Motivaci´ on . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.3.3. Mejora del aprendizaje . . . . . . . . . . . . . . . . . . . . . . . . 7 1.4. Aplicaciones m´ oviles para la gamificaci´ on . . . . . . . . . . . . . . . . . . 7 CAP´ ITULO 2.INTRODUCCI ´ ON AL PROYECTO . . . . . . . . . . . . . 9 2.1. Arquitectura del Proyecto ........................... 9 2.1.1. Herramientas externas . . . . . . . . . . . . . . . . . . . . . . . . 11 2.2. Estructura de Classpip ............................. 12 2.2.1. Aplicaci´ on m´ ovil . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 2.2.2. Panel de administrador . . . . . . . . . . . . . . . . . . . . . . . . 14 2.2.3. Arquitectura orientada a servicios . . . . . . . . . . . . . . . . . . . 15 2.3. Motivaci ´ on .................................... 15 2.4. Objetivos del m´ odulo .............................. 16 CAP´ ITULO 3.ESTADO DEL ARTE . . . . . . . . . . . . . . . . . . . . . . 17 3.1. Qu´ e son avatares ................................ 17 3.2. Herramientas para avatares . . . . . . . . . . . . . . . . . . . . . . . . . . 17 3.2.1. Voki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 3.2.2. Bitmoji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 3.2.3. Classdojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 3.3. Aspectos distinguidos ............................. 21
´ INDICE DE TABLAS
INTRODUCCI ´ ON La tecnolog´ ıa es una herramienta de la que cada d´ ıa se hace m´ as uso. Adem´ as las nuevas teconolog´ ıas de hoy en d´ ıa est´ an en constante actualizaci´ on, por lo que a veces se quedan r´ apidamente obsoletas. La invasi´ on del gigante tecnol´ ogico es tal que desde hace unos a˜ nos ha pasado a estar al servicio del aprendizaje. Desde temprana edad los ni˜ nos ya interact´ uan con tablets y smartphones, por lo que introducir la tecnolog´ ıa en las aulas no ha causado un gran impacto para ellos. Sin embargo la brecha digital entre los estudiantes de las nuevas generaciones y los docentes es muy grande todav´ ıa, por tanto muchos docentes tendr´ an que especializarse y conocer c´ omo aplicar el uso de las nuevas tecnolog´ ıas en la educaci´ on. Una de las herramientas tecnol´ ogicas enfocadas a un ambiente de aprendizaje es la Gamificaci´ on. Utiliza las mismas din´ amicas que los juegos aplicadas al ambiente acad´ emico, aplica puntuaciones y todo tipo de recompensas en competiciones individuales y grupales y la intenci´ on de este ´ util es mantener la motivaci´ on. Qu´ e es la gamificaci´ on, c´ omo funciona, qu´ e aplicaciones existen y qu´ e consecuencias tiene utilizar la gamificaci´ on son cuestiones sobre las que habla en profundidad en el cap´ ıtulo 1, donde adem´ as de estas cuestiones se aportan informaci´ on y datos de estudios reales relacionados con su impacto. El prop´ osito de este proyecto es hacer un aporte a Classpip, una aplicaci´ on de gamificaci´ on desarrollada con enfoque a la educaci´ on. Esta aplicaci´ on es un proyecto colaborativo, desarrollado por diversos estudiantes de la EETAC. Classpip est´ a compuesto por diferentes piezas, que son m´ odulos aut´ onomos creados de manera independiente que siguen una misma l´ ınea de desarrollo. Puesto que este proyecto es una pieza m´ as que se suma a la aplicaci´ on, la plataforma ya est´ a implementada, con una arquitectura de software y unas tecnolog´ ıas de desarrollo establecidas. Las herramientas con las que se ha trabajado para este proyecto forman parte de la tecnolog´ ıa moderna de desarrollo para aplicaciones en internet. Todo lo relacionado con la implementaci´ on de Classpip y la l´ ınea de desarrolo que siguen los diferentes m´ odulos que la componen aparece en el cap´ ıtulo 2. La finalidad es desarrollar un m´ odulo orientado a la creaci´ on de avatares. La aplicaci´ on de Classpip, previamente al desarrollo de este m´ odulo ya dispon´ ıa de avatares, pero ven´ ıan predeterminados con cada tipo de usuario. Con el aporte de un juego de avatares, no s´ olo se aporta creatividad a la aplicaci´ on, sino que tambi´ en se busca la motivaci´ on del alumno, que para poder decorar el avatar tendr´ a que cumplir con los requisitos establecidos por el docente. El docente gestionar´ a el material para el avatar y conceder´ a los permisos de personalizaci´ on a los alumnos. Mientras tanto los alumnos tendr´ an que estar al tanto de cumplir con los requisitos establecidos si quieren sacarle todo el partido al juego. Las secciones de administraci´ on que est´ an disponibles desde el usuario del docente se han dise˜ nado e implementado de manera que el mecanismo para crear el juego de avatares sea sencillo. Las ideas para implementar y dise˜ nar estos apartados pueden verse con detalle en el cap´ ıtulo 4. El documento se ha organizado de tal manera que se pueda seguir el hilo sobre el que se ha desarrollado el proyecto. Para empezar es primordial la introducci´ on a la Gamificaci´ on, que es el concepto en torno al que gira el proyecto. Otro de los conceptos con mayor importancia es Classpip y las herramientas de software que han permitido su desarrollo. 1
2 Juego de avatares para una herramientas de gamificaci´ on Adem´ as se introduce la idea de avatar en el cap´ ıtulo 3, a partir de d´ onde nace este nuevo m´ odulo. Por ´ utilmo se hace incapi´ e en el desarrollo del juego de avatares, incluyendo detalles de software y herramientas externas. Para culminar, con expectativas de poder mejorar en un futuro, se recogen datos a cerca de una evaluaci´ on de la aplicaci´ on. Qu´ e tan intuitiva es, si el dise˜ no es apropiado para el p´ ublico al que va dirigida son algunas de las cuestiones que se exponen en la evaluaci´ on.
CAP´ ITULO 1. LA GAMIFICACI ´ ON El creciente uso de smartphones, tablets y otros muchos dispositivos tecnol´ ogicos entre los ni˜ nos ha provocado que los m´ etodos de ense˜ nanza tradicionales queden algo obsoletos. La brecha digital que se ha abierto entre docentes y estudiantes es evidente, y ha llevado a combinar la educaci´ on con la tecnolog´ ıa. El objetivo es implicar a una nueva generaci´ on de estudiantes digitales para hacer las clases m´ as motivadoras. Los niveles, puntos, rankings, las metas y objetivos o crear equipos para el desarrollo de tareas como si de un videojuego se tratase, son m´ etodos para gamificar un aula. Teniendo en cuenta esta nueva necesidad de convertir el aprendizaje en una especie de juego nace Classpip, una aplicaci´ on del Departamento de Arquitectura de Computadores de la Universidad Polit´ ecnica de Catalu˜ na desarrollada por estudiantes universitarios. La aplicaci´ on es accesible desde cualquier ordenador, dispositivo m´ ovil o tablet. El objetivo de este proyecto es crear un juego de avatares que se incorpora a Classpip para que los usuarios puedan tener una representaci´ on gr´ afica en la aplicaci´ on. De esta manera se puede aportar un toque m´ as personal al juego. 1.1. Qu´ e es gamificaci´ on La gamificaci´ on es una t´ ecnica que integra estrategias de juego en diferentes ´ ambitos no l´ udicos, y tiene como objetivo motivar y amenizar las tareas llevadas a cabo en dichos ´ ambitos. Los sectores que han implementado mayoritariamente esta t´ ecnica son: el laboral y el acad´ emico. La gamificaci´ on en los negocios potencia aspectos psicol´ ogicos dentro de los procesos empresariales, mientras que en la educaci´ on hace del aprendizaje algo divertido y llevadero. Mediante la motivaci´ on, se consigue un desarrollo eficiente de las tareas llevadas a cabo por los sujetos que trabajan con herramientas de gamificaci´ on. Las recompensas, puntuaciones y los rankings permiten dar reconocimiento, incentivando as´ ı el ´ animo de superaci´ on. Para mantener la expectaci´ on de los jugadores, es necesario estar constantemente innovando en el juego. Competiciones, insignias y privilegios son algunos elementos que pueden utilizarse. Las din´ amicas de juego se basan en actividades con una determinada estructura, orientadas a un prop´ osito u otro. Dichas actividades hay que dinamizarlas, ambientarlas para que resulten agradables y divertidas de cara al p´ ublico. Las competiciones se pueden utilizar como m´ etodo de evaluaci´ on cada cierto tiempo. Puesto que muestran un ranking de puntuaci´ on, queda reconocido el m´ erito de los competidores y conlleva a recompensar a los mejores posicionados. Esta recompensa obtenida es el es el incentivo para despertar la motivaci´ on del usuario que, si surte efecto, implica la progresi´ on de las cualidades del individuo. Para tener una idea menos abstracta, pongamos un ejemplo. El docente puede asignar puntos a los estudiantes por diferentes motivos como puntualidad o buen comportamiento. La suma de todos estos puntos durante un periodo de tiempo lleva a clasificar a los alumnos dentro de un ranking. Los tres primeros podr´ an optar a diferentes privilegios como sentarse con el compa˜ nero que quieran en clase o poder repetir una pregunta de 3
4 Juego de avatares para una herramientas de gamificaci´ on ex´ amen. En los siguientes apartados se exponen diferentes entornos en los que puede aplicarse la gamificaci´ on. 1.2. Gamificaci´ on en el sector laboral El mundo empresarial y el sector docente son los principales consumidores de m´ etodos de gamificaci´ on, sin embargo los objetivos finales son diferentes. En los ´ ultimos a˜ nos grandes empresas de todo el mundo han incorporado la gamificaci´ on para poder alcanzar varios objetivos, ya sea para mejorar la eficiencia de los trabajadores, aumentar las ventas de un producto, optimizar los procesos de onboarding o mejorar la formaci´ on del personal, es una herramienta que puede resultar ´ util en multiples ´ areas. Buscando informaci´ on y documentandose sobre la gamificaci´ on, no hay art´ ıculo que de una mala opini´ on sobre esta herramienta, pero para ir un poco m´ as all´ a es preferible saber la opini´ on directa de la persona que realmente trabaja en un entorno gamificado. El estudio ”The 2018 Gamification At Work” de Talent MLS recoge encuestas a diferentes usuarios de gamificaci´ on para que podamos visualizar por qu´ e es tendencia. Como resultado general, un 80% de los entrevistados se divierte aplicando la gamificaci´ on en sus tareas del trabajo. Dentro de este entorno se utilizan las clasificaciones por niveles, puntos, insignias, recompensas y tablas de clasificaci´ on. De todo esto lo valorado como m´ as motivador fueron las clasificaciones por niveles, mientras que lo peor puntuado fueron las recompensas. La clasificaci´ on aparece en el siguiente gr´ afico, donde adem´ as de clasificar de mejor al peor puntuado, a la derecha aparece la valoraci´ on sobre 5 que ha recibido cada elemento. Figura 1.1: Ranking de elementos de gamificaci´ on Lo que las empresas pretenden es que la gamificaci´ on tenga un impacto en sus empleados, tal que su productividad y motivaci´ on aumente, as´ ı que a continuaci´ on veremos qu´ e
CAP´ ITULO 1. LA GAMIFICACI ´ ON 5 es lo que opinan sobre esto los que han respondido a las encuestas para este estudio. 1.2.1. Productividad La definici´ on de productividad es la cantidad de trabajo que un empleado es capaz de realizar en un determinado per´ ıodo de tiempo. La opini´ on subjetiva de los usuarios, tal y como reflejan los gr´ aficos que aparecen a continuaci´ on es que la gamificaci´ on les hace m´ as productivos. Figura 1.2: Impacto potenciador de la productividad No es sorprendente que al hacer de una tarea un juego, sea m´ as amena, y es que el 87% de los sujetos que han participado en el estudio de Talent MLS han afirmado que la gamificaci´ on s´ ı que ha potenciado su productividad. En un estudio similar del 2014, el 79% ya arfirmaban esta cuesti´ on,por tanto a medida que la gamificaci´ on se va abriendo paso en el mundo laboral los empleados se comprometen m´ as con la causa. 1.3. Gamificaci´ on en las aulas En la educaci´ on todo lo que se pretende es mantener motivado al estudiante para que la tarea de estudiar no suponga un esfuerzo. Hacer un examen o hacer los deberes dejan de ser tareas serias y aburridas. Aplicando la gamificaci´ on, como si de un juego se tratase, tiene como consecuencia conseguir una recompensa para intentar estar entre los mejores clasificados del ranking. Todas las din´ amicas de juego que se aplican, ofrecen como finalidad llevar al alumno a implicarse en el juego para completar sus objetivos educativos. Para valorar la experiencia del alumnado, se tiene como referencia un art´ ıculo que estudia el uso de la gamificaci´ on en la ense˜ nanza superior, concretamente en la Asignatura de Derecho Romano de la Universidad Aut´ onoma de Madrid. Para fomentar la atenci´ on en las clases Magistrales y la motivaci´ on para el aprendizaje de la asignatura Se llevaron a cabo dos tipos de actividades, una de ellas con la herramienta Kahoot, durante el final de las clases Magistrales y otra de ellas es la creaci´ on de un Juego a trav´ es de un Moodle para hacer un repaso final de la asigantura de cara al Examen final.
6 Juego de avatares para una herramientas de gamificaci´ on Figura 1.3: Pregunta de evaluaci´ on realizada con Kahoot Ambas pruebas tienen como objetivo mejorar el aprendizaje, para as´ ı tener un m´ etodo de evaluaci´ on complementario a las pruebas calificatorias y de evaluaci´ on. Pero, ¿Cu´ al es el objetivo en torno al que gira esta invertigaci´ on? Pues bien hay varios estudios aplicando la gamificaci´ on en diferentes categor´ ıas de educaci´ on, pero los datos que aportaban eran escasos. As´ ı que el prop´ osito de ´ este estudio es comprobar emp´ ıricamente cu´ ales eran los efectos de estas nuevas t´ ecnicas de aprendizaje. 1.3.1. Diversi ´ on A la pregunta ”¿Ha sido divertido competir con otros?”, un 65% de estudiantes est´ a completamente de acuerdo, otro 31% est´ a m´ as bien de acuerdo, mientras que s´ olo hay un estudiante que ha respondido estar m´ as bien en desacuerdo y otro que se muestra neutral. Figura 1.4: Respuestas a la pregunta ”¿Ha sido divertido competir con otros?”@ Los resultados recogidos muestran que la diversi´ on es uno de los factores principales que llevan al estudiante a involucrar las herramientas de gamificaci´ on. Dar un a˜ nadido de diversi´ on tiene un efecto que disminuye la tensi´ on del ambiente universitario, que suele ser mucho m´ as serio que el ambiente de cualquier estudio de educaci´ on inferior. 1.3.2. Motivaci´ on Contestando la pregunta “El uso de Kahoot me ha motivado a asistir a clase”, un 38,4% delos encuestados est´ a completamente de acuerdo, un 18,2% de los participantes est´ an
CAP´ ITULO 1. LA GAMIFICACI ´ ON 7 m´ as bien de acuerdo, mientras que un 38,2% se mantiene neutral y un 5,5% est´ a en desacuerdo. Respecto a la motivaci´ on, los diferentes datos recogidos reflejan que una mayor´ ıa de los alumnos ha conseguido sentirse m´ as motivada para asistir a clase y mantener una mayor antenci´ on. Dependiendo de la persona el nivel de motivaci´ on era mayor o menor, a algunos les proporcionaba un n´ ıvel de motivaci´ on alto mientras que en otros no surt´ ıa efecto. 1.3.3. Mejora del aprendizaje La afirmaci´ on referida al aprendizaje, “Creo que Kahoot ha mejorado mi aprendizaje de la materia Derecho Romano”, es apoyada por el 32,7% que est´ an completamente de acuerdo y por un 41,8% que dice estar m´ as bien de acuerdo, contrastando con un 3,6% que opina que est´ a m´ as bienen desacuerdo y un 20% que se mantiene neutral respecto a lacuesti´ on. La mayor´ ıa de los estudiantes afirma haber logrado una mejora en las t´ ecnicas de aprendizaje de Derecho Romano gracias a las herramientas de gamificaci´ on. Hay que tener en cuenta que estos resultados se basan en la experiencia personal del usuario, no en los resultados reflejados por las pruebas de evaluaci´ on, motivo por el que se pretende hacer un estudio a posteriori de la evoluci´ on basado en las pruebas de evaluaci´ on para ver el veradero impacto de la evoluci´ on. Concluyendo con los resultados generales, la experiencia de introducir una aplicaci´ on de gamificaci´ on en la materia de Derecho Romano, ha resultado una experiencia divertida, motivadora e incluso ha conseguido mejorar el aprendizaje de los usuarios. 1.4. Aplicaciones m´ oviles para la gamificaci´ on Desde que el uso de la gamificaci´ on se ha ido extendiendo, han aparecido numerosas aplicaciones para m´ ovil que serv´ ıan como herramienta de gamificaci´ on. Primero hablaremos de Kahoot, la aplicaci´ on utilizada en el experimento de la asignatura de Derecho Romano del que hemos hablado en el apartado anterior. Despu´ es presentaremos Atrivity, una plataforma que se utiliza como herramienta de gamificaci´ on en empresas. •Kahoot Kahoot es una herramienta de gamificaci´ on que utiliza para aprender y repasar conceptos de cualquier tipo de una manera muy entretenida. Puntua no s´ olo el acertar la respuesta correcta, sino tambi´ en la velocidad con laque se responde, puntuando mucho m´ as alto conforme menos tiempo se haya tardado en responder. De manera an´ aloga, si se comete un fallo la puntuaci´ on resta y cuanto menor sea el tiempo en cometer el fallo, m´ as son los puntos negativos. La finalidad de esto es crear un ranking por puntos en el que aparezcan todos los participantes. Cualquier persona puede crear ¨ un Kahoot”, un test de preguntas cualesquiera. Para hacer que otras personas participen en el test creado Kahoot asigna un n´ umero PIN al test creado, para que ´ este aparezca al introducirlo en la aplicaci´ on m´ ovil.
14 Juego de avatares para una herramientas de gamificaci´ on cente. Sin embargo un estudiante no puede ver la lista de alumnos de toda la clase ni mucho menos interactuar con ´ esta. Figura 2.5: Apartado Mi Perfil Figura 2.6: Localizaci´ on Escuela •Administrador El administrador de la escuela tiene el mismo men´ u que los dos roles explicados anteriormente, pero ´ este tiene le posibilidad de ver todos los estudiantes de la escuela registrados en la aplicaci´ on (ya no de una sola clase) y adem´ as tambi´ en puede ver la lista de docentes del centro. (a) Men´ u inicio (b) Apartado Mi Perfil (c) Lista de alumnos de clase Figura 2.7: Vista aplicaci´ on m´ ovil para Docente 2.2.2. Panel de administrador Ya hemos visto las funcionalidades que tiene el panel del administrador en la aplicaci´ on m´ ovil, pero el administrador, puesto que su papel conlleva tareas diferentes a las activi-
CAP´ ITULO 2. INTRODUCCI ´ ON AL PROYECTO 15 dades que se realizan en clase y le pueden llevar bastante tiempo, es m´ as c´ omodo que acceda desde la versi´ on para ordenador, o lo que llamamos ”dashboard”. Figura 2.8: Dashboard de Classpip 2.2.3. Arquitectura orientada a servicios La arquitectura orientada a servicios es uno de los componentes m´ as importantes de la aplicaci´ on. La aplicaci´ on de Loopback aporta una REST API que nos permite administrar y realizar operaciones con la base de datos. En la API se exponen los modelos que se van creando y para cada uno de ellos contiene operaciones post, get, patch y todo tipo de funciones de protocolo http. 2.3. Motivaci´ on El motivo de desarrollar un m´ odulo de avatares para la aplicaci´ on viene del primer bloque que fu´ e desarrollado para Classpip. Ferr´ an es el alumno que aport´ o el desarrollo de la arquitectura para la aplicaci´ on, sentando las bases y componentes necesarios para construir la plataforma de gamificaci´ on. En su memoria, Ferran explica qu´ e es un Producto Viable M´ ınimo (MVP, del ingl´ es Minimum Viable Product), un producto con una serie de caracter´ ısticas hechas para satisfacer al cliente y proporcionar una reacci´ on positiva para un futuro desarrollo del mismo. Todo esto forma parte de la estrategia a seguir para comercializar un producto. Las car´ acter´ ısticas que definen al MVP est´ an enfocadas a los clientes que se pretenden captar, as´ ı el producto tendr´ a una mayor acogida. Uno de los requisitos que se definen en ese MVP es que cada alumno deber´ ıa poder cambiar su avatar, por tanto de aqu´ ı nacela necesidad de crear un juego de avatares para la clase. En los primeros proyectos desarrollados para Classpip ya hab´ ıa avatares, pero eran una simple foto. Se pretende que el avatar sea algo m´ as que eso, el alumno podr´ a construirlo dentro de la aplicaci´ on y dependiendo de su participaci´ on en clase, tendr´ a opci´ on a personalizarlo m´ as o menos. La finalidad del avatar es darle juego a la aplicaci´ on de la misma manera que lo hace cualquier otro m´ odulo pero con funcionalidades distintas.
16 Juego de avatares para una herramientas de gamificaci´ on 2.4. Objetivos del m´ odulo Un paso previo al desarrollo del proyecto es plantear una serie de objetivos. En este caso el objetivo del proyecto es implementar una aplicaci´ on m´ ovil para aportar a Classpip un juego de avatares. Las funcionalidades que pretenden desarrollarse, son las listadas a continuaci´ on: •Crear clases con un listado de alumnos propio. Cada clase tendr´ a un identificador (nombre) propio y un juego de avatares que por defecto estar´ a desactivado. •A˜ nadir y eliminar alumnos de la lista de clase. •Poder ver el listado de alumnos que pertenece a cada clase con algunos datos. •Activar y desactivar el juego de avatares de cada clase cuando se crea conveniente. •A˜ nadir una familia de avatares. Cada juego tendr´ a opci´ on a crear una familia de personas o de otro ente como puede ser un monstruo. •Dise˜ nar unos requisitos para administrar privilegios que permitan personalizar el avatar. El docente se encargar´ a de establecer cu´ ales son los objetivos a cumplir para poder elegir un peinado o cualquier otro elemento disponible. •Conceder los privilegios a los alumnos manualmente, cuando el profesor crea necesario. •Crear un avatar, cuyo dise˜ no depender´ a de los requisitos que el docente haya establecido. Por ejemplo si el privilegio de cambiar los ojos no ha sido concedido, el alumno no podr´ a ponerle ojos al avatar. •Cargar una vista de la lista de clase con los avatares personalizados de cada alumno. •A˜ nadir una galer´ ıa de material, desde donde el profesor pueda cargar y ver los archivos de im´ agen para crear el avatar. La estructura del proyecto tiene dos pilares, que son los roles de usuario que existen en la aplicaci´ on, el alumno y el profesor. Una vez dentro de la aplicaci´ on, encontramos todas las funciones para administrar el juego en la parte del profesor, mientras que en la parte del estudiante la tarea m´ as importante que se desempe˜ na es la de decorar el avatar. Ambos roles permiten modificar algo de la informaci´ on personal de la cuenta como la contrase˜ na, que es la ´ unica acci´ on com´ un. La im´ agen que aparece justo en esta secci´ on (??) sirve para tener una ligera idea de qu´ e est´ a al alcance de cada usuario y qu´ e aporta este nuevo m´ odulo. C´ omo funciona el m´ odulo y qu´ e mec´ anica lleva el c´ odigo de la aplicaci´ on se detallan m´ as adelante en los cap´ ıtulos 5y6, respectivamente.
CAP´ ITULO 3. ESTADO DEL ARTE 3.1. Qu´ e son avatares Avatar es un concepto cuyo significado tiene varias definiciones, dependiendo del ´ ambito en el que se utilice. Mientras que anta˜ no, en el hinduismo un avatar se considera una encarnaci´ on del dios Visn´ u, pasando a tomar apariencia humana o animal; Actualmente en el mundo occidental se asocia a un elemento gr´ afico que representa a un usuario en el ´ ambito de la inform´ atica y la tecnolog´ ıa. La variante del concepto de avatar que se utiliza es la que se extiende al mundo digital. Aplicaciones, redes sociales y programas inform´ aticos permiten que sus usuarios se identifiquen mediante alg´ un recurso gr´ afico. La Web 2.0 o web social fue la primera herramienta en utilizar este recurso, creando una red en la que los usuarios interact´ uan entre s´ ı y se convierten en usuarios activos. El fen´ omeno social empezaba a desarrollarse con la sucesora de la Web 1.0, dando paso a blogs, redes sociales, espacios web colaborativos como Wikipedia, plataformas como Google Drive o Youtube. Toda esta cantidad de plataformas y servicios han conseguido crecer gracias a que los propios usuarios eran a la vez part´ ıcipes del contenido de ´ estas. Desde este boom de la web 2.0 se han visto diferentes tipos de avatares, desde los m´ as b´ asicos hasta los que se mueven, tienen mascotas y complementos y tienen voz propia. Figura 3.1: Busto de avatar Figura 3.2: Avatar con complementos 3.2. Herramientas para avatares En esta secci´ on se han recopilado diferentes aplicaciones de avatares que utilizan actualmente plataformas de docencia o redes sociales. El prop´ osito de ver las cualidades de cada una de ellas, es poder extraer ideas para a partir de ´ estas, idear los avatares que se incorporar´ an en Classpip. 17
18 Juego de avatares para una herramientas de gamificaci´ on 3.2.1. Voki Voki es una herramienta que facilita el dise˜ no de avatares personalizados en 2 dimensiones. Una de las caracter´ ısticas de esta aplicaci´ on es que sus personajes pueden moverse e incluso se les puede a˜ nadir voz. Se nos ofrece la posibilidad de elegir un personaje y un fondo. De entre los personajes se puede escoger una persona, pol´ ıtico, famoso, animal o personaje de c´ omic. La ropa del avatar tambi´ en es personalizable, dentro de la variedad que muestra la propia aplicaci´ on y el fondo puede ser uno de los proporcionados por la propia herramienta, o bien puede ser una aportaci´ on propia subiendo una imagen cualquiera. Podemos cambiar el color de la piel, de los ojos, la forma del pelo, etc. Figura 3.3: Editor de avatar en Voki Una de las ventajas que ofrece Voki es que permite organizar clases, para que se pueda utilizar en el ´ ambito docente. Se pueden configurar clases y permite que los estudiantes accedan a sus tareas. 3.2.2. Bitmoji Bitmoji es una aplicaci´ on que permite crear un avatar personalizado. Est´ a disponible en la tienda de Chrome, y hay una aplicaci´ on disponible para Android e iOS. Tambi´ en existe la posibilidad de acceder a la cuenta de Bitmoji a trav´ es de la web. Muchas otras aplicaciones de las m´ as utilizadas por los usuarios, tienen integrada la aplicaci´ on de Bitmoji, como Snapchat, Facebook, Facebook Messenger, Gmail, Gboard, Slack e iMessage. En caso de que la aplicaci´ on no est´ e integrada directamente, simplemente se puede copiar y pegar el avatar para utilizarlo. Para hacer un Bitmoji, tan solo hay que descargar la aplicaci´ on. Luego, la imagen se puede guardar y compartir, o se puede sincronizar con Snapchat. Una vez creada se puede seguir editando tantas veces como se quiera. Adem´ as de la propia creaci´ on del avatar personalizado, permiten bastantes opciones para dejarlo al gusto del usuario. Se puede cambiar la ropa del avatar, cuyo armario va cambiando con el tiempo y en relaci´ on
CAP´ ITULO 3. ESTADO DEL ARTE 19 a eventos. Los eventos deportivos suelen traer ropa deportiva que se a˜ nade al vestuario, y empresas como Pixar sacan packs de extensi´ on de los personajes de sus pel´ ıculas. Figura 3.4: Editor de avatar en Bitmoji 3.2.3. Classdojo Classdojo es una plataforma creada para gestionar el aula con la que pueden interactuar profesores, padres y estudiantes. Que pueda haber tres tipos de usuarios quiere decir que las funcionalidades var´ ıan, as´ ı que a continuaci´ on vermeos en qu´ e consiste el papel de cada uno de ellos. •Cuenta de docente Un aula puede estar administrada por uno o varios profesores, y de la misma manera un profesor puede estar al cargo de varias aulas. El profesor a˜ nade a los estudiantes y administra las aulas, teniendo la posibilidad de crear tantas clases como crea necesarias. Como todo juego tiene un sistema de asignaci´ on de puntos, que depende en todo momento del profesor. Si los puntos restan o suman, y qu´ e cantidad de puntos se atribuye a cada alumno recae directamente sobre el docente. Otra funciones disponibles para el profesor son la mensajer´ ıa directa con los padres y asignar insignias como las de la figura 3.5 a los alumnos. Figura 3.5: Panel de insignias
20 Juego de avatares para una herramientas de gamificaci´ on Algo que es de gran utilidad para el docente son los informes que genera Classdojo. Reflejan la evoluci´ on de la clase tomando como datos referentes el comportamiento y la puntuaci´ on de los estudiantes. Los datos de estos informes pueden exportarse a un fichero excel en caso de que se desee. Figura 3.6: Informe de evoluci´ on de la clase •Cuenta de alumno El estudiante es el rol que menos juego tiene en la aplicaci´ on. Puede personalizar un peque˜ no monstruo a modo de avatar y tambi´ en ver las puntuaciones e insignias que le ha asignado el profesor. Figura 3.7: Monstruo personalizado •Cuenta de padre La familia del estudiante puede participar tambi´ en en Classdojo. Un padre puede tener hasta varios alumnos a su cargo. Estar al tanto de cu´ ales han sido las valoraciones del docente, ponerse en contacto con el profesor a trav´ es de mensajes privados y visualizar la informaci´ on online son las opciones al alcance de este tipo de usuario. Cabe decir que todas estas funcionalidades van ligadas a los alumnos de los que se hace cargo el padre, es decir, no es posible que vea la informaci´ on de otras asignaturas, ni las calificaciones de otros estudiantes. Una aplicaci´ on gratuita y accesible desde cualquier plataforma web, iOS y Android con versiones en siferentes idiomas. Todas estas car´ acter´ ısticas convierten a Classdojo en una herramiente muy ´ util para la docencia.
CAP´ ITULO 3. ESTADO DEL ARTE 21 3.3. Aspectos distinguidos En esta secci´ on se recogen algunas de las caracter´ ısticas que podr´ ıan resultar de inspiraci´ on para desarrollar el m´ odulo de avatares. Bitmoji, dispone de una funci´ on ´ unica de la que pocas aplicaciones de creaci´ on pueden fardar. No solo tiene muchisima variedad de caras, peinados y complementos, adem´ as es capaz de construir un avatar a partir de un ”selfie”. Es quiz´ a la parte m´ as atractiva del m´ odulo, pese a que supone tener un manejo extraordinario de librer´ ıas de reconocimiento facial y podr´ ıa llevar mucho tiempo desarrollar algo similar. Tambi´ en cabe distinguir que las celebraciones especiales merecen una vestimenta o complementos especiales a veces. La Navidad, verano, Pascua, o incluso carnaval pueden pasar a formar parte del mundo del avatar en Bitmoji. Rompe un poco con la monoton´ ıa del avatar y podr´ ıa mantener a los estudiantes m´ as motivados si el juego va cambiando dependiendo de la ´ epoca del a˜ no. De Classdojo lo que destaca por su sencillez es el editor de avatares. Es un dise˜ no muy f´ acil de implementar, funciona con coordenadas de profundidad, as´ ı superponiendo unos elementos sobre otros se construye el avatar con todos sus componentes. Es una de las caracter´ ısticas que se tendr´ an en cuenta a la hora de implementar el dise˜ no del avatar. Algo de Classdojo que tambi´ en puede resultar atractivo a la hora de escoger una aplicaci´ on de gamificaci´ on para el entorno docente es incluir a los padres en una aplicaci´ on. Para estudiantes de temprana edad sobre todo, puede ser reconfortante que los padres puedan estar al tanto del comportamiento de sus hijos y tener un canal de comunicaci´ on directo con el docente. Pero este matiz no tiene sentido en un juego de avatares, quiz´ a pueda resultar ´ util de cara al desarrollo de futuros m´ odulos de Classpip. Lo m´ as fascinante de Voki es que los avatares puedan tener voz. No es una voz pregrabada, es la voz del usuario que grabada con el micro interno del ordenador queda registrada en la aplicaci´ on. Otra funci´ on que le dar´ ıa un papel al avatar que no fuese s´ olo visual.
CAP´ ITULO 4. CONCEPTO DE DISE ˜ NO Como concepto b´ asico de un buen dise˜ no es imprescindible tener en cuenta las opciones a las que pueden acceder los dos tipos de rol que acoge el m´ odulo. Los men´ us del profesor y del alumno son completamente diferentes. De hecho, el rol del profesor est´ a pensado para hacer de administrador realmente, y por tanto tendr´ a el poder de conceder permisos y administrar las bases de datos a las que accede el juego. 4.1. Modelo de juego Son varias las maneras de darle juego a este m´ odulo. El usuario que tiene autorizado poner en marcha el m´ odulo de avatares es el que tiene el rol de profesor. Tras iniciar sesi´ on, el profesor puede ver sus clases y crear un juego de avatares para cada una de ellas. El m´ odulo est´ a pensado para a˜ nadir una imagen caracter´ ıstica a cada alumno, que podr´ a estar dise˜ nada como este quiera. El avatar podr´ a tener tres elementos que ir´ an variando los usuarios a su gusto, como el pelo, los ojos y alg´ un complemento. La gracia del juego reside en que para modificar estos elementos, los usuarios deben tener permiso del administrador, y es que cada uno de los elementos tiene una condici´ on a cumplir para conseguir el permiso. En el apartado mi perfil aparecen los datos del usuario, que podr´ a modificar siempre y cuando crea necesario mediante un formulario de entrada. galer´ ıa de material contendr´ a todos los elementos que podr´ an usarse para personalizar los avatares, existiendo la posibilidad de a˜ nadir y eliminar cuantos elementos sean necesarios. Una vez est´ e activado el m´ odulo de avatares, los alumnos que utilicen la plataforma, encontrar´ an un busto de avatar desnudo al entrar por primera vez a ´ esta, que se le asigna por defecto cuando se activa el m´ odulo de avatares en la aplicaci´ on. De manera an´ aloga a tomar la decisi´ on de activar el m´ odulo de avatares para cada clase, el docente tambien decide, dentro de cada clase, qu´ e alumnos pueden modificar los elementos del avatar. Para esto tendremos 3 elementos para modificar: pelo, ojos y complementos. La vista que aparece de la lista de alumnos de una clase muestra, a parte de los datos personales de cada alumno, estas 3 casillas de elementos pertenecientes al avatar. Partiendo de la informaci´ on que contiene dicha lista, el profesor puede generar una vista de los avatares, para poder mostrar a sus alumnos en clase c´ omo se ven todos los avatares de los miembros de clase, lo supone que cada alumno puede ver su avatar pero no el del resto. 4.2. Dise˜ no funcional En esta secci´ on se explica c´ omo se van a dise˜ nar las funciones de la aplicaci´ on de manera que cubra lo que se ha especificado en los objetivos del proyecto. 23
30 Juego de avatares para una herramientas de gamificaci´ on Figura 4.8: Despliegue de pantallas para Mis clases Figura 4.9: Apartado ”Juego de avatares”para el rol del alumno La secci´ on permisos simplemente accede a una pantalla en las que aparecen las condiciones para conseguir los permisos para cambiar el pelo, los ojos, complementos del avatar o ver la lista completa de avatares, con un indicador verde que indica que est´ a activo en rojo que significa que no est´ a activado. Figura 4.10: Vista de ”Permisos¨ desde el rol de alumno Para personalizar el avatar, el panel es muy intuitivo. Se muestra en una imagen central el busto desnudo del avatar y en un men´ u colocado en la parte m´ as baja de la pantalla 3 botones sin texto, con iconos que representan los ojos, el pelo y los complementos del avatar. Cada bot´ on desplega una galer´ ıa de im´ agenes que contien peinados, ojos y complementos respectivamente. El usuario s´ olo podr´ a acceder a las galer´ ıas que este autorizado.
CAP´ ITULO 4. CONCEPTO DE DISE ˜ NO 31 Figura 4.11: Men´ u para personalizar el avatar Figura 4.12: Elementos para personalizar el avatar Al seleccionar una imagen de la galer´ ıa de cualquiera de los apartados, aparecer´ a un tick verde sobre la imagen que se haya seleccionado, y al pulsar en el OK que aparece arriba a la derecha, se retrocede a la vista principal que mostrar´ a el avatar con el pelo, ojos o complemento que se haya elegido. Estas son todas las pantallas dise˜ nadas para implementar en la aplicaci´ on, cuyo aspecto y funciones podr´ an variar en funci´ on de las necesidades que vayan surgiendo.
CAP´ ITULO 5. ENTIDADES DE LA BASE DE DATOS Mediante una aplicaci´ on llamada Loopback, es posible crear una API (Application Programming Interface) que adem´ as de contener los datos de todos los usuarios, utiliza servicios que recogen una serie de protocolos y funciones para intercambiar datos entre aplicaciones. Dentro de esta aplicaci´ on hay varios sistemas de gesti´ on de bases de datos de c´ odigo abierto, de los que he escogido “In Memory”, uno de los sistemas de c´ odigo abierto que almacena los datos en la memoria local. 5.1. Modelos Los modelos representan informaci´ on con la que va a trabajar el controlador, est´ an definidos con atributos y se especifica qu´ e tipo de informaci´ on tiene cada atributo. Si tenemos un archivo con las caracter´ ısticas del modelo, el controlador y la vista HTML pueden conocer tambi´ en qu´ e propiedades tiene y c´ omo est´ a estructurado. Los modelos que han sido necesarios para poder alcanzar los objetivos propuestos en la aplicaci´ on son cinco: persona, matr´ ıcula, clase, imagen, contenedor y permiso. A continuaci´ on se dan todo tipo de detalles a cerca de los atributos de cada uno de ellos. •Persona La aplicaci´ on pide como datos de entrada un usuario y una contrase˜ na, datos que deber´ ıan ser ´ unicos para cada persona que utilice la aplicaci´ on y un modelo persona es lo ideal para poder almacenar estos datos. En este modelo se disponen de tres atributos,un nombre de usuario, una contrase˜ na y un atributo que represente el rol de la persona. La funci´ on del rol es que la aplicaci´ on pueda detectar si la persona que ha iniciado sesi´ on es profesor o alumno, que esos ser´ an los dos ´ unicos valores que pueda tomar este atributo. •Clase Todas las personas con sus respectivos datos estar´ an distribuidas en clases. As´ ı que un modelo llamado clase va a contener los datos de todas las asignaturas que imparte el profesor. En caso de que haya que administrar m´ as de una clase al ir a ver el listado de alumnos se pedir´ a como par´ ametro de entrada el identificador de la clase, para poder mostrar los datos de todos los miembros de la clase que se corresponda con el identificador. La clase tendr´ a como atributos un identificador, para que el profesor pueda saber de qu´ e clase se trata, un administrador, una atributo llamado avatares, para indicar si el juego est´ a activado o no, una familia de avatares, acompa˜ nada de un atributo al que llamaremos busto, para guardar el fichero del busto de la familia de avatares, y por ´ ultimo cuatro atributos para guardar los cuatro privilegios que se conceden en el juego. 33
34 Juego de avatares para una herramientas de gamificaci´ on •Matr´ ıcula Una vez presentados los modelos de persona y clase, hace falta un tercer modelo para relacionar a cada persona con su clase. Este modelo es la matr´ ıcula, que tiene como atributos un identificador de alumno y un identificador de asignatura, as´ ı podemos ubicar a la persona en una clase concreta, y no s´ olo eso, sino que una persona puede estar matriculada de varias asignaturas siempre y cuando tenga una matr´ ıcula para cada una de ellas. Adem´ as de estos dos atributos, en matr´ ıcula aparecen 10 atributos m´ as. Cuatro de ellos son booleanos que sirven para saber si la persona tiene los permisos del juego de avatares que son 4: cambiarse el peinado, escoger los ojos, a˜ nadir un complemento y poder ver la lista de avatares de toda la clase. Otros cuatro atributos van ligados a estos ´ ultimos, porque en caso de que el estudiante tenga permiso para cambiar el peinado del avatar implica que puede escoger un archivo de im´ agen, y que ´ este tendr´ a que guardarse en alguna parte. As´ ı que atributos para fichero de peinado, fichero de ojos, fichero de complemento y fichero de boca, que puede cambiarse siempre. Por ´ ultimo, los dos atributos restantes que no son relevantes en el juego de avatares pero tienen su funci´ on, son la nota y el identificador de la matr´ ıcula, que es un n´ umero ´ unico para cada matr´ ıcula. •Contenedor Trabajar con los contenedores de almacenamiento implica hacer la declaraci´ on de alg´ un tipo de modelo para trabajar de una forma m´ as c´ omoda. Los contenedores tienen un nombre y archivos con un nombre concreto dentro, por tanto como vamos a trabajar con contenedores por separado, el ´ unico atributo que vamos a asignarle al contenedor es un nombre de tipo string. El modelo contenedor nos ser´ a´ util para asignar una familia de avatares, la familia tendr´ a el mismo nombre que el del contenedor. Conocer el nombre del contenedor es suficiente para tener acceso a todas los archivos que contenga. •Im´ agen El modelo para hacer referencia a las imagenes se va a llamar Imagen para no confundirlo con el del contenedor que solo hace referencia al lugar donde se almacenan estas. Como atributos tiene un nombre, haciendo referencia al nombre del archivo y un segundo atributo que es la direcci´ on, para almacenar la cadena de caracteres que servir´ a para ver el archivo. Dentro de cada contenedor habr´ a archivos tipo ’png’ o imagenes que pertenezcan a la familia de avatares que representa cada contenedor. Trabajar con estas imagenes para mostrarlas en HTML es un poco complejo, hay una funci´ on que ser´ a la encargada de convertir los datos del fichero png en una URL. La URL es una secuencia de caracteres que nos lleva a un sitio concreto de internet y permite recuperar un tipo de informaci´ on determinada. Una URL lo que hace es redirigirnos a mostrar la im´ agen. La funci´ on que genera la URL debe saber de qu´ e archivo tiene que generar la direcci´ on URL, as´ ı que lo mejor para trabajar con los datos de la im´ agen es crear un modelo nuevo sobre el que se sustenta el archivo de foto. •Permiso Adem´ as de un contenedor para las imagenes que componen el avatar, hay un contenedor que almacena los archivos de texto que se utilizan para establecer los requisitos para conseguir los permisos. Los permisos permiten cambiar diferentes elementos del avatar y cada uno de ellos se concede si el usuario cumple unos
CAP´ ITULO 5. ENTIDADES DE LA BASE DE DATOS 35 requisitos que el profesor establece. Pues bien, estos requisitos van recogidos en un archivo de texto. Para eso declaramos un nuevo modelo de almacenamiento que llamaremos permiso y que no tendr´ a ning´ un atributo en la siguiente im´ agen se muestra un diagrama de estos con sus atributos y c´ omo est´ an relacionados unos con otros. 5.2. Relaciones entre modelos Una vez ligados todos los elementos del juego de avatares con los diferentes modelos, es momento de introducir las relaciones. Las relaciones establecen la dependencia que existe entre dos modelos. •Relaciones 1:1 En este tipo de relaciones solamente se relaciona un elemento de un modelo con otro elemento de otro modelo. Por ejemplo, una matr´ ıcula puede pertenecer solo a una persona. •Relaciones 1:N Un elemento de un modelo A se relaciona con ninguno o con varios elementos de otro modelo B, pero los elementos del modelo B solo pueden relacionarse con un modelo de A. Este es el caso de la matr´ ıcula y la persona, una persona puede tener varias matr´ ıculas, mientras que una matr´ ıcula puede pertenecer a una sola persona. En loopback este tipo de relaciones se llaman “belongsTo”. •Relaciones N:M Varios elementos de un modelo pueden estar relacionados con un solo modelo, por ejemplo, tenemos el modelo “persona” y el modelo “clase”. Una clase puede estar formada por varias personas y a su vez, una persona puede estar en varias clases diferentes. Este tipo de relaci´ on en la aplicaci´ on se llama Hasmany. Traducido al lenguaje que utiliza loopback, encontramos las siguientes relaciones: 1. clase-HasMany-persona 2. persona-HasMany-clase 3. persona-belongsTo-matr´ ıcula 4. matr´ ıcula-belongsTo-clase Que dos modelos est´ en relacionados supone que se conectan a trav´ es de una clave, que puede ser propia o de un modelo ajeno. Las claves que aparecen en las relaciones detalladas anteriormente son ajenas o tambi´ en llamadas “foreignKey”. El claro ejemplo lo aporta el modelo “matr´ ıcula”, donde sus atributos “idAlumno” e “idAsignatura” son ambos “foreignKeys”.
36 Juego de avatares para una herramientas de gamificaci´ on 5.3. Ejemplos de acceso a la base de datos En este apartado mostramos efectos pr´ acticos que nos permiten acceder a la base de datos mediante los m´ etodos HTTP explicados en el apartado 5.1.. Desde un archivo utilizado para servicios, que contiene funciones que hacen operaciones y peticiones a la base de datos, creamos una funci´ on que muestre los datos de una persona. Para evitar consultar constantemente la base de datos, trabajaremos con “Observables” que reflejan autom´ aticamente los cambios realizados en la misma. Obtener la informaci´ on de una persona requiere del identificador que tiene el modelo “persona”. Todas las instancias de este modelo se encuentran en una direcci´ on http concreta, as´ ı para obtener los datos de una sola de ellas es necesario tener el par´ ametro ´ unico de cada persona (identificador), a˜ nadiendo a la direcci´ on de la http donde se encuentran todas las personas una / seguida del identificador se consiguen los atributos de la persona deseada obviando la informaci´ on del resto. Estos datos van a utilizarse para autentificar al individuo concreto en la aplicaci´ on. Recapitulando, en el apartado 5.1 los atributos del modelo “persona” son, nombre, que adem´ as sirve de identificador, pass haciendo referencia a la contrase˜ na, y rol que especifica si el usuario es estudiante o docente. En el componente para entrar en la aplicaci´ on, se piden el nombre de usuario y la contrase˜ na del individuo. Al hacer click en el bot´ on “iniciar sesi´ on” la funci´ on “Autentificar” llama al servicios que accede a la base de datos utilizando la funci´ on “DamePersona” que toma como par´ ametro el nombre de usuario introducido, esta funci´ on se encarga solo de hacer una petici´ on get a la base de datos y retorna un “Observable” de la persona. La funci´ on “autentificar” es la que recoge este observable y comprueba que la contrase˜ na introducida coincide con la persona retornada, y si la informaci´ on concuerda, dependiendo del rol del usuario, le dar´ a acceso a una p´ agina o a otra dentro de la aplicaci´ on. Otro caso en el que se consulta la base de datos mediante un servicio ocurre cuando el alumno accede a l apartado de “mis asignaturas”. Aqu´ ı se llama a la funci´ on “DameClases” del archivo de servicios, que lanza una petici´ on get a la direcci´ on donde se encuentran todas las clases, y retorna un observable de todas ellas. Un ´ ultimo escenario en el que el archivo de servicios media entre la interfaz de la aplicaci´ on y el almacenamiento de datos se da a la hora de crear una clase nueva, la funci´ on “CreaClase” hace una operaci´ on post con toda la informaci´ on necesaria para cubrir los atributos requeridos de la clase que se recogen de un formulario cumplimentado por el profesor.
CAP´ ITULO 6. IMPLEMENTACI ´ ON La implementaci´ on de la aplicaci´ on m´ ovil se ha llevado a cabo con angular e ionic. La aplicaci´ on est´ a formada por componentes, que son peque˜ nos m´ odulos del software compuestos por tres partes, la vista HTML, el controlador y el estilo adem´ as de utilizar servicios para conectar con la base de datos. 6.1. Componentes En este cap´ ıtulo se detallan los componentes m´ as importantes y se explica qu´ e implicaci´ on tienen en el desarrollo del software y de la aplicaci´ on. Dichos componentes est´ an orientados a la parte del juego de avatares, el resto de vistas HTML, estilos y controladores no juegan el mismo papel en este m´ odulo, son detalles adicionales que sirven para complementar el m´ odulo. A modo introducci´ on vamos a enumerar los componentes que forman esta lista de elementos que dan juego a los avatares: •avatares En la p´ agina avatares tenemos la opci´ on de activar y desactivar el juego si el inicio de sesi´ on en la aplicaci´ on ha sido hecho con usuario que tenga el rol de profesor. Activar el juego supone seleccionar una familia de avatares, que por defecto es de personas. Las otra familia disponible es de minions. Cuando el juego est´ a en funcionamiento, aparecen dos botones: “Permisos” y “Lista de avatares”. Estos nos llevar´ an a los componentes de listaavatares y permisos, respectivamente. Estas dos secciones se explican m´ as adelante. Figura 6.1: C´ odigo del controlador 37
38 Juego de avatares para una herramientas de gamificaci´ on Figura 6.2: C´ odigo vista HTML Para ver de qu´ e manera trabaja un componente relacionando la vista con el controlador, en el ejemplo de la figura 6.1 se obseva un par´ ametro que se llama idClase, de tipo string. Este par´ ametro reaparece en la vista HTML de la figura 6.2 entre una doble llave. Esto significa que el valor que toma este par´ ametro en el controlador, se mostrar´ a en la vista HTML al usuario. A continuaci´ on se enumeran m´ as componentes que pertenecen a la aplicaci´ on. •galeria La galer´ ıa es una p´ agina exclusiva para el profesor, donde carga los archivos de im´ agen que constituyen diferentes elementos del avatar. Encontramos diversas secciones, una para cada elemento del avatar. Cada secci´ on tiene dos subapartados, uno para a˜ nadir material y otro para visualizar el material que adem´ as da la opci´ on de eliminarlo si se desea. •complementos, ojos y pelos Las funcionalidades y vistas de estas tres p´ aginas pueden explicarse en conjunto, ya que todas ellas tienen la misma funci´ on. Est´ an disponibles unicamente para el usuario con rol de alumno. Una vez se ha explicado la p´ agina de la galer´ ıa es mucho m´ as sencillo comentar su funcionamiento. Tienen la misma funcionalidad que la galer´ ıa del profesor, mostrar los peinados, ojos, complementos y ropa, pero en p´ aginas por separado. •home Home es el primer componente que ven´ ıa por defecto con la aplicaci´ on, que se ha aprovechado para personalizar el avatar. Desde un usuario con rol de alumno se puede acceder, siempre y cuando el juego de avatares est´ e activo.
CAP´ ITULO 6. IMPLEMENTACI ´ ON 39 Al entrar aparece el avatar en el centro de la pantalla se muestran los ficheros del avatar que tenga el alumno, en caso de no tener ninguno se ver´ a el busto del avatar vac´ ıo o con los elementos que tenga. Desde esta secci´ on podr´ a entrar a cambiar los elementos del avatar y tendr´ a acceso a la lista de permisos para que el juego sea completo. •listaavatares La lista de avatares carga los avatares de todos los alumnos que est´ en matriculados en una asignatura con juego de avatares. Teniendo un avatar personalizado para cada alumno, la lista de alumnos puede cobrar un poco de vida. •permisos En “Permisos” el profesor tiene las funcionalidades de subir archivos de texto a la base de datos y de cargarlos en la aplicaci´ on para que se muestre por pantalla el texto que contienen. Los archivos de texto para cada permiso tienen una secci´ on propia. •vistapermisos A la p´ agina vistapermisos se accede desde “home”. Aqu´ ı aparecen clasificados los requisitos que el profesor ha seleccionado para conceder los permisos. Es una secci´ on a la que acceden los usuarios que son alumnos y no tiene ning´ un elemento para interactuar. Se muestra qu´ e se exige para conseguir cada permiso y adem´ as, hay un indicador para que el alumno sepa si ya ha cumplido el requisito o no. 6.2. Servicios Un servicio es un m´ etodo que se utiliza para comunicar dos interfaces, mediante un conjunto de protocolos establecidos. En este proyecto los servicios que se utilizan son dos, ”datos.service 2 ”db-service.service”. Uno de ellos, db-service, tiene alrededor de 400 l´ ıneas de c´ odigo y comunica esencialmente con la base de datos, mientras que el servicio datos tiene unas 140 l´ ıneas de c´ odigo y sirve para pasar informaci´ on de un componente a otro dentro de la aplicaci´ on. En la im´ agen que aparece bajo este p´ arrafo, se expone el c´ odigo de una funci´ on del archivo de servicios ”db-service”, que elimina una matr´ ıcula de la base de datos mediante una operaci´ on ”delete”de protocolo http. toma como par´ ametro de entrada la matr´ ıcula que va a eliminar para poder localizar la matr´ ıcula en la base de datos por su identificador. Figura 6.3: Caption Para ver m´ as operaciones de este tipo, que se utilizan para acceder a la base de datos, en el anexo Faparece el c´ odigo de el archivo “db-service” para tener una buena referencia.
CAP´ ITULO 7. PRUEBAS Y EVALUACI ´ ON Para comprobar que el c´ odigo sea robusto y no haya ninguna incoherencia que pueda dar lugar a errores, se han escogido cinco pruebas para comprobar el correcto funcionamiento de la aplicaci´ on. 7.1. Bater´ıa de pruebas •Contrase˜ na err´ onea Para iniciar sesi´ on en la aplicaci´ on, se requiere de un usuario y contrase˜ na. En caso de que el usuario exista en la base de datos, pero la contrase˜ na no sea la correcta, no se deber´ ıa poder iniciar sesi´ on. Tal y como se muestra en la figura XX, no s´ olo se impide que el usuario inicie sesi´ on, sino que adem´ as aparece un mensaje que especifica el motivo que no le permite entrar en la aplicaci´ on. •A˜ nadir un usuario ya existente Tener dos usuarios con el mismo nombre puede llevar a confusiones, y no debe estar permitido. As´ ı, cuando el profesor registra un nuevo alumno, se comprueba que no haya otro con el mismo nombre que haya sido registrado previamente. Si ya se hab´ ıa registrado a una persona con el mismo nombre, otra notificaci´ on aparece en la pantalla sugiriendo al profesor que utilice un nombre nuevo. •Conceder y retirar permisos Los permisos se conceden desde un usuario con rol de profesor, sin embargo afectan a un usuario con rol de alumno. As´ ı que una buena manera de comprobar que esta funci´ on sigue el curso correcto, es ver si el clic del profesor, ha repercutido en la matr´ ıcula del alumno. Para esto se colocan unos marcadores en el usuario del alumno, que aparecen en color verde para indicar que el permiso est´ a activado. •Eliminar una clase que no existe Hacer una petici´ on “delete” a la base de datos relacionada con un elemento que no existe puede desencadenar un error fatal. Por esta raz´ on, se alaerta al docente cuando intenta eliminar una clase inexistente. Todas estas pruebas pueden darse por superadas, y aparecen en el ap´ endice D. 7.2. Evaluaci´ on de usuario Siempre es conveniente conocer la opini´ on de disferentes personas que podr´ ıan hacer uso de la aplicaci´ on. La opini´ on de diferentes individuos a los que se les ha mostrado la aplicaci´ on con sus respectivas funcionalidades viene recogida en la encuesta anexada en la secci´ on Ede los ap´ endices. Las preguntas realizadas est´ an ligadas a las funcionalidades del profesor y del alumno, se pide opini´ on personal a cerca de qu´ e encuentran a faltar para hacer del proyecto un 47
48 Juego de avatares para una herramientas de gamificaci´ on m´ odulo m´ as completo, se consultan qu´ e tan intuitivo es nvegar por la aplicaci´ on y se pide escoger una funcionalidad favorita. Los resultados generales reflejan que es un m´ odulo muy completo en opini´ on de los encuestados, bastante intuitivo para cualquier usuario y que las funcionalidades favoritas por igual, son a˜ nadir diferentes familias de avatares y poder conceder privilegios para personalizar el avatar.
CAP´ ITULO 8. CONCLUSIONES Utilizar tecnolog´ ıas completamente desconocidas, de las que no se ha trabajado a lo largo de los a˜ nos de carrera ha supuesto un reto de aprendizaje autodidacta. Los v´ ıdeotutoriales de youtube y las webs de material de referencia en programaci´ on orientada al desarrollo de aplicaciones web y m´ ovil han sido las gu´ ıas del proyecto. Adem´ as el uso de ionic como framework ha facilitado much´ ısimo la programaci´ on de la aplicaci´ on m´ ovil, ya que incluye un mont´ on de documentaci´ on sobre material en su p´ agina web. Por otra parte Git, la herramienta de control de versiones, ha sido otra de las piezas clave a lahora de realizar cambios de la manera m´ as segura posible, pudiendo deshacerlos en cualquier momento. 8.1. Objetivos conseguidos El juego de avatares para una herramienta de gamificaci´ on se ha intentado desarrollar de manera que cumpliese con el mayor n´ umero de objetivos propuestos posibles. De todos los objetivos propuestos, hay dos que no se han llegado a alcanzar. El nulo conocimiento de las tecnolog´ ıas de desarrollo ha sido el motivo principal, puesto que tanto la instalaci´ on de todas lasherramientas, como el conocimiento de programaci´ on con ´ estas han llevado mucho m´ as tiempo de lo esperado al inicio del proyecto. La lista de objetivos est´ a definida en el apartado 2.4., de la que no se ha completado lo siguiente: •Eliminar alumnos de la lista de clase El tiempo dedicado a implementar el proyecto se ha centrado m´ as en las funcionalidades de los avatares, por tanto detalles de este tipo se han dejado para ´ ultima hora, sabiendo que la persona que tome el relevo de la aplicaci´ on ser´ a capaz de a˜ nadir el detalle. 8.2. Valoraci´ on personal El proyecto ha sido todo un desaf´ ıo, ya que en los diferentes cursos de la menci´ on de aeronavegaci´ on tan s´ olo se imparten dos asignaturas dedicadas plenamente a la programaci´ on. Las librer´ ıas y el tipo de lenguaje que se han utilizado en este proyecto son orientados a objetos, que es la clase de programaci´ on que se utiliza en una de las asignaturas mencionadas previamente, lo que proporciona una buena base. Sin embargo, el tipo de tecnolog´ ıa que se utiliza para el desarrollo nada tiene que ver. Uno de los mayores obst´ aculos para m´ ı ha sido la instalaci´ on de todas y cada una de las herramientas para poder desarrollar el proyecto. Muchas veces, la versi´ on instalada no era la correcta y daba errores muy poco espec´ ıficos que no daban a entender que las vesiones entre dos o m´ as herramientas no fuesen compatibles. Otra de las dificultades que se me han presentado es el uso de la versi´ on 4 de Angular e Ionic, que no se hab´ ıan utilizado en proyectos previos y eso supone que haya variaciones en algunas de las librer´ ıas, por tanto lo que en la versi´ on 3 funcionaba perfectamente en la versi´ on 4 probablemente no lo hiciese. 49
50 Juego de avatares para una herramientas de gamificaci´ on Cada error que daba el c´ odigo, al principio era todo un mundo para corregirlo. Si que es verdad, que con la ayuda del resto de alumnos implicados en proyectos de Classpip y con los tutoriales de Miguel, poco a poco fui aprendiendo a evitar tantos fallos en el sistema. El proceso de aprendizaje, pese a que ha sido costoso y algo largo, me ha aportado conocimientos suficientes como para que el resultado sea sacticsfactorio. 8.3. L´ıneas abiertas El m´ odulo de avatares a˜ nade una caracter´ ıstica visual y muy atractiva a Classpip, sobretodo de cara al p´ ublico m´ as j´ oven. Esta primera versi´ on del proyecto, deja muchas puertas abiertas a la comunicaci´ on con otros m´ odulos, como por ejemplo conceder privilegios especiales a los ganadores de un torneo perteneciente al m´ odulo de competiciones, o desbloquear un permiso al llegar a un n´ umero de puntos determinado. Quedan pendiente muchas posibles mejoras como funcionalidades nuevas o incluso alguna gu´ ıa para usuarios reci´ en iniciados, ya que puede ser un poco confuso el funcionamiento del proyecto. Todas las secciones pueden mejorar sobretodo en cuanto a dise˜ no, que es la parte en la que menos se ha profundizado. La aplicaci´ on se ha hecho lo m´ as sencilla posible para poder cumplir con los objetivos. Para terminar, es imprescindible incluir m´ as familias en el m´ odulo y material exclusivo para determinadas ´ epocas. Todo esto har´ a que el juego no sea repetitivo, mantenga motivados a los usuarios y satisfaga al cliente.
BIBLIOGRAF´ IA [1] Avatar [online]: https://blog.ensalza.com/diccionario/que-es-un-avatar-eninformatica/. [2] Web 2.0. [online]: https://iweb2o.webnode.com.co/avatar/ [3] Voki [online]: http://www.educacontic.es/blog/voki-personajes-que-hablan-text-speech [4] Git y GitHub [online]: https://desarrolloweb.com/articulos/introduccion-git-github.html [5] LoopBack [online]: https://loopback.io/ [6] Gamificaci´ on [online]: https://blog.atrivity.com/es/que-es-gamificacion-y-como-usarla [7] Gamification at Work Survey [online]: https://www.talentlms.com/blog/gamificationsurvey-results/ [8] Classdojo [online]: https://www.educaciontrespuntocero.com/recursos/classdojo-quees-como-empezar/33376.html [9] Gamificaci´ on en la asignatura de Derecho Romano [online]: https://www.researchgate.net/profile/SoniaPamplona [10] API-REST [online]: https://bbvaopen4u.com/es/actualidad/api-rest-que-es-y-cualesson-sus-ventajas-en-el-desarrollo-de-proyectos [11] Bootstrap [online]: https://raiolanetworks.es/blog/que-es-bootstrap/ [12] Ionic [online]: https://ionicframework.com/ [13] Angular [online]: https://angular.io/ [14] Kahoot [online]: https://www.xataka.com/basics/kahoot-que-es-para-que-sirve-ycomo-funciona [15] Bitmoji [online]: https://www.bitmoji.com/ [16] NodeJS [online]: https://www.netconsulting.es/blog/nodejs/ [17] Cordova [online]: https://es.wikipedia.org/wiki/ApacheCordova [18] Zombies Run! [online] https://zombiesrungame.com/ 51
AP ´ ENDICES
AP ´ ENDICE A. MANUAL DE INSTALACI ´ ON En esta secci´ on aparecen los pasos a seguir para instalar todas las herramientas que forman parte de la arquitectura del software. A.1. Node y NPM La versi´ on de NODE con la que se ha desarrollado el proyecto es la 8.6.0, sin embargo esta versi´ on no es compatible con Angular CLI, as´ ı que utilizaremos la versi´ on 8.9.4. Para esto accederemos a la web del link adjuntado a continuaci´ on: https://nodejs.org/es/download/releases/ Figura A.1: Opciones instalaci´ on NODE Entrando en la secci´ on de“Todas las versiones”, se abrir´ a el siguiente enlace https://nodejs.org/dist/, donde visualizaremos las versiones disponibles hasta la fecha. Ah´ ı haremos click en la versi´ on que queremos descargar. Figura A.2: Versi´ on de instalaci´ on NODE El NPM se instala autom´ aticamente tras realizar la instalaci´ on del NODE. Para ver qu´ e versi´ on se ha instalado de cada uno de ellos, podemos abrir una l´ ınea de comandos o como aparece en Windows “S´ ımbolo del sistema”. Por tanto la versi´ on del NPM no es importante, ya que viene ligada a la del NODE, que es la que nos interesa. Mediante las ´ ordenes node –v y npm –v, aparece en pantalla la versi´ on correspondiente a cada una de las herramientas. 55
1. Hacer el Fork, clonar y abrir el repositorio del siguiente enlace: https://github.com/classpip/classpip-dashboard 2. Instalar todas las dependencias locales que hay en la carpeta del classpip-dashboard con la instrucciones que aparecen a continuaci´ on, ejecutadas una a una: cd CarpetaDondeEst´ aElRepositorio/classpip-dashboard npm install 3. ejecutar la aplicaci´ on utilizando la siguiente instrucci´ on: npm run start Con tal de abrir la aplicaci´ on, hay que abrir el navegador e introducir la siguiente direcci´ on: http://localhost:4200/ Estos son todos los elementos que deben instalarse en caso de querer emprender unnuevo proyecto relacionado con Classpip.
AP ´ ENDICE B. IMAGENES DE LAS FUNCIONALIDADES PARA EL DOCENTE La aplicaci´ on muestra diferentes vistas, aqu´ ı se recogen las que corresponden al usuario de rol profesor. Figura B.1: Pantalla de inicio de sesi´ on Figura B.2: Men´ u de inicio para profesor Tras el inicio de sesi´ on, como puede verse aparecen tres opciones en el men´ u principal y un bot´ on rojo arba a la derecha que sirve para cerrar la sesi´ on. A continuaci´ on aparecen las diferentes p´ aginas que se desplegan en cada una de las opciones del men´ u. 63
B.1. Mi perfil Empezando por “Mi Perfil”, vemos todos los datos del docente, y adem´ as hay una funci´ on para cambiar la contrase˜ na, que extiende una entrada de texto, tal y como se observa en la figura B.4. Figura B.3: Apartado “Mi perfil” Figura B.4: Elecci´ on de unanueva contrase˜ na
B.2. Mis clases Volviendo al inicio, el siguiente apartado, con t´ ıtulo “Mis clases”, muestra la siguiente apariencia: Figura B.5: Apartado “Mis clases” para rol de profesor
La opciones de a˜ nadir clase y eliminar clase est´ an disponibles en la barra inferior dela pantalla. Para a˜ nadir una clase aparece un formulario a rellenar mientras que para eliminar la clase simplemente se pide introducir el nombre que identifica a la asignatura. Figura B.6: A˜ nadir clase Figura B.7: Eliminar clase
El siguiente paso es visualizar las p´ aginas de las opciones “Ver lista de alumnos” y “Juego de Avatares” que aparecen para cada clase. La lista de alumnos var´ ıa ligeramente si el juego de avatares est´ a activado, comparada con la versi´ on de la lista que aparece cuando no hay avatares. Figura B.8: Lista de alumnos con el juego de avatares desactivado Figura B.9: Lista de alumnos con el juego de avatares activo
Para a˜ nadir alumnos en la clase, aparece un formulario muy similar al de a˜ nadir clases como se muestra en la figura a continuaci´ on. Figura B.10: Formulario para a˜ nadir alumnos a la clase
B.3. Juego de avatares Para activar el juego de avatares, es necesario entrar en la secci´ on “Juego de Avatares”, que es ´ unica para cada clase. Aqu´ ı se activa el juego con un bot´ on “toggle”. Al clicar en el bot´ on, ´ este se vuelve de color verde y aparecen todos los elementos relacionados con el juego en un apartado centrado en la pantalla. Figura B.11: Juego de avatares desactivado Figura B.12: Juego de avatares activado
Escoger la familia de avatares, como ya hab´ ıamos comentado en cap´ ıtulos anteriores, es muy simple, el desplegable que aparece en la plantalla muestra las opciones que hay. Tras escoger familia y clicar en el bot´ on “Guardar” de la figura B.12, tras la frase “Has escogido la familia:” aparece el nombre de la ´ ultima familia guardada. Figura B.13: Formulario para a˜ nadir alumnos a la clase
Respecto a la secci´ on de “Permisos” encontramos una p´ agina donde se pueden cargar archivos de texto. En la barra de la parte inferior de la pantalla hay dos botones, uno a cada lado. El bot´ on cargar extiende una pantalla que permite seleccionar archivos del dispositivo en el que se utiliza la aplicaci´ on. Una vez seleccionado el archivo, haciendo clic en “Subir”, ´ este se carga en la base de datos. Figura B.14: Carga de archivos de texto para mostrar en permisos Figura B.15: Selecci´ on de archivo para mostrar por pantalla Para cada permiso hay un desplegable, que permite ver todos los archivos que se han cargado previamente. Eligiendo un archivo y clicando en el bot´ on de Guardar, el texto del archivo aparece por pantalla. Puede apreciarse la secuencia de elementos descrita en la figura B.14.
AP ´ ENDICE C. IMAGENES DE LAS FUNCIONALIDADES PARA EL ESTUDIANTE El estudiante tiene bastantes menos funcionalidades que el profesor. La pantalla para iniciar sesi´ on en la aplicaci´ on sin embargo, es la misma. Figura C.1: Pantalla para iniciar sesi´ on Figura C.2: Men´ u de inicio Alumno 79
Los dos apartados que se muestran parecen id´ enticos a los del profesor, y de hecho la primera impresi´ on es esa, no hay nada diferente a simple vista, sin embargo como veremos a continuaci´ on en el apartado de “Mis asignaturas” no se ofrecen las mismas funcionalidades. El apartado “Mi perfil” s´ ı que es id´ entico. Figura C.3: Apartado “Mi perfil” para rol de alumno Figura C.4: Apartado de asignaturas para el alumno Como puede apreciarse en la figura C.4, la secci´ on“Juego de avatares” bajo el bot´ on en el que pone Dibujo tiene un color muy apagado, lo que significa que para la clase de Dibujo el juego no est´ a activado. Puede verse la diferencia de color comparado con la clase de F´ ısica, que est´ a justo encima.
Dentro de cada asignatura, los apartados de “Informaci´ on” y “Juego de avatares” se ven como en las imagenes expuestas a continuaci´ on. Figura C.5: Apartado “Informaci´ on” Figura C.6: Secci´ on “Juego de avatares” para alumno
Las siguientes im´ agenes pertenecen a los diferentes apartados de material para el avatar. La diferecia de estos apartados con la galer´ ıa de material del profesor es que aqu˜ ni se hace un filtro de material por familias. El programa detecta si el archivo pertenece a una familia o a otra gracias a las reglas de nomenclatura. •Secci´ on de peinados: Figura C.7: Peinados familia “minion” Figura C.8: Peinados familia “persona”
•Secci´ on de ojos Figura C.9: Ojos familia “minion” Figura C.10: Ojos familia “persona”
•Secci´ on de complementos: Figura C.11: Complementos familia “minion” Figura C.12: Complementos familia “persona”
•Secci´ on de bocas: Figura C.13: Bocas familia “minion” Figura C.14: Bocas familia “persona”
Por ´ ultimo ser´ ıa necesario explicar las ´ ultimas vistas a la que se puede acceder desde el apartado de personalizaci´ on del avatar. Por una parte tenemos la lista de avatares. Si el bot´ on morado que aparece en la parte superior de la derecha est´ a activado, el alumno tiene permiso para visualizar la lista de avatares. La diferencia entre un alumno que puede acceder y otro que no est´ a en el color del bot´ on, que se ve m´ as apagado si no est´ a accesible. Figura C.15: Permiso para ver la lista de avatares concedido Figura C.16: Permiso para ver la lista de avatares denegado La versi´ on de la lista a la que se accede es exactamente la misma que la que puede ver el profesor, aparece en las figuras B.16 yB.17.
Con la siguiente vista se termina por completo el abanico de p´ aginas a las que accede el alumno. En la secci´ on “Permisos” aparecen los requisitos que el alumno debe cumplir para poder acceder a los apartados de peinados, ojos, complementos y ver la lista de avatares. Cada permiso tiene un indicador que aparece en verde si ´ este ha sido condedido. Figura C.17: Vista de permisos para alumno
Figura E.2: Valoraci´ on de la intuitividad del m´ odulo Figura E.3: Elecci´ on de la funci´ on favorita del juego
Figura E.4: Opiniones sobre funcionespara a˜ nadir al rol de profesor Figura E.5: Valoraci´ on de las funciones del alumno
Figura E.6: Respuestas a “¿Utilizar´ ıas este juego en tu clase?” Figura E.7: Propuestas de mejora para el m´ odulo de avatares
AP ´ ENDICE F. C ´ ODIGO DE ARCHIVO DE SERVICIOS PARA LA BASE DE DATOS import { Injectable } from ’@angular/core’; import { Observable, of, from } from ’rxjs’; import { HttpClient, HttpHeaders } from ’@angular/common/http’; import { Persona } from ’./Persona’; import { Clase } from ’./Clase’; import { Imagen } from ’./Imagen’; import { Container } from ’./Container’; import { Img } from ’./Img’; import { Matricula } from ’./Matricula’; // Las siguientes librer´ ıas importadas son para poder realizar operaciones Http import { Http, ResponseContentType, RequestOptions, Response, Headers } from ’@angular/http’; @Injectable({ providedIn: ’root’ }) export class DbServiceService { // Creo un array en el que voy a guardar im´ agenes // que vendran de un contenedor concreto imagenesPelos: Img[] = new Array(); imagenesOjos: Img[] = new Array(); imagenesComplementos: Img[] = new Array(); idclase: string; NPersona: string; matricula: Matricula; // Declaro como string la URL de la BDD a la que me quiero conectar private APIUrl = ’http://localhost:3000/api/Personas’; private APIClases = ’http://localhost:3000/api/Clases’; private APIFotos = ’http://localhost:3000/api/imagenes’; APIPermisos = ’http://localhost:3000/api/permisos/ArchivosTexto’; // Inserto en el constructor el servicio Http para poder hacer las operaciones //necesarias constructor(private http: HttpClient, private http2: Http) { } // A partir de aqu´ ı declaro las operaciones que va a ofrecer este servicio 97
// La siguiente funci´ on lama a un observable de la lista de personas // Por esto mismo hemos importado arriba la clase Observable dameTodos(): Observable<Persona[]> { // La operacion get del protocolo http devuelve lo que tiene // entre "< >", en este caso una lista de personas. return this.http.get<Persona[]>(this.APIUrl); } dameFotosContainer(container: string): Observable<any[]> { return this.http.get<any[]>(this.APIFotos + ’/’ + container + ’/files’); } DameMatriculaAlumno(idAsignatura: string) { console.log( idAsignatura ); return this.http.get<Matricula[]>(’http://localhost:3000/api/matriculas?filter[where][idAsignatura]=’ + idAsignatura); } PonMatricula(matricula: Matricula ): Observable<any> { return this.http.post<any>(’http://localhost:3000/api/matriculas’, matricula); } CuentaMatriculas(): Observable<any> { return this.http.get<any>(’http://localhost:3000/api/matriculas/count’); } Eliminar(nombre: string): Observable<any> { return this.http.delete<any>(this.APIUrl + ’/’ + nombre); } EliminarClase(idClase: string): Observable<Clase> { return this.http.delete<Clase>(this.APIClases + ’/’ + idClase); } EliminarMatricula(matricula: Matricula): Observable<any> { console.log(’Voy a eliminar la matr´ ıcula de: ’ + matricula.idAlumno); console.log(’El id que elimino es: ’ + matricula.id); return this.http.delete<any>(’http://localhost:3000/api/matriculas/’ + matricula.id); } DamePersona(nombre: string): Observable<Persona> {
console.log(nombre); return this.http.get<Persona>(this.APIUrl + ’/’ + nombre); console.log(Persona); } SetIdClase(clase: string) { this.idclase = clase; } SetNombrePersona(npersona: string) { this.NPersona = npersona; } SetMatricula(matri: Matricula) { this.matricula = matri; } ReturnNombrePersona() { return this.NPersona; } ReturnIdClase() { return this.idclase; } ReturnMatri() { return this.matricula; } DameClase(idclase: string): Observable<Clase> { this.idclase = idclase; console.log(’Te doy los datos de: ’ + idclase); return this.http.get<Clase>(this.APIClases + ’/’ + idclase); } DameClases(): Observable<Clase[]> { return this.http.get<Clase[]>(this.APIClases); } ColocoPelo(elementoP: string) { console.log(’Me llega un: ’ + elementoP); if (elementoP === undefined || elementoP === ’’) { console.log(’No has seleccionado ning´ un pelo’); } else {
console.log(’Entro a colocar’); var imagen = document.createElement(’img’); imagen.style.position = ’absolute’; // imagen.style.zIndex = ’1’; imagen.style.left = ’0px’; imagen.style.top = ’0px’; imagen.src = elementoP; document.getElementById(’avatar’).appendChild(imagen); } } CambiaEstadoJuego(clase: Clase) { if (clase.avatares === true) { clase.avatares = false; } else { clase.avatares = true; } console.log(’Ahora el estado es este:’ + clase.avatares); return this.http.put<any>(this.APIClases + ’/’ + clase.id, clase); } CreaClase(clase: Clase): Observable<Clase> { // clase.admin = admin; return this.http.post<Clase>(this.APIClases + ’/’ + clase.id, clase); } PonPass(alumno: Persona, nuevopass: string): Observable<any> { alumno.pass = nuevopass; return this.http.put<any>(this.APIUrl + ’/’ + alumno.nombre, alumno); } // A˜ nadir una persona a la BBDD es una operaci´ on post // requiere la URL y en este caso la persona que debemos a˜ nadir // Esta funci´ on tambi´ en devulve un observable de cualquier tipo // Va a ser un m´ etodo usado ´ unicamente por el profesor PonPersona(persona: Persona): Observable<any> { return this.http.post<any>(this.APIUrl, persona); } // Creo una funci´ on que sirve s´ olamente para la carga de archivos // como im´ agenes o archivos de texto, servir´ a para que el profesor
// cargue el material en la galer´ ıa y los archivos de texto que ir´ an ligados // a los permisos 1, 2 y 3 para construir el avatar DameContenedores(): Observable<any[]> { return this.http.get<any[]>(this.APIFotos); } DameFoto(idconte: string) { // this.VaciarArray(); var i; this.http.get<any>(this.APIFotos + ’/’ + idconte + ’/files’) .subscribe( fotoscontainer => { console.log(’Tengo los archivos del container: ’ + fotoscontainer); // this.nombreslogos = fotoscontainer; for (i = 0; i < fotoscontainer.length; i++) { console.log(fotoscontainer[i].name); this.http2.get(this.APIFotos + ’/’ + idconte + ’/download/’ + fotoscontainer[i].name, {responseType: ResponseContentType.Blob} ) .subscribe(response => { console.log(response); this.CargarLogos(response, idconte); }); } console.log(’Ye he acabado’); }); } DameLogosPelo() { // console.log(’Ya he rellenado el modelo’); return this.imagenesPelos; } DameLogosOjos() { return this.imagenesOjos; } DameLogosComp() { return this.imagenesComplementos; } CargarLogos(response: Response, idconte: string) { const blob = new Blob([response.blob()], {type: ’image/jpg’}); const reader = new FileReader();
reader.addEventListener(’load’, () => { if (idconte === ’Pelos’) { // console.log(’No s´ e si entra’); this.imagenesPelos.push(reader.result.toString()); } if (idconte === ’Ojos’) { this.imagenesOjos.push(reader.result.toString()); console.log(this.imagenesOjos); } if (idconte === ’Complementos’) { this.imagenesComplementos.push(reader.result.toString()); console.log(this.imagenesComplementos); } }, false); if (blob) { reader.readAsDataURL(blob); } } GuardarPelo(matricula: Matricula, p1: string): Observable<Matricula> { console.log(p1); matricula.URLpelo = p1; console.log(’He llegado al servicio’); console.log(’http://localhost:3000/api/matriculas/’ + matricula.id); return this.http.put<any>(’http://localhost:3000/api/matriculas/’ + matricula.id, matricula); } GuardarOjos(matricula: Matricula, p2: string): Observable<Matricula> { matricula.URLojos = p2; return this.http.put<any>(’http://localhost:3000/api/matriculas/’ + matricula.id, matricula); } GuardarComp(matricula: Matricula, p3: string): Observable<Matricula> { matricula.URLcomplemento = p3; return this.http.put<any>(’http://localhost:3000/api/matriculas/’ + matricula.id, matricula); } GuardarBoca(matricula: Matricula, p4: string): Observable<Matricula> {
matricula.URLboca = p4; return this.http.put<any>(’http://localhost:3000/api/matriculas/’ + matricula.id, matricula); } GuardarP1(matricula: Matricula, valorp1: boolean): Observable<Matricula> { matricula.pelo = valorp1; return this.http.put<any>(’http://localhost:3000/api/matriculas/’ + matricula.id, matricula); } GuardarP2(matricula: Matricula, valorp2: any): Observable<Matricula> { matricula.ojos = valorp2; return this.http.put<any>(’http://localhost:3000/api/matriculas/’ + matricula.id, matricula); } GuardarP3(matricula: Matricula, valorp3: any): Observable<Matricula> { matricula.complemento = valorp3; return this.http.put<any>(’http://localhost:3000/api/matriculas/’ + matricula.id, matricula); } GuardarP4(matricula: Matricula, valorp4: any): Observable<Matricula> { matricula.verclase = valorp4; return this.http.put<any>(’http://localhost:3000/api/matriculas/’ + matricula.id, matricula); } MuestraFicheros(): Observable<Container[]> { return this.http.get<Container[]>(this.APIPermisos + ’/files’); } GuardaFicheroPermiso1(clase: Clase, archivo: string): Observable<any> { clase.p1 = archivo; return this.http.put<any>(this.APIClases + ’/’ + clase.id, clase); } GuardaFicheroPermiso2(clase: Clase, archivo: string): Observable<any> { clase.p2 = archivo; return this.http.put<any>(this.APIClases + ’/’ + clase.id, clase); } GuardaFicheroPermiso3(clase: Clase, archivo: string): Observable<any> { clase.p3 = archivo; return this.http.put<any>(this.APIClases + ’/’ + clase.id, clase);