Creare un’app di prenotazione con Coderblock, passo dopo passo

Cosa creerai

In questo tutorial creerai un’app di prenotazione completa in cui i clienti possono registrarsi, consultare le fasce orarie disponibili, prenotare un appuntamento e gestire le proprie prenotazioni. Il personale avrà invece una dashboard amministrativa per controllare e aggiornare gli appuntamenti. Coderblock genera il frontend React, la logica backend, il database Postgres, l’autenticazione e le policy di sicurezza a partire da richieste in linguaggio naturale. Tu guiderai lo sviluppo direttamente tramite chat, senza dover scrivere manualmente route API, codice di autenticazione o migrazioni del database.

1. Avvia il progetto

Crea un nuovo progetto in Coderblock. Puoi partire dal template per le piattaforme di prenotazione oppure descrivere la tua app da zero. Per iniziare con una soluzione personalizzata, puoi usare un prompt come questo:

Crea un’app di prenotazione responsive per un centro benessere. I visitatori devono poter consultare i servizi e le fasce orarie disponibili. I clienti registrati possono prenotare, riprogrammare o annullare gli appuntamenti. Il personale ha bisogno di una dashboard amministrativa per gestire servizi, orari e prenotazioni. Usa un design pulito e rilassante, ottimizzato per i dispositivi mobili.

Indica il tipo di attività, chi utilizzerà l’app, la durata delle prenotazioni e lo stile visivo che preferisci. Più contesto fornisci all’agente, più la prima versione sarà vicina alle tue esigenze.

2. Genera e controlla la prima versione

Coderblock genera una vera app full stack utilizzando React, Vite, TypeScript e Tailwind CSS per il frontend. L’app riceve inoltre un progetto Supabase dedicato con Postgres, autenticazione, storage e Row Level Security.

Apri l’anteprima di sviluppo live all’indirizzo .coderblock.dev del progetto. Mentre continui a lavorare tramite chat, le modifiche vengono applicate e visualizzate in pochi secondi. Prima di aggiungere nuove funzionalità, controlla le schermate principali:

• Pagina iniziale
• Elenco dei servizi
• Calendario delle disponibilità
• Modulo di prenotazione
• Area personale del cliente
• Dashboard del personale

Se qualcosa non funziona o non rispecchia ciò che avevi in mente, chiedi modifiche mirate invece di ricominciare da capo. Ad esempio:

Rendi più compatte le schede dei servizi, aggiungi durata e prezzo a ogni scheda e mantieni visibile il riepilogo della prenotazione su desktop.

Oppure:

Su mobile, mostra prima la selezione del servizio, poi il calendario e infine gli orari disponibili.

3. Definisci i dati delle prenotazioni

Ora descrivi all’agente quali informazioni dovrà gestire l’app. In questo esempio, i dati principali riguardano servizi, membri del personale, disponibilità, prenotazioni e profili dei clienti. Puoi usare un prompt come questo:

Crea la struttura del database per servizi, personale, disponibilità settimanale, date bloccate e prenotazioni. Ogni prenotazione deve includere cliente, servizio, membro del personale, ora di inizio, ora di fine, stato, note e stato del pagamento. Aggiungi relazioni e indici appropriati.

L’agente progetta lo schema Postgres ed esegue le migrazioni. Puoi controllare le tabelle risultanti dalla scheda Backend dell’editor, insieme agli utenti autenticati, allo storage e alle funzioni. Per semplificare i primi test dell’interfaccia, puoi anche chiedere di aggiungere alcuni dati iniziali:

Aggiungi tre servizi di esempio con durate e prezzi diversi, due membri del personale e le disponibilità per le prossime due settimane.

4. Aggiungi accesso e permessi degli utenti

Ogni app include già una tabella dei profili e una struttura di base per i ruoli. Ora puoi chiedere a Coderblock di creare l'intera esperienza di gestione degli account:

Aggiungi la registrazione e l’accesso dei clienti tramite email e password. Proteggi la pagina delle prenotazioni dei clienti e la dashboard del personale. I clienti devono poter visualizzare e modificare soltanto le proprie prenotazioni. Il personale può gestire tutti i servizi, gli orari e le prenotazioni.

L’agente configura Supabase Auth, la gestione delle sessioni, le route protette e la Row Level Security di Postgres. Non devi creare una tabella personalizzata per le password né scrivere manualmente il codice per JWT o hashing delle password. Se vuoi aggiungere anche l’accesso tramite social, puoi richiederlo esplicitamente. A questo punto, verifica entrambi i ruoli: accedi come cliente e come membro del personale e assicurati che ciascun utente possa visualizzare soltanto i dati e utilizzare le azioni a cui ha accesso.

5. Crea regole di disponibilità affidabili

