Come costruire un backend con Windsurf?

l'ide windsurf ti consente di integrare strumenti esterni che hanno un server mcp attivo attraverso il protocollo mcp questo ti consente di eseguire compiti e leggere dati da quelle fonti senza lasciare il tuo ide utilizzando prompt in questo tutorial, imparerai come costruire il backend e l'interfaccia utente (ui) per un pianificatore di appuntamenti utilizzando il server mcp di back4app attraverso l'ide windsurf e distribuirlo sui contenitori di back4app punti chiave puoi visualizzare il tracker delle spese personali dal vivo costruito in questo tutorial utilizzando questo link scopri come costruire un backend su back4app utilizzando windsurf e il server mcp di back4app esplora come le relazioni sono modellate tra le classi su back4app esplora come l'autenticazione e l'autorizzazione basata sui ruoli sono implementate da back4app utilizzando le loro classi integrate distribuisci la tua app in pochi clic utilizzando i contenitori di back4app prerequisiti per seguire questo tutorial, è necessario avere i seguenti requisiti un account back4app puoi registrarti gratuitamente se non ne hai uno windsurf ide installato sul tuo sistema familiarità di base con i concetti di sviluppo backend panoramica del progetto pianificatore di appuntamenti in questo tutorial, costruirai un pianificatore di appuntamenti che supporta due ruoli fornitori che registrano i servizi che offrono e clienti che prenotano quei servizi i fornitori definiscono ogni servizio con un nome, una durata e un prezzo i clienti quindi navigano tra i servizi disponibili, scelgono una data e un orario e confermano una prenotazione una volta prenotato, l'appuntamento appare nei dashboard sia del fornitore che del cliente, con uno stato che puoi aggiornare o annullare secondo necessità questo progetto avrà 4 classi utente , ruolo , appuntamento , e servizio le classi utente e ruolo fanno parte delle classi integrate di back4app e saranno utilizzate per l'autenticazione e i controlli di accesso la classe servizio definirà i dettagli di ciascuna offerta, il suo nome, la durata e il prezzo, in modo che i fornitori possano elencare ciò che offrono e i clienti possano sfogliare le offerte la classe appuntamento collegherà un cliente e un fornitore a un servizio scelto nei campi specifici di starttime e endtime, tracciando il suo stato (“in attesa”, “confermato”, “annullato”), e utilizzerà acl a livello di oggetto in modo che solo il cliente che prenota e il suo fornitore possano leggere o modificare ciascun appuntamento ecco un diagramma di relazione tra entità per aiutarti a visualizzare lo schema ora che hai un'idea generale di cosa costruirai, nella sezione successiva, configurerai il server mcp di back4app con windsurf e inizierai a scrivere prompt che creeranno l'app descritta in questa sezione collegare back4app e windsurf guarda il video qui sotto per un tutorial su come collegare windsurf a back4app per collegare il server back4app mcp a windsurf, prima di tutto, hai bisogno di una chiave account back4app per recuperarla, accedi al tuo account back4app e nella tua dashboard utente, fai clic sul menu a discesa nella barra di navigazione e seleziona account keys nella pagina account keys , dai un nome alla tua chiave account, copia la chiave generata e conservala in un luogo sicuro successivamente, apri windsurf e fai clic sull'icona del martello nell'assistente cascade questo apre un menu a discesa con un pulsante di configurazione, fai clic su di esso il pulsante di configurazione ti porta alla pagina gestisci plugin clicca sul pulsante “visualizza configurazione grezza” e incolla l'oggetto di configurazione qui sotto nel file { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } sostituisci \<account key> con la tua chiave account, salva il file e aggiorna windsurf se stai seguendo questo tutorial su una macchina windows, cambia il valore della chiave del comando in npx cmd creare il backend con windsurf per creare il backend del pianificatore di appuntamenti con windsurf, prima devi fornire all'assistente cascade un prompt che gli dica di creare una nuova app con il nome specificato, insieme alle tabelle del database richieste puoi ottenere questo per il pianificatore di appuntamenti utilizzando il prompt qui sotto create a new backend named “appointment scheduler” by defining two new classes and a server side hook first, add a service class with fields for name (string), durationminutes (number) and price (number) then add an appointment class that includes pointers named client and provider (both to the built in user class), a pointer named service to the service class, starttime and endtime (date), and a status field constrained to “pending,” “confirmed,” or “canceled ” finally, write a beforesave cloud code trigger on appointment that queries for any existing appointment with the same provider whose time window overlaps the incoming starttime/endtime and rejects the save if it finds a conflict questo prompt dice a windsurf di creare un backend “pianificatore di appuntamenti” creando due nuovi modelli di dati servizio e appuntamento, con le relazioni e i campi appropriati implementa anche un hook beforesave lato server su appuntamento che previene qualsiasi prenotazione sovrapposta per lo stesso fornitore windsurf registra tutte le richieste che fa mentre cerca di portare a termine il compito, e non appena termina l'esecuzione, fornirà un riepilogo del compito ora che le classi dell'app e del database sono state create, puoi implementare l'autenticazione per il tuo backend implementazione dell'autenticazione e autorizzazione nel backend per questa app, devi assicurarti che gli utenti possano accedere in modo sicuro e fare solo le cose che dovrebbero essere in grado di fare ad esempio, solo gli utenti che si registrano come fornitori dovrebbero essere in grado di elencare un servizio, e solo un fornitore che elenca un servizio dovrebbe essere in grado di aggiornare il servizio puoi ottenere questo per il pianificatore di appuntamenti utilizzando il prompt qui sotto update the “appointment scheduler” backend to enable user authentication and role based access control configure the built in user class to require email/password sign‐up and login ensure the built in role model includes “provider” and “client” roles, and assign each user to one of these roles on registration or via a cloud function then set class level permissions so that only authenticated users may read and write appointment objects, but only providers can create, update, or delete service entries finally, on each appointment object, apply an acl in a beforesave hook that grants read/write permission only to the booking client and the designated provider, and verify in the hook that request user has the appropriate role before allowing the operation questo prompt sopra istruisce windsurf ad abilitare la registrazione e il login con email/password, definire e assegnare i ruoli “fornitore” e “cliente”, applicare permessi a livello di classe in modo che solo i fornitori gestiscano i servizi mentre gli utenti autenticati gestiscono gli appuntamenti, e applicare acl sugli oggetti più un hook beforesave su appuntamento per concedere accesso solo al cliente che prenota e al fornitore e verificare i loro ruoli ora che hai impostato l'autenticazione e l'autorizzazione basata sui ruoli, puoi implementare gli endpoint crud necessari affinché l'app funzioni implementazione della funzionalità crud per servizi e appuntamenti la tua app deve consentire agli utenti autenticati di creare servizi (fornitori) e prenotare appuntamenti su servizi già creati (clienti) gli utenti devono anche essere in grado di modificare, eliminare e visualizzare servizi e appuntamenti puoi ottenere questo per il pianificatore di appuntamenti utilizzando il prompt qui sotto add cloud code functions to our “appointment scheduler” backend that expose the necessary crud endpoints for the service class, implement createservice, listservices, updateservice, and deleteservice functions that check request user’s role and allow only providers to run them for the appointment class, implement createappointment, listappointments, updateappointmentstatus, and deleteappointment functions that ensure the caller is authenticated and only operates on records where they are the client or the provider in each function, use request user to enforce authentication, verify the user’s role (client or provider), apply the appropriate acl checks, and return the created, fetched, updated, or deleted record in the response questo prompt istruisce windsurf a generare endpoint cloud code per le classi service e appointment, implementando operazioni di creazione, lettura, aggiornamento ed eliminazione mentre applica controlli di autenticazione e basati sul ruolo in modo che solo i fornitori possano gestire i servizi e solo il cliente che prenota o il fornitore assegnato possa gestire i propri appuntamenti generazione del tuo frontend puoi sfruttare il contesto che windsurf ha dalla creazione del tuo backend su back4app per chiedergli di creare un frontend che corrisponda allo schema e ai requisiti della tua app puoi ottenere questo per il pianificatore di appuntamenti utilizzando il prompt qui sotto generate a minimal frontend that matches the schema and implements all the functionality of the appointment scheduler on my back4app account and connect the frontend to the backend using the javascript parse sdk use vite and react utilizzando il prompt sopra o simile, windsurf genererà un frontend che corrisponde allo schema del tuo backend e lo collegherà al tuo backend i file del progetto sono memorizzati sotto /\<user>/cascadeprojects/\<app name> cd nell'app e eseguila utilizzando le istruzioni fornite nel readme, e apporta eventuali modifiche che desideri ora, il tuo progetto è completo nella prossima sezione, lo distribuirai sui contenitori back4app distribuire la tua app su back4app containers i contenitori back4app ti consentono di distribuire facilmente le tue app utilizzando un dockerfile e un repository github per distribuire la tua app sui contenitori back4app, devi prima includere un dockerfile nel tuo repository puoi chiedere a claude di generarne uno utilizzando il prompt qui sotto generate a docker file for the ui of my appointment scheduler oppure puoi utilizzare il dockerfile fornito qui sotto from node 18 alpine as builder workdir /app \# install pnpm run npm install g pnpm \# copy only package files first for better caching copy package json pnpm lock yaml / \# install dependencies (including dev for build) run pnpm install frozen lockfile strict peer dependencies=false \# copy the rest of the app copy \# build the next js app with standalone output run pnpm build \# production image from node 18 alpine as runner workdir /app \# copy standalone output and required files copy from=builder /app/ next/standalone / copy from=builder /app/ next/static / next/static copy from=builder /app/public /public \# optionally copy env or other config files \# copy env local env local expose 3000 \# limit node js memory usage for low resource environments env node options=" max old space size=192" cmd \["node", "server js"] dopo aver aggiunto il dockerfile e averlo caricato su github, vai al dashboard delle tue app back4app, fai clic sul dashboard a discesa e seleziona l'opzione web deployment platform nella pagina di distribuzione, fai clic sul pulsante “distribuisci un'app web” e concedi a back4app l'accesso al repository che desideri distribuire seleziona l'app che desideri distribuire, compila i dettagli della distribuzione e fai clic sul pulsante distribuisci cliccando il pulsante inizia il processo di distribuzione e, una volta completato, riceverai un url live per l'app puoi visualizzare il tracker delle spese personali live costruito in questo tutorial utilizzando questo link conclusione in questo articolo, hai costruito un pianificatore di appuntamenti utilizzando il server back4app mcp e windsurf, quindi lo hai distribuito con i contenitori back4app questo mostra l'intera suite di strumenti di back4app che ti consente di passare dall'ideazione al lancio con un sovraccarico minimo come passo successivo, puoi estendere il progetto con funzionalità come la sincronizzazione del calendario, promemoria email automatici o analisi sulle tendenze di prenotazione tutti questi miglioramenti si integrano naturalmente nello stesso flusso di lavoro di back4app progettare e definire nuove classi o funzioni cloud con windsurf assicurarle con i ganci beforesave e distribuire aggiornamenti tramite i contenitori back4app questo approccio ti consente di aggiungere nuove funzionalità alla tua app senza interrompere gli utenti