Smart Vehicle Maintenance
تفاصيل العمل
المشروع عبارة عن Web Application لإدارة مراكز صيانة السيارات، بيساعد المركز في تسجيل العربيات الجديدة، ومتابعة العربيات الموجودة بالفعل، بالإضافة إلى تسجيل ومتابعة عمليات الصيانة.
المشروع بالكامل معمول باستخدام:
• HTML
• CSS
• JavaScript
وهو حاليًا Front-End فقط، بدون Back-End أو APIs.
Login
المشروع بيبدأ بصفحة تسجيل دخول.
للتجربة:
Username: admin
Password: admin
Home
بعد تسجيل الدخول بتظهر صفحة الـ Home، وفيها Navigation Bar يحتوي على:
Home / Add Vehicle / Services / Records / Logout
كل قسم بيظهر للمستخدم كأنه صفحة مستقلة، لكن المميز هنا إن المشروع عبارة عن Single Page Application (SPA)، وكل الأقسام موجودة داخل صفحة واحدة، والتنقل بينها بيتم باستخدام JavaScript و CSS بدون إعادة تحميل الصفحة.
في الـ Home بتظهر العربيات الموجودة في مركز الصيانة، بالإضافة إلى معلومات وعمليات الصيانة الخاصة بكل عربية.
كل عربية ليها Card خاصة بيها، وبتظهر فيها معلومات العربية وحالة الخدمات والصيانات.
وفي أعلى الصفحة موجود 3 Boxes بتعرض بشكل مباشر:
إجمالي عدد العربيات الموجودة
عدد العربيات أو الخدمات اللي قرب موعد صيانتها
إجمالي تكلفة عمليات الصيانة
Add Vehicle
من الصفحة دي تقدر تضيف عربية جديدة للمركز.
وبيتم تسجيل المعلومات الأساسية اللي يحتاجها مركز الصيانة، مثل:
• رقم العربية
• نوع العربية
• الموديل
• عدد الكيلومترات
وبمجرد إضافة العربية، بتظهر تلقائيًا في صفحة الـ Home ويتم تحديث البيانات والإحصائيات بشكل Dynamic باستخدام JavaScript.
Services :
الصفحة دي بتعرض الخدمات وعمليات الصيانة اللي بيقدمها المركز.
والـ Services الموجودة هنا مرتبطة بصفحة الـ Records، علشان المستخدم يقدر يختار نوع الخدمة أثناء تسجيل عملية صيانة جديدة.
Records :
الصفحة دي بتعرض سجل عمليات الصيانة الخاصة بالعربيات.
ومن خلالها تقدر:
• تشوف عمليات الصيانة السابقة
• تضيف عملية صيانة جديدة لعربية موجودة
• تختار العربية من قائمة Select مرتبطة بالعربيات اللي تمت إضافتها
• تختار الخدمة من قائمة الخدمات الموجودة في صفحة Services
وبمجرد الضغط على Add Service، بيتم إضافة سجل جديد وتحديث البيانات بشكل Dynamic.
طبعًا المشروع اتعمل وفقًا للقيود والمتطلبات المحددة من البشمهندسين في التدريب، وده خلاني مركز أكتر على تطبيق المفاهيم اللي اتعلمناها بدل إضافة Features أو تصميمات خارج نطاق المطلوب.
كمان حاليًا المشروع لا يستخدم Back-End أو Database أو localStorage، لذلك عند عمل Refresh للصفحة البيانات بتروح.
لكن إن شاء الله ممكن أرجع للمشروع بعدين وأطوره في Version جديدة، وأضيف عليه Features وتحسينات أكتر.
رابط المشروع موجود في أول تعليق
واللي حابب يجرب المشروع أو يشوف الكود والـ README هيلاقي كل التفاصيل هناك.