Un sistema di prenotazione richiede più di un semplice calendario. Le fasce disponibili devono tenere conto degli orari di lavoro, della durata del servizio, delle prenotazioni già esistenti e degli eventuali periodi bloccati. Descrivi queste regole direttamente in linguaggio naturale:

Genera le fasce orarie disponibili in base agli orari di ogni membro del personale. Escludi le date bloccate e le prenotazioni esistenti, prevedi un intervallo di 15 minuti tra gli appuntamenti e impedisci ai clienti di prenotare orari già trascorsi.

È importante gestire anche le richieste simultanee:

Impedisci le doppie prenotazioni a livello di database e backend, anche se due clienti scelgono la stessa fascia oraria quasi contemporaneamente. Mostra un messaggio chiaro se una fascia non è più disponibile prima della conferma.

Testa servizi di durata diversa, appuntamenti vicini all’orario di chiusura, cancellazioni e giornate senza più disponibilità.

6. Crea i flussi per clienti e amministratori

Il percorso del cliente dovrebbe essere semplice e prevedibile: scegliere un servizio, selezionare un membro del personale se necessario, scegliere un orario, confermare i dettagli e ricevere la conferma della prenotazione. Puoi perfezionarlo con un prompt come questo:

Aggiungi una schermata finale di conferma che mostri servizio, membro del personale, data, ora, durata e prezzo. Dopo la prenotazione, porta il cliente alla sezione Le mie prenotazioni, dove potrà riprogrammare o annullare gli appuntamenti futuri.

Per il personale, chiedi invece una vista più operativa:

Aggiungi una dashboard amministrativa con viste giornaliere e settimanali delle prenotazioni, filtri per membro del personale e stato, e controlli per confermare, completare o annullare una prenotazione. Includi schede riepilogative per le prenotazioni di oggi e i prossimi appuntamenti.

7. Controlla e testa l’intero stack

Ora prova l’app utilizzando utenti diversi. Crea due account cliente e un account per il personale, quindi verifica che:

• I visitatori non autenticati non possano accedere alle pagine protette.
• I clienti non possano visualizzare le prenotazioni di altri clienti.
• Il personale possa gestire le prenotazioni, mentre i clienti non possano accedere ai controlli amministrativi.
• Le fasce orarie annullate tornino disponibili quando previsto.
• Le prenotazioni non valide o in conflitto vengano rifiutate.
• Il layout rimanga facile da utilizzare sia su desktop sia su mobile.

Quando trovi un problema, descrivi direttamente in chat cosa hai fatto e cosa ti aspettavi che accadesse. Ad esempio:

Quando un cliente annulla un appuntamento, la fascia oraria rimane non disponibile. Correggi il calcolo delle disponibilità e aggiungi un test per questo caso.

8. Aggiungi i pagamenti Stripe, se necessario

Se gli appuntamenti richiedono un acconto o il pagamento completo, puoi chiedere:

Consenti ai clienti di pagare un acconto di 20 $ al momento della conferma di una prenotazione. Inizia in modalità di test Stripe e aggiorna lo stato del pagamento della prenotazione dopo il completamento del checkout.

Come configurazione predefinita, l’agente può creare un account Stripe gestito dopo averti chiesto alcune informazioni, come il Paese e il nome dell’attività. Non sono necessarie chiavi API e Coderblock gestisce il webhook di pagamento. Potrai completare in seguito la configurazione dei pagamenti e la verifica dell’identità tramite il link Stripe fornito dall’agente. Se preferisci utilizzare il tuo account Stripe, scegli l’opzione BYOK. L’agente richiede STRIPE_SECRET_KEY tramite una procedura sicura dedicata alle variabili d’ambiente, la memorizza lato server e registra automaticamente il webhook. Non inserire mai dati sensibili direttamente nella chat o nel codice generato. Prima di passare alla modalità live, testa i pagamenti riusciti, annullati e non riusciti.

9. Pubblica l’app di prenotazione

Quando hai completato tutti i test, fai clic su Publish. Coderblock distribuisce l’app in produzione al relativo indirizzo .coderblock.app, con SSL incluso. Le pubblicazioni successive applicano rapidamente gli aggiornamenti. Se vuoi utilizzare un dominio personalizzato, apri Settings → Domains. Puoi collegare un dominio esistente seguendo la procedura guidata per la configurazione DNS oppure acquistarne uno direttamente in Coderblock: in questo caso, DNS e SSL vengono configurati automaticamente.

Prima di considerare l’app pronta, effettua una vera prenotazione di prova sul dominio di produzione. Verifica l’accesso, le disponibilità, la gestione delle prenotazioni, i pagamenti se abilitati e la dashboard del personale. A questo punto hai una vera app di prenotazione full stack, pronta per essere utilizzata e continuare a evolversi attraverso lo stesso flusso di lavoro basato sulla chat.