Merge pull request #1 from gab9281/dev-docs

Dev docs
This commit is contained in:
Gabriel Moisan Matte 2024-11-14 13:45:05 -05:00 committed by GitHub
commit 3dbddb35a0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 560 additions and 18 deletions

31
.github/workflows/create-docs.yml vendored Normal file
View file

@ -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

View file

@ -1,26 +1,29 @@
name: CI/CD Pipeline for Nginx Router name: create-documentation
on: on:
workflow_call:
workflow_dispatch:
push: push:
branches: [ main ]
jobs: jobs:
build_and_push_nginx: build-frontend:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Check Out Repo - name: Checkout
uses: actions/checkout@v2 uses: actions/checkout@v4
- name: Set up Docker Buildx
- name: Log in to Docker Hub uses: docker/setup-buildx-action@v3
uses: docker/login-action@v1 - name: Log in to the Container registry
uses: docker/login-action@v3
with: with:
username: ${{ secrets.DOCKERHUB_USERNAME }} registry: ghcr.io
password: ${{ secrets.DOCKERHUB_TOKEN }} username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Build and Push Docker image for Router - name: Extract metadata for Frontend Docker
uses: docker/build-push-action@v2 id: meta
uses: docker/metadata-action@v5
with: with:
context: ./nginx images: ghcr.io/${{ github.repository }}-frontend
file: ./nginx/Dockerfile tags: |
push: true type=ref,event=branch
tags: ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_ROUTER_REPO }}:latest type=semver,pattern={{version}}

1
documentation/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
site

2
documentation/deploy.py Normal file
View file

@ -0,0 +1,2 @@
from ghp_import import ghp_import
ghp_import('site', push=True)

View file

@ -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

View file

@ -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.

View file

@ -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
<p style="${ParagraphStyle(state.theme)}">${TextType({text: stem })}</p>
```
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.
`<div dangerouslySetInnerHTML={{ __html: TextType({text: questionContent}) }} />
`
Ce type de manipulation peut être utilisé dans d'autre environnement React si on veut éviter d'utiliser React-latex.

View file

@ -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.
}
```

View file

@ -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/).

View file

