Come costruire un backend utilizzando Claude?
18 min
lo sviluppo tradizionale del backend richiede frequentemente una codifica estesa, gestione dell'infrastruttura e significative risorse di sviluppo tuttavia, sfruttare le moderne piattaforme di backend as a service può semplificare notevolmente questo processo back4app semplifica questo processo fornendo un insieme completo di strumenti progettati per accelerare il tuo flusso di lavoro uno di questi strumenti è il protocollo di contesto del modello (mcp) di back4app , che ti consente di costruire un intero backend da un llm come claude utilizzando solo il linguaggio naturale in questo tutorial, imparerai come costruire il backend e l'interfaccia utente (ui) per un tracker di spese personali utilizzando il server mcp di back4app tramite claude e distribuirlo sui contenitori di back4app punti chiave puoi visualizzare il tracker di spese personali dal vivo costruito in questo tutorial utilizzando questo link scopri come creare un backend su back4app in pochi minuti utilizzando i prompt di claude e il server mcp guarda i cloud code hooks in azione mentre garantiscono scritture solo per i proprietari e mantengono i riepiloghi mensili accurati senza infrastruttura extra impara a creare un frontend reattivo che si connette alle tue api parse tramite il javascript sdk, tutto generato da claude esplora il deployment con un clic con i contenitori di back4app, portando il tuo repo github in produzione senza sovraccarico operativo requisiti per seguire questo tutorial, è necessario avere i seguenti requisiti un account back4app puoi registrarti gratuitamente se non ne hai uno claude desktop installato sul tuo sistema familiarità di base con i concetti di sviluppo backend panoramica del progetto tracker delle spese personali costruirai un backend per il tracciamento delle spese che claude può interrogare e aggiornare in tempo reale il tuo tracker delle spese può registrare le tue spese organizzate per categorie e fornisce riepiloghi mensili e annuali delle tue abitudini di spesa il progetto ha 4 modelli di dati utenti questa tabella memorizza le credenziali dell'account e il limite di spesa mensile complessivo per ogni persona i campi includono email, password, budget mensile e timestamp spesa questa tabella memorizza ogni acquisto qui data, importo, categoria e una descrizione categoria questa tabella memorizza le etichette definite dall'utente per raggruppare le spese i campi includono id, user id, nome e timestamp riepiloghi mensili questa tabella memorizza i totali pre aggregati per controlli rapidi del dashboard e del budget i campi includono user id , mese , totale speso , e timestamp ogni volta che registri una spesa, un beforesave trigger del cloud code trova (o crea) il riepilogomensile di quel mese e incrementa i suoi totali e sottrae l'importo dal tuo budget mensile ecco un diagramma di relazione tra entità per aiutarti a visualizzare lo schema ora che hai un'idea generale di cosa costruirai, nella prossima sezione configurerai il server back4app mcp con claude desktop e inizierai a scrivere prompt che creeranno l'app descritta in questa sezione collegare back4app e claude desktop per collegare il server back4app mcp a claude desktop, prima 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 sulla barra di navigazione e seleziona chiavi account nella pagina account keys , dai un nome alla tua chiave dell'account, copia la chiave generata e conservala in modo sicuro successivamente, devi modificare il file di configurazione di claude desktop per includere il server mcp di back4app per impostazione predefinita, il file di configurazione di claude desktop non esiste sul tuo sistema puoi creare il file di configurazione navigando nelle impostazioni di claude desktop sul tuo sistema, selezionando l'opzione developer e facendo clic sul pulsante edit config , oppure puoi seguire questa guida questo creerà un file di configurazione in (se non ne hai già uno) macos /library/application support/claude/claude desktop config json windows %appdata%\\\claude\\\claude desktop config json …e mostrerà il file nel tuo file system apri il file di configurazione con qualsiasi editor di testo a tua scelta e aggiungi la configurazione qui sotto { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } sostituisci \<account key> con la tua chiave dell'account, salva il file e riavvia claude desktop se stai seguendo questo tutorial su un computer windows, cambia il valore della chiave del comando in npx cmd con queste configurazioni in atto, sei pronto per iniziare a costruire il tuo backend di back4app con il server mcp di back4app e claude desktop creare il backend con claude desktop per creare il backend del progetto descritto in precedenza, devi creare una nuova app su back4app e, sull'app, creare le tabelle del database appropriate puoi ottenere questo utilizzando claude desktop e un prompt il tuo prompt dovrebbe istruire claude a creare una nuova applicazione chiamata “personal expense tracker”, definire quattro classi mongodb ( user, category, expense e monthlysummary) con i campi richiesti, relazioni di puntatore, valori predefiniti e controlli di accesso, e incorporare hook di cloud code che aggiornano i riepiloghi mensili ogni volta che una spesa cambia, bloccano scritture non autorizzate e prevengono nomi di categoria duplicati per un utente un esempio di prompt che ottiene questo è fornito di seguito create a new back4app app named “personal expense tracker” class \\\\ user email string, required, unique passwordhash string, required monthlybudget number, required, default 0 (smallest currency unit) add a unique index on email class category user pointer<\\\\ user>, required (owner) name string, required acl public read, owner write add a compound unique index on {user, name} class expense user pointer<\\\\ user>, required category pointer\<category>, optional amount number, required currency string (length 3), required, default “usd” spentat date, required note string, optional isdeleted boolean, required, default false acl public read, owner write add indexes on {user, spentat} and {user, isdeleted} class monthlysummary user pointer<\\\\ user>, required month date, required (store the first day of the month) totalspent number, required acl public read, owner write add a unique index on {user, month} cloud code 1\ aftersave on expense if isdeleted is false, upsert the matching monthlysummary row (month = first day of spentat) and increment totalspent by amount if an expense is soft deleted (isdeleted toggled to true), decrement totalspent accordingly 2\ beforesave on expense reject writes when the authenticated user is not equal to user 3\ beforesave on category enforce the per user unique {user, name} combination create all classes, fields, indexes, clps, and cloud code hooks exactly as specified quando invii il prompt, riceverai una serie di pop up da claude che richiedono il permesso di eseguire compiti specifici, come la creazione dell'app i pop up offrono l'opportunità di rivedere e autorizzare ciascuna azione potenzialmente irreversibile, come la creazione di una nuova app o l'aggiunta di classi, assicurando che nulla venga distribuito, fatturato o esposto senza il tuo esplicito consenso agiscono come una protezione contro modifiche accidentali, assicurando che tu rimanga in controllo delle tue risorse back4app successivamente, implementa l'autenticazione degli utenti nella tua app dando a claude una serie di istruzioni che lo istruiscono ad aggiungere funzioni cloud per la registrazione e il login basate su token, rimuovere l'accesso pubblico alla classe user, mantenere la lettura pubblica ma la scrittura solo per il proprietario su categoria, spesa e riepilogomensile, e creare guardie beforesave che rifiutano qualsiasi scrittura quando la richiesta non è autenticata di seguito è riportato un elenco di esempi di istruzioni per ciascuna funzionalità registrati update the back4app application “personal expense tracker” to include a cloud code function called signupuser inputs email, password, monthlybudget (optional, default 0) if a user with the same email already exists, throw an error otherwise create the user record with those values and return the session token questa istruzione crea il codice cloud per la registrazione accedi update the back4app application “personal expense tracker” to include a cloud code function called loginuser inputs email, password call parse user login with those credentials and return the session token on success questa istruzione crea un login corrispondente per il codice cloud permessi a livello di classe update class level permissions for the personal expense tracker \ keep public read but owner only write on category, expense, and monthlysummary questa istruzione garantisce che solo i proprietari della categoria, spesa e riepilogo mensile possano modificarli eseguire queste istruzioni conclude tutta la tua logica di backend nella sezione successiva, genererai un frontend per il tuo backend generare il frontend poiché claude ha creato il tuo backend back4app, ricorda come appare lo schema e le risposte sfruttando quel contesto, puoi chiedergli di creare un'interfaccia utente che corrisponda allo schema dell'app creata un esempio di prompt è fornito di seguito generate a minimal frontend that matches the schema and implements all the functionality of the personal expense tracker on my back4app account and connect the frontend to the backend using the javascript parse sdk dovresti ottenere un'interfaccia utente completa copia il codice fornito in un ide come vs code e carica il codice su github nella prossima sezione, distribuirai il tuo frontend sui contenitori back4app distribuire la tua app sui contenitori back4app i contenitori back4app ti permettono 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 personal expense tracker oppure puoi utilizzare il dockerfile fornito qui sotto \# start from the official lightweight nginx alpine image from nginx\ alpine \# remove default content run rm rf /usr/share/nginx/html/ \# copy your static site (html, css, assets) into the container copy /src /usr/share/nginx/html/ \# expose port 80 expose 80 \# start nginx in the foreground cmd \["nginx", " g", "daemon off;"] dopo aver aggiunto il dockerfile e averlo caricato su github, vai al tuo cruscotto delle app back4app, fai clic sul cruscotto a discesa e seleziona l'opzione piattaforma di distribuzione web 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'app che tiene traccia delle tue spese utilizzando il server back4app mcp e claude, poi l'hai distribuita utilizzando i contenitori back4app questo dimostra l'intera suite di strumenti di back4app che ti consente di costruire app dall'ideazione al lancio con un sovraccarico minimo come prossimo passo, puoi estendere il progetto con funzionalità come modelli di spese ricorrenti, importazioni csv o notifiche push per sforamenti di budget tutti questi miglioramenti si integrano naturalmente nello stesso flusso di lavoro di back4app definire nuove classi o cloud functions con claude, proteggerle con hook beforesave e distribuire aggiornamenti tramite i contenitori back4app questo approccio ti consente di migliorare la tua app senza interrompere gli utenti o cambiare fornitore di hosting