Building a CRUD App with Inferno.js: A Comprehensive Walkthrough

panoramica questa guida ti mostrerà come costruire un'applicazione crud (crea, leggi, aggiorna, elimina) completa utilizzando inferno js imparerai a gestire operazioni fondamentali sui dati sviluppando un sistema crud che manipola e aggiorna le informazioni in modo efficiente la nostra base backend è alimentata da back4app, dove stabilirai un progetto chiamato basic crud app infernojs per gestire i tuoi dati senza problemi inizialmente, configurerai il tuo progetto back4app e progetterai uno schema di database scalabile definendo classi e campi—sia manualmente che con l'ai assistant di back4app questo processo garantisce che le tue strutture dati siano abbastanza robuste per tutte le operazioni crud successivamente, utilizzerai l'interfaccia admin di back4app, uno strumento drag and drop senza codice che rende la gestione dei dati semplice infine, collegherai il tuo frontend inferno js con back4app utilizzando il sdk (se si adatta alla tua configurazione) o tramite chiamate api, il tutto impiegando rigorosi controlli di accesso per la sicurezza alla fine di questo tutorial, avrai un'applicazione web a livello di produzione con autenticazione utente, gestione dinamica dei dati e un'interfaccia reattiva approfondimenti fondamentali masterizza le funzionalità crud con un backend robusto su back4app comprendi come architettare uno schema di database scalabile e integrarlo con il tuo frontend inferno js esplora uno strumento di gestione visiva per eseguire senza sforzo operazioni di creazione, lettura, aggiornamento e cancellazione impara le strategie di distribuzione, inclusa la containerizzazione con docker requisiti un account back4app e un progetto appena creato se hai bisogno di guida, dai un'occhiata a iniziare con back4app https //www back4app com/docs/get started/new parse app un setup di sviluppo inferno js usa il tuo starter o boilerplate inferno preferito conferma che node js (versione 14 o superiore) sia installato una comprensione di base di javascript, inferno js e dei principi delle api rest per ulteriori dettagli, consulta la documentazione di inferno https //infernojs org/docs/introduction prima di immergerti, assicurati di avere passo 1 – inizializzare il tuo progetto avviare un nuovo progetto back4app accedi al tuo account back4app seleziona l'opzione “nuova app” dalla tua dashboard nomina il tuo progetto basic crud app infernojs e segui i passaggi sullo schermo per completare la creazione crea nuovo progetto dopo la creazione, il tuo progetto appare nella tua dashboard, fornendo una solida piattaforma backend per la tua app passo 2 – creare lo schema del database definire il tuo modello di dati per questa applicazione crud, stabilirai diverse classi di seguito sono riportati esempi di due classi essenziali con i loro campi, impostati per supportare le operazioni crud 1\ la classe degli oggetti campo tipo dettagli id objectid chiave primaria generata automaticamente titolo stringa il titolo dell'oggetto descrizione stringa una breve spiegazione dell'oggetto creato il data timestamp che segna quando l'elemento è stato creato aggiornato a data timestamp per l'aggiornamento più recente 2\ la classe utenti campo tipo dettagli id objectid chiave primaria generata automaticamente nome utente stringa identificatore unico per l'utente email stringa indirizzo email unico dell'utente hash password stringa password crittografata per un'autenticazione sicura creato il data timestamp per la creazione dell'account aggiornato a data timestamp per l'ultimo aggiornamento dell'account crea manualmente queste classi nel pannello di controllo di back4app selezionando “nuova classe” e aggiungendo le colonne necessarie crea nuova classe puoi definire ogni campo selezionando un tipo di dato, fornendo un nome e impostando valori predefiniti o requisiti crea colonna sfruttare l'assistente ai di back4app per la configurazione dello schema l'assistente ai di back4app semplifica la creazione dello schema generando automaticamente classi basate sulle tue descrizioni come utilizzare l'assistente ai accedi all'assistente ai accedi al tuo dashboard di back4app e trova l'assistente ai nelle impostazioni dettaglia il tuo modello dati inserisci una descrizione completa delle classi e dei campi di cui hai bisogno rivedi e implementa l'assistente proporrà definizioni di classe conferma e applica queste impostazioni esempio di richiesta create the following classes in my back4app app 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto set) \ updated at date (auto update) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto set) \ updated at date (auto update) utilizzare l'assistente ai semplifica la tua configurazione, garantendo coerenza ed efficienza passo 3 – attivazione dell'interfaccia admin e funzioni crud introduzione all'interfaccia admin l'interfaccia admin di back4app è uno strumento potente, senza codice, che offre un'esperienza di trascinamento e rilascio per gestire il tuo backend ti consente di eseguire senza sforzo operazioni crud attivazione dell'interfaccia di amministrazione vai alla sezione “altro” nel tuo dashboard di back4app clicca su “admin app” e poi premi “abilita admin app ” configura il tuo account admin creando il tuo utente admin iniziale questo processo configura automaticamente ruoli e classi di sistema essenziali abilita admin app dopo aver abilitato, accedi all'interfaccia di amministrazione per gestire i tuoi dati dashboard dell'admin app esecuzione di crud tramite l'interfaccia di amministrazione all'interno dell'interfaccia di amministrazione, puoi crea voci usa l'opzione “aggiungi record” all'interno di una classe (come articoli) per inserire nuovi dati leggi/modifica voci clicca su qualsiasi record per visualizzarne o aggiornarne i dettagli rimuovi voci utilizza la funzione di eliminazione per rimuovere record indesiderati questa interfaccia migliora notevolmente l'usabilità semplificando tutte le operazioni crud passo 4 – collegare inferno js con back4app con il tuo backend configurato tramite l'interfaccia di amministrazione, è tempo di integrare il tuo frontend inferno js opzione a utilizzare il parse sdk installa il parse sdk npm install parse inizializza parse nella tua app inferno crea un file di configurazione (ad esempio, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // inserisci qui le tue credenziali back4app parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; implementa parse in un componente inferno ad esempio, costruisci un componente per recuperare e elencare gli elementi // src/components/itemslist js import { component } from 'inferno'; import parse from ' /parseconfig'; class itemslist extends component { constructor(props) { super(props); this state = { items \[] }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("errore nel caricamento degli elementi ", err); } } render() { return ( \<div> \<h2>elementi\</h2> \<ul> {this state items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); } } export default itemslist; opzione b utilizzo delle api rest o graphql se il parse sdk non è ideale per il tuo scenario, puoi eseguire azioni crud tramite rest o graphql ad esempio, per recuperare elementi con rest // rest api call to retrieve 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('items retrieved ', data results); } catch (err) { console error('error fetching items ', err); } }; fetchitems(); incorpora queste chiamate api all'interno dei tuoi componenti inferno secondo necessità passo 5 – rafforzare il tuo backend implementazione delle liste di controllo degli accessi (acl) assicurati la sicurezza dei dati assegnando acl ad esempio, per generare un elemento privato async function createprivateitem(itemdata, owner) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (err) { console error('error creating item ', err); } } configurazione delle autorizzazioni a livello di classe (clp) all'interno del tuo dashboard di back4app, regola le clp per ciascuna classe per imporre politiche di accesso predefinite, assicurandoti che solo gli utenti autorizzati possano interagire con i dati sensibili passo 6 – gestione dell'autenticazione degli utenti creazione di account utente back4app utilizza la classe utente (tramite parse) per gestire l'autenticazione nella tua app inferno js, implementa le funzioni di registrazione e accesso come illustrato di seguito // src/components/auth js import { component } from 'inferno'; import parse from ' /parseconfig'; export class signup extends component { constructor(props) { super(props); this state = { username '', password '', email '' }; } handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', this state username); user set('password', this state password); user set('email', this state email); try { await user signup(); alert('registration successful!'); } catch (err) { alert('sign up error ' + err message); } }; render() { return ( \<form onsubmit={this handlesignup}> \<input type="text" placeholder="username" value={this state username} oninput={e => this setstate({ username e target value })} /> \<input type="password" placeholder="password" value={this state password} oninput={e => this setstate({ password e target value })} /> \<input type="email" placeholder="email" value={this state email} oninput={e => this setstate({ email e target value })} /> \<button type="submit">sign up\</button> \</form> ); } } una strategia simile si applica per il login e la gestione delle sessioni funzionalità aggiuntive come l'autenticazione sociale, la verifica dell'email e il recupero della password possono essere impostate nel dashboard di back4app passo 7 – distribuzione del tuo frontend inferno js l'opzione di distribuzione web di back4app ti consente di ospitare il tuo frontend inferno js senza sforzo collegando il tuo repository github 7 1 costruire per la produzione apri la directory del tuo progetto in un terminale esegui il comando di build per la produzione npm run build questo comando compila la tua applicazione in una build cartella contenente asset statici ottimizzati conferma la build verifica che la build cartella includa un index html file e altre cartelle di asset 7 2 organizzazione e caricamento del tuo codice il tuo repository dovrebbe includere il codice sorgente completo del tuo frontend inferno js un esempio di struttura delle directory basic crud app infernojs frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parseconfig js \| ` components/ \| | itemslist js \| ` auth js \| package json ` readme md file di esempio src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { component } from 'inferno'; import parse from ' /parseconfig'; class app extends component { constructor(props) { super(props); this state = { items \[], newtitle "", newdescription "", editid null, edittitle "", editdescription "" }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error loading items ", err); } } handleadd = async () => { const items = parse object extend("items"); const item = new items(); item set("title", this state newtitle); item set("description", this state newdescription); try { await item save(); this setstate({ newtitle "", newdescription "" }); this loaditems(); } catch (err) { console error("error adding item ", err); } } handledelete = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (err) { console error("error deleting item ", err); } } startedit = (item) => { this setstate({ editid item id, edittitle item get("title"), editdescription item get("description") }); } handleupdate = async () => { try { const items = parse object extend("items"); const item = new items(); item id = this state editid; item set("title", this state edittitle); item set("description", this state editdescription); await item save(); this setstate({ editid null, edittitle "", editdescription "" }); this loaditems(); } catch (err) { console error("error updating item ", err); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this state newtitle} oninput={e => this setstate({ newtitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={this state newdescription} oninput={e => this setstate({ newdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleadd}>add item\</button> \</div> \<h2>items list\</h2> \<ul> {this state items map(item => ( \<li key={item id} style={{ marginbottom '1rem' }}> {this state editid === item id ? ( \<div> \<input type="text" value={this state edittitle} oninput={e => this setstate({ edittitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" value={this state editdescription} oninput={e => this setstate({ editdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleupdate}>save\</button> \<button onclick={() => this setstate({ editid null })} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => this handledelete(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } } export default app; caricare il tuo codice su github inizializza git nella tua cartella di progetto git init prepara i tuoi file git add esegui il commit delle tue modifiche git commit m "commit iniziale per il frontend di inferno js" crea un repository github chiamalo basic crud app infernojs frontend carica il tuo progetto git remote add origin https //github com/your username/basic crud app infernojs frontend git git push u origin main 7 3 collegare github con il deployment web di back4app vai a deployment web accedi a back4app, seleziona il tuo progetto ( basic crud app infernojs ), e clicca sulla funzione deployment web integra con github segui le istruzioni per collegare il tuo account github, consentendo a back4app di accedere al tuo repository scegli il tuo repository e branch scegli il repository (ad esempio, basic crud app infernojs frontend ) e il branch (tipicamente main ) che contiene il tuo codice 7 4 impostazioni di distribuzione inserisci configurazioni aggiuntive comando di build se il tuo repository non ha una cartella build , specifica un comando come npm run build back4app eseguirà questo durante la distribuzione cartella di output imposta l'output su build in modo che back4app sappia dove si trovano i tuoi file statici variabili di ambiente aggiungi eventuali variabili necessarie (come le chiavi api) all'interno delle impostazioni di configurazione 7 5 dockerizzare la tua applicazione se scegli di utilizzare la containerizzazione, includi un dockerfile nel tuo repository simile a \# use an official node image for the build stage from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] seleziona il deployment docker in back4app se scegli questo metodo 7 6 avviare la tua applicazione clicca su deploy una volta configurate tutte le impostazioni, premi il pulsante deploy guarda la build back4app recupererà il tuo codice, costruirà il tuo progetto e lo distribuirà in un contenitore accedi alla tua app dopo il deployment, back4app fornisce un url dove la tua app inferno js è attiva 7 7 confermare il deployment visita l'url fornito apri l'url nel tuo browser testa la funzionalità assicurati che l'app si carichi, che tutte le rotte funzionino correttamente e che le risorse (css, js, immagini) vengano visualizzate come previsto risolvi i problemi usa gli strumenti per sviluppatori per ispezionare eventuali errori se si presentano problemi, controlla i log di back4app e verifica le impostazioni di github passo 8 – conclusione e direzioni future congratulazioni! hai creato un'applicazione crud completa con inferno js e back4app hai impostato il progetto basic crud app infernojs , progettato le tue classi di dati e utilizzato l'intuitiva interfaccia di amministrazione per la gestione dei dati il tuo frontend è ora connesso e protetto con robusti controlli di accesso prossimi passi migliora l'interfaccia utente espandi la tua app inferno js con viste dettagliate, capacità di ricerca e notifiche in tempo reale aggiungi più funzionalità considera di implementare funzioni backend aggiuntive (come il cloud code), integrare api di terze parti o introdurre accessi basati su ruoli esplora ulteriormente immergiti nella documentazione di back4app https //www back4app com/docs e tutorial aggiuntivi per l'ottimizzazione delle prestazioni e integrazioni personalizzate buon coding e buona fortuna con i tuoi progetti futuri!