COVID-19 térkép készítése Django, LeafletJS, Google Spreadsheets és S3 Cloud Storage használatával

Először jött egy ötlet, hogy január 24-én elkészítsem egy térképet, amely bemutatja a COVID-19 globális elterjedését. Még akkor is egyértelmű volt, hogy a történet átkozottul hosszú lesz. És senkinek sem tetszett.

A múlt héten pénteken, amikor otthoni irodában voltam, végre elindítottam egy térképet (úgy hívhatjuk, hogy webapp) a CurrentTime TV webhelyéhez. Ma elindítottuk a térkép 3 lokalizált változatát az RFE / RL-n keresztüli nyelvi szolgáltatásokhoz. Az összes térképet óránként frissítjük.

A probléma

A COVID-19 az 1. téma világszerte. Az emberek félek (én is félek). Nyilvánvaló, hogy már látta ezt a nagyszerű térképet.

A Coronavírus COVID-19 globális esetei a Johns Hopkins Egyetem (JHU) Rendszertudományi és Műszaki Központja (CSSE) által

A GYIK szerint a térkép szinte valós időben frissül. A termék jól szemlélteti az esetek számát az egyes országokban. A térkép ugyanakkor rendetlenségnek tűnik a nagy sűrűségű régiókban. Ezenkívül nehéz beszerezni a vírusok terjedéséről szóló regionális / globális áttekintést.

A terjedő COVID-19 megjelenítésének másik módja is - az egész ország megjelölése a megerősített és a halálos esetek függvényében. Igen, akkor az egész országot pirossal fogjuk megjelölni, még akkor is, ha egy halálos eset megerősítést nyer.

Franciaország COVID-19 adatok a CurrentTime angol weboldalon

És végül, a CSSE térkép csak angolul van. Közönségünk több mint 20 nyelven beszél, inkább a mobiltelefonokat részesíti előnyben, és többet szeretne megtudni a témáról. Mint azoknak a millióinak, akik fárszi.

Az RFE / RL RadioFarda COVID-19 térkép perzsa nyelven

Tervezés

Úgy döntöttem, hogy az egész élményt a térképpel a lehető legegyszerűbbé és áttekinthetőbbé teszem. Csak két képernyője van: leszállás és térkép.

  1. Landing megmondja az embernek (és egy keresőmotornak), ahonnan éppen leszállt
  2. A térkép jól mutatja az adatokat

Mint észrevehetjük, az összes interfész-átmenet alapja az általános CSS-átlátszóság és a határ stílusok megváltoztatása egy országvázlathoz.

Az alkalmazás elrendezése megfelel az RFE / RL (narancssárga, fáklya, Skolar betűkészlet) és az CurrentTime (szilva, lejátszás, Roboto kondenzált betűkészlet) márkanév-előírásainak. Az RFE / RL verzió támogatja a jobbról balra perzsa nyelvet is.

A Térkép angol verziója a CARTO lapkákat használja a többi lokalizációban használt alapvető OpenStreetMap helyett.

Korlátozások vonatkozhatnak

Furcsának tűnhet, de nem a Djangot használtam a térképtartalom kiszolgálására (ahogy általában használták). Képzelje el, hogy a közzétételi platform korlátozza, hogy csak statikus HTML-t szolgáltasson fel. Nincs dinamikus sablon, nincs kódgenerátor. Még manuálisan is frissítenie kell a HTML-t, mert nincs API.

Ugyanakkor távoli JS / CSS fájlokat is felvehet, és távoli XHR-hívásokat futtathat. Itt jön a varázslat vagy egyfajta JAM-stack alkalmazás, amelyet építettem erre a projektre.

Django (Python, háttér)

A Django Backend fő funkciói:

  1. Szinkronizálja a COVID-19 statisztikákat két forrásból: JHU CSSE a githubon (naponta frissítve) és a Coronavirus Monitor a RapidAPI-n (frissítés gyakrabban)
  2. Lokalizáció: Lokalizált címkék letöltése a Google Spreadsheets-ből
  3. Generálja a GeoJSON térképet, és töltse fel az S3 Cloud Storage-ba
  4. Generáljon térképes HTML-t inline JS / CSS-sel az online közzétételhez

Az 1–3. Feladatot óránként hajtják végre, hogy a térkép mindig aktuális legyen. A 4. feladatot újságíró csak egyszer hajtotta végre.

LeafletJS

Nagyon nagyszerű és rugalmas Javascript könyvtár, amely lehetővé teszi interaktív térképek készítését.

Szerencsére a Leaflet támogatja a különböző csempézés / címkézés szolgáltatókat. Az OpenStreetMap használata helyett elindíthatja a CARTO-t vagy akár a Google Maps alkalmazást is.

Google Spreadsheets

Szinte lehetetlen alternatívát találni a felület lokalizációjával kapcsolatos kollégákkal való agilis együttműködésre. Az orosz, angol, perzsa, bolgár és néhány más nyelvre történő fordítások kezelésére használtuk.

A hírekben az emberek ismerik ezt. A táblázatkezelő formátuma egyszerű. Tehát csak meg kell osztania velük, és írnia kell egy apró elemzőt, hogy címkéket szerezzen a háttéroldalon.

S3 Cloud Storage (CDN)

A térképnek interaktívnak és naprakésznek kell lennie. Ez kissé ostoba feladatnak tűnik, ha manuálisan kell frissítenie a HTML-t. Ezért úgy döntöttem, hogy áthelyezem a dinamikus részt egy S3-képes tárolóba (a NewsroomToolkit CDN-je a Digital Ocean Spaces-en). A CDN az API szerepét játszik abban, hogy a Frontend szinte független a kiadói platformonktól.

Egy darab GeoJSON, amelyet Django generált és CDN-en szolgált fel (a Cseh Köztársaság adatait kiemeljük)

Így működik:

  1. A Django feladat a lokalizált és frissített GeoJSON térképeket tolja a tárolóba
  2. A Storage ezeket a fájlokat helyettesítő CORS-beállítással rendelkezik, így azok elérhetőek az XHR más webhelyekről történő letöltéséhez
  3. Az ember megnyit egy oldalt a Térkép böngészőben
  4. A böngésző a CDN legfrissebb adatait tölti le és lokalizált térképet készít.
  5. Az emberek tájékozottak. Küldetés teljesítve.

KI

Szomorú, hogy jól finanszírozott ENSZ-ügynökséget látunk, és a legmegbízhatóbb adatforrás nem nyújt API / adatkészletet a COVID-19-hez. A helyzetjelentések PDF formátumban nagyszerűek. De nem elég 2020-ban.