لقد قمت ببناء نظام إدارة أكاديمية متكامل (Full Stack)

كانت كليتي تستخدم السجلات الورقية لتسجيل الحضور وجداول Excel للدرجات. وكانت الإعلانات تُعلق على اللوحات المادية. قرر فريقي رقمنة هذه العملية بالكامل.

قمنا ببناء Student Sphere.

يستخدم النظام ثلاث لوحات تحكم متميزة:

لوحة تحكم الطالب:

• عرض الحضور والأهلية
• التحقق من الدرجات
• تحميل الملاحظات الدراسية
• تسليم التكليفات رقميًا
• عرض إعلانات الفصل الدراسي

لوحة تحكم أعضاء هيئة التدريس:

• تحديث الحضور والدرجات
• رفع الملاحظات وتقارير المختبر
• تحديد المواعيد النهائية للتكليفات
• نشر الإعلانات لفصول دراسية محددة
• مراجعة تسليمات الطلاب

لوحة تحكم المسؤول (Admin):

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

التقنيات المستخدمة (Technical Stack):

الواجهة الأمامية (Frontend):

• HTML5 و CSS3 و Vanilla JavaScript
• بدون استخدام أطر عمل مثل React أو Vue
• ملف CSS واحد لجميع الصفحات
• تصميم متجاوب من الهواتف المحمولة إلى شاشات 4K

الواجهة الخلفية (Backend):

• Node.js و Express.js v5
• مصادقة JWT
• تشفير كلمات المرور باستخدام Bcrypt
• REST API مع أكثر من 30 نقطة نهاية (endpoints)

قاعدة البيانات والنشر:

• MongoDB Atlas
• استضافة الواجهة الأمامية على Netlify
• استضافة الواجهة الخلفية على Render
• تطبيق أندرويد تم بناؤه باستخدام Java عبر WebView

واجهنا عقبتين تقنيتين رئيسيتين.

التحدي 1: أداء الـ API كانت لوحة تحكم أعضاء هيئة التدريس تقوم في البداية بـ 46 طلب API منفصل لتحميل بيانات الطلاب. تسبب هذا في تأخير لمدة 14 ثانية. قمت باستبدال الطلبات الفردية باستعلام MongoDB $in واحد، مما قلل أوقات التحميل بشكل كبير.

التحدي 2: تطبيق الصفحة الواحدة (SPA) بدون React قمنا ببناء SPA قائم على الأدوار باستخدام Vanilla JavaScript فقط. قمنا بإدارة التوجيه (routing) والحالة (state) يدويًا. واستخدمنا استعلامات الوسائط (media queries) في CSS لضمان عدم وجود تمرير أفقي على الأجهزة المحمولة.

دروس مستفادة:

• البناء بدون أطر عمل يعلمك كيف تعمل تقنيات الويب من الداخل.
• تحسين الأداء أهم من إضافة ميزات جديدة.
• قرارات مخطط قاعدة البيانات (database schema) المبكرة تؤثر على المشروع بأكمله.
• يتطلب النشر إدارة دقيقة لـ CORS ومتغيرات البيئة (environment variables).

تم بناء هذا المشروع بواسطة خمسة طلاب من معهد Ramgovind للتكنولوجيا، كوديرما، تحت إشراف السيد Ajay Kumar Dangi.

الموقع المباشر: https://studentsphere0.netlify.app

مستودع الواجهة الأمامية على GitHub: https://github.com/sumankumarsinghrajput/studentsphere-frontend

مستودع الواجهة الخلفية على GitHub: https://github.com/sumankumarsinghrajput/studentsphere-backend

لقد قمت ببناء نظام إدارة أكاديمي متكامل (Full-Stack) لكليتي - إليكم الطريقة

خلال دراستي الجامعية، لاحظت أن العديد من العمليات الإدارية كانت تتم يدويًا أو باستخدام أنظمة قديمة وغير فعالة. من إدارة الحضور إلى تسجيل الدرجات، كان هناك الكثير من الفوضى. لذا، قررت بناء نظام إدارة أكاديمي متكامل لحل هذه المشكلات.

المشكلة

كانت الكلية تعتمد على العمليات اليدوية، مما أدى إلى:

• بطء في استرجاع البيانات.
• احتمالية حدوث أخطاء بشرية في تسجيل الدرجات.
• صعوبة في تواصل الطلاب مع أعضاء هيئة التدريس.

الحل

قمت بتطوير نظام ويب متكامل يربط بين الإدارة، أعضاء هيئة التدريس، والطلاب في منصة واحدة سلسة.

التقنيات المستخدمة (Tech Stack)

لقد استخدمت مجموعة MERN stack لبناء هذا المشروع:

• MongoDB: قاعدة بيانات NoSQL لتخزين بيانات الطلاب، المدرسين، والمواد.
• Express.js: إطار عمل لـ Node.js لبناء الـ API.
• React.js: لبناء واجهة مستخدم تفاعلية وسريعة.
• Node.js: بيئة تشغيل لتشغيل الخادم (Server-side).

بالإضافة إلى:

• Tailwind CSS: لتصميم واجهة مستخدم عصرية.
• JWT (JSON Web Tokens): لتأمين المصادقة (Authentication).
• Axios: لإجراء طلبات HTTP.

الميزات الرئيسية

1. لوحة تحكم المسؤول (Admin Dashboard)

يمكن للمسؤول إضافة أو حذف المستخدمين (طلاب، مدرسين)، إدارة المواد الدراسية، وتعيين المدرسين للمواد.

2. بوابة أعضاء هيئة التدريس (Faculty Portal)

يمكن للمدرسين:

• رفع الدرجات للطلاب.
• تسجيل الحضور والغياب.
• إدارة المحتوى الدراسي.

3. بوابة الطالب (Student Portal)

يمكن للطلاب:

• عرض جداولهم الدراسية.
• التحقق من درجاتهم.
• متابعة سجل الحضور الخاص بهم.

التنفيذ (Implementation)

الجانب الخلفي (Backend)

قمت ببناء RESTful API باستخدام Node.js و Express.js. استخدمت JWT لتأمين المسارات، حيث يتم التحقق من هوية المستخدم ودوره (Admin, Teacher, Student) قبل السماح له بالوصول إلى أي بيانات حساسة.

الجانب الأمامي (Frontend)

استخدمت React لبناء واجهة مستخدم ديناميكية. اعتمدت على Tailwind CSS لتنسيق العناصر وجعل التصميم متجاوبًا (Responsive) مع مختلف أحجام الشاشات.

التحديات التي واجهتها

أكبر تحدٍ كان تصميم مخطط قاعدة البيانات (Database Schema) لضمان ترابط البيانات بين الطلاب والمواد والمدرسين دون تكرار غير ضروري. كما أن التعامل مع إدارة الحالة (State Management) في React لضمان تحديث البيانات فور تغييرها في قاعدة البيانات كان يتطلب دقة عالية.

الدروس المستفادة

هذا المشروع لم يكن مجرد تمرين برمجي، بل كان تجربة حقيقية في:

• فهم دورة حياة تطوير البرمجيات (SDLC).
• التعامل مع البيانات المعقدة وتصميم قواعد البيانات.
• بناء واجهات مستخدم تركز على تجربة المستخدم (UX).