Sådan bygger du en app med vibe coding: fra idé til publiceret app

For at bygge en app med vibe coding skriver du en beskrivelse på én side af den første version, giver den til et AI-app-værktøj som din første prompt, og udvider derefter appen i små, testede trin: data, login, det vigtigste flow, finpudsning, en sikkerhedsgennemgang og til sidst publicering. Denne guide følger ét eksempelprojekt, en bookingapp til et lille yogastudie, gennem alle trin, med prompts brugt i hvert trin.

Hvis du aldrig har bygget noget på denne måde, starter vores vibe coding-vejledning for begyndere mindre. For et bredere overblik, der ikke er knyttet til vibe coding, se sådan bygger du en app med AI.

Projektet

Forestil dig et yogastudie-ejer, Sara, der har otte hold om ugen. Bookinger kommer via WhatsApp; hun fører en papirliste pr. hold og overbooker ofte. Hun vil have:

• At kursister kan se ugens skema og booke en plads.
• At hvert hold har en kapacitet.
• En liste pr. hold, som hun kan tjekke ved døren.
• At kursister kan afbestille op til to timer før.

Det er hele den første version. Ingen betalinger, ingen medlemskaber, ingen app-butik. Dem kommer senere, eller aldrig.

Trin 1: Skriv en specifikation på én side

Før du åbner et værktøj, skriv den første version ned med almindelige ord. Ti minutter her sparer timer med frem og tilbage. En brugbar form:

• Hvem bruger den: kursister (booker og afbestiller), Sara (administrerer hold, ser lister).
• Skærme: skema, holddetalje, mine bookinger, admin-hold, admin-holdliste.
• Data: hold (navn, underviser, starttidspunkt, varighed, kapacitet), bookinger (kursist, hold, status), kursister (navn, e-mail, telefon).
• Regler: ingen booking af et fuldt hold; én booking pr. kursist pr. hold; afbestilling op til to timer før; kun Sara ser admin-siderne.
• Ikke i v1: betalinger, klippekort, venteliste, påmindelser.

Listen „ikke i v1“ er den vigtigste. Den er det, der holder opbygningen færdig. Vores guide til at skrive et produktkrav-dokument med AI går længere, hvis du vil have en mere fyldestgørende specifikation.

Trin 2: Vælg et værktøj, der dækker hele flowet

Til en app med database, login og en offentlig URL, brug et AI-app-værktøj, der kører koden, tilslutter en database og publicerer, frem for en chatassistent, der giver dig filer. Vores sammenligning af vibe coding-værktøjer lister mulighederne. Vi bruger Mythex her, fordi det dækker hvert trin ét sted: chat, live-preview, en rigtig database og fillagring og publicering med ét klik.

Trin 3: Den første prompt

Omsæt specifikationen til ét afsnit. Indsæt ikke hele dokumentet på én gang med alle detaljer; giv kernen og tilføj resten i trin.

Byg en bookingapp til mit yogastudie. Kursister opretter sig med navn, e-mail og telefon, ser ugens skema og booker en plads på et hold. Hvert hold har et navn, en underviser, et starttidspunkt, en varighed og en kapacitet; et fuldt hold viser „Fuldt“ og kan ikke bookes. Kursister ser deres bookinger og kan afbestille op til to timer før holdet starter. Jeg er admin: jeg kan oprette og redigere hold og se listen over, hvem der er booket på hvert enkelt. Roligt, enkelt design, der fungerer godt på telefoner.

Hvis du er usikker på, om værktøjet har forstået det, så bed om en plan først. I Mythex lægger Plan-tilstanden skærme og data frem, før der skrives kode, og du godkender den.

Trin 4: Få kerneløkken til at virke

Kerneløkken er det ene, appen findes for: en kursist booker et hold, og Sara ser det. Test kun det:

1. Opret dig som kursist, og book et hold.
2. Åbn admin-visningen. Er bookingen der?
3. Book det samme hold igen. Det skal afvises.
4. Sæt holdets kapacitet til 2, book det fra to kursist-konti, og prøv en tredje.

To problemer dukker typisk op her. Skemaet viser tidspunkter i serverens tidszone, ikke studiets. Og tjekket for „Fuldt“ sker kun på siden, så et hurtigt dobbeltklik laver to bookinger.

Vis alle holdtider i studiets tidszone, [Asia/Dubai], uanset hvordan besøgerens enhed er indstillet.

Tjek kapacitet og dubletbookinger på serveren, når en booking oprettes, ikke kun på siden. Hvis to forespørgsler kommer samtidig for den sidste plads, må kun én lykkes.

