Com crear una app de reserves: franges horàries, disponibilitat, recordatoris i dipòsits

Per construir una app de reserves necessites quatre coses que funcionin juntes: una llista del que es pot reservar (serveis, sales, personal), normes sobre quan està disponible cadascun, un flux de reserva que només ofereixi franges realment lliures i una vista privada on el negoci gestiona el que ha arribat. Un constructor d'apps amb IA pot produir una primera versió que funcioni en minuts a partir d'una descripció curta; la feina real és decidir les normes —durada de les franges, marges, cancel·lacions, fusos horaris— i comprovar que les reserves duplicades són impossibles.

Comença decidint què vol dir «una reserva» per a tu

Les apps de reserves s'assemblen per fora però difereixen molt per dins. Respon primer això:

• Què es reserva? Un servei (un tall de cabell), una persona (un professor particular), un recurs (una sala de reunions, una pista, una furgoneta) o una plaça en una sessió (una classe de ioga amb 12 places).
• Quant de temps dura? Fixa per servei, o la tria el client?
• Qui l'ofereix? Una sola persona, diversos membres del personal amb el seu propi horari, o ningú (una sala)?
• Què passa després de reservar? Confirmació immediata, o una sol·licitud que aprova el propietari?
• Hi ha diners pel mig? Gratuït, pagament el dia, dipòsit per avançat o pagament complet per endavant?

«Sol·licita una hora, el propietari confirma per correu» és molt més simple de construir que «reserva immediata contra tres calendaris del personal amb dipòsits». Totes dues són vàlides; tria la que realment necessites per a la primera versió.

Què necessita l'app

Dades

Guardar la hora de fi a cada reserva, no només la d'inici, simplifica molt les comprovacions de solapament.

Pàgines

• Pública: llista de serveis, selector de franges, formulari de reserva, pàgina de confirmació i un enllaç per cancel·lar o canviar la reserva.
• Privada (propietari o personal): l'agenda d'avui, les reserves pròximes, una manera de bloquejar temps lliure i la configuració de serveis i horaris.

Permisos

Els clients només han de veure franges lliures o ocupades; mai els noms d'altres clients. El personal podria veure només la seva pròpia agenda; el propietari ho veu tot. Escriu-ho, perquè això decideix si necessites inicis de sessió i rols. La nostra guia sobre com afegir inici de sessió a la teva app cobreix les opcions.

Les parts difícils, i com gestionar-les

Reserves duplicades

L'error clàssic: dues persones carreguen la pàgina, les dues veuen les 10:00 lliures i les dues reserven. La solució és tornar a comprovar al servidor en el moment de desar la reserva i rebutjar-la si ara hi ha algun solapament. Demana-ho explícitament:

En desar una reserva, torna a comprovar al servidor que cap reserva confirmada o pendent del mateix membre del personal se solapa amb l'hora sol·licitada (incloent-hi el marge). Si n'hi ha alguna, rebutja-la i mostra «Aquella hora s'acaba d'ocupar; tria'n una altra».

Després, prova-ho amb dues finestres del navegador.

Fusos horaris

Guarda cada hora en UTC i converteix-la per mostrar-la. Decideix de quin fus horari és la pàgina de reserves —normalment el del negoci per als serveis presencials, i el del client per a les trucades en línia— i indica-ho a la pàgina. Prova una reserva a través d'un canvi d'horari d'estiu.

Marges, avís previ i límits

Normes habituals que val la pena decidir d'entrada: un marge entre cites, un avís mínim («no hi ha reserves amb menys de 2 hores d'antelació»), amb quina antelació màxima es pot reservar i un límit diari. Cadascuna és una frase en un prompt; si les deixes fora, la IA escull els valors per defecte per tu.

Cancel·lacions i absències

Dona a cada confirmació un enllaç per cancel·lar amb un token únic perquè els clients no necessitin un compte. Decideix la finestra de cancel·lació i si els dipòsits són reemborsables, i mostra aquesta política abans del pagament.

Recordatoris

Els correus o SMS de recordatori necessiten alguna cosa que s'executi segons un calendari («cada 15 minuts, envia recordatoris per a les reserves que comencen d'aquí a 24 hores»). Comprova com gestionen les tasques programades el teu constructor i el teu allotjament. Si no ho fan, fes servir un planificador extern que cridi un endpoint de la teva app, o envia el correu de confirmació amb una invitació de calendari adjunta perquè el calendari del client li recordi. Consulta com enviar correus des de la teva app per la part del proveïdor.

Dipòsits i pagaments

El patró habitual amb Stripe:

1. El client tria una franja; l'app crea una reserva pendent que reserva la franja durant un temps curt (per exemple, 15 minuts).
2. L'app l'envia a Stripe Checkout per pagar el dipòsit.
3. Stripe notifica la teva app amb un webhook quan el pagament és correcte; la reserva passa a confirmada.
4. Si no es paga a temps, la reserva pendent caduca i la franja torna a estar lliure.

