How to Create a CRUD App with Gatsby?

introduzione in questo tutorial, scoprirai come costruire un'applicazione web crud (crea, leggi, aggiorna, elimina) utilizzando gatsby utilizzeremo back4app come backend cloud per gestire i dati senza sforzo questa guida ti accompagnerà nella configurazione di un progetto back4app, nella definizione di uno schema flessibile e nella connessione della tua app gatsby con chiamate api rest o graphql per eseguire operazioni crud inizialmente, configurerai un progetto back4app chiamato basic crud app gatsby questo progetto ti dà accesso a un robusto database non relazionale progetterai il tuo schema dati creando manualmente classi e campi nel dashboard di back4app o sfruttando l'ai agent di back4app successivamente, utilizzerai l'app admin di back4app—un'interfaccia drag and drop—per gestire senza sforzo le attività di gestione dei dati infine, integrerai la tua applicazione gatsby con l'api di back4app (tramite rest o graphql) per eseguire operazioni crud sicure alla fine di questo tutorial, avrai sviluppato un'app gatsby pronta per la produzione che esegue operazioni crud di base con gestione sicura dei dati e autenticazione degli utenti punti chiave impara a creare un'applicazione crud con gatsby supportata da un backend low code comprendi come strutturare il tuo backend e collegarlo a un sito gatsby moderno utilizza l'intuitiva admin app di back4app per gestire la creazione, lettura, aggiornamento e cancellazione dei dati scopri le opzioni di distribuzione, comprese le strategie di containerizzazione per la tua app gatsby requisiti preliminari prima di iniziare, assicurati di avere un account back4app con un progetto attivo hai bisogno di aiuto? vedi iniziare con back4app https //www back4app com/docs/get started/new parse app un ambiente node js con gatsby cli installato usa node js https //nodejs org/ e installa gatsby tramite npm install g gatsby cli familiarità con react, graphql e rest apis rivedi la documentazione di react https //reactjs org/docs/getting started html se necessario passo 1 – configurare il tuo progetto creare un nuovo progetto back4app accedi al tuo account back4app clicca su “nuova app” dalla tua dashboard dai un nome al tuo progetto basic crud app gatsby e completa i passaggi di configurazione crea nuovo progetto dopo la creazione, il tuo progetto apparirà sulla dashboard, pronto per la configurazione del backend passo 2 – definire il tuo modello di dati configurazione del tuo schema per questa app crud, è necessario impostare diverse classi in back4app di seguito sono riportati esempi delle classi e dei campi essenziali 1\ classe items questa classe memorizza i dettagli su ciascun elemento campo tipo di dato descrizione id objectid identificatore unico generato automaticamente titolo stringa nome dell'oggetto descrizione stringa breve descrizione dell'oggetto creatoil data timestamp quando l'elemento è stato creato aggiornatoil data timestamp dell'ultima aggiornamento dell'elemento 2\ classe utenti questa classe gestisce le credenziali e l'autenticazione degli utenti campo tipo di dato descrizione id objectid id unico generato automaticamente nome utente stringa identificatore unico per l'utente email stringa indirizzo email unico dell'utente hashpassword stringa password crittografata per il login creatoil data timestamp di creazione dell'account aggiornatoa data timestamp dell'ultimo aggiornamento dell'account puoi aggiungere queste classi e campi direttamente nel dashboard di back4app crea nuova classe puoi definire i campi scegliendo un tipo di dato, nominando il campo, impostando i valori predefiniti e contrassegnando i campi obbligatori crea colonna utilizzare l'agente ai di back4app per la generazione dello schema l'agente ai di back4app può costruire automaticamente il tuo schema in base alle tue specifiche questo accelera la configurazione e garantisce che il tuo modello di dati supporti tutte le operazioni crud come utilizzare l'agente ai apri l'agente ai accedi al tuo dashboard di back4app e trova l'agente ai nelle impostazioni del tuo progetto inserisci i tuoi requisiti descrivi le classi e i campi di cui hai bisogno rivedi e applica l'agente suggerirà uno schema rivedilo e conferma per implementarlo esempio di richiesta create the following classes in my back4app project 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) questo approccio assistito dall'ai garantisce uno schema di dati coerente ed efficiente passo 3 – abilitare l'app admin e gestire le operazioni crud panoramica dell'app admin l'app admin di back4app fornisce un'interfaccia senza codice per la gestione dei dati di backend le sue funzionalità intuitive di trascinamento semplificano le operazioni crud come aggiungere, visualizzare, aggiornare ed eliminare record attivare l'app admin vai al menu “altro” nella tua dashboard di back4app seleziona “app admin” e clicca su “abilita app admin ” configura le tue credenziali di amministratore impostando il primo account admin questo passaggio crea anche ruoli (ad es , b4aadminuser ) e classi di sistema abilita app admin una volta attivata, accedi all'app admin per gestire i tuoi dati di backend dashboard app admin utilizzare l'app admin per le operazioni crud all'interno dell'app admin, puoi inserire record usa la funzione “aggiungi record” in una classe (come articoli) per creare nuove voci ispezionare/aggiornare record clicca su qualsiasi voce per visualizzare i dettagli o modificare le informazioni eliminare record rimuovi record obsoleti o non necessari questa interfaccia semplificata rende la gestione dei dati rapida e intuitiva passo 4 – collegare la tua app gatsby a back4app con il tuo backend impostato, la fase successiva è collegare la tua applicazione gatsby a back4app utilizzare le chiamate api in gatsby utilizzeremo chiamate rest o graphql per comunicare con back4app un'altra opzione è utilizzare l'sdk recuperare dati utilizzando rest puoi utilizzare l'api fetch di javascript per recuperare i dati ad esempio, per caricare gli elementi da back4app // src/services/api js export const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); return data results; } catch (error) { console error('error fetching items ', error); return \[]; } }; inviare dati tramite rest per aggiungere un nuovo elemento, utilizza una richiesta post // src/services/api js export const createitem = async (title, description) => { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ title, description }), }); const data = await response json(); return data; } catch (error) { console error('error creating item ', error); } }; puoi implementare in modo simile funzioni di aggiornamento e cancellazione utilizzando i metodi put/post e delete integra queste chiamate api nelle tue pagine o componenti gatsby per gestire i dati in modo dinamico passo 5 – sicurezza del tuo backend implementazione dei controlli di accesso proteggi i tuoi dati impostando le liste di controllo degli accessi (acl) in back4app ad esempio, per creare un elemento visibile solo al suo proprietario // example payload for a private item const privateitem = { title 'private title', description 'this item is private', acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } } }; permessi a livello di classe (clp) imposta i clp nel tuo dashboard di back4app per applicare regole di accesso predefinite, assicurando che solo gli utenti autenticati possano accedere a classi specifiche passo 6 – aggiunta dell'autenticazione utente configurazione degli account utente in gatsby back4app sfrutta la classe utente integrata di parse per l'autenticazione nella tua app gatsby, gestisci la registrazione e il login degli utenti tramite chiamate api esempio registrazione utente // src/services/auth js export const signup = async (username, password, email) => { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ username, password, email }), }); const data = await response json(); return data; } catch (error) { console error('error during sign up ', error); } }; esempio accesso utente // src/services/auth js export const login = async (username, password) => { try { const response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); return data; } catch (error) { console error('login error ', error); } }; questo approccio può essere esteso per gestire sessioni, reset delle password e altro passo 7 – distribuire la tua applicazione gatsby back4app supporta un processo di distribuzione fluido puoi distribuire la tua app gatsby utilizzando diversi metodi, inclusa la containerizzazione 7 1 costruire il tuo sito gatsby installa le dipendenze esegui npm install costruisci il sito usa il comando di build di gatsby gatsby build testa localmente servi la tua build di produzione per verificare la funzionalità gatsby serve 7 2 panoramica della struttura del progetto una tipica struttura di progetto gatsby potrebbe apparire così basic crud app gatsby/ \| node modules/ \| src/ \| | components/ \| | | itemform js \| | | itemlist js \| | pages/ \| | index js \| | login js \| static/ \| gatsby config js \| package json \| readme md 7 3 dockerizzare la tua applicazione gatsby se preferisci distribuzioni containerizzate, aggiungi un dockerfile \# use an official node js image as the base from node 14 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the remaining source code copy \# build the gatsby site run npm run build \# expose port (adjust if needed) expose 8000 \# serve the built site cmd \["npx", "gatsby", "serve", " h", "0 0 0 0"] 7 4 distribuzione tramite back4app web deployment collega il tuo repository ospita il tuo codice sorgente gatsby su github configura la distribuzione nel dashboard di back4app, seleziona web deployment , collega il tuo repository (ad esempio, basic crud app gatsby ), e scegli il ramo imposta i comandi di build specifica il comando di build (ad esempio, npm run build ) e la directory di output distribuisci clicca su distribuisci e monitora i log fino a quando il tuo sito è attivo passo 8 – conclusione e prossimi passi ottimo lavoro! hai costruito un'applicazione crud basata su gatsby integrata con back4app hai impostato un progetto chiamato basic crud app gatsby , definito il tuo modello di dati, gestito i dati con l'admin app e collegato il tuo front end gatsby a back4app utilizzando chiamate api rest/graphql prossimi passi migliora la tua app considera di aggiungere ricerche avanzate, viste dettagliate o aggiornamenti in tempo reale espandi le capacità del backend esplora funzioni cloud, integrazioni api di terze parti o controlli di accesso basati su ruoli raffinati scopri di più visita la documentazione di back4app https //www back4app com/docs per ulteriori approfondimenti e tutorial buon coding e divertiti a costruire la tua applicazione crud gatsby!