# Mini projet - Application de surveillance de ressources

## 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.
```