التكامل الأساسي بسيط ومباشر. تحتاج أولاً إلى إضافة الجزء التالي من التعليمات البرمجية:

  
<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 )،
• `%aqiv` لقيمة AQI غير المزخرفة (النص الخام) (على سبيل المثال 58 )،
• `%style` لإعلان CSS لتفاصيل AQI المزخرفة (على سبيل المثال، background-color: #ffde33;color:#000000; )،
• `%date` للوقت الذي تم فيه تحديث مؤشر جودة الهواء (AQI) (على سبيل المثال، Wed 20:00 )،
• `%impact` للتأثير الصحي المرتبط (على سبيل المثال، Good ، Moderate ...)
• "نسبة الإسناد" لإسناد بيانات تنظيم القاعدة في العراق (على سبيل المثال، Beijing Environmental Protection Monitoring Center )
• `%details` للحصول على تفاصيل AQI الكاملة (يتم عرض محتوى النافذة المنبثقة عند تحريك الماوس فوق قيمة AQI).

وفيما يلي بعض الأمثلة على ذلك:

إذا كنت تفضل التكامل بنفسك، فيمكنك أيضًا تحديد رد اتصال وظيفة جافا سكريبت ليتم عند تحميل البيانات. تحتاج فقط إلى إضافة 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>"));  
}  

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

عند القيام بالتكامل، هناك عدد قليل من القواعد الأخلاقية التي ينبغي تطبيقها عند استخدام خلاصة البيانات:

• أولاً، تأكد دائمًا من وجود الإسناد إلى وكالة حماية البيئة الأصلية. جميع بيانات جودة الهواء التي يمكنك العثور عليها في مشروع مؤشر جودة الهواء العالمي هي بفضل العمل الشاق الذي قامت به جميع وكالة حماية البيئة في جميع أنحاء العالم، لذا يرجى التأكد من إسناد عملهم أيضًا. إذا كنت تستخدم واجهة برمجة التطبيقات الآلية، فستكون الإسناد متاحًا من حقل attribution .
• إذا كنت من مؤسسة وتستخدم البيانات، فيرجى إظهار الاحترام وسداد الاعتمادات لعملنا. إذا كنت تحاول الحصول على خلاصة البيانات، فيرجى أن تضع في اعتبارك أن هذا المشروع يعتمد على مشاريع الرعاية والتعاون، لذا فكر في دعمنا بدلاً من إلغائنا، خاصة إذا كنت مؤسسة أو جامعة واسعة النطاق.
• As a matter of fact, do not act like the WRI (World Resource Institute ): Scrapping the overall World Air Quality Index project data feed, and beeing so cheap that they would not even give any attribution for our work, and this despite their 80 millions annual USD fundings. Don't believe us? Check this snapshot.

هذا هو الإصدار الأول من واجهة برمجة تطبيقات موجز عناصر واجهة المستخدم الجديدة. هناك عدد لا بأس به من التحسينات قيد الإعداد بالفعل، مثل العرض والارتفاع الرسومي القابل للتعديل، ومقياس AQI القابل للتحديد، وما إلى ذلك. إذا كنت ترغب في اقتراح أي تحسين محدد آخر، فلا تتردد في إرسال رسالة إلينا.