AI-støttet systemutvikling i praksis

1. Innledning

Formålet med artikkelen er å beskrive hvordan AI kan brukes i praktisk systemutvikling – ikke som en teoretisk metodikk, men som en konkret arbeidsform basert på et faktisk utviklingsløp. Prosjektet bestod av to applikasjoner: et administrasjonsverktøy for medlemsregister, kontingenter og kommunikasjon, samt en redigerbar hjemmeside for den samme foreningen.

Arbeidet ble utført gjennom flere iterasjoner, der ChatGPT bidro til strukturering av behov, kravspesifikasjon, analyse og kvalitetssikring av funksjonelle beskrivelser. Lovable genererte deretter komponenter, database, logikk og brukergrensesnitt, som ble videre forbedret gjennom praktisk testing og feilretting.

Erfaringen viser at kombinasjonen av ChatGPT og Lovable gir en svært effektiv og fleksibel tilnærming til utvikling: man kan raskt få en første fungerende versjon, videreutvikle den i høyt tempo og samtidig opprettholde god kontroll over funksjonalitet og kvalitet. Samtidig forutsetter dette menneskelig vurdering av behov, prioritering, justeringer og grundig testing i hvert trinn.

2. Prosjektene/applikasjonene.

Hver av applikasjonene er egne prosjekter i Lovable. Begge applikasjonene er publisert og tilgjengelige på et eget domene for hjemmesideløsningen og et underdomene til dette for administrasjonsverktøet. Domenet ble kjøpt inn for dette. Applikasjonene ble satt opp i Lovable Cloud. Ekstern mailserver er Resend.

Begge applikasjonene har responsivt design. (Fungerer på forskjellige skjermstørrelser inkludert mobil.)

2.1 Administrasjonsverktøy

I denne applikasjonen kan foreningens medlemsregister vedlikeholdes inkludert antall årskontingenter vei og vann hvert enkelt medlem skal betale. Ved hjelp av applikasjonen genereres, krav til betaling av årskontingent for aktuelt år, utsending av krav per epost eller brev, automatisk matching av betalinger gjennomført i bank, inaktivering og eventuelt reaktivering av medlemmer. Dette verktøyet ble etter hvert omfattende. Mange av behovene ble avdekket først etter praktisk testing av en fungerende versjon.

Se vedlegg 1 for detaljert beskrivelse av funksjonalitet og teknologi.

2.2 Hjemmesideapplikasjonen

Hjemmesideapplikasjonen for foreningen inneholder åpne nettsider med vedtekter, informasjon om kommende årsmøte, referater fra tidligere årsmøter sammen med regnskaper, årsavgifter, driftsmeldinger for vannverket samt generell informasjon om området og nyttige lenker. Nettsidene kan vedlikeholdes av administrator med såkalt «in-line» redigering der innholdet redigeres direkte på sidene. 

3. ChatGPT som analysepartner

3.1 Fra idé til struktur

Prosessen startet med mine korte beskrivelser av behov og funksjoner for hver av applikasjonene. ChatGPT strukturerte denne informasjonen, laget detaljerte krav, identifiserte prosesser og foreslo datastrukturer. ChatGPT listet også en rekke nyttige detaljerte krav som jeg i utgangspunktet ikke hadde tenkt på. Det var mulig å diskutere disse kravene med ChatGPT og juster disse ved behov.

3.2 Hva ChatGPT gjorde godt

– Rask strukturering av komplekse behov 

– Generering av detaljerte instrukser til Lovable

– Generering av komplette brukerhistorier

– Hjelp til oppsett og konfigurering av domene/ underdomene.

– Test/vurdering av den åpne hjemmesideapplikasjonen med utarbeidelse av forslag til forbedringer.

3.3 Begrensninger

ChatGPT utarbeider detaljerte krav og spesifiserer løsninger, men disse må vurderes og kvalitetssikres manuelt. Det kreves erfaring for å kunne gjøre dette.

4. Fra analyse til implementasjon

4.1 Hjemmesideapplikasjonen

