Come costruire un backend con VS Code?
25 min
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 server mcp di back4app 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 questo link requisiti preliminari per seguire questo tutorial, devi avere i seguenti requisiti un account back4app puoi iscriverti gratuitamente 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 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 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 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 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 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 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 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 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 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 oppure potresti utilizzare il dockerfile fornito qui sotto 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 questo link 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