Bygg din første nyttige app med KI

Steg 1: Beskriv problemet med dine egne ord

Nesten alle handler, og derfor er det et perfekt første prosjekt. Du trenger ikke å forstå programmering for å se om en handleliste virker: du skriver inn brød, melk og egg, ser summen og krysser av tingene etter hvert som du kjøper dem. Resultatet er noe du faktisk kan bruke allerede denne uka.

Før du åpner et KI-verktøy, fullfør disse tre setningene på papir eller i et notat. Dette er den viktigste programmeringsferdigheten i hele boka: å gjøre et ønske om til konkrete regler.

1. Jeg må skrive ned … (for eksempel: hver vare, hvor mange jeg trenger og prisen for én).
2. Jeg vil at programmet skal regne ut … (for eksempel: prisen for hver linje og summen for hele handelen).
3. Jeg vet at programmet virker når … (for eksempel: to varer à 25 gir 50, og å krysse av en vare endrer ikke summen).

Steg 2: Bygg den første lille versjonen

Den første versjonen er én enkelt fil som åpnes i nettleseren din. Det er ikke noe utviklingsmiljø å installere, ingen server og ingen innlogging. Kopier prompten nedenfor inn i KI-assistenten din (Claude, ChatGPT eller lignende) nøyaktig slik den står.

Hjelp meg å bygge min første enkle app. Jeg er helt nybegynner.

Lag en handleliste i én enkelt fil som heter handleliste.html, og som jeg kan åpne i nettleseren min. Legg alle stiler og all JavaScript i denne ene filen, uten eksterne biblioteker.

Jeg vil legge inn navnet på varen, antallet og prisen for én vare. En knapp legger varen til i listen. Vis prisen for hver linje og nederst summen for hele handelen. La meg slette en vare og merke den som kjøpt. Å merke en vare som kjøpt skal ikke endre summen.

Avvis et tomt navn, ugyldige tall, en negativ pris og et antall på null eller mindre. Godta både desimalkomma og desimalpunktum i prisen.

Forklar først planen kort. Skriv deretter hele koden og de nøyaktige stegene for å lagre og åpne filen. Ikke legg til andre funksjoner ennå.

1. Kopier koden. Bruk kopieringsknappen i svaret fra KI-en, så du får med hele koden, fra første til siste linje.
2. Lagre den som handleliste.html. Åpne en enkel tekstredigerer (Notepad i Windows, TextEdit i modus for ren tekst på Mac), lim inn koden og lagre den som handleliste.html. Velg «Alle filer» som filtype, ikke «Tekstdokumenter».
3. Åpne den i nettleseren. Dobbeltklikk på filen, eller dra den inn i et nettleservindu. Du skal se handlelisten din, ikke en side full av kode.

Steg 3: Sjekk at det ikke bare er et pent bilde

En app som ser riktig ut, er ikke det samme som en app som virker. Gå gjennom denne tabellen én linje om gangen, og sammenlign det du ser med det riktige resultatet. Dette er din første ordentlige test.

Hvis en linje feiler, ikke rett koden for hånd ennå. Fortell KI-en nøyaktig hvilken linje som feilet, hva du skrev inn og hva du så i stedet, og be den rette bare akkurat det problemet.

Steg 4: Gjør én endring selv

Gjør nå din første endring uten at KI-en skriver den for deg. Spør KI-en: «Hvor i koden min står overskriften til appen?» Den vil peke på en linje som ser omtrent slik ut: <h1>Handleliste</h1>.

1. Finn overskriften. Åpne handleliste.html i tekstredigereren og finn linjen KI-en pekte på.
2. Endre teksten. Bytt ut ordene mellom <h1> og </h1> med din egen tittel, for eksempel «Lørdagshandel». Ikke slett vinkelparentesene.
3. Lagre og oppdater. Lagre filen, gå tilbake til nettleseren og oppdater siden. Den nye tittelen din skal dukke opp.

Be deretter KI-en forklare din egen fil i tre deler, med koden din som eksempel. Du vil se at alle nettapper er bygd av de samme tre lagene:

Steg 5: Lær appen noe nytt

Ekte programmer vokser i små steg. Legg til én ny funksjon, og test så på nytt. Send KI-en denne oppfølgingen i den samme samtalen:

Legg til et budsjett i handlelisten min. La meg skrive inn beløpet jeg vil bruke. Vis hvor mye som er igjen. Hvis summen går over budsjettet, vis en tydelig advarsel med beløpet jeg er over. La alt annet virke nøyaktig som før, og vis meg hele den oppdaterte filen.

Du har nå bygd, kjørt, testet og endret en ekte app. Det er ikke alt programmering handler om, men det er rutinen du kommer til å gjenta i hver eneste leksjon som følger: beskriv tydelig, la KI-en generere, sjekk mot forventede resultater, og endre én ting om gangen.