يجب عليك تطوير لوحة معلومات للشبكة باستخدام لغة بايثون وفريمورك فلاكس (Flask).

اللوحة هي صفحة ويب تعرض المعلومات بطريقة واضحة ومنظمة. في هذه المهمة، ستحصل على بيانات تجريبية عن أجهزة مختلفة داخل الشبكة، وسيتعين عليك استخدام فلاكس وجينجا (Jinja) لعرض هذه المعلومات.

ليس الهدف إنشاء نظام مراقبة حقيقي بعد. هنا يجب أن تركز بشكل أساسي على التدرب على ما يلي:

• فلاكس (Flask)
• المسارات (Routes)
• القوالب (Templates)
• إرسال المعلومات من بايثون إلى هتمل (HTML)
• عمليات التحقق بـ IF وحلقات التكرار بـ FOR في جينجا
• إنشاء صفحة ويب مرتبة وسهلة الاستخدام

البيانات التي يمكنك استخدامها ✅

devices = [
    {
        "name": "الموجّه الرئيسي",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "موجّه",
        "status": "online",
        "response_time": 12,
        "location": "غرفة الخوادم",
        "last_checked": "14:32:10",
        "uptime": "12 يومًا",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "الموجّه الرئيسي للشبكة"
    },
    {
        "name": "خادم الويب",
        "ip": "192.168.1.20",
        "hostname": "webserver.local",
        "device_type": "خادم",
        "status": "online",
        "response_time": 34,
        "location": "غرفة الخوادم",
        "last_checked": "14:32:12",
        "uptime": "4 أيام",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "يعمل كموقع ويب داخلي"
    },
    {
        "name": "الطابعة",
        "ip": "192.168.1.50",
        "hostname": "printer-01.local",
        "device_type": "طابعة",
        "status": "offline",
        "response_time": None,
        "location": "الفصل 204",
        "last_checked": "14:32:14",
        "uptime": None,
        "open_ports": [],
        "os": "غير معروف",
        "notes": "لم تستجب في الفحص الأخير"
   },
    {
        "name": "حاسوب المعلم",
        "ip": "192.168.1.101",
        "hostname": "teacher-pc.local",
        "device_type": "حاسوب",
        "status": "online",
        "response_time": 18,
        "location": "الفصل 204",
        "last_checked": "14:32:16",
        "uptime": "6 ساعات",
        "open_ports": [445],
        "os": "Windows 11",
        "notes": ""
    },
    {
        "name": "خادم التخزين (NAS)",
        "ip": "192.168.1.30",
        "hostname": "storage.local",
        "device_type": "خادم تخزين",
        "status": "warning",
        "response_time": 87,
        "location": "غرفة الخوادم",
        "last_checked": "14:32:18",
        "uptime": "38 يومًا",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "زمن استجابة مرتفع"
    }
]

لا تحتاج إلى عرض جميع المعلومات. اختر بنفسك ما يناسب لوحة التحكم الخاصة بك. يمكنك أيضًا تعديل البيانات أو إضافتها أو حذفها إذا أردت، أو إذا كنت تعتقد أن بعض البيانات غير دقيقة (على سبيل المثال: ربما يجب أن يكون وقت التشغيل بالثواني؟ 🤔).

المهمة

1. أنشئ لوحة معلومات

أنشئ صفحة ويب تعرض معلومات حول الأجهزة في الشبكة.

يعتمد شكل لوحة المعلومات على اختيارك.

يمكنك على سبيل المثال استخدام:

• بطاقات لكل جهاز
• جداول
• مؤشرات حالة
• أقسام
• أيقونات
• ألوان
• إحصائيات أو ملخصات

يجب أن تكون لوحة المعلومات سهلة الفهم عند فتح الصفحة من قبل أي شخص.

2. استخدم Flask والمسارات (Routes)

يجب أن تستخدم التطبيق مكتبة Flask.

يجب أن تحتوي على الحد الأدنى من التالي:

• مسار واحد يعرض الصفحة الرئيسية/لوحة التحكم
• مسار إضافي بوظيفة أخرى

أنت من يقرر الغرض الذي يُستخدم له المسار الإضافي.

على سبيل المثال، يمكنه:

• عرض معلومات عن جهاز معين واحد
• عرض الأجهزة غير المتصلة فقط
• عرض صفحة حالة خاصة به
• عرض تفاصيل أكثر تفصيلاً
• عرض صفحة “حول” بسيطة

3. استخدم القوالب (Templates)

يجب أن تكون صفحات HTML مخزنة في مجلد يُسمى القوالب.

يجب إرسال البيانات من كود بايثون إلى القالب باستخدام فلاكس (Flask). يجب استخدام جينجا (Jinja) لعرض المعلومات ديناميكيًا.

يجب أن تستخدم الحل الآتي:

• متغيرات
• حلقة لـ (for-loop)
• فحص إذا كان (if-check)

إذن، عليك عدم كتابة معلومات جميع الأجهزة يدويًا داخل كود HTML.

4. عرض الحالة بطريقة واضحة

يجب أن يجعل لوحة التحكم من السهل رؤية حالة الأجهزة.

على سبيل المثال:

• 🟢 متصل
• 🟡 تحذير
• 🔴 غير متصل

يمكنك استخدام النص، أو CSS، أو الأيقونات، أو حلول بصرية أخرى.

5. اجعل لوحة التحكم ملكك

لا يوجد طريقة واحدة صحيحة لحل هذه المهمة.

فكر في ما يلي:

• أي المعلومات هي الأهم؟
• ماذا يجب أن يرى المستخدم أولاً؟
• ما الذي لا يحتاج إلى عرضه؟
• كيف يمكن عرض الحالة بوضوح؟
• كيف يمكن جعل الصفحة منظمة حتى لو كان هناك العديد من الأجهزة؟
• يمكنك استخدام CSS وJavaScript إذا رغبت في ذلك.

المتطلبات

يجب أن يحل الحل ما يلي:

• استخدام بايثون وفلاسك
• استخدام مسارات (routes) لا تقل عن اثنين
• استخدام قالب HTML واحد على الأقل
• إرسال البيانات من بايثون إلى القالب
• استخدام جينجا
• استخدام حلقة for واحدة على الأقل
• استخدام فحص if واحد على الأقل
• عرض عدة عناصر من مجموعة البيانات
• تضمين طريقة واضحة لعرض الحالة

هل أنت مستعد؟

التسليم