Byg din første nyttige app med AI

Trin 1: Beskriv problemet med dine egne ord

Næsten alle handler ind, og det gør det til et perfekt første projekt. Du behøver ikke at forstå programmering for at vurdere, om en indkøbsliste virker: du skriver brød, mælk og æg, ser totalen og krydser tingene af, efterhånden som du køber dem. Resultatet er noget, du faktisk kan bruge allerede i denne uge.

Før du åbner noget AI-værktøj, så gør disse tre sætninger færdige på papir eller i en note. Det er den vigtigste programmeringsfærdighed i hele bogen: at gøre et ønske til konkrete regler.

1. Jeg skal skrive ned … (for eksempel: hver vare, hvor mange jeg skal bruge, og prisen for én).
2. Jeg vil have, at programmet regner ud … (for eksempel: prisen for hver linje og totalen for hele indkøbet).
3. Jeg ved, at programmet virker, når … (for eksempel: to varer til 25 stykket giver 50, og at krydse en vare af ændrer ikke totalen).

Trin 2: Byg den første lille version

Den første version er en enkelt fil, der åbner i din webbrowser. Der er intet udviklingsmiljø at installere, ingen server og intet login. Kopiér prompten nedenfor ind i din AI-assistent (Claude, ChatGPT eller lignende), præcis som den står.

Hjælp mig med at bygge min første enkle app. Jeg er helt nybegynder.

Lav en indkøbsliste i en enkelt fil med navnet indkob.html, som jeg kan åbne i min webbrowser. Læg alle styles og al JavaScript i denne ene fil, uden eksterne biblioteker.

Jeg vil kunne skrive varens navn, antallet og prisen for én vare. En knap tilføjer varen til listen. Vis prisen for hver linje og nederst totalen for hele indkøbet. Lad mig slette en vare og markere den som købt. At markere en vare som købt må ikke ændre totalen.

Afvis et tomt navn, ugyldige tal, en negativ pris og et antal på nul eller mindre. Acceptér både decimalkomma og decimalpunktum i prisen.

Forklar først kort planen. Skriv derefter hele koden og de præcise trin til at gemme og åbne filen. Tilføj ikke andre funktioner endnu.

1. Kopiér koden. Brug kopiknappen i AI'ens svar, så du får hele koden med, fra første til sidste linje.
2. Gem den som indkob.html. Åbn en simpel teksteditor (Notepad på Windows, TextEdit i tilstanden for almindelig tekst på en Mac), indsæt koden og gem den som indkob.html. Vælg "Alle filer" som filtype, ikke "Tekstdokumenter".
3. Åbn den i browseren. Dobbeltklik på filen, eller træk den ind i et browservindue. Du skal se din indkøbsliste, ikke en side fuld af kode.

Trin 3: Tjek, at det ikke bare er et pænt billede

En app, der ser rigtig ud, er ikke det samme som en app, der virker. Gå tabellen igennem én linje ad gangen, og sammenlign det, du ser, med det korrekte resultat. Det er din første rigtige test.

Hvis en linje fejler, så ret ikke koden i hånden endnu. Fortæl AI'en præcis, hvilken linje der fejlede, hvad du skrev, og hvad du så i stedet, og bed den kun rette netop det problem.

Trin 4: Lav selv én ændring

Lav nu din første ændring, uden at AI'en skriver den for dig. Spørg AI'en: "Hvor i min kode står appens overskrift?" Den vil pege på en linje, der ser nogenlunde sådan ud: <h1>Indkøbsliste</h1>.

1. Find overskriften. Åbn indkob.html i din teksteditor, og find den linje, AI'en pegede på.
2. Ret teksten. Erstat ordene mellem <h1> og </h1> med din egen titel, for eksempel "Lørdagsindkøb". Slet ikke vinkelparenteserne.
3. Gem og opdatér. Gem filen, gå tilbage til browseren, og opdatér siden. Din nye titel skulle gerne dukke op.

Bed derefter AI'en om at forklare din egen fil i tre dele med din kode som eksempel. Du vil se, at enhver webapp er bygget af de samme tre lag:

Trin 5: Lær appen noget nyt

Rigtige programmer vokser i små skridt. Tilføj én ny funktion, og test så igen. Send AI'en denne opfølgning i den samme samtale:

Tilføj et budget til min indkøbsliste. Lad mig skrive det beløb, jeg vil bruge. Vis, hvor meget der er tilbage. Hvis totalen går over budgettet, så vis en tydelig advarsel med det beløb, jeg er over. Lad alt andet virke præcis som før, og vis mig hele den opdaterede fil.

Du har nu bygget, kørt, testet og ændret en rigtig app. Det er ikke hele programmering, men det er den rutine, du vil gentage i hver eneste af de følgende lektioner: beskriv klart, lad AI'en generere, tjek mod forventede resultater, og ændr én ting ad gangen.