The Musher - Fra regneark til App
De første linjene i regnearket begynner å ta form.

The Musher - Fra regneark til App

Hvor lang er veien fra regneark til app?

TL;DR

Kort oppsummert:

  • The Musher er en app for hundetrening og hundevelferd.
  • Det tok ca 3 uker å lage første versjon av PWAen.
  • PWA-versjonen ble brukt i 6 måneder før en Cordova-versjon ble lansert.
  • APIene kjører hos AWS.

Slik ser noen av sidene i appen ut:

Ny sosial funksjon for deling av innlegg.

Forsiden i ny versjon. Ny sosial funksjon for deling av innlegg.

Interaktivt kart, vær og analyse av kjøre og stopptid.

Treningsdetaljer - del 1 Interaktivt kart, vær og analyse av kjøre og stopptid.

Oversikt over alle hundene med mulighet for filtrering.

Forsiden hunder Oversikt over alle hundene med mulighet for filtrering.

Google Spreadsheet

I utgangspunktet hadde jeg ikke tenkt å lage en app i det hele tatt. Hundekjøring var relativt nytt for meg på dette tidspunktet. Jeg ante ikke hva jeg trengte å notere eller hva som var viktig å huske på. Derfor begynte jeg å notere i et Google Spreadsheet.

De første linjene i regnearket begynner å ta form.

De første linjene i regnearket begynner å ta form.

Etter å ha notert i noen uker skjønner jeg fort at det er mye informasjon å holde styr på. 10 hunder i trening blir fort uoversiktlig.

Eksempel på informasjon som ble notert:

  • Når spiser de ikke opp maten sin?
  • Når har de løpetid?
  • Hvem er vaksinert med alle vaksinene som kreves for løp?
  • Treninger. Lengde, høydemeter, fart, temperatur, varighet, hvile og kommentarer.
  • Hvor ofte er de skadet?
  • Hvor lenge må de stå i ro pga en skade?

PWA

Etter en sesong med registrering med data i regneark ser jeg fort at dette kan bli upraktisk å holde styr på. I tillegg ønsker jeg å dele informajonen med alle i familien som driver med hundene.

Jeg bestemmer meg derfor for å lage en PWA for all denne informasjonen.

Prinsippene og teknologivalgene er enkle og jeg har mål om å holde meg mest mulig til standard malverk og prinsipper. Keep it simple står veldig sterkt.

Jeg velger MongoDB, Node.js og Express på serversiden til å servere REST APIene. Til autentisering velger jeg express-jwt. Resten snekrer jeg selv.

På klientsiden ønsker jeg også å holde ting standard og enkelt. Jeg velger Preact, Bootstrap 4 og Font Awesome. Ingen spesialtilpasninger. Kun basis layout og stiler fra Bootstrap i tillegg til ikoner fra Font Awesome.

Etter en listen stund ønsket jeg meg mørkmodus og fant derfor et fint repo som hadde dette: bootstrap-dark.

Forsiden

Første versjonen av forsiden i appen inneholdt statistikk for teamene, litt reklame og de siste treningsturene.

Siste versjon inneholder:

  • En sosial funksjon som viser innlegg fra brukere rundt deg.
  • Værmelding fra Yr.no.
  • Siste treninger.
  • Totaloversikt over treningsmengde denne sesongen, sammenlignet med forrige sesong.

Hensikten med forsiden er å gi deg en rask oversikt over hva som har skjedd siden forrige gang du var innom.

Oversikt over det viktigste på ett sted.

Forsiden Oversikt over det viktigste på ett sted.

Ny sosial funksjon for deling av innlegg.

Forsiden i ny versjon. Ny sosial funksjon for deling av innlegg.

Trening

Trening er kanskje den siden som er mest brukt. Her registrerer vi treninger, setter opp treningsplaner og analyserer gjennomføringen.

