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

eAmin

Well-Known Member
به نام خدا

jsWeather.jpg

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

اکثر برنامه ها و اسکریپتهایی که برای نمایش آب و هوا در وبسایت امروزه مورد استفاده قرار می گیرد، با استفاده از 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 مراجعه کنید.

کد:
/*!
 * 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);

موفق باشید.
 

ziXet

مدیر انجمن PHP/MYSQL
عالی بود!
فقط نمیدونم چرا یاهو شهرهای ایرانو اینطوری نوشته!
اسم شهر رو نوشته "پرسپولیس" !
یا خیلی از شهرها رو هم نداره!
نمیدونم چرا درستش نمیکنه

بازم ممنون
 

جدیدترین ارسال ها

بالا