Vous devez développer un tableau de bord réseau à l’aide de Python et Flask.

Un tableau de bord est une page web qui affiche des informations de manière claire et organisée. Dans cette tâche, vous recevrez des données d’exemple sur différents appareils dans un réseau, et utiliserez Flask et Jinja pour présenter ces informations.

L’objectif n’est pas encore de créer un véritable système de surveillance. Ici, votre priorité principale sera de pratiquer :

• Flask
• les routes
• les modèles (templates)
• envoyer des informations depuis Python vers le HTML
• les conditions if et les boucles for dans Jinja
• concevoir une page web propre et conviviale

Données que vous pouvez utiliser ✅

devices = [
    {
        "name": "Routeurs principaux",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "Routeur",
        "status": "en ligne",
        "response_time": 12,
        "location": "Salle des serveurs",
        "last_checked": "14:32:10",
        "uptime": "12 jours",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "Routeurs principaux du réseau"
    },
    {
        "name": "Serveur Web",
        "ip": "192.168.1.20",
        "hostname": "webserver.local",
        "device_type": "Serveur",
        "status": "en ligne",
        "response_time": 34,
        "location": "Salle des serveurs",
        "last_checked": "14:32:12",
        "uptime": "4 jours",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "Héberge le site web interne"
    },
    {
        "name": "Imprimante",
        "ip": "192.168.1.50",
        "hostname": "printer-01.local",
        "device_type": "Imprimante",
        "status": "hors ligne",
        "response_time": None,
        "location": "Classe 204",
        "last_checked": "14:32:14",
        "uptime": None,
        "open_ports": [],
        "os": "Inconnu",
        "notes": "Aucune réponse lors de la dernière vérification"
    },
    {
        "name": "PC Enseignant",
        "ip": "192.168.1.101",
        "hostname": "teacher-pc.local",
        "device_type": "Ordinateur",
        "status": "en ligne",
        "response_time": 18,
        "location": "Classe 204",
        "last_checked": "14:32:16",
        "uptime": "6 heures",
        "open_ports": [445],
        "os": "Windows 11",
        "notes": ""
    },
    {
        "name": "NAS",
        "ip": "192.168.1.30",
        "hostname": "storage.local",
        "device_type": "Serveur de stockage",
        "status": "alerte",
        "response_time": 87,
        "location": "Salle des serveurs",
        "last_checked": "14:32:18",
        "uptime": "38 jours",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "Temps de réponse élevé"
    }
]

Vous n’avez pas besoin d’afficher toutes les informations. Choisissez vous-même ce qui convient à votre tableau de bord. Vous pouvez également modifier, ajouter ou supprimer des données si vous le souhaitez, ou si vous estimez que certaines données sont inexactes (par exemple : peut-être faut-il exprimer la disponibilité en secondes ? 🤔).

La tâche

1. Créer un tableau de bord

Créez une page web qui affiche des informations sur les appareils du réseau.

Il vous appartient de décider à quoi le tableau de bord doit ressembler.

Vous pouvez par exemple utiliser :

• des cartes pour chaque appareil
• des tableaux
• des indicateurs d’état
• des sections
• des icônes
• des couleurs
• des statistiques ou des résumés

Le tableau de bord doit être facile à comprendre lorsque quelqu’un ouvre la page.

2. Utilisez Flask et les routes

L’application doit utiliser Flask.

Vous devez avoir au moins :

• une route qui affiche la page d’accueil/tableau de bord
• une route supplémentaire avec une autre fonctionnalité

À quoi sert cette route supplémentaire est à votre discrétion.

Elle peut par exemple :

• afficher des informations sur un appareil spécifique
• n’afficher que les appareils hors ligne
• afficher une page de statut dédiée
• afficher des informations plus détaillées
• afficher une simple page « À propos »

3. Utilisation des modèles

Les pages HTML doivent se trouver dans un dossier nommé templates.

Les données doivent être transmises depuis le code Python vers le modèle à l’aide de Flask. Vous devez utiliser Jinja pour afficher les informations de manière dynamique.

La solution doit utiliser :

• variables
• une boucle for
• une condition if

Vous ne devez donc pas écrire manuellement les informations sur tous les appareils directement dans le code HTML.

4. Afficher le statut de manière claire

Le tableau de bord doit faciliter la visualisation du statut des appareils.

Par exemple :

• 🟢 En ligne
• 🟡 Avertissement
• 🔴 Hors ligne

Vous pouvez utiliser du texte, du CSS, des icônes ou d’autres solutions visuelles.

5. Personnalisez votre tableau de bord

Il n’existe pas une seule bonne manière de résoudre cette tâche.

Réfléchissez à :

• Quelles informations sont les plus importantes ?
• Que l’utilisateur doit-il voir en premier lieu ?
• Qu’est-ce qui ne doit pas être affiché ?
• Comment le statut peut-il être présenté clairement ?
• Comment la page peut-elle rester épurée même si plusieurs appareils existent ?
• Vous pouvez utiliser CSS et éventuellement JavaScript si vous le souhaitez.

Exigences

La solution doit :

• utiliser Python et Flask
• utiliser au moins deux routes
• utiliser au moins un modèle HTML (template)
• envoyer des données de Python vers le template
• utiliser Jinja
• utiliser au moins une boucle for
• utiliser au moins une vérification if
• afficher plusieurs éléments du jeu de données
• avoir une manière claire d’afficher l’état

Terminé ?

Livraison