Luo yksinkertainen COVID-19 -seurantasovellus

Image Kuluttajaraporttien ansiosta

Tässä artikkelissa käsittelemme kuinka rakentaa erittäin yksinkertainen sovellus seuraamaan ilmoitettua surullisen koronaviruksen, nimeltään COVID-19, tapausta käyttämällä tavallista javascriptiä ilman mitään kehystä ja järjestelmätieteiden ja tekniikan keskuksen vapaasti saatavana olevia tietoja ( CSSE) Johns Hopkinsin yliopistossa. Laitos on rakentanut loistavan interaktiivisen verkkopohjaisen kojelaudan, jolla visualisoidaan ja seurataan ilmoitettua tapausta reaaliajassa.

Jos olet puhdas kehittäjä, jolla ei ole aavistustakaan uudesta tappavasta koronaviruksesta (kuten minä ja minä), anna itsellesi pään ylös täällä olevan Maailman terveysjärjestön virallisesta raportista. Ole hyvä!

Tehdään se jo valmis

Ensinnäkin luodaan yksinkertainen index.html, jossa on muutama HTML-elementti ja javascript app.js tietojen lataamista ja käsittelyä varten.

Seuraavaksi tietysti olet jo arvata luonut app.js

Tietojen nouto

Tärkein osa tätä toteutusta on miten voimme saada tiedot. Kuten edellä mainittiin, saan tietoja tästä GitHubista. Siellä on paljon erilaisia ​​tietoja. Yksinkertaisuuden vuoksi keskitymme vain tietoihin, jotka osoittavat päivittäin raportoidut tapaukset kaikista maista. Se sijaitsee tässä hakemistossa - https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_daily_reports. Jos olet askeleen edellä minua, saatat jo siirtyä hakemistoon ja tutkia sen rakennetta. No, kuten olette huomanneet, sillä on kaikki tiedot 22. tammikuuta 2020 alkaen nykypäivään (tai eilen). Tiedosto on CSV-muodossa ja nimeltään muodossa MM-PP-VVVV. Jos napsautat yhtä csv-tiedostoa ja napsautat RAW-painiketta, se näyttää tiedoston raakamuodossa eri linkillä - esimerkiksi https://raw.githubusercontent.com/CSSEGISandData/COVID-19/ master / csse_covid_19_data / csse_covid_19_daily_reports / 03-07-2020.csv.

Voila, näin voin saada päivittäiset tiedot. Meidän on tehtävä vain korvataksesi ”03–07–2020” nykyisellä päivämäärällä tai millä tahansa päivällä, jonka haluaisimme noutaa.

Jos lähestymme fetchData-tiedostoa, se rakentaa ensin datan noutamisen URL-osoitteen saadaksesi arvon ohituspäivämääräargumentista ja paikannut sen https://cors-anywhere.herokuapp.com -sivulla CORS-välityspalvelimen URL-osoitteeksi puuttua alkuperää koskevaan ongelmaan. Sitten se palauttaa tiedot, jos niitä on saatavana, tai yrittää noutaa eilisen tiedot ja niin edelleen.

Tietojen renderointi

Kun olemme saaneet tiedot, seuraava ja viimeinen tehtävä on keittää tiedot haluamme ja mielikuvituksemme mukaan ja näyttää ne lautasella.

Otamme tietoja ei ole oikeasti jäsenneltyjä - puuttuva ja ylimääräinen arvo. Jos huomasit, suurin osa tiedoista voidaan jakaa 8 sarakkeeseen. Ensimmäinen sarake edustaa ”maakuntaa / osavaltiota”, sekunnit tarkoittaa ”maata” ja niin edelleen. On kuitenkin joitain tapauksia, joissa ”läänille / osavaltiolle” ei ole arvoa, ja joissakin tapauksissa tiedot on halkaistu yhdeksään sarakkeeseen, koska osavaltion nimi sisältää siinä “,”.

Tavoitteenamme on saada vahvistettujen tapausten kokonaismäärä kustakin maasta. Siksi sain sinulle hyvin yksinkertaisen ratkaisun, joka on saada maan nimi toisesta sarakkeesta, jos tiedot ovat normaaleja (yhteensä 8 saraketta) ja 3 sarakkeesta, jos tiedot ovat vähän pois (sarake yhteensä 9). Lisäksi, jos maa on ”muu”, liitämme ”provinssi” -sarakkeeseen merkityksen lisäämiseksi siihen. Se on risteilyalus, joka ei teknisesti kuulu mihinkään maahan (No, se on Japanissa!). Lopuksi, esitämme sen yksinkertaisissa luetteloelementeissä. Ja olemme valmiita!

Bonuspiste - ota käyttöön välimuisti ja & offline-tuki

Aiomme käyttää Workboxia likaisten tehtävien suorittamiseen. Jos ihmettelet, mikä se on, lue edellinen blogi.

Workbox on joukko kirjastoja ja solmumoduuleja, jotka tekevät sisällön välimuistista helpon ja hyödyntävät kaikkia ominaisuuksia, joita käytetään Progressiivisten Web-sovellusten luomiseen.

Aluksi sinun on asennettava paketti

