Integrarea de bază este simplă și directă. Mai întâi trebuie să adăugați următoarea bucată de cod:

  
<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>

Apoi, trebuie doar să adăugați acest alt cod pentru a include widget-ul:

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

Funcția `_aqiFeed` ia ca argument blocul de configurare pentru widget. Parametrul `container: "city-aqi-container"` se referă la id-ul etichetei în care doriți să introduceți widget-ul (ex. `<span id='city-aqi-container'></span>`), iar parametrul city numele orașului pentru care doriți să afișați valoarea curentă a calității aerului (de ex. `city: "london"`).

De asemenea, puteți specifica limba care va fi utilizată setând opțiunea lang . De exemplu, pentru a include widget-ul în chineză (așa cum se arată în dreapta), utilizați următorul cod:

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

Limbile acceptate în prezent sunt:

Este posibil să personalizați textul care urmează să fie afișat în cadrul widget-ului prin specificarea opțiunii display . De exemplu, pentru a afișa atât numele textual „AQI”, cât și timpul de actualizare (așa cum se arată în widgetul din stânga), puteți utiliza următorul cod:

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

display parametrului este un șir bazat pe HTML și poate conține oricare dintre următoarele cuvinte cheie:

• `%cityname` pentru numele orașului (de exemplu Beijing ),
• `%aqi` pentru valoarea AQI decorată (de ex. 58 ),
• `%aqiv` pentru valoarea AQI nedecorată (text brut) (de ex. 58 ),
• `%style` pentru declarația css a detaliilor AQI decorate (de exemplu background-color: #ffde33;color:#000000; ),
• `%date` pentru ora la care a fost actualizat AQI (de exemplu Wed 20:00 ),
• `%impact` pentru impactul asociat asupra sănătății (de exemplu, Good , Moderate ...)
• `%attribution` pentru atribuirea datelor AQI (de exemplu Beijing Environmental Protection Monitoring Center )
• `%details` pentru detaliile complete AQI (conținutul pop-up-ului afișat când deplasați mouse-ul peste valoarea AQI).

Iată câteva exemple:

Dacă preferați integrarea DIY, puteți specifica, de asemenea, o funcție de apelare javascript care să fie atunci când datele sunt încărcate. Trebuie doar să adăugați opțiunea callback în blocul de parametri, cum ar fi, de exemplu:

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

De exemplu, presupunând că utilizați și jquery, următorul cod:

  
<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>

va produce următorul conținut:

Obiectele aqi conțin toate cuvintele cheie menționate în secțiunea C (format de afișare).

Este posibilă includerea mai multor widget-uri într-o singură pagină. Tot ce aveți nevoie este să transmiteți funcției `_aqiFeed` o matrice cu toate widget-urile pe care trebuie să le includeți. De exemplu, pentru a introduce Londra, Paris și New York, puteți folosi acest cod:

  
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>"));  
}  

Acest feed de widget-uri este oferit gratuit și cu scopul exclusiv de a integra feedul în alte site-uri web (adică aplicațiile sunt excluse) și cu condiția unei utilizări rezonabile și acceptabile. Ne rezervăm dreptul de a modifica structura feedului (formatul de date) în orice moment și fără notificare prealabilă, așa că mai bine ne contactați dacă intenționați să faceți o integrare personalizată.

Când se face integrarea, există câteva reguli deontologice care ar trebui aplicate atunci când se utilizează fluxul de date:

• În primul rând, asigurați-vă întotdeauna că este prezentă atribuirea APE de origine. Toate datele despre calitatea aerului pe care le puteți găsi în proiectul World Air Quality Index se datorează muncii asidue din partea tuturor EPA din întreaga lume, așa că vă rugăm să asigurați-vă că oferiți și atribuirea pentru munca lor. Dacă utilizați API-ul programatic, atribuirea este disponibilă din câmpul attribution .
• Dacă sunteți dintr-o instituție și utilizați datele, vă rugăm să arătați respect și să plătiți înapoi creditele pentru munca noastră. Dacă încercați să eliminați fluxul de date, vă rugăm să rețineți că acest proiect se bazează pe proiecte de sponsorizare și cooperare, așa că luați în considerare să ne susțineți mai degrabă decât să ne renunțați, mai ales dacă sunteți o instituție sau o universitate la scară largă.
• De fapt, nu acționați ca WRI ( World Resource Institute ): eliminând fluxul de date global al proiectului Indexul mondial al calității aerului și fiind atât de ieftin încât nici măcar nu ar da nicio atribuire pentru munca noastră, și asta în ciuda celor 80 de ani. milioane de dolari anuale de finanțare. Nu ne crezi? Verificați acest instantaneu .

Aceasta este prima versiune a acestui nou API de feed widget. Există deja câteva îmbunătățiri în curs, cum ar fi lățimea și înălțimea grafică reglabile, scara AQI selectabilă etc. Dacă doriți să sugerați orice altă îmbunătățire specifică, nu ezitați să ne trimiteți un mesaj.