- Le jeu permettra aux joueurs de participer à des quiz interactifs. Ces quiz se composeront de diverses questions, et les joueurs répondront en sélectionnant parmi les réponses proposées. Ce jeu vise à fournir une plateforme éducative et divertissante, pour apprendre et tester des connaissances de manière ludique.
- Technologies utilisées
- Configuration préalable
- Installation
- Fonctionnalités principales
- API Endpoints
- Déploiement
- Tests
- Contribution
- Auteurs
- Licence
- Java: Version 21
- Apache Maven: Version 3.9.2
- spring-boot-starter-data-jpa : Pour la couche de persistance des données en utilisant JPA (Java Persistence API).
- spring-boot-starter-web : Pour construire l'application web.
- spring-boot-devtools : Pour le rechargement automatique du code...
...
- TypeScript : Version ~5.1.0
- @angular/compiler : Pour compiler des templates Angular en code JavaScript exécutable.
- @angular/core: Pour les fonctionnalités essentielles d'Angular telles que la détection de changements, la dépendance injection, et la communication entre composants.
- @angular/material: ^15.2.9 (Angular Material) : Pour pour une interface utilisateur.
...
- rxjs: ~7.8.0 : Pour faciliter la gestion des événements asynchrones et des flux de données.
- Version : ^3.3.2
- Pour le style du Frontend.
- H2 : Pour les tests
- MySQL Connector J : Pour la connexion à la base de données MySQL.
- spring-boot-starter-security : Pour intègre la sécurité dans l'application.
- spring-boot-starter-test : Pour tester l'application Spring Boot.
- spring-security-crypto: 6.1.1 : Pour les fonctionnalités de cryptographie telles que le hashage et l'encodage de mot de passe.
- jjwt-api: 0.11.2 : Pour la création et la vérification des JSON Web Tokens (JWT).
- jjwt-impl: 0.11.2 : Pour la manipulation des JWT dans l'application.
- jjwt-jackson: 0.11.2 : pour le traitement (sérialisation/désérialisation) des données JSON dans les JWT.
- jwt-decode: ^3.1.2 : Pour décoder les JWT côté client.
- ModelMapper: 3.1.1 : Pour le mappage entre les modèles de données.
- Hibernate Validator: 8.0.0.Final : Pour que les données de l'application respectent les contraintes définies.
- Flyway MySQL : Pour gérer et appliquer les changements de schéma.
- SpringDoc OpenAPI Starter WebMvc UI: 2.1.0 : Pour la documentation interactive de API REST, le test et l'intégration.
- JUnit Jupiter : Utilisé pour le moteur de test JUnit 5, permettant l'écriture et l'exécution de tests automatisés.
- JaCoCo : Intégré pour la mesure de la couverture de code, assurant une couverture de test (complète et de qualité).
- Cypress : ^2.5.1 : Utilisé comme framework de test JavaScript de bout en bout (e2e).
- spring-boot-starter-mail : Pour les fonctionnalités de messagerie électronique.
- Docker et Docker Compose : Pour la conteneurisation et l'orchestration des services.
- Docker Hub : Pour le stockage et la gestion des images Docker.
- GitHub : Pour le contrôle de version et la gestion du code source.
- GitHub Actions : Pour l'automatisation des pipelines CI/CD (Intégration et Déploiement Continus).
Avant de commencer à utiliser ou à contribuer à ce projet, assurez-vous que votre environnement est correctement configuré. Suivez ces étapes pour préparer votre système :
- Node.js :
- Assurez-vous que Node.js est installé sur votre système.
- Visitez Node.js Download pour télécharger et installer la version appropriée pour votre système d'exploitation.
- Java Development Kit (JDK) :
- Ce projet nécessite JDK version 17.
- Téléchargez-le depuis Oracle JDK ou une autre source de votre choix.
- Installez le JDK et notez le chemin d'installation.
- Maven :
- Maven est nécessaire pour la gestion des dépendances et la construction du projet.
- Téléchargez et installez Maven depuis Apache Maven Project.
- Assurez-vous que Maven est ajouté à votre PATH système.
- Java HOME :
- Définissez
JAVA_HOME
dans vos variables d'environnement pour pointer vers le chemin d'installation de votre JDK. - Ajoutez
%JAVA_HOME%\bin
(Windows) ou$JAVA_HOME/bin
(Unix/Linux) à votre variable d'environnementPATH
.
- Node.js et NPM :
- Vérifiez que Node.js et npm (Node Package Manager) sont correctement installés en exécutant
node -v
etnpm -v
dans votre terminal/commande prompt. - Si vous rencontrez des problèmes, consultez la documentation de Node.js pour plus de détails.
- Maven HOME :
- Configurez
MAVEN_HOME
pour pointer vers votre répertoire d'installation Maven. - Ajoutez
%MAVEN_HOME%\bin
(Windows) ou$MAVEN_HOME/bin
(Unix/Linux) à votre variable d'environnementPATH
.
-
Ouvrez un terminal ou une fenêtre de commande et tapez les commandes suivantes pour vérifier que les installations ont été réussies :
mvn --version
java --version
node -v
npm -v
Suivez ces étapes pour assurer une configuration sans problème et commencer à travailler sur le projet.
- Naviguez vers le dossier du backend.
cd .\server
- Construisez le projet :
mvn clean install
- Exécutez le projet :
java -jar target/server-0.0.1-SNAPSHOT.jar
- Naviguez vers le dossier du frontend :
cd ..
cd .\client
- Installez les dépendances :
npm install
- Démarrer le serveur de développement :
ng serve
ng serve
- Dans ce projet, l'utilisateur aura la capacité de :
- S'authentifier : Les utilisateurs pourront se connecter à leur compte personnel, garantissant un accès sécurisé et personnalisé. Ils pourront renouveller leur mot de passe.
- Éditer leur profil : Ils auront la possibilité de modifier les informations de leur profil, comme leur nom d'utilisateur, leur photo de profil, et d'autres détails personnels.
- Créer des quizzes : Les utilisateurs pourront concevoir et publier leurs propres quizzes, définissant les questions, les réponses, et les paramètres relatifs à ces quizzes.
- Modifier leurs quizzes : Ils auront également la flexibilité de revenir et d'apporter des modifications à leurs quizzes déjà créés, permettant une mise à jour et une amélioration continues du contenu.
- Jouer aux Quizzes : Ces quiz se composeront de diverses questions, et les joueurs répondront en sélectionnant parmi les réponses proposées.
- GET
/http://localhost:8080/api/quiz/random
: Permet de retourner un quiz aléatoire. - POST
http://localhost:8080/auth/authenticate
: Permet d'authentifier un utilisateur par son username et mdp - ...
Ce document décrit les étapes du processus de déploiement automatisé pour notre application, utilisant GitHub Actions, un VPS (Virtual Private Server), Docker, NGINX, et Caddy.
- Développement
- Push sur GitHub et GitHub Actions
- Activation du Webhook et Script de Déploiement
- Docker Compose sur VPS
- Configuration NGINX
- Configuration de Caddy
- Exécution des Conteneurs
- Conclusion
Développement des fonctionnalités sur les branches main
⬅️ develop
feature
| fix
.
- Le code est poussé vers GitHub.
- Déclenchement du workflow GitHub Actions (
on-push.yaml
) :- Clonage du dépôt.
- Installation de JDK 17.
- Exécution des tests côté serveur (
server-test
). - Exécution des tests côté client (
client-test
). - Construction des images Docker (frontend et backend).
- Push des images sur DockerHub.
- Le push sur DockerHub active un webhook configuré dans
webhook.conf
. - Le webhook déclenche l'exécution du script
fetch-and-deploy.sh
sur le VPS.
- Docker Compose (
docker-compose.yml
) est utilisé pour orchestrer le déploiement des conteneurs sur le VPS.
- NGINX est configuré via
nginx.conf
sur le VPS pour router les requêtes.
- Caddy est configuré sur le VPS pour gérer le HTTPS et rediriger les requêtes vers NGINX.
- Les conteneurs Docker sont exécutés sur le VPS, lançant l'application.
Ce processus intègre le développement, les tests, GitHub Actions, DockerHub, un webhook, un script de déploiement sur VPS, et l'utilisation de Docker Compose, NGINX, et Caddy pour un déploiement et une exécution efficaces de l'application.
Pour exécuter les tests du backend, suivez ces étapes :
- Naviguer dans le répertoire du Backend :
cd server
./mvnw test
- Naviguer dans le répertoire du Frontend :
exécuter dans le navigateur (Choisir un navigateur + START E2E Testing in...)
cd .\client
ou dans le terminalenpx cypress open
npx cypress run
Nous accueillons chaleureusement les contributions à ce projet ! Si vous souhaitez contribuer, voici quelques lignes directrices à suivre :
-
Forker le Projet : Commencez par forker le dépôt pour apporter vos changements.
-
Créer une Branche : Créez une branche pour vos modifications (
git checkout -b feature/NouvelleFonctionnalité
). -
Apporter vos Modifications : Effectuez vos changements et ajoutez-les (
git add .
), puis committez-les (git commit -m 'Ajout de ma NouvelleFonctionnalité'
). -
Pousser vers la Branche : Poussez vos modifications vers votre dépôt forké (
git push origin feature/NouvelleFonctionnalité
). -
Ouvrir une Pull Request : Retournez sur le dépôt original et ouvrez une pull request pour vos modifications.
- Assurez-vous que vos modifications sont conformes à la licence CC BY-NC-SA 4.0.
- Vos contributions ne doivent pas être utilisées à des fins commerciales.
- Veuillez documenter clairement toutes les modifications ou ajouts de fonctionnalités.
- Assurez-vous que tout code ajouté respecte les standards de codage en vigueur dans le projet.
- N'oubliez pas d'inclure des tests si vous ajoutez de nouvelles fonctionnalités.
Les contributeurs doivent respecter un code de conduite basé sur le respect, la courtoisie et l'ouverture. Toute forme de harcèlement ou d'attitude toxique n'est pas tolérée.
Si vous avez des questions sur le processus de contribution, n'hésitez pas à ouvrir un ticket dans la section 'Issues' du dépôt GitHub.
- Michael Birepinte - Profil GitHub
- Axel Colliaux - Profil GitHub
- Mehdi Zidouni - Profil GitHub
Ce projet est réalisé dans un cadre éducatif pour l'obtention d'un diplôme français de concepteur développeur d'application. Il est sous licence Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) - voir le fichier LICENSE.md pour plus de détails.
Cette licence permet à d'autres de remixer, adapter et construire à partir de ce travail de manière non-commerciale, tant qu'ils créditent votre contribution et licencient leurs nouvelles créations dans les mêmes conditions.