وصف المشروع

تطبيق ويب متطور لعرض حالة الطقس الحالية والتوقعات المستقبلية لأي مدينة في العالم. يستخدم التطبيق واجهات برمجة التطبيقات (APIs) للحصول على بيانات الطقس الدقيقة في الوقت الفعلي، مع واجهة مستخدم جذابة تتغير حسب حالة الطقس. يدعم التطبيق تحديد الموقع الجغرافي التلقائي لعرض طقس موقع المستخدم الحالي.

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

• عرض حالة الطقس الحالية بالتفصيل (درجة الحرارة، الرطوبة، سرعة الرياح)
• توقعات الطقس لمدة 7 أيام قادمة
• البحث عن أي مدينة في العالم
• تحديد الموقع الجغرافي التلقائي (Geolocation API)
• واجهة مستخدم ديناميكية تتغير حسب حالة الطقس
• رسوم بيانية تفاعلية لدرجات الحرارة
• حفظ المدن المفضلة
• دعم وحدات القياس المختلفة (مئوية، فهرنهايت)
• تصميم متجاوب مع رسوم متحركة سلسة
• أيقونات طقس متحركة

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

• HTML5: للبنية الأساسية والعناصر الدلالية
• CSS3: للتصميم المتقدم مع Animations و Gradients
• JavaScript ES6+: للمنطق البرمجي والتفاعل مع APIs
• Fetch API: لجلب البيانات من خوادم الطقس
• Geolocation API: لتحديد موقع المستخدم
• OpenWeatherMap API: للحصول على بيانات الطقس
• Chart.js: لرسم المخططات البيانية

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

كان التحدي الرئيسي هو التعامل مع الطلبات غير المتزامنة (Asynchronous Requests) وإدارة الأخطاء بشكل فعال، خاصة عند فشل الاتصال بالإنترنت أو عدم توفر بيانات لمدينة معينة. تم حل ذلك من خلال استخدام Async/Await مع معالجة شاملة للأخطاء وعرض رسائل واضحة للمستخدم. كما تم تحسين الأداء من خلال تخزين البيانات مؤقتًا (Caching) لتقليل عدد الطلبات.

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

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

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

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

JavaScript - جلب بيانات الطقس من API

// جلب بيانات الطقس باستخدام Async/Await
async function getWeatherData(city) {
    const API_KEY = 'your_api_key_here';
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;
    
    try {
        const response = await fetch(url);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        return {
            temperature: data.main.temp,
            humidity: data.main.humidity,
            windSpeed: data.wind.speed,
            description: data.weather[0].description,
            icon: data.weather[0].icon
        };
    } catch (error) {
        console.error('Error fetching weather:', error);
        throw error;
    }
}

JavaScript - تحديد الموقع الجغرافي

// الحصول على موقع المستخدم الحالي
function getCurrentLocation() {
    return new Promise((resolve, reject) => {
        if (!navigator.geolocation) {
            reject(new Error('Geolocation is not supported'));
            return;
        }
        
        navigator.geolocation.getCurrentPosition(
            (position) => {
                resolve({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude
                });
            },
            (error) => {
                reject(error);
            }
        );
    });
}

// استخدام الدالة
async function loadLocalWeather() {
    try {
        const location = await getCurrentLocation();
        const weather = await getWeatherByCoords(location.latitude, location.longitude);
        displayWeather(weather);
    } catch (error) {
        console.error('Error:', error);
    }
}

الروابط