Creactiva: Aplicación para el fomento de la Escritura Creativa

Creactiva: Aplicación para el fomento de la Escritura Creativa Creactiva: Application for the promotion of Creative Writing Por Genesis Brigitti Duque Escobar Luis Alberto Jaramillo Pulido Gonzalo Rivas Fernández Grado en Ingeniería Informática. Grado en Ingeniería del Software. Facultad de Informática Dirigido por Cora Requena Hidalgo Adrián Riesco Rodríguez Madrid, 2020–2021 Agradecimientos En primer lugar, queremos agradecer a Adrián Riesco Rodríguez por sus consejos y continua ayuda durante el proyecto. A continuación, a Cora Requena Hidalgo por confiarnos esta idea y aportar sus conocimientos sobre la materia. También queríamos dar las gracias a Esteban Armas por darnos acceso a las herramienta ShareLatex para realizar este documento y a Maria Jhenay Escobar González por proveer las ilustraciones empleadas en la aplicación. Gonzalo Quiero agradecer a mis amigos Rocío, Marina, Alberto, Javier, Enrique y ambos Carlos por su apoyo en los momentos complicados, y a mis compañeros de la Universidad por acompañarme, no habría sido lo mismo sin ellos. También quiero agradecer a mi familia por todo el apoyo y el ánimo que me han dado durante la carrera, es gracias a ellos que haya llegado hasta aquí. Genesis Quiero agradecer a mi madre por brindarme la oportunidad de conseguir mis sueños y por ser la mujer que siempre admiraré y amaré en esta vida. A mi padre, por enviarme todos los días su amor y apoyo. A toda mi familia, porque 7258 km no impidieron que sus consejos y cariños llegarán hasta mi,gracias. También dar las gracias a mis amigos Héctor, Marisabel, Adriana, Kristel y Brenda por estar a mi lado y brindarme la ayuda cuando pasaba por momentos muy difíciles. Por ultimo, a todas mujeres que luchan por romper las barreras y ser felices consiguiendo sus metas. Luis Quiero agradecer a amigos y compañeros por los buenos momentos que he pasado junto a ellos, haciendo que el paso por la universidad haya sido una muy buena experiencia. Y también quiero agradecer a mi familia, en especial a mi madre y a mi hermana por sus buenos consejos, comprensión y apoyo incondicional que me han brindado durante todo este tiempo y que gran parte de lo conseguido también es de ellos. iii Creactiva: Application for the promotion of Creative Writing UCM iv Resumen El objetivo de este Trabajo de Fin de Grado es crear una aplicación web que permita la realización de desafíos y escritos literarios, promoviendo de esta manera la escritura creativa. Para su uso, se ha añadido un sistema de cuentas de usuario basado en roles, así como herramientas para permitir a los usuarios organizarse y participar en la creación mediante un editor de texto y un sistema de almacenamiento multimedia. Este proyecto contempla la posibilidad de coordinar la actividad creativa con la comunidad educativa, dando la posibilidad a profesores a establecer unas pautas que impulsen a los estudiantes interesados a realizar nuevas creaciones como respuesta a retos literarios de diversas temáticas. Se tiene en cuenta la existencia de diferentes intereses creativos y se ha diseñado un sistema que agrupe a los usuarios con intereses afines. A la hora de usar la aplicación se debe usar una cuenta de usuario a la que se le haya concedido acceso por un responsable de la aplicación. Palabras clave: Escritura creativa, Aplicación web, ReactJS, NodeJS, ExpressJS, Javascript, Axios, Escrito, Desafío, SQL. v Abstract The main goal of this Degree Thesis is to create a web application that eases the creation of literary challenges and writings, supporting creative writing. In order to aid in its usage, a role-based account system has been added, as well as tools that enables student organization and content creation through a text editor and a media storage system. This project takes into account the possibility of joining creative and educative activities, allowing teachers to create a set of rules in order to push interested students into developing new literary creations of diverse themes. A system that groups users with similar tastes has been designed in order to acknowledge the existence of different creative interests. An account with administrator permissions is required in order to use the app. Keywords: Creative writing, Web app, ReactJS, NodeJS, ExpressJS, Javascript, Axios, Writing, Challenge, SQL. vi Sobre T EF LO NX Teflon X(cc0 1.0(documentación) MIT(código))es una plantilla de L A T EX creada por David Pacios Izquierdo con fecha de Enero de 2018. Con atribuciones de uso CC0. Esta plantilla fue desarrollada para facilitar la creación de documentación profesional para Trabajos de Fin de Grado, Trabajos de Fin de Máster o Doctorados. La versión usada es la X V:X Overleaf V2 with XeLaTeX, margin 1in, bib Contacto Autor: David Pacios Izquiero Correo: [email protected] ASCII: [email protected] Despacho 110 - Facultad de Informática vii Índice general Página 1. Introducción 1 1.1. Motivación .................................. 1 1.2. Objetivos ................................... 1 1.3. Metodología.................................. 2 1.4. Artedelaaplicación ............................. 2 1.5. Estructura de la memoria . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.6. Repositorio .................................. 3 2. Introduction 4 2.1. Motivation................................... 4 2.2. Objectives................................... 4 2.3. Methodology ................................. 5 2.4. Art used on the platform . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.5. DocumentStructure ............................. 5 2.6. Repository................................... 6 3. Tecnologías 7 3.1. ServidorNode.js ............................... 7 3.2. ClienteReactJS................................ 7 3.3. Basesdedatos ................................ 8 3.3.1. XAMPP................................ 8 3.3.2. MySQL ................................ 8 3.4. Gestióndeproyectos ............................. 8 3.4.1. Trello ................................. 8 3.4.2. GoogleDrive ............................. 9 3.5. Controldeversiones ............................. 9 3.5.1. Github................................. 9 3.5.2. Git................................... 9 3.5.3. Gitkraken............................... 9 3.6. Prototipo Balsamiq Cloud . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.7. Comunicación Google Meet . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.8. MemoriaSharelatex ............................. 10 3.9. Bibliotecas................................... 10 3.9.1. Multer................................. 10 3.9.2. React Draft Wysiwyg . . . . . . . . . . . . . . . . . . . . . . . . 10 3.9.3. Axios ................................. 10 3.10.Diseñoweb .................................. 10 viii Creactiva: Application for the promotion of Creative Writing UCM 3.10.1.CSS .................................. 11 3.10.2. React-Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 4. Arquitectura 12 4.1. Patróndediseño ............................... 12 4.2. Estructura de la Arquitectura de la aplicación . . . . . . . . . . . . . . . 13 4.2.1. Backend................................ 13 4.2.2. Frontend ............................... 13 4.3. Basededatos................................. 14 4.4. Autenticación basada en tokens . . . . . . . . . . . . . . . . . . . . . . . 14 4.4.1. Funcionamiento del Token JWT en la aplicación . . . . . . . . . 15 4.5. Funcionalidades Principales . . . . . . . . . . . . . . . . . . . . . . . . . 15 4.5.1. Usuarios................................ 15 4.5.2. Desafíos................................ 16 4.5.3. Escritos ................................ 16 4.5.4. Grupos ................................ 17 4.5.5. Equipos................................ 17 4.5.6. Mensajería .............................. 18 4.6. Prototipo ................................... 18 5. Modelo de datos 20 5.1. Modelo entidad-relación . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 5.2. BasededatosSQL.............................. 22 5.2.1. Usuario ................................ 23 5.2.2. Grupo................................. 23 5.2.3. Desafío ................................ 24 5.2.4. Escrito................................. 24 5.2.5. Equipo ................................ 25 5.2.6. Categoría ............................... 26 5.2.7. Equipoestudiante . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 5.2.8. Grupoestudiante . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 5.2.9. Mensajería .............................. 26 5.2.10. Multimediadesafío . . . . . . . . . . . . . . . . . . . . . . . . . . 27 5.2.11. Multimediadesafío . . . . . . . . . . . . . . . . . . . . . . . . . . 27 6. Guía de uso 29 6.1. General .................................... 29 6.1.1. Módulo iniciar y registrar usuario . . . . . . . . . . . . . . . . . . 29 6.1.2. Módulo perfil del usuario . . . . . . . . . . . . . . . . . . . . . . 31 6.1.3. Módulo modificar datos . . . . . . . . . . . . . . . . . . . . . . . 31 6.1.4. Módulotablero............................ 32 6.1.5. Módulo alertas sobre errores . . . . . . . . . . . . . . . . . . . . . 33 6.2. Usuarioprofesor ............................... 34 6.2.1. Módulo grupos profesor . . . . . . . . . . . . . . . . . . . . . . . 34 6.2.2. Módulo estudiantes . . . . . . . . . . . . . . . . . . . . . . . . . . 36 6.2.3. Módulo perfil del estudiante . . . . . . . . . . . . . . . . . . . . . 37 6.2.4. Módulo solicitantes . . . . . . . . . . . . . . . . . . . . . . . . . . 39 6.2.5. Módulo crear grupo . . . . . . . . . . . . . . . . . . . . . . . . . 40 6.2.6. Módulo componer y editar un desafío . . . . . . . . . . . . . . . . 40 ix Creactiva: Application for the promotion of Creative Writing UCM 1.5. Estructura de la memoria Este documento se compone de los siguientes apartados: En el capítulo 2 se recoge la versión en inglés de este capítulo. En el capítulo 3 se exponen las tecnologías empleadas para la realización de Creactiva. En el capítulo 4 se explica la arquitectura escogida para dar forma a la aplicación, así como un primer prototipo y sus requisitos. En el capítulo 5 se desarrolla la capa de integración de la plataforma, entrando en detalle en la estructura y qué utilidad tiene cada entidad del modelo de datos. En el capítulo 6 se incluye una guía que explica paso por paso cómo interactuar con Creactiva. En el capítulo 7 se anotan las diferentes aportaciones que ha hecho cada miembro del equipo al proyecto. En el capitulo 8 se exponen los resultados de una puesta en contacto con futuros usuarios de la aplicación. En el capítulo 9 se describen las conclusiones finales obtenidas tras la realización de este trabajo, así como las posibles nuevas funcionalidades que se podrían proponer en el futuro para Creactiva. En el capítulo 10 se recoge la versión en inglés del capítulo 9, conclusiones y trabajo futuro. En el apartado A del anexo, el glosario, se encuentra una pequeña lista de términos donde se definen varios conceptos relacionados con el funcionamiento de la aplicación. 1.6. Repositorio EL código de la Creactivaestá disponible en el siguiente repositorio: https://github.com/ GenesisDuque/TFG-EscrituraCreativa.git 3 Capítulo 2 Introduction This chapter details the objectives of the app, as well as the motivation behind its development. 2.1. Motivation Creative writing has tradicionally used pen and paper as its main platform for its activity. Even though these mediums provide certain freedomm, they also come with several important incoveniences when faced against digital mediums, like lack of interactivity or the need of a dedicated time and environment in which the act of writing takes place. On the other hand, although some digital creative writing tools do exist, most of them limit the writer’s creativity by their lack of accesibility or poor format options. Both mediums—traditional and digital—have shown that they lack of a inspirational component that pushes the writer to create. Because of this, the Creactiva app has been developed with the colaboration of staff from the Facultad de Ciencias de la Información at the Universidad Complutense de Madrid, with the goal of providing a platform that supports creativity by accepting both text and media submissions. Teachers can interact with students by challenging them to create new pieces. Given the app nature as a web platform it can be accessed by any device with access to the Internet, taking advantage of the prevalence of the use of the smartphone. This tool allows teachers to give feedback to their student’s creations. 2.2. Objectives The main goal of this project is to create a meeting point where teachers can inspire student creativity through challenges of different themes. To create a space where students can create by cooperating. To allow the use of media in order to further support this activity. To foment student inspiration via teacher made challenges. To make content creation more accessible and comfortable. 4 Creactiva: Application for the promotion of Creative Writing UCM To ease user organization as allowing teachers create groups of students with similar creative tastes. 2.3. Methodology The agile methodology Scrumban has been chosen for this proyect because it provides flexibility while planning tasks as well as efficiency in their handling. This methodology provides transparency as it keeps ongoing tasks visible and gives freedom on how they ae completed. Because of this each member in the development team can choose which tasks can they work on from the available ones, as well as monitor their progress by accesing a platform that sorts these tasks by their completion status. At the beggining there was a meeting held every fifteen days with the purpose of obtaining the project requisites. This was made through the creation of user stories that are collected within the Product Backlog. THe resulting teamwork has consisted in several small iterations that were organized through a board created using the web tool Trello that mantained the progress of the workflow using tags to mark each task progress (WIP/Work in progress) that resulted in dividing the board in three sections; To Do,Doing, and Done, keeping a maximum number of tasks in each category that made impossible to create a new task until those in development were closed. Meetings were held each Tuesday. In these meetings new functionalities from the current iteration were presented, as well as planning which user stories and tasks would be worked on next. 2.4. Art used on the platform All visual assets have been developed in exclusive for the use in the platform by the team members and their collaborators. 2.5. Document Structure The rest of the document is organized as follows: Chapter 3 exposes the technologies used in the development of Creactiva. Chapter 4 explains the platform structure as well as its first prototype and requirements. Chapter 5 explains in detail the app data structure, as well as how each of its parts work within the platform. Chapter 6 includes a user guide for Creactiva. 5 Creactiva: Application for the promotion of Creative Writing UCM Chapter 7 lists the different additions to the project made by each of the team members. Chapter 8 shows the results of a meeting with future users of the app. Chapter 9 describes the concluding remarks on the development of the platform, as well as the ways that Creactiva could be expanded. Chapter 10 holds an english translation of Chapter 9, concluding remarks and future work. Appendix A of the annexed documents, the glossary, holds a short list of terms related to the inner workings of the app as well as their definitions. 2.6. Repository Creactiva´s code is available in the following repository: https://github.com/GenesisDuque/ TFG-EscrituraCreativa.git 6 Capítulo 3 Tecnologías En esta sección presentamos las tecnologías y herramientas utilizadas para el desarrollo del proyecto. 3.1. Servidor Node.js Node.JS [1] es un entorno de desarrollo multiplataforma para JavaScript de código abierto dirigido principalmente a servidores web. Al tratarse el proyecto de una aplicación web se ha optado por esta tecnología para la implementación del servidor. Se ha elegido esta tecnología porque permite manejar varios eventos y alto tráfico de usuarios como profesores y estudiantes. Asimismo, soporta numerosas conexiones concurrentes, permitiendo disminuir el coste de infraestructura si en un futuro se decidiese continuar con el proyecto con un enfoque más dirigido al negocio. Otras de las razones es la eficiencia que brinda en tiempo real de uso de datos; las operaciones de entrada/salida son sin bloqueo cuando un servidor web hace una petición y espera una respuesta, también porque está orientado a eventos asíncronos, y al estar basado en eventos y sin bloqueos hace que sea liviano, eficiente y posea un gran rendimiento. 3.2. Cliente ReactJS ReactJS [1] es un framework basado en JavaScript que permite crear interfaces de usuario. Esta tecnología se ha seleccionado en la implementación del lado del cliente por muchas razones, una de ellas es el buen rendimiento que proporciona al ejecutar la aplicación. Al usar virtual DOM, permite cambiar partes de la interfaz sin renderizar toda la aplicación en comparación de otras aplicaciones web, al estar vinculada una componente a una url no hay necesidad de recargar la página, siendo las componentes las que se recargan, esto hace que la interacción con la aplicación resulte más dinámica. Otra razón es la separación completa entre el lado del servidor y el lado del cliente, al tenerlo separado nos brinda la posibilidad de poder trabajar en equipo, permite dividir 7 Creactiva: Application for the promotion of Creative Writing UCM el trabajo, como tener personas que trabajan en el servidor y otros en el cliente. Otro motivo es porque está orientado a componentes, es modular mediante componentes, nos permite reutilizar código, cada parte de la página se puede dividir en componentes, evitando duplicar código innecesariamente. 3.3. Bases de datos Para la base de datos se han empleado las siguientes herramientas. 3.3.1. XAMPP Como servidor web se ha utilizado XAMPP [2], que incluye MySQL[3] para la gestión de la base de datos, se ha encontrado ideal porque ha permitido trabajar de forma rápida desde un primer momento sin requerir tiempo en su ejecución o en configuraciones a comparación de otros servidores web. Es un servidor independiente de plataforma de código libre, es gratuito e incluye bases de datos MySQL. 3.3.2. MySQL MySQL[3] es un gestor de bases de datos que habitualmente viene integrado con servidores web, comportándose como un sistema relacional que guarda datos en tablas separadas, es decir, trabaja como un modelo cliente-servidor, almacenando un conjunto de datos que son organizados en forma de tablas y cada una de estas tablas están relacionadas entre si. 3.4. Gestión de proyectos Para la organización del equipo de trabajo se han empleado las siguientes herramientas. 3.4.1. Trello Como gestor de proyectos en línea se ha usado Trello [4]. Se ha considerado que esta herramienta se adecúa a la metodología empleada Scrumban. Este gestor de proyectos posee un sistema de tarjetas que ha permitido la representación de los artefactos de la metodología ágil como son Product Backlog,Sprint Backlog, entre otros. Otro de los usos ha sido para la organización de tareas, listas, eventos, y un registro de actividades. Todo lo proporcionado por esta herramienta ha sido de gran utilidad para poner en práctica la metodología ágil Scrumban. 8 Creactiva: Application for the promotion of Creative Writing UCM 3.4.2. Google Drive Como servicio de alojamiento de archivos se ha optado por Google drive al estar todo el equipo más familiarizado con la herramienta, se ha utilizado para alojar ficheros como documentos de investigación de alguna tecnología nueva, para la organización de la memoria, para los esquemas de representación de la base de datos y la presentación del proyecto,mockups entre otros. 3.5. Control de versiones Para la gestión del proyecto se han empleado las siguientes herramientas. 3.5.1. Github GitHub [5] se ha empleado como repositorio remoto para la gestión del proyecto, usar esta herramienta nos ha permitido trabajar de forma colaborativa, mediante el seguimiento y compartición de un repositorio de versiones en común. 3.5.2. Git Git [6] es un sistema de control de versiones de código abierto y gratuito, que ha sido de utilidad para administrar y realizar un seguimiento del historial de código fuente, registrando cambios realizados en un archivo o conjuntos de archivos en el proyecto, y la posibilidad de poder revisar o restaurar versiones anteriores. 3.5.3. Gitkraken Gitkraken [7] es una interfaz gráfica multiplataforma para Git, que ha permitido hacer todas las operaciones de gestión del control de versiones desde una aplicación de escritorio. 3.6. Prototipo Balsamiq Cloud Balsamiq Cloud [8] es una herramienta de diseño de interfaz de usuario utilizado para crear prototipos o diseños para una aplicación web, se ha empleado en la elaboración del primer diseño de la aplicación presentada al cliente, y que ha ayudado para entender de forma más detallada los requisitos del cliente. 9 Creactiva: Application for the promotion of Creative Writing UCM 3.7. Comunicación Google Meet Google Meet es una aplicación o servicio de comunicación, se ha utilizado esta herramienta para las reuniones de equipo y presentaciones del proyecto al cliente. 3.8. Memoria Sharelatex ShareLatex es un editor en linea de Látex que permite trabajar de forma colaborativa y sido empleado para la elaboración de la memoria. 3.9. Bibliotecas Aquí se presentan las bibliotecas empleadas en la aplicación. 3.9.1. Multer Multer [9] es un middleware para Express y Node.js, es un módulo empleado en el lado del servidor, su uso es la gestión de ficheros multimedia de desafíos y escritos. Cuando un usuario de la aplicación (profesor o estudiante), agrega ficheros multimedia a un desafío o a un escrito, se suben a un directorio ./public/multimedia del servidor. 3.9.2. React Draft Wysiwyg React Draft Wysiwyg [10] es una biblioteca de ReactJs empleado para la creación de un editor de texto cuya finalidad es elaborar textos narrativos en los desafíos y escritos. Este editor permite controlar la apariencia del texto y desarrollar una amplia gama de composición de texto enriquecido que van desde estilos de textos básicos hasta funciones más complejas. 3.9.3. Axios Axios [11] es una biblioteca de Javascript que permite realizar peticiones HTTP a un servidor y realizar operaciones CRUD, se ha utilizado en el lado del cliente para enviar peticiones desde el navegador al servidor. 3.10. Diseño web Los siguientes instrumentos son herramientas, lenguajes y bibliotecas para el diseño gráfico, estructuración y agregación de componentes visuales. 10 Creactiva: Application for the promotion of Creative Writing UCM 3.10.1. CSS Es una hoja de estilos en cascada aplicada en ficheros de extensión HTML, afectando a los objetos definidos para mejorar la visualización y estilo tal como su color o tamaño. 3.10.2. React-Bootstrap React Bootstrap [12] es una herramienta de código abierto para la usabilidad en el diseño web a través de la importación de plantillas o componentes basados en HTML yCSS, reemplazando el Bootstrap,javascript y dependencias con JQUERY, lo que la convierte en una buena biblioteca externa como opción a la hora de desarrollar las interfaces. 11 Capítulo 4 Arquitectura En esta sección se explica la arquitectura de la aplicación web, del patrón de diseño empleado, bases de datos, funcionalidades, prototipo y guía de uso. 4.1. Patrón de diseño El patrón de diseño utilizado en el proyecto es el patrón Modelo-Vista-Controlador, se ha optado por este patrón de diseño porque permite que el proyecto sea escalable, modular, y de fácil mantenimiento, permitiendo la reutilización de los componentes. Otro motivo es que proporciona una separación clara de donde tiene que ir cada tipo de lógica, separando la aplicación en tres componentes lógicos: modelo, vista y controlador. Capa del modelo: En la aplicación es la lógica de negocio en la aplicación, relacionando los datos que la aplicación va utilizar, como consultas,actualizaciones, creación de datos y eliminación de la misma.El modelo notifica los cambios de estado para que la vista se actualice. Capa de la vista: La capa donde el usuario interactúa con la aplicación mediante una interfaz de usuario, enviando las peticiones al controlador. Capa del controlador: Es la lógica de la aplicación, recibe solicitudes de la vista y ejecuta las acciones en el modelo. En el proyecto la separación se realiza mediante dos carpetas server yclient, donde el servidor contiene la capa del controlador y el modelo, mientras que el cliente contiene toda la la implementación de la interfaz de la aplicación. Además se ha implementado una capa de servicio en el cliente, con la finalidad de facilitar la lógica entre la vista y el dominio de la aplicación, y que este dominio sea reutilizado por múltiples vistas, implementándose los servicios del estudiante, profesor y usuario general. En el proyecto tanto los servicios del estudiante como del profesor contiene las funcionalidades propias según el rol, mientras que el servicio de usuario contiene las funcionalidades comunes entre el estudiante y el profesor tomando como ejemplo iniciar sesión y registro. 12 Creactiva: Application for the promotion of Creative Writing UCM Por lo tanto, para mejorar nuestro primer prototipo se opta por diseñar componentes visuales reutilizables para todos roles de usuarios. A continuación entender si cada cambio o agregación era satisfactorio y cómodo, y reorganizar los elementos principales mediante cuadrículas para adaptarse a diferentes pantallas. Figura 4.2: Crear desafío (primer boceto) Figura 4.3: Listar estudiantes (primer boceto) 19 Capítulo 5 Modelo de datos En este capítulo se detalla la estructura del modelo de datos que se emplea en la capa de integración de la aplicación Creactiva. 5.1. Modelo entidad-relación En la figura 5.1 se muestra el diagrama Entidad Relación del modelo de datos de Creactiva, mostrando las relaciones que existen entre las diferentes entidades que lo forman y sus atributos. Figura 5.1: Modelo entidad relación A continuación, se desarrolla el diagrama anterior así como las relaciones que representa: Usuario: Consiste en los usuarios de la aplicación. Se divide en tres roles, identificados por el atributo “rol”, siendo estos profesor, estudiante y administrador. Esta entidad contiene datos personales tales como nombre, apellidos y correo electrónico usado 20 Creactiva: Application for the promotion of Creative Writing UCM para el registro, y de la misma forma los atributos empleados para el funcionamiento de la aplicación, como la contraseña, el rol y la ruta que dirige a la imagen de perfil del usuario. El correo de registro es único y no se puede crear más de un usuario por dirección de correo. El atributo “activo” permite identificar si un usuario ha sido aceptado por un administrador y por tanto, si se le permite acceso a la plataforma. Grupo: Esta entidad recoge los datos de los grupos. Creados por los profesores, agrupan a diferentes estudiantes dependiendo de sus intereses creativos. Además de un identificador, cuentan con el identificador del profesor que lo creó, así como el nombre del grupo y el campo activo, que identifica si el grupo está aún en uso o no. Desafío: Contiene toda la información referente a los desafíos literarios. Creados por los profesores, pertenecen a un grupo concreto. Pueden ser accedidos por los estudiantes, quienes pueden crear escritos para enfrentarse al reto presentado. Cuentan con su propio identificador, así como el identificador del grupo al que pertenecen. Tienen la fecha inicio y la fecha del fin del intervalo en el que el desafío está activo. Contienen un título, así como una descripción que detalla las normas del reto y además si el desafío es colaborativo, es decir, si puede ser enfrentado por un equipo o por estudiantes individuales. Especifica la forma de calificación designada por el profesor, que sirve para fijar el formato en el que se dará respuesta a los escritos de ese desafío. Añade un identificador que indica si es visible y accesible o no. Escrito: Son los textos literarios creados por los estudiantes como contestación a un desafío. Contiene su propio identificador, así como aquellos de su escritor o equipo creador, el grupo en el que fue creado y el desafío al que se enfrenta. Cuenta con un nombre a modo de título, así como el texto en el que consiste el escrito. Contiene la información sobre si es colaborativo o no. Añade también la puntuación otorgada por el profesor, así como los posibles comentarios que haya podido hacer el mismo sobre el contenido del escrito así como los datos sobre la última fecha de edición y de un identificador que indica si es activo y visible o no. Un estudiante o equipo solo puede crear un escrito por cada desafío. Equipo: Formados por los estudiantes, los equipos son formaciones que se enfrentan a desafíos colaborativos, creando escritos en conjunto. Pertenecen a un único grupo y como tal, solo pueden contener estudiantes de ese mismo grupo. Incluye un identificador unívoco, así como el identificador del grupo al que pertenecen y el identificador del creador, o líder del equipo. Contiene también información sobre el nombre del equipo y de si se encuentra activo y utilizable o desactivado. Mensajería: Esta entidad representa los mensajes que pueden enviar los estudiantes. Su función principal es la de asistir en la creación de equipos colaborativos e incluye un sistema de invitaciones para el mismo. Multimediadesafío: Esta entidad identifica los enlaces a archivos multimedia que pertenecen a un desafío. Los archivos que son referenciados por estos enlaces residen en el almacenaje del servidor. Multimediaescrito: Esta entidad representa los enlaces a archivos multimedia que pertenecen a un escrito. Contiene una manera de identificar el orden en el que estos archivos se añaden para facilitar la creación de obras que consisten en más de un archivo, como las novelas visuales. 21 Creactiva: Application for the promotion of Creative Writing UCM Entre estas entidades existen relaciones que tienen ciertas limitaciones como parte de su diseño: Un profesor puede gestionar varios grupos, pero un grupo solo puede ser gestionado por un profesor. Un profesor puede gestionar múltiples desafíos, pero un desafío solo puede ser gestionado por un profesor. Cada estudiante puede pertenecer a varios grupos y cada grupo puede contener a varios estudiantes. Cada estudiante puede crear varios escritos, pero cada escrito solo puede ser creado por un estudiante. Cada estudiante puede pertenecer a más de un equipo y un equipo puede contener más de un estudiante. Cada escrito solo puede contestar a un desafío. Cada desafío puede ser contestado por múltiples escritos. Varios administradores pueden gestionar a varios usuarios y varios usuarios pueden ser gestionados por varios administradores. Varios profesores pueden gestionar a varios estudiantes y varios estudiantes pueden ser gestionados por varios profesores. Un desafío puede tener varios archivos multimedia relacionados. Un archivo multimedia puede estar relacionado solo con un desafío a la vez. Un escrito puede tener varios archivos multimedia relacionados. Un archivo multimedia puede estar relacionado solo con un escrito a la vez. Un estudiante puede tener varios mensajes a la vez. Cada mensaje solo está relacionado con su receptor y su remitente. 5.2. Base de datos SQL Se ha empleado SQL para la creación de la base de datos. Este sistema nos permite crear bases relacionales sujetas a ciertas normas, así como crear relaciones entre las diferentes tablas. Se pueden poner limitaciones a los atributos de las mismas, como establecer los campos identificadores como únicos. SQL permite también establecer comportamientos automáticos dentro de la base de datos, por ejemplo, eliminar todos los datos referidos a un usuario si este es eliminado, de manera que no queda información perdida e inaccesible en la base de datos al realizar operaciones sobre la misma. De esta manera también se pueden generar restricciones, como detectar automáticamente que no existan repeticiones en campos únicos o incluso generar identificadores nuevos de forma automática al crear una fila en una tabla. El lenguaje también posibilita crear tablas intermedias, estructuras auxiliares que encarnan ciertas relaciones entre tablas que tengan atributos propios. En la mayor parte de las tablas se ha empleado un atributo llamado “activo” que representa el estado de un elemento. Si se desea eliminar un elemento, en lugar de borrarlo de la base de datos, se desactiva, haciendo que se le ignore por parte de la lógica de 22 Creactiva: Application for the promotion of Creative Writing UCM la aplicación, no obstante, esta decisión se ha tomado para tener una persistencia de los datos y que en ningún caso se pueda perder información valiosa. Se desarrolla a continuación la estructura de cada una de las tablas, así como la utilidad de cada uno de sus atributos. 5.2.1. Usuario Esta entidad representa a todos los usuarios registrados. Estos tienen disponibles una serie de funciones u otras dependiendo de su rol. Un usuario solo puede acceder a la plataforma si ha sido aceptado en la aplicación. Esta tabla contiene los siguientes atributos: id: Campo numérico que identifica de manera unívoca a un usuario. Se genera automáticamente cuando se crea el perfil y no puede haber dos usuarios con el mismo identificador. Es la clave primaria de la entidad. correo: Email provisto a la hora de crear el perfil. Es único y no puede haber dos usuarios con el mismo correo. Se emplea para iniciar sesión como usuario y puede ser utilizado como clave de búsqueda para profesores y administradores. password: Contraseña de la cuenta del usuario. Se encuentra encriptada para mayor seguridad. Se necesita introducir junto con el correo electrónico para poder iniciar sesión. nombre: Nombre del usuario. Puede haber más de un usuario con el mismo nombre. En ciertos listados puede usarse para filtrar los distintos usuarios. apellidos: Apellidos del usuario. Puede haber más de un usuario con los mismos apellidos. En ciertos listados pueden usarse para filtrar y buscar entre los distintos usuarios. activo: Campo que indica si un usuario está aceptado en la plataforma o no. Si no lo está, no podrá iniciar sesión en la aplicación. Este campo puede ser manipulado por profesores y administradores. rol: Este campo sirve para identificar qué privilegios tiene un usuario. Puede designar a un usuario como estudiante, profesor o administrador. ruta: Contiene la ruta de la imagen de perfil del usuario, que se guarda en el almacenamiento del servidor. 5.2.2. Grupo Esta entidad representa a los conjuntos de estudiantes organizados por profesores en torno al interés en un tema en común. Cada grupo es creado y gestionado por un único profesor, que puede añadir a estudiantes al mismo. Una vez el grupo tiene estudiantes, el profesor puede proponer desafíos exclusivamente a los integrantes de ese grupo. Los administradores pueden manipular cualquier grupo sin importar su creador, así como los estudiantes que pertenecen al mismo. Esta tabla contiene los siguientes atributos: id: Este campo identifica de forma unívoca a cada grupo y se genera automáticamente cuando se crea un grupo nuevo. No pueden existir dos grupos con el mismo identificador. Es la clave primaria de la entidad. 23 Creactiva: Application for the promotion of Creative Writing UCM idprofesor: Identificador del profesor que creó el grupo. nombre: Nombre que identifica al grupo. Pueden existir varios grupos con el mismo nombre. Puede ser cambiado en cualquier momento por el profesor que lo organiza. activo: Este campo identifica si el grupo sigue vigente o si ha sido desactivado y por tanto no puede utilizarse. 5.2.3. Desafío Esta entidad representa los retos que puede proponer un profesor a los estudiantes de un grupo. Su contenido puede ser visto y editado por el profesor que los creó y solo puede ser accedido por los estudiantes del grupo al que pertenece. Esta tabla contiene los siguientes atributos: id: Identificador unívoco empleado para discernir entre desafíos. Dos desafíos no pueden tener el mismo identificador y este se genera automáticamente al crear el desafío en la base de datos. Es la clave primaria de esta entidad. idGrupo: Es el identificador del grupo al que pertenece. Un desafío solo puede pertenecer a un grupo. título: Contiene el título del reto. Varios desafíos pueden tener el mismo título. descripción: Texto que contiene todas las pautas que han de seguirse para enfrentarse al reto. Dos desafíos pueden tener la misma descripción. tipoCalificación: Define el tipo de respuesta que puede dar el profesor a la hora de calificar un escrito que conteste al desafío. Puede ser numérica o en forma de comentarios. idCategoría: Identificador de la categoría a la que pertenece el desafío. Las categorías permiten saber a qué género literario pertenece el resto y pueden ayudar a guiar al estudiante a crear un escrito adecuado. colaborativo: Este atributo permite saber si un desafío es colaborativo y por tanto puede ser enfrentado por equipos, o individual, y solo puede ser enfrentado por estudiantes en solitario. fechaini: Contiene la fecha de inicio del desafío. Ayuda a ver qué intervalo de tiempo ha estado abierto el desafío a respuestas. fechafin: Contiene la fecha de cierre del desafío. una vez pasado el plazo de tiempo, el desafío se considera cerrado. activo: Esta variable indica si el desafío está activo y disponible, o desactivado y por lo tanto inaccesible. 5.2.4. Escrito Esta entidad representa los textos literarios que pueden crear los estudiantes para enfrentarse a los desafíos propuestos por los profesores. Pueden ser editados múltiples veces por 24 Creactiva: Application for the promotion of Creative Writing UCM los estudiantes. De la misma manera, los profesores pueden revisar sus contenidos y dar una respuesta en formato de calificaciones o comentarios. Al igual de los desafíos, pueden ser tanto individuales, creados por estudiantes, o colectivos, creados por equipos de estudiantes. Esta tabla contiene los siguientes atributos: id: Identificador unívoco de la entidad. Se genera automáticamente al crear un nuevo escrito en la base de datos. Dos escritos no pueden tener el mismo identificador. Es la clave primaria de la entidad. idGrupo: Identificador del grupo al que pertenece el escrito. Un escrito solo puede pertenecer a un grupo. idDesafío: Identificador del desafío al que contesta. Un escrito solo puede enfrentarse a un desafío y a la vez, un escrito siempre debe ser creado para un desafío. idEscritor: Identificador del estudiante que creó el escrito. Si se establece que es un escrito colaborativo, este identificador representa el del equipo que lo creó. Un escrito solo puede pertenecer a un estudiante o equipo. nombre: Título del escrito. Puede haber múltiples escritos con el mismo nombre. Puede ser usado para filtrar en búsquedas. texto: Contenido del escrito. Puede haber escritos con el mismo texto. puntuación: Calificación otorgada por un profesor sobre el escrito. comentario: Respuesta y críticas hechas por un profesor que corrige el escrito. colaborativo: Este atributo identifica si el escrito pertenece a un desarrollo colaborativo, y por tanto pertenece a un equipo, o si es individual y pertenece a un estudiante en solitario. finalizado: Este atributo indica si el escrito está terminado y listo para corregir. fecha: Este atributo indica la fecha de actualización del escrito. activo: Este atributo indica si el escrito desafío está activo y disponible, o desactivado y por lo tanto inaccesible. 5.2.5. Equipo Esta entidad representa los equipos organizados y formados por estudiantes para enfrentarse a desafíos en un grupo dado. Cada estudiante sólo puede estar en un equipo de cada grupo y este equipo siempre ha de tener un líder. Si el líder del equipo desea abandonar el equipo y aún quedan miembros en él, debe elegir un sucesor antes de abandonarlo. Esta tabla contiene los siguientes atributos: id: Identificador unívoco de la entidad. Se genera de forma automática cuando un nuevo equipo es creado en la base de datos. Dos equipos no pueden tener el mismo identificador. Es la clave primaria de la entidad. nombre: Es el nombre del equipo. Dos equipos pueden tener el mismo nombre sin importar el grupo al que pertenecen. activo: Es el atributo que representa si un equipo es accesible y visible o no. 25 Creactiva: Application for the promotion of Creative Writing UCM idCreador: Es el identificador del líder actual del equipo. Cada equipo solo puede tener un líder y siempre ha de tener uno. Si el líder de un equipo desea abandonarlo y quedan más miembros en él, debe escogerse un nuevo líder primero. idGrupo: Este atributo identifica al grupo al que pertenece el equipo. Un equipo solo puede pertenecer a un grupo. 5.2.6. Categoría Esta entidad representa un enumerado de categorías a las que puede pertenecer un desafío de manera que pueda ser clasificado según género literario. Esta tabla contiene los siguientes atributos: id: Identificador unívoco de la categoría. No pueden existir dos categorías con el mismo nombre. nombre: Contiene el nombre de la categoría. 5.2.7. Equipoestudiante Esta entidad representa la relación que existe entre los estudiantes y los equipos a los que pertenecen. Un estudiante solo puede formar parte de un equipo en cada grupo. Esta tabla contiene los siguientes atributos: id: Identificador unívoco de relación. Es la clave primaria de la entidad. idEquipo: Este atributo contiene el identificador del equipo de la relación. idEstudiante: Este atributo contiene el identificador del estudiante de la relación. 5.2.8. Grupoestudiante Esta entidad representa la relación que existe entre los estudiantes y los grupos a los que pertenecen. Los estudiantes son añadidos a los grupos por los profesores o administradores. Múltiples alumnos pueden formar parte de múltiples grupos. Esta tabla contiene los siguientes atributos: id: Identificador unívoco de la relación. Es la clave primaria de la entidad. idGrupo: Este atributo contiene el identificador del grupo de la relación. idEstudiante: Este atributo contiene el identificador del estudiante de la relación. 5.2.9. Mensajería Esta entidad representa la funcionalidad de los mensajes y los datos implícitos en ellos. Estos mensajes se emplean principalmente entre estudiantes para la organización de los equipos de manera que forman un sistema de invitaciones. Esta tabla contiene los siguientes atributos: 26 Creactiva: Application for the promotion of Creative Writing UCM id: Identificador unívoco de entidad. No puede haber dos mensajes con un mismo identificador. Es la clave primaria de la entidad. idEmisor: Identificador del usuario emisor del mensaje. idReceptor: Identificador del usuario receptor del mensaje. idCreador: Identificador del usuario creador del grupo en caso de que el mensaje consista en la invitación a un equipo. mensaje: Este atributo contiene el texto del mensaje. Dos mensajes pueden tener el mismo mensaje. tipo: Este campo concreta si el mensaje es una invitación o una notificación general. fecha: Este campo contiene cuándo se envió el mensaje. activo: Este campo permite saber si el mensaje es visible o no. 5.2.10. Multimediadesafío Esta entidad representa todos los archivos multimedia de los que dispone un desafío. Puede existir más de un solo archivo por desafío, pero un archivo solo puede pertenecer a un desafío a la vez. Esta tabla contiene los siguientes atributos: id: Identificador unívoco de la entidad. No puede haber dos enlaces de multimedia de un desafío iguales. Es la clave primaria de la entidad. idDesafío: Identificador del desafío al que pertenece este archivo multimedia. Un archivo solo puede pertenecer a un desafío cada vez. ruta: Este atributo contiene la dirección exacta del servidor donde se aloja el archivo multimedia. fecha: Este atributo contiene el momento en el que fue creada la asociación entre el archivo y el desafío. 5.2.11. Multimediadesafío Esta entidad representa todos los archivos multimedia de los que dispone un escrito. Puede existir más de un solo archivo por desafío, pero un archivo solo puede pertenecer a un escrito a la vez. Se ha tenido en cuenta que en el caso de la elaboración de elementos narrativos como las novelas visuales es importante mantener un orden entre los diferentes archivos que pertenezcan a un escrito. Esta tabla contiene los siguientes atributos: id: Identificador unívoco de la entidad. No puede haber dos enlaces de multimedia de un escrito iguales. Es la clave primaria de la entidad. idEscritor: Identificador del escritor que ha creado el escrito al que pertenece el archivo multimedia. No puede estar relacionado con más de un escritor. idDesafío: Identificador del desafío al que contesta el escrito. Junto con idEscritor, permite identificar el escrito al que pertenece formando una clave compuesta. 27 Creactiva: Application for the promotion of Creative Writing UCM ruta: Este atributo contiene la dirección exacta del servidor donde se aloja el archivo multimedia. fecha: Este atributo contiene el momento en el que fue creada la asociación entre el archivo y el escrito. orden: Este atributo numérico permite establecer un orden entre los distintos archivos que pertenezcan a un mismo escrito, que permite crear secuencias de forma intencionada. Esta funcionalidad es muy útil a la hora de crear novelas visuales o distintas viñetas relacionadas de forma cohesiva. 28 Creactiva: Application for the promotion of Creative Writing UCM (paso 2 en la figura 6.12). Además se puede observar un botón “Crear desafio” en la parte superior derecha de la pestaña (paso 3 en la figura 6.12), que al ser pulsado nos permite crear un nuevo desafío. Figura 6.12: Desafíos de un grupo Escritos: Al seleccionar la pestaña “Escritos” (paso 1 en la figura 6.13), el profesor puede elegir un desafío (paso 2 en la figura 6.13) desde el cual se filtrará una lista con todos los escritos realizados por los estudiantes para dicho grupo. Si el profesor desea agregar comentarios de corrección antes de la fecha fin del desafío puede accionar el botón “Editar Escrito” (paso 3 en la figura 6.13), y luego ser redirigido a la ventana de edición. Figura 6.13: Escritos de un grupo Equipos: Al seleccionar la pestaña “Equipos” (paso 1 en la figura 6.14) se lista los equipos del grupo elegido, facilitando la búsqueda a través de un filtro (paso 2 en la figura 6.14). El botón “Ver equipo” una vez accionado redirigirá a una nueva ventana con la información y detalles del equipo (paso 3 en la figura 6.14). 35 Creactiva: Application for the promotion of Creative Writing UCM Figura 6.14: Equipos de un grupo Estudiantes: Al seleccionar la pestaña “Estudiantes” (paso 1 en la figura 6.15) se lista los estudiantes del grupo, lográndose filtrar una búsqueda por el nombre o correo de los estudiantes (paso 2 en la figura 6.15). El botón de “Ver perfil” (paso 3 en la figura 6.15) una vez accionado redirigirá a una nueva ventana del perfil del estudiante seleccionado. Figura 6.15: Lista de estudiantes 6.2.2. Módulo estudiantes Desde esta sección se muestra una lista con todos los estudiantes dados de alta en la plataforma (paso 1 en la figura 6.51). La búsqueda de un determinado estudiante puede ser ligera a través del filtro agregado, ya sea por nombre o correo electrónico (paso 2 en la figura 6.51). Además, contará con la opción “Ver perfil”, un enlace el cual redirigirá a la página de “perfil del estudiante” (ver figura 6.17 ) 36 Creactiva: Application for the promotion of Creative Writing UCM Figura 6.16: Lista de estudiantes 6.2.3. Módulo perfil del estudiante Sobre esta vista el profesor tiene dos pestañas con las siguientes funcionalidades: Datos: Al pulsar en esta pestaña, figura 6.17 (paso 1), se muestran los datos del estudiante seleccionado. Figura 6.17: Perfil del Estudiante Luego, desplazando la página se encuentra la opción de “Invitar a un grupo”, donde el profesor puede invitar a dicho estudiante a cualquiera de sus grupos seleccionando uno de ellos, ver figura 6.18 (paso 2). 37 Creactiva: Application for the promotion of Creative Writing UCM Figura 6.18: Perfil del Estudiante A continuación, otra de las opciones es “Expulsar del grupo”, cuya acción del profesor es seleccionar uno de los grupos y pulsar “Expulsar” como se puede ver en la figura 6.19 (paso 3). Figura 6.19: Perfil del Estudiante Escritos: Esta pestaña tras ser seleccionada (paso 1 y 3 en la figura 6.20) se muestran unas tarjetas las cuales contienen con el nombre del desafío y del escrito, todas ellas correspondiente al estudiante elegido (paso 2 en la figura 6.20). Pueden ser filtradas por el nombre del desafío o por título del escrito (paso 2 en la figura 6.20)y al pulsar sobre ellas nos lleva a la ventana de “Editar escrito” como se muestra en la figura 6.26 38 Creactiva: Application for the promotion of Creative Writing UCM Figura 6.20: Perfil del Estudiante 6.2.4. Módulo solicitantes En esta sección se lista a los estudiantes que han decidido registrarse en la aplicación y cuyas cuentas están a la espera de ser activadas por un profesor. Si algún profesor desea activar a uno de esos estudiantes, solo tiene que buscar usando el filtrado o no para facilitar el evento (pasos 1 y 2 en la figura 6.51). Luego, tras pulsar el botón “Ver perfil”, será dirigido a una nueva vista desde la cual puede aceptar la solicitud tal como se muestra en el paso 3 de la figura 6.51. Figura 6.21: Lista de alumnado solicitante 39 Creactiva: Application for the promotion of Creative Writing UCM Figura 6.22: Aceptar solicitud 6.2.5. Módulo crear grupo En esta ventana el profesor puede crear un grupo nuevo, para lo cual debe ingresar un nombre (paso 1 en la figura 6.23), pulsar “Aceptar” y confirmar el evento (paso 2 en la figura 6.23). Figura 6.23: Crear grupo 6.2.6. Módulo componer y editar un desafío En este espacio el profesor puede establecer un nuevo desafío ingresando el nombre, una descripción o los requisitos del reto, subir elementos multimedia, colocar hora y fecha fin, elegir una categoría y el tipo de calificación. Una vez rellenado los campos entonces puede pulsar “Enviar” para activar el desafío o “Cancelar” en caso contrario (ver figuras 6.24 y 6.25). 40 Creactiva: Application for the promotion of Creative Writing UCM Figura 6.24: Crear un desafío Figura 6.25: Validar desafío creado Análogamente, la vista de editar un desafío es similar a la de crear desafío con la diferencia de que se muestran los datos guardados con anterioridad de su creación o edición. 6.2.7. Módulo editar un escrito En primer lugar, el profesor podrá observar que en el espacio de “Detalles del desafío” se encuentran los requisitos y ficheros multimedia que él o ella han agregado (ver figura 6.26). 41 Creactiva: Application for the promotion of Creative Writing UCM Figura 6.26: Editar escrito “Detalles del desafío” En segundo lugar, el espacio “Escrito del estudiante” es el texto que el alumno o los alumnos han editado. Desde el cual el profesor puede comentar, corregir, calificar o dar por terminado el escrito (ver figuras 6.27 y 6.28). Figura 6.27: Editar escrito “Escrito del estudiante 1” Figura 6.28: Editar escrito “Escrito del estudiante 2” 42 Creactiva: Application for the promotion of Creative Writing UCM 6.2.8. Módulo información del equipo El profesor podrá ver la información de un equipo, tal como sus miembros (paso 1 en la figura 6.29), sus escritos (paso 2 en la figura 6.29) de la misma forma que se muestra en la figura 6.20 y el perfil de cada miembro (paso 3 en la figura 6.29) como en las figuras 6.19 y 6.18. Figura 6.29: información del equipo 6.3. Usuario estudiante Este rol permite a los estudiantes de la aplicación crear los escritos para los desafíos aceptados. También tienen la posibilidad de crear y gestionar equipos de estudiantes. 6.3.1. Módulo grupos estudiante Al iniciar esta ventana el estudiante puede seleccionar un grupo (paso 1 en la figura 6.30) y una opción de gestión sobre el grupo (paso 2 en la figura 6.30), las cuales explicaremos a continuación. Figura 6.30: Selección de grupos y gestión. 43 Creactiva: Application for the promotion of Creative Writing UCM Crear escrito: Cuando el estudiante escoge la opción “Crear escrito”, cargará un grupo de pestañas tales como: Desafíos: Se lista los desafíos activos y disponibles que el estudiante puede aceptar al pulsar “Crear escrito”(paso 3 en la figura 6.31). Si este botón no esta disponible entonces el estudiante ya contiene un escrito activo sobre dicho desafío. Figura 6.31: Listado de desafíos. Desafíos en equipo: Se lista los desafíos activos y disponibles para los equipos que pueden ser aceptados al pulsar “Crear escrito” (paso 3 en la figura 6.32). Si este botón no esta disponible entonces el equipo del estudiante ya contiene un escrito activo sobre dicho desafío. Figura 6.32: Listado de desafíos en equipo. Escritos: Cuando el estudiante escoge la opción “Escritos”, cargará un grupo de pestañas tales como: Escritos: Se lista los escritos de cada desafío aceptados por el estudiante de modo individual, desde el cual puede acceder al editor de texto pulsando en “Editar” (paso 3). 44 Creactiva: Application for the promotion of Creative Writing UCM Figura 6.45: Mensajería. 6.4. Usuario Administrador El rol de “Administrador” permite la administración de toda la plataforma, desde la gestión de grupos de los profesores hasta la gestión de solicitudes de nuevos usuarios. 6.4.1. Módulo grupos administrador Desde esta vista se enumera los grupos activos existentes de los profesores, como se observa en la figura 6.46. En la parte superior se muestra un buscador para aplicar un filtrado en la búsqueda de grupos,junto a la información resumida de cada grupo se muestra el botón “Ver Grupo”, que lleva a su vista detallada. Figura 6.46: Gestionar grupos. 6.4.2. Módulo usuarios Esta ventana muestra la lista de todos los usuarios registrados (ver figura 6.47). Pulsando el botón “Ver perfil” se accede a la gestión del usuario seleccionado. 51 Creactiva: Application for the promotion of Creative Writing UCM Figura 6.47: Lista de usuarios dados de alta. 6.4.3. Módulo solicitantes Esta vista recopila una lista de usuarios, tanto profesores como alumnos, que han completado el registro y están a la espera de su aprobación (ver figura 6.48). Al acceder desde el botón “Ver perfil” el administrador puede ver la información del nuevo usuario y aprobar la solicitud de registro (ver figura 6.49). Figura 6.48: Datos del grupo. 52 Creactiva: Application for the promotion of Creative Writing UCM Figura 6.49: Datos del grupo. 6.4.4. Módulo información del grupo En esta ventana podemos ver la información correspondiente a un grupo en las siguientes pestañas: Datos: Desde este espacio el administrador puede renombrar y desactivar el grupo (paso 1), así como identificar al profesor creador del grupo y ver su perfil (paso 2), observe la figura 6.50. Figura 6.50: Datos del grupo. Estudiantes: Se despliega el listado de los estudiantes miembros del grupo seleccionado, desde el cual podemos acceder al perfil de cada uno pulsando “Ver perfil” (paso 1), observe la figura 6.51. 53 Creactiva: Application for the promotion of Creative Writing UCM Figura 6.51: Listado de estudiantes. 6.4.5. Módulo perfil del estudiante Datos: El administrador desde esta pestaña puede invitar (paso 1) o expulsar a un estudiante de un grupo (paso 2) y desactivar la cuenta (paso 3), ver la figura 6.53 . Figura 6.52: Perfil del estudiante. Figura 6.53: Gestionar perfil del estudiante. 54 Creactiva: Application for the promotion of Creative Writing UCM Escritos: Sobre esta acción el administrador solo puede visualizar los escritos que el estudiante esta realizando o ha finalizado (paso 1), ver la figura 6.54 . Figura 6.54: Escritos del estudiante. 6.4.6. Módulo perfil del profesor Datos: En esta pestaña se expone los datos del profesor y el administrador pulsando “desactivar usuario” podrá inutilizar la cuenta del profesor como se muestra en la figura figura 6.55. Figura 6.55: Perfil del profesor. Grupos: Se listan los grupos creados por el profesor como se puede ver en la figura 6.56, y el administrador pulsando “Ver grupo” se redirigirá a la figura 6.50. 55 Creactiva: Application for the promotion of Creative Writing UCM Figura 6.56: Grupos del estudiante. 56 Capítulo 7 Contribuciones individuales En este capitulo cada uno de los integrantes de Creactiva explicará sus contribuciones al proyecto, de forma que se pueda valorar el trabajo realizado individualmente.Cabe destacar que este proyecto durante su desarrollo fue compuesto equitativamente entre todos los miembros destacando la buena comunicación, esfuerzo y motivación. 7.1. Luis Alberto Jaramillo Pulido Mi contribución en el proyecto para el desarrollo de la aplicación se ha llevado a cabo a través de varias etapas estructurándose de la siguiente forma. 7.1.1. Primera toma de contacto con el cliente Nuestra primera reunión se celebró el pasado mes de octubre vía Google Meet con nuestro tutor Adrián Riesco y nuestra “cliente” Cora Requena. En esta primera toma de contacto se nos expuso de forma más detallada la temática del trabajo fin de grado y una idea aproximada de la aplicación web a desarrollar. Se me encomendó la tarea de mantener periódicamente la comunicación por correo para celebrar las reuniones entre los profesores y mis compañeros. 7.1.2. Etapa de Investigación Durante esta etapa después de habernos reunido en una primera instancia con el cliente, me propuse a realizar una labor de búsqueda de aplicaciones similares como iDeas for Writing,Story Planer,Literautas entre otros, con la finalidad de mejorar la comprensión sobre la aplicación. También en esta etapa colaboré en la elaboración de las funcionalidades que va a requerir la aplicación y en la elección de las tecnologías que se van a utilizar en el proyecto. Como no disponía de conocimiento previo sobre algunas tecnologías como NodeJS y ReactJS, comencé a investigar de distintas fuentes como videotutoriales de youtube, web 57 Creactiva: Application for the promotion of Creative Writing UCM o apuntes que me prestaron mis compañeros. Esto me ayudó a adquirir un mayor grado de conocimiento y aptitudes para el desarrollo del proyecto. 7.1.3. Diseño del Prototipo Posteriormente decidimos elaborar el prototipo de la aplicación utilizando la herramienta Balsamiq Cloud para visualizar resultados provisionales y poder mostrarlos al cliente, con el fin de determinar una mejor comprensión de los requerimientos del cliente. Por ello nos repartimos las vistas de los roles de la aplicación: administrador, profesor y estudiante entre los tres miembros del equipo, encargándome del diseño de los mockups de la vista del estudiante en el prototipo. 7.1.4. Gestión del proyecto Antes de empezar el proceso de desarrollo del proyecto, era necesario organizar nuestro entorno de trabajo. En una primera instancia creé un documento Excel para organizar las tareas en el Drive. Este documento nos serviría para ir apuntando los requisitos de la aplicación como historias de usuario. El problema que nos encontramos usando una hoja de cálculos de Excel, es la dificultad de gestionar el proyecto cuando existen muchos requisitos, siendo difícil hacer un seguimiento de las tareas de mis compañeros, cuando existen muchas historias de usuarios, resultando la colaboración improductiva por la mala gestión del tiempo y del equipo. Por ello trasladé a mi equipo la necesidad de una herramienta de gestión de proyecto como Trello. En esta plataforma de gestión de proyectos me encargué de organizar todos los artefactos de la metodología Scrumban como el Product Backlog ySprint Backlog, y utilizar el límite de trabajo en progreso To Do,Doing,Done, para estar al tanto de todo el flujo de trabajo de las tareas de mis compañeros y hacer una mejor gestión del tiempo y del equipo. 7.1.5. Colaboración en el Repositorio Todo el equipo podía trabajar conjuntamente en un mismo proyecto a través de un repositorio remoto común de Github. Mi trabajo en esta parte se basa en la colaboración de la gestión del proyecto mediante el seguimiento del proyecto, realización de cambios, actualización o incorporación de nuevas funcionalidades en la aplicación. En un primer momento todas las operaciones de gestión del control de versiones se hacían a través de la línea de comandos del Git. Más adelante mi compañera Génesis nos sugirió el uso de una aplicación cliente de Git llamada Gitkraken, que nos permitía hacer todas las gestiones del proyecto desde una interfaz de cliente, haciendo que todo el proceso de la gestión del repositorio resulte más sencillo. 58 Creactiva: Application for the promotion of Creative Writing UCM 7.1.6. Diseño de la Base de datos Colaboré en el diseño de la base de datos en la etapa inicial de desarrollo, diseño de la base de datos para cada uno de los roles, definición de las tablas de la aplicación, relaciones entre tablas, etc. Durante todo el proceso de desarrollo de la aplicación a medida que se iba incorporando nuevas funcionalidades agregué nuevas tablas a la base de datos como equipos, mensajería, multimedia de desafío y multimedia de escritos. 7.1.7. Implementación Una vez definido nuestra organización de trabajo, procedimos a la parte de la implementación del proyecto. Conseguí hacer una primera versión de conexión de la base de datos del servidor con el cliente y del inicio de sesión, siendo después mejorada por mi compañera Genesis, y también una versión inicial de las vistas del administrador, profesor y estudiante. Después nos dividimos el trabajo, en esta parte me encargue de toda la funcionalidad del estudiante y parte de las funcionalidades del profesor. Las funcionalidades que he implementado lo he estructurado en tres secciones, funciones generales de la aplicación, funciones del rol del estudiante, y funciones del rol del profesor. Funciones generales de la aplicación Las funciones generales de la aplicación he considerado las funcionalidades comunes en ambos roles de profesores y estudiantes. Editor de texto: Permite al profesor o estudiante escribir los textos de los desafíos o escritos en un editor de texto enriquecido, se ha dado la posibilidad de aportar variedad de estilos enriquecidos a sus textos mediante el acoplamiento de este API a la aplicación. Calendario: API utilizada para que el profesor pueda agregar una fecha de duración al desafío. Esto lo hace a través de un selector de fecha y hora, mediante un widget de interfaz gráfica de usuario. Registro de historial de colaboración del escrito: Trabajé en el desarrollo de una primera versión de registro mediante Socket.io, que guardase en un borrador del escrito, el historial de aportaciones de cada estudiante del equipo al hacer un escrito colaborativo. Esta implementación no se terminó de desarrollar, pero se ha tenido en cuenta como trabajo futuro. Multimedia en desafíos y escritos: Los profesores o estudiantes tienen la opción de aportar más recursos a sus desafíos o escritos mediante la incorporación de contenido multimedia como vídeos, ficheros de audio e imágenes, o eliminación de los archivos multimedia en desafíos o escritos. Almacenamiento multimedia en desafíos y escritos: Implementé la funcionalidad de subir los contenidos multimedia a un servidor web utilizando una plataforma de 59 Creactiva: Application for the promotion of Creative Writing UCM servicio de alojamiento en la nube Cloudinary, el inconveniente que tenía es que era de pago cuando excedías de un limite de capacidad de alojamiento de archivos en la plataforma, por eso decidimos que el almacenamiento multimedia de los desafíos o escritos fuese en el servidor local. Después de ello me encargué de la implementación de esta funcionalidad, donde cada profesor o estudiante dispone de una carpeta personal en el servidor, en el cual cada desafío o escrito tiene una carpeta propia donde se almacena el contenido multimedia de sus desafíos o escritos. También me ocupé de la implementación de la creación de una carpeta personal del usuario donde se almacena la foto de perfil del profesor o estudiante. Modales de confirmación y modales informativos: Modales de confirmación y modales informativos cuando un usuario ejecuta una acción en la plataforma. Avisos: Avisos en la plataforma cuando no existen desafíos, grupos, escritos, mensajes y equipos. Foto de perfil: Subida y actualización de la foto de perfil del estudiante al servidor. Funciones del rol de Estudiante Estas son las funcionalidades implementadas en el rol del estudiante. Listado de grupos: Permite al estudiante listar todos los grupos a los que pertenece. Listado de desafíos: Permite al estudiante listar los desafíos según el tipo de desafío: individuales o colaborativos. En la aplicación se puede acceder de dos formas, seleccionando un grupo y listando el desafío del grupo del estudiante, y la otra forma es listar todos los desafíos de distintos grupos. Creación de escritos: Permite al estudiante la creación escritos individuales o colaborativos, mediante el envío y validación de los datos del escrito. En escritos colaborativos permite que cualquier miembro del equipo puede crear un escrito. Edición de escritos: El estudiante puede editar un escrito individual o colaborativo si dispone de un equipo, mediante la actualización y validación de todos los campos del escrito. En escritos colaborativos permite que todos los integrantes del equipo puedan editar un mismo escrito. Listado de escritos: El estudiante puede listar todo tipo de escritos ya sean individuales o colaborativos. En la aplicación se puede acceder de dos maneras, seleccionando un grupo, listando los escritos con su correspondiente desafío del grupo del estudiante, y la otra manera es listar todos los escritos de distintos grupos del estudiante. Listado de mensajes: Los estudiantes tienen la opción de listar todos los mensajes recibidos en su bandeja. Envío de mensaje: En la aplicación existen dos formas de envío de mensajería o solicitudes, la primera forma es cuando un estudiante sin equipo envía una solicitud o mensaje a un propietario para unirse a un equipo, y la otra forma es cuando un propietario 60 Creactiva: Application for the promotion of Creative Writing UCM 7.3.3. Mecanismos generales de la aplicación: Sistema de filtrado por búsqueda dinámica: Empleado en múltiples lugares de la aplicación, esta herramienta de búsqueda filtra al introducir una clave de búsqueda al instante sin necesidad de pulsar un botón de buscar. Permite utilizar distintos campos de los datos para filtrar la información. Normalización del sistema de tarjetas en la vista: Ordena los distintos tipos de información en distintas tarjetas a las que se puede acceder desde un índice superior. Sistema de trato de errores: Se ha implementado un sistema de redirecciones que muestran cuándo ha habido un error interno en el servidor o si el usuario ha solicitado recursos inexistentes, asegurando así que nunca pierda el control sobre el flujo de la aplicación. Sistema de sustitución de imágenes de perfil: Coloca una imagen por defecto si un usuario no dispone de imagen de perfil en diferentes listados y vistas de perfil. Sistema de adaptación de ventanas al rol: Algunas funcionalidades, como los listados emplean las mismas clases independientemente de qué rol las acceda para mejorar su mantenibilidad. Este sistema permite a estas clases adaptarse a las necesidades de cada tipo de usuario y mostrar la información más relevante dependiendo de cuál sea el usuario conectado. Estructurado y diseño del servidor de datos: Una separación clara entre los diferentes componentes del funcionamiento del servidor, de manera que se mantenga el encapsulamiento y se pueda identificar de una manera clara y estructurada cada una de las funciones del mismo. Separa las funciones que pertenecen a cada uno de los roles de los usuarios, las funciones empleadas en común y la funcionalidad de la autenticación e ingreso. 7.3.4. Aportaciones a la memoria: La memoria ha sido realizada de forma colaborativa por los miembros del equipo. Por lo tanto, se muestran a continuación los apartados realizados completamente por la persona o en los que haya contribuido. Palabras clave: Enumerado de palabras clave para facilitar la búsqueda y categorización del proyecto. Introducción: Realización y traducción del capítulo en el que incluyen los apartados de la motivación de la creación del proyecto y los objetivos que se persiguen con su desarrollo. Resumen: Creación y traducción del capítulo introductorio que da una breve descripción del proyecto de Creactiva. Modelo de datos: Desarrolla el esquema del diseño de la información empleada por la aplicación. Añade el modelo entidad-relación como una manera de visualizar toda la estructura de un vistazo, así como el desarrollo de la base de datos SQL, donde se detalla cada entidad que forma parte de la misma. 67 Creactiva: Application for the promotion of Creative Writing UCM Conclusiones y trabajo futuro: Creación y traducción del capítulo que contiene los pensamientos finales y reflexiones de Creactiva, así como las posibilidades de expandirla en el futuro. Glosario: Este apartado define varios conceptos en los que se basa el funcionamiento de la aplicación. 7.3.5. Cronología Durante la época inicial del desarrollo, mientras planificábamos cómo estructurar la aplicación, propuse emplear las tecnologías de NodeJS yExpressJS para crear la parte del backend de la aplicación, ya que son tecnologías que pueden se pueden adaptar a diversos sistemas de manejo de la vista. Proveí de material e información al equipo sobre cómo emplear estas tecnologías según nuestras necesidades en el proyecto. Contribuí en la realización de mockups para generar un prototipo de la parte visual de la aplicación, principalmente de la parte de las ventanas profesor. Organizé un espacio colaborativo en Google Drive para que el equipo pudiese tener siempre disponible un espacio donde compartir cualquier archivo o diagrama que empleásemos durante el desarrollo. Al desconocer gran parte de cómo funcionaba ReactJS, estuve consultando diverso material, en parte proporcionado por el equipo para aprender sobre el mismo y realicé un pequeño proyecto de prueba para ver cómo empezar de cero a usarla. De forma similar estuve trabajando sobre cómo emplear la herramienta de control de versiones Git para poder trabajar en tándem con el resto del equipo. Me encargué de diseñar la parte del esquema de datos que se refiere a los usuarios de tipo profesor. Participé en la sesión conjunta donde todo el equipo diseñó en detalle la implementación de la base de datos. Una vez logrados estos avances en común, el equipo procedió a generar la estructura básica sobre la que se basa Creactiva, y cuando ya estaba creado el esqueleto que conecta la parte de la vista con el servidor de datos, se distribuyeron las tareas entre los miembros del equipo. Durante este desarrollo me encargué de las partes de la funcionalidad del administrador y del profesor, así como algunas mejoras generales. Durante la preparación de la presentación que se realizó con el personal de la Facultad de Ciencias de la Información, creé la encuesta que se repartió a los asistentes y contribuí a la presentación de diapositivas agregando la parte de los profesores, también exponiéndola durante la reunión. Por último colaboré a realizar y traducir diversos capítulos de la documentación del proyecto. 68 Capítulo 8 Evaluación de la encuesta realizada sobre Creactiva Una vez realizadas las funcionalidades más importantes de nuestra aplicación y mejoras en la calidad de estilo y diseño, se decidió por presentar una demostración de la plataforma a un grupo de dieciséis profesores de la Universidad Complutense de Madrid, el máster de escritura creativa. El objetivo al hacer esta presentación[13] era recoger diversas opiniones si Creactiva cumplía la expectativas de uno de los usuarios futuros a utilizar la aplicación. Al finalizar la exposición se dio inicio a una ronda de preguntas donde la mayoría de los profesores se vieron interesados pronunciando cuestiones y de las cuales surgieron ideas de implementar a futuro. Si bien, dada por terminada la presentación se envía una invitación a los correos de todos los participantes para realizar una encuesta sobre Creactiva. La siguiente información representa las preguntas y las respuestas de la encuesta [14]. Respuesta 1 Respecto a la noción sobre los objetivos de Creactiva el 100 % de los encuestados opinaron que ha sido explicito la descripción de las funcionalidades, otorgando la máxima nota con un “Muy de acuerdo” (ver el figura 8.1) . Figura 8.1: Resolución sobre la noción explicita de Creactiva . 69 Creactiva: Application for the promotion of Creative Writing UCM Respuesta 2 De acuerdo a los datos obtenidos el 50 % de los encuestados opinaron que ha sido muy sencillo e intuitivo, otorgando la máxima un “Muy de acuerdo”, mientras que el otro 50 % le ha asignado con un “De acuerdo” (ver el gráfico 8.2). Figura 8.2: Respuestas sobre la experiencia del usuario. Respuesta 3 Las opiniones obtenidas acerca de la solicitud de acceso de los estudiantes sea controlada por los profesores, el 100 % de los encuestados afirman un “sí” sobre mantener dichas restricciones en la aplicación (ver el gráfico 8.3). Figura 8.3: Resolución sobre el control de acceso a los estudiantes. Respuesta 4 Respecto en agregar funcionalidades de los encuestados, en este caso los profesores echaran en falta, el 100 % contestaron con una opinión personal sobre lo que a ellos les gustaría ver en la aplicación, véase en el gráfico 8.4 70 Creactiva: Application for the promotion of Creative Writing UCM Figura 8.4: Agregación de ideas extras para Creactiva . Respuesta 5 Esta última cuestión de la encuesta era de forma opcional, donde se pedía a los encuestados conocer sus áreas de trabajo, ya que, con estos datos se conseguiría analizar el perfil de los usuarios Creactiva, uno de los encuestados participantes respondió a esta pregunta como podemos observar en el gráfico 8.5 Figura 8.5: Perfil de usuarios para Creactiva . En conclusión, la cantidad de los datos no han sido suficientes para realizar un análisis deductivo de cada una de las preguntas y poder contrastar en detalle los porcentajes debido a que el alcance de los profesores encuestados solo fueron dos de dieciséis participantes en la presentación de la aplicación. Aún así, durante la presentación se recibieron una serie de opiniones muy positivas por parte de varios de los asistentes, expresando que deseaban emplear esta herramienta en su labor educativa. 71 Capítulo 9 Conclusiones y trabajo futuro Este capítulo contiene las reflexiones finales tras el trabajo realizado y las posibilidades que tiene de ser expandido en el futuro. 9.1. Conclusiones En este proyecto se ha desarrollado una plataforma web para promover la escritura creativa. Para ello se ha organizado la comunidad de usuarios en profesores que proponen desafíos y alumnos que siguen estas pautas para crear nuevas obras literarias. Se dispone de un sistema de grupos para poder organizar a los usuarios según sus intereses a la hora de escribir, así como un sistema para aportar comentarios y sugerencias sobre los escritos existentes. De igual manera se ha dado una mayor libertad creativa al usuario desarrollando un sistema que permita aceptar archivos multimedia como audio o vídeo para complementar sus escritos. Se han empleado nuevas tecnologías para el desarrollo de una interfaz sencilla y dinámica que sea cómoda de utilizar y, al mismo tiempo, no dificulte la tarea creativa. En consecuencia, el equipo ha investigado tecnologías web como ReactJS para su uso en la parte visual del proyecto, así como el uso de NodeJS yExpressJS para la implementación del servidor, estructurando el modelo de integración con una base de datos relacional en SQL. Conforme el desarrollo ha ido avanzando, se ha expandido el proyecto al integrar diversos componentes como tecnologías de autenticación y encriptado para aumentar la seguridad de la aplicación o bibliotecas como MaterialIU oReact Bootstrap para mejorar su aspecto visual. Se han empleado diversas herramientas para realizar el trabajo en grupo de forma remota, se ha empleado Github para mantener un control de versiones. Para gestionar el flujo del proyecto se ha creado un tablero en Trello, donde se organizan las tareas y su estado de desarrollo. Se ha mantenido la comunicación mediante reuniones rutinarias empleando herramientas como Google Meet yDiscord. Al ser Creactivauna plataforma ideada para que sirva de complemento a las clases de la Facultad de Ciencias de la Información se ha otorgado el derecho de admisión de nuevos estudiantes a los usuarios que ostenten el rol de profesores, permitiendo así mantener una comunidad creativa dentro del entorno académico. 72 Creactiva: Application for the promotion of Creative Writing UCM 9.2. Trabajo futuro Creactiva tiene la intención de ser una plataforma viva usada para fomentar la creatividad. Por tanto existen algunas funciones que podrían añadirse a la misma para hacer aún más completa la experiencia de usuario. Con esta intención se mantuvo una reunión con miembros de la comunidad educativa de la Facultad de Ciencias de la Información, buscando sus opiniones sobre la aplicación y futuras funcionalidades que podrían añadirse. Las ideas principales sobre líneas de trabajo futuras serían las siguientes: Posibilidad de exportar los escritos en formato PDF imprimible. Mantener un sistema de versiones de los escritos, permitiendo su lectura y revisión. Esta función también permitiría al estudiante volver a versiones anteriores para retomar su trabajo desde otro punto de vista. Posibilidad de que varios estudiantes trabajen simultáneamente sobre el mismo escrito cuando este sea colaborativo. Inclusión de un sistema de mensajería simultáneo para estas situaciones. Posibilidad de que los profesores puedan incluir comentarios sobre partes específicas del texto de un escrito para dar más detalle a sus opiniones y sugerencias. Posibilidad de los estudiantes a contestar dichos comentarios. Un sistema de plantillas para los profesores, de manera que puedan organizarse desafíos similares con una mayor comodidad. Posibilidad de crear una biblioteca que recoja los escritos de los estudiantes para consumo general de los usuarios. Ampliación del sistema de mensajería para que los estudiantes puedan solicitar a los profesores ser incluidos en sus grupos. Posibilidad de enlazar unos escritos con otros, permitiendo así la creación de sagas literarias y otros trabajos relacionados. Ampliación similar del sistema de desafíos para crear una modalidad encadenada que permita la creación de escritos sucesivos. 73 Capítulo 10 Concluding remarks and ongoing work This chapter contains the final thoughts on the work done as well as the ways it could be expanded in the future. 10.1. Concluding remarks This project consists in the development of an online platform that supports creative writing. In order to achieve this goal, the plattform’s user community has been split between teachers that create literary challenges and students that face these challenges by making new artistic work. A group system has been implemented that sorts users based on their interests as well as a system that facilitates providing feedback on existing writings. A higher level of creative freedom has been granted to the user by adding a media storage system that allows the usage of images, audio, and video files to complement their writings. The team has utilized new tecnologies in the creation of a dynamic and simple interface that is comfortable to use and, at the same time, does not hamper the creative experience. Because of this, the team has investigated techologies like ReactJS for the visual part of the project, as well as NodeJS and ExpressJS in the server implementation, using a relational SQL database in order to sort the data infrastructure. As development on the project advanced, it was expanded by integrating new components like authentication and encryption technologies, used to raise the platform security, and libraries like MaterialIU and ReactBootstrap, used to enhace the visuals aspects of the app. As the team has worked on the project by remote means, diverse tools like Github have been used for version control. A Trello board has been used to keep the workflow organized by sorting the different tasks by their level of development. Online tools like Google Meets and Discord have been used to host weekly meetings. Since Creactivais meant for use as a support tool on Facultad de Ciencias de la Información´s courses, teachers have the right to admit new students on the platform, giving them the tools to keep a creative comunity in a learning enviroment. 74 Creactiva: Application for the promotion of Creative Writing UCM 10.2. Future work Creactiva has the goal to be a live platform that is used to foment creativity. Because of this, there are some features that could be added to improve the user experience. With this in mind the team hosted a meeting with members of the educative community from the Facultad de Ciencias de la Información in order to gather feedback on the app and possible future additions. The main lines of future work are the following: Possibility of exporting writings as printable PDF files. Keeping a version control system for writings, that supports both reading and checking them. This feature would allow students to go back to previous work and resuming their writing from a different point of view. Possibility of students working in tandem on the same writing if it is collaborative. It could include a chat system supporting communication between writers. Possibility of tachers putting comments on specific parts of the text of a writing that would let them make more precise remarks. Possibility for the students to answer these comments. Atemplate system for teachers, that could ease the creation of similar challenges. Possibility of creating a library that houses all writings from students for everyone to enjoy. Expanding the messaging system in order to allow students to ask teachers to invie them to their groups. Possibility of linking writings to one another, allowing the creation of literary sagas as well as other related works. Expanding the challenge system in the same manner in order to create a chain challenge mode that enables the creation of successive writings. 75 Bibliografía [1] A. Nandaa, Beginning API Development with Node. js. Packt Publishing, Limited, 2008. https://ebookcentral.proquest.com/lib/universidadcomplutense-ebooks/ reader.action?docID=5477671. [2] A. Friends, “Documentation: Xampp.” https://www.apachefriends.org/es/faq_ windows.html. [3] Y. L. S. J. S. M. K. G. Elizabeth Naramore, Jason Gerner, Beginning PHP5, Apache, and MySQL Web Development. John Wiley Sons, Incorporated, 2005. https://ebookcentral.proquest.com/lib/universidadcomplutense-ebooks/reader. action?docID=225829. [4] R. Shah, “How to use trello.” https://blog.trello.com/ how-to-use-trello-to-write-a-book. [5] A. P. Umesh R Sharma, GitHub Essentials. Packt Publishing, Limited, 2018. https://ebookcentral.proquest.com/lib/universidadcomplutense-ebooks/reader. action?docID=5446049. [6] R. Somasundaram, Git : Version Control for Everyone. Packt Publishing, Limited, 2013. https://ebookcentral.proquest.com/lib/universidadcomplutense-ebooks/ reader.action?docID=1119761&query=. [7] S. G. Pérez, “Control de versiones: Gitkraken.” https://medium.com/@sergupe6/ control-de-versiones-por-qu%C3%A9-gitkraken-ee1f30b4a18f. [8] B. Team, “Documentation: Balsamiq.” https://balsamiq.com/wireframes/cloud/ docs/intro/. [9] D. Megida, “Uploading files using node.js and multer.” https://blog.logrocket.com/ uploading-files-using-multer-and-node-js/. [10] J. Puri, “React draft wysiwyg.” https://jpuri.github.io/react-draft-wysiwyg/#/ docs. [11] T. A. A. Reference, “Matt zabriskie.” https://axios-http.com/docs/api_intro. [12] T. React, “React bootstrap.” https://react-bootstrap.github.io/getting-started/ introduction/. [13] Creactiva, “Presentación de creactiva.” https://docs.google.com/presentation/ d/1-zirMi_NX-Z50iz3mSwgiauFPIXFYh6IDFujiLcg43o/edit#slide=id. gd448e9a636_0_49. 76