الوحدة 15: المشاريع التطبيقية (المشاريع العملية) في JavaScript

إليك كورس كامل عن الوحدة 15: المشاريع التطبيقية (المشاريع العملية) في JavaScript، الذي يركز على تطبيق المهارات المكتسبة في الوحدات السابقة من خلال تنفيذ مشاريع عملية تساعد في تقوية معرفتك وتحسين قدرتك على بناء تطبيقات حقيقية باستخدام JavaScript.

الوحدة 15: المشاريع التطبيقية (المشاريع العملية) في JavaScript

الدرس 1: أهمية المشاريع التطبيقية

• المفهوم الأساسي: المشاريع التطبيقية تعتبر الوسيلة الأفضل لتطبيق ما تعلمته في البرمجة، حيث يمكنك تحسين مهاراتك العملية وتعلم كيفية التعامل مع التحديات الحقيقية.
• أهمية المشاريع العملية:
  1. تطبيق المعرفة: الممارسة العملية هي أفضل طريقة لفهم الكود والمفاهيم البرمجية.
  2. تحسين مهارات حل المشكلات: من خلال المشاريع العملية، ستواجه مشكلات حقيقية تحتاج إلى حلول مبتكرة.
  3. تعزيز الثقة بالنفس: بناء تطبيقات حقيقية يعزز من ثقتك كمطور.
  4. إثراء المحفظة (Portfolio): المشاريع التي تنشئها ستصبح جزءًا من محفظتك التي يمكن عرضها للعملاء أو أصحاب العمل.

الدرس 2: مشروع 1 – To-Do List (قائمة المهام)

• المفهوم: تطبيق بسيط لإدارة المهام اليومية باستخدام JavaScript وHTML وCSS.

المتطلبات:

• إنشاء واجهة لعرض قائمة المهام.
• القدرة على إضافة مهمة جديدة.
• القدرة على حذف مهمة من القائمة.
• القدرة على تعديل حالة المهمة (مكتملة/غير مكتملة).
• حفظ البيانات في LocalStorage للحفاظ عليها بعد إعادة تحميل الصفحة.

مراحل المشروع:

1. تصميم واجهة المستخدم:
   • HTML: إعداد الهيكل الأساسي لقائمة المهام.
   • CSS: تنسيق العناصر لجعلها سهلة الاستخدام وجميلة.
   • JavaScript: إضافة الوظائف لتعديل الحالة وإضافة وحذف المهام.
2. التعامل مع LocalStorage:
   • حفظ المهام في LocalStorage لضمان عدم فقدانها عند تحديث الصفحة.
   javascript

   Copy code

   // إضافة مهمة
function addTask(task) {
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
tasks.push({ task: task, completed: false });
localStorage.setItem('tasks', JSON.stringify(tasks));
}

3. التحقق من المهام:
   • تحديث حالة المهمة بين “مكتملة” و”غير مكتملة”.
   javascript

   Copy code

   function toggleTaskStatus(index) {
let tasks = JSON.parse(localStorage.getItem('tasks'));
tasks[index].completed = !tasks[index].completed;
localStorage.setItem('tasks', JSON.stringify(tasks));
}


الدرس 3: مشروع 2 – تطبيق الآلة الحاسبة (Calculator App)

• المفهوم: بناء تطبيق آلة حاسبة باستخدام JavaScript لتنفيذ العمليات الحسابية الأساسية مثل الجمع والطرح والضرب والقسمة.

المتطلبات:

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

مراحل المشروع:

1. تصميم واجهة المستخدم:
   • HTML: إعداد الأزرار مع عرض النتيجة.
   • CSS: تخصيص الأزرار والشاشة.
   • JavaScript: إضافة الوظائف لتنفيذ العمليات الحسابية.
2. إضافة العمليات الحسابية:
   • إنشاء دوال لعمليات الجمع والطرح والضرب والقسمة.
   javascript

   Copy code

   function add(x, y) {
   return x + y;
   }

   function subtract(x, y) {
   return x - y;
   }

   function multiply(x, y) {
   return x * y;
   }

   function divide(x, y) {
if (y === 0) {
alert("القسمة على صفر غير مسموحة");
return;
}
return x / y;
}


3. التحكم في الإدخال والإخراج:
   • عرض النتيجة على الشاشة بعد تنفيذ العمليات.
   javascript

   Copy code

   let result = add(5, 3);
document.getElementById('display').textContent = result;


الدرس 4: مشروع 3 – تطبيق الطقس (Weather App)

