Com crear una app amb vibe coding: de la idea a l'app publicada

Per crear una app amb vibe coding, escriu una descripció d'una pàgina de la primera versió, dona-la a un creador d'apps amb IA com a primer prompt, i després fes créixer l'app en passos petits i provats: dades, inici de sessió, el flux de treball principal, acabats, una revisió de seguretat i, finalment, la publicació. Aquesta guia segueix un projecte d'exemple, una app de reserves de classes per a un petit estudi de ioga, a través de cada etapa, amb els prompts usats a cada pas.

Si mai no has construït res d'aquesta manera, la nostra guia de vibe coding per a principiants comença més a poc a poc. Per a una visió més àmplia que no es limiti al vibe coding, consulta com crear una app amb IA.

El projecte

Imagina Sara, la propietària d'un estudi de ioga que fa vuit classes a la setmana. Les reserves arriben per WhatsApp; ella duu una llista en paper per cada classe i sovint hi ha sobrereserves. Vol:

• Que les alumnes vegin l'horari de la setmana i reservin una plaça.
• Que cada classe tingui una capacitat.
• Una llista per classe que pugui consultar a la porta.
• Que les alumnes puguin cancel·lar fins a dues hores abans.

Això és tota la primera versió. Sense pagaments, sense abonaments, sense botiga d'aplicacions. Això vindrà després, o mai.

Pas 1: escriu una especificació d'una pàgina

Abans d'obrir cap eina, escriu la primera versió amb paraules senzilles. Deu minuts aquí estalvien hores d'anada i tornada. Una forma útil:

