Come costruire un backend per Gatsby?

introduzione in questo tutorial, imparerai come costruire un backend per gatsby utilizzando back4app ti mostreremo come integrare le funzionalità di back4app—come la gestione del database, le funzioni cloud code, rest api e capacità di query graphql , autenticazione degli utenti e query in tempo reale (live queries)—per creare un backend sicuro, scalabile e robusto che può essere accessibile dal tuo sito gatsby vedrai anche come la configurazione rapida di back4app e l'ambiente intuitivo possono ridurre drasticamente il tempo e lo sforzo necessari per gestire i compiti di backend alla fine, saprai esattamente come costruire un backend per gatsby che memorizza e recupera dati, gestisce l'autenticazione, integra funzioni cloud e altro ancora questo ti prepara a incorporare facilmente logica personalizzata, aggiungere api di terze parti o espandere il tuo modello di dati senza doverti preoccupare della manutenzione tradizionale del server cosa costruirai e perché è prezioso integrazione completa del backend creerai una struttura di backend scalabile per il tuo sito gatsby, incorporando parse sdk, che è perfetto per le esigenze di dati dinamici risparmio di tempo back4app fornisce strumenti come l'ai agent, query in tempo reale e lavori cloud che accelerano la creazione del backend competenze estensibili dopo aver finito, sarai in grado di adattare questi concetti per funzionalità gatsby più avanzate, come creare pagine al momento della costruzione o collegarsi a funzioni serverless per operazioni dinamiche requisiti un account back4app e un nuovo progetto back4app iniziare con back4app https //www back4app com/docs/get started/new parse app se non hai un account, puoi crearne uno gratuitamente segui la guida sopra per preparare il tuo progetto ambiente di sviluppo gatsby di base puoi configurarlo installando il gatsby cli https //www gatsbyjs com/docs/tutorial/part 0/#install gatsby cli e eseguendo node js (versione 14 o superiore) installato installare node js https //nodejs org/en/download/ familiarità con javascript e i concetti di gatsby documentazione ufficiale di gatsby https //www gatsbyjs com/docs/ leggi la documentazione o un tutorial per principianti se sei nuovo in gatsby assicurati di avere questi requisiti impostati questo garantisce un'esperienza fluida mentre crei un nuovo file per la configurazione o esegui query graphql nel tuo ambiente gatsby passo 1 – impostare il progetto back4app crea un nuovo progetto il primo passo in come costruire un backend per gatsby su back4app è creare un nuovo progetto se non lo hai già fatto accedi al tuo account back4app clicca sul pulsante “nuova app” nella tua dashboard dai un nome alla tua app (ad esempio, “gatsby backend tutorial”) dopo aver creato il progetto, apparirà nel tuo dashboard di back4app useremo questo progetto come il nucleo del nostro backend collegare il parse sdk back4app utilizza la parse platform per gestire i tuoi dati, offrire funzionalità in tempo reale, gestire l'autenticazione degli utenti e altro ancora per gatsby, puoi ancora npm install parse e poi integrarlo nei tuoi file sorgente recupera le tue chiavi parse nel tuo dashboard di back4app, trova il tuo application id e javascript key , tipicamente sotto “impostazioni app” o “sicurezza e chiavi ” troverai anche il parse server url (spesso qualcosa come https //parseapi back4app com ) installa il parse sdk nel tuo sito gatsby npm install parse crea un parseconfig js nella directory principale del tuo progetto gatsby o all'interno di src/ src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; ogni volta che importi parse da parseconfig js nei tuoi file gatsby (ad esempio, in gatsby node js , gatsby browser js , o pagine/componenti), avrai un'istanza preconfigurata pronta per effettuare query al tuo backend di back4app passo 2 – configurazione del database creazione di un modello di dati in back4app, i dati sono gestiti come “classi” (simili a tabelle) con campi per i tuoi dati creiamo una classe “todo” per dimostrazione mostreremo alcuni modi in cui puoi salvare e recuperare dati in gatsby con parse naviga nella sezione “database” nel tuo dashboard di back4app crea una nuova classe (ad esempio, “todo”) e aggiungi colonne come titolo (string) e iscompleted (boolean) oppure puoi lasciare che parse crei automaticamente colonne quando gli oggetti vengono salvati per la prima volta dal tuo codice creare un modello di dati con l'agente ai back4app fornisce un agente ai per aiutarti a definire la tua struttura dati apri l'agente ai dal tuo dashboard dell'app o dal menu descrivi il tuo modello di dati (ad esempio, “per favore crea un nuovo schema dell'app todo con un titolo e uno stato di completamento ”) lascia che l'agente ai generi lo schema per te leggere e scrivere dati utilizzando sdk un frammento di esempio in gatsby potrebbe apparire così (ad esempio, in una pagina basata su react o in gatsby browser js ) import parse from ' /parseconfig'; async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } lettura e scrittura dei dati utilizzando l'api rest in alternativa, puoi interagire con il database tramite l' api rest curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo lettura e scrittura dei dati utilizzando l'api graphql back4app supporta anche un' api graphql , quindi puoi eseguire query o mutazioni come mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } questo è particolarmente conveniente se vuoi che il tuo sito gatsby estragga dati tramite query graphql al momento della costruzione lavorare con le query live gatsby è un generatore di siti statici, ma puoi comunque impostare connessioni dinamiche in tempo reale utilizzando parse live queries questo può essere utile nel codice eseguito nel browser o nei tuoi stessi hook senza server abilita le query live nel tuo dashboard di back4app (sotto impostazioni del server) aggiungi l'url del server delle query live a parseconfig js parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; iscriviti a una classe per notifiche in tempo reale async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { callback('create', newtodo); }); subscription on('update', (updatedtodo) => { callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { callback('delete', deletedtodo); }); return subscription; } questo invierà aggiornamenti di dati in tempo reale al front end del tuo progetto gatsby passo 3 – applicare la sicurezza con acl e clp cosa sono acl e clp? le acl (liste di controllo degli accessi) ti permettono di definire permessi su singoli oggetti, mentre le clp (permessi a livello di classe) si applicano a intere classi nel tuo database di back4app impostare i permessi a livello di classe vai a database nel tuo back4app dashboard seleziona la classe (ad esempio, todo ) clicca sulla class level permissions scheda configura se la classe è leggibile pubblicamente, richiede autenticazione o è riservata a determinati ruoli utilizzare le acl nel codice nel tuo codice gatsby, puoi definire le acl per ogni nuovo oggetto async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } passo 4 – scrivere funzioni cloud code perché cloud code? con cloud code, puoi aggiungere logica personalizzata lato server al tuo backend back4app questo è ottimo per le regole aziendali, rest api trasformazioni, trigger o validazioni dei dati che potresti voler mantenere sicure e lontane dal lato client esempio di funzione cloud // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); distribuzione del cloud code via back4app cli installa e configura il cli, poi esegui b4a deploy via dashboard vai a cloud code > functions nel tuo dashboard, incolla il tuo codice in main js , e clicca deploy chiamare la tua funzione da gatsby/parse sdk import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } passo 5 – configurazione dell'autenticazione classe utente parse back4app utilizza la parse user classe per l'autenticazione per impostazione predefinita, gestisce l'hashing delle password, le sessioni e lo storage sicuro registrazione e accesso in gatsby import parse from ' /parseconfig'; // signup async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } // login async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } dopo aver effettuato l'accesso, puoi chiamare parse user current() per controllare se un utente è connesso accesso sociale puoi integrare google , facebook , apple , e altri provider con configurazioni aggiuntive leggi di più nella documentazione accesso sociale https //www back4app com/docs/platform/sign in with apple passo 6 – gestione dello storage dei file caricamento file usa parse file per caricare immagini o altri file ad esempio, in un componente gatsby async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } puoi quindi allegare questo file a un oggetto parse, memorizzarlo e successivamente recuperare l'url del file per visualizzarlo nel tuo sito gatsby passo 7 – verifica email e ripristino password perché è importante la verifica dell'email conferma l'indirizzo email dell'utente e i flussi di reimpostazione della password migliorano l'esperienza dell'utente entrambi sono facilmente configurabili in back4app naviga alle impostazioni email della tua app nel dashboard abilita la verifica dell'email e imposta il modello di email per la reimpostazione della password usa i metodi del parse sdk (ad es , parse user requestpasswordreset(email) ) per attivare le email di reimpostazione passo 8 – pianificazione dei compiti con cloud jobs panoramica dei cloud jobs usa cloud jobs per automatizzare compiti ricorrenti, come rimuovere dati obsoleti o inviare riepiloghi giornalieri ad esempio // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); poi pianificalo sotto impostazioni app > impostazioni server > lavori in background passo 9 – integrazione dei webhook i webhook consentono alla tua app back4app di inviare richieste http a servizi esterni quando si verificano eventi specifici, come la creazione di un nuovo record vai a la tua dashboard di back4app > altro > webhooks aggiungi un nuovo webhook , specificando l'url dell'endpoint per un servizio esterno seleziona cosa attiva il webhook (ad esempio, aftersave sulla classe todo) puoi anche integrare con slack o gateway di pagamento aggiungendo il corretto endpoint passo 10 – esplorare il pannello di amministrazione di back4app l' admin app di back4app è un'interfaccia centrata sul modello per la gestione dei dati puoi dare accesso sicuro agli utenti non tecnici per eseguire operazioni crud sulle tue classi abilitare l'admin app vai a app dashboard > altro > admin app e clicca su “abilita admin app ” poi crea un utente admin e scegli un sottodominio per l'interfaccia admin ora puoi accedere alla tua admin app per visualizzare e modificare i dati senza scrivere codice conclusione in questo tutorial, hai scoperto come costruire un backend per gatsby utilizzando back4app hai imparato a configurare un database sicuro con classi, campi personalizzati e relazioni utilizzare il parse sdk , insieme a rest api e opzioni di query graphql , per le transazioni di dati impostare acl e clp per la sicurezza dei dati scrivere e distribuire cloud code per estendere la logica aziendale e i trigger gestire l'autenticazione degli utenti con registrazione, accesso, ripristino della password e verifica dell'email gestire lo storage dei file per immagini e documenti pianificare attività automatizzate con cloud jobs integrare servizi esterni tramite webhooks sfruttare l'admin app per una facile amministrazione dei dati con queste competenze, il tuo sito gatsby può sfruttare potenti funzionalità dinamiche pur continuando a beneficiare del rendering statico di gatsby da qui, puoi espandere il tuo modello di dati e aggiungere logica aziendale avanzata integrare più api esterne per una piattaforma veramente completa segui la documentazione ufficiale di back4app per approfondimenti su sicurezza, prestazioni e analisi sperimenta con le funzionalità di build time di gatsby —ad esempio, “ creare pagine ” da dati dinamici o impostare un “ gatsby source ” plugin per il tuo backend back4app ora hai una solida base per costruire app data driven a prova di futuro con gatsby e back4app