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

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

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

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

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

devices = [
    {
        "name": "الموجّهات الرئيسية",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "موجّه",
        "status": "متصل",
        "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": "متصل",
        "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": "غير متصل",
        "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": "متصل",
        "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": "تحذير",
        "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.

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

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

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

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

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

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

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

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

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

• متغيرات
• حلقة لـ for
• فحص إذا if

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

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

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

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

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

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

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

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

فكر في ما يلي:

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

المتطلبات

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

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

هل أنت مستعد؟

التسليم