For hjemmesideapplikasjonen laget ChatGPT detaljerte instruksjoner til Lovable. Instruksjonene innehold en beskrivelse med formaålet til applikasjonen, navigasjonsstruktur og sidestruktur, detaljert spesifisering av innholdet for hver av sidene, spesifikasjon av design og layout og spesifisering av tilgangsstyring. ChatGPT laget et Word-dokument som kunne lastes direkte opp til Lovable.

4.2 Administrasjonsverktøyet

Denne applikasjonen inneholder mer avansert funksjonalitet enn hjemmesideapplikasjonen. Jeg bad ChatGPT dele opp implementasjonen i passende iterasjoner for implementering i Lovable. ChatGPT lagde en overordnet spesifisering av funksjonene som skulle lages og fordelte disse i inkrementer. ChatGPT foreslo deretter å lage konkrete brukerhistorier for hvert inkrement. ChatGPT ble så instruert i å legge brukerhistoriene for hvert inkrement inn i et Word-dokument for overføring til Lovable. Dette ga en rask overgang fra analyse i i ChatGPT til instruksjoner for Lovable og en implementert førsteversjoner av hvert inkrement.

Eksempler på brukerhistorier:

EVV-003: Årlige satser

Som styremedlem vil jeg legge inn satser per år (vei/vann) og kontonummer.

Akseptanse:

- Skjema: År (2025), Vei-sats, Vann-sats, Kontonummer, Forfallsdato.
- Validering: år = 4 siffer; satser ≥ 0; kontonummer 11 siffer.
- Lagre viser toast: “År 2025 oppdatert.”

EVV-101: Opprette medlem

Som styremedlem vil jeg registrere et nytt medlem.

Akseptanse:

- Felt: Fornavn, Etternavn, Veinavn og nummer, Postnr, Poststed, E-post, E-veinr, Antall kontingenter vei (≥1), Antall kontingenter vann (≥0).
- Standardverdier: Antall kontingenter vei = 1, Antall kontingenter vann = 0.
- Ved lagring vises “Medlem opprettet.”

EVV-305: Audit-spor for medlemmer

Som revisor vil jeg se hvem som endret hva og når.

Akseptanse:

- Endringslogg per medlem: felt, gammel verdi, ny verdi, bruker og tidspunkt.
- Logg vises kronologisk, nyest øverst.

Lovable tolket brukerhistoriene som spesifikasjon og genererte databaser, sider, navigasjon, API-endepunkt og grunnleggende logikk.

5. Lovable som implementasjonsplattform

Første generering av applikasjonene var basert på et godt forarbeid i ChatGPT. Første generering i Lovable ga da en applikasjon med tilstrekkelig funksjonalitet og design for å kunne verifisere at man var på rett vei mot ønsket resultat.

Lovable implementerer det man ber om i løpet av noen titalls sekunder eller i løpet av få minutter avhengig av omfang. Det gjør at implementering av funksjonalitet går imponerende raskt, og man kan få kjørt mange iterasjoner i løpet av én dag. Chatte-funksjonalitet i Lovable er også nyttig ved at man kan ta opp behov, få forslag til løsning, eller eventuelt korriger Lovables plan for implementering.

Det virker ikke som Lovable har en samlet oversikt over funksjonaliteten i en applikasjon. Dvs. at endringer i funksjonalitet som implisitt medfører at annen funksjonalitet også må endres for en stor del må håndteres manuelt. Dvs. at man selv må spesifisere disse følgeendringene og selv utføre grundig regresjonstesting.

Ved publisering av prosjektet/applikasjonen for ekstern tilgang, kjører Lovable sikkerhetsskanning av applikasjonen og rapporterer feil og advarsler.

5.1 Hva Lovable genererte automatisk

– UI-komponenter 

– Navigasjon 

– Backend-endepunkter 

– Database-tabeller 

– RLS-regler 

– E-postfunksjoner

5.2 Arbeid jeg gjorde manuelt

Mye av utviklingen ble gjennomført direkte i Lovable:

– Testing av alle deler av applikasjonen 

– Feilsøking av data, validering og logikk

– Layoutforbedringer 

– Komponentjusteringer 

