diff --git a/.github/workflows/create-docs.yml b/.github/workflows/create-docs.yml new file mode 100644 index 0000000..57496e8 --- /dev/null +++ b/.github/workflows/create-docs.yml @@ -0,0 +1,31 @@ +name: Publish docs via GitHub Pages +on: + workflow_call: + workflow_dispatch: + push: + branches: [ main ] + +jobs: + build: + name: Deploy docs + runs-on: ubuntu-latest + steps: + - name: Checkout main + uses: actions/checkout@v2 + + - name: Setup Python + uses: actions/setup-python@v5 + + - name: Install dependencies + working-directory: ./documentation + run: | + python -m pip install --upgrade pip + pip install -r requirements.txt + + - name: Build docs + working-directory: ./documentation + run: mkdocs build --verbose --clean + + - name: Push docs to gh-pages + working-directory: ./documentation + run: python deploy.py \ No newline at end of file diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index a74566c..c48b1ea 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -1,26 +1,29 @@ -name: CI/CD Pipeline for Nginx Router - +name: create-documentation on: + workflow_call: + workflow_dispatch: push: - branches: [ main ] jobs: - build_and_push_nginx: + build-frontend: runs-on: ubuntu-latest steps: - - name: Check Out Repo - uses: actions/checkout@v2 - - - name: Log in to Docker Hub - uses: docker/login-action@v1 + - name: Checkout + uses: actions/checkout@v4 + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + - name: Log in to the Container registry + uses: docker/login-action@v3 with: - username: ${{ secrets.DOCKERHUB_USERNAME }} - password: ${{ secrets.DOCKERHUB_TOKEN }} - - - name: Build and Push Docker image for Router - uses: docker/build-push-action@v2 + registry: ghcr.io + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + - name: Extract metadata for Frontend Docker + id: meta + uses: docker/metadata-action@v5 with: - context: ./nginx - file: ./nginx/Dockerfile - push: true - tags: ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_ROUTER_REPO }}:latest + images: ghcr.io/${{ github.repository }}-frontend + tags: | + type=ref,event=branch + type=semver,pattern={{version}} + \ No newline at end of file diff --git a/documentation/.gitignore b/documentation/.gitignore new file mode 100644 index 0000000..d97e100 --- /dev/null +++ b/documentation/.gitignore @@ -0,0 +1 @@ +site \ No newline at end of file diff --git a/documentation/deploy.py b/documentation/deploy.py new file mode 100644 index 0000000..74c34f6 --- /dev/null +++ b/documentation/deploy.py @@ -0,0 +1,2 @@ +from ghp_import import ghp_import +ghp_import('site', push=True) \ No newline at end of file diff --git a/documentation/docs/developpeur/backend/api.md b/documentation/docs/developpeur/backend/api.md new file mode 100644 index 0000000..c77d10f --- /dev/null +++ b/documentation/docs/developpeur/backend/api.md @@ -0,0 +1,17 @@ +## À Propos + +Ce projet utilise Node.js Express pour créer un backend simple pour l'application. + +## Routes API + +Vous pouvez consulter toutes les routes utilisables du backend ici + +* User : https://documenter.getpostman.com/view/32663805/2sA2rCU28v#e942a4f4-321c-465b-bf88-e6c1f1d6f6c8 +* Quiz : https://documenter.getpostman.com/view/32663805/2sA2rCU28v#732d980b-02fd-4807-b5bc-72725098b9b0 +* Folders : https://documenter.getpostman.com/view/32663805/2sA2rCU28v#49ecd432-ccfc-4c8a-8390-b3962f0d5fd7 +* Images : https://documenter.getpostman.com/view/32663805/2sA2rCU28v#58382180-d6f0-492d-80c3-e09de1c368b8 + +## Routes Socket +> Cette section de la documentation est encore en création, il se peut qu'elle soit inexacte. + +Vous pouvez consulter toutes les routes utilisables des sockets ici : https://documenter.getpostman.com/view/32663805/2sA2rCU28v#7a8ad44c-e3ab-47f8-93e4-9fe0750e8254 \ No newline at end of file diff --git a/documentation/docs/developpeur/backend/base-de-donnees.md b/documentation/docs/developpeur/backend/base-de-donnees.md new file mode 100644 index 0000000..52bdb12 --- /dev/null +++ b/documentation/docs/developpeur/backend/base-de-donnees.md @@ -0,0 +1,11 @@ +# Type de base de données +La base de données est une mongoDB + +# Collections disponibles +* Files : Ceci est la collection qui contient les différents quiz et leurs questions. +* Folders : Ceci est la collection qui contient les dossiers qui servent à la gestion des différents quiz +* Images : C'est dans cette collection que sont stockées les images utilisées dans les quiz +* Users : Cette collection est utilisée pour la gestion des utilisateurs + +# Information sur la création +Lors du démarrage du projet, la base de données est créée automatiquement. diff --git a/documentation/docs/developpeur/backend/katex.md b/documentation/docs/developpeur/backend/katex.md new file mode 100644 index 0000000..73a6e5d --- /dev/null +++ b/documentation/docs/developpeur/backend/katex.md @@ -0,0 +1,39 @@ +# KaTeX + +KaTeX est le module qui s'occupe de formater les formules mathématiques selon la configuration donnée. + +Les formules entourées de $$ s'afficheront centrées sur leur propre ligne + +`.replace(/\$\$(.*?)\$\$/g, (_, inner) => katex.renderToString(inner, { displayMode: true }))` + +alors que les formules entourées de $ s'afficheront sur la même ligne + +`.replace(/\$(.*?)\$/g, (_, inner) => katex.renderToString(inner, { displayMode: false }))` + +La configuration du formatage peut être trouvée dans le fichier TextType.ts situé dans le dossier EvalueTonSavoir/client/src/components/GiftTemplate/templates + +C'est aussi dans ce fichier que le format markdown est pris en charge. + +## Éditeur de quiz +Pour l'affichage dans l'éditeur de quiz, on peut retrouver la classe TextType être appliquée sur différents éléments du dossier templates, par exemple la classe Numerical.ts. + +On peut voir ici que le TextType est appliqué sur le contenu de la question: +```typescript +
${TextType({text: stem })}
+``` + +Selon ce qui avait été écrit dans la question, la classe s'occupera de formatter les bonnes sections. + +## Affichage de questions + +Le module React-latex était utilisé pour le formatage des questions durant un quiz, mais cela a apporté le problème de disparité d'affichage entre la création et l'affichage des questions avec des formules mathématiques. +Les classes affichant les questions durant un quiz peuvent utiliser ce format, mais avec une manipulation de plus. + +Les variables contenant la question doivent d'abord avoir un type TextFormat pour pouvoir faire appel à la classe qui s'occupe du format sous le module KaTeX. +Puis, étant sur un environnement React, il faut utiliser la propriété dangerouslySetInnerHTML pour afficher la question correctement. + + +` + ` + +Ce type de manipulation peut être utilisé dans d'autre environnement React si on veut éviter d'utiliser React-latex. \ No newline at end of file diff --git a/documentation/docs/developpeur/backend/quiz.md b/documentation/docs/developpeur/backend/quiz.md new file mode 100644 index 0000000..ce3c666 --- /dev/null +++ b/documentation/docs/developpeur/backend/quiz.md @@ -0,0 +1,54 @@ +# Example de Quiz + +```gift +//-----------------------------------------// +// Examples from gift/format.php. +//-----------------------------------------// + +Who's buried in Grant's tomb?{~Grant ~Jefferson =no one} + +Grant is {~buried =entombed ~living} in Grant's tomb. + +Grant is buried in Grant's tomb.{FALSE} + +Who's buried in Grant's tomb?{=no one =nobody} + +When was Ulysses S. Grant born?{#1822:5} + +Match the following countries with their corresponding capitals. { + =Canada -> Ottawa + =Italy -> Rome + =Japan -> Tokyo + =India -> New Delhi + ####It's good to know the capitals +} + +//-----------------------------------------// +// More complicated examples. +//-----------------------------------------// + +::Grant's Tomb::Grant is { + ~buried#No one is buried there. + =entombed#Right answer! + ~living#We hope not! +} in Grant's tomb. + +Difficult multiple choice question.{ + ~wrong answer #comment on wrong answer + ~%50%half credit answer #comment on answer + =full credit answer #well done!} + +::Jesus' hometown (Short answer ex.):: Jesus Christ was from { + =Nazareth#Yes! That's right! + =%75%Nazereth#Right, but misspelled. + =%25%Bethlehem#He was born here, but not raised here. +}. + +//this comment will be ignored by the filter +::Numerical example:: +When was Ulysses S. Grant born? {# + =1822:0 #Correct! 100% credit + =%50%1822:2 #He was born in 1822. + You get 50% credit for being close. +} +``` \ No newline at end of file diff --git a/documentation/docs/developpeur/deploiements/local.md b/documentation/docs/developpeur/deploiements/local.md new file mode 100644 index 0000000..fff9869 --- /dev/null +++ b/documentation/docs/developpeur/deploiements/local.md @@ -0,0 +1,61 @@ +## Prérequis + +- Assurez-vous d'avoir Node JS installé en téléchargeant la dernière version depuis [https://nodejs.org/en](https://nodejs.org/en). + +- Ensuite, assurez-vous d'avoir accès à un serveur MongoDB de développement + +> Pour plus d'informations sur la base de données, veuillez consulter la documentation [[ici|Base-de-données]] + +- Cloner le projet avec la commande suivante : + ``` + git clone https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git + ``` + +## Étape 1 - démarrage du backend + +1. Naviguez vers le répertoire du projet en utilisant la commande suivante : + ``` + cd .\EvalueTonSavoir\server\ + ``` + +2. Assurez-vous de créer le fichier .env et d'y ajouter les paramètres appropriés. Vous pouvez vous inspirer du fichier .env.example pour connaître les paramètres nécessaires. + + [[Voir ici la documentation des configurations|Configurations]] + +3. Installez les dépendances avec la commande suivante : + ``` + npm install + ``` + +4. Démarrez le serveur en utilisant la commande suivante : + ``` + npm run dev + ``` + +5. Ouvrez votre navigateur et accédez à l'URL indiquée dans la console (par exemple, http://localhost:4400). + +## Étape 2 - Démarrage du frontend + +1. Naviguez vers le répertoire du projet en utilisant la commande suivante : + ``` + cd .\EvalueTonSavoir\client\ + ``` +> [!WARNING] +> Assurez-vous que le backend est en cours d'exécution avant de démarrer le frontend. \ +> Notez également l'URL du serveur pour le fichier `.env`. + +2. Assurez-vous de créer le fichier .env et d'y ajouter les paramètres appropriés. Vous pouvez vous inspirer du fichier .env.example pour connaître les paramètres nécessaires. + + [[Voir ici la documentation des configurations|Configurations]] + +3. Installez les dépendances avec la commande suivante : + ``` + npm install + ``` + +4. Démarrez le frontend avec la commande suivante : + ``` + npm run dev + ``` + +5. Ouvrez votre navigateur et accédez à l'URL indiquée dans la console (par exemple, http://localhost:5173/). diff --git a/documentation/docs/developpeur/deploiements/prod.md b/documentation/docs/developpeur/deploiements/prod.md new file mode 100644 index 0000000..a7ad466 --- /dev/null +++ b/documentation/docs/developpeur/deploiements/prod.md @@ -0,0 +1,195 @@ + +## Introduction + +Nous avons choisi d'exécuter les composantes de cette application avec Docker, car cela simplifie le processus de gestion des processus d'application. + +Voici un diagramme de déploiement expliquant la relation des composantes et comment les images Docker sont créées et déployées dans un serveur. + +```puml + @startuml + [Navigateur moderne (Windows/Android)] as Navigateur + [MongoDB] as MongoDB + Navigateur -> "docker-compose.yml" + [Docker] as Docker + "docker-compose.yml" -> [evaluetonSavoir-backend (Express, Javscript)] + [evaluetonSavoir-backend (Express, Javscript)] -> API_REST + [evaluetonSavoir-backend (Express, Javscript)] -> SOCKET_SALLE + [evaluetonSavoir-routeur (nginx)] as routeur + API_REST -> routeur + SOCKET_SALLE -> routeur + [evaluetonSavoir-frontend (Vue + TypeScript React)] as frontend + routeur -> frontend + [Docker hub] as DockerHub + [image-evaluetonSavoir-backend] -> DockerHub + [image-evaluetonSavoir-routeur] -> DockerHub + [image-evaluetonSavoir-frontend] -> DockerHub + [GitHub] as GitHub + "backend-deploy.yml" <- GitHub + "routeur-deploy.yml" <- GitHub + "frontend-deploy.yml" <- GitHub + Navigateur <--> evalsa.etsmtl.ca : chargée à partir des pages web + @enduml +``` + +## Prérequis + +Les STI nous a fourni un serveur avec les spécifications suivantes : + +- Ubuntu 22.04 LTS +- CPU : 4 cœurs +- RAM : 8 Go +- HDD : 100 Go +- Certificat SSL + +Les STI ont déjà effectué la configuration initiale de la machine selon leurs normes de mise en place d'un serveur pour assurer la bonne maintenance et sécurité au sein de leur infrastructure. Cette configuration inclut un utilisateur non root. + +Vous aurez également besoin d'un compte Docker Hub, ou vous pouvez simplement créer une PR sur le projet principal et elle sera déployée automatiquement. + +## Étape 1 - Installation de Docker + +Connectez-vous avec les informations d'identification de l'ETS : +``` +ssh