På rekordtid har rekordmange nordmenn plutselig blitt langt over snittet interessert i grafer og statistikk. Ikke så rart, selvfølgelig, når en pandemi herjer, og retningene grafene peker i angir livskvaliteten vår de neste månedene.
Det mangler ikke akkurat på kilder for disse tallene. Vi har allerede fortalt om en chatbot som serverer nye tall hver morgen, og her har du enda en:
Grafer og tall på corona.flex.dev, utviklet av nordmannen Thomas Alrek.
- Inspirasjonen fikk jeg da jeg innså at det, på det tidspunktet da jeg skrev appen, ikke var mange lignende visualiseringer som lot deg se kombinerte data på verdensbasis, forteller Alrek til kode24.
JSON fra GitHub Actions
På lik linje med mange andre slike tjenester, bruker Alrek data fra det amerikanske universitetet John Hopkins University. Det vil si; han bruker en JSON-kilde som oppdaterer seg tre ganger om dagen med GitHub Actions, som i sin tur bruker dataen fra universitetet.
- Jeg kunne aggregert denne dataen selv. Men slik det er gjort her, så slipper jeg å ha særlig stor load, da rådataen hentes på klientsida direkte fra Github, og gjør at min webapp vil skalere til ganske mange klienter, forteller Alrek, som til daglig er CTO i Apility.
«Dataen som hentes inn er prosessert, men fortsatt ganske rotete.»
- Må du gjøre noe mer med dataen du henter?
- Dataen som hentes inn er prosessert, men fortsatt ganske rotete. Jeg må blant annet parse om fra M/D/Y-datoformat, forklarer utvikleren.
- Det er også endel unntak som må håndteres separat, da datasettet ikke bruker landskoder, men navn på land, som ofte endrer seg i CSV-formatet. Den ene dagen får man “United States”, den andre dagen får man bare “US”.
Ingen backend, bare Vue.js
Den første prosesseringen av data står altså GitHub Actions-løsningen for, mens vaskingen som Alrek står for blir gjort på klientsida. Appen har derfor ingen backend.
- Alt det tunge løftet skjer på frontend. Det er gjort for å lett kunne skalere til store mengder trafikk, og appen kan fint hostes rett i Github Pages, AWS S3 eller lignende. Men akkurat nå hostes appen gjennom vårt proprietære system, som heter Netflex, forteller han.
Whereby fikk 2.100 prosent flere kunder
For å tegne ut applikasjonen valgte Alrek JavaScript-rammeverket Vue.js. For han var valget enkelt - det er nemlig dette han bruker i jobben hos Apility.
- I vår bedrift har vi satsa fullt på Vue i frontend siden versjon 2.0 ble lansert, sier han til kode24.
- Vi har blitt veldig glade i Vue, da Vue, i motsetning til mange andre frontend-rammeverk, gir oss mer funksjonalitet rett ut av boksen.
Bruker Chart.js
Selv om Alrek mener Vue gir mye ut av boksen, måtte han fram med flere bokser for å sy sammen korona-statistikken.
De tyngste løftene er det nemlig vue-chartjs som står for; en Vue-spesifikk implementasjon av Chart.js.
- Chart.js er utrolig lett å integrere i Vue gjennom denne pakka. Og den er reactive, så den oppdaterer grafene automatisk når state i Vue-applikasjonen endres, forteller han.
I tillegg bruker han pakka animated-number-vue, som sørger for at tall blir "animerte" når de endres - altså at de teller opp eller ned i stedet for å endre seg umiddelbart.
Brukere verden over får korona-tall fra Eilifs chatbot
God hjelp fra Reddit
- Hvordan har applikasjonen din blitt mottatt?
- Jeg har fått mye bra tilbakemeldinger, og Reddit har vært spesielt hjelpsom, med god feedback som har blitt implementert underveis, svarer Thomas Alrek, som forteller at tjenesten hans har hatt rundt 10.000 besøkende hittil.
- Du er ikke alene om å koke sammen slike korona-tjenester for tida. Hvorfor tror du det kommer så mye?
- Vi er jo mange utviklere som nå blir sittende hjemme hele dagen. Og datavisualisering er jo alltid spennende - da blir det fort en artig utfordring å gjøre noe positivt ut av den ellers utrolig triste situasjonen vi befinner oss i.