Tracking av treninger kan gjøres direkte i appen eller med en Garmin Connect enhet. I tillegg til dette, så er det også mulig å bruke Strava. Det er viktig at det er enkelt å tracke treningen når du står der med 14 gale hunder spent inn og klare for avgang.

Oversikt over inneværende måned.

Forsiden trening Oversikt over inneværende måned.

Oversikt over alle treninger.

Liste over treninger Oversikt over alle treninger.

Interaktivt kart, vær og analyse av kjøre og stopptid.

Treningsdetaljer - del 1 Interaktivt kart, vær og analyse av kjøre og stopptid.

Analyse av stigning, fart og energiforbruk. Dette brukes for å beregne belastningsindeksen.

Treningsdetaljer - del 2 Analyse av stigning, fart og energiforbruk. Dette brukes for å beregne belastningsindeksen.

Oversikt over energiforbruk på denne treningen. Dette er også omregnet i fôrmengder.

Treningsdetaljer - del 3 Oversikt over energiforbruk på denne treningen. Dette er også omregnet i fôrmengder.

Hunder

Her finner du oversikt over alle hundene dine. Hver enkelt hund har sin egen dagbok hvor du kan se hva som har skjedd og hvor mye trening den enkelte har gjennomført.

Hundene deles inn i team som igjen har treningsplaner slik at det skal være enkelt å se hvor mye hver enkelt hund skal trene.

Oversikt over alle hundene med mulighet for filtrering.

Forsiden hunder Oversikt over alle hundene med mulighet for filtrering.

Oversikt over treningsplan, treninger, selestørrelse, vaksiner, alder og kjønn.

Detaljer for en hund - del 1 Oversikt over treningsplan, treninger, selestørrelse, vaksiner, alder og kjønn.

Oversikt over trening i forskjellige posisjoner og kalender over treninger.

Detaljer for en hund - del 2 Oversikt over trening i forskjellige posisjoner og kalender over treninger.

Kalender for hendelser for hunden.

Detaljer for en hund - del 3 Kalender for hendelser for hunden.

Team

Team er en form for gruppering av hunder. Det kan være lurt å dele inn hundene etter evne. Feks “A-laget”, “B-laget” og “Valpene”. På denne måten er det enkelt å holde oversikt over treningsplaner og annen oppfølging.

Oversikt over alle teamene dine.

Forsiden team Oversikt over alle teamene dine.

Oversikt over type, ambisjonsnivå, treninger og treningsplaner.

Detaljer for team - del 1 Oversikt over type, ambisjonsnivå, treninger og treningsplaner.

Interaktivt kart med heatmap for dette teamet.

Detaljer for team - del 2 Interaktivt kart med heatmap for dette teamet.

Sammenligning med andre team av samme type og på samme ambisjonsnivå.

Detaljer for team - del 3 Sammenligning med andre team av samme type og på samme ambisjonsnivå.

Funksjoner

Appen inneholder mange funksjonere for oss som er nerder på data og tall.

  • Belastningsindeks for treninger.
  • Energiforbruk omregnet til fôrmengde.
  • Formkurve for hvert enkelt team.
  • Trender for trening.

Andre teknologier

  • Cordova
  • Xcode
  • Android Studio
  • AWS Cloudfront
  • AWS WAF
  • AWS Autoscaling
  • AWS ELB
  • AWS EC2
  • AWS S3
  • AWS Lambda

Vil du prøve appen?

Du finner den i AppStore og PlayStore. Det er laget en Cordova-versjon av appen til begge universene.

Finnes i AppStore og PlayStore.

The Musher Finnes i AppStore og PlayStore.

Les også:

The Musher - Fra regneark til App
The Musher - Fra regneark til App

Hvor lang er veien fra regneark til app?

node.js / 12.apr 2021 kl.13:33 / 6 min 19 sek
Node.js: Unike array
Node.js: Unike array

En kjekk måte å lage unike array i Javascript.

node.js / 12.jul 2019 kl.12:30 / 1 min 45 sek