Come costruire un backend utilizzando il cursore?

i progetti web e mobili moderni spesso si bloccano al primo ostacolo trasformare un'idea in un backend pronto per la produzione progettare manualmente un modello di dati, scrivere logica crud boilerplate, distribuire infrastrutture e poi mantenere il frontend sincronizzato può consumare giorni o settimane di tempo prezioso per gli ingegneri questo tutorial dimostra come la piattaforma backend di back4app, il protocollo model context platform (mcp) e l'ide assistito da ai di cursor insieme eliminano quell'attrito attraverso la creazione di una semplice app di gestione eventi, vedrai come questi strumenti ti permettono di scaffolding, distribuire e integrare un backend completamente funzionale e un frontend corrispondente punti chiave scopri come scaffolding un backend pronto per la produzione su back4app in pochi minuti utilizzando l'agente ai di cursor e il protocollo mcp ottieni informazioni su come applicare un controllo degli accessi basato su ruoli pulito con un helper validateuserrole riutilizzabile che separa nettamente i flussi di lavoro di organizzatore e partecipante scopri come generare e collegare un frontend responsive next js che consuma automaticamente le tue api rest di back4app esplora la containerizzazione e il deployment con un clic con i contenitori di back4app per distribuire la tua app event manager full stack da github in tempi record panoramica del progetto in questo tutorial, costruirai una semplice app di gestione eventi che consente agli utenti di creare eventi, registrarsi per quelli di loro interesse, visualizzare eventi imminenti o registrati e annullare le loro registrazioni quando necessario costruirai il backend di questa app utilizzando lo strumento mcp di back4app lo strumento mcp consente https //en wikipedia org/wiki/large language model come claude 4 sonetto e agenti/strumenti ai come cursor per interagire senza problemi con il tuo backend di back4app con mcp, il tuo assistente di codice ai può creare app, gestire database (operazioni crud, interrogazioni), distribuire codice cloud, gestire l'autenticazione degli utenti e altro ancora nei tuoi progetti back4app per questo tutorial, utilizzerai cursor , un editor di codice potenziato dall'ai che integra modelli di linguaggio di grandi dimensioni per aiutarti a scrivere, rifattorizzare e comprendere il codice all'interno del tuo ambiente di sviluppo con cursor e mcp, puoi richiedere azioni di backend utilizzando il linguaggio naturale, rendendo il processo di sviluppo più veloce e intuitivo impostazione del progetto ora che hai una migliore comprensione di ciò che realizzerai in questo tutorial, procedi e imposta i requisiti del tuo progetto per costruire un backend con cursor e mcp requisiti preliminari per completare questo tutorial, avrai bisogno dei seguenti elementi un account back4app puoi https //www back4app com/signup se non ne hai uno https //www cursor com/ installato sul tuo computer di sviluppo familiarità di base con i concetti di sviluppo backend node js v22 o superiore passo 1 crea un progetto back4app il primo passo è accedere al tuo account back4app e creare un nuovo progetto chiamato “eventmanager ” passo 2 crea una chiave account devi generare una chiave account back4app per configurare mcp all'interno di cursor e concedere l'accesso al server mcp al tuo account back4app vai alle impostazioni delle chiavi del tuo account quando sei lì, dai un nome alla tua chiave account e generane una cliccando sul + pulsante ora dovresti vedere la tua chiave account generata insieme alla sua data di scadenza passo 3 configura mcp all'interno di cursor guarda questo video per imparare come connettere cursor e back4app apri l'app cursor e vai su impostazioni > impostazioni cursor > mcp, dove troverai una pagina per configurare i server mcp in cursor ai clicca sul “ aggiungi nuovo server mcp globale ” pulsante per creare un mcp json file scriverai le tue configurazioni per mcp all'interno di questo file per configurare il server back4app mcp in cursor, incolla le seguenti configurazioni all'interno di mcp json { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } ora sostituisci \<account key> con la chiave dell'account back4app salvata che hai generato nel passaggio 3 se stai seguendo questo tutorial su una macchina windows, cambia il valore della chiave command in npx cmd con queste configurazioni in atto, sei pronto per iniziare a costruire il tuo backend back4app con il back4app mcp e cursor costruisci il backend con cursor e back4app il tuo event manager avrà le seguenti funzionalità; l'utente può creare un nuovo evento l'utente può registrarsi per un evento mostra un elenco di eventi a cui un utente è registrato mostra un elenco degli eventi futuri di un utente l'utente può annullare la registrazione all'evento per soddisfare queste caratteristiche, ecco un esempio di schema di database apri il chat attivando il pannello ai, e procedi a selezionare il modo agente per apportare modifiche alla tua app inoltre, seleziona un llm preferito come il nuovo modello claude 4 sonnet all'interno della casella di chat, scrivi un prompt per generare lo schema progettato un esempio di prompt per ottenere questo è design a back4app backend database for my "event manager" application \ the app allow users to create events or register for created events as an organizer or attendee \ an organizer can then create events for attendees to view, register for and see their registered events \ an attendee can cancel events they previously registered for create the following classes to support these features; user name(string), role (organizer or attendee), email(string) event title(string), location(string), date(date), eventimage(file) and organizer(pointer = user) registration event(pointer = event), attendee(pointer = user), registered(boolean) ensure you create all specified pointer relationships dovrai approvare la richiesta per utilizzare gli strumenti del mcp una volta approvata, la richiesta verrà eseguita dovresti ricevere una risposta che il database è stato creato con successo puoi confermare il successo controllando il tuo dashboard per le classi appena create ora che hai creato il tuo backend e aggiunto le tabelle del database della tua applicazione, implementerai la logica dell'applicazione implementazione delle funzionalità utente con mcp nella descrizione della tua applicazione, questa app dovrebbe consentire a diversi tipi di utenti di eseguire compiti diversi, come creare eventi e registrarsi per essi qui definirai le funzioni costruite per gestire queste funzionalità implementazione dei controlli di accesso la funzione principale dell'app sarà chiamata validateuserrole questa funzione è responsabile della convalida delle funzionalità disponibili per i diversi ruoli utente puoi creare questa funzione con il seguente prompt \ create a utility function inside a new `utils js` file that validates if a function is being called by a user with the required role \ if a user does not have the required role then the function will not continue and throw an error procedi e conferma che utils js è stato creato con validateuserrole crea funzionalità utente per implementare la create user funzionalità, devono essere passati il username , la password , l' email, e il role chiunque può chiamare la funzione implementa la logica per creare un utente utilizzando il prompt qui sotto \ create an asynchronous cloud code function named `createuser` inside the backend's `main js` \ this function creates a user with the following string parameters username, role, email, and password \ the function should validate all input to ensure they conform to expected types and formats before saving \ check if a role was provided, if not, throw an error with a message indicating that a role is required if present, compare the inputed role against the list of valid roles; \["organizer", "attendee"] if inputed role is not valid, throw an error message "select a valid role" if the role is valid, allow the save to proceed as normal \ ensure the user being created/saved does not already exist 'user' by searching through the saved usernames dovresti ricevere una risposta che indica che la funzione è stata creata con successo puoi ora creare nuovi utenti per il tuo event manager crea la funzionalità evento un organizzatore può creare un nuovo evento per fare ciò, la funzione creerà un nuovo oggetto evento e convaliderà che un utente con il ruolo di organizzatore stia chiamando la funzione utilizzerai la funzione di utilità precedentemente creata per ottenere questa convalida implementa questa logica utilizzando il prompt qui sotto create an asynchronous cloud function that allows users to create a new event in the app use the utility function in `utils js` to ensure this can only be called by a user with the organizer role \ this function will take in the following parameters title(string), location(string), date(date), image(file), organizer(pointer) \ the event organizer attribute will have a pointer value to the user that calls the function \ perform proper error handling if the wrong user calls this function or if wrong parameter types are passed la funzione sarà creata all'interno del file main js puoi eseguire un semplice test all'interno di cursor utilizzando dati fittizi e chiamando l'api rest esposta di back4app registrati per la funzione evento per un utente registrarsi a un evento, deve avere il ruolo di partecipante tutti gli utenti con questo ruolo hanno accesso a 3 funzionalità la prima è registrarsi per eventi creati questa funzione crea un nuovo oggetto registrazione e imposta il valore booleano di registrazione su true per l'utente fornisci il seguente prompt o uno simile per ottenere questa logica generate an asynchronous cloud code function called `registerforevent` use the validate role utility function to ensure only users with the attendee role can sucessfully call this \ `registerforevent` will accept 2 paramaters from a request body; `useid` and `eventid` \ the function should validate all paramaters are of the required type and formats expected in the registration class \ the function will register a user to an event by creating a new object in the registration class this object will set "registered" to a boolean type value of true \ upon successfully registering for event, the function should throw an operation sucessfull message successivamente, hai bisogno di una funzione per interrogare tutti gli eventi per cui l'utente è registrato chiameremo questa funzione listupcomingevents crea questa funzione con un prompt come questo create a simple async cloud code function called `listupcomingevents` \ this function will query for all upcoming events a user(attendee) has registered for \ it must only show events with future dates \ perform appropriate error handling if no upcoming registered events are found conferma che la funzione è stata creata con successo all'interno di main js e modifica il codice manualmente o utilizzando i suggerimenti del cursore se necessario nota che in questo prompt, i parametri della funzione non sono stati specificati per l'agente ai di cursor questo dimostra come l'agente utilizzi mcp per dedurre i parametri richiesti da una funzione esaminando lo schema del database tuttavia, è sempre buona pratica fornire il maggior contesto possibile nei tuoi prompt funzione di annullamento registrazione l'ultima funzione per soddisfare i requisiti dell'app è la funzione di annullamento della registrazione per implementare questo, la funzione recupererà l' eventid e userid della registrazione dell'evento selezionato e aggiornerà il suo valore booleano aggiungi la logica sopra alla tua applicazione backend utilizzando un prompt simile a questo create an asynchronous cloud code function called `canceleventregistration` that cancels an event for a user(attendee) when called \ this function is responsible for canceling an event the user is registered for and setting the boolean value of `registration resgistered` in the object to false \ when a users event is sucessfully canceled, delete that registration object from the class and throw a success response \ implement error handling to catch and log any issues during the process, returning a relevant error message in case of failure puoi rivedere tutto il codice creato da cursor e mcp e modificarlo se necessario sul tuo app dashboard → cloud code , come mostrato nell'immagine qui sotto con queste funzionalità, hai ora soddisfatto tutti i requisiti per il backend della tua event manager applicazione costruisci un frontend per il tuo backend con mcp utilizzando cursor ora che il tuo backend è stato costruito e distribuito con successo creerai un'interfaccia utente frontend per la tua app questa interfaccia utente consumerà il tuo backend back4app utilizzando gli endpoint api rest di back4app per fare ciò, il mcp recupererà i metadati dello schema del tuo backend e cursor utilizzerà questi metadati per costruire l'interfaccia utente della tua applicazione con la seguente specifica del prompt build a responsive frontend app in next js that connects and consumes my "event management" backend app this frontend should have the following pages; \ a signup/signin page with a form for new and old users \ a homepage showing all events created in the backend \ if the signed in user has the attendee role the homepage should also show all upcoming registered events for the user \ a register for event page \ be sure to initialize parse properly with event manager `application id` and `javascript key` handle dynamic routing for both user roles and make the ui intuitive questo prompt mira a creare un frontend next js in un solo passaggio puoi sempre richiedere ulteriori modifiche se non sei soddisfatto della generazione di cursor assicurati che parse sia stato correttamente inizializzato con id dell'applicazione e chiave javascript nel caso in cui cursor non riesca a gestirlo queste variabili ti consentono di effettuare richieste all'applicazione backend l'immagine sopra mostra l'applicazione next js generata con un solo comando utilizzando cursor e il mcp di back4app distribuisci la tua applicazione infine, distribuirai la tua applicazione full stack utilizzando la funzione di hosting web di back4apps per distribuire la tua applicazione next js, crea un dockerfile nella directory principale del tuo progetto e incolla il seguente codice all'interno \# stage 1 build the next js app from node 20 alpine as builder workdir /app copy package json package lock json / run npm install copy \# build with default or placeholder env vars arg next public parse application id arg next public parse javascript key arg next public parse server url run npm run build \# stage 2 run the next js app from node 20 alpine workdir /app copy from=builder /app / expose 3000 cmd \["npm", "start"] questo dockerfile fa quanto segue inizia dal runtime ufficiale di node js 14 imposta la directory di lavoro su /app copia package json e package lock json nell'immagine docker e installa le dipendenze copia il restante codice dell'applicazione nell'immagine docker costruisce l'applicazione next js espone la porta 3000 per l'applicazione definisce il comando per avviare l'applicazione avrai anche bisogno di un dockerignore file creane uno nella directory principale del tuo progetto e aggiungi questi comandi \# node modules (reinstalled in docker) node modules \# next js build output next out \# logs npm debug log yarn debug log yarn error log pnpm debug log \# env files (optional — only if you handle secrets another way) env env local env development env production env test \# os / ide / editor junk ds store thumbs db vscode idea \# git git gitignore ora, esegui il seguente comando nel tuo terminale per costruire e testare l'immagine docker docker build t event manager frontend docker run p 3000 3000 event manager frontend troverai la tua immagine docker costruita su http //localhost 3000 se hai verificato che la tua applicazione funziona come previsto, è tempo di caricare il tuo codice su un repository github e distribuirlo tramite back4app apri la tua app event manager sul tuo dashboard di back4app e naviga verso distribuzione web una volta lì, procedi a concedere a back4app l'autorizzazione per visualizzare il tuo repository dell'account e seleziona il repository in cui hai caricato l'app frontend che desideri distribuire assegna un nome al tuo progetto (es event manager) e fai clic sul “distribuisci” pulsante mostrato nell'immagine sopra per distribuire la tua applicazione se la distribuzione ha successo, vedrai un messaggio di successo della distribuzione puoi accedere alla tua applicazione distribuita sul web navigando al link fornito da back4app nella schermata di distribuzione qui sotto congratulazioni, hai distribuito con successo la tua applicazione su back4app puoi visitare il progetto event manager costruito in questo tutorial https //eventmanager3 3jqdnkfk b4a run/ conclusione in questo articolo, hai progettato e distribuito un'app di gestione eventi backend che consente agli utenti di gestire eventi sia come organizzatori che come partecipanti hai anche costruito il frontend per la tua applicazione con next js, utilizzando cursor per accelerare lo sviluppo abbinare l'ambiente di sviluppo potenziato dall'ia di cursor con l'mcp di back4app crea un potente flusso di lavoro di sviluppo che riduce drasticamente i tempi di sviluppo e rende più facile costruire il tuo backend di back4app buon coding!