Ajoute un mini projet Flask en deuxième année

src/cours/CIEL2/02-python-flask/tp/activite1-cdc.md

@@ -0,0 +1,98 @@
+# Cahier des charges - Projet de monitoring - Preuve de concept
+
+## Contexte et problématique
+
+L'entreprise **PixelVault** est une jeune PME qui gère une solution cloud de partage de photos familiales ou entre amis. 
+
+Elle met en avant le respect de la vie privée de ses utilisateurices, la sécurité et la fiabilité de sa solution. 
+
+Actuellement, ses serveurs rencontrent des problèmes de saturation disque et de surcharge processeur ou réseau, perturbant la qualité de service.
+
+La société decide donc de mettre en place un système de surveillance des ressources pour pouvoir anticiper ces problèmes
+et les diagnostiquer plus rapidement.
+
+Elle envisage la création d'une solution sur mesure qu'elle souhaite pouvoir déployer sur ses serveurs.
+
+La société souhaite procéder par étapes, la première d'entre elles étant la réalisation d'un prototype
+qui sera mis en oeuvre sur une petite partie de son infrastructure. C'est cette première 
+étape qui est l'objet du présent cahier des charges.
+
+## Objectifs
+
+Les objectifs de cette première étape sont les suivants :
+- Prouver la **faisabilité technique** d’un système interne de supervision
+- Définir et valider les **besoins fonctionnels et techniques** des équipes d’exploitation
+- Concevoir une **interface visuelle simple et claire** adaptée à un usage quotidien
+
+## Périmètre
+
+Le prototype sera testé sur une seule machine de développement interne.
+Le système ne devra pas impacter les performances de cette machine.
+
+## Description fonctionnelle
+
+L'objectif du projet est que les équipes d'exploitation soient en mesure de :
+- **UC1** Visualiser l'état des ressources du serveur
+- **UC2** Recevoir une alerte visuelle en cas de dépassement d'un seuil critique
+
+
+### Cas d'usage
+
+![use cases](images/uc.svg)
+
+### Exigences
+
+```mermaid
+requirementDiagram
+requirement SysMon_R1 {
+  id: R1
+  text: "Surveiller les ressources système principales"
+}
+requirement SysMon_R2 {
+  id: R2
+  text: "Déclencher une alerte si un seuil critique est atteint"
+}
+requirement SysMon_R3 {
+  id: R3
+  text: "Afficher l’état en temps réel via un tableau de bord"
+}
+requirement SysMon_R4 {
+  id: R4
+  text: "Supporter plusieurs plateformes (Linux, Windows, Mac)"
+}
+requirement SysMon_R5 {
+  id: R5
+  text: "Utiliser Python 3 (Flask) pour le backend et HTML/CSS/JS pour le frontend"
+}
+
+SysMon_R1 - derives -> SysMon_R2
+SysMon_R1 - derives -> SysMon_R3
+SysMon_R1 - derives -> SysMon_R4
+SysMon_R4 - refines -> SysMon_R5
+
+```
+
+- **R1** - Surveiller les ressources système principales
+  - Utilisation CPU
+  - Utilisation mémoire
+  - Espace disque occupé
+  - Taux d'usage du disque (entrées/sorties)
+  - Entrées Sorties Réseau
+
+- **R2** - Déclencher une alerte si un seuil critique est atteint
+  - Lorsque des ressources dépassent un seuil d'usage supérieur à 80% de leur capacité, la ressource doit être fortement mise en avant sur le tableau de bord de façon à alerter la personne qui le surveille
+
+- **R3** - Afficher l’état en temps réel via un tableau de bord
+
+- **R4** - Supporter plusieurs plateformes (Linux, Windows, Mac)
+
+- **R5** - Utiliser Python 3 (Flask) pour le backend et HTML/CSS/JS pour le frontend
+  - Le système devra être multiplateforme. Par conséquent, le chef de projet impose Python 3 comme langage de programmation Back-end. En front, il faudra utiliser le tryptique HTML, CSS, JavaScript. Pour que l'ensemble fonctionnne, le framework Flask sera utilisé
+
+- **R6** - Versionnement du projet
+  - Le projet devra être versionné avec Git
+
+## Livrables attendus
+
+- Code du projet
+- Document de conception

src/cours/CIEL2/02-python-flask/tp/activite1-monitoring.md

