Come creare un'applicazione CRUD con Preact?

panoramica in questa guida, svilupperai un'applicazione crud (crea, leggi, aggiorna e cancella) utilizzando preact ti guideremo nella costruzione di un sistema che gestisce le operazioni di base sui dati, dall'inizializzazione di un progetto back4app chiamato basic crud app preact alla gestione dei dati senza sforzo questo progetto fornisce un backend robusto e un frontend elegante e minimale costruito con preact inizieremo impostando un nuovo progetto su back4app, quindi creeremo uno schema di database efficiente—manualmente o con l'aiuto dell'assistente ai di back4app questo design supporterà tutte le funzionalità crud essenziali successivamente, introduciamo l'app admin di back4app, un'interfaccia drag and drop che semplifica la gestione dei dati puoi rapidamente aggiungere, modificare o rimuovere record utilizzando questo strumento infine, collegherai il tuo frontend preact a back4app utilizzando rest/graphql, assicurandoti che il tuo backend sia sicuro con regole di accesso avanzate alla fine di questo tutorial, avrai un'applicazione web pronta per la produzione con autenticazione utente e gestione robusta dei dati—tutto costruito con preact e alimentato da back4app principali intuizioni padroneggia la costruzione di applicazioni crud che gestiscono i dati in modo efficiente utilizzando un backend affidabile impara a progettare un modello di dati scalabile e integrarlo con un frontend preact per un'esperienza utente ottimale scopri come l'app admin di back4app drag and drop semplifica le operazioni di creazione, lettura, aggiornamento e cancellazione comprendi le strategie di distribuzione, inclusa la containerizzazione con docker, per lanciare rapidamente la tua applicazione requisiti prima di iniziare, assicurati di avere un account back4app e un progetto inizializzato per indicazioni, consulta iniziare con back4app https //www back4app com/docs/get started/new parse app un ambiente di sviluppo preact usa strumenti come preact cli https //github com/preactjs/preact cli o equivalente, assicurandoti che node js (v14 o successivo) sia installato conoscenze di base di javascript, preact e rest api fai riferimento alla documentazione di preact https //preactjs com/guide/v10/ se necessario passo 1 – configurare il tuo progetto inizializzare un progetto back4app accedi al tuo account back4app seleziona l'opzione “nuova app” nella tua dashboard nomina il tuo progetto basic crud app preact e segui le istruzioni di configurazione crea nuovo progetto dopo la creazione, il tuo progetto sarà visibile sulla tua dashboard di back4app, ponendo le basi per la configurazione del backend passo 2 – creazione del tuo schema di database strutturare il tuo modello di dati per la nostra app crud, avrai bisogno di diverse collezioni di seguito sono riportati esempi che delineano le collezioni e i campi essenziali per supportare le operazioni crud 1\ collezione degli elementi questa collezione mantiene i dettagli su ciascun articolo campo tipo di dato scopo id objectid chiave primaria generata automaticamente titolo stringa il nome dell'oggetto descrizione stringa una breve descrizione dell'oggetto creato il data il timestamp di creazione aggiornato a data ultimo aggiornamento timestamp 2\ raccolta utenti questo contiene le credenziali degli utenti e i dettagli del profilo campo tipo di dato scopo id objectid chiave primaria generata automaticamente nome utente stringa nome utente unico email stringa indirizzo email unico hash password stringa password hash per l'autenticazione creato il data timestamp di creazione dell'account aggiornato a data ultimo aggiornamento dell'account puoi creare queste collezioni manualmente tramite il pannello di controllo di back4app aggiungendo una nuova classe per ogni collezione e definendo i campi appropriati crea nuova classe puoi aggiungere colonne selezionando un tipo di dato, nominando la colonna e impostando valori predefiniti e flag obbligatori crea colonna utilizzare l'assistente ai di back4app per la creazione dello schema l'assistente ai disponibile in back4app può generare automaticamente il tuo schema basato su un prompt che descrive le tue collezioni e campi questa funzione accelera la configurazione e garantisce coerenza passaggi per utilizzare l'assistente ai apri l'assistente ai dal tuo dashboard di back4app inserisci una descrizione dettagliata del tuo modello di dati esamina le collezioni e le definizioni dei campi generate automaticamente, quindi applicale al tuo progetto esempio di prompt create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) questo approccio fa risparmiare tempo e garantisce uno schema ben strutturato passo 3 – attivazione dell'app admin e gestione delle operazioni crud introduzione all'app admin l'app admin di back4app fornisce un'interfaccia senza codice per gestire i tuoi dati di backend senza sforzo la sua funzionalità di trascinamento e rilascio ti consente di eseguire operazioni crud senza problemi attivazione dell'app admin vai al menu “altro” nel tuo dashboard di back4app seleziona “app admin” e clicca “abilita app admin ” configura il tuo primo utente admin, che configurerà anche ruoli come b4aadminuser e collezioni di sistema abilita app admin dopo l'attivazione, accedi all'app admin per gestire i tuoi dati dashboard app admin esecuzione di azioni crud con l'app admin all'interno dell'interfaccia puoi aggiungere record usa l'opzione “aggiungi record” in qualsiasi collezione (ad es , articoli) per creare nuove voci visualizzare e modificare record seleziona un record per vedere i suoi dettagli o modificare i suoi campi rimuovere record elimina voci che non sono più necessarie questo strumento intuitivo migliora l'esperienza dell'utente semplificando la gestione dei dati passo 4 – collegare il tuo frontend preact a back4app con il backend in atto, è tempo di integrare il tuo frontend preact opzione a utilizzare il parse sdk installa il parse sdk npm install parse configura parse nel tuo progetto preact crea un file (ad 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; integra parse in un componente preact ad esempio, costruisci un componente per recuperare e visualizzare gli elementi // src/components/itemslist js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; 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("error fetching items ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; opzione b sfruttare rest o graphql se il sdk di parse non è praticabile, utilizza rest o graphql per le operazioni crud ad esempio, per recuperare elementi tramite rest // sample rest 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('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); opzione b sfruttare rest o graphql integra queste chiamate api all'interno dei tuoi componenti preact come richiesto passo 5 – migliorare la sicurezza del backend utilizzo delle liste di controllo degli accessi (acl) proteggi i tuoi dati assegnando acl ai tuoi 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); // configure acl only the owner has read/write access 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) all'interno del dashboard di back4app, regola i clp per ogni collezione per limitare l'accesso solo agli utenti autenticati o autorizzati passo 6 – implementazione dell'autenticazione utente configurazione degli account utente back4app utilizza la classe user di parse per gestire l'autenticazione nella tua applicazione preact, gestisci la registrazione e il login degli utenti come segue // src/components/auth js import { h } from 'preact'; import { usestate } from 'preact/hooks'; 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 registration successful!'); } catch (error) { alert('registration error ' + 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 metodo simile può essere utilizzato per il login e la gestione delle sessioni funzionalità aggiuntive come l'autenticazione sociale e il recupero della password possono essere configurate tramite il dashboard di back4app passo 7 – lancio del tuo frontend preact con il deployment web la funzionalità di web deployment di back4app ti consente di ospitare la tua applicazione preact collegando un repository github in questa parte, preparerai la tua build di produzione, effettuerai il commit del tuo codice, integrerai con il web deployment e distribuirai il tuo sito 7 1 crea i tuoi file di produzione apri la directory del tuo progetto in un terminale esegui il comando di build npm run build questo genera una build cartella con risorse statiche ottimizzate (html, js, css, immagini) 3\ conferma che la build cartella includa un index html file e le risorse necessarie 7 2 organizza e committa il tuo codice sorgente il tuo repository dovrebbe contenere il codice sorgente completo del frontend preact una struttura di directory di esempio basic crud app preact frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md esempi di file src/parseconfig js // src/parseconfig js import parse from 'parse'; // enter your 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 { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; 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; impegnare il tuo codice su github inizializza un repository git (se non è già stato fatto) git init organizza i tuoi file sorgente git add impegnati per le tue modifiche git commit m "initial commit of preact frontend source code" crea un nuovo repository github, ad esempio, basic crud app preact frontend invia il tuo codice git remote add origin https //github com/your username/basic crud app preact frontend git git push u origin main 7 3 collegare il tuo repository con il deployment web vai alla sezione web deployment nel tuo dashboard di back4app, apri il tuo progetto ( basic crud app preact ) e seleziona web deployment collega il tuo account github come richiesto, in modo che back4app possa accedere al tuo repository seleziona il repository (ad es , basic crud app preact frontend ) e scegli il ramo appropriato (ad es , main ) 7 4 configurazione del deployment specifica impostazioni aggiuntive comando di build se una cartella build pre costruita è assente, imposta il comando di build (ad es , npm run build ) back4app eseguirà questo comando durante il deployment directory di output definisci la cartella di output come build in modo che back4app identifichi i file statici variabili d'ambiente aggiungi eventuali chiavi api o impostazioni necessarie per la tua applicazione 7 5 contenere la tua applicazione preact con docker se preferisci docker, includi un dockerfile nel tuo repository simile a \# use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files copy package json / \# install dependencies run npm install \# copy the source code copy \# build the app 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 l'opzione di distribuzione docker nelle impostazioni di distribuzione web di back4app 7 6 distribuzione della tua applicazione clicca sul pulsante di distribuzione una volta completata la configurazione monitora il processo di costruzione mentre back4app recupera il tuo codice, costruisce e distribuisce la tua applicazione una volta terminato, back4app fornirà un url dove è ospitata la tua applicazione 7 7 verifica della tua distribuzione visita l'url fornito per vedere il tuo sito live testa tutte le funzionalità per assicurarti che ogni caratteristica, comprese le rotte e le risorse, si carichi correttamente se si verificano problemi, controlla i log della console del browser e i log di distribuzione in back4app passo 8 – conclusione e direzioni future ottimo lavoro! hai sviluppato con successo un'applicazione crud completa utilizzando preact e back4app hai impostato un progetto chiamato basic crud app preact , definito collezioni di database robuste e utilizzato l'admin app per una gestione efficiente dei dati hai quindi collegato il tuo frontend preact al tuo backend e implementato controlli di accesso rigorosi cosa c'è dopo? migliora la tua app preact con funzionalità aggiuntive come viste dettagliate, capacità di ricerca e aggiornamenti in tempo reale incorpora logica backend più avanzata come cloud functions o integrazioni api di terze parti consulta la documentazione di back4app https //www back4app com/docs e altre risorse per approfondimenti su ottimizzazione e configurazioni personalizzate seguendo questo tutorial, hai acquisito le competenze per costruire un backend crud scalabile e sicuro per le tue applicazioni preact utilizzando back4app buon coding e buona esplorazione di nuove funzionalità!