وصف المشروع

تطبيق ويب متقدم لإدارة المهام اليومية بكفاءة عالية. يوفر التطبيق واجهة سهلة الاستخدام لإضافة وتعديل وحذف المهام، مع إمكانية تصنيفها حسب الأولوية والموعد النهائي. تم تصميم التطبيق ليكون تطبيق ويب تقدمي (PWA) يمكن تثبيته على الأجهزة المحمولة واستخدامه بدون اتصال بالإنترنت.

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

• إضافة وتعديل وحذف المهام بسهولة
• تصنيف المهام حسب الأولوية (عالية، متوسطة، منخفضة)
• تحديد مواعيد نهائية للمهام مع تنبيهات
• فلترة المهام (كل المهام، المكتملة، غير المكتملة)
• البحث السريع في المهام
• حفظ البيانات محليًا باستخدام Local Storage
• إمكانية تصدير واستيراد المهام بصيغة JSON
• تصميم متجاوب مع دعم السحب والإفلات (Drag & Drop)
• إحصائيات تفصيلية عن الإنتاجية
• دعم الوضع الداكن

التقنيات المستخدمة

• HTML5: للبنية الدلالية والعناصر التفاعلية
• CSS3: للتصميم المتقدم مع Animations و Transitions
• JavaScript ES6+: للمنطق البرمجي وإدارة الحالة
• Local Storage API: لحفظ البيانات محليًا
• Service Workers: للعمل بدون اتصال (PWA)
• Drag and Drop API: لإعادة ترتيب المهام

التحديات والحلول

كان التحدي الأكبر هو إدارة حالة التطبيق (State Management) بشكل فعال، خاصة مع تعدد العمليات المتزامنة. تم حل ذلك من خلال تطبيق نمط Observer Pattern وفصل المنطق البرمجي عن واجهة المستخدم. كما تم تحسين الأداء من خلال استخدام Debouncing للبحث و Throttling لأحداث السحب والإفلات.

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

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

نماذج من الأكواد البرمجية

فيما يلي بعض الأمثلة على الأكواد المستخدمة في المشروع:

JavaScript - إدارة المهام باستخدام Local Storage

// حفظ المهام في Local Storage
function saveTasks(tasks) {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// تحميل المهام من Local Storage
function loadTasks() {
    const tasks = localStorage.getItem('tasks');
    return tasks ? JSON.parse(tasks) : [];
}

// إضافة مهمة جديدة
function addTask(title, priority, deadline) {
    const tasks = loadTasks();
    const newTask = {
        id: Date.now(),
        title,
        priority,
        deadline,
        completed: false,
        createdAt: new Date().toISOString()
    };
    tasks.push(newTask);
    saveTasks(tasks);
    renderTasks();
}

JavaScript - Drag and Drop

// تفعيل السحب والإفلات
function enableDragAndDrop() {
    const taskItems = document.querySelectorAll('.task-item');
    
    taskItems.forEach(item => {
        item.draggable = true;
        
        item.addEventListener('dragstart', (e) => {
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/html', item.innerHTML);
            item.classList.add('dragging');
        });
        
        item.addEventListener('dragend', () => {
            item.classList.remove('dragging');
        });
    });
}

الروابط