Slik bygger du en app med vibe coding: fra idé til publisert app

For å bygge en app med vibe coding skriver du en beskrivelse på én side av den første versjonen, gir den til en AI-appbygger som første prompt, og vokser deretter appen i små testede steg: data, innlogging, hovedarbeidsflyten, finpuss, en sikkerhetsgjennomgang, og til slutt publisering. Denne guiden følger ett eksempelprosjekt, en bookingapp for en liten yogastudio, gjennom alle stadiene, med promptene som brukes i hvert steg.

Hvis du aldri har bygget noe på denne måten, starter vibe coding-veiledningen for nybegynnere mindre. For en bredere oversikt som ikke er knyttet til vibe coding, se slik bygger du en app med AI.

Prosjektet

Forestill deg en yogastudio-eier, Sara, som driver åtte timer i uken. Bookinger kommer via WhatsApp; hun fører en papirliste per time og overbooker ofte. Hun vil at:

• Elevene skal se ukeplanen og booke en plass.
• Hver time skal ha en kapasitet.
• Hun skal ha en liste per time som hun kan sjekke ved døren.
• Elevene skal kunne avbestille inntil to timer før.

Det er hele første versjonen. Ingen betalinger, ingen medlemskap, ingen appbutikk. Det kommer senere, eller aldri.

Steg 1: Skriv en spec på én side

Før du åpner noe verktøy, skriv ned den første versjonen med vanlige ord. Ti minutter her sparer timer med frem og tilbake. En nyttig form:

• Hvem bruker den: elever (booker og avbestiller), Sara (administrerer timer, ser lister).
• Skjermer: timeplan, timedetalj, mine bookinger, admin-timer, admin-timeliste.
• Data: timer (navn, lærer, starttid, lengde, kapasitet), bookinger (elev, time, status), elever (navn, e-post, telefon).
• Regler: ingen booking av en full time; én booking per elev per time; avbestilling inntil to timer før; bare Sara ser admin-sidene.
• Ikke i v1: betalinger, klippekort, venteliste, påminnelser.

Listen «ikke i v1» betyr mest. Det er den som holder byggingen gjennomførbar. Vår guide til å skrive et produktkrav-dokument med AI går lenger hvis du vil ha en fyldigere spec.

Steg 2: Velg et verktøy som dekker hele løkken

For en app med database, innlogginger og en offentlig URL, bruk en AI-appbygger som kjører koden, kobler til en database og publiserer, i stedet for en chat-assistent som gir deg filer. Vår sammenligning av vibe coding-verktøy lister alternativene. Vi bruker Mythex her fordi det dekker hvert steg på ett sted: chat, live forhåndsvisning, en ekte database og fillagring, og publisering med ett klikk.

Steg 3: Den første prompten

Gjør spec-en om til ett avsnitt. Ikke lim inn hele dokumentet med alle detaljer på en gang; gi kjernen og legg til resten i steg.

Bygg en bookingapp for yogastudioet mitt. Elevene registrerer seg med navn, e-post og telefon, ser ukens timeplan, og booker en plass i en time. Hver time har et navn, lærer, starttid, lengde og kapasitet; en full time viser «Full» og kan ikke bookes. Elevene ser sine bookinger og kan avbestille inntil to timer før timen. Jeg er admin: jeg kan legge til og redigere timer og se listen over hvem som er booket i hver av dem. Rolig, enkelt design som fungerer godt på mobil.

Hvis du er usikker på om verktøyet forsto deg, be om en plan først. I Mythex legger Plan-modus opp skjermene og dataene før kode skrives, og du godkjenner dem.

Steg 4: Få kjerneløkken til å fungere

Kjerneløkken er det appen finnes for: en elev booker en time, og Sara ser det. Test bare det:

1. Registrer deg som elev, og book en time.
2. Åpne admin-visningen. Er bookingen der?
3. Book den samme timen igjen. Den skal avvise det.
4. Sett kapasiteten på en time til 2, book den fra to elevkontoer, og prøv en tredje.

To problemer dukker vanligvis opp på dette punktet. Timeplanen viser tider i serverens tidssone, ikke studioets. Og «Full»-sjekken skjer bare på siden, så et raskt dobbeltklikk lager to bookinger.

Vis alle timetider i studioets tidssone, [Asia/Dubai], uansett hvordan besøkendes enhet er innstilt.

Sjekk kapasitet og dupliserte bookinger på serveren når en booking opprettes, ikke bare på siden. Hvis to forespørsler kommer samtidig for den siste plassen, skal bare én lykkes.

