Träff 3 · Bygga

Din första riktiga app

Bygg, testa, rätta. Felsökningsloopen och hur du styr utseendet.

Går du kursen på egen hand? Hoppa över rundan och demon. Läs genomgången, gör övningen och hemuppgiften – och visa någon vad du byggt. Fastnar du: klistra in felet till Claude, eller se om en ledd cirkel passar dig eller din arbetsplats.

Mål för träffen

  • Ha en fungerande första version av ditt cirkelprojekt på din dator.
  • Kunna felsökningsloopen: beskriv → klistra in felet → låt Claude rätta → testa igen.
  • Kunna styra utseende och användbarhet med konkreta prompts.

Agenda (60 min)

Tid Vad
0–10 Runda: hur gick första bygget?
10–20 Demo: felsökningsloopen live (cirkelledaren gör fel med flit)
20–50 Bygg vidare på cirkelprojektet
50–60 Visa på skärm, hemuppgift

Genomgång

Felsökningsloopen

Det kommer bli fel. Det är inte ett misslyckande, det är arbetsflödet. Så här gör du:

  1. Beskriv vad du förväntade dig och vad som hände. "Jag klickade på Spara men ingenting hände."
  2. Ge Claude bevisen. Felmeddelanden i webbläsaren (högerklick → Inspektera → Console) eller i terminalen. Klistra in hela texten.
  3. Låt Claude hitta orsaken först – inte bara gissa en lösning (prompt D1).
  4. Testa själv. Lita inte på "nu fungerar det" – klicka och se.

Fast i en loop? Om Claude försökt rätta samma fel tre gånger: stanna. Be den sammanfatta vad den provat (prompt D3), eller börja en ny session med en kort beskrivning av problemet. Ett nytt huvud hjälper – även för en AI.

Styr utseendet med referenser

"Snyggare" betyder ingenting. Prova istället:

  • Referenser: "Inspirerat av hur Trello visar kort i kolumner."
  • Konkreta krav: "Max två färger plus grått. Stor rubrik. Mycket luft."
  • Skärmdumpar: Dra in en bild i Claude Code och säg "så här ungefär".
  • Mobil: "Se till att det fungerar på mobil" – ska alltid med.

Se prompterna under B för fler.

Övning

  1. Bygg nästa steg i din plan från förra träffen.
  2. Testa som en användare: gör allt i fel ordning, lämna fält tomma, skriv jättelånga texter.
  3. Hittar du fel – kör felsökningsloopen.
  4. Ge appen ett utseende du inte skäms för (prompt B1 eller B3).

Du är klar när

  • Kärnflödet i din app fungerar på din dator (t.ex. lägg till, visa, ändra, ta bort).
  • Du har löst minst ett fel med felsökningsloopen.

Hemuppgift

  • Fortsätt bygga. Skriv ner en sak som var svår att få Claude att förstå – vi pratar om det nästa gång.

Obs: Just nu lever datan bara i webbläsaren (eller ingenstans). Det är meningen – riktig databas kommer i träff 6.