Så bygger du en app med vibe coding: från idé till publicerad app

För att bygga en app med vibe coding skriver du en beskrivning på en sida av den första versionen, ger den till en AI-appbyggare som din första prompt och växer sedan appen i små testade steg: data, inloggning, huvudflödet, finslipning, en säkerhetsgenomgång och till sist publicering. Den här guiden följer ett exempelprojekt, en bokningsapp för en liten yogastudio, genom varje steg, med prompterna som användes i varje steg.

Om du aldrig har byggt något på det här sättet börjar vår vibe coding-handledning för nybörjare mindre. För en bredare översikt som inte är knuten till vibe coding, se hur du bygger en app med AI.

Projektet

Tänk dig en yogastudioägare, Sara, som driver åtta pass i veckan. Bokningar kommer via WhatsApp; hon för en papperslista per pass och överbokar ofta. Hon vill att:

• Elever ska kunna se veckans schema och boka en plats.
• Varje pass ska ha en kapacitet.
• Hon ska ha en lista per pass som hon kan kontrollera vid dörren.
• Elever ska kunna avboka upp till två timmar före.

Det är hela första versionen. Inga betalningar, inga medlemskap, ingen appbutik. Det kommer senare, eller aldrig.

Steg 1: Skriv en specifikation på en sida

Innan du öppnar något verktyg, skriv ner den första versionen med vanliga ord. Tio minuter här sparar timmar av fram och tillbaka. En användbar form:

• Vem använder den: elever (boka och avboka), Sara (hantera pass, se listor).
• Skärmar: schema, passdetalj, mina bokningar, admin-pass, admin-passlista.
• Data: pass (namn, lärare, starttid, längd, kapacitet), bokningar (elev, pass, status), elever (namn, e-post, telefon).
• Regler: ingen bokning av ett fullt pass; en bokning per elev och pass; avboka upp till två timmar före; bara Sara ser admin-sidorna.
• Inte i v1: betalningar, klippkort, väntelistor, påminnelser.

Listan ”inte i v1” är viktigast. Den är det som gör att bygget går att slutföra. Vår guide om hur du skriver en produktkravsspecifikation med AI går längre om du vill ha en mer omfattande specifikation.

Steg 2: Välj ett verktyg som hanterar hela loopen

För en app med databas, inloggningar och en publik webbadress behöver du en AI-appbyggare som kör koden, kopplar en databas och publicerar, snarare än en chattassistent som lämnar över filer till dig. Vår jämförelse av vibe coding-verktyg listar alternativen. Vi använder Mythex här eftersom det täcker varje steg på ett ställe: chatt, live-förhandsvisning, en riktig databas och fillagring samt publicering med ett klick.

Steg 3: Den första prompten

Förvandla specifikationen till ett stycke. Klistra inte in hela dokumentet med alla detaljer på en gång; ge kärnan och lägg till resten i steg.

Bygg en bokningsapp för pass för min yogastudio. Elever registrerar sig med namn, e-post och telefon, ser veckans schema och bokar en plats i ett pass. Varje pass har ett namn, lärare, starttid, längd och kapacitet; ett fullt pass visar ”Fullt” och kan inte bokas. Elever ser sina bokningar och kan avboka upp till två timmar före passet. Jag är admin: jag kan lägga till och redigera pass och se listan över vilka som är bokade för varje pass. Lugn, enkel design som fungerar bra på mobiler.

Om du är osäker på om verktyget förstod kan du be om en plan först. I Mythex lägger läget Plan upp skärmarna och datan innan kod skrivs, och du godkänner det.

Steg 4: Få kärnloopen att fungera

Kärnloopen är det enda som appen finns för: en elev bokar ett pass, och Sara ser det. Testa bara det:

1. Registrera dig som elev och boka ett pass.
2. Öppna admin-vyn. Finns bokningen där?
3. Boka samma pass igen. Det ska nekas.
4. Sätt passets kapacitet till 2, boka det från två elevkonton och försök med en tredje.

Två problem brukar dyka upp här. Schemat visar tider i serverns tidszon, inte studions. Och kontrollen av ”Fullt” sker bara i sidan, så ett snabbt dubbelklick skapar två bokningar.

Visa alla passtider i studions tidszon, [Asia/Dubai], oavsett vilken tidszon besökarens enhet har.

Kontrollera kapacitet och dubbletter av bokningar på servern när en bokning skapas, inte bara i sidan. Om två förfrågningar kommer samtidigt för den sista platsen ska bara en lyckas.

