COVID-19-kartan rakentaminen Djangon, LeafletJS: n, Google-laskentataulukoiden ja S3 Cloud Storage -sovelluksen avulla

Ensimmäisen kerran keksin idean rakentaa kartta, joka osoittaa COVID-19: n maailmanlaajuisen leviämisen 24. tammikuuta. Jo silloin oli selvää, että tarina tulee olemaan pirun kauan. Ja kukaan ei pitänyt siitä.

Perjantaina viime viikolla ollessani kotitoimistossa olen vihdoin julkaissut kartan (voit kutsua sitä webappiksi) CurrentTime TV -sivustolle. Tänään julkaisimme 3 lokalisoitua versiota karttapalvelusta RFE / RL: n kautta. Kaikki kartat päivitetään tunnin välein.

Ongelma

COVID-19 on aihe # 1 maailmanlaajuisesti. Ihmiset ovat peloissaan (minäkin pelkään). Ilmeisesti olet jo nähnyt tämän upean kartan.

Johnsona Hopkinsin yliopiston (JHU) systeemitieteiden ja tekniikan keskuksen (CSSE) Coronavirus COVID-19 -tapaukset

UKK: n mukaan kartta päivittyy melkein reaaliajassa. Tuote visualisoi hienosti tapausten lukumäärän kussakin maassa. Kartta näyttää kuitenkin sotkulta tiheästi alueilla. Lisäksi on vaikea saada alueellista / globaalia yleiskuvaa virusten leviämisestä.

On myös yksi tapa visualisoida leviävä COVID-19 - merkitsemällä koko maat vahvistettujen ja kuolemantapausten mukaan. Kyllä, me merkitsemme koko maan punaisella, vaikka yksi kuolemantapaus olisi vahvistettu.

Ranska COVID-19 -tiedot CurrentTime English -verkkosivustolla

Ja lopuksi, CSSE-kartta on vain englanniksi. Yleisömme puhuu yli 20 kieltä, suosii matkapuhelimia ja haluaa oppia lisää aiheesta. Kuten miljoonat ihmiset, jotka puhuvat persiasta.

RFE / RL: n RadioFarda COVID-19 -kartta persian kielellä

Design

Päätin tehdä koko kokemuksen kartasta mahdollisimman yksinkertaiseksi ja selkeäksi. Siinä on vain kaksi näyttöä: Lasku ja Kartta.

  1. Laskeutuminen kertoo ihmiselle (ja hakukoneelle), mihin hän on juuri laskeutunut
  2. Kartta, hyvin, näyttää tiedot

Kuten saatat huomata, kaikki käyttöliittymäsiirtymät perustuvat CSS: n yleisen opasiteetin ja reunustyylin muuttamiseen maan ääriviivat.

Sovellusasettelu vastaa sekä RFE / RL (oranssi, taskulamppu, Skolar-fontti) että CurrentTime (luumu, toisto, Roboto tiivistetty fontti) tuotemerkkistandardeja. RFE / RL-versio tukee myös oikealta vasemmalle persian kieltä.

Kartan englanninkielinen versio käyttää CARTO-laattoja muissa lokalisoinneissa käytetyn OpenStreetMap-perustason sijasta.

Rajoituksia voidaan soveltaa

Se voi kuulostaa oudolta, mutta en käyttänyt Djangoa karttasisällön palvelemiseen (kuten yleensä käytettiin). Kuvittele, julkaisupalvelusi rajoittaa sinua tarjoamaan vain staattista HTML-koodia. Ei dynaamisia malleja, ei koodigeneraattoreita. Sinun on jopa päivitettävä HTML-koodi manuaalisesti, koska sovellusliittymää ei ole.

Voit kuitenkin sisällyttää etä JS / CSS-tiedostot ja suorittaa etä XHR-puhelut. Täältä tulee taikuus tai eräänlainen JAM-pino-sovellus, jonka olen rakentanut tähän projektiin.

Django (Python, taustakuva)

Django Backendin päätoiminnot ovat:

  1. Synkronoi COVID-19-tilastot kahdesta lähteestä: JHU CSSE githubissa (päivitetään päivittäin) ja Coronavirus Monitor RapidAPI: llä (päivitys useammin)
  2. Lokalisaatio: nouta lokalisoidut tarrat Google-laskentataulukoista
  3. Luo GeoJSON-kartta ja lataa se S3 Cloud Storage -sovellukseen
  4. Luo kartta HTML sisäisellä JS / CSS: llä online-julkaisemista varten

Tehtävät 1–3 suoritetaan tunnin välein, jotta kartta olisi aina ajankohtainen. Tehtävä 4, jonka toimittaja suorittaa vain kerran.

LeafletJS

Todella hieno ja joustava Javascript-kirjasto, joka mahdollistaa interaktiivisten karttojen rakentamisen.

Onneksi Leaflet tukee erilaisia ​​laatoitus- / merkintätoimittajia. Sen sijaan, että käytät OpenStreetMap-ohjelmaa, voit mennä CARTO: n tai jopa Google Mapsin kanssa.

Google-taulukot

On melkein mahdotonta löytää vaihtoehtoa ketterälle yhteistyölle kollegojen kanssa rajapinnan lokalisoinnista. Käytimme sitä käännösten hallitsemiseksi venäjälle, englannille, persialle, bulgarialle ja harvoille muille kielille.

Uutishuoneiden ihmiset tuntevat sen. Laskentataulukomuoto on helppo. Joten sinun täytyy vain jakaa se heidän kanssaan ja kirjoittaa pieni jäsentäjä hakeaksesi tarroja taustapuolelle.

S3 Cloud Storage (CDN)

Kartan on oltava vuorovaikutteinen ja ajan tasalla. Se voi kuulostaa hiukan tyhmältä tehtävältä, kun joudut päivittämään HTML: tä manuaalisesti. Joten päätin siirtää dynaamisen osan S3-yhteensopivaan tallennustilaan (NewsroomToolkit's CDN on Digital Ocean Spaces). CDN: llä on API-rooli, joten Frontend on melkein riippumaton julkaisupalvelustamme.

Djangon generoima ja CDN: n välityksellä toimitettu geoJSON-kappale (Tšekin tasavallan tiedot on korostettu)

Näin se toimii:

  1. Django-tehtävä työntää lokalisoidun ja päivitetyn GeoJSON-kartan tallennustilaan
  2. Varastoissa on näiden tiedostojen jokerimerkki CORS-asetus, joten ne ovat käytettävissä XHR: n noutamiseksi muilta verkkosivustoilta
  3. Ihminen avaa sivun Kartta-selaimessa
  4. Selain hakee viimeisimmät COVID-19-tiedot CDN: stä ja tuottaa lokalisoidun kartan.
  5. Ihmisille tiedotetaan. Tehtävä suoritettu.

KUKA

On surullinen nähdä hyvin rahoitettu YK-virasto, ja luotettavin tietolähde ei tarjoa sovellusliittymää / tietojoukkoa COVID-19: lle. PDF-tilanneraportit ovat mahtavia. Mutta se ei riitä vuonna 2020.