মৌলিক ইন্টিগ্রেশন সহজ এবং সোজা এগিয়ে. আপনাকে প্রথমে নিম্নলিখিত কোডটি যোগ করতে হবে:

  
<script  type="text/javascript"  charset="utf-8">  
	(function  (w,  d,  t,  f)  {  
		w[f]  =  w[f]  ||  function  (c,  k,  n)  {  
			s  =  w[f],  k  =  s['k']  =  (s['k']  ||  (k  ?  ('&k='  +  k)  :  ''));  s['c']  =  
				c  =  (c  instanceof  Array)  ?  c  :  [c];  s['n']  =  n  =  n  ||  0;  L  =  d.createElement(t),  e  =  d.getElementsByTagName(t)[0];  
			L.async  =  1;  L.src  =  '//feed.aqicn.org/feed/'  +  (c[n].city)  +  '/'  +  (c[n].lang  ||  '')  +  '/feed.v1.js?n='  +  n  +  k;  
			e.parentNode.insertBefore(L,  e);  
		};  
	})(window,  document,  'script',  '_aqiFeed');    
</script>

তারপর, উইজেটটি অন্তর্ভুক্ত করতে এই অন্য কোডটি যোগ করুন:

  
<span  id="city-aqi-container"></span>  
  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  container:  "city-aqi-container",  city:  "beijing"  });  
</script>

'_aqiFeed' ফাংশনটি উইজেটের কনফিগারেশন ব্লককে যুক্তি হিসেবে নেয়। পরামিতি `ধারক: "city-aqi-container"` ট্যাগের আইডি বোঝায় যেখানে আপনি উইজেট সন্নিবেশ করতে চান (যেমন `<span id='city-aqi-container'></span>`), এবং প্যারামিটার city সেই শহরের নাম যার জন্য আপনি বর্তমান এয়ার কোয়ালিটি রিডিং দেখাতে চান (যেমন `শহর: "লন্ডন"`)।

আপনি lang অপশন সেট করে ব্যবহার করা ভাষাও উল্লেখ করতে পারেন। উদাহরণস্বরূপ, উইজেটটি চীনা ভাষায় অন্তর্ভুক্ত করতে (যেমন ডানদিকে দেখানো হয়েছে), নিম্নলিখিত কোডটি ব্যবহার করুন:

  
_aqiFeed({  
	container:"city-aqi-container",  
	city:"beijing",  
	lang:"cn"  
});  

বর্তমানে সমর্থিত ভাষাগুলি হল:

display বিকল্পটি নির্দিষ্ট করে উইজেটের মধ্যে প্রদর্শিত পাঠ্যটি কাস্টমাইজ করা সম্ভব। উদাহরণস্বরূপ, পাঠ্য "AQI" নামের পাশাপাশি আপডেটের সময় (যেমন বাম দিকের উইজেটে দেখানো হয়েছে) উভয়ের সাথে প্রদর্শন করতে আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:

  
_aqiFeed({    
	display:"%cityname  AQI  is  %aqi<br><small>on  %date</small>",  
	container:"city-aqi-container-display",    
	city:"beijing"  
});  

প্যারামিটার display হল একটি HTML-ভিত্তিক স্ট্রিং, এবং এতে নিম্নলিখিত কীওয়ার্ডগুলির যেকোনো একটি থাকতে পারে:

• শহরের নামের জন্য `%cityname` (যেমন Beijing ),
• সজ্জিত AQI মানের জন্য `%aqi` (যেমন 58 ),
• অশোভিত (কাঁচা লেখা) AQI মানের জন্য `%aqiv` (যেমন 58 ),
• সজ্জিত AQI বিবরণের CSS ঘোষণার জন্য `% স্টাইল` (যেমন background-color: #ffde33;color:#000000; ),
• `% তারিখ` যে সময়ে AQI আপডেট করা হয়েছিল (যেমন Wed 20:00 ),
• সম্পর্কিত স্বাস্থ্য প্রভাবের জন্য `% প্রভাব` (যেমন Good , Moderate ...)
• AQI ডেটা অ্যাট্রিবিউশনের জন্য `% অ্যাট্রিবিউশন` (যেমন Beijing Environmental Protection Monitoring Center )
• সম্পূর্ণ AQI বিবরণের জন্য `% বিবরণ` (AQI মানের উপর মাউস সরানোর সময় প্রদর্শিত পপআপের বিষয়বস্তু)।

এখানে কিছু উদাহরণ আছে:

আপনি যদি DIY ইন্টিগ্রেশন পছন্দ করেন, আপনি ডেটা লোড হওয়ার সময় একটি জাভাস্ক্রিপ্ট ফাংশন কলব্যাকও নির্দিষ্ট করতে পারেন। আপনাকে কেবল প্যারামিটার ব্লকে callback বিকল্পটি যোগ করতে হবে, যেমন উদাহরণস্বরূপ:

  
_aqiFeed({  city:"beijing",  callback:function(aqi){  
	/*  Do  whatever  you  want  with  the  AQI  object  */  
	console.log(aqi);    
}  });

উদাহরণস্বরূপ, ধরে নিচ্ছি যে আপনি jquery ব্যবহার করছেন, নিম্নলিখিত কোড:

  
<div  id='my-container'></div>  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  
		city:  "beijing",  lang:  "pl",  callback:  function  (aqi)  {  
			$("#my-container").html(aqi.details);  
		}  
	});  
