Come costruire un'app CRUD con ReactJS?

introduzione in questo tutorial, costruirai un'applicazione crud (crea, leggi, aggiorna e cancella) completa utilizzando reactjs questa guida è progettata per eseguire le operazioni di base di un'applicazione software dimostrando come costruire app crud che gestiscono e aggiornano efficacemente i dati inizierai creando e configurando un progetto back4app chiamato basic crud app reactjs , che funge da robusto sistema backend per la tua applicazione web successivamente, progetterai uno schema di database scalabile definendo collezioni e campi dettagliati—sia manualmente che con l'aiuto dell'agente ai di back4app poi, sfrutterai l'app di amministrazione di back4app—uno strumento di gestione user friendly con un'interfaccia drag and drop—per gestire facilmente i tuoi dati nelle collezioni questa interfaccia di amministrazione migliora l'esperienza dell'utente e semplifica l'interfaccia utente, consentendo agli utenti di eseguire rapidamente operazioni crud infine, distribuirai il tuo frontend reactjs e lo integrerai con back4app utilizzando rest/graphql (o il parse sdk, dove disponibile), il tutto mentre proteggi il tuo backend con controlli di accesso avanzati entro la fine di questa guida, avrai costruito un'applicazione web pronta per la produzione che non solo supporta le operazioni crud di base, ma include anche l'autenticazione degli utenti e robuste capacità di aggiornamento dei dati punti chiave impara a costruire applicazioni crud che gestiscono i dati in modo efficiente utilizzando un sistema di gestione database affidabile acquisisci intuizioni pratiche su come progettare un backend scalabile e integrarlo con un frontend reactjs per migliorare l'esperienza utente scopri come utilizzare uno strumento di gestione drag and drop (l'app back4app admin) per semplificare le operazioni di creazione, lettura, aggiornamento e cancellazione comprendi le tecniche di distribuzione, inclusa la containerizzazione docker, per lanciare rapidamente la tua applicazione web requisiti preliminari prima di iniziare, assicurati di avere quanto segue un account back4app e un nuovo progetto impostato se hai bisogno di aiuto, fai riferimento a iniziare con back4app https //www back4app com/docs/get started/new parse app un ambiente di sviluppo reactjs usa create react app https //create react app dev/docs/getting started/ o uno strumento simile assicurati che node js (versione 14 o superiore) sia installato comprensione di base di javascript, reactjs e rest api rivedi la documentazione di reactjs https //reactjs org/docs/get started html se necessario passo 1 – impostazione del progetto creare un nuovo progetto back4app accedi al tuo account back4app clicca sul pulsante “nuova app” nella tua dashboard inserisci il nome del progetto basic crud app reactjs e segui le istruzioni per creare il tuo progetto crea nuovo progetto una volta creato, il tuo nuovo progetto apparirà sulla tua dashboard di back4app, fornendo una solida base per la configurazione del backend e la gestione del progetto passo 2 – progettazione dello schema del database progettazione del tuo modello di dati per l'app crud di base, creerai diverse collezioni di seguito sono riportati alcuni esempi delle collezioni di cui avrai bisogno, delineando i campi e i tipi di dati necessari per aiutarti a configurare efficacemente lo schema del tuo database queste collezioni sono progettate per eseguire le fondamentali operazioni crud che consentono agli utenti di creare, leggere, aggiornare ed eliminare dati 1\ collezione degli elementi questa collezione memorizza informazioni su ciascun elemento campo tipo di dati descrizione id objectid chiave primaria generata automaticamente titolo stringa il titolo dell'elemento descrizione stringa una breve descrizione dell'oggetto creato il data timestamp quando l'elemento è stato creato aggiornato a data timestamp dell'ultima aggiornamento dell'elemento 2\ raccolta utenti questa collezione memorizza le informazioni degli utenti e i dettagli di autenticazione campo tipo di dato descrizione id objectid chiave primaria generata automaticamente nome utente stringa nome utente unico per l'utente email stringa indirizzo email unico hash password stringa password hash per l'autenticazione creato il data timestamp quando è stato creato l'account utente aggiornato a data timestamp quando l'account utente è stato aggiornato puoi impostare queste collezioni manualmente nel dashboard di back4app creando una nuova classe per ogni collezione e aggiungendo colonne per definire i campi crea nuova classe puoi facilmente creare campi per il tuo database selezionando un tipo di dato, nominando il campo, impostando un valore predefinito e definendo se è obbligatorio crea colonna utilizzare l'agente ai di back4app per la generazione di schemi l'agente ai di back4app è uno strumento potente disponibile direttamente dal tuo dashboard di back4app consente di generare automaticamente lo schema del database in base a un prompt che descrive le collezioni e i campi desiderati questa funzionalità è un notevole risparmio di tempo per la gestione dei progetti e aiuta a garantire che il sistema di gestione del database sia configurato per eseguire le operazioni di base richieste dalla tua applicazione web come utilizzare l'agente ai apri l'agente ai accedi al tuo dashboard di back4app e individua l'agente ai nel menu o nelle impostazioni del tuo progetto descrivi il tuo modello di dati nell'interfaccia dell'agente ai, incolla un prompt dettagliato che delinea le collezioni e i campi di cui hai bisogno rivedi e applica una volta inviato, l'agente ai genererà le collezioni e le definizioni dei campi rivedi queste proposte e applicale al tuo progetto esempio di prompt create the following collections in my back4app application 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) utilizzare l'agente ai in questo modo fa risparmiare tempo e garantisce che il tuo schema sia coerente e ottimizzato per le esigenze della tua applicazione passaggio 3 – abilitazione dell'app admin e operazioni crud panoramica dell'app admin l'app admin di back4app è un'interfaccia potente e senza codice che ti consente di gestire i tuoi dati di backend questo strumento di gestione fornisce un'interfaccia utente drag and drop che consente agli utenti di eseguire facilmente operazioni crud come creare, leggere, aggiornare ed eliminare record abilitazione dell'app admin naviga nel menu “altro nel tuo dashboard di back4app clicca su “app admin” e poi su “abilita app admin ” configura le tue credenziali admin creando il tuo primo utente admin questo processo imposta anche i ruoli (ad es , b4aadminuser ) e le collezioni di sistema abilita app admin dopo aver abilitato, accedi all'app admin per gestire i tuoi dati dashboard dell'app admin utilizzare l'app admin per le operazioni crud all'interno dell'app admin puoi creare record fai clic sul pulsante “aggiungi record” all'interno di una collezione (ad es , articoli) per creare nuove voci leggere/aggiornare record seleziona qualsiasi record per visualizzarne i dettagli o modificare i campi, garantendo un aggiornamento dei dati fluido eliminare record usa l'opzione di eliminazione per rimuovere i record che non sono più necessari questo strumento di gestione facile da usare migliora l'esperienza complessiva dell'utente fornendo un'interfaccia semplice di trascinamento e rilascio per le funzioni crud passo 4 – integrare reactjs con back4app ora che il tuo backend è impostato e gestito tramite l'app admin, è tempo di collegare il tuo frontend reactjs a back4app opzione a utilizzare il parse sdk installa il parse sdk npm install parse inizializza parse nella tua app react crea un file (ad esempio, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // sostituisci con le tue credenziali back4app reali parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; usa parse in un componente react ad esempio, crea un componente per recuperare e visualizzare gli elementi // src/components/itemslist js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("errore nel recupero degli elementi ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>elementi\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; opzione b utilizzare rest o graphql se il tuo ambiente non supporta il parse sdk, puoi eseguire operazioni crud utilizzando rest o graphql ad esempio, per recuperare elementi utilizzando rest // example rest call to fetch items 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(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integra queste chiamate api nei tuoi componenti react secondo necessità passo 5 – sicurezza del tuo backend liste di controllo degli accessi (acl) proteggi i tuoi dati assegnando acl agli oggetti ad esempio, per creare un elemento privato async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl only the owner can read and write const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } permessi a livello di classe (clp) nel dashboard di back4app, configura i clp per ogni collezione per impostare le regole di accesso predefinite questo assicura che solo gli utenti autenticati o autorizzati possano accedere ai dati sensibili passo 6 – autenticazione utente impostazione degli account utente back4app sfrutta la classe user di parse per l'autenticazione nella tua app react, gestisci la registrazione e il login degli utenti come segue // src/components/auth js import react, { usestate } from 'react'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user signed up successfully!'); } catch (error) { alert('error signing up ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; un approccio simile può essere utilizzato per il login e la gestione delle sessioni funzionalità aggiuntive come i login social, la verifica dell'email e il ripristino della password possono essere configurate nel dashboard di back4app passo 7 – distribuire il tuo frontend reactjs con web deployment la funzionalità di web deployment di back4app ti consente di ospitare il tuo frontend reactjs senza problemi distribuendo il tuo codice da un repository github in questa sezione, imparerai come preparare la tua build di produzione, impegnare il tuo codice sorgente su github, integrare il tuo repository con web deployment e distribuire il tuo sito 7 1 prepara la tua build di produzione apri la cartella del tuo progetto in un terminale esegui il comando di build npm run build questo comando crea una build cartella contenente tutti i file statici ottimizzati (inclusi index html , javascript, css e immagini) verifica la build assicurati che la build cartella contenga un index html file insieme alle necessarie sottodirectory di asset 7 2 organizza e carica il tuo codice sorgente il tuo repository dovrebbe includere il codice sorgente completo per il tuo frontend reactjs una struttura di file tipica potrebbe apparire così basic crud app reactjs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md esempi di file di codice sorgente src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; \#### commit your code to github 1\ initialize a git repository in your project folder (if you haven’t already) ```bash git init aggiungi i tuoi file sorgente git add esegui il commit delle tue modifiche git commit m "commit iniziale del codice sorgente del frontend reactjs" crea un repository github ad esempio, crea un repository chiamato basic crud app reactjs frontend su github invia il tuo codice a github git remote add origin https //github com/your username/basic crud app reactjs frontend git git push u origin main 7 3 integra il tuo repository github con il web deployment accedi al web deployment accedi al tuo dashboard di back4app, naviga al tuo progetto (basic crud app reactjs) e clicca sulla funzione web deployment collegati a github se non lo hai già fatto, integra il tuo account github seguendo le istruzioni sullo schermo questa connessione consente a back4app di accedere al tuo repository seleziona il tuo repository e branch scegli il repository che hai creato (ad esempio, basic crud app reactjs frontend ) e seleziona il branch (ad esempio, main ) che contiene il tuo codice reactjs 7 4 configura il tuo deployment fornisci ulteriori dettagli di configurazione comando di build se il tuo repository non include una build precompilata, specifica il comando di build (ad es , npm run build ) back4app eseguirà questo comando durante il deployment directory di output imposta la directory di output su build in modo che back4app sappia quale cartella contiene i file del tuo sito statico variabili di ambiente se la tua applicazione dipende da variabili di ambiente (ad es , chiavi api), aggiungile nelle impostazioni di configurazione 7 5 dockerizza il tuo progetto di applicazione reactjs se preferisci utilizzare docker per il deployment, puoi containerizzare la tua applicazione reactjs includi un dockerfile nel tuo repository con contenuti simili ai seguenti \# use an official node runtime as a parent image from node 16 alpine as build \# set the working directory workdir /app \# copy package json and package lock json copy package json / \# install dependencies run npm install \# copy the rest of the application copy \# build the react app run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] includi questo dockerfile nel tuo repository poi, nella tua configurazione di distribuzione web, seleziona l'opzione di distribuzione docker per costruire e distribuire la tua applicazione containerizzata 7 6 distribuisci la tua applicazione clicca sul pulsante di distribuzione una volta configurate le impostazioni di distribuzione, clicca sul distribuisci pulsante monitora il processo di costruzione back4app preleverà il tuo codice da github, eseguirà il comando di costruzione (se configurato) e distribuirà la tua app all'interno di un container ottieni il tuo url dopo il completamento della distribuzione, back4app fornirà un url dove è ospitata la tua applicazione reactjs 7 7 verifica la tua distribuzione visita l'url fornito apri l'url nel tuo browser per visualizzare il tuo sito distribuito testa l'applicazione verifica che la tua applicazione si carichi correttamente, che tutte le rotte funzionino come previsto e che tutte le risorse (css, javascript, immagini) siano servite correttamente risolvi i problemi se necessario usa gli strumenti per sviluppatori del tuo browser per controllare eventuali errori se si verificano problemi, rivedi i log di distribuzione in back4app e verifica l'integrazione con github e le impostazioni di costruzione passo 8 – conclusione e prossimi passi congratulazioni! hai costruito un'app crud di base completa utilizzando reactjs e back4app hai configurato un progetto chiamato basic crud app reactjs , progettato collezioni di database dettagliate per articoli e utenti, e gestito i tuoi dati tramite il potente admin app hai anche integrato il tuo frontend reactjs con il tuo backend e protetto i tuoi dati con controlli di accesso robusti prossimi passi migliora il tuo frontend estendi la tua app reactjs con funzionalità come visualizzazioni dettagliate degli articoli, funzionalità di ricerca e notifiche in tempo reale integra funzionalità aggiuntive considera di aggiungere logica backend più avanzata (ad es , cloud functions), integrazioni api di terze parti o controlli di accesso basati sui ruoli esplora risorse aggiuntive rivedi la documentazione di back4app https //www back4app com/docs e tutorial aggiuntivi per approfondimenti sull'ottimizzazione delle prestazioni e integrazioni personalizzate seguendo questo tutorial, ora hai le competenze per creare un backend crud robusto e scalabile per la tua applicazione reactjs utilizzando back4app buon coding!