Bygg prototyp på 10 min

Från idé till klickbar sak.

5 minLovable – bygg utan att koda
Illustration för lektionen Bygg prototyp på 10 min

Vad du bygger

Du bygger en fullt fungerande och klickbar webbapplikation, till exempel en smart inköpslista eller en budgetkalkylator, helt utan att kunna koda. Appen skapas utifrån dina egna ord på vanlig svenska och du kan testa den direkt på skärmen sekunden efter att den är klar.

Innan du börjar

  • Ett kostnadsfritt konto på Bolt.new. Du kan enkelt logga in med din vanliga Google-adress.
  • En enkel idé om vad du vill göra, till exempel en digital kom-ihåg-lista eller en enkel kalkylator för hushållets utgifter.
  • Inga förkunskaper om kodning eller programmering behövs.

Steg för steg

  1. Öppna verktyget – Gå till webbplatsen Bolt.new i webbläsaren på din dator. Klicka på "Sign in" uppe till höger för att logga in, så sparas dina projekt automatiskt.

  2. Beskriv din idé – Klicka i det stora textfältet mitt på skärmen och skriv på vanlig svenska vad du vill att din app ska göra.

    Bygg en smart inköpslista. Jag vill kunna skriva in varor, klicka för att bocka av dem och se en mätare högst upp som visar i procent hur mycket av listan som är avklarad. Gör designen modern med mjuka färger.

  3. Starta bygget – Klicka på den blå pilknappen till höger i textfältet, eller tryck på Enter. Du ser nu hur verktyget börjar skriva koden och bygga upp gränssnittet i realtid på höger sida av skärmen.

  4. Testa din prototyp – När Bolt.new har byggt klart laddas appen i förhandsvisningen till höger. Klicka på knappar, skriv in testdata och känn efter hur appen fungerar.

  5. Justera och förbättra – Om du vill ändra något, lägga till en funktion eller byta färg, skriver du bara detta i chattrutan till vänster.

    Lägg till en knapp som heter "Rensa köpta varor" så att alla avprickade saker försvinner från listan på en gång.

Byggloftets tips

  • Börja smått: Det är lätt att vilja bygga ett jättestort system direkt. Gör som vår maskot Bygge och börja med en liten, enkel funktion först. Du kan alltid be chatten lägga till fler saker i efterhand.
  • Prata som med en kollega: Du behöver inte använda krångliga IT-termer. Bolt.new förstår bäst när du förklarar i detalj, steg för steg, vad som ska hända när man klickar på en knapp.
  • Kolla mobilläget: Uppe i högra hörnet av förhandsvisningen kan du växla mellan dator- och mobilvy för att se hur din app upplevs på en telefon.

Vanliga fel

  • "Genereringen har fastnat": Ibland kan nätverket svaja. Klicka på den lilla cirkelpilen eller "Retry"-knappen som dyker upp i chatten, eller ladda om sidan i webbläsaren om det tar helt stopp.
  • "Knapparna reagerar inte i förhandsvisningen": Dubbelkolla att Bolt.new har skrivit klart all kod. Om det fortfarande inte fungerar, skriv i chatten: "Knappen för att lägga till varor fungerar inte, kan du laga den?".

Du är klar när…

Du ser din färdiga app i förhandsvisningen till höger och du kan klicka på knapparna och skriva in information precis som i en riktig applikation.

Steg för steg i bild

Öppna verktyget – Gå till webbplatsen [Bolt.new](https://bol
1. Öppna verktyget – Gå till webbplatsen [Bolt.new](https://bol
Beskriv din idé – Klicka i
2. Beskriv din idé – Klicka i
Starta bygget – Klicka på den blå pilknappen till höger i te
3. Starta bygget – Klicka på den blå pilknappen till höger i te

Det finns en videoversion av den här lektionen för medlemmar. Texten ovan är komplett.