npm install workbox-cli --save-dev

Luo seuraavaksi manifest.json - voit ladata täältä. Pääasiassa sen määrittäminen, minkä kuvakkeen saat, kun asennat laitteeseesi.

Luo sitten workbox-config.js työlaatikon kokoonpanoa varten. Tallenna kaikki tiedostot (tyylitaulukko, html, javascript ja kuvat) välimuistiin ja määritä palveluntarjoajan lähteen ja määränpään asetukset.

Luo sitten service-worker-src.js määrittääksesi välimuisti ja suorituksen välimuisti.

Suurin osa siitä on suoritusajan välimuistin määrittäminen, kun haemme tietoja ja tallennamme ne selaimen välimuistiin. Täällä käytämme StaleWhileRevalidate-strategiaa. Voit lukea sen tarkemmin täältä.

Viimeisenä, ja ei vähäisimpänä: navigoi sovellushakemistoon ja suorita seuraava komento luodaksesi käännetty service-worker.js

npx workbox injectManifest workbox-config.js

Ja anteeksi vielä yksi asia, rekisteröi palvelun työntekijä ja manifest.json hakemistoon.html.

Jos haluat jälleen testata välimuistin ja offline-selaamisen toimivuuden, katso edellistä blogiani.

.... Tällä kertaa olemme valmis.

Kotitehtävät

Ole hyvä ja lisää siihen lisää makua suunnittelutyötä varten. Voit ottaa käyttöön myös muita ominaisuuksia, kuten heijastaa sen kartalle, koska tiedot sisältävät myös pituuden ja leveyden tai luoda aikajanan seurannan aikasarjatiedoista.

Toinen bonuspiste - E2E-testaus

Koska olet mukava ihminen, me annamme sinulle toisen bonuspisteen, joka on End End-End -testin toteuttaminen Cypressilla.

Mikä on Cypress?

Cypress on seuraavan sukupolven käyttöliittymän testaustyökalu, joka on rakennettu nykyaikaiseen verkkoon. Käsittelemme tärkeimpiä kipupisteiden kehittäjiä ja laadunvarmistusinsinöörejä, kun he testaavat nykyaikaisia ​​sovelluksia.

Miksi Cypress?

Pyrin etsimään parhaan työkalun suorittamaan kokonaistesti rakentamallemme tuotteelle. Yritin useita testaustyökaluja ja -kehyksiä, mutta mikään ei voita Cypressia. Sitten päätimme kokeilla sitä konseptikuvaukseksi ja koko joukkue rakasti sitä vielä enemmän. Äskettäin Cypress-tiimi on julkaissut version 4.0, joka esittelee Firefoxin ja Edge-tuen Chromen tuen päälle. Koska se tukee nyt melkein kaikkia tärkeimpiä selaimia, sinun pitäisi myös kokeilla sitä.

Asennus

Toteutetaan E2E-testi projektiimme. Siirry ensin projektihakemistoon ja asenna seuraava komento.

npm asenna cypress -D

Asennuksen jälkeen voit avata sypressityökalun ajamalla npx cypress open. Testaaksesi sen voit napsauttaa mitä tahansa esimerkitiedostoa. Sen pitäisi sitten avata uusi ikkuna ja suorittaa interaktiivinen testauselain.

Cypress-esimerkki

Coding

Voimme poistaa kaikki nämä esimerkitiedostot ja luoda yksinkertaisen spec-tiedostomme cypress / integration / spec.js seuraavasti

Tarkastellaan mitä koodit tarkoittavat

ennen jokaista osaa: Tämä osa suoritetaan joka kerta ennen kutakin tapausta. Se navigoi paikalliseen URL-osoitteeseen ennen kuin voimme testata elementtiä.

Ensimmäinen tapaus (rivillä 9): Se vain tarkistaa, onko päivämääräelementti näkyvä eikä tyhjä. Se on hyvin suoraviivaista, eikö niin?

Toinen tapaus (rivillä 15): Ensin se tarkistaa tietoelementin olevan näkyvä ja tyhjä. Sitten se tarkistaa, sisältääkö se ”Kiina” ja ”Korea”.

Seuraavaksi meidän on luotava Cypress-kokoonpano alla esitetyllä tavalla.

Suorita testi

Helppo tapa suorittaa testi, suorittaa npx cypress auki ja tuloksena olisi jotain seuraavaa.

Sypress interaktiivinen tila

Jos olet päätekäyttäjä, luomme dev.- ja testikomentosarja scrip.json-pakettiin, jotta voimme käyttää sitä seuraavalla kerralla.

Asenna seuraavaksi selain-synkronointi ja suorita npm run dev aloittaaksesi kehityspalvelimen. Asenna sitten odotuspaketti ja suorita npm ajotesti toiselle päätelaitteelle testin aloittamiseksi. wait-on: ta käytetään odottamaan, kunnes http: // localhost: 8888 palauttaa OK-koodin ja suorittaa testin.

Cypress-päätetila

Phew ... Se on nyt vihdoin tehty. Jos et pystynyt seuraamaan sitä, voit vain kloonata repon ja opiskella omassa tahdissasi.

Ole varovainen!