Kako bismo poboljšali integraciju naših AQI widgeta unutar vanjskih web stranica, razvili smo novi widget API feed. U poređenju sa postojećim widget feedom, ovaj novi API feed pruža mnogo više fleksibilnosti za integraciju, ali i mnogo više opcija za prilagođavanje izgleda vidžeta.
 | 167 | |
 | 101 | |
 | 19 |
Možete, na primjer, prikazati mali widget jednostavno kao Beijing
Novi okvir takođe podržava šabloniranje, više jezika (engleski, pojednostavljeni i tradicionalni kineski, španski, ...) kao i mogućnost programske integracije sa javascript povratnim pozivima zasnovanim na podacima.
A. Osnovno podešavanje
Osnovna integracija je jednostavna i jasna. Prvo morate dodati sljedeći dio koda:
<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>
Zatim samo dodajte ovaj drugi kod da biste uključili widget:
<span id="city-aqi-container"></span> <script type="text/javascript" charset="utf-8"> _aqiFeed({ container: "city-aqi-container", city: "beijing" }); </script>
Funkcija `_aqiFeed` uzima kao argument konfiguracijski blok za widget. Parametar `kontejner: "city-aqi-container"` se odnosi na id oznake u koju želite da umetnete widget (npr. `<span id='city-aqi-container'></span>`), i parametar city naziv grada za koji želite da prikažete trenutno očitavanje kvaliteta zraka (npr. `grad: "london"`).
B. Određivanje jezika
Također možete odrediti jezik koji će se koristiti postavljanjem opcije lang . Na primjer, da biste uključili widget na kineskom (kao što je prikazano desno), koristite sljedeći kod:
_aqiFeed({ container:"city-aqi-container", city:"beijing", lang:"cn" });
Trenutno podržani jezici su:
"en": English"cn": Chinese"jp": Japanese"es": Spanish"kr": Korean"ru": Russian"hk": Traditional Chinese"fr": French"pl": Polish"de": German"pt": Portuguese"vn": Vietnamese"it": Italian"id": Indonesian"nl": Dutch"fa": Persian"th": Thai"hu": Hungarian"el": Greek"ro": Romanian"bg": Bulgarian"ur": Urdu"hi": Hindi"ar": Arabic"sr": Serbian"bn": Bangla"hu": Hungarian"bs": Bosnian"hr": Croatian"tr": Turkish"uk": Ukrainian"cs": Czech"be": Belarusian"km": Khmer"lo": Lao Ako nije navedeno ili postavljeno na null , koristi se engleski.
C. Određivanje formata prikaza
on Friday 8:00
Moguće je prilagoditi tekst koji će se prikazati unutar widgeta navođenjem opcije display . Na primjer, za prikaz i s tekstualnim imenom "AQI" kao i sa vremenom ažuriranja (kao što je prikazano na widgetu s lijeve strane), možete koristiti sljedeći kod:
_aqiFeed({ display:"%cityname AQI is %aqi<br><small>on %date</small>", container:"city-aqi-container-display", city:"beijing" });
display parametara je niz baziran na HTML-u i može sadržavati bilo koju od sljedećih ključnih riječi:
- `%cityname` za ime grada (npr.
Beijing), - `%aqi` za ukrašenu AQI vrijednost (npr.
58), - `%aqiv` za neukrašenu (neobrađenu) vrijednost AQI (npr.
58), - `%style` za css deklaraciju ukrašenih AQI detalja (npr.
background-color: #ffde33;color:#000000;), - `%date` za vrijeme u kojem je AQI ažuriran (npr.
Wed 20:00), - `%uticaj` za povezani utjecaj na zdravlje (npr.
Good,Moderate...) - `%attribution` za AQI atribuciju podataka (npr.
Beijing Environmental Protection Monitoring Center) - `%details` za potpune detalje AQI (sadržaj iskačućeg prozora koji se prikazuje kada se mišem pomaknete preko vrijednosti AQI).
Evo nekoliko primjera:
| Display Configuration | Result | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| %cityname Air Quality is <b>%impact</b>. | Beijing Air Quality is Unhealthy. | |||||||||
| %aqi <small>(%impact)</small> | 167 (Unhealthy) | |||||||||
| <span style='%style;font-size:12px;padding:5px 10px;'>%cityname AQI: %impact</span> | Beijing AQI: Unhealthy | |||||||||
| %cityname Air Quality is <span style='%style;padding:0 5px'>%impact</span> (%aqiv on %date) | Beijing Air Quality is Unhealthy
( 167 on Friday 8: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:
167 | |||||||||
| %details | 167
Unhealthy
Updated on Friday 8:00
|
D. Programski povratni poziv
Ako više volite DIY integraciju, također možete odrediti da povratni poziv javascript funkcije bude kada se podaci učitaju. Vi samo trebate dodati opciju callback u blok parametara, kao što je na primjer:
_aqiFeed({ city:"beijing", callback:function(aqi){ /* Do whatever you want with the AQI object */ console.log(aqi); } });
Na primjer, pod pretpostavkom da također koristite jquery, sljedeći kod:
<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>
će proizvesti sljedeći sadržaj:
 | 167 | |
 | 101 | |
 | 19 |
aqi objekti sadrže sve ključne riječi spomenute u odjeljku C (format prikaza).
E. Uključujući više vidžeta
Moguće je uključivanje više widgeta na jednu stranicu. Sve što trebate je proslijediti funkciji `_aqiFeed` niz sa svim widgetima koje trebate uključiti. Na primjer, da biste umetnuli London, Pariz i New York, možete koristiti ovaj kod:
The result is: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>")); }
F. Upotreba hrane
Ovaj widget feed je dostupan besplatno i isključivo u svrhu integracije feeda u druge web stranice (tj. aplikacije su isključene) i pod uvjetom razumne i prihvatljive upotrebe. Zadržavamo pravo promjene strukture feeda (formata podataka) u bilo koje vrijeme i bez prethodne najave, stoga je bolje da nas kontaktirate ako planirate napraviti prilagođenu integraciju.
Prilikom integracije postoji nekoliko deontoloških pravila koja treba primijeniti pri korištenju feeda podataka:
- Prvo, uvijek se uvjerite da postoji pripisivanje izvornoj EPA. Svi podaci o kvaliteti zraka koje možete pronaći na projektu Svjetskog indeksa kvalitete zraka zahvaljuju se napornom radu svih EPA-a širom svijeta, pa vas molimo da navedete i njihov rad. Ako koristite programski API, atribucija je dostupna iz polja
attribution. - Ukoliko ste iz institucije i koristite podatke, molimo vas da pokažite poštovanje i vratite kredite za naš rad. Ako pokušavate da izvučete izvor podataka, imajte na umu da se ovaj projekat oslanja na projekte sponzorstva i saradnje, pa razmislite o tome da nas podržite , a ne da nas odbacite, posebno ako ste institucija ili univerzitet velike veličine.
- Zapravo, nemojte se ponašati kao WRI ( Svjetski institut za resurse ): ukidanje cjelokupnog izvora podataka o projektu Svjetskog indeksa kvalitete zraka i tako jeftino da ne bi ni dali nikakvu atribuciju za naš rad, i to uprkos njihovim 80 milionska godišnja sredstva u USD. Ne verujete nam? Provjerite ovaj snimak .
G. Buduća poboljšanja
Ovo je prva verzija ovog novog widget feed API-ja. Već postoji dosta poboljšanja u pripremi, kao što su podesiva širina i visina grafike, izbor AQI skale, itd. Ako želite da predložite bilo koje drugo specifično poboljšanje, slobodno nam pošaljite poruku.