Ret kerneløkken, før du tilføjer noget andet. Alt andet afhænger af den.

Trin 5: Tilføj de resterende regler, én pr. besked

Gå nu igennem specifikationens regler én ad gangen:

Kursister kan afbestille en booking op til to timer før holdet starter. Derefter skal afbestillingsknappen skjules, og afbestillingen afvises på serveren med en tydelig besked.

Kun min konto må åbne admin-siderne. Sørg for, at dette tjekkes på serveren ved hver admin-handling, ikke kun ved at skjule menuen.

Test efter hver enkelt, og gå kun videre, når den virker. Hvis en ændring ødelægger noget, så rul tilbage til det sidste gode checkpoint og prøv en tydeligere anmodning i stedet for at stable rettelser oven på hinanden.

Trin 6: Finpuds det, rigtige brugere vil bemærke

Rigtige brugere bemærker små ting. En kort liste for Saras app:

• Tomme tilstande: „Ingen hold denne uge endnu“ i stedet for en tom side.
• Bekræftelse: „Du er booket til Vinyasa, tirsdag kl. 18:00“ efter booking.
• Telefonlayout: store knapper, skemaet læseligt på en 375 px skærm.
• Ledige pladser: „3 pladser tilbage“ på hvert hold, så kursister booker hurtigere.

Vis ledige pladser på hvert holdkort, f.eks. „3 af 12 ledige“. Efter booking skal der vises en bekræftelse med holdnavn, dag og tidspunkt og en knap til mine bookinger.

Trin 7: Test som en fremmed

Før andre bruger den, så brug en halv time på at forsøge at knække den:

Du kan også bede AI’en gennemgå kantsager:

List ti ting, en rigtig kursist kunne gøre, der måske ødelægger booking eller afbestilling, test hver enkelt og ret det, der fejler. Fortæl mig, hvad du ændrede.

Trin 8: En sikkerhedsgennemgang

Denne app gemmer navne, e-mails og telefonnumre, så en kort sikkerhedsgennemgang er umagen værd. De vigtigste spørgsmål:

• Kan én kursist se en anden kursists bookinger eller kontaktoplysninger?
• Findes nøgler eller adgangskoder i kode, der kører i browseren?
• Er tilmeldingsformularen beskyttet mod bots?
• Findes der en backup af data?

Vores side om om vibe coding er sikkert forklarer hver kontrol og giver prompts til dem, og sikkerhedstjeklisten for AI-byggede apps er den lange version.

Trin 9: Publicer

Når kerneløkken, reglerne og kontrollerne består, så publicér. På Mythex er det ét klik, og appen får en offentlig URL med sin database og hosting allerede på plads. På Pro kan du forbinde dit eget domæne, for eksempel book.sarasyoga.com; se sådan forbinder du et eget domæne.

Før du sender linket ud, så tjek den publicerede version én gang til. Book et hold fra din telefon. Produktion og preview skal opføre sig ens, men bekræft det.

Trin 10: De første brugere og næste version

Giv linket til fem faste kursister først, ikke alle. Bed dem booke deres næste hold via det og fortælle dig, hvad der var forvirrende. Ret derefter de tre ting, de nævner øverst.

Efter et par ugers reel brug skriver en v2-liste for en app som denne sig typisk selv: en venteliste for fulde hold, e-mail-påmindelser aftenen før og klippekort betalt online. Hver af dem får samme behandling: specificér det i få linjer, prompt det, test det, publicér. For tilføjelse af betalinger, se sådan tilføjer du betalinger til din app. For at få ordet ud, se sådan lancerer du en app og får de første brugere.

Gør det til en telefonapp

Mange studier vil have et ikon på kursisternes telefoner. På Mythex Pro kan den publicerede app blive til en Android-app (en fil du kan uploade til Google Play) og en iPhone-app sendt til TestFlight med din egen App Store Connect-nøgle, uden en Mac. Telefonappen åbner den publicerede webapp, så hver gang du publicerer en opdatering, har telefonappen den også.

Det, du skal tage med

Selve opbygningen var den korte del. Det, der gjorde appen brugbar, var specifikationens „ikke i v1“-liste, test af kerneløkken før alt andet, serverregler for kapacitet og adgang og fem rigtige brugere før halvtreds. Sådan ser vibe coding ud, når appen skal virke for andre mennesker.

Klar til at prøve din egen? Skriv din specifikation på én side, og indsæt derefter det første afsnit i AI-app-værktøjet. Vil du se flere app-typer og prompts bag dem, så læs vores vibe coding-eksempler.

Spørgsmål