Fixa kärnloopen innan du lägger till något annat. Allt annat beror på den.

Steg 5: Lägg till återstående regler, en per meddelande

Gå nu igenom specifikationens regler en i taget:

Elever kan avboka en bokning upp till två timmar före passet startar. Efter det, dölj avbokningsknappen och neka avbokningen på servern med ett tydligt meddelande.

Bara mitt konto kan öppna admin-sidorna. Se till att detta kontrolleras på servern för varje admin-åtgärd, inte bara genom att dölja menyn.

Efter varje regel testar du och går vidare först när den fungerar. Om en ändring förstör något, återställ till den senaste fungerande checkpointen och prova en tydligare begäran i stället för att stapla rättningar ovanpå varandra.

Steg 6: Polera det som riktiga användare kommer att märka

Riktiga användare märker små saker. En kort lista för Saras app:

• Tomma tillstånd: ”Inga pass den här veckan än” i stället för en tom sida.
• Bekräftelse: ”Du är bokad på Vinyasa, tisdag 18:00” efter bokning.
• Mobil layout: stora knappar, schemat läsbart på en 375 px-skärm.
• Lediga platser: ”3 platser kvar” på varje passkort, så att elever bokar tidigare.

Visa lediga platser på varje passkort, t.ex. ”3 av 12 kvar”. Efter bokning, visa en bekräftelse med passets namn, dag och tid samt en knapp till mina bokningar.

Steg 7: Testa som en främling

Innan någon annan använder den, lägg en halvtimme på att försöka få den att gå sönder:

Du kan också be AI:n gå igenom kantfall:

Lista tio saker en riktig elev kan göra som kan bryta bokning eller avbokning, testa var och en och åtgärda det som misslyckas. Berätta vad du ändrade.

Steg 8: En säkerhetsgenomgång

Den här appen lagrar namn, e-post och telefonnummer, så en kort säkerhetsgenomgång är värd besväret. De viktigaste frågorna:

• Kan en elev se en annan elevs bokningar eller kontaktuppgifter?
• Finns några nycklar eller lösenord i kod som körs i webbläsaren?
• Är registreringsformuläret skyddat mot bottar?
• Finns det en säkerhetskopia av datan?

Vår sida om om vibe coding är säkert förklarar varje kontroll och ger prompter för dem, och säkerhetschecklistan för AI-byggda appar är den långa versionen.

Steg 9: Publicera

När kärnloopen, reglerna och kontrollerna går igenom, publicera. På Mythex är det ett klick, och appen får en publik webbadress med databasen och hostingen redan på plats. På Pro kan du koppla din egen domän, som book.sarasyoga.com; se hur du kopplar en egen domän.

Innan du skickar ut länken, kontrollera den publicerade versionen en gång till. Boka ett pass från din telefon. Produktion och förhandsvisning ska bete sig likadant, men bekräfta det.

Steg 10: Första användarna och nästa version

Ge länken till fem vanliga elever först, inte alla. Be dem boka sitt nästa pass via den och berätta vad som var förvirrande. Åtgärda sedan de tre viktigaste sakerna de nämner.

Efter några veckors verklig användning skriver sig en v2-lista för en app som den här nästan själv: en väntelista för fulla pass, e-postpåminnelser kvällen innan och klippkort betalda online. Var och en får samma behandling: specificera den i några rader, skriv prompten, testa och publicera. För att lägga till betalningar, se hur du lägger till betalningar i din app. För att sprida det, hur du lanserar en app och får de första användarna.

Gör den till en telefonapp

Många studios vill ha en ikon på elevernas telefoner. På Mythex Pro kan den publicerade appen bli en Android-app (en fil som du kan ladda upp till Google Play) och en iPhone-app som skickas till TestFlight med din egen App Store Connect-nyckel, utan Mac. Telefonappen öppnar den publicerade webbappen, så varje gång du publicerar en uppdatering har även telefonappen den.

Det här tar du med dig

Bygget i sig var den korta delen. Det som gjorde appen användbar var listan ”inte i v1” i specifikationen, att testa kärnloopen före allt annat, serverbaserade regler för kapacitet och åtkomst, och fem riktiga användare innan femtio. Så ser vibe coding ut när appen måste fungera för andra människor.

Redo att prova din egen? Skriv din specifikation på en sida och klistra sedan in det första stycket i AI-appbyggaren. Om du vill se fler apptyper och prompterna bakom dem, läs våra exempel på vibe coding.

Frågor