Aby usprawnić integrację naszych widżetów AQI z zewnętrznymi stronami internetowymi, opracowaliśmy nowy kanał API widżetów. W porównaniu z istniejącym kanałem widżetów, ten nowy kanał API zapewnia znacznie większą elastyczność integracji, ale także znacznie więcej opcji dostosowywania wyglądu widżetu.
 | 55 | |
 | 30 | |
 | 37 |
Możesz na przykład wyświetlić mały widget, tak prosty jak Beijing
Nowy framework obsługuje także szablony, wiele języków (angielski, chiński uproszczony i tradycyjny, hiszpański, ...), a także możliwość programowej integracji z wywołaniami zwrotnymi JavaScript opartymi na danych.
A. Konfiguracja podstawowa
Podstawowa integracja jest prosta i bezpośrednia. Najpierw musisz dodać następujący fragment kodu:
<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>
Następnie po prostu dodaj ten inny kod, aby dołączyć widżet:
<span id="city-aqi-container"></span> <script type="text/javascript" charset="utf-8"> _aqiFeed({ container: "city-aqi-container", city: "beijing" }); </script>
Funkcja `_aqiFeed` przyjmuje jako argument blok konfiguracyjny widgetu. Parametr `container: "city-aqi-container"` odnosi się do identyfikatora tagu, w którym chcesz wstawić widget (np. `<span id='city-aqi-container'></span>`), oraz parametr city nazwa miasta, dla którego chcesz wyświetlić aktualny odczyt jakości powietrza (np. `miasto: „londyn”).
B. Określanie języka
Możesz także określić używany język, ustawiając opcję lang . Na przykład, aby dołączyć widget w języku chińskim (jak pokazano po prawej), użyj następującego kodu:
_aqiFeed({ container:"city-aqi-container", city:"beijing", lang:"cn" });
Obecnie obsługiwane języki to:
"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 Jeśli nie zostanie określony lub ustawiony na null , używany będzie język angielski.
C. Określenie formatu wyświetlania
on Sunday 22:00
Istnieje możliwość dostosowania tekstu wyświetlanego w widżecie poprzez określenie opcji display . Na przykład, aby wyświetlić zarówno tekstową nazwę „AQI”, jak i czas aktualizacji (jak pokazano na widżecie po lewej stronie), możesz użyć następującego kodu:
_aqiFeed({ display:"%cityname AQI is %aqi<br><small>on %date</small>", container:"city-aqi-container-display", city:"beijing" });
display parametr jest ciągiem opartym na formacie HTML i może zawierać dowolne z następujących słów kluczowych:
- `%cityname` dla nazwy miasta (np.
Beijing), - `%aqi` dla udekorowanej wartości AQI (np.
58), - `%aqiv` dla niedekorowanej (surowego tekstu) wartości AQI (np.
58), - `%style` dla deklaracji css dekorowanych szczegółów AQI (np.
background-color: #ffde33;color:#000000;), - `%data` oznacza czas aktualizacji AQI (np.
Wed 20:00), - „%wpływ” dla powiązanego wpływu na zdrowie (np.
Good,Moderate...) - „% przypisania” dla przypisania danych AQI (np.
Beijing Environmental Protection Monitoring Center) - `%details` dla pełnych szczegółów AQI (zawartość wyskakującego okienka wyświetlanego po najechaniu myszką na wartość AQI).
Oto kilka przykładów:
| Display Configuration | Result | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| %cityname Air Quality is <b>%impact</b>. | Beijing Air Quality is Moderate. | |||||||||
| %aqi <small>(%impact)</small> | 55 (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
( 55 on Sunday 22: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:
55 | |||||||||
| %details | 55
Moderate
Updated on Sunday 22:00
|
D. Programowe wywołanie zwrotne
Jeśli wolisz integrację samodzielnie, możesz także określić wywołanie zwrotne funkcji JavaScript, które będzie wykonywane podczas ładowania danych. Wystarczy dodać opcję callback w bloku parametrów, taką jak na przykład:
_aqiFeed({ city:"beijing", callback:function(aqi){ /* Do whatever you want with the AQI object */ console.log(aqi); } });
Na przykład, zakładając, że używasz również jquery, następujący 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>
wygeneruje następującą treść:
 | 55 | |
 | 30 | |
 | 37 |
Obiekty aqi zawierają wszystkie słowa kluczowe wymienione w sekcji C (format wyświetlania).
E. Zawiera wiele widżetów
Możliwe jest umieszczenie wielu widżetów na jednej stronie. Wszystko, czego potrzebujesz, to przekazać do funkcji `_aqiFeed` tablicę ze wszystkimi widżetami, które musisz uwzględnić. Na przykład, aby wstawić Londyn, Paryż i Nowy Jork, możesz użyć tego kodu:
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. Wykorzystanie paszy
Ten kanał widżetów jest udostępniany bezpłatnie i wyłącznie w celu integracji kanału z innymi stronami internetowymi (tzn. z wyłączeniem aplikacji) oraz pod warunkiem rozsądnego i akceptowalnego użycia. Zastrzegamy sobie prawo do zmiany struktury pliku danych (formatu danych) w dowolnym momencie i bez wcześniejszego powiadomienia, dlatego jeśli planujesz niestandardową integrację, lepiej się z nami skontaktować.
Podczas integracji należy kierować się kilkoma zasadami deontologicznymi , korzystając z źródła danych:
- Po pierwsze, zawsze upewnij się, że obecne jest przypisanie do pochodzenia EPA. Wszystkie dane dotyczące jakości powietrza, które można znaleźć w projekcie Światowego Indeksu Jakości Powietrza, powstały dzięki ciężkiej pracy wszystkich agencji EPA na całym świecie, dlatego też pamiętaj o podaniu informacji o ich pracy. Jeśli korzystasz z programowego API, atrybucja jest dostępna w polu
attribution. - Jeśli jesteś z instytucji i korzystasz z danych, prosimy o okazanie szacunku i oddanie punktów za naszą pracę. Jeśli próbujesz usunąć plik danych, pamiętaj, że ten projekt opiera się na projektach sponsorskich i współpracy, więc rozważ wsparcie nas , zamiast nas usuwać, szczególnie jeśli jesteś instytucją lub uniwersytetem na dużą skalę.
- W rzeczywistości nie zachowujcie się jak WRI ( World Resource Institute ): wyrzucenie całego źródła danych projektu Światowego Indeksu Jakości Powietrza i bycie tak tanimi, że nawet nie podaliby żadnego przypisu naszej pracy, i to pomimo ich 80 miliony dolarów rocznie. Nie wierzysz nam? Sprawdź tę migawkę .
G. Przyszłe ulepszenia
To jest pierwsza wersja nowego interfejsu API kanału widżetów. W przygotowaniu jest już sporo ulepszeń, takich jak regulowana szerokość i wysokość grafiki, możliwość wyboru skali AQI itp. Jeśli chcesz zasugerować inne konkretne ulepszenia, wyślij nam wiadomość.