@@ -0,0 +1,142 @@
+# Mini projet - Application de monitoring
+
+## Objectifs
+
+Voir le cahier des charges
+
+## Validation
+
+### Livrables
+
+Voir le cahier des charges
+
+### Critères d'évaluation
+
+- Technique
+  - Code fonctionnel
+  - Code lisible et maintenable
+  - Qualité et respect des bonnes pratiques
+- Documentation
+  - Documentation complète
+  - Documentation claire
+  - Qualité de la documentation (forme et rédaction)
+- Autonomie
+  - Connaissances mobilisées
+  - Recherches en autonomie
+  - Attitude face à la difficulté
+    - Lire correctement les messages d'erreur et les interpréter
+    - Explorer des pistes en autonomie
+    - Demander de l'aide lors d'un blocage
+  
+
+## Documents fournis
+
+- Cahier des charges
+- [Documentation de Flask](https://flask.palletsprojects.com/en/stable/)
+- [Documentation de psutils](https://psutil.readthedocs.io/en/latest/)
+- [Documentation HTML/CSS de Mozilla](https://developer.mozilla.org/fr/)
+
+## Étapes
+
+### O - Préparation
+
+**Objectif :** Installation des dépendances nécessaires au projet et initialisation du dépôt git
+
+```admonish travail
+1. Créer un environnement virtuel python et l'activer:
+    - `python -m venv .venv`
+    - (Windows) `.venv\Scripts\Activate.ps1`
+    - (Mac/Linux) `source .venv/bin/activate`
+2. Installer les paquets nécessaires dans l'environnement virtuel :
+    - `pip install flask psutil`
+3. Dans votre projet, copiez le fichier `.gitignore` fourni
+4. Créez votre fichier de documentation, que vous complèterez au fil du temps. Vous pouvez le mettre dans un répertoire `docs`
+5. Initialisez un dépôt git (`git init`) et faites un premier commit qui prend en compte uniquement votre documentation et le `.gitignore`. **Attention** le `.venv` et son contenu sont censé être ignorés par git, ne les ajoutez pas.
+```
+
+```admonish warning title="Attention"
+Attention à toujours travailler dans votre environnement virtuel
+```
+
+### 1 - Création d'un projet Flask
+
+**Objectif :** Créer un projet minimaliste et afficher "Hello, World!" sur une page web
+
+```admonish travail
+1. Créer un fichier `app.py` dans lequel vous copierez le code suivant :
+    ~~~python
+    from flask import Flask
+
+    app = Flask(__name__)
+
+    @app.route("/")
+    def hello_world():
+        return "<p>Hello, World!</p>"
+    ~~~
+2. Lancer le serveur avec la commande `flask --app app run`
+3. Vérifiez que votre page web s'affiche en allant sur [http://localhost:5000](http://localhost:5000)
+4. En l'état, il va vite devenir pénible de gérer nos pages HTML sous forme de chaînes de caractères dans le code python. Nous allons donc modifier le code au dessus pour utiliser un système de templates (des modèles dynamiques de pages web) pour séparer le code HTML du code Python.
+    1. Créer un répertoire `templates` et y ajouter un fichier `index.html`
+    2. Copier le contenu ci-dessous dans `index.html`
+        ~~~html
+        <html>
+            <head>
+                <title>{{ title }}</title>
+            </head>
+            <body>
+                <h1>{{ title }}</h1>
+            </body>
+        </html>
+        ~~~
+    3. Remplacer le code de votre fonction `hello_world` par celui-ci :
+        ~~~python
+        @app.route("/")
+        def hello_world():
+            title = "Hello, world!" 
+            return render_template("index.html", title=title)
+        ~~~ 
+        Prenez le temps de vous en imprégner et de bien comprendre. Utilisez la documentation et expérimentez.
+5. Relancez votre serveur, actualisez la page et vérifiez que cette fois votre `Hello, World!` s'affiche bien sous forme de titre
+6. Complétez votre documentation et faites un nouveau commit.
+```
+
+### 2 - Récupération des données et création du tableau de bord
+
+**Objectif :** Récupérer les données à surveiller et les afficher sur votre page web
+
+```admonish travail
+0. Lisez toute cette section avant d'avancer. Elle est longue et demande de l'autonomie.
+1. Utilisez la documentation de la librairie `psutil` pour trouver les fonctions dont vous aurez besoin pour récupérer les informations sur les ressources de votre machine.
+2. Modifiez la fonction `hello_world` pour qu'elle récupère les informations de votre machine (voir cahier des charges)
+    - Donnez lui un nom plus adapté
+    - N'hésitez pas à créer des sous-fonctions pour organiser le code de manière claire et lisible
+    - Stockez vos informations dans des variables ou structures de données adaptées
+3. Adaptez votre `index.html` ainsi que les paramètres fournis à `render_template` pour lui passer les variables nécessaires.
+    - Pour le moment, visez simple : affichez les données brutes, et essayez de les formater (côté back-end Python) pour qu'elles soient lisibles et compréhensibles.
+    - N'hésitez pas à les transformer pour que la valeur ait du sens (par exemple avec des pourcentages, ou en mettant des valeurs sous forme `valeur actuelle/valeur maximale`)
+4. Complétez votre documentation et faites des commit réguliers (dès que vous avez une donnée correctement récupérée et affichée par exemple).
+5. Lorsque toutes les données demandées dans le cahier des charges sont affichées, demandez une revue auprès de votre professeur. Puis passez à l'étape suivante.
+```
+
+### 3 - Amélioration du tableau de bord
+
+**Objectif :** Faire preuve de créativité pour afficher les informations de manière agréable et visuelle
+
+```admonish travail
+1. Nous allons maintenant ajouter une feuille de style à notre projet pour le rendre plus attrayant
+    1. Ajoutez la ligne suivante dans la section `<head>` de votre template `index.html` :
+    ~~~html
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    ~~~
+    La fonction `url_for` permet de générer à la volée une url pour des ressources spécifiques. Ici nous ajoutons un lien vers la feuille de style `styles.css`
+    2. Créez la feuille de styles `styles.css` dans un nouveau répertoire appelé `static`
+    3. Ajoutez le contenu suivant et vérifiez que votre titre principal s'affiche bien en bleu
+    ~~~css
+    h1 {
+        color: blue;
+    }
+    ~~~
+2. Réfléchissez à l'organisation visuelle de votre tableau de bord. Vous pouvez vous aider d'un schéma ou de mockups pour imaginer votre tableau de bord.
+3. Utilisez vos connaissances en HTML et CSS pour réorganiser et styler votre page. Faites preuve de créativité !
+4. N'oubliez pas de mettre à jour votre documentation et de faire des commits réguliers.
+```

src/cours/CIEL2/02-python-flask/tp/code/.gitignore

@@ -0,0 +1,216 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[codz]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#   Usually these files are written by a python script from a template
+#   before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py.cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+# Pipfile.lock
+
+# UV
+#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+# uv.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+# poetry.lock
+# poetry.toml
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#   pdm recommends including project-wide configuration in pdm.toml, but excluding .pdm-python.
+#   https://pdm-project.org/en/latest/usage/project/#working-with-version-control
+# pdm.lock
+# pdm.toml
+.pdm-python
+.pdm-build/
+
+# pixi
+#   Similar to Pipfile.lock, it is generally recommended to include pixi.lock in version control.
+# pixi.lock
+#   Pixi creates a virtual environment in the .pixi directory, just like venv module creates one
+#   in the .venv directory. It is recommended not to include this directory in version control.
+.pixi
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# Redis
+*.rdb
+*.aof
+*.pid
+
+# RabbitMQ
+mnesia/
+rabbitmq/
+rabbitmq-data/
+
+# ActiveMQ
+activemq-data/
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.envrc
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#   JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#   be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#   and can be added to the global gitignore or merged into this file.  For a more nuclear
+#   option (not recommended) you can uncomment the following to ignore the entire idea folder.
+# .idea/
+
+# Abstra
+#   Abstra is an AI-powered process automation framework.
+#   Ignore directories containing user credentials, local state, and settings.
+#   Learn more at https://abstra.io/docs
+.abstra/
+
+# Visual Studio Code
+#   Visual Studio Code specific template is maintained in a separate VisualStudioCode.gitignore 
+#   that can be found at https://github.com/github/gitignore/blob/main/Global/VisualStudioCode.gitignore
+#   and can be added to the global gitignore or merged into this file. However, if you prefer, 
+#   you could uncomment the following to ignore the entire vscode folder
+# .vscode/
+
+# Ruff stuff:
+.ruff_cache/
+
+# PyPI configuration file
+.pypirc
+
+# Marimo
+marimo/_static/
+marimo/_lsp/
+__marimo__/
+
+# Streamlit
+.streamlit/secrets.toml