La tarifa estàndard de Stripe és un percentatge més una quota fixa per cada pagament amb targeta reeixit, sense quota mensual (a setembre de 2026); les tarifes varien segons el país, així que consulta la pàgina de preus de Stripe del teu. Fes servir el mode de prova i targetes de prova fins que tot funcioni. La nostra guia per afegir pagaments ho explica pas a pas.

Un primer prompt que funciona

Construeix una app de reserves per a Northside Barbers. Serveis: Tall de cabell (30 min, 25 $), Retocar barba (15 min, 12 $), Tall de cabell + barba (45 min, 32 $). Dos barbers, Sam i Ali, que treballen de dimarts a dissabte de 9:00 a 18:00. Els clients trien un servei, després un barber o «qualsevol barber», i després veuen només les hores d'inici de 15 minuts lliures dels pròxims 14 dies, i introdueixen nom, telèfon i correu. Desa les reserves en una base de dades, amb un marge de 10 minuts després de cada cita, i torna a comprovar la disponibilitat en desar per evitar reserves duplicades. Mostra una pàgina de confirmació amb un enllaç per cancel·lar. El propietari té una pàgina privada que llista les reserves d'avui i les pròximes, pot cancel·lar una reserva i pot bloquejar temps. Les hores són a l'hora local de la barberia. Disseny net i pensat primer per a mòbil.

Nomena els serveis, el personal, els horaris, les normes i la vista del propietari: tot allò que la IA si no endevinaria.

Passos de construcció

1. Primer el flux de reserva bàsic. Serveis → franja → formulari → reserva desada → confirmació. Res més fins que això funcioni al mòbil.
2. Vista del propietari. Llista d'avui, llista de pròximes, cancel·lar, bloquejar temps.
3. Protegeix les pàgines del propietari. Afegeix inici de sessió abans que entrin dades reals.
4. Normes. Marges, període d'avís, horitzó de reserves, festius.
5. Correu. Confirmació amb invitació de calendari i enllaç de cancel·lació.
6. Dipòsits, si els necessites, primer en el mode de prova de Stripe.
7. Prova els casos límit. Dues finestres reservant la mateixa franja, una reserva que passa de mitjanit, una data de canvi d'horari d'estiu, una reserva cancel·lada que allibera la seva franja.
8. Publica i després fes tu mateix una reserva real abans de compartir l'enllaç.

Errors habituals

• Comprovar la disponibilitat només al navegador. Sembla correcte i igualment fa reserves duplicades.
• Guardar hores locals sense fus horari. Funciona fins que canvien els rellotges.
• Mostrar els noms dels clients al calendari públic. Mostra només lliure o ocupat.
• Construir la planificació del personal, els punts de fidelització i els SMS el primer dia. Llança el flux bàsic i després afegeix el que els clients realment demanen.
• No tenir manera que el propietari bloquegi temps. El primer dia de malaltia generarà absències.

Quan Calendly (o similar) és millor opció

Si ets una persona que comparteix la seva disponibilitat per a trucades, una eina de programació és difícil de superar. A setembre de 2026, el pla gratuït de Calendly cobreix un tipus d'esdeveniment, una connexió de calendari i programació one-to-one amb una pàgina de reserves personalitzable; els plans de pagament afegeixen més tipus d'esdeveniment i funcionalitats d'equip. Eines així es connecten al teu calendari existent de sèrie, cosa que una app pròpia ha de construir expressament.

Construeix la teva pròpia quan necessitis normes que aquestes eines no admeten, diversos recursos reservables, la teva marca a tot arreu, reserves connectades amb altres dades (clients, comandes, subscripcions) o quan estiguis construint un producte de reserves per vendre a altres.

Construir-ho amb Mythex

A Mythex descrius l'app de reserves en el xat, la construeix en una vista prèvia en directe i afegeix una base de dades Postgres quan calgui desar les reserves. La pàgina d'ús de reserves de la documentació suggereix començar amb un formulari de sol·licitud i una llista d'administració, i després afegir la resta. Sigues clar sobre el que ve integrat i el que connectes tu: Mythex no té sincronització de calendari integrada, recordatoris per SMS ni producte de dipòsits. El correu passa pel teu propi proveïdor, els dipòsits pel teu propi Stripe amb les claus desades com a secrets del projecte (recepta de Stripe), i les normes de reserves duplicades i de fus horari són coses que especifiques i proves, tal com s'ha explicat més amunt.

L'ordre /test fa que l'agent cliqui pel flux de reserva a la vista prèvia i informi del que falla. Per a un prompt inicial, prova les plantilles de web de reserves de barberia o reservador de reunions, o explora totes les plantilles d'apps.

Preguntes