Slik lagde jeg et speedometer til sykkelen
Med Claude Code tok det bare noen få timer å lage en native “sykkelcomputer”-app til iOS og Android. I programmeringsspråk jeg ikke kan.
Kona har fått seg en sånn fancy elsykkel – mens jeg tråkker rundt på en gammel sykkel av den manuelle typen.
– Er det farten som vises der? spør hun – og peker på noen mystiske tall på en liten skjerm på styret.
For å sjekke om det stemte, prøvde jeg å laste ned den første og beste speedometer-appen jeg fant i App Store (det finnes mange!). Den var full av irriterende reklame, så jeg prøvde å installere et par andre apper som begge hevdet å være gratis. Men det viste seg fort at appene ville ha deg til å kjøpe en eller annen tilleggstjeneste jeg ikke trengte. Irriterende!
Hvor vanskelig kan det være å lage min egen speedometer-app ved hjelp av Claude Code? tenkte jeg.
Ikke så veldig vanskelig, skulle det vise seg.
Hundre prosent gratis og reklamefritt
Jeg bestemte meg for å bygge en enkel speedometer-app som skulle være 100 % gratis, 100 % fri for irriterende reklame og 100 % fri for sporing.
Siden jeg kunne bruke Claude Code til å hjelpe meg med kodingen, ville jeg lage den som en native iOS-app, kodet i Swift med SwiftUI for å bygge brukergrensesnittet. Jeg hadde liten erfaring med Swift, men med Claude på laget er det ikke lenger nødvendig å ha stålkontroll på syntaksen til programmeringsspråket man koder i.
AI-agenter gjør best jobb når du bruker litt tid på planlegging og på å skrive spesifikasjoner og planer før kodingen starter. Jeg valgte derfor å først installere agent-skills – i dette tilfellet valgte jeg blant annet SwiftUI Pro og Swift Testing Pro-skillene fra Paul Hudson.
Deretter forklarte jeg til Claude hva jeg ville lage og hvordan jeg så for meg at appen skulle lages. Appen skulle ha unittester, den skulle følge beste praksis for moderne apputvikling på iOS – og jeg ville se en grundig plan for jobben før vi startet.
Sykkelcomputer på noen timer
Jobben med å diskutere løsninger og arkitekturvalg med agenten var faktisk det som tok lengst tid, og mer tid enn kodingen (som Claude fikset for meg). Appen ble laget av Claude basert på en enkel og slurvete skisse, og noen bilder av noen speedometere fra gamle biler (jeg ville ha en retro-bilspeedometer-look).
For å gjøre det enklere å rulle tilbake uønskede endringer, ba jeg Claude om å dele opp oppgaven i flere faser og lage en pull request (PR) for hver fase.
Mellom hver PR testet jeg ut appen selv i iOS-emulatoren i Xcode og ga tilbakemeldinger.
Underveis i prosjektet ballet ting på seg: Med Claude på laget var det nemlig raskt og enkelt å legge til ny funksjonalitet jeg syntes manglet. Alt fra småting som at “sølvrammen” rundt speedometeret burde ha noen skygger som beveget seg når du beveget telefonen – til større ting som logging av turer med opptegning av turene på kart.
Dermed endte det som skulle være en enkel speedometer-app opp som en ganske fin og nyttig sykkelcomputer for iPhone:
- Speedometer
- Logging av turer med kart over ruta for hver tur
- Høyde- og fartsprofil
- Oversikt over turer og personlige rekorder
- Lagring av data på brukerens egen iCloud-konto
- Mulighet til å eksportere data for import til f.eks. Strava
Noen timer senere anså jeg appen for å være noenlunde ferdig. iOS-versjonen i hvert fall.
En identisk Android-app
Så snart iOS-versjonen var klar, kom den store testen på hvor god Claude Code egentlig hadde blitt. Kunne Claude klare å lage en identisk app til Android? Altså oversette hele sulamitten fra Swift til Kotlin, og bytte fra Apples UI-rammeverk til Googles JetPack Compose-rammeverk?
Jeg startet med å opprette et tomt Android-prosjekt i Android-studio. Så åpnet jeg Claude fra mappen der dette prosjektet lå, og ga den en lenke til repoet til iOS-versjonen.
Så ba jeg Claude bruke alle testene som var skrevet for iOS-versjonen som spesifikasjon for hvordan Android-appen skulle oppføre seg, og så lage en plan for hvordan Android-versjonen skulle bygges. Etter å ha diskutert litt frem og tilbake med Claude og finpusset på planen, ba jeg Claude om å sette igang med kodingen.
Så gikk jeg og la meg.
Neste morgen lå det en fiks ferdig Android-app og ventet på meg. Appen var temmelig lik iOS-versjonen, og jeg fant bare et par små bugs som jeg ba Claude om å fikse. Det var banale ting som at teksten i en knapp wrappet over to linjer pga. en litt for stor font.
Side for markedsføring
Enhver app med respekt for seg selv bør selvfølgelig ha en markedsføringsside også – selv om jeg ikke kommer til å tjene fem øre på denne appen. Men det er uansett fint å ha et sted å lenke til for personvern- og support-informasjonen som app-butikkene gjerne vil ha. Og så kan det å ha en nettside som lenker til appene i app-butikkene være bra for SEO.
Nettsiden skulle være enkel og kjapp, så jeg valgte å ikke bruke noe rammeverk – men bare opprette et tomt “skall” med Vite. Så listet jeg opp kravene mine til nettsiden for Claude Code, blant annet at den skulle være på både norsk og engelsk, bruke vanilla TypeScript, HTML og CSS – og selvfølgelig ha stålkontroll på SEO, tilgjengelighet (accessibility) og andre viktige ting.
Alt av skjermbilder ble laget av Claude ved å simulere sykkelturer i Oslo i iOS- og Android-emulatorene. Forslag til tekst ble også laget av Claude, jeg gjorde kun noen mindre redigeringer og forbedringer i teksten før jeg så meg fornøyd.
Det eneste bildet jeg fikset manuelt, var av appen montert på styret på sykkelen min, som du kan se øverst i artikkelen.
Nettsiden ligger på bikespeed.no, og kildekoden til den her.
Ut på App Store og Google Play
Begge appene er nå ute i henholdsvis App Store og Google Play.
Det å publisere apper i app-butikkene kan være ganske mye styr, det er mye informasjon som må legges inn og usannsynlig mange spørsmål du må svare på fra både Apple og Google før du får lov til å publisere noe som helst.
Også her hjalp Claude meg. Jeg ba Claude om å fikse beskrivelser og skjermbilder i riktige formater for meg, og så lastet jeg opp alt sammen. Kort tid etterpå var begge appene godkjent og ute.
iOS-versjonen har fått i overkant av 1.600 nedlastinger siden den ble lagt ut i midten av august, frem til nå i starten av november. Kanskje ikke all verden – men jeg er fornøyd med at noen bruker gratisappen min!
…og forresten: El-sykkelen til kona viste riktig fart!
Vil du prøve appen selv, så finner du den her:
Kildekode på GitHub:
Teknologi-oppsummering
Noen fakta om appene:
iOS-appen:
- Swift og SwiftUI
- SwiftData for lagring av turene, med synking til brukerens private iCloud-konto (via CloudKit)
- CoreLocation (GPS og kompass)
- CoreMotion (barometer for høyde)
- MapKit (kart og gatenavn)
- Swift Charts (diagrammer for høydeprofil av turene)
- Swift Testing for unit-tester
Android-appen:
- Kotlin med Jetpack Compose og Material 3
- Room (SQLite) for lagring av turer lokalt på telefonen
- Google Play Services Location for GPS-posisjon
- Google Maps Compose for visning av ruten.
- Ingen synkronisering til skyen i Android-versjonen foreløpig