1. Introducción y objetivos
El proyecto WIQ es una iniciativa llevada a cabo en la Universidad de Oviedo, bajo la solicitud de la empresa de desarrollo de software HappySaw y contratada por RTVE, con el propósito de desarrollar una versión web del concurso "Saber y Ganar". El equipo de desarrollo comprometido a materializar este proyecto está formado por
-
Marina Seijo Gómez
-
Rubén Pérez Dafonte
-
David Muños Rio
-
Ángela Roza Moren
WIQ es una aplicación web que presentará un juego de preguntas y respuestas en el que los usuarios tendrán un tiempo limitado para seleccionar, entre diferentes opciones, la respuesta correcta a una pregunta.
1.1. Descripción de los requisitos
-
Los usuarios deberán registrarse para poder jugar o bien iniciar sesión si ya se han registrado previamente.
-
El sistema proporcionará preguntas de distintas temáticas junto con 4 posibles respuestas mediante el uso de Wikidata. Las preguntas serán variadas.
-
El sistema guardará información sobre la participación de los usuarios ofreciendo un histórico de: número de juegos, preguntas acertadas/falladas, tiempo etc.
-
El sistema ofrecerá una API de acceso a la información de los usuarios y de las preguntas generadas.
-
Habrá un límite de tiempo para responder cada pregunta.
1.2. Objetivos de calidad
Meta | Explicación |
---|---|
Usabilidad |
Nuestra aplicación tiene que ser fácil de usar para todos los tipos de usuario, incluso para uno sin experiencia. Las vistas deben ser claras e intuitivas, y el usuario tiene que poder navegar con fluidez por toda la aplicación. Además, se deben implementar los mecanismos necesarios para facilitar el uso de la aplicación por parte de los usuarios. |
Mantenibilidad |
El sistema debe poder ser modificado fácilmente para por ejemplo, poder añadir nuevos modos de juego o nuevas temáticas. Para esto será necesaria también una documentacion clara y completa. |
Estabilidad |
Nuestra aplicacion debe asegurar estabilidad, ya que se tratará de un juego con preguntas extraidas y respondidas en tiempo real, por lo que necesitamos que sea resistente a posibles fallos y caidas. |
Testeabilidad |
La solicitud debería poder pasar por diferentes pruebas y completarlas con éxito. Además, la aplicación debe estar preparada para todos tipos de usos lógicos por parte del usuario. |
1.3. Partes interesadas (Stakeholders)
Rol/Nombre | Contacto | Expectativas |
---|---|---|
Equipo de desarrollo/Estudiantes |
Marina Seijo Gómez, Rubén Pérez Dafonte, David Muños Rio, Ángela Roza Moreno |
Encargados del completo desarrollo y diseño de la aplicación. Aumentarán y mejorarán su experiencia como programadores y diseñadores. Además, aprenderán a trabajar en equipo. |
Profesores |
Jose Emilio Labra Gayo, Pablo González González, Cristian Augusto Alonso, Jorge Fidalgo Álvarez |
Evaluarán el resultado final de la aplicación y ofrecerán ayuda al equipo de desarrollo. |
RTVE |
Radiotelevisión Española |
Solicitantes del servicio. Esperan que los requisitos exigidos sean completados satisfactoriamente. |
Usuarios |
Cualquier usuario de la aplicación |
Serán quienes emplearán el servicio. Deberán encontrarlo entretenido y sencillo de usar. |
2. Restricciones de arquitectura
2.1. Restricciones técnicas
Restricción | Explicación |
---|---|
Docker |
El proyecto de desplegará en un Host Docker. |
Tecnología |
Se empleará React. |
Documentación |
Se usará la plantilla Arc42. |
Base de datos |
Se empleará MongoDB como base de datos por su sencillez y facilidad de uso. Además es la base de datos empleada en la base del proyecto. |
Pruebas |
Cobertura, Pruebas de aceptación (e2e), Pruebas de carga. |
WikiData |
Se empleará WikiData para obtener la información para generar las preguntas y respuestas. |
2.2. Restricciones organizativas
Restricción | Explicación |
---|---|
Reuniones |
Se realizarán reuniones semanales los lunes de 13:00 a 15:00. Estas reuniones se verán reflejadas en GitHub a través de un acta. Podrían realizarse reuniones entre semana si fuese necesario. |
GitHub Issues |
Para permitir al profesorado llevar un seguimiento del trabajo en equipo se emplearán los Issues de GitHub para reflejar la asignación de tareas así como el diágolo entre semana del equipo. |
Tamaño del equipo |
El equipo está formado por 4 personas. |
3. Alcance y Contexto del Sistema
3.1. Contexto de Negocio
Elementos |
Descripción |
Inputs |
Outputs |
WIQ |
La aplicación que gestiona el juego de preguntas. Utiliza los datos del usuario, Wikidata y MongoDB para generar y administrar el juego de preguntas y respuestas. |
Datos de registro del usuario, datos de Wikidata basados en el tipo de pregunta que se quiere obtener,búsquedas y registros de información de MongoDB relacionados con el sistema. |
Preguntas y respuestas generadas para el juego, historial de partidas y estadísticas del usuario. |
User |
Participa en el juego respondiendo preguntas y poseerá un historial de las partidas que jugó y sus estadísticas. |
Datos de registro. |
Historial de partidas y estadísticas. |
Wikidata |
Proporcionará los datos necesarios para generar preguntas y respuestas de manera automática. El propósito es acceder a esta información y se extraer aquellos datos que puedan resultar útiles para generar dichas preguntas. |
Datos en base al tipo de pregunta que se quiere obtener. |
Datos en base a la consulta para generar las preguntas y respuestas. |
Base de datos (MongoDB) |
Se encargará de guardar información pertinente de WIQ. |
Realización de búsquedas y registro de información asociada relacionados con el sistema. |
Cualquier dato que haya sido almacenado perteneciente al sistema. |
3.2. Contexto técnico
4. Estrategia de solución
4.1. Decisiones tecnologicas
-
React: Biblioteca de JavaScript que usaremos para implementar la interfaz gráfica. Su principal ventaja es que utiliza un enfoque basado en componentes, lo que significa que las interfaces de usuario se dividen en componentes reutilizables que encapsulan el estado y el comportamiento.
-
Docker: Unidad de software que utilizaremos para ejecutar la aplicación de manera aislada de otros procesos del sistema mediante el concepto de imágenes, que son plantillas de solo lectura que contienen el sistema operativo, las herramientas, las bibliotecas y el código fuente de una aplicación.
-
JavaScript: Lenguaje de programacion elegido por ser un lenguaje dinámico y flexible, muy común en la programacion web y multiplataforma.
-
Node.js: Entorno de ejecución de JavaScript elegido por su rendimiento y velocidad, lo que lo hace ideal para aplicaciones en tiempo real como juegos.
-
Github Desktop: Utilizado por algunos miembros del equipo como Github IDE.
-
Wikidata: Base de datos colaborativa y abierta que usaremos para extraer las preguntas para nuestro juego.
-
MongoDB: Base de datos no relacional, basada en un modelo de datos de documentos JSON, lo que nos facilitará la evolución del esquema sin requerir una estructura fija como en las bases de datos relacionales tradicionales.
4.2. ¿Cómo se van a alcanzar los objetivos de calidad?
-
Usabilidad: Nuestras interfaces serán intuitivas y fáciles de usar para cualquier persona gracias al framework React.
-
Mantenibilidad: La aplicación sera facilmente adaptable gracias a nuestro enfoque por componentes, lo que nos permitirá tener un código poco acoplado y con mucha cohesión.
-
Eficiencia: La conexión con la base de datos y Wikidata para extraer las preguntas será rápida para mantener la atención de los usuarios.
-
Estabilidad: Nuestra aplicación será resistente a caidas y fallos para poder permitir una buena experiencia de juego.
-
Testeabilidad: El equipo testeará la aplicacion manual y automaticamente mediante pruebas de obertura, pruebas de aceptación (e2e) y pruebas de carga.
5. Vista de bloques
5.1. Nivel 0:
Name | Responsibility |
---|---|
Usuario |
Usuario que interactuará con la aplicación. |
WIQ |
Responsable de la gestión del juego. |
WikiData |
Permite generar preguntas y respuestas. |
5.2. Nivel 1:
Name | Responsibility |
---|---|
Usuario |
Usuario que interactuará con la aplicación. |
WebApp |
Interfaz gráfica de usuario. Mostrará las preguntas junto con sus posibles respuestas. |
Microservicios |
Partes encargadas de distintas funcionalidades. |
MongoDB |
Base de datos. Almacenaje de información acerca de los usuarios y las preguntas generadas. |
WIQ |
Responsable de la gestión de la aplicación. Engloba la GUI, los microservicios y la base de datos. |
WikiData |
Permite generar preguntas y respuestas. |
5.3. Nivel 2:
Name | Responsibility |
---|---|
Usuario |
Usuario que interactuará con la aplicación. |
WebApp |
Interfaz gráfica de usuario. Mostrará las preguntas junto con sus posibles respuestas. |
UserService |
Gestiona la creación de nuevos usuarios. |
AuthService |
Gestiona la autenticación de los usuarios (Inicio de sesión). |
QuestionGenerator |
Realiza consultas a WikiData para generar las preguntas y respuestas. |
GameHistoryService |
Genera y consulta el historial de los usuarios. |
PerfilService |
Genera el perfil del usuario consultando su información en la base de datos. |
AllQuestionService |
Gestiona la API de preguntas. |
AllUsersService |
Gestiona la API de usuarios. |
GatewayService |
Gestión de las peticiones. |
MongoDB |
Base de datos. Almacenaje de información acerca de los usuarios y las preguntas generadas. |
WIQ |
Responsable de la gestión de la aplicación. Engloba la GUI, los microservicios y la base de datos. |
WikiData |
Permite generar preguntas y respuestas. |
6. Vista de ejecución
6.1. Funcionamiento de las partidas
Un usuario solicita comenzar una partida. La interfaz de usuario (WebApp) pide una pregunta al generador de preguntas (QuestionGenerator), proceso que se repetirá tantas veces como número de preguntas haya solicitado el usuario.
6.2. Generación de preguntas
Cuando la interfaz de usuario solicita una pregunta el generador de preguntas deberá realizar una consulta a Wikidata obteniendo así información para formular la pregunta y sus respuestas.
6.3. Visualización del histórico y perfil de usuario
Cuando el usuario solicite visualizar el histórico se enviará una petición al GameHistoryService quien proporcionará la información al usuario.
Cuando el usuario solicite visualizar su perfil se enviará una petición al PerfilService quien proporcionará la información de su perfil al usuario.
7. Vista de despliegue
Elementos | Descripción |
---|---|
Azure |
Servidor donde se desplegará la máquina virtual. |
Máquina virtual |
En la que se desplegará la aplicación. |
Motor de Docker |
Ejecutará los contenedores. |
Microservicios |
GameHistoryService, QuestionGenerator … Gestionarán la aplicación web. |
8. Conceptos transversales
8.1. Modelo de dominio
Usuario: Representa el cliente de nuestra aplicación. Podrán jugar a un numero ilimitado de juegos, y tendrán un único historicos en el que se almacenaran sus partidas y sus estadísticas.
Juego: Es la propia partida en sí. Un juego siempre será único debido a la aleatoriedad de las preguntas. Por tanto, un juego contendrá las preguntas que aparecen en el.
Pregunta: Las preguntas tendrán las posibles respuestas y la correcta almacenadas, junto con su enunciado y el tiempo que tarda en responderla el usuario.
Historico: Representan las estadísticas del jugador, con datos como el número de preguntas acertadas, falladas, tiempo medio de juego, además de las partidas jugadas y sus preguntas.
9. Decisiones de arquitectura
Durante el desarrollo de la aplicación, va a ser necesario abordar problemas a medida que surjan, lo que conlleva la toma de decisiones a lo largo del proceso. Aunque inicialmente se establecieron ciertas decisiones, estas se verán sujetas a cambios a lo largo del proyecto. En el siguiente cuadro se detallan algunas de las decisiones de diseño que se adoptaron actualmente debido a restricciones arquitectónicas:
Decisión |
Ventajas |
Desventajas |
React |
Relativamente sencillo de aprender en comparación con otras bibliotecas front-end, y su popularidad en la web sigue creciendo. |
No todos los componentes del equipo trabajaron con el. |
Node.js |
Plataforma de desarrollo eficiente y escalable para construir aplicaciones web y de red en tiempo real utilizando JavaScript. |
La ejecución de operaciones intensivas de CPU puede ser menos eficiente debido al modelo de un solo subproceso. |
Docker |
La implementación es rápida y permite mover y mantener aplicaciones con facilidad. Además, resulta sencillo gracias a los ejemplos disponibles de DockerFiles. |
Ningún miembro del equipo tiene experiencia con el. |
MongoDB |
No requiere activación manual y es gratuito, además de ser fácil de comprender. |
Es menos común para el grupo trabajar con bases de datos no relacionales. |
WikiData |
Ofrece una fuente de datos colaborativa, estructurada y de acceso libre que alimenta numerosas aplicaciones y proyectos. |
La fiabilidad y precisión de los datos pueden variar debido a su naturaleza colaborativa y abierta a ediciones de usuarios no verificados. |
Plantilla Arc42 |
Proporciona una estructura clara y completa para documentar la arquitectura de software, facilitando la comprensión y la comunicación entre los equipos de desarrollo. |
Puede resultar demasiado detallada y compleja para proyectos pequeños o simples. |
10. Requerimientos de calidad
10.1. Árbol de calidad
10.2. Escenarios de calidad
Requisito de calidad |
Escenario de calidad |
Prioridad |
Usabilidad |
Nuestra aplicación tiene que ser fácil de usar para todo tipo de usuario, incluso para uno sin experiencia. Las vistas deben ser claras e intuitivas, y el usuario tiene que poder navegar con fluidez por toda la aplicación. Además, se deben implementar los mecanismos necesarios para facilitar el uso de la aplicación por parte de los usuarios. |
Alto |
Estabilidad |
Nuestra aplicacion debe asegurar estabilidad, ya que se tratará de un juego con preguntas extraidas y respondidas en tiempo real, por lo que necesitamos que sea resistente a posibles fallos y caidas. |
Alto |
Mantenibilidad |
El sistema debe poder ser modificado fácilmente para por ejemplo, poder añadir nuevos modos de juego o nuevas temáticas. Para esto será necesaria también una documentacion clara y completa. |
Medio-alto |
Eficiencia |
La velocidad de conexión y navegación debe ser lo suficientemente rápida para mantener la atención de los usuarios y no aburrirlos, brindando una experiencia fluida a través de la aplicación. |
Medio-bajo |
Testeabilidad |
La solicitud debería poder pasar por diferentes pruebas y completarlas con éxito. Además, la aplicación debe estar preparada para todo tipo de usos lógicos por parte del usuario. |
Medio-bajo |
11. Riesgos y deuda técnica.
Riesgo | Explicación | Solución |
---|---|---|
Organización |
Es la primera vez que nos enfrentamos a realizar un proyecto de cero en el que no tenemos unas pautas a seguir y debemos organizarnos, diseñar y desarrollar en base a los requisitos propuestos. |
Realizar una análisis de los requisitos para comprender el proyecto solicitado. En base a este análisis dedicar tiempo para realizar una planificación detallada, en la que se incluya aspectos como: aprendizaje de nuevas tecnologías, prototipado y pruebas, implementación, redacción de la documentación etc. |
Tiempo disponible |
Al realizar este proyecto en paralelo a otras asignaturas el tiempo que tenemos disponible para el proyecto se reduce. |
Semanalmente se hace un reparto de trabajo. El peso del trabajo semanal puede variar en función del tiempo del que disponga cada miembro del equipo, pero asegurandonos de que al final del proyecto todos hayamos contribuido lo mismo. |
Docker |
Es una tecnología con la que ningun miembro del equipo ha trabajado. |
Dedicar tiempo de aprendizaje a esta tecnología. |
GitHub |
Aunque hemos trabajado previamente con Github estamos usando funcionalidades con las que aún no habíamos trabajado y por tanto, con las que no estamos familiarizados. |
Dedicar tiempo de aprendizaje. |
Comunicación |
La comunicación se realiza mayoritariamente en diferido debido a que cada miembro del equipo tiene sus propios horarios. Esto puede ralentizar al resolución de dudas de los miembros del equipo, problemas de implementación etc. |
Debemos hacer un esfuerzo para estar disponibles el mayor tiempo posible. Además si fuese necesario podrían realizarse reuniones a través de Discord. |
Documentación |
Previamente no habíamos realizado ninguna documentación técnica de un proyecto. |
Es fundamental dedicar tiempo a esta parte del proyecto así como comunicar posibles dudas tanto a otros miembros del equipo como al profesorado. |
12. Informe de pruebas
12.1. Pruebas de cobertura
Las pruebas de cobertura prueban la funcionalidad de la aplicación creando, al mismo tiempo, una métrica que indica cuanto del código creado está cubierto por dichas pruebas. Las pruebas se han realizado en todos los servicios de la aplicación, a fin de comprobar que la funcionalidad de estos es la esperada.
Para las pruebas de cobertura se ha utilizado, principalmente, las liberías:
-
testing-library/react
-
supertest
-
axios
-
sinon
A continuación, se explica para que se ha utilizado cada una de dichas librerías:
Librería | Contenido | Uso |
---|---|---|
testing-library/react |
Contiene todas las funciones necesarias para hacer pruebas con los componentes de REACT como: render, fireEvent, act o waitFor |
Para los tests de los componentes de REACT que se encuentran en webapp |
supertest |
La función request que se utiliza para realizar peticiones |
Para todas aquellas pruebas que requieran comprobar una petición a una URL, incluyendo el envío de parámetros y la comprobación de la respuesta |
axios |
Todas las funciones necesarias para hacer Mocks |
Para todos los tests que requerían del uso de mocks. Por ejemplo, para probar el juego hemos mockeado las llamadas al generador de preguntas, para no depender de este |
sinon |
Contiene la función stub que permite sobresscribir los métodos HTTP al realizar peticiones |
Principalmente, para los tests en los que había que simular un cierto valor de respuesta o un error en la petición sin necesidad de causar dicho error al hacer la petición |
Además de todas estas librerías externas, utilizamos, para practicamente todas las pruebas, el framework jest, muy utilizado para hacer las pruebas de proyectos que utilizan REACT, como es nuestro caso. Este framework es el que nos permite definir los casos de prueba y controlar las peticiones que realizamos utilizando, por ejemplo, la función spyOn que nos permite espionar una función o petición.
12.2. Pruebas de usabilidad
A pesar de no disponer del tiempo suficiente para realizar pruebas de usabilidad con muchos participantes decidimos, para detectar posibles mejoras, realizarlas con un número bajo de usuarios.
12.2.1. Resultados
Usuarios con un nivel informático alto
Observaciones
-
Rápida comprensión de la aplicación.
-
No encontraron problemas para acceder a todo el contenido de la aplicación.
-
Destacan poder filtar el ranking en base a diferentes valores.
-
Destacan que la interfaz de la aplicación es original y distinta a otras de este mismo tipo de juegos.
Propuestas
-
Mejora en los tiempos de respuesta de algunas preguntas.
-
Añadir música y/o sonidos.
-
Mejorar el tiempo de espera de las preguntas.
-
Añadir un sistema de cambio/recuperación de contraseña.
Puntuación media de los usuarios: 9.5
Usuarios con un nivel informático medio
Observaciones
-
Buena comprensión de la aplicación.
-
Dificultad para responder algunas preguntas.
-
En un principio escogieron un tiempo bajo. Al ver que algunas preguntas eran dificiles aumentaron el tiempo en las siguientes partidas, esto mejoró su experiencia.
-
No pueden ver el tiempo en algunas preguntas de imagenes.
Propuestas
-
Añadir preguntas más sencillas.
-
Intentar ajustar mejor el tamaño de las imagenes para que se pueda ver el tiempo.
Puntuación media de los usuarios: 8.25
Usuarios con un nivel informático bajo
Observaciones
-
Media/baja comprensión de la aplicación.
-
Mejor experiencia con la versión de móvil debido a una dificultad con el uso del ratón.
-
Dificultad para responder preguntas de informática, y alguna de cultura.
-
No accedieron al menú lateral por lo que no visualizaron todo el contenido de la aplicación.
-
Dificultad para leer algunos textos.
-
Entretenida y con una buena temática general.
Propuestas
-
Aumento del tamaño del letra.
Puntuación media de los usuarios: 7
13. Glosario
Término | Definición |
---|---|
API |
Application Programming Interface. Pieza de código que permite a diferentes aplicaciones comunicarse entre sí y compartir información y funcionalidades. |
Docker |
Plataforma software que permite crear, probar e implementar aplicaciones rapidamente empaquetando software en unidades estandarizadas llamadas contenedores. |
GitHub |
Servicio basado en la nube que aloja un sistema de control de versiones llamado Git. |
Plantilla Arc42 |
Estructura para documentas sistemas de software |
React |
Libreria de JavaScript para el desarrollo de aplicaciones móviles y web |
Software |
Conjunto de programas, instrucciones y reglas informáticas para ejecutar ciertas tareas en una computadora. |
Stakeholders |
Individuos o grupos interesados en un producto. |
Usabilidad |
Facilidad con que las personas pueden utilizar una herramienta particular o cualquier otro objeto fabricado por humanos con el fin de alcanzar un objetivo concreto. |
WikiData |
Es una base de conocimientos editada en colaboración y alojada por la Fundaciín Wikimedia |