Desarrollo de una aplicación educativa para aprender Python

Desarrollo de una aplicación educativa para aprender Python Fabian Bofill Diéguez Grado de Ingeniería del software Facultad de Informática Universidad Complutense de Madrid Curso 2020-2021 Director: Antonio Sarasa Cabezuelo 1 Development of an educational application to learn Python Fabian Bofill Diéguez Grado de Ingeniería del software Facultad de Informática Universidad Complutense de Madrid Curso 2020-2021 Director: Antonio Sarasa Cabezuelo 2 A mis padres que más que apoyo son impulso. 3 AGRADECIMIENTOS En primer lugar, dar las gracias a mi director Antonio Sarasa Cabezuelo, su guía y tutela durante el desarrollo de este trabajo tienen un valor incalculable. Los resultados obtenidos no serían posibles sin su ayuda. Así mismo agradecer a mis padres Guillermo y Elvia todo el apoyo que me han brindado durante todo este proceso. Cuando mi motivación no era suficiente siempre he contado con la suya. También agradecer a mi novia Paloma por hacer más fácil todo, acompañarme y por el apoyo moral que me ha dado. 4 RESUMEN El proyecto consiste en una herramienta que permite generar cursos y caminos para el aprendizaje de un lenguaje de programación. Los caminos automatizan el contenido acorde a las evaluaciones obtenidas en los cursos. La aplicación está contextualizada dentro del marco de las herramientas de aprendizaje móvil y traslada la mecánica de los juegos a un entorno educativo con el fin de conseguir mejores resultados. Mediante estas técnicas se busca aumentar la motivación y la participación durante la experiencia de aprendizaje. Para la implementación, se ha desarrollado una aplicación web desde la cual se administrará el funcionamiento general. También se ha implementado una aplicación móvil que utiliza un servicio REST para obtener la información. Palabras clave Herramienta aprendizaje, cuestionarios, creación de cursos, aplicación web, aplicación móvil, API REST. 5 SUMMARY The project is to build a tool that allows generating courses and itineraries for learning a programming language. The itineraries automate the content delivered according to the scores obtained in the courses. The application falls within the framework of mobile learning tools and transfers the mechanics of games to an educational environment in order to achieve better results. These techniques seek to increase motivation and participation during the learning experience. For implementation, a web application has been developed from which the general operation will be managed. A mobile application that uses a REST service to obtain the information has also been implemented. Keywords Learning tool, quizzes, course creation, web application, mobile application, REST API. 6 RESUMEN 3 Palabras clave 3 SUMMARY 4 Keywords 4 Índice de figuras y tablas 8 1. Introducción 10 1.1. Motivación 10 1.2. Objetivos 10 1.3. Estructura de la memoria 11 1. Introduction 12 1.1. Motivation 12 1.2. Objectives 12 1.3. Memory structure 13 2. Estado del arte 14 2.1. Kahoot! 14 2.2. Duolingo 15 2.3. Socrative 15 2.4. Trivinet 16 3. Tecnología empleada 17 3.1. Herramientas del cliente 17 3.1.1. HTML5 17 3.1.2.3. CSS3 17 3.1.3. Bootstrap 4 18 3.2. Herramientas del servidor 18 3.2.1. Node.JS 18 3.2.2. NPM 19 3.2.3. Express 19 3.2.4. EJS 19 3.2.5. Bcrypt 19 3.2.6. Retrofit 20 3.3. Persistencia de la información 20 3.3.1. MongoDB 20 3.4. Otras herramientas 20 3.4.1. Android Studio 20 3.4.2. Git 21 3.4.3. Visual Studio Code 21 4. Casos de uso 21 4.1. Actores de la aplicación 21 4.2. Casos de uso asociados al alumno 21 4.3. Casos de uso asociados al profesor. 23 7 4.4. Casos de uso comunes a varios actores. 27 5. Modelo de datos 32 5.1. Modelo ER 32 5.2. Implementación de la base de datos. 33 5.2.1. Users 33 5.2.2. Cursos 34 5.2.3. Pregunta 34 5.2.4. Completados 35 5.2.5. Sessions 35 6. Arquitectura de la aplicación 36 7. Diseño de la aplicación 38 7.1. Colores y tipografías 38 7.2. Funcionalidad de la aplicación web 39 7.2.1. Funcionalidades web 39 7.2.1.1. Gestión de cursos 39 7.2.1.2. Creación de un curso 40 7.2.1.3. Ver ranking 42 7.2.1.4. Ver perfil de usuario. 43 7.2.1.4. Opciones de la aplicación 44 7.2.1.5. Editar usuario 44 7.2.1.6. Eliminar usuario 46 7.2.1.7. Gestión de curso 47 7.2.1.8. Publicar o despublicar curso 47 7.2.1.9. Estadísticas de curso 48 7.2.1.10. Editar curso 48 7.2.1.11. Eliminar curso 49 7.2.1.12. Crear pregunta 50 7.2.1.13. Gestión de preguntas 52 7.2.1.14. Editar preguntas 52 7.2.1.15. Eliminar preguntas 53 7.2.1.16. Registro de un usuario 54 7.2.1.17. Inicio de sesión 55 7.3. API REST 55 7.4. Aplicación Android 57 7.4.1. Inicio de sesión y registro. 57 7.4.2. Pantalla principal aplicación móvil 59 7.4.3. Iniciar curso 60 7.4.4. Finalizar curso 61 7.4.5. Opciones de cuenta aplicación móvil 64 7.4.6. Resultados aplicación móvil 65 7.4.7. Gestión de las peticiones HTTP en la aplicación móvil. 66 8 8. Conclusiones y trabajo futuro 69 8.1 Conclusiones 69 8.2 Trabajo futuro 69 8. Conclusions and future work 70 8.1. Conclusions 70 8.2. Future work 70 BIBLIOGRAFÍA 71 ANEXOS 73 ANEXO I: GUÍA DE USO. 73 1. Aplicación WEB. 73 1.1. Registro de profesor e inicio de sesión. 73 1.2. Gestión de cursos. 75 1.3. Gestión de preguntas. 77 1.4. Publicar cursos. 79 1.5. Ranking y perfil de usuarios. 80 2. Aplicación Móvil. 81 2.1. Registro de profesor e inicio de sesión. 81 2.2. Completar un curso. 82 2.3. Ver resultados. 86 2.3. Editar o eliminar cuenta. 86 ANEXO II: GUÍA DE INSTALACIÓN. 87 Aplicación Web y Servidor 88 Aplicación Móvil (Cliente) 89 9 2. Estado del arte En este capítulo se recogen las características más importantes de algunos productos similares en el mercado actual. Se analizan productos con características similares. Deben ser aplicaciones que utilicen mecánicas de juego y se encuentren en el marco del M-Learning (Mobile-Learning), es decir, están destinadas al aprendizaje. El M-learning es una rama del E-learning que aprovecha todas las posibilidades de los dispositivos móviles para aprender sin necesidad de una ubicación o momento específico. En este sentido, la interacción y retroalimentación ocurren de forma inmediata. A continuación se muestran algunos ejemplos de aplicaciones de este tipo. 2.1. Kahoot! Es una plataforma de aprendizaje basada en el juego que facilita la creación, compartición y resolución de cuestionarios de evaluación. Está disponible en app y versión web.[1] Una vez registrado en la plataforma, el profesor crea un concurso con cuestionarios donde los alumnos son los concursantes. Además de los cuestionarios creados por el profesor, éste podrá disponer de un repositorio de cuestionarios creados por otros usuarios. Los alumnos podrán acceder al cuestionario a través de un código pin facilitado por el profesor. Una vez acceden, eligen su nombre de usuario y contestan a las distintas preguntas a través de un dispositivo móvil. Al finalizar se genera un ranking con las puntuaciones obtenidas por los alumnos. Las puntuaciones dependen de la cantidad de respuestas acertadas y la velocidad de respuesta. La aplicación permite exportar los resultados a excel o Google Drive. [2] Figura 1. Captura de pantalla de Kahoot!. 16 2.2. Duolingo Plataforma destinada al aprendizaje de idiomas utilizando recursos de juegos. Es la aplicación de educación más descargada a nivel mundial. [3] Además de su versión web, la plataforma cuenta con aplicación para Android, IOS y Windows Phone. Una vez registrado en la aplicación se selecciona el idioma que queremos aprender. A 30 de junio de 2020 la aplicación cuenta con 38 idiomas posibles. Número que aumenta constantemente gracias a su incubadora de idiomas. Mediante distintas actividades (construir oraciones, emparejar palabras, reconocer sonidos, etc) que se apoyan en imágenes, audios y traducciones se aprende el significado de un gran número de oraciones de forma intuitiva. Los progresos de las distintas unidades se visualizan de forma gráfica que indica el grado de dominio de la unidad. Duolingo registra los contenidos con más errores para ayudar a reforzarlos. [4] Figura 2. Captura de pantalla de Duolingo. 2.3. Socrative Herramienta cuya finalidad es el soporte en el aula. Por ello, puede ser utilizado para feedbacks, evaluaciones mediante quiz.[5] Socrative cuenta con aplicación web y móvil. Su funcionamiento es similar al de las aplicaciones mencionadas anteriormente. Una vez registrado en la aplicación el profesor podrá crear o importar los exámenes (Quiz). Dentro del examen se crean preguntas, a 17 de junio de 2020 cuenta con tres formatos de preguntas, verdadero o falso, opción múltiple y respuesta corta. A estas preguntas se pueden añadir imágenes de apoyo. El examen creado se comparte con los alumnos quienes contestarán una pregunta a la vez a su propio ritmo. Cuando se han contestado todas el alumno envía las respuestas y obtiene información instantánea del resultado. 17 La aplicación cuenta con otros modos de uso, como la carrera espacial donde los alumnos trabajan en equipo incentivando la colaboración. También permite al profesor lanzar una pregunta única en un momento puntual sin tener que generar un examen. Figura 3. Captura de pantalla de Socrative. 2.4. Trivinet Es un tivia online creada por un profesor con la idea de utilizar esta herramienta como recurso didáctico que permita a sus alumnos aprender jugando.[6] Trivinet también cuenta tanto con aplicación web como móvil. Esta cuenta con un único formato de pregunta, opción múltiple. La aplicación permite crear grupos y crear preguntas dentro de los grupos. Según los resultados se genera un ranking de los participantes. Los grupos generados por la comunidad de Triviner pueden ser clonados para utilizar como base las preguntas generadas en el grupo original y ampliarlas según la necesidad del administrador del grupo clonado. Figura 4. Captura de pantalla de Trivinet. 18 3. Tecnología empleada En este capítulo se van a describir las herramientas tecnológicas utilizadas en el desarrollo del proyecto. 3.1. Herramientas del cliente Para la capa de presentación de la interfaz web se ha utilizado HTML5, CSS3 y Bootstrap 4. 3.1.1. HTML5 HTML (HyperText Markup Language) es un lenguaje de marcado para el desarrollo de páginas web. Define una estructura básica y un código para indicar el contenido de una página web. Esto se genera mediante etiquetas de marcado conocidas como tags. HTML5 [7] es la última versión de este lenguaje de marcado. Esta versión establece un conjunto de nuevos elementos y atributos con significado semántico que manifiestan las nuevas necesidades de las páginas web modernas. Algunos de estos elementos son las etiquetas video,figure ysection. Además de estas etiquetas en esta versión el lenguaje proporciona mecanismos de conexión a servidores de formas nuevas e innovadoras. 3.1.2.3. CSS3 CSS [8] (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de una página web. Una hoja de estilo CSS se compone de reglas que modifican la manera en que un documento, normalmente HTML, es presentado. Una regla CSS se compone de un selector, que seleccionará los elementos HTML que se actualizarán a través de una serie de propiedades. Está diseñado principalmente para marcar la separación del contenido, indicado por el código HTML y la presentación de este. Esto hace posible que un mismo documento HTML se pueda presentar con estilos distintos para diferentes métodos de renderizado como puede el tamaño de pantalla. CSS funciona con un esquema prioritario que determina qué reglas se aplican si más de una coincide para un elemento en particular. Estas reglas se aplican mediante un sistema de cascada, de modo que las prioridades son calculadas y asignadas a las reglas, así que los resultados son predecibles. 3.1.3. Bootstrap 4 Bootstrap 4 [9] es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño 19 con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end. Una de las características claves de Bootstrap es el uso de un sistema de grid de doce columnas donde se inserta el contenido. Esta característica es fundamental para que los diseños web sean adaptables (responsive) entre distintos dispositivos con distintos tamaños de pantalla. Bootstrap 4 es la última versión de este framework. Algunas de las características principales de esta versión son el nuevo sistema de grid para pantallas más pequeñas, nuevas plantillas de elementos HTML y CSS. 3.2. Herramientas del servidor 3.2.1. Node.JS Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación JavaScript. Ideado como un entorno de ejecución de JavaScript orientado a eventos asíncronos, Node.js está diseñado para crear aplicaciones network escalables. Esto contrasta con el modelo de concurrencia más común de hoy en día, en el que se emplean hilos del Sistema Operativo [10]. Node.js permite gestionar un desarrollo homogéneo entre cliente y servidor. Al ser combinado con una base de datos documental permite trabajar en un entorno de desarrollo JavaScript unificado. Las interfaces de programación de aplicaciones (API) de Node.js son asíncronas, esto significa que los servidores Node no esperan la respuesta de una API. El servidor continúa con la siguiente API después de hacer la llamada y el sistema de notificaciones de eventos de node ayuda al servidor a dar la respuesta a la llamada API anterior. Node.js se encuentra bajo licencia MIT. 3.2.2. NPM Es el sistema de gestión de paquetes por defecto para Node.js [11]. Consiste en una interfaz de línea de comandos y una base de datos online con paquetes públicos y privados. NPM consiste en tres componentes distintos. La web, desde donde se encuentran los paquetes, se estructuran organizaciones para administrar acceso público o privado a estos paquetes. La interfaz de línea de comandos (CLI) es el medio que tienen los desarrolladores para interactuar con NPM. Y el registro es una base de datos pública de software Javascript y metainformación del mismo. 20 3.2.3. Express También conocido como Express.js es una infraestructura de aplicaciones web Node.js. Diseñado para construir aplicaciones web y APIs [12]. Express permite construir aplicaciones web en un periodo corto de tiempo ya que brinda mecanismos para facilitar esta construcción. Proporciona un enrutamiento simple para las solicitudes realizadas por los clientes. También proporciona un middleware que se encarga de tomar decisiones para dar las respuestas correctas a estas solicitudes. 3.2.4. EJS Lenguaje de plantillas que permite generar páginas HTML utilizando JavaScript [13]. Mediante una sintaxis sencilla de etiquetas EJS combinado con HTML podrá cargar contenido de forma dinámica en la página. Proporciona además mecanismos de control de flujo. EJS compila y renderiza de forma muy rápida. Esto es posible gracias a la caché estática de JavaScript que evita que haya que compilar la página cada vez que se renderiza. 3.2.5. Bcrypt Es una librería que permite aplicar funciones hash a las contraseñas para almacenar estas de forma segura [14]. Bcrypt provee mecanismos sencillos para almacenar nuestras contraseñas de forma segura y no en texto plano. Además utiliza técnicas de criptografía como la extensión de clave. 3.2.6. Retrofit Es un cliente REST para Android y Java [15]. Permite hacer peticiones GET, POST, PUT, PATCH, DELETE y HEAD además de gestionar diferentes tipos de parámetros y parsear la respuesta a un Objeto Java de forma automática. Mediante Retrofit y una vez definido el modelo de clases en formato JSON y la interfaz de operaciones HTTP se pueden hacer peticiones a un servidor desde un dispositivo Android. 3.3. Persistencia de la información 3.3.1. MongoDB Es un sistema de base de datos NoSQL, orientado a documentos y de código abierto.En lugar de guardar los datos en tablas, tal y como se hace en las bases de 21 datos relacionales, MongoDB guarda estructuras de datos BSON (una especificación similar a JSON) con un esquema dinámico, haciendo que la integración de los datos en ciertas aplicaciones sea más fácil y rápida [16]. En todos los documentos se almacenan campos generados por MongoDB ●_id: Identificador único del documento generado por MongoDB. ● _v: Campo de versión del documento. Contiene la revisión interna del documento. Arquitectura de la aplicación 3.4. Otras herramientas 3.4.1. Android Studio Entorno de desarrollo integrado oficial para la plataforma Android [17]. Además del potente editor de códigos y las herramientas para desarrolladores de IntelliJ, Android Studio ofrece incluso más funciones que aumentan tu productividad cuando desarrollas apps para Android, como las siguientes [18]: ● Un sistema de compilación flexible basado en Gradle ● Un emulador rápido y cargado de funciones ● Un entorno unificado donde puedes desarrollar para todos los dispositivos Android ● Aplicación de cambios para insertar cambios de códigos y recursos a la aplicación en ejecución sin reiniciar la aplicación ● Variedad de marcos de trabajo y herramientas de prueba ● Herramientas de Lint para identificar problemas de rendimiento, usabilidad y compatibilidad de la versión. 3.4.2. Git Sistema de control de versiones utilizado[19]. Es una herramienta útil cuando los requisitos del proyecto cambian, en ocasiones será necesario volver a versiones anteriores del código. También permite explorar distintas ramas de desarrollo de forma independiente entre sí que pueden ser fusionadas posteriormente. 3.4.3. Visual Studio Code Visual Studio Code [20] ha sido el editor de código utilizado para la parte web del proyecto. Incluye soporte para la depuración, control de versiones y resaltado de sintaxis.Incluye soporte incorporado para JavaScript y Node.js 22 4. Casos de uso En este capítulo se describen los casos de uso definidos para la aplicación desarrollada en este trabajo de fin de grado. Los casos de uso se agrupan de acuerdo a la funcionalidad asociada a cada actor. 4.1. Actores de la aplicación Los actores definidos para los casos de uso que se muestran son: ● Profesores: Serán los encargados de crear, editar o eliminar los cursos de la aplicación y generar los caminos. Además podrán visualizar información de todos los alumnos ● Alumnos: Los alumnos podrán realizar los cursos y visualizar la información de sus resultados. No podrán editar el contenido de los cursos ni visualizar resultados de otros alumnos. 4.2. Casos de uso asociados al alumno A continuación se van a mostrar los diferentes casos de uso definidos para el alumno y que se muestran en el diagrama de la figura 5. Figura 5. Casos de uso definidos para el actor alumno 23 CU-A01 Seleccionar curso Objetivos asociados Ejecuta la actividad correspondiente de un curso Entradas id_curso Salidas Confirmación de inicio de actividad Precondición ● El usuario debe haber iniciado sesión ● El curso debe existir. Secuencia normal 1. Muestra la pantalla principal. 2. El usuario selecciona el curso a ejecutar. 3. El sistema redirige al usuario a la pantalla del curso seleccionado mostrando la la pregunta correspondiente. Postcondición La actividad se debe estar ejecutando CU-A02 Contestar pregunta Objetivos asociados Contesta una pregunta de la actividad en ejecución. Entradas id_pregunta Salidas Mensaje de realimentación Precondición ● El usuario debe haber iniciado sesión ● Se debe estar ejecutando una actividad Secuencia normal 1. Muestra la pantalla de la pregunta. 2. El usuario selecciona la respuesta 3. El sistema redirige al usuario a la siguiente pregunta. Postcondición Se ha contestado la pregunta 24 4.3. Casos de uso asociados al profesor. A continuación se van a mostrar los diferentes casos de uso definidos para el profesor. En la figura 6 se muestra el diagrama de casos de uso asociado al actor profesor. Figura 6. Casos de uso definidos para el actor profesor 25 CU-C05 Eliminar cuenta Objetivos asociados Dar de baja a un usuario del sistema Entradas id_usuario Salidas Usuario dado de baja Precondición ● El usuario debe existir ● La sesión debe estar iniciada Secuencia normal 1. El usuario accede a la página de opciones 2. Solicita la baja de la cuenta 3. Vuelve a introducir la contraseña 4. Se redirige a la página de inicio de sesión Postcondición La sesión debe quedar cerrada y el usuario eliminado Excepciones E1La contraseña introducida es incorrecta CU-C06 Ver tabla de puntuación Objetivos asociados Muestra una lista con los usuarios ordenados por puntuación. Entradas Salidas Lista de puntuación. Precondición ● La sesión debe estar iniciada Secuencia normal 1. El usuario accede a la página principal 2. Selecciona la opción de ver lista de puntuación 3. Se redirige a la página de lista de puntuación Postcondición Se ha mostrado la tabla Excepciones 32 5. Modelo de datos En este capítulo se describe el modelo de datos definido para realizar la persistencia de la información gestionada por la herramienta. En la sección 1 se describe el modelo E-R del sistema y en la sección 2 se mostrará su implementación usando una base de datos NoSQL. 5.1. Modelo ER En la figura 8 se muestra el diagrama entidad-relación utilizado para modelar los datos de la aplicación. En este se presentan las entidades Usuario,Curso, Completados y Pregunta y las relaciones entre las mismas. Donde un usuario (alumno o profesor) podrá tener completados varios cursos y a su vez cada curso tendrá varios usuarios que lo hayan completado. Los profesores que lo crean, podrán editar o eliminar, y los alumnos únicamente para cumplimentar. Cada curso tendrá distintas preguntas. Figura 8. Diagrama entidad-relación. 33 5.2. Implementación de la base de datos. Para implementar el modelo E-R definido en la sección anterior se ha utilizado MongoDB. En la figura 9 se muestran las colecciones definidas. A continuación se procede a describir estas colecciones. Figura 9. Colecciones de la base datos. 5.2.1. Users En la figura 10 se muestra un ejemplo de documento visto desde MongoDB Compass.. Esta colección almacena la información de los usuarios. En la figura 4 se muestra un ejemplo de documento visto desde MongoDB Compass. Los campos que almacena esta colección son los siguientes: ●name: Nombre del usuario. ●email: Email del usuario. ●password: Contraseña del usuario codificada mediante una función hash ●points: Puntos totales del usuario, que va consiguiendo al completar cursos. Esta propiedad solo la tendrán los alumnos. ●desbloqueados: Array de referencias a cursos. Aquí se almacenan los cursos a los que el usuario tiene acceso. 34 Figura 10. Documento de la colección usuario en MongoDB Compass. 5.2.2. Cursos Se procede a detallar la información relativa a los cursos. En la figura 11 se muestra un ejemplo de documento visto desde MongoDB Compass. Los campos que almacena esta colección son los siguientes: ●name: Nombre del curso. ●description: Descripción corta del curso. ●level: Nivel del curso. Se puede seleccionar entre las opciones principiante, Intermedio o avanzado. ●aUnlock: Guarda una referencia al curso que se desbloquea si se aprueba este. ●bUnlock: Guarda una referencia al curso que se desbloquea si se suspende este. ●unlocked: Booleano que dice si este campo estará desbloqueado desde su creación sin necesidad de que se desbloquee aprobando otro curso. ●pregunta: Array que almacena las referencias a las preguntas del curso. Figura 11. Documento de la colección curso en MongoDB Compass. 5.2.3. Pregunta A continuación se especifica la información almacenada en los documentos pregunta. En la figura 12 se muestra un ejemplo de documento visto desde MongoDB Compass. Los campos que almacena esta colección son los siguientes: 35 ●enunciado: Enunciado de la pregunta. ●opción 1: Primera opción de respuesta, en este se almacenará la respuesta correcta. ●opción2: Segunda opción de respuesta. ●opción3 : Tercera opción de respuesta. ●opción4 : Cuarta opción de respuesta. Figura 12. Documento de la colección pregunta en MongoDB Compass. 5.2.4. Completados La colección completados almacena la puntuación obtenida por cada usuario al completar cada curso. En la figura 13 se muestra un ejemplo de documento visto desde MongoDB Compass. Figura 13. Documento de la colección completados en MongoDB Compass. 5.2.5. Sessions Además de las entidades descritas en el diagrama entidad relación se utiliza una colección auxiliar para almacenar los datos relativos a las sesiones de los usuarios. En la figura 14 se muestra un documento de ejemplo. Figura 14. Documento de la colección sessions en MongoDB Compass. 36 6. Arquitectura de la aplicación En este capítulo se describe la arquitectura de la aplicación. En la primera sección se explica el modelo cliente-servidor y como se ha utilizado en el desarrollo de la aplicación, y en la sección 2 se describen los patrones de diseño empleados. Para desarrollar la aplicación se ha empleado un modelo cliente-servidor que se caracteriza porque las tareas se reparten entre los proveedores de recursos o servicios, llamados servidores, y los demandantes, llamados clientes. Un cliente realiza peticiones a otro programa, el servidor, quien le da respuesta [20]. En la figura 8 se muestra el diseño de la arquitectura de la aplicación. El navegador y/o la aplicación móvil ejecutan la parte cliente de la aplicación realizando peticiones HTTP a los servicios que expone la API REST, la cual de forma oculta para el cliente procesa las peticiones, obtiene los datos necesarios de la base de datos y envía la respuesta de vuelta al cliente. Figura 15. Esquema de la arquitectura del sistema. El MVC (Modelo Vista controlador) es un patrón de arquitectura de software, que separa los datos y principalmente lo que es la lógica de negocio de una aplicación de su representación y el módulo encargado de gestionar los eventos y las comunicaciones [21]. 37 Se ha aplicado este patrón dentro del marco de Express, donde el modelo es lo que manejará los datos de la aplicación, almacenados en MongoDB. Además Mongoose nos facilita las operaciones con estos datos. La vista generará información en la pantalla. Express nos proporciona métodos para encapsular las respuestas y enviarlas a las vistas. La función de controlador la hacen las clases del middleware de rutas. Que obtienen la información de las vistas, solicitan los datos y encapsulan y devuelven las respuestas. 38 7. Diseño de la aplicación En este capítulo se describirán aspectos acerca del diseño y la implementación de las funcionalidades más significativas del proyecto, tanto de la aplicación web, la API implementada y la aplicación móvil. El propósito ha sido conseguir un diseño simple y atractivo. Que a la vez fuese coherente entre las distintas plataformas. 7.1. Colores y tipografías Como se ha comentado con anterioridad para facilitar el desarrollo de las interfaces de usuario se ha utilizado Bootstrap Para definir los colores y tipografías se ha utilizado un tema desarrollado para bootstrap que se encuentra bajo licencia MIT [22]. En la figura 16 se muestra el código de referencia a estas bibliotecas y temas. Figura 16. Código de referencias CSS. Este tema utiliza como tipografía principal la fuente ‘Lato’ Figura 17. Tipografía utilizadas en la aplicación. El tema también define varios colores que se muestran a continuación. Figura 18. Colores de la aplicación. 39 7.2. Funcionalidad de la aplicación web En este apartado se procederá a describir las funcionalidades implementadas. Como el sistema tiene dos modos de uso separados, aplicación web y aplicación móvil, se describirán por separado. 7.2.1. Funcionalidades web Las funcionalidades de la web están relacionadas directamente con los casos de uso asociados a los profesores. 7.2.1.1. Gestión de cursos Cuando un profesor se autentica en el sistema, accede a la pantalla principal o dashboard (Figura 19) en la que se muestran los cursos creados. Así mismo puede crear nuevos cursos, ver el ranking de usuarios, acceder a las opciones de la aplicación o cerrar sesión. Figura 19. Pantalla principal. Para mostrar todos los cursos se aprovechan las ventajas de EJS (capítulo 3.2.4) y poder ejecutar el código desde la plantilla HTML (figura 20). La variable curso en este caso se define en el controlador, evitando el error de acceder al modelo desde las vistas (figura 21). 40 Figura 20. Código para mostrar cursos en el dashboard. Se puede observar en el código que estos cursos contienen enlaces a la página del curso. Figura 21. Variable cursos en el controlador. 7.2.1.2. Creación de un curso Una tarea fundamental de la aplicación es la creación de cursos. Para crear un curso, desde la pantalla principal (Figura 19) se accede mediante el botón ‘Crear curso’ al formulario de creación de cursos (Figura 22). 41 autenticado en la aplicación y se elimina y se cierra la sesión de la aplicación (Figura 36). Figura 36. Código de eliminar usuario. 7.2.1.7. Gestión de curso La opción a la que es posible acceder desde la pantalla principal (Figura 19) es a un curso. Cuando se accede a un curso se muestra la pantalla de gestión del curso (Figura 37). Desde aquí se ven las preguntas creadas dentro del curso, además se puede crear más preguntas, ver estadísticas, publicar o despublicar, editar o eliminar el curso. Figura 37. Pantalla de gestión de curso. 7.2.1.8. Publicar o despublicar curso Al crear un curso este por defecto no será aún accesible. Se requiere que el profesor lo publique. Este paso permite crear las preguntas y definir el curso sin que sea visible para los alumnos. En la pantalla de gestión de curso (Figura 37) se puede publicar un curso que no esté publicado o en su defecto despublicar uno que ya estuviese publicado. La opción correspondiente aparecerá automáticamente dependiendo del estado actual del curso (Figura 38). Como se ve posteriormente en la aplicación móvil solo se muestran los cursos publicados. Figura 38. Código para mostrar el botón de publicar o despublicar curso. 48 7.2.1.9. Estadísticas de curso Desde la pantalla de gestión del curso (Figura 37) se puede acceder a las estadísticas de este (Figura 39). En esta pantalla se muestra una lista de todos los alumnos que han completado el curso y la nota que obtuvieron, además de la nota media del curso. Figura 39. Estadísticas del curso. La información que se muestra en esta pantalla se obtiene de la colección Completados. El código de la figura 40 muestra la implementación de esta pantalla. Figura 40. Código para mostrar estadísticas del curso. 7.2.1.10. Editar curso Si en la pantalla de gestión de curso se opta por seleccionar la opción editar curso, aparecerá un formulario similar al de la creación de curso (Figura 22). En este formulario de edición (Figura 410) aparecen los datos del curso que estamos editando a modo de marcador de posición (placeholder). Al igual que en la edición de usuario (Capítulo 7.2.1.5) no es necesario rellenar el formulario completo, solo los datos a modificar. 49 Figura 41. Pantalla de editar curso. 7.2.1.11. Eliminar curso Desde la pantalla de gestión del curso (Figura 37) también es posible eliminar un curso. Al eliminar un curso se eliminan las referencias a este para los usuarios que lo habían desbloqueado. Lo que significa que no podrán volver a realizarlo. La nota obtenida en dicho curso se mantendrá como parte de los puntos totales del alumno. Además en el listado de cursos completados por el alumno seguirá apareciendo dicho curso. 50 Figura 42. Código de eliminar curso. 7.2.1.12. Crear pregunta Como se ha visto en el Capítulo 7.2.1.7 las preguntas están asociadas a un curso, por lo cual se podrán visualizar dentro de la información relativa a los cursos (Figura 37). Al elegir crear pregunta la aplicación permite generar preguntas de tipo test con 4 opciones para elegir mediante un formulario (Figura 43). 51 Figura 43. Pantalla de creación de preguntas. Al crear una pregunta se añade una referencia dentro del array de preguntas del curso desde el cual se está creando la pregunta. Figura 44. Código de creación de preguntas. 52 7.2.1.13. Gestión de preguntas Desde la pantalla de gestión de curso (Figura 37) se puede acceder a las preguntas del mismo. Esta opción muestra la pantalla de gestión de preguntas (Figura 45). Desde esta pantalla es posible editar o eliminar la pregunta. Figura 45. Pantalla de gestión de preguntas. 7.2.1.14. Editar preguntas Si se accede a la opción de editar pregunta aparecerá un formulario similar al de la creación de pregunta (Figura 43). En este formulario de edición (Figura 46) aparecen los datos de la pregunta que estamos editando a modo de marcador de posición (placeholder). Al igual que en la edición de usuario (Capítulo 7.2.1.5) no es necesario rellenar el formulario completo, solo los datos a modificar. 53 Figura 46. Pantalla de edición de pregunta. 7.2.1.15. Eliminar preguntas Desde la pantalla de gestión de pregunta(Figura 45) también es posible eliminar una pregunta. Al eliminar una pregunta se eliminan las referencias de esta dentro del curso en el que estaba. Figura 47. Código de eliminar pregunta. 54 7.2.1.16. Registro de un usuario Para poder usar la aplicación, los usuarios deben registrarse. Para ello desde la pantalla de login pulsará sobre el enlace correspondiente y les conducirá a la pantalla de creación de cuenta (Figura 48). Mediante este proceso se solicitan datos al usuario para luego almacenarlos en la base de datos. Los usuarios registrados desde la aplicación web obtendrán el rol de profesores. Solo los profesores deben llegar a este formulario de registro. El proceso cuenta con varios niveles de verificación de datos. En primer lugar se comprueba que se han rellenado todos los datos obligatorios. Se verifica que los dos campos de contraseña coinciden para evitar errores. Además se requiere que la contraseña tenga más de 6 caracteres. Posteriormente se comprueba que los datos que identifican al usuario no coinciden con los de otro usuario registrado en el sistema. Si todas estas verificaciones proceden de forma satisfactoria, se continúa a encriptar la contraseña del usuario para no almacenarla como texto plano en base de datos, añadiendo así una capa de seguridad (Figura 49). Figura 48. Pantalla de creación de cuenta. 55 Figura 49. Código de encriptación de la contraseña. 7.2.1.17. Inicio de sesión Para acceder a la aplicación, el usuario utiliza la pantalla de inicio de sesión o login que se muestra en la figura 50. Figura 50. Pantalla de inicio de sesión. 7.3. API REST En este apartado se especifica el diseño de la API REST que se ha implementado. Las funciones implementadas satisfacen las necesidades de obtener datos de la aplicación móvil. Desde esta se utiliza Retrofit para hacer peticiones HTTP y obtener la información necesaria. Una de las funciones principales de la API es obtener los cursos que tiene desbloqueado un usuario. Para posteriormente poder mostrarlos en la aplicación móvil (Figura 50). 56 ENDPOINT GET POST PUT DELETE api/registerUser X api/login X X X api/getCursos X X X api/getCursosCompletados X X api/getPreguntas X X X api/endQuiz X Tabla 1. Endpoints API Esta función envía una petición POST al servidor con el id del usuario deseado y este devuelve el listado de cursos que tiene desbloqueados. Podemos ver en la figura 51 la implementación en el servidor de la función y en la figura 52 la respuesta del mismo. Figura 51. Código API para obtener los cursos de un usuario. 57 Figura 58. Código de finalización de curso. Figura 59. Código de finalización de curso API. 64 7.4.5. Opciones de cuenta aplicación móvil Desde la pantalla principal (Figura 55) se puede acceder a las opciones de la cuenta pulsando en el botón de la esquina superior derecha. En esta pantalla de opciones (Figura 60) se puede editar o eliminar la cuenta del usuario actual. Para editar la cuenta tendremos cuadros de texto donde aparecen los datos del usuario. Se modifican los que se desee cambiar y se pulsa en editar cuenta. Figura 60. Pantalla de opciones aplicación móvil. En cambio si lo que se desea es eliminar la cuenta al pulsar en el botón correspondiente aparece una pantalla de confirmación. Si se procede a eliminar, se cierra la sesión enviando al usuario a la pantalla de inicio de sesión y se elimina la cuenta del mismo. 65 7.4.6. Resultados aplicación móvil La última opción a la que se puede acceder desde la pantalla principal de la aplicación móvil (Figura 55) es a ver los resultados obtenidos hasta el momento. En la pantalla de resultados el usuario puede ver la puntuación total y cada curso que ha completado con la puntuación obtenida en el mismo (Figura 61). Figura 61. Pantalla de resultados aplicación móvil. Para obtener esta pantalla, al pulsar en resultados se inicia una actividad nueva en Android que realizará la petición adecuada y mostrará los resultados. En este caso los datos se obtienen de la colección completados. La llamada devuelve una lista de los cursos con sus puntuaciones (Figura 62). 66 Figura 62. Código petición de resultados aplicación móvil. 7.4.7. Gestión de las peticiones HTTP en la aplicación móvil. El funcionamiento de la aplicación móvil se basa en obtener los datos de la API y mostrarlos al usuario. A continuación se verá cómo se implementan estas peticiones. Primeramente se debe configurar Retrofit (Capítulo 3.2.6), que gestionará las peticiones HTTP con el servidor de la API. Además se necesita implementar las clases de modelo para poder serializar las respuestas. En la configuración de Retrofit se especifica la dirección del servidor donde se encuentra la API. En la figura 63 se puede apreciar dicha especificación, en este caso apuntando a una dirección local y al puerto que corresponda. Figura 63. Código de configuración de Retrofit. También se requiere la definición de los servicios de la API (Figura 64). En estas definiciones se especifican los parámetros de las peticiones y los tipos de datos que se reciben. 67 Figura 64. Código de cabecera de las peticiones desde Retrofit. Se deben implementar las clases de estos tipos de datos con sus correspondientes operaciones (Figura 65). Figura 65. Código de clases de Modelo en Android. Figura 66. Código gestión de las peticiones HTTP en Android. 68 Al lanzar una petición y una vez obtenida la respuesta el adaptador que se ha definido para Retrofit, en este caso Gson, una biblioteca que permite la serialización y deserialización de objetos Java y su representación JSON. Adapta la respuesta a objetos de las clases modelo definidas. De este modo se utilizan en la aplicación con objetos de usuario, cursos o preguntas. 69 8. Conclusiones y trabajo futuro 8.1 Conclusiones Durante este proyecto se ha desarrollado una herramienta que permite a profesores generar cursos y caminos para el aprendizaje de un lenguaje de programación. También permite a los alumnos utilizar estos cursos a través de una aplicación móvil que se puede catalogar en el ámbito de M-learning. Se ha procurado generar interfaces sencillas y fáciles de utilizar para ambos perfiles de usuario. Se han completado las funcionalidades que permiten al profesor la gestión de los cursos y preguntas de estos, creación, edición y modificación de ambos. De cara a los alumnos de han llevado a término las funcionalidades que permiten completar un curso contestando sus preguntas y así desbloquear cursos siguientes. Estas funcionalidades junto a las de gestión de usuario e inicio de sesión constituyen el núcleo del proyecto por lo que era fundamental su desarrollo. El poder acceder al ranking de alumnos cerraba las funcionalidades que pretendía el proyecto en su inicio. 8.2 Trabajo futuro Una vez completadas las funcionalidades especificadas en el trabajo, se plantean las siguientes líneas de trabajo futuras: ●Implementar un sistema de logros. Actualmente la aplicación tiene como recursos de gamificación el sistema de puntuación y los posibles caminos a desbloquear según las puntuaciones obtenidas en los cursos. Para ampliar estos recursos una mejora a desarrollar sería un sistema de logros que incite al alumno a participar de forma activa. ●Framework M-learning. El sistema actualmente permite generar cursos dentro de un mismo marco de conocimiento, Python en este caso. Una línea de trabajo futura sería la posibilidad de añadir una capa superior a estos cursos que englobe varios cursos, el sistema funcionara como un marco de trabajo para adaptar aplicaciones de m-learning a cualquier entorno de enseñanza. ●Distintos tipos de preguntas. Actualmente el sistema permite únicamente la creación de preguntas tipo test. Se plantea como mejora añadir distintos tipos de preguntas a nuestros cursos. ●Carga masiva de datos. A la conclusión de este proyecto el sistema solo permite la entrada de datos a través de los formularios implementados. Una mejora que se considera como desarrollo futuro es la de poder cargar en el sistema la información relativa a cursos y preguntas de forma masiva desde fuentes externas como pueden ser ficheros CSV u otro formato de datos. 70 8. Conclusions and future work 8.1. Conclusions During this project, a tool has been developed that allows teachers to generate courses and itineraries for learning a programming language. It also allows students to use these courses through a mobile app that can be cataloged in the field of M-learning. Efforts have been made to generate simple and easy-to-use interfaces for both user profiles. During the development of the project concepts and knowledge of software engineering, databases, web application development and mobile application development have been put into practice. 8.2. Future work Once the functionalities specified in the work have been completed, the following future lines of work are proposed: ●Implement an achievement system. Currently the application has as gamification resources the scoring system and the possible paths to unlock according to the scores obtained in the courses. To expand these resources, an improvement to be developed would be an achievement system that encourages the student to participate actively. ●M-learning Framework. The system currently allows to generate courses within the same knowledge framework, Python in this case. A future line of work would be the possibility of adding an upper layer to these courses that encompasses several courses, the system will function as a framework to adapt m-learning applications to any teaching environment. ●Different types of questions. Currently the system only allows the creation of multiple choice questions. It is proposed as an improvement to add different types of questions to our courses. ●Mass data loading. At the conclusion of this project, the system only allows data entry through the implemented forms. An improvement that is considered as a future development is to be able to load information related to courses and questions in bulk from external sources such as CSV files or another data format. 71 BIBLIOGRAFÍA [1] «Kahoot!». [En línea]. Disponible en: https://kahoot.com/what-is-kahoot/ Recuperado el día 17 del 06 de 2020 [2] «Kahoot! Wikipedia». [En línea]. Disponible en: https://es.wikipedia.org/wiki/Kahoot! Recuperado el día 17 del 06 de 2020 [3] «Duolingo». [En línea]. Disponible en: https://es.duolingo.com/ Recuperado el día 17 del 06 de 2020 [4] «Duolingo Wikipedia». [En línea]. Disponible en: https://es.wikipedia.org/wiki/Duolingo Recuperado el día 17 del 06 de 2020 [5] «Socrative». [En línea]. Disponible en: https://socrative.com/ Recuperado el día 17 del 06 de 2020 [6] «Trivinet». [En línea]. Disponible en: https://www.trivinet.com/es/trivial-online/acerca-de Recuperado el día 17 del 06 de 2020 [7] «HTML5»[En línea]. Disponible en: https://developer.mozilla.org/es/docs/HTML/HTML5 Recuperado el día 17 del 06 de 2020 [8] «CSS3»[En línea]. Disponible en: https://developer.mozilla.org/es/docs/Web/CSS Recuperado el día 17 del 06 de 2020 [9] «Bootstrap»[En línea]. Disponible en: https://es.wikipedia.org/wiki/Bootstrap_(framework) Recuperado el día 17 del 06 de 2020 [10] «Acerca de Node.js®». [En línea]. Disponible en: https://nodejs.org/es/about/ Recuperado el día 17 del 06 de 2020 [11] «Acerca de NPM». [En línea]. Disponible en: https://docs.npmjs.com/about-npm/ Recuperado el día 17 del 06 de 2020 72 [12] «Express.js». [En línea]. Disponible en: https://en.wikipedia.org/wiki/Express.js Recuperado el día 17 del 06 de 2020 [13] «EJS». [En línea]. Disponible en: https://ejs.co/ Recuperado el día 17 del 06 de 2020 [14] «Bcrypt.js». [En línea]. Disponible en: https://www.npmjs.com/package/bcrypt Recuperado el día 17 del 06 de 2020 [15] «Retrofit»[En línea]. Disponible en: https://square.github.io/retrofit/ Recuperado el día 17 del 06 de 2020 [16] «MongoDB» [En línea]. Disponible en: https://es.wikipedia.org/wiki/MongoDB Recuperado el día 17 del 06 de 2020 [17] «Android Studio»[En línea]. Disponible en: https://es.wikipedia.org/wiki/Android_Studio Recuperado el día 17 del 06 de 2020 [18] «Android Studio »[En línea]. Disponible en: https://developer.android.com/studio/intro Recuperado el día 17 del 06 de 2020 [19] «GIT»[En línea]. Disponible en: https://git-scm.com/about Recuperado el día 17 del 06 de 2020 [20] «Visual Studio Code»[En línea]. Disponible en: https://code.visualstudio.com/docs Recuperado el día 17 del 06 de 2020 [21] «Mongoose»[En línea]. Disponible en: https://mongoosejs.com/docs Recuperado el día 17 del 06 de 2020 [22] «Cliente-servidor»[En línea]. Disponible en: https://es.wikipedia.org/wiki/Cliente-servidor Recuperado el día 17 del 06 de 2020 [23] «Tema para Bootstrap»[En línea]. Disponible en: https://bootswatch.com/superhero/ Recuperado el día 17 del 06 de 2020 73 Figura 77. Pantalla de gestión de preguntas. 1.4. Publicar cursos. Una vez creadas las preguntas dentro de los cursos se pueden publicar los mismos. Para ello desde la pantalla de gestión de cursos (Figura 76) habrá que seleccionar la opción Publicar curso. Figura 78. Pantalla de curso publicado. Los cursos publicados se distinguen en la pantalla principal porque se muestran con más opacidad que los no publicados. 80 1.5. Ranking y perfil de usuarios. Desde la pantalla principal se puede acceder a la opción ranking (Figura 79). Figura 79. Opción ranking. Esta opción muestra el listado de alumnos con sus puntuaciones en orden descendente (Figura 80). Figura 80. Pantalla ranking. 81 Al pulsar en el nombre de algún alumno se puede acceder al perfil de usuario de este (Figura 81). El perfil de usuario muestra los datos del usuario como Nombre o email y también la puntuación total y una lista con los cursos que ha realizado y la puntuación obtenida en estos. Figura 81. Pantalla perfil de usuario. Cuando se desee salir de la aplicación, desde cualquier pantalla se debe pulsar la opción cerrar sesión. 2. Aplicación Móvil. 2.1. Registro de profesor e inicio de sesión. Al iniciar la aplicación móvil se muestra la pantalla de inicio de sesión (Figura 82). Desde aquí para crear una cuenta nueva se ha de acceder a la opción crear cuenta. 82 Figura 82. Pantalla inicio móvil. Desde aquí se redirige la aplicación al formulario de crear cuenta desde el cual introduciendo todos los datos se crea una cuenta de alumno nueva. 2.2. Completar un curso. Al iniciar sesión se ve la pantalla principal de la aplicación móvil (Figura 83). En esta se muestran los cursos que tiene el usuario desbloqueados. De la pequeña estructura de árbol que se creo que el capítulo anterior se puede ver únicamente el curso que estaba marcado como desbloqueado de inicio. 83 Figura 83. Pantalla principal móvil. Para completar un curso se pulsa sobre él y automáticamente se lanza el cuestionario correspondiente (Figura 84). 84 Figura 84. Pantalla de pregunta móvil. Al terminar el cuestionario aparece la pantalla de puntuación. Pulsando finalizar en esta se vuelve a la pantalla principal pero esta vez estará desbloqueado el curso que corresponda según la puntuación obtenida (Figura 85). 85 Figura 85. Pantalla de inicio curso desbloqueado móvil. 86 2.3. Ver resultados. Desde la pantalla principal (Figura 83) se puede acceder también a la lista de resultados. Aquí se muestra un listado de los cursos completados y la puntuación obtenida en estos (Figuera 86). Figura 86. Pantalla de resultados móvil. 2.3. Editar o eliminar cuenta. Las opciones de modificación de cuenta son accesibles desde el botón de la parte superior derecha de la pantalla principal (Figura 85). Desde esta pantalla se puede modificar o eliminar la cuenta eligiendo la opción que corresponda (Figura 87). 87 Figura 87. Pantalla de opciones de cuenta móvil. ANEXO II: GUÍA DE INSTALACIÓN. La ejecución del proyecto requiere la instalación de algunas dependencias. Los dependencias que han de ser instaladas son: ● NodeJs ● Mongodb ● Android Studio Recomendable: ● Mongo Compass 88 Una vez instaladas las dependencias accederemos a los repositorios (Figura 49) en el botón Code es posible descargar el proyecto en un archivo ZIP o clonarlo desde una terminal de git con el comando git clone “direccion_del_proyecto” Figura 88: Repositorio del proyecto Después de descargar los proyectos y descomprimir los ficheros ZIP en el caso que fuese necesario, se podrá proceder a la ejecución de estos. Aplicación Web y Servidor Comenzaremos por lanzar el servidor web de Node. Desde una terminal de comandos y una vez ubicados en la carpeta del proyecto web, ejecutaremos la siguiente directiva: npm install Esta instalará todas las dependencias necesarias (no incluidas en el repositorio). En caso de que no esté lanzado el servidor de MongoDB lo lanzaremos. Si al instalar MongoDB hemos elegido que se instale como un servicio del sistema operativo se lanzará al iniciar el mismo, en caso contrario, para lanzar en Windows desde la dirección de instalación predeterminada se ejecuta: "C:\Program Files\MongoDB\Server\4.2\bin\mongod.exe" --dbpath="c:\mongodata\db" Teniendo lanzado el servidor de MongoDB e instalado las dependencias de paquetes de npm, se procede a ejecutar el siguiente comando para lanzar el servidor Node.js node app.js Con esto lanzaremos el servidor, de forma predeterminada en localhost:5000. Si por alguna razón necesitamos cambiar el puerto 89