– Avdekke RLS-problemer som ble utbedret av Lovable.

– Håndtere kanttilfeller som dukket opp i praksis (f.eks. har ikke alle medlemmer en epostadresse).

Forbedring og videreutvikling av funksjonalitet.

5.3 Kompleksitet i praksis

Lovable genererte et stort antall implementasjonsforslag, som krevde manuell kvalitetssikring og helhetsstyring, og funksjonalitet for å komme raskt i gang med test av en første versjon, men kvaliten og detaljer krevde betydelig arbeid med testing, feilretting og forbedringer.

6. Eksempler fra utviklingen

6.1 Startinstruksjon for nettsideprosjektet

Prosjektet startet med en ustrukturert kravbeskrivelse. ChatGPT brukte dette til å foreslå en komplett struktur for nettsiden, inkludert sider, funksjoner, komponenter og databehov.

6.2 Forbedring av kartutsnitt

Et kartutsnitt på nettsiden fremstod for lite. Jeg påpekte dette i dialog med Lovable i Chat-modus. Lovable foreslo da flere alternative layoutendringer. Jeg valgte en av disse layoutendringene (fra 16:9 til 1:1-forhold), noe som gav et mer balansert uttrykk. Dette illustrerer hvordan visuell kvalitet ikke alltid kan bestemmes i forkant.

6.3 Utvidelse av e‑postlogg (Lovable uten ChatGPT)

Jeg ønsket å kunne få bedre oversikt i e-postloggen. Først ble problemstillingen diskutert med Lovable i Chat-modus. Lovable kom opp med flere forslag til løsninger. Jeg valgt så en løsning med filtrering på år, bedre sortering og flere logginnslag per side.

6.4 Feil i telefonnummer‑validering

Regex for telefonnummer tillot kun mobilnumre. Etter testing oppdaget jeg at faste telefonnumre ikke ble godkjent. Løsningen ble en justert regex som dekket alle relevante norske nummer.

6.5 Implementasjon av generell informasjons‑epost

Et nytt behov for utsending av felles eposter ble avdekket underveis. Resultatet ble:

– ny type e‑postmal 

– ny UI‑fane 

– justering av edge function 

– databaseendring (ny check‑constraint) 

– visuell opprydding i menyer (noe oppdaget av Lovable, men flere oppryddingsendringer som jeg måtte spesifiseres for Lovable.)

7. Testingen – den viktigste kvalitetssikringen

For å kunne teste administrasjonsverktøyet effektivt, bad jeg om implementering av en testmodus der alle eposter sendes til en oppgitt mailmottaker og der data for et år kunne slettes. Dette ble raskt implementert og fungerte utmerket under test av applikasjonen. (Backend med database er den samme i utviklingsmiljøet som i produksjon.)

Testing avdekket feil i:

– regex 

– RLS-regler 

– routing 

– forhåndsvisning 

– menystrukturer 

– databasekonfigurasjon 

Testing avdekket relativt mange feil. Ingen av disse feilene ble fanget av AI‑genereringen alene. Lovable rettet raskt feilene jeg rapporterte.

8. Den iterative arbeidsformen

• Idébeskrivelse 
• Analyse med ChatGPT 
• Brukerhistorier 
• Generering i Lovable av inkrement
• Testing 
• Forbedring/feilretting

9. Refleksjoner og læringspunkter

Ved hjelp av AI kan man effektivt strukturerer og detaljere behov. Man får også hjelp til å finne frem til nyttig funksjonalitet. Dette går meget raskt med bruk av AI.

Det som virkelig er en revolusjon, er at man kan få generert applikasjoner og videreutviklet applikasjoner uten å ha et team av programmerere, og at dette går veldig raskt. Dette gjør at man på en og samme dag kan generere første versjon av applikasjonen, og også kjøre flere iterasjoner. 

Men, fortsatt er det behov for omfattende menneskelig interaksjon. AI gjør ikke vurderinger, prioriteringer og mye manuell testing er fortsatt nødvendig.