• Qui l'usa: alumnes (reserven i cancel·len), Sara (gestiona les classes, veu les llistes).
• Pantalles: horari, detall de la classe, les meves reserves, classes d'administració, llista de classe d'administració.
• Dades: classes (nom, professor, hora d'inici, durada, capacitat), reserves (alumna, classe, estat), alumnes (nom, correu electrònic, telèfon).
• Regles: no reservar una classe plena; una reserva per alumna i classe; cancel·lar fins a dues hores abans; només Sara veu les pàgines d'administració.
• No a la v1: pagaments, paquets de classes, llistes d'espera, recordatoris.

La llista de «no a la v1» és la més important. És el que manté la construcció acabable. La nostra guia sobre com escriure un document de requisits de producte amb IA va més enllà si vols una especificació més completa.

Pas 2: tria una eina que cobreixi tot el bucle

Per a una app amb base de dades, inici de sessió i una URL pública, fes servir un creador d'apps amb IA que executi el codi, adjunti una base de dades i publiqui, en lloc d'un assistent de xat que et lliura fitxers. La nostra comparativa d'eines de vibe coding enumera les opcions. Aquí fem servir Mythex perquè cobreix cada pas en un sol lloc: xat, vista prèvia en directe, una base de dades real i emmagatzematge de fitxers, i publicació amb un clic.

Pas 3: el primer prompt

Converteix l'especificació en un paràgraf. No enganxis tot el document de cop amb cada detall; dona el nucli i afegeix la resta per passos.

Construeix una app de reserves de classes per al meu estudi de ioga. Les alumnes es registren amb nom, correu electrònic i telèfon, veuen l'horari d'aquesta setmana i reserven una plaça en una classe. Cada classe té un nom, un professor, una hora d'inici, una durada i una capacitat; una classe plena mostra «Complet» i no es pot reservar. Les alumnes veuen les seves reserves i poden cancel·lar fins a dues hores abans de la classe. Jo sóc l'administradora: puc afegir i editar classes i veure la llista de qui ha reservat cada una. Disseny tranquil i simple que funcioni bé al mòbil.

Si no estàs segur que l'eina ho hagi entès, demana primer un pla. A Mythex, el mode Pla descriu les pantalles i les dades abans d'escriure codi, i tu l'aproves.

Pas 4: fes funcionar el bucle principal

El bucle principal és l'única cosa per a la qual existeix l'app: una alumna reserva una classe, i Sara ho veu. Prova només això:

1. Registra't com a alumna i reserva una classe.
2. Obre la vista d'administració. Hi és la reserva?
3. Reserva la mateixa classe de nou. Hauria de rebutjar-ho.
4. Posa la capacitat d'una classe a 2, reserva-la des de dos comptes d'alumna i prova una tercera.

Normalment apareixen dos problemes en aquest punt. L'horari mostra les hores en la zona horària del servidor, no la de l'estudi. I la comprovació de «Complet» només es fa a la pàgina, així que un doble clic ràpid crea dues reserves.

Mostra totes les hores de les classes en la zona horària de l'estudi, [Asia/Dubai], sigui quina sigui la configuració del dispositiu del visitant.

Comprova la capacitat i les reserves duplicades al servidor quan es crea una reserva, no només a la pàgina. Si dues peticions arriben alhora per a l'última plaça, només n'hauria de reeixir una.

Arregla el bucle principal abans d'afegir res més. Tot la resta en depèn.

Pas 5: afegeix la resta de regles, una per missatge

Ara repassa les regles de l'especificació una a una:

Les alumnes poden cancel·lar una reserva fins a dues hores abans que comenci la classe. Després, amaga el botó de cancel·lar i rebutja la cancel·lació al servidor amb un missatge clar.

Només el meu compte pot obrir les pàgines d'administració. Assegura't que això es comprova al servidor per a cada acció d'administració, no només amagant el menú.

Després de cada una, prova-la, i avança només quan funcioni. Si un canvi trenca alguna cosa, torna al darrer punt de control bo i prova una petició més clara en lloc d'acumular arreglos.

Pas 6: polir el que notaran els usuaris reals

Els usuaris reals noten les petites coses. Una llista curta per a l'app de la Sara:

• Estats buits: «Encara no hi ha classes aquesta setmana» en lloc d'una pàgina en blanc.
• Confirmació: «Tens plaça per a Vinyasa, dimarts a les 18:00» després de reservar.
• Disseny al mòbil: botons grans, l'horari llegible en una pantalla de 375 px.
• Places lliures: «3 places lliures» a cada targeta de classe, perquè les alumnes reservin abans.

A cada targeta de classe mostra les places lliures, per exemple «3 de 12 lliures». Després de reservar, mostra una confirmació amb el nom de la classe, el dia i l'hora, i un botó per anar a les meves reserves.

Pas 7: prova-ho com si fossis una desconeguda

Abans que ho usi ningú més, dedica mitja hora a intentar trencar-ho:

També pots demanar a la IA que repassi casos límit:

Fes una llista de deu coses que una alumna real podria fer i que podrien trencar la reserva o la cancel·lació, prova cadascuna i arregla les que fallin. Explica'm què has canviat.

Pas 8: una revisió de seguretat

Aquesta app emmagatzema noms, correus electrònics i números de telèfon, així que val la pena una revisió de seguretat breu. Les preguntes principals:

• Pot una alumna veure les reserves o les dades de contacte d'una altra?
• Hi ha alguna clau o contrasenya al codi que s'executa al navegador?
• El formulari de registre està protegit contra robots?
• Hi ha una còpia de seguretat de les dades?

La nostra pàgina sobre si el vibe coding és segur explica cada comprovació i dona prompts per a elles, i la llista de seguretat per a apps creades amb IA és la versió llarga.

Pas 9: publica

Quan el bucle principal, les regles i les comprovacions passin, publica. A Mythex és un clic, i l'app obté una URL pública amb la base de dades i l'allotjament ja preparats. Amb Pro pots connectar el teu propi domini, com reserves.sarayoga.com; consulta com connectar un domini personalitzat.

Abans d'enviar l'enllaç, revisa una vegada més la versió publicada. Reserva una classe des del teu telèfon. La producció i la vista prèvia haurien de comportar-se igual, però confirma-ho.

Pas 10: primers usuaris i la següent versió

Dona l'enllaç primer a cinc alumnes habituals, no a totes. Demana'ls que reservin la seva propera classe a través d'ell i que t'expliquin què els ha confós. Després arregla les tres coses principals que esmentin.

Després d'unes setmanes d'ús real, una llista de v2 per a una app com aquesta gairebé s'escriu sola: una llista d'espera per a classes plenes, recordatoris per correu la tarda abans, i paquets de classes pagats en línia. Cada una rep el mateix tractament: especifica-la en unes línies, fes-ne el prompt, prova-la i publica-la. Per afegir pagaments, consulta com afegir pagaments a la teva app. Per donar a conèixer-la, com llançar una app i aconseguir primers usuaris.

Convertir-la en una app per al telèfon

Molts estudis volen una icona al telèfon de les seves alumnes. A Mythex Pro, l'app publicada es pot convertir en una app Android (un fitxer que pots pujar a Google Play) i en una app per a iPhone enviada a TestFlight amb la teva pròpia clau d'App Store Connect, sense Mac. L'app del telèfon obre l'app web publicada, de manera que cada cop que publiquis una actualització, l'app del telèfon també la rep.

Què en cal endur-se

La construcció en si va ser la part curta. El que va fer l'app utilitzable va ser la llista de «no a la v1» de l'especificació, provar el bucle principal abans de res més, les regles de capacitat i d'accés al servidor, i cinc usuaris reals abans de cinquanta. Així és el vibe coding quan l'app ha de funcionar per a altres persones.

Vols provar-ho amb la teva? Escriu la teva especificació d'una pàgina, i després enganxa el primer paràgraf al creador d'apps amb IA. Si vols veure més tipus d'apps i els prompts que hi ha darrere, llegeix els nostres exemples de vibe coding.

Preguntes