ساخت یک صفحه وب پیش بینی آب وهوا

ساخت یک صفحه وب پیش بینی آب وهوا

چگونگی ساخت یک صفحه وب پیش بینی آب وهوا با استفاده از منطقه جغرافیایی و APIهای سایت یاهو

برای مشاهده لینک وارد شود

چگونگی ساخت یک صفحه وب پیش بینی آب وهوا با استفاده از منطقه جغرافیایی و APIهای سایت یاهو

چیزهایی که ما  برای ساخت این صفحه نیاز داریم:

اول ما از Geolocation API که توسط مرورگر های جدید پشتیبانی میشوند استفاده می کنیم.این API به کاربران این امکان را می دهد که موقعیت خودشان را ببینند و مختصات GPS ان را داشته باشند.

دوم ما با ستفاده از  placefinder API سایت یاهو،موقعیت مکانی خود را پیدا می کنیم.این API نام شهرو کشورمان را به ما میدهد.

سرانجام ما با استفاده از Weather API سایت یاهو درخواست ارسال شرایط آب و هوایی منطقه مورد نظر را می کنیم.

کار را با نوشتن کد HTML آغاز می کنیم.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Weather Forecast with jQuery &amp; Yahoo APIs | Tutorialzine Demo</title>

        <!-- The stylesheet -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!-- Google Fonts -->
        <link rel="stylesheet"
 href="http://fonts.googleapis.com/css?family=Playball|Open+Sans+Condensed:300,700" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <header>
            <h1>Weather Forecast</h1>
        </header>

        <div id="weather">

        	<ul id="scroller">
        		<!-- The forecast items will go here -->
        	</ul>

        	<a href="#" class="arrow previous">Previous</a>
        	<a href="#" class="arrow next">Next</a>

        </div>

        <p class="location"></p>

        <div id="clouds"></div>

        <!-- JavaScript includes - jQuery, turn.js and our own script.js -->
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

 

قبل از بستن تگ body ما فایل های jQuery و script.js را وارد میکنیم.

کد جاوا اسکریپت

در قدم اول ما دو تا متغییربرای configurtion در فایل  /assets/js/script.js  تعریف می کنیم

var APPID = '';	// Your Yahoo Application ID
var DEG = 'c';	// c for celsius, f for fahrenheit

این متغییر های با استفاده از API های نامبرده موقعیت جغرافیایی و شرایط آب و هوایی را در خود نگه میدارد.

اکنون ما با استفاده از  Geolocation API مختصات جاری کاربر را دریافت میکنیم.اینAPI توسط اینترنت اکسپلور۹ و تمامی مرورگر های جدیدو موبایل ها پشتیبانی میشود.برای استفاده از این،تابع Geolocation  که در کلاس سراسری  navigator تعریف شده است مقداردهی می کنیم.بعدا ما متد getCurrentPosition  را فراخوانی می کنیم وبا بررسی رویداد مقدار success   یا  failure برمیگرداند.

// Does this browser support geolocation?
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
}
else{
    showError("Your browser does not support Geolocation!");
}

function locationSuccess(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;

    // We will make further requests to Yahoo's APIs here
}

function locationError(error){
    switch(error.code) {
        case error.TIMEOUT:
            showError("A timeout occured! Please try again!");
            break;
        case error.POSITION_UNAVAILABLE:
            showError('We can\'t detect your location. Sorry!');
            break;
        case error.PERMISSION_DENIED:
            showError('Please allow geolocation access for this to work.');
            break;
        case error.UNKNOWN_ERROR:
            showError('An unknown error occured!');
            break;
    }

}

function showError(msg){
    weatherDiv.addClass('error').html(msg);
}

 

تابع locationSuccess  درخواست  را از  yahoo API در یک لحظه انجام میدهد.تابع LocatonError پیغام مناسب با هر خطا را نمایش می دهد و تابع ShowError  یک تابع کمکی برای نمایش دادن خطا ها در صفحه نمایش است.

