Come costruire un backend con VS Code?

vs code ti consente di integrare strumenti esterni che hanno un server mcp attivo attraverso il protocollo mcp questo ti consente di eseguire attività 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 una piattaforma di blog utilizzando il https //www back4app com/mcp attraverso vs code e distribuirlo sui contenitori di back4app punti chiave impara come costruire un backend su back4app utilizzando vs code e un server mcp 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 puoi visualizzare il blog live costruito in questo tutorial utilizzando https //blogger 6rhmkal0 b4a run/ requisiti preliminari per seguire questo tutorial, devi avere i seguenti requisiti un account back4app puoi https //www back4app com/signup se non ne hai uno vs code installato sul tuo sistema familiarità di base con i concetti di sviluppo backend panoramica del progetto un blog in questo tutorial, costruirai un semplice blog che ti consente di creare, modificare, visualizzare e eliminare post del blog supporta anche i commenti e tiene traccia del numero di persone che hanno visualizzato i tuoi post del blog in aggiunta alla user tabella fornita per impostazione predefinita su back4app per l'autenticazione, il tuo blog avrà altre tre tabelle post, commenti e visualizzazioni quando un utente del tuo blog crea un account, back4app crea un nuovo record nella user tabella e emette un token di sessione sicuro che puoi riutilizzare nelle richieste successive solo gli utenti autenticati possono quindi pubblicare post quando un post del blog viene pubblicato, sia gli utenti autenticati che quelli non autenticati possono leggere i post; tuttavia, solo gli utenti autenticati possono commentare ogni volta che un post del blog viene recuperato dal database di back4app, il conteggio delle visualizzazioni aumenta; per prevenire possibili abusi di questa funzionalità per gonfiare le visualizzazioni, implementerai alcune misure di protezione attorno ad essa ora che hai un'idea generale di cosa costruirai, nella prossima sezione collegherai vscode al server mcp di back4app collegare vscode al server mcp di back4app naviga sul sito di back4app e clicca sul nuova app pulsante in alto a sinistra della pagina nella schermata “crea un backend”, dai un nome alla tua app e clicca sul crea pulsante nella pagina di panoramica della tua app, clicca sul impostazione mcp pulsante nella finestra modale “seleziona il tuo ide”, clicca su vs code e segui le istruzioni visualizzate sullo schermo per collegare automaticamente vscode al server mcp di back4app se hai seguito l'opzione di installazione automatica, devi riavviare vs code sul tuo computer prima di continuare in alternativa, puoi collegare manualmente il server mcp di back4app (il che ti dà maggiore controllo sulla configurazione) passando la finestra modale alla sezione manuale dopo aver seguito i passaggi indicati nella finestra modale per collegare il server mcp di back4app a vscode, puoi confermare la connessione cliccando sulla barra di ricerca nella finestra di vscode e cercando “>mcp elenca server”, esegui il comando e dovresti vedere un elenco dei server mcp disponibili e il loro stato attuale (in esecuzione/interrotto) ora che hai collegato il server back4app mcp a vscode, nella prossima sezione scriverai i prompt che costruiranno l'intera applicazione costruire il backend del tuo blog per creare il tuo backend utilizzando vscode e github copilot, prima devi attivare la modalità agente su github copilot per attivare la modalità agente, apri la chat di github copilot premendo “ control + command + i” su macos, per windows, premi “ctrl + i” nella pagina della chat, fai clic sul menu a discesa con l'etichetta “chiedi” e seleziona la modalità “agente” successivamente, fornisci a github copilot il prompt qui sotto o simile per creare le classi necessarie per la tua app crea un backend chiamato “blogger” inizia aggiungendo una classe post con i seguenti campi titolo e corpo come stringhe richieste, uno slug unico, un file heroimage opzionale memorizzato nel bucket di back4app, un puntatore autore alla classe user integrata, contatori per commentcount e viewcount (tutti che partono da 0), una stringa di stato limitata a bozza o pubblicato, e una data publishedat impostata automaticamente quando una bozza diventa pubblicata per la prima volta successivamente, crea una classe comment che memorizza la stringa di contenuto, il puntatore autore e il puntatore post aggiungi una classe view che registra ogni visualizzazione della pagina con puntatori utente opzionali e puntatori post richiesti il prompt sopra crea un nuovo backend back4app chiamato “blogger” e lo popola con una classe post, una classe comment e una classe view insieme alle loro proprietà richieste quando esegui questo prompt con copilot, registrerà i passaggi che segue nella tua finestra di chat e ti chiederà il permesso per ciascuno dei passaggi che mutano i tuoi dati per i migliori risultati, esegui questi prompt con un modello premium come 03 mini o claude sonnet 4 dopo che copilot ha creato le classi richieste, ora hai un modo strutturato per memorizzare i dati del tuo blog nella sezione successiva, implementerai l'autenticazione per la tua app implementazione dell'autenticazione i requisiti di autenticazione per la tua app sono semplici, hai bisogno che gli utenti si registrino e accedano per poter creare post sul blog e commentare i post del blog tuttavia, possono leggere i post del blog sulla tua app senza essere autenticati puoi implementare i requisiti di autenticazione per la tua app utilizzando il prompt qui sotto aggiungi l'autenticazione degli utenti a blogger estendendo la classe user integrata ogni account deve fornire un `username`, una `password` di almeno ootto caratteri e un indirizzo `email` prima di ogni salvataggio, il cloud code converte l'email in minuscolo, quindi verifica che nessun altro account la utilizzi già; se l'indirizzo è già in uso, il salvataggio viene rifiutato lo stesso trigger applica anche la regola sulla lunghezza della password esporre quattro funzioni cloud al frontend \ signup accetta un username, un'email e una password crea il 	utente, restituisce il nuovo record e include il token di sessione in modo che il chiamante sia immediatamente autenticato \ login accetta un username o un'email più una password e, in caso di successo, restituisce l'oggetto utente e il token \ logout invalida il token di sessione corrente il prompt sopra aggiunge l'autenticazione degli utenti alla tua app la logica di autenticazione consente ai tuoi utenti di creare un account utilizzando un'email, un username e una password dopo la registrazione, l'utente viene automaticamente autenticato e quando un utente esce, la sua sessione corrente viene invalidata dopo che copilot implementa la tua logica di autenticazione, i tuoi utenti avranno un modo sicuro per registrarsi e accedere nella sezione successiva, implementerai la logica necessaria per creare post e commenti creazione di post e commenti per implementare la funzionalità di creazione di post e commenti, devi creare due funzioni cloud e i ganci di supporto che consentono agli utenti autenticati di pubblicare post e aggiungere commenti in un flusso semplificato inizia creando i ganci di supporto fornendo a copilot il prompt qui sotto o simile estendi l'app blogger aggiungendo un post beforesave hook che converte il titolo di ogni nuovo post in uno slug compatibile con l'url (minuscolo, spazi sostituiti con trattini e simboli rimossi) quindi verifica la classe post per assicurarsi che lo slug sia unico quando il post viene creato, il gancio imposta anche `status` su `"published"` e registra la data corrente in `publishedat` allega un comment aftersave hook che, immediatamente dopo che un commento è memorizzato, incrementa il `commentcount` del post padre per mantenere il totale accurato senza query extra il prompt sopra implementa controlli/azioni eseguiti prima che venga creato un post o un commento per i post, viene generato uno slug unico utilizzando il suo titolo, quindi lo stato cambia in pubblicato e la data corrente viene impostata come data di pubblicazione per i commenti, il post a cui è collegato aggiorna semplicemente il conteggio dei commenti ora, crea le funzioni cloud associate ai ganci beforesave sopra utilizzando il prompt qui sotto o simile esporre due cloud functions per il frontend la prima, createpost, accetta `title`, `body` e un `heroimage` opzionale, richiede che il chiamante sia connesso, assegna il chiamante a `author`, attacca l'immagine se fornita, salva il post e restituisce l'oggetto salvato la seconda, addcomment , richiede autenticazione, prende `postid` e `content`, conferma che il post esista, crea un commento collegato sia al post che al chiamante, lo salva e restituisce il nuevo commento per scoraggiare abusi, limita ogni utente autenticato a cinque chiamate a createpost e quindici chiamate a addcomment al minuto il prompt sopra espone due funzioni di codice cloud che consentono ai tuoi utenti di creare post e commenti protegge anche la tua app dagli abusi limitando a 5 creazioni di post e 15 commenti al minuto la logica principale associata alla creazione dei post e dei commenti è già stata implementata nei ganci beforesave creati nel prompt precedente; questo espone solo un'api per il frontend da consumare dopo che copilot implementa la logica sopra, i tuoi utenti avranno un modo per creare e commentare i post nella sezione successiva, implementerai la logica necessaria per aggiornare quei commenti e post, e anche la logica necessaria per contare le visualizzazioni su ogni post del blog aggiornamento di post, commenti e visualizzazioni per implementare la funzionalità che consente agli utenti di modificare i propri post, rivedere i propri commenti e registrare le visualizzazioni delle pagine, hai bisogno di due funzioni cloud updatepost, updatecomment e un aftertrigger puoi implementare la funzione cloud updatepost utilizzando il prompt qui sotto o simile implementa una funzione cloud, updatepost, che richiede che il chiamante sia connesso e verifica che l'autore del post corrisponda a request user accetta l'objectid del post insieme a qualsiasi nuovo titolo, corpo o heroimage di sostituzione ignora o rifiuta qualsiasi tentativo di fornire un campo di stato; una volta che un post è pubblicato, il suo stato non può cambiare attraverso questo percorso dopo aver caricato il post e confermato la proprietà, applica gli aggiornamenti consentiti e salva se il titolo cambia, fai affidamento sul gancio esistente post beforesave per ricostruire uno slug unico restituisci il post aggiornato al chiamante il prompt sopra crea una funzione che aggiorna un post garantisce che l'aggiornamento possa essere effettuato solo dall'utente che ha creato il post e rigenera lo slug se il titolo viene modificato puoi implementare la funzione cloud updatecomment utilizzando il prompt qui sotto o simile implementa una funzione cloud, updatecomment, che richiede autenticazione, accetta l'objectid del commento e il contenuto rivisto, quindi recupera il commento e conferma che il chiamante sia il suo autore applica il nuovo contenuto e salva; il hook comment aftersave lascia automaticamente invariato commentcount perché il commento esiste già restituisci il commento modificato il prompt sopra crea una funzione che aggiorna il commento di un post l'aggiornamento può essere effettuato solo dal creatore del commento puoi implementare la funzione cloud recordview utilizzando il prompt qui sotto o simile aggiungi un trigger afterfind sulla classe post in modo che ogni volta che il backend restituisce un singolo post tramite `objectid`, registri automaticamente una visualizzazione della pagina se la query è un feed o una ricerca che restituisce più post, il trigger esce senza fare nulla all'interno del trigger, recupera il post da `request results\[0]`, crea un nuovo oggetto view , imposta il suo puntatore `post` su quel post e, quando disponibile, imposta un puntatore `viewer` su `request user`, salva la visualizzazione, chiama `post increment("viewcount")`, salva il post e restituisci `request results` per completare la query originale il prompt sopra crea un trigger afterfind sulla classe post ogni volta che il backend restituisce un singolo post (recuperato tramite il suo objectid), il trigger crea automaticamente un nuovo record view che punta a quel post (e all'utente attuale, se connesso) e incrementa il viewcount del post se la query restituisce più post, il trigger non fa nulla con questo, la maggior parte delle funzionalità del tuo blog è completa successivamente, implementerai la funzionalità che consente agli utenti di eliminare i propri post eliminazione dei post per eliminare un post, un utente deve essere colui che lo ha creato una volta che un post è stato eliminato, tutto il suo contenuto associato (visualizzazioni, commenti) viene eliminato insieme ad esso puoi implementare la funzionalità per eliminare i post utilizzando il prompt qui sotto o simile crea una funzione cloud deletepost in modo che gli autori possano rimuovere il proprio lavoro il chiamante deve essere connesso e deve passare l'objectid del post inizia recuperando il post e confermando che il suo autore è uguale a request user; in caso contrario, rifiuta la richiesta dopo aver verificato la proprietà, elimina il record del post, quindi rimuovi tutti i commenti e le visualizzazioni correlate il cui puntatore post corrisponde al post eliminato infine, restituisci un breve messaggio di successo insieme al numero di record rimossi il prompt sopra implementa la logica necessaria per eliminare i post con queste aggiunte, il tuo backend ora copre l'intero ciclo di vita del contenuto, consentendo agli autori di pubblicare, rivedere ed eliminare, consentendo ai lettori di discutere e mantenendo statistiche di visualizzazione accurate per ogni post nella prossima sezione, genererai un'interfaccia utente per la tua applicazione generazione del tuo frontend puoi sfruttare il contesto che copilot 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 genera un frontend minimale che corrisponda allo schema e implementi tutte le funzionalità dell'applicazione blog sul mio account back4app e collega il frontend al backend utilizzando il javascript parse sdk utilizzando il prompt sopra o simile, copilot genererà un frontend che corrisponde allo schema del tuo backend e lo collegherà al tuo backend esegui l'app utilizzando le istruzioni fornite da copilot e apporta le modifiche che desideri ora che il tuo progetto è completo, nella sezione successiva, lo distribuirai sui contenitori back4app distribuire la tua app sui contenitori back4app i contenitori back4app ti consentono di distribuire le tue app facilmente 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 genera un file docker per l'interfaccia utente della mia applicazione blog oppure potresti utilizzare il dockerfile fornito qui sotto \# inizia dall'immagine ufficiale leggera nginx alpine from nginx\ alpine \# rimuovi il contenuto predefinito run rm rf /usr/share/nginx/html/ \# copia il tuo sito statico (html, css, risorse) nel contenitore copy /usr/share/nginx/html/ \# espone la porta 80 expose 80 \# avvia nginx in primo piano cmd \["nginx", " g", "daemon off;"] 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 distribuisci pulsante cliccando sul pulsante inizia il processo di distribuzione e, una volta completato, riceverai un url live per l'app puoi visualizzare il blog live costruito in questo tutorial utilizzando https //blogger 6rhmkal0 b4a run/ conclusione in questo articolo, hai costruito una piattaforma di blogging completa utilizzando il server back4app mcp e github copilot, quindi l'hai distribuita con i contenitori back4app questo dimostra 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 integrazione dei social media, notifiche email automatiche per nuovi commenti, funzionalità di ricerca avanzata o analisi sull'engagement dei post e sul comportamento dei lettori tutti questi miglioramenti si integrano naturalmente nello stesso flusso di lavoro di back4app progetta e definisci nuove classi o cloud functions con github copilot, proteggile con i beforesave hooks e distribuisci aggiornamenti tramite i contenitori back4app questo approccio ti consente di aggiungere nuove funzionalità al tuo blog senza interrompere gli utenti