</script>

নিম্নলিখিত সামগ্রী তৈরি করবে:

aqi অবজেক্টে C বিভাগে উল্লিখিত সমস্ত কীওয়ার্ড রয়েছে (প্রদর্শন বিন্যাস)।

একক পৃষ্ঠায় একাধিক উইজেট অন্তর্ভুক্ত করা সম্ভব। আপনার যা দরকার তা হল `_aqiFeed` ফাংশনে একটি অ্যারে পাস করা যা আপনাকে অন্তর্ভুক্ত করতে হবে। উদাহরণস্বরূপ, লন্ডন, প্যারিস এবং নিউ ইয়র্ক সন্নিবেশ করতে, এই কোডটি ব্যবহার করতে পারেন:

  
var  cities  =  ["london",  "newyork",  "seoul",  "guangzhou",  "tokyo",  "shanghai",  "paris","hongkong"];  
  
var  aqiWidgetConfig  =  [];    
cities.forEach(function(city)  {  aqiWidgetConfig.push({city:city,  callback:  displayCity});  });  
_aqiFeed(aqiWidgetConfig);  
  
function  displayCity(aqi)  {  
	$("#mutiple-city-aqi").append(aqi.text("<center>%cityname<br>%aqi<br><small>%date</small></center>"));  
}  

এই উইজেট ফিড বিনামূল্যে প্রদান করা হয়, এবং অন্যান্য ওয়েবসাইটে ফিডকে সংহত করার একমাত্র উদ্দেশ্যে (যেমন অ্যাপগুলি বাদ দেওয়া হয়), এবং যুক্তিসঙ্গত এবং গ্রহণযোগ্য ব্যবহারের শর্তে। আমরা যেকোন সময় এবং পূর্ব ঘোষণা ছাড়াই ফিড গঠন (ডেটা ফরম্যাট) পরিবর্তন করার অধিকার সংরক্ষণ করি, তাই আপনি যদি কাস্টম ইন্টিগ্রেশন করার পরিকল্পনা করেন তাহলে আমাদের সাথে যোগাযোগ করা ভাল।

ইন্টিগ্রেশন করার সময়, কিছু ডিওন্টোলজিকাল নিয়ম আছে যা ডেটা ফিড ব্যবহার করার সময় প্রয়োগ করা উচিত:

• প্রথমত, সর্বদা নিশ্চিত করুন যে উদ্ভূত EPA-তে অ্যাট্রিবিউশন উপস্থিত রয়েছে। ওয়ার্ল্ড এয়ার কোয়ালিটি ইনডেক্স প্রকল্পে আপনি যে সমস্ত এয়ার কোয়ালিটি ডেটা পাবেন তা হল সারা বিশ্বের সমস্ত EPA-এর কঠোর পরিশ্রমের জন্য ধন্যবাদ, তাই অনুগ্রহ করে তাদের কাজের জন্যও অ্যাট্রিবিউশন দেওয়া নিশ্চিত করুন৷ আপনি প্রোগ্রামেটিক API ব্যবহার করলে, attribution ফিল্ড থেকে অ্যাট্রিবিউশন পাওয়া যায়।
• আপনি যদি কোনো প্রতিষ্ঠান থেকে থাকেন এবং ডেটা ব্যবহার করেন, অনুগ্রহ করে সম্মান দেখান এবং আমাদের কাজের জন্য ক্রেডিট ফেরত দিন। আপনি যদি ডেটা ফিড স্ক্র্যাপ করার চেষ্টা করছেন, অনুগ্রহ করে মনে রাখবেন যে এই প্রকল্পটি স্পনসরশিপ এবং সহযোগিতা প্রকল্পগুলির উপর নির্ভর করে, তাই আমাদের স্ক্র্যাপ করার পরিবর্তে আমাদের সমর্থন করার কথা বিবেচনা করুন, বিশেষ করে যদি আপনি একটি বড় মাপের প্রতিষ্ঠান বা বিশ্ববিদ্যালয় হন।
• আসলে, ডব্লিউআরআই ( ওয়ার্ল্ড রিসোর্স ইনস্টিটিউট ) এর মতো কাজ করবেন না: সামগ্রিক ওয়ার্ল্ড এয়ার কোয়ালিটি ইনডেক্স প্রকল্পের ডেটা ফিড বাতিল করা, এবং এত সস্তা যে তারা আমাদের কাজের জন্য কোনও অ্যাট্রিবিউশনও দেবে না, এবং এটি তাদের 80 সত্ত্বেও মিলিয়ন বার্ষিক USD তহবিল। আমাদের বিশ্বাস করবেন না? এই স্ন্যাপশট চেক করুন.

এটি এই নতুন উইজেট ফিড API-এর প্রথম সংস্করণ। পাইপলাইনে ইতিমধ্যেই বেশ কিছু উন্নতি রয়েছে, যেমন সামঞ্জস্যযোগ্য গ্রাফিক প্রস্থ এবং উচ্চতা, নির্বাচনযোগ্য AQI স্কেল, ইত্যাদি। আপনি যদি অন্য কোনও নির্দিষ্ট উন্নতির পরামর্শ দিতে চান তবে নির্দ্বিধায় আমাদের একটি বার্তা পাঠান।