آموزش: نمایش اطلاعات آب و هوایی توسط JavaScript با استفاده از YQL - JSONP

شروع موضوع توسط eAmin ‏20 ژانویه 2011 در انجمن برنامه‌نویسی با جاوااسکریپت (JavaScript)

کلمات کلیدی:
  1. eAmin

    eAmin Well-Known Member

    ارسال‌ها:
    944
    تشکر شده:
    845
    امتیاز دستاورد:
    93
    به نام خدا

    [​IMG]

    شما برای نمایش آب و هوا از چه زبان برنامه نویسی ای استفاده می کنید؟ از چه سرویسی برای در یافت اطلاعات دقیق آب و هوایی کمک می گیرید؟ آیا امکان دارد که ما بدون استفاده از زبانهایی که در سرور قابل اجرا هستند، به نمایش اطلاعات آب و هوایی بپردازیم؟ اگر مشتاق هستید پس ادامه مطلب را مشاهده کنید.

    اکثر برنامه ها و اسکریپتهایی که برای نمایش آب و هوا در وبسایت امروزه مورد استفاده قرار می گیرد، با استفاده از API هایی مانند Yahoo! Weather و Google و یا وبسایت رسمی Weather Channel و ... انجام می شود و برای برقراری برای ارتباط با آن API ها از زبانهای سمت سروری مانند PHP, ASP.NET و ... استفاده می شود، که البته غیر از این هم تا قبل از پیدایش JSONP امکان نداشت ( البته بخاطر اینکه استاندارد خاصی وجود نداشت، کما اینکه گاهی اوقات استفاده از روشهای مشابه در بعضی از سرویس ها شاهد بودیم ). ولی با پیدایش JSONP کار خیلی از توسعه دهنده ها راحت شد.

    اگر نمی دانید JSONP چیست، از لینکهای زیر کمک بگیرید.

    Wikipedia JSON
    JSONP و JSON

    در یک الی دو سال اخیر شرکت Yahoo! از یک سرویس بهره برداری کرده است به نام YQL ـ ( Yahoo! Query Language ) که شما می توانید، از طریق آن با API های دیگر !Yahoo استفاده و جواب آن را در قالب JSONP و XML دریافت می کنید. اگر بخواهیم YQL را در یک جمله تعریف کنیم، می توانیم بگوییم که: " YQL ابزاری است، برای استفاده از ابزارهای دیگر!"
    در کل YQL ابزار گسترده ای است، و روز به روز به امکاناتش اضافه می شود و تقریبا می توانید با تمامی API مهم وبسایتهایی مثل facebook, twitter و ... ارتباط برقرار کنید!

    اواخر سال 2010! تصمیم به ایجاد یک اسکریپت برای نمایش اطلاعات آب و هوایی با استفاده از YQL گرفتم، که برای سرگرمی کار خوبی بود! و از آنجایی که برای آموزش دادن مفید بنظر می رسد، برای انتشار آن اقدام کردم.

    کل اسکریپ و موتور اصلی آن را در زیر مشاهده می کنید.
    و برای دریافت کامل کدها به انضمام نحوه استفاده با استفاده از یک مثال، می توانید به آدرس پروفایل بنده در Github - jsWeather مراجعه کنید.

    کد (Text):

    /*!
     * jsWeather, JavaScript YQL-JSONP Weather
     * Copyright (c) Amin Akbari [ http://eAmin.me/ ]
     * under the MIT Style Licence
     * Date: 11/9/2010
     */

    var weather = (function(doc) {
        var u = 'http://query.yahooapis.com/v1/public/yql?q={query}&format=json&callback=weather.yql.{callback}',
        query = 'select * from weather.forecast where location = "IRXX{code}" and u = "{units}"';
        doc.head = doc.getElementsByTagName('head')[0] || doc.documentElement;

        var cCode = {
            'Tehran' : '0018', 'Mashhad' : '0008', 'Esfahan' : '0003','Shiraz' : '0015', 'Gorgan' : '0044',
            'Hamadan' : '0048', 'Hormozgan' : '0033', 'Kerman' : '0034', 'Kermanshah' : '0029', 'Bojnurd' : '0042',
            'Birjand' : '0031', 'Zahedan' : '0020', 'Ahvaz' : '0032', 'Yasuj' : '0046', 'KhurramAbad' : '0050',
            'Karaj' : '0006', 'Yazd' : '0019', 'Zanjan' : '0024', 'Orumiyeh' : '0023', 'Tabriz' : '0016',
            'Rasht' : '0043', 'Arak' : '0030'
        };

        // handle jsonp request
        var yql = function(qry, callback) {
            var jsonp = 'jsonp' + (+new Date),
            url = u.replace('{query}', encodeURIComponent(qry.toLowerCase())).replace('{callback}', jsonp),
            script = doc.createElement('script');
            script.type = 'text/javascript';

            weather.yql[jsonp] = function(data) {
                delete weather.yql[jsonp];
                callback(data);
            };

            script.src = url;      
            doc.head.insertBefore(script, document.head.firstChild);
        };

        return {
            $: function(ele) {
                return doc.getElementById(ele);
            },

            yql: yql,

            get: function(city, units, callback) {
                units = (units.toLowerCase() === 'c') ? 'c' : 'f';
                tempunit = (units === 'c') ? 'Celsius' : 'Fahrenheit';
                var code;

                if (city != null) {
                    for (var i in cCode) {
                        if (cCode.hasOwnProperty(i) && i === city) code = query.replace('{code}', cCode[i]);
                    }
                    code = code.replace('{units}', units);
                }

                this.yql(code, function(data) {
                    var results = data.query.results.channel;
                    var forecasts = {
                        country: results.location.country,
                        city:  results.location.city,
                        img: results.item.description.match(/src="([^"]+)"/i)[1],
                        current: {
                            date: results.item.condition.date,
                            code: results.item.condition.code, // used for translate to persian
                            temp: results.item.condition.temp + ' ' + tempunit, // C & F
                            text: results.item.condition.text // alternative
                        },

                        units: {
                            distance: results.units.distance,
                            pressure: results.units.pressure,
                            speed: results.units.speed,
                            temperature: results.units.temperature
                        },

                        more: {
                            forecast: results.item.forecast,
                            astroSunrise: results.astronomy.sunrise,
                            astroSunset: results.astronomy.sunset,
                            atmHumidity: results.atmosphere.humidity,
                            atmPressure: results.atmosphere.pressure,
                            atmRising: results.atmosphere.rising,
                            atmVisibility: results.atmosphere.visibility,
                            wChill: results.wind.chill,
                            wDirection: results.wind.direction,
                            wSpeed: results.wind.speed
                        }
                    };

                    if (typeof results == 'object' && !(data.query.hasOwnProperty('error'))){
                        callback(forecasts);
                    }

                    // releasing memory
                    results = forecasts = null;
                });
            }
        };
    })(document);
     
    موفق باشید.
     
    نوشته شده توسط eAmin در ‏20 ژانویه 2011
    vahidd.com، saber2008، Amir_Reza و 11 نفر دیگر از این ارسال تشکر کرده اند.
  2. ziXet

    ziXet مدیر انجمن PHP/MYSQL

    ارسال‌ها:
    1,707
    تشکر شده:
    979
    امتیاز دستاورد:
    36
    عالی بود!
    فقط نمیدونم چرا یاهو شهرهای ایرانو اینطوری نوشته!
    اسم شهر رو نوشته "پرسپولیس" !
    یا خیلی از شهرها رو هم نداره!
    نمیدونم چرا درستش نمیکنه

    بازم ممنون
     
    نوشته شده توسط ziXet در ‏5 فوریه 2011
    eAmin از این پست تشکر کرده است.

به اشتراک بگذارید