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

  
<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 هي اسم المدينة التي تريد عرض القراءة الحالية لجودة الهواء فيها (على سبيل المثال `المدينة: "لندن"`).

北京

59

北京空气质量

59

良

更新时间 星期日20:00

PM2.5 AQI		59
PM10 AQI		26
O3 AQI		42

Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information.

يمكنك أيضًا تحديد اللغة التي سيتم استخدامها عن طريق ضبط خيار lang . على سبيل المثال، لتضمين الأداة باللغة الصينية (كما هو موضح على اليمين)، استخدم الكود التالي:

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

اللغات المدعومة حاليًا هي:

Beijing AQI is

59

Beijing Air Quality.

59

Moderate

Updated on Sunday 20:00

PM2.5 AQI		59
PM10 AQI		26
O3 AQI		42

Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information.

on Sunday 20:00

من الممكن تخصيص النص الذي سيتم عرضه داخل الأداة عن طريق تحديد خيار 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).

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

Display Configuration	Result
%cityname Air Quality is <b>%impact</b>.	Beijing Air Quality is Moderate.
%aqi <small>(%impact)</small>	59 Beijing Air Quality. 59 Moderate Updated on Sunday 20:00 PM2.5 AQI 59 PM10 AQI 26 O3 AQI 42 Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information. (Moderate)
<span style='%style;font-size:12px;padding:5px 10px;'>%cityname AQI: %impact</span>	Beijing AQI: Moderate
%cityname Air Quality is <span style='%style;padding:0 5px'>%impact</span> (%aqiv on %date)	Beijing Air Quality is Moderate ( 59 Beijing Air Quality. 59 Moderate Updated on Sunday 20:00 PM2.5 AQI 59 PM10 AQI 26 O3 AQI 42 Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information. on Sunday 20:00)
%cityname Air Quality is provided by %attribution	Beijing Air Quality is provided by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心)
<div style='%style;max-width:180px;text-align:center;'><small>%cityname AQI:</small> <div style='font-size:88px;height:60px;padding-top:30px;'>%aqiv</div> %impact</div>	Beijing AQI: 59 Beijing Air Quality. 59 Moderate Updated on Sunday 20:00 PM2.5 AQI 59 PM10 AQI 26 O3 AQI 42 Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information. Moderate
%details	Beijing Air Quality. 59 Moderate Updated on Sunday 20:00 PM2.5 AQI 59 PM10 AQI 26 O3 AQI 42 Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information.

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

سوف تنتج المحتوى التالي:

Pekin Jakość powietrza.

59

Moderate

Poprawiony: Niedziela 20:00

PM2.5 AQI		59
PM10 AQI		26
O3 AQI		42

Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information.

تحتوي كائنات 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>"));  
}  

London

70

London Air Quality.

70

Moderate

Updated on Sunday 12:00

PM2.5 AQI		70
PM10 AQI		24
O3 AQI		30

Data monitored by UK-AIR, air quality information resource - Defra, UK , London Air Quality Network - Environmental Research Group, King's College London . Click for more information.

Sunday 12:00

New-york

-

New-york Air Quality.

-

Not Available

Never updated!

Data monitored by . Click for more information.

Thursday 9:00

Seoul

40

Seoul Air Quality.

40

Good

Updated on Sunday 21:00

PM2.5 AQI		30
PM10 AQI		30
O3 AQI		40

Data monitored by South Air Korea Environment Corporation (대기오염실시간공개시스템) , Seoul Clean Air Pollution Information (서울특별시 기후대기환경정보) . Click for more information.

Sunday 21:00

Guangzhou

-

Guangzhou Air Quality.

-

Not Available

Updated on Tuesday, Mar 4th 2025

PM2.5 AQI

-

Data monitored by Guangzhou Environmental Protection Bureau (广州市生态环境局) , China National Urban air quality real-time publishing platform (全国城市空气质量实时发布平台) , U.S. Consulate Guangzhou Air Quality Monitor . Click for more information.

Tuesday 20:00

Hibiyakoen, Chiyoda, Tokyo

80

Hibiyakoen, Chiyoda, Tokyo Air Quality.

80

Moderate

Updated on Sunday 21:00

PM2.5 AQI		80
PM10 AQI		25
O3 AQI		44

Data monitored by Japan Atmospheric Environmental Regional Observation System (環境省大気汚染物質広域監視システム) , Tokyo, Japan Environment Agency (東京都環境局) . Click for more information.

Sunday 21:00

Shanghai

85

Shanghai Air Quality.

85

Moderate

Updated on Sunday 20:00

PM2.5 AQI		85
PM10 AQI		56
O3 AQI		48

Data monitored by Shanghai Environment Monitoring Center(上海市环境监测中心) , China National Urban air quality real-time publishing platform (全国城市空气质量实时发布平台) , U.S. Consulate Shanghai Air Quality Monitor . Click for more information.

Sunday 20:00

Paris

96

Paris Air Quality.

96

Moderate

Updated on Sunday 11:00

PM2.5 AQI		96
PM10 AQI		40
O3 AQI		19

Data monitored by AirParif - Association de surveillance de la qualité de l'air en Île-de-France , European Environment Agency . Click for more information.

Sunday 11:00

HongKong

83

HongKong Air Quality.

83

Moderate

Updated on Sunday 20:00

PM2.5 AQI		83
PM10 AQI		36
O3 AQI		26

Data monitored by Hong Kong Environmental Protection Department - 空氣質素健康指數單張及海報 . Click for more information.

Sunday 20:00

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

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

• أولاً، تأكد دائمًا من وجود الإسناد إلى وكالة حماية البيئة الأصلية. جميع بيانات جودة الهواء التي يمكنك العثور عليها في مشروع مؤشر جودة الهواء العالمي هي بفضل العمل الشاق الذي قامت به جميع وكالة حماية البيئة في جميع أنحاء العالم، لذا يرجى التأكد من إسناد عملهم أيضًا. إذا كنت تستخدم واجهة برمجة التطبيقات الآلية، فستكون الإسناد متاحًا من حقل 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 القابل للتحديد، وما إلى ذلك. إذا كنت ترغب في اقتراح أي تحسين محدد آخر، فلا تتردد في إرسال رسالة إلينا.