بناء تطبيق للطقس: رحلة استكشاف واجهات البرمجة التطبيقية

مقدمة المشروع

في الأسبوع الماضي، خضت غمار مشروع Show the Local Weather ضمن معسكر Free Code Camp، والذي تضمن بناء تطبيق يعرض حالة الطقس في الموقع الحالي للمستخدم. كان عليّ تنفيذ متطلبات المستخدم التالية:

• يمكن للمستخدم عرض حالة الطقس في موقعه الحالي.
• يمكن للمستخدم التبديل بين وحدتي درجة الحرارة (Celsius أو Fahrenheit).
• ستتغير أيقونة الطقس أو صورة الخلفية بناءً على الظروف الجوية.

قررت أن أذهب أبعد من ذلك قليلاً بإضافة متطلب مستخدم آخر:

• يمكن للمستخدم البحث عن معلومات الطقس لأماكن أخرى.

التصميم

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

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

المنطق البرمجي

بعد الاطلاع على استجابة API نموذجية من Open Weather، أدركت أنني سأحتاج إلى الحصول على خط الطول وخط العرض للمستخدم لتقديم معلومات الطقس عند تحميل الصفحة. أسهل طريقة للقيام بذلك كانت استخدام HTML5 Geolocation API، والتي كانت واضحة ومباشرة وقد تم تغطيتها بالفعل في قسم JSON and APIs من المنهج الدراسي. قمت بتخزين القيم المعادة في متغيرات تم الإعلان عنها مسبقاً واستخدمتها لإجراء طلب AJAX.

if (navigator.geolocation) {
    //Return the user's longitude and latitude on page load using HTML5 geolocation API
    window.onload = function () {
        var currentPosition;
        function getCurrentLocation(position) {
            currentPosition = position;
            latitude = currentPosition.coords.latitude;
            longitude = currentPosition.coords.longitude;

            //AJAX request
            $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=******************", function (data) {
                var rawJson = JSON.stringify(data);
                var json = JSON.parse(rawJson);
                updateWeather(json); //Update Weather parameters
            });
        }
        navigator.geolocation.getCurrentPosition(getCurrentLocation);
    };
}

أتاح لي Open Weather API طريقة لتحديث الموقع ودرجة الحرارة ووصف الطقس، لكنني كنت لا أزال بحاجة إلى إيجاد طريقة لتحديث التوقيت المحلي. بعد قليل من البحث، وجدت API آخر في Geonames.org تكفل بذلك.

$.getJSON('http://api.geonames.org/timezoneJSON?lat=' + latitude + '&lng=' + longitude + '&username=ayoisaiah', function (timezone) {
    var rawTimeZone = JSON.stringify(timezone);
    var parsedTimeZone = JSON.parse(rawTimeZone);
    var dateTime = parsedTimeZone.time;
    timeFull = dateTime.substr(11);
    $(".local-time").html(timeFull); //Update local time
    timeHour = dateTime.substr(-5, 2);
});

آخر شيء قمت به هو تحديث أيقونة الطقس بناءً على الظروف في موقع المستخدم أو المدينة محل الاهتمام. قررت أن أفضل طريقة للقيام بذلك هي فحص وصف الطقس وتغيير الأيقونة بناءً على ذلك. لذلك، نظرت في بعض السيناريوهات المحتملة مثل سماء صافية (clear sky)، غيوم (cloud)، ثلج (snow)، مشمس (sunny)، مطر (rain) وما إلى ذلك، وكتبت مجموعة من العبارات الشرطية (conditional statements) للتحقق مما إذا كان وصف الطقس يحتوي على إحدى الكلمات المفتاحية ثم تحديث أيقونة الطقس.

//Update Weather animation based on the returned weather description
var weather = json.weather[0].description;

if (weather.indexOf("rain") >= 0) {
    skycons.set("animated-icon", Skycons.RAIN);
} else if (weather.indexOf("sunny") >= 0) {
    skycons.set("animated-icon", Skycons.CLEAR_DAY);
}

لقد اكتشفت، من خلال اختبارات مختلفة، أن هذه الطريقة ليست مضمونة بنسبة 100% (100% foolproof)، لكنها عملت بشكل جيد بما يكفي بالنسبة لي لأستمر في استخدامها. يمكنك الاطلاع على الكود الكامل والتأثيرات على Codepen.

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

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

ماذا بعد؟

المشروع التالي بالنسبة لي هو تطبيق Wikipedia Viewer. لقد قطعت نصف الطريق بالفعل أثناء كتابة هذا المقال، لذا يجب أن يكتمل بحلول يوم الخميس كحد أقصى.