Project Web

Escape game en ligne avec une communication des données en temps réel

Objectif

Pour ce projet, l'objectif est de développer une application web basée sur le concept d'un escape game avec un échange de données entre les joueurs en temps réel. Le projet se concentre principalement sur l'adaptation du tutoriel du jeu de cartes Unlock, qui sert d'introduction aux règles du jeu.

tutoriel Unlock

Cahier des charges et spécifications

Le cahier des charges mis en place est le suivant :

  • Réaliser une page d’accueil.
  • Réaliser une page de connexion et de création de compte.
  • Réaliser une page de profil accessible au utilisateur.
  • Réaliser un composant de constitution d’équipe.
  • Réaliser le plateau de jeu et les composant du scénario du tutoriel accessible aux équipes.
  • Réaliser un composant de messagerie.
  • Intégrer la communication en temps réel pour l’ensemble des fonctionnalités lié au plateau de jeu.
  • Concevoir une base de données.
  • Réaliser les tests de développements.

Pour chaque besoin mentionné dans le cahier des charges, l'accent est mis sur les fonctionnalités, les entrées et les sorties attendues afin de transformer ces besoins en spécifications structurées.

Spécifications

tableau des specifications

Diagramme de cas d'utilisation (Use Case Diagram)

Le diagramme de cas d'utilisation est un outil permettant de représenter les interactions entre les utilisateurs et le système. Il met l'accent sur les fonctionnalités du point de vue des utilisateurs ainsi que sur les cas d'utilisation, qui représentent les actions spécifiques que l'application propose. Ce diagramme facilite la communication et la compréhension des besoins fonctionnels du système.

Use Case Diagram

Diagramme de cas d'utilisation

Stack technique

Voici la liste des outils, langages et frameworks utilisés dans le cadre de ce projets :

  • Langage : JavaScript
    JavaScript est largement utilisé pour le développement web d'applications interactives.
  • Base de données : MongoDB
    MongoDB offre une structure de base de données flexible adaptée aux besoins changeants des applications web.
  • Environnement de développement : Node.js
    Node.js est une plateforme de développement qui permet de gérer les requêtes en temps réel, ce qui est essentiel pour les applications nécessitant des mises à jour instantanées.
  • Frameworks : Express.js et Jest
    Express.js simplifie la création d'applications web en offrant la possibilité d'intégrer des modules externes comme Socket.IO pour la communication bidirectionnelle en temps réel.
    Jest facilite la création, l'exécution et l'automatisation des tests, garantissant ainsi la qualité du code.
  • Gestion de versions : Git
    Git est un système de contrôle de version qui facilite le travail collaboratif en permettant de suivre l'évolution du code, de gérer les branches et de fusionner les modifications de manière efficace.

Voici la liste des outils, langages et frameworks utilisés dans le cadre de ce projets :

  • Langage : JavaScript
    JavaScript est largement utilisé pour le développement web d'applications interactives.
  • Base de données : MongoDB
    MongoDB offre une structure de base de données flexible adaptée aux besoins changeants des applications web.
  • Environnement de développement : Node.js
    Node.js est une plateforme de développement qui permet de gérer les requêtes en temps réel, ce qui est essentiel pour les applications nécessitant des mises à jour instantanées.
  • Frameworks : Express.js et Jest
    Express.js simplifie la création d'applications web en offrant la possibilité d'intégrer des modules externes comme Socket.IO pour la communication bidirectionnelle en temps réel.
    Jest facilite la création, l'exécution et l'automatisation des tests, garantissant ainsi la qualité du code.
  • Gestion de versions : Git
    Git est un système de contrôle de version qui facilite le travail collaboratif en permettant de suivre l'évolution du code, de gérer les branches et de fusionner les modifications de manière efficace.

Diagramme de déploiement (Deployment Diagram)

Le diagramme de déploiement représente l'architecture technique des différents composants matériels et logiciels de l'application. Il illustre leurs interactions dans l'environnement de déploiement. D'un côté, nous avons le navigateur, et de l'autre, le serveur web avec la base de données MongoDB. Ces composants communiquent entre eux à l'aide de Node.js et Express.js via des requêtes HTTP/HTTPS et l'API de Socket.io.

Deployment Diagram

diagramme de déploiement

Conception de l'application

Les étapes de la conception sont détaillées avec les réalisations à mettre en place pour le développement de l'application :

  • Initialisation du projet.
  • Intégration de la communication en temps réel.
  • Réalisation du front-end.
  • Mise en place de la messagerie.
  • Création de la base de données.
  • Réalisation des tests.
  • Réalisation des documentations.

Conceptions et réalisations

tableau de la conception

Les étapes de la conception sont détaillées avec les réalisations à mettre en place pour le développement de l'application :

  • Initialisation du projet.
  • Intégration de la communication en temps réel.
  • Réalisation du front-end.
  • Mise en place de la messagerie.
  • Création de la base de données.
  • Réalisation des tests.
  • Réalisation des documentations.
documentation utilisateur