@ -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 <email>@<IP>
```
Tout d'abord, mettez à jour votre liste existante de packages :
```
sudo apt update
```
Ensuite, installez quelques packages prérequis qui permettent à apt d'utiliser des packages via HTTPS :
> [!WARNING]
> Si vous voyez l'erreur suivante, ARRÊTEZ. Contactez les STI pour résoudre le problème. \
> `Waiting for cache lock: Could not get lock /var/lib/dpkg/lock-frontend. It is held by process 10703 (apt)`
```
sudo apt install apt-transport-https ca-certificates curl software-properties-common
```
Ajoutez la clé GPG du référentiel Docker officiel à votre système :
```
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
```
Ajoutez le référentiel Docker aux sources APT :
```
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```
Mettez à jour à nouveau votre liste existante de packages pour que l'ajout soit reconnu :
```
sudo apt update
```
Assurez-vous que vous vous apprêtez à installer à partir du référentiel Docker plutôt que du référentiel Ubuntu par défaut :
```
apt-cache policy docker-ce
```
Vous verrez une sortie comme celle-ci, bien que le numéro de version pour Docker puisse être différent :
```Output
docker-ce:
Installed: (none)
Candidate: 5:26.0.0-1~ubuntu.22.04~jammy
Version table:
5:26.0.0-1~ubuntu.22.04~jammy 500
500 https://download.docker.com/linux/ubuntu jammy/stable amd64 Packages
5:25.0.5-1~ubuntu.22.04~jammy 500
500 https://download.docker.com/linux/ubuntu jammy/stable amd64 Packages
...
```
Installez Docker :
```
sudo apt install docker-ce
```
Vérifiez que Docker fonctionne :
```
sudo systemctl status docker
```
La sortie devrait être similaire à ce qui suit, montrant que le service est actif et en cours d'exécution :
```Output
● docker.service - Docker Application Container Engine
Loaded: loaded (/lib/systemd/system/docker.service; enabled; vendor preset: enabled)
Active: active (running) since Fri 2024-04-05 13:20:12 EDT; 1min 24s ago
TriggeredBy: ● docker.socket
Docs: https://docs.docker.com
Main PID: 19389 (dockerd)
Tasks: 10
Memory: 28.7M
CPU: 172ms
CGroup: /system.slice/docker.service
└─19389 /usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock
...
```
> [!NOTE]
> Si Docker ne roule pas, p.ex. vous voyez :
> ```
> ○ docker.service - Docker Application Container Engine
> Loaded: loaded (/lib/systemd/system/docker.service; enabled; vendor preset: enabled)
> Active: inactive (dead)
> ```
> Vous devez démarrer Docker :
> ```
> sudo systemctl start docker
> ```
## Étape 2 - Installation de Docker Compose
Créez un répertoire d'installation Docker Compose :
```
mkdir -p ~/.docker/cli-plugins/
```
Obtenez Docker Compose :
```
curl -SL https://github.com/docker/compose/releases/download/v2.26.1/docker-compose-linux-x86_64 -o ~/.docker/cli-plugins/docker-compose
```
Ensuite, définissez les permissions correctes pour que la commande docker compose soit exécutable :
```
chmod +x ~/.docker/cli-plugins/docker-compose
```
Pour vérifier que l'installation a réussi, vous pouvez exécuter :
```
docker compose version
```
## Étape 3 - Ajouter notre projet
Commencez par créer un nouveau répertoire dans votre dossier personnel :
```
mkdir ~/EvalueTonSavoir
```
Puis déplacez-vous dans le répertoire :
```
cd ~/EvalueTonSavoir
```
Créez un fichier `docker-compose.yaml` à partir du dépôt GitHub :
```
curl -SL https://raw.githubusercontent.com/ets-cfuhrman-pfe/EvalueTonSavoir/main/docker-compose.yaml -o docker-compose.yaml
```
> [!NOTE]
> Avant de continuer, veuillez noter qu'il est crucial de mettre à jour les variables d'environnement dans le script, car les valeurs actuelles sont des modèles génériques. Assurez-vous de personnaliser ces variables selon les besoins spécifiques de votre environnement avant d'exécuter le script.
Avec le fichier docker-compose.yml en place, vous pouvez maintenant exécuter Docker Compose pour démarrer votre environnement :
```
sudo docker compose up -d
```
Vérifiez que les services fonctionne :
```
sudo docker ps -a
```
## Conclusion
Félicitations ! Vous avez maintenant avec succès configuré et lancé EvalueTonSavoir sur votre serveur, prêt à être utilisé.

View file

@ -0,0 +1,18 @@
# A propos
## Lancer la documentation
Pour lancer la documentation, il faut installer python et entrer dans le dossier documentation.
Il faut ensuite installer les dépendances avec `pip install -r requirements.txt`.
Pour lancer le mode développement il faut executer `python -m mkdocs serve`
## Deploiement
Le code est automatiquement déployé par la github-action `create-docs.yaml`
Celle-ci ouvre le repo et fait les memes étapes que "lancer la documentation".
Il y a une différence, elle utilise `build` au lieu de `serve` pour ensuite publier avec l'outil [`ghp-import`](https://github.com/c-w/ghp-import).
La page est poussée sur la branche [`gh-pages`](https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir/tree/gh-pages) et ensuite publié en tant que [gh-page](https://pages.github.com/)
## Themes et Plugins
Si vous ajoutez des plugins, veuillez mettre a jour le fichier `requirements.txt`.
La documentation utilise [MkDocs](https://www.mkdocs.org/) avec [le theme matérial]((https://squidfunk.github.io/mkdocs-material/)). Il y a bien des fonctionalitées tel que les code-blocks qui peuvent être activés.
Vous pouvez avoir accès a la documentation ici : [https://squidfunk.github.io/mkdocs-material/reference/code-blocks/](https://squidfunk.github.io/mkdocs-material/reference/code-blocks/)

View file

@ -0,0 +1,21 @@
## À Propos
Ce projet représente une interface utilisateur React pour notre application.
## GIFT text format render (code source)
Le code original a été développé pour créer une extension VS afin de prendre en charge le format de texte GIFT.
Le code peut être trouvé ici: [https://codesandbox.io/s/gift-templates-iny09](https://codesandbox.io/s/gift-templates-iny09)
Nous avons décidé de réutiliser ce code car il fournit un aperçu proche de ce à quoi ressemblent les quiz dans Moodle. Ce qui est une plateforme bien connue à l'École de technologie supérieure (ÉTS).
Pour réutiliser le code, nous avons dû installer les packages NPM suivants:
- [katex](https://www.npmjs.com/package/katex) : Une bibliothèque JavaScript rapide et facile à utiliser pour le rendu mathématique TeX sur le web.
- [marked](https://www.npmjs.com/package/marked) : Un analyseur syntaxique et un compilateur de markdown. Construit pour la vitesse.
- [nanoid](https://www.npmjs.com/package/nanoid) : Un générateur d'identifiants de chaîne unique, sécurisé, convivial pour les URL et minuscule (108 octets) pour JavaScript.
- [gift-pegjs](https://www.npmjs.com/package/gift-pegjs) : Un analyseur GIFT pour JavaScript utilisant PEG.js.
- [@types/katex](https://www.npmjs.com/package/@types/katex) : Définitions TypeScript pour katex.
- [@types/marked](https://www.npmjs.com/package/@types/marked) : Définitions TypeScript pour marked.
- [@types/nanoid](https://www.npmjs.com/package/@types/nanoid) : Définitions TypeScript pour nanoid.

View file

@ -0,0 +1,23 @@
# A propos
EvalueTonSavoir est une plateforme open source et auto-hébergée qui poursuit le développement du code provenant de [https://github.com/ETS-PFE004-Plateforme-sondage-minitest](https://github.com/ETS-PFE004-Plateforme-sondage-minitest). Cette plateforme minimaliste est conçue comme un outil d'apprentissage et d'enseignement, offrant une solution simple et efficace pour la création de quiz utilisant le format GIFT, similaire à Moodle.
## Fonctionnalités clés
* Open Source et Auto-hébergé : Possédez et contrôlez vos données en déployant la plateforme sur votre propre infrastructure.
* Compatibilité GIFT : Créez des quiz facilement en utilisant le format GIFT, permettant une intégration transparente avec d'autres systèmes d'apprentissage.
* Minimaliste et Efficace : Une approche bare bones pour garantir la simplicité et la facilité d'utilisation, mettant l'accent sur l'essentiel de l'apprentissage.
## Contribution
Actuellement, il n'y a pas de modèle établi pour les contributions. Si vous constatez quelque chose de manquant ou si vous pensez qu'une amélioration est possible, n'hésitez pas à ouvrir un issue et/ou une PR)
## Liens utiles
* [Dépôt d'origine Frontend](https://github.com/ETS-PFE004-Plateforme-sondage-minitest/ETS-PFE004-EvalueTonSavoir-Frontend)
* [Dépôt d'origine Backend](https://github.com/ETS-PFE004-Plateforme-sondage-minitest/ETS-PFE004-EvalueTonSavoir-Backend)
* [Documentation (Wiki)](https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir/wiki)
## License
EvalueTonSavoir is open-sourced and licensed under the [MIT License](/LICENSE).

View file

@ -0,0 +1,25 @@
> [!NOTE]
> Chaque projet contient un fichier `.env.example` fournissant des exemples de configuration. Assurez-vous de consulter ce fichier pour vous inspirer des paramètres nécessaires à votre configuration.
> [!NOTE]
> Ce sont toutes les options de configuration. N'hésitez pas à ouvrir une PR si vous en voyez qui manquent.
## Options de Configuration Backend
| Variable d'Environnement | Description | Exemple | Optionnel |
|---|---|---|---|
| `PORT` | Le port sur lequel l'application fonctionne | 4400 | non|
| `MONGO_URI` | La chaîne de connexion pour se connecter à la base de données mongodb | `mongodb://localhost:27017` or `mongodb://127.0.0.1:27017` (the former can cause trouble on Windows depending on hosts files) | non|
| `MONGO_DATABASE` | Le nom souhaité pour la base de données | evaluetonsavoir | non|
| `EMAIL_SERVICE` | Le service utilisé pour les e-mails | gmail | non|
| `SENDER_EMAIL` | L'adresse e-mail utilisée pour l'envoi | monadresse@gmail.com | non|
| `EMAIL_PSW` | Le mot de passe de l'adresse e-mail | 'monmotdepasse' | non|
| `JWT_SECRET` | Le secret utilisé pour la gestion des JWT | monsecretJWT | non|
| `FRONTEND_URL` | URL du frontend, y compris le port | http://localhost:5173 | non|
## Options de Configuration Frontend
| Variable d'Environnement | Description | Exemple | Optionnel |
|---|---|---|---|
| `VITE_BACKEND_URL` | URL du backend, y compris le port | http://localhost:4400 | non|
| `VITE_AZURE_BACKEND_URL` | URL du backend, y compris le port | http://localhost:4400 | non|

35
documentation/mkdocs.yml Normal file
View file

@ -0,0 +1,35 @@
site_name: EvalueTonSavoir
theme:
name: material
features:
- content.code.copy
- content.code.select
- content.code.annotate
locale: fr
highlightjs: true
hljs_languages:
- javascript
- typescript
- css
- react
- yaml
- latex
- katex
- gift
use_directory_urls: false
plugins:
- search
- plantuml:
puml_url: https://www.plantuml.com/plantuml/
markdown_extensions:
- pymdownx.highlight:
anchor_linenums: true
line_spans: __span
pygments_lang_class: true
- pymdownx.inlinehilite
- pymdownx.snippets
- pymdownx.superfences

View file

@ -0,0 +1,6 @@
mkdocs
mkdocs[i18n]
mkdocs_puml
mkdocs-material
Pygments
ghp-import