Rett kjerneløkken før du legger til noe annet. Alt annet avhenger av den.

Steg 5: Legg til de gjenværende reglene, én om gangen

Gå nå gjennom spec-ens regler én om gangen:

Elevene kan avbestille en booking inntil to timer før timen starter. Etter det skjuler du avbestillingsknappen, og avviser avbestillingen på serveren med en tydelig melding.

Bare kontoen min kan åpne admin-sidene. Sørg for at dette kontrolleres på serveren for hver admin-handling, ikke bare ved å skjule menyen.

Etter hver test du, og gå videre bare når den fungerer. Hvis en endring ødelegger noe, gå tilbake til siste fungerende sjekkpunkt og prøv en tydeligere forespørsel i stedet for å stable rettelser oppå hverandre.

Steg 6: Finpuss det virkelige brukere legger merke til

Virkelige brukere legger merke til små ting. En kort liste for Saras app:

• Tomme tilstander: «Ingen timer denne uken ennå» i stedet for en blank side.
• Bekreftelse: «Du er booket til Vinyasa, tirsdag 18:00» etter booking.
• Mobilt oppsett: store knapper, og timeplanen lesbar på en 375 px skjerm.
• Ledige plasser: «3 plasser igjen» på hvert timekort, slik at elevene booker tidligere.

Vis ledige plasser på hvert timekort, f.eks. «3 av 12 igjen». Etter booking viser du en bekreftelse med timens navn, dag og tid, og en knapp til mine bookinger.

Steg 7: Test som en fremmed

Før noen andre bruker den, bruk en halv time på å prøve å ødelegge den:

Du kan også be AI-en gå gjennom kantsaker:

List ti ting en ekte elev kan gjøre som kan ødelegge booking eller avbestilling, test hver enkelt og rett det som feiler. Fortell meg hva du endret.

Steg 8: En sikkerhetsgjennomgang

Denne appen lagrer navn, e-poster og telefonnumre, så en kort sikkerhetsgjennomgang er verdt det. De viktigste spørsmålene:

• Kan én elev se en annen elevs bookinger eller kontaktopplysninger?
• Finnes noen nøkler eller passord i kode som kjører i nettleseren?
• Er registreringsskjemaet beskyttet mot roboter?
• Finnes det en sikkerhetskopi av dataene?

Vår side om om vibe coding er trygt forklarer hver sjekk og gir prompter for dem, og sikkerhetssjekklisten for AI-bygde apper er den lange versjonen.

Steg 9: Publiser

Når kjerneløkken, reglene og sjekkene består, publiser. På Mythex er det ett klikk, og appen får en offentlig URL med database og hosting på plass. På Pro kan du koble til ditt eget domene, for eksempel book.sarasyoga.com; se slik kobler du til et eget domene.

Før du sender ut lenken, sjekk den publiserte versjonen en gang til. Book en time fra telefonen din. Produksjon og forhåndsvisning skal oppføre seg likt, men bekreft det.

Steg 10: De første brukerne og neste versjon

Gi lenken til fem faste elever først, ikke alle sammen. Be dem booke neste time gjennom den, og fortelle deg hva som var forvirrende. Fiks deretter de tre viktigste tingene de nevner.

Etter noen uker med reell bruk skriver en v2-liste for en app som denne seg ofte selv: en venteliste for fulle timer, e-postpåminnelser kvelden før, og klippekort betalt online. Hver av dem får samme behandling: spec den på noen linjer, prompt den, test den, publiser. For å legge til betalinger, se slik legger du til betalinger i appen din. For å spre ordet, slik lanserer du en app og får de første brukerne.

Gjøre det om til en telefonapp

Mange studioer ønsker et ikon på elevenes telefoner. På Mythex Pro kan den publiserte appen bli en Android-app (en fil du kan laste opp til Google Play) og en iPhone-app sendt til TestFlight med din egen App Store Connect-nøkkel, uten Mac. Telefonappen åpner den publiserte nettappen, så hver gang du publiserer en oppdatering, har telefonappen den også.

Hva du skal ta med deg

Selve byggingen var den korte delen. Det som gjorde appen brukbar, var spec-ens liste «ikke i v1», å teste kjerneløkken før alt annet, serverregler for kapasitet og tilgang, og fem ekte brukere før femti. Slik ser vibe coding ut når appen må fungere for andre mennesker.

Klar til å prøve din egen? Skriv spec-en på én side, og lim deretter det første avsnittet inn i AI-appbyggeren. Hvis du vil se flere apptyper og promptene bak dem, les vår vibe coding-eksempler.

Spørsmål