Erfaringen med utviklingen av disse to applikasjonene har vist at det er fullt mulig å først å analysere en ide/konsept med AI, og deretter raskt utvikle en fungerende prototyper for videre evaluering av ideen/konseptet.

Videre viser erfaringen at én person vha. AI kan utvikle funksjonsrike og brukervennlige applikasjoner med god kvalitet svært raskt og effektivt. Selv om AI muliggjør svært rask utvikling, bør sikkerhet, dataintegritet og systemkritikalitet alltid vurderes før en løsning tas i bruk av faktiske brukere. Jeg gjennomførte en slik vurdering av applikasjonene som beskrives i artikkelen, og vurderte dem som tilstrekkelig robuste, sikre og hensiktsmessige til å settes i produksjon i den konteksten de var tiltenkt.

Vedlegg 1: Detaljert beskrivelse av Styre- og administrasjonsapplikasjonen

🎯 Hovedfunksjonalitet

👥 Medlemshåndtering

- ✏️ CRUD på medlemmer

- 📦 Soft delete med historikk

- 🕵️ Full audit logging

- 📥📤 CSV import/eksport

- 🔍 Søk og filtrering

- ↕️ Kolonnesortering

- 📞 Telefon + kommentarer

💰 Økonomi og Krav

- 🧾 Kravgenerering (vei/vann)

- ✏️ Redigerbare beløp

- 🔄 Auto-status

- 🏷️ Statuser: KLADD, SENDT, BETALT, DELVIS_BETALT, OVERBETALT, PURRING_SENDT, BREV

- 🕵️ Audit logging

💳 Betalingshåndtering

- 🤖 Smart matching

- 📥 Bank-CSV auto-match

- 🧩 Manuell kontroll

- 👨‍👩‍👧 Familiebetaling

- ⚠️ Differansevarsling

- 🕵️ Full audit

📧 E-postutsending

- ✉️ KRAV / PURRING / INFO

- 🧰 Rich text maler (TipTap)

- 🪄 Dynamiske plassholdere

- 🚀 Batch (5 samtidig)

- 🧪 Test-funksjon

- 👁️ Forhåndsvisning

- 📚 Logg med søk

- 📄 Breveksport

📅 År og Satser

- 📘 Årsbasert konfigurasjon

- ⭐ Aktivt år default

- 💳 Forfallsdato + kontonummer

- 🧪 Testdata-modus

📊 Dashboard og Rapportering

- 📉 Grafer og nøkkeltall

- 🔢 Medlemmer, krav, betalinger, utestående

- 📅 Årsfiltre

- 📈 Fremdrift

👤 Brukeradministrasjon

- 🔐 E-post/passord

- 🏅 Roller: admin, styremedlem, bruker

- 🧑 Profiler

- 🛡️ RBAC via user_roles

🛠️ Teknisk Arkitektur

💻 Frontend

- React 18 (TS)

- Vite

- React Router v6

- shadcn/ui

- Tailwind CSS

- RHF + Zod

- TanStack Query

- Sonner toasts

- TipTap editor

- Recharts

- date-fns

🔙 Backend (Lovable Cloud)

- Supabase (PostgreSQL)

- RLS policies

- Triggere for auto-status

- Edge Functions (Resend)

- Audit-tabeller

- Soft delete mønster

🗄️ Databasetabeller (13)

- medlem, medlem_audit

- krav, krav_audit

- betaling, betaling_audit

- epost_mal, epost_log

- purring

- ar_sats

- profiles, user_roles

- system_config

🔒 Sikkerhet

- Supabase Auth

- RBAC

- RLS på alle tabeller

- Audit logging

- Service role key

📊 Spesielle Funksjoner

🤖 Intelligente Systemer

- Smart matching (navn, KID, beløp, familie)

- Auto kravstatus ved nye betalinger, endringer, slettinger

- Parallel e-postbatch

🕵️ Audit & Sporbarhet

- Komplett historikk

- Hvem-gjorde-hva-når

- Felt-nivå sammenligning

📱 Brukeropplevelse

- “YYYY (Aktivt)” format

- Status-badges

- Full responsivitet

- Tooltips + hjelpetekster

- Søk og filtrering på lister