Bygg din första användbara app med AI

Steg 1: Beskriv problemet med egna ord

Nästan alla handlar mat och annat, och därför är det ett perfekt första projekt. Du behöver inte förstå programmering för att avgöra om en inköpslista fungerar: du skriver in bröd, mjölk och ägg, ser summan och bockar av sakerna när du har köpt dem. Resultatet är något du faktiskt kan använda redan den här veckan.

Innan du öppnar något AI-verktyg, avsluta de här tre meningarna på papper eller i en anteckning. Det här är den viktigaste programmeringsfärdigheten i hela boken: att göra om en önskan till konkreta regler.

1. Jag behöver skriva upp … (till exempel: varje vara, hur många jag behöver och priset för en).
2. Jag vill att programmet räknar ut … (till exempel: priset för varje rad och summan för hela inköpet).
3. Jag vet att programmet fungerar när … (till exempel: två varor à 25 blir 50, och att bocka av en vara ändrar inte summan).

Steg 2: Bygg den första lilla versionen

Den första versionen är en enda fil som öppnas i din webbläsare. Det finns ingen utvecklingsmiljö att installera, ingen server och ingen inloggning. Kopiera prompten nedan till din AI-assistent (Claude, ChatGPT eller liknande) precis som den är.

Hjälp mig att bygga min första enkla app. Jag är helt nybörjare.

Skapa en inköpslista i en enda fil som heter handla.html och som jag kan öppna i min webbläsare. Lägg alla stilar och all JavaScript i den här enda filen, utan externa bibliotek.

Jag vill kunna skriva in varans namn, antal och priset för en vara. En knapp lägger till varan i listan. Visa priset för varje rad och längst ned summan för hela inköpet. Låt mig ta bort en vara och markera den som köpt. Att markera en vara som köpt får inte ändra summan.

Avvisa ett tomt namn, ogiltiga tal, ett negativt pris och ett antal som är noll eller mindre. Acceptera både decimalkomma och decimalpunkt i priset.

Förklara först planen kort. Skriv sedan hela koden och de exakta stegen för att spara och öppna filen. Lägg inte till några andra funktioner än.

1. Kopiera koden. Använd kopieringsknappen i AI:ns svar så att du får med hela koden, från första till sista raden.
2. Spara den som handla.html. Öppna en enkel textredigerare (Notepad i Windows, TextEdit i läget för oformaterad text på en Mac), klistra in koden och spara den som handla.html. Välj ”Alla filer” som filtyp, inte ”Textdokument”.
3. Öppna den i webbläsaren. Dubbelklicka på filen eller dra den till ett webbläsarfönster. Du ska se din inköpslista, inte en sida full av kod.

Steg 3: Kontrollera att det inte bara är en snygg bild

En app som ser rätt ut är inte samma sak som en app som fungerar. Gå igenom tabellen en rad i taget och jämför det du ser med det korrekta resultatet. Det här är ditt första riktiga test.

Om någon rad inte stämmer, rätta inte koden för hand än. Berätta för AI:n exakt vilken rad som misslyckades, vad du skrev in och vad du såg i stället, och be den rätta bara just det problemet.

Steg 4: Gör en ändring själv

Gör nu din första ändring utan att AI:n skriver den åt dig. Fråga AI:n: ”Var i min kod finns appens rubrik?” Den pekar ut en rad som ser ungefär ut så här: <h1>Inköpslista</h1>.

1. Hitta rubriken. Öppna handla.html i din textredigerare och leta upp raden som AI:n pekade ut.
2. Ändra texten. Byt ut orden mellan <h1> och </h1> mot en egen rubrik, till exempel ”Lördagshandling”. Ta inte bort vinkelparenteserna.
3. Spara och uppdatera. Spara filen, gå tillbaka till webbläsaren och uppdatera sidan. Din nya rubrik ska synas.

Be sedan AI:n förklara din egen fil i tre delar, med din kod som exempel. Du kommer att se att varje webbapp är byggd av samma tre lager:

Steg 5: Lär appen något nytt

Riktiga program växer i små steg. Lägg till en ny funktion och testa sedan igen. Skicka den här uppföljningen till AI:n i samma konversation:

Lägg till en budget i min inköpslista. Låt mig skriva in beloppet jag vill spendera. Visa hur mycket som är kvar. Om summan går över budgeten, visa en tydlig varning med beloppet jag ligger över. Låt allt annat fungera precis som förut, och visa mig hela den uppdaterade filen.

Du har nu byggt, kört, testat och ändrat en riktig app. Det är inte allt som programmering handlar om, men det är den rutin du kommer att upprepa i varje lektion som följer: beskriv tydligt, låt AI:n generera, kontrollera mot förväntade resultat och ändra en sak i taget.