Sådan byggede jeg vores egen budget-app (og undgik dyre abonnementer)

Nogle siger, at penge er roden til alt ondt. Jeg vil vove at påstå, at det snarere er manglen på et ordentligt system til at holde styr på dem, når man deler husholdning.

Min smukke kone og jeg stod over for en klassisk udfordring: Vi havde brug for en simpel måde at synkronisere vores fælles budget på tværs af vores telefoner, så vi begge ubarmhjertigt kunne konfronteres med månedens overforbrug i realtid.

Jeg kiggede markedet igennem for budget-apps, og resultatet var deprimerende. Enten var de fyldt med reklamer, krævede et dyrt månedligt abonnement, eller også var de så overfyldte med ubrugelige funktioner, at man skulle have en kandidatgrad for at logge en tur i Netto. 

Desuden har jeg et anstrengt forhold til at lægge mine private finansielle data i hænderne på en tilfældig tredjeparts-app, og endnu mere nøjer for at give en tilfældig applikation adgang til min online bank.

Systemet skal være gammeldags, kedelig, manuel og bygget på en måde, hvor man hader sit liv hver gang man overvejer at købe noget spontant i Normal.

Som en, der til daglig arbejder med bygningsautomatik og underviser i teknisk projektledelse, er jeg vant til at bygge systemer, der bare virker. Og som gammel webudvikler er min filosofi ret simpel: Hvorfor bruge et tungt framework som React til at løse en opgave, der kan klares smukkere og hurtigere med rå, vanilla kode?

Så jeg besluttede mig for at bygge vores egen app fra bunden.

Arkitekturen: Keep It Simple, Stupid

Målet var en lynhurtig app, der opførte sig som en "rigtig" app på telefonen, men som bare var en almindelig hjemmeside. 

Overordnet: Appen bygges på sådan en måde at man indsætter et beløb hver måned ud fra ens sølle indtjening, bagefter vælger man en sjat kategorier som; Mad 🥙, benzin ⛽, medicin 💊 osv. og sætter en budget grænse for dem. Hver gang man foretager sig et køb, tilføjer man et beløb til ens kategori, som så viser hvor tæt på budget grænsen man er kommet. Der vises også en simpel beregning der viser hvad man har af det samlede budget, hvad man har tilbage at gøre godt med, og en liste af de forskellige kategorier som viser hvor tæt man er på at overskride det beløb man har sat til ting. Man skal ku' redigere i ens kategorier "on the fly" og der bliver også vist en liste med de sidste indtastninger. Uden alt det bøvl med at skal oprette en ny konto, eller betale ekstra for synkronisering, og uden at have adgang til den database, som videresælger ens vaner og budgetter til tredjeparts virksomheder, der senere viser reklamer for designer sparegrise fra Temu.

Teknologistakken endte med at se sådan her ud:

Frontend: Én enkelt index.html fil indeholdende ren vanilla HTML, CSS og JavaScript. Ingen unødvendige afhængigheder, ingen bygge-processer, ingen bloatware. Bare en simpel UI med klare farver, god kontrast og masser af emojies ril forskellige kategorier.

Hosting: Jeg smed koden på et privat GitHub repository og forbandt det til Netlify. Det betyder i praksis, at hver gang jeg skriver en ny linje kode og trykker commit, bliver den automatisk bygget og skubbet live på få sekunder.

Backend / Database: Her kom Google Firebase (Firestore) ind i billedet. Eftersom Netlify serverer statiske filer, havde jeg brug for en database, der kunne modtage data direkte fra browseren og opdatere konens telefon i præcis samme sekund, som jeg tastede en udgift ind på min. Firestore løser dette med sin realtids-synkronisering.

Sikkerhed: "Hold my beer"-øjeblikket

Appen virkede fantastisk. Vi kunne oprette kategorier, sætte budgetter og logge udgifter.

Men der var et lille, ret væsentligt problem. Da appen bestod af ren frontend-kode hostet på et offentligt Netlify-link, kunne enhver med basal webforståelse åbne "Vis kildekode", finde database-nøglerne og få fuldt indblik i, hvor mange penge vi bruger på benzin og kaffe. Eller værre: Slette hele databasen for sjov.

At lade det stå åbent svarede lidt til at installere en avanceret KNX-kodelås på hoveddøren og derefter skrive koden med neon-tusch på ruden.

Løsningen blev at implementere Firebase Authentication. Frem for at bygge et usikkert, hardcoded login-system ind i appen, overgav jeg sikkerheden til Google. Jeg satte appen op til at bruge "Log ind med Google", så vi kun behøver at trykke på en knap for at bekræfte vores identitet.

Det vigtigste lå dog nede i maskinrummet. Jeg skrev et sæt sikkerhedsregler (Security Rules) direkte i Firestore-databasen:

allow read, write: if request.auth != null && (

  request.auth.token.email == 'kone@email.adresse' || 

  request.auth.token.email == 'min.email@email.adresse'

);

Med disse få linjer blev databasen kryptografisk låst. Selv hvis nogen finder vores Netlify-link eller kopierer vores kildekode, vil Googles servere iskoldt afvise enhver anmodning, medmindre den kommer fra præcis en af vores to Google-konti.

Resultatet

Nu har vi en app, der ligger som et ikon direkte på vores hjemmeskærme. Den åbner øjeblikkeligt, den er 100% skræddersyet til vores behov, den koster os ikke en krone i drift (vi er langt under Firebases og Netlifys gratis grænser), og vores data er låst forsvarligt inde.

Det tog lidt kaffe og lidt kodning i aftentimerne, men tilfredsstillelsen ved at bruge sit eget lynhurtige vanilla-tool, der bare virker hver eneste dag – den kan man ikke købe på et app-store abonnement.