• المفهوم: بناء تطبيق لعرض الطقس باستخدام API لبيانات الطقس (مثل OpenWeatherMap) لجلب المعلومات.

المتطلبات:

• واجهة لعرض حالة الطقس (درجة الحرارة، الرطوبة، سرعة الرياح).
• القدرة على البحث عن الطقس في مدينة معينة.
• استخدام API لعرض البيانات بشكل ديناميكي.

مراحل المشروع:

1. الحصول على البيانات باستخدام API:
   • استخدام fetch أو axios لجلب البيانات من OpenWeatherMap API.
   javascript

   Copy code

   async function getWeather(city) {
let response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=API_KEY`);
let data = await response.json();
return data;
}

2. عرض البيانات في واجهة المستخدم:
   • HTML: تصميم واجهة لعرض المعلومات.
   • JavaScript: إظهار درجة الحرارة، الرطوبة، وسرعة الرياح في الشاشة.
   javascript

   Copy code

   function displayWeather(data) {
   let temp = data.main.temp;
   let humidity = data.main.humidity;
   let windSpeed = data.wind.speed;

   document.getElementById('temp').textContent = `${temp} °C`;
document.getElementById('humidity').textContent = `${humidity} %`;
document.getElementById('wind').textContent = `${windSpeed} m/s`;
}


3. إضافة خاصية البحث:
   • السماح للمستخدم بالبحث عن الطقس في مدينة معينة.

الدرس 5: مشروع 4 – تطبيق تسجيل الدخول (Login System)

• المفهوم: بناء تطبيق بسيط لتسجيل الدخول باستخدام JavaScript وLocalStorage.

المتطلبات:

• واجهة لتسجيل الدخول مع حقل اسم المستخدم وكلمة المرور.
• التحقق من بيانات المستخدم.
• حفظ حالة تسجيل الدخول في LocalStorage.

مراحل المشروع:

1. تصميم واجهة المستخدم:
   • HTML: إعداد واجهة لتسجيل الدخول.
   • CSS: تخصيص المدخلات والأزرار.
2. التحقق من بيانات المستخدم:
   • JavaScript: التحقق مما إذا كانت بيانات المستخدم صحيحة.
   javascript

   Copy code

   function login(username, password) {
let savedUser = { username: "admin", password: "1234" };
if (username === savedUser.username && password === savedUser.password) {
localStorage.setItem('loggedIn', true);
} else {
alert("بيانات الدخول غير صحيحة");
}
}

3. حفظ حالة تسجيل الدخول:
   • استخدم LocalStorage لتخزين حالة تسجيل الدخول.
   javascript

   Copy code

   if (localStorage.getItem('loggedIn') === 'true') {
window.location.href = "dashboard.html"; // تحويل إلى الصفحة الرئيسية بعد تسجيل الدخول.
}


الدرس 6: مشروع 5 – تطبيق المعرض (Gallery App)

• المفهوم: بناء تطبيق لعرض الصور في شكل معرض، حيث يمكن للمستخدمين التصفح بين الصور والبحث عنها باستخدام JavaScript.

المتطلبات:

• واجهة لعرض الصور.
• إمكانية البحث عن الصور باستخدام API مثل Unsplash.
• عرض الصور في شبكة (Grid).

مراحل المشروع:

1. الحصول على الصور باستخدام API:
   • استخدام Unsplash API لجلب الصور.
   javascript

   Copy code

   async function getImages(query) {
let response = await fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=API_KEY`);
let data = await response.json();
return data.results;
}

2. عرض الصور في شبكة:
   • تصميم الواجهة باستخدام HTML وCSS لعرض الصور في شكل شبكة.
   javascript

   Copy code

   function displayImages(images) {
let gallery = document.getElementById('gallery');
images.forEach(image => {
let imgElement = document.createElement('img');
imgElement.src = image.urls.small;
gallery.appendChild(imgElement);
});
}


الدرس 7: تلخيص الوحدة

• المشاريع العملية: تطبيق المهارات التي تعلمتها من خلال بناء مشاريع عملية مثل To-Do List، Calculator, Weather App وغيرها.
• أهمية المشاريع: تساعد المشاريع العملية على بناء مهارات حقيقية وتحسين مستوى البرمجة باستخدام JavaScript.

المشاريع الإضافية:

• مشروع 1: تطبيق لعرض قائمة الكتب باستخدام API.
• مشروع 2: تطبيق لمشاركة المقالات مع الآخرين باستخدام LocalStorage أو Firebase.
• مشروع 3: تطبيق إدارة الفواتير مع إمكانية إضافة وتعديل الفواتير.