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

Un tableau de bord est une page web qui affiche des informations d’une manière claire et concise. Dans cette tâche, vous recevrez des données d’exemple sur différents appareils au sein d’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 principal objectif est de pratiquer :

• Flask
• routes
• templates
• envoyer des informations de Python vers le HTML
• les instructions if et les boucles for dans Jinja
• la création d’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. Utiliser des modèles

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

Les données doivent être transmises du code Python au modèle à l’aide de Flask. Vous devez utiliser Jinja pour afficher les informations dynamiquement.

La solution doit utiliser :

• des variables
• une boucle for
• une condition if

Vous ne devez donc pas saisir manuellement les informations sur tous les appareils 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 le tableau de bord

Il n’existe pas une seule bonne façon de résoudre cette tâche.

Réfléchissez à ce qui suit :

• Quelles informations sont les plus importantes ?
• Que l’utilisateur doit-il voir en premier ?
• Qu’est-ce qui ne doit pas être affiché ?
• Comment la statut peut-il être présenté clairement ?
• Comment rendre la page ordonnée même s’il y a beaucoup d’appareils ?
• 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