function locationSuccess(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;

    // Yahoo's PlaceFinder API http://developer.yahoo.com/geo/placefinder/
    // We are passing the R gflag for reverse geocoding (coordinates to place name)
    var geoAPI = 'http://where.yahooapis.com/geocode?location='+lat+','+lon+'&flags=J&gflags=R&appid='+APPID;

    // Forming the query for Yahoo's weather forecasting API with YQL
    // http://developer.yahoo.com/weather/

    var wsql = 'select * from weather.forecast where woeid=WID and u="'+DEG+'"',
        weatherYQL = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(wsql)+'&format=json&callback=?',
        code, city, results, woeid;

    // Issue a cross-domain AJAX request (CORS) to the GEO service.
    // Not supported in Opera and IE.
    $.getJSON(geoAPI, function(r){

        if(r.ResultSet.Found == 1){

            results = r.ResultSet.Results;
            city = results[0].city;
            code = results[0].statecode || results[0].countrycode;

            // This is the city identifier for the weather API
            woeid = results[0].woeid;

            // Make a weather API request (it is JSONP, so CORS is not an issue):
            $.getJSON(weatherYQL.replace('WID',woeid), function(r){

                if(r.query.count == 1){

                    // Create the weather items in the #scroller UL

                    var item = r.query.results.channel.item.condition;
                    addWeather(item.code, "Now", item.text + ' <b>'+item.temp+'°'+DEG+'</b>');

                    for (var i=0;i<2;i++){
                        item = r.query.results.channel.item.forecast[i];
                        addWeather(
                            item.code,
                            item.day +' <b>'+item.date.replace('\d+$','')+'</b>',
                            item.text + ' <b>'+item.low+'°'+DEG+' / '+item.high+'°'+DEG+'</b>'
                        );
                    }

                    // Add the location to the page
                    location.html(city+', <b>'+code+'</b>');

                    weatherDiv.addClass('loaded');

                    // Set the slider to the first slide
                    showSlide(0);

                }
                else {
                    showError("Error retrieving weather data!");
                }
            });

        }

    }).error(function(){
        showError("Your browser does not support CORS requests!");
    });

}

 

PlaceFinder API  نتایج را بر اساس  ساختارJSON   برمیگرداند.ام در دامنه های مختلف فقط مرورگر هایی که از CORSپشتیبانی می کنند توانایی دریافت آن را دارند.

پس از دریافت اطلاعات آب و هوا،ما تابع AddWeather را فراخوانی می کنیم برای ایجاد ایتم های li برای افزوده شدن به لیست نا مرتب #scroller

function addWeather(code, day, condition){

    var markup = '<li>'+
        '<img src="assets/img/icons/'+ weatherIconMap

+'.png" />'+
' <p class="day">'+ day +'</p> <p class="cond">'+ condition +
'</p></li>';

scroller.append(markup);
}
 

اکنون ما منتظر میمانیم تا کاربر بر روی فلش قبل  یا بعد را انتخاب کرده و تا افست  اسلایدر مربوط نمایش داده شود.

  /* Handling the previous / next arrows */

    var currentSlide = 0;
    weatherDiv.find('a.previous').click(function(e){
        e.preventDefault();
        showSlide(currentSlide-1);
    });

    weatherDiv.find('a.next').click(function(e){
        e.preventDefault();
        showSlide(currentSlide+1);
    });

    function showSlide(i){
        var items = scroller.find('li');

        // Exit if the requested item does not exist,
        // or the scroller is currently being animated
        if (i >= items.length || i < 0 || scroller.is(':animated')){
            return false;
        }

        // The first/last classes hide the left/right arrow with CSS
        weatherDiv.removeClass('first last');

        if(i == 0){
            weatherDiv.addClass('first');
        }
        else if (i == items.length-1){
            weatherDiv.addClass('last');
        }

        scroller.animate({left:(-i*100)+'%'}, function(){
            currentSlide = i;
        });
    }

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


× 3 = بیست چهار