Come costruire un frontend Preact e collegarlo a un backend?

in questo tutorial, costruirai un'applicazione to do list utilizzando preact e la collegherai a un robusto backend fornito da back4app questa guida è perfetta per iniziare perché copre le operazioni crud fondamentali (crea, leggi, aggiorna, elimina) e ti guida nella creazione di un'interfaccia utente pulita e funzionale alla fine, avrai un'app completamente operativa che ti mostra come integrare un backend gestito mentre utilizzi preact per un frontend leggero e veloce costruire un'applicazione full stack può essere complesso, specialmente quando si tratta di configurazione del backend, gestione del database, autenticazione e distribuzione per semplificare queste sfide, utilizziamo back4app—una soluzione scalabile backend as a service (baas) —così puoi concentrarti sullo sviluppo del tuo frontend mentre gestisce hosting, database e api back4app offre servizi backend completi, inclusi un database pronto all'uso, autenticazione, cloud code per la logica lato server e sdk per un'integrazione fluida supporta anche distribuzioni containerizzate, rendendolo un'ottima scelta per le moderne applicazioni full stack con queste risorse, puoi sviluppare e distribuire rapidamente applicazioni senza il peso della gestione dell'infrastruttura server punti chiave seguendo questo tutorial imparerai a inizializzare un progetto preact moderno utilizzando vite integrare un servizio backend per gestire i dati della tua applicazione implementare operazioni crud fondamentali per un'interfaccia utente interattiva distribuire un applicazione to do list completamente funzionale utilizzando flussi di lavoro containerizzati su back4app requisiti preliminari prima di iniziare, assicurati di avere i seguenti requisiti node js e npm installa l'ultima versione lts di node js da nodejs org https //nodejs org/ e verifica eseguendo node v e npm v nel tuo terminale conoscenze di base su preact è prevista familiarità con i componenti funzionali, gli hook (come usestate e useeffect ), e la sintassi jsx se sei nuovo a preact, considera di rivedere prima le sue basi un account back4app registrati su back4app https //www back4app com/ per configurare e gestire i tuoi servizi backend con questi requisiti preliminari in atto, sei pronto per configurare il tuo progetto e iniziare a costruire configurazione del progetto inizia configurando il tuo ambiente di sviluppo locale e inizializzando il tuo progetto preact utilizzando vite per un'esperienza di sviluppo semplificata conferma che node js (versione lts) sia installato se necessario, scaricalo e installalo da nodejs org https //nodejs org/ verifica eseguendo node v npm v inizializza il tuo progetto preact utilizzando vite esegui il seguente comando nel tuo terminale (sostituisci todo app con il nome del progetto che preferisci) npm create vite\@latest todo app template preact naviga nella directory del tuo progetto cd todo app installa le dipendenze richieste npm install avvia il server di sviluppo per verificare la tua configurazione npm run dev la tua applicazione preact dovrebbe ora essere in esecuzione localmente apri l'url fornito nel tuo browser per confermare successivamente, configurerai il tuo backend su back4app per gestire l'archiviazione dei dati e le interazioni api creazione del backend todo back4app offre un servizio backend completamente gestito alimentato da parse , che fornisce un database nosql, autenticazione, cloud code e api auto generate pronte all'uso questa sezione ti guiderà nella creazione di un task modello di dati per memorizzare i tuoi elementi da fare e collegarlo al tuo frontend preact impostare la tua applicazione backend accedi al tuo dashboard di back4app https //www back4app com/ e clicca su "crea una nuova app " dai un nome alla tua applicazione (ad esempio, todopreactapp ) e scegli nodejs/parse come tipo di backend una volta creata l'app, vai su "database" > "browser" clicca su "crea una classe" e seleziona "personalizzata" dai un nome alla classe task e imposta le autorizzazioni di livello classe per consentire lettura e scrittura pubbliche (puoi modificare queste impostazioni in seguito) nella classe task aggiungi i seguenti campi titolo (stringa) – il titolo del compito descrizione (stringa) – dettagli sul compito completato (booleano) – indica se il compito è finito datascadenza (data) – la scadenza per il compito clicca su "salva" per completare la configurazione del tuo schema integrazione di back4app con preact integra back4app nel tuo progetto preact utilizzando il parse javascript sdk installa il sdk tramite npm npm install parse configura l'sdk inizializzandolo con il tuo id applicazione e chiave javascript recupera queste credenziali dal tuo dashboard back4app sotto impostazioni app > sicurezza e chiavi nel tuo src/main jsx , importa e configura parse come segue import { render } from 'preact' import ' /index css' import app from ' /app jsx' import parse from 'parse/dist/parse min js' const parse app id = "your application id"; const parse js key = "your javascript key"; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; render(\<app />, document getelementbyid('app')) con il backend connesso, sei pronto per costruire l'interfaccia utente della to do list in preact e implementare le operazioni crud sviluppare il frontend con preact ora che il tuo backend è configurato, costruisci l'interfaccia utente per la tua applicazione to do list utilizzando preact creerai componenti per aggiungere, visualizzare, aggiornare e eliminare attività mentre gestisci lo stato con i hook organizzare i tuoi componenti la tua applicazione includerà i seguenti componenti chiave taskform jsx – gestisce l'aggiunta di nuove attività tasklist jsx – visualizza tutte le attività e fornisce controlli per completarle o eliminarle taskitem jsx – rappresenta un'attività individuale con azioni per attivare il completamento o rimuovere l'attività crea una components cartella all'interno di src e aggiungi questi file mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx gestire lo stato con i hook usa gli hook di preact ( usestate e useeffect ) per la gestione dello stato e gli effetti collaterali inizia impostando lo stato in app jsx import { usestate, useeffect } from "preact/hooks"; import taskform from " /components/taskform jsx"; import tasklist from " /components/tasklist jsx"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = usestate(\[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; costruire il componente del modulo attività in taskform jsx , crea un modulo controllato per aggiungere attività usa usestate per gestire i valori di input e inviare i dati a back4app import { usestate } from "preact/hooks"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; visualizzare la lista delle attività in tasklist jsx , rendi l'elenco delle attività mappando l'array delle attività e utilizzando il taskitem componente import taskitem from " /taskitem jsx"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; creazione del componente task item in taskitem jsx , crea un componente che ti consenta di contrassegnare un'attività come completata o di eliminarla import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div class={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; stilizzare la tua applicazione aggiungi i seguenti stili nel index css file nella src cartella / container styling / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } container p { font size 1rem; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } importa questo css nel tuo src/main jsx import " /index css"; finalizzazione dell'interfaccia utente la tua applicazione preact to do list ora presenta un frontend dinamico integrato con back4app e uno stile personalizzato l'app consente di aggiungere, visualizzare, aggiornare e eliminare attività mantenendo una comunicazione efficiente tra frontend e backend successivamente, distribuirai la tua app preact utilizzando la piattaforma di distribuzione web di back4app distribuzione del frontend su back4app web deployment back4app web deployment offre un ambiente completamente gestito e containerizzato per distribuire le tue applicazioni con distribuzioni basate su docker, puoi impacchettare il tuo frontend preact e distribuirlo senza sforzo configurare vite per la produzione i progetti preact costruiti con vite funzionano in modalità sviluppo per impostazione predefinita per la produzione, costruisci una versione statica e servila utilizzando un server web leggero come nginx aggiorna il tuo vite config js per impostare il percorso base corretto import { defineconfig } from 'vite'; import preact from '@preact/preset vite'; export default defineconfig({ plugins \[preact()], base ' /', // ensures asset paths are correct in a containerized environment }); genera file pronti per la produzione npm run build creare un dockerfile per la tua app crea un dockerfile nella directory principale per definire il tuo container # build stage using a lightweight node js image from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# production stage using nginx to serve static files from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] testare il container localmente prima di distribuire, costruisci e testa il tuo container docker localmente docker build t todo preact frontend esegui il contenitore docker run p 8080 80 todo preact frontend visita http //localhost 8080 nel tuo browser per confermare che la tua app è servita correttamente caricamento su github e distribuzione tramite back4app carica il tuo progetto su github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main quindi, distribuisci utilizzando il back4app web deployment accedi a back4app web deployment https //www back4app com/containers clicca su "crea nuova app" , fornisci un nome e seleziona github repository autorizza back4app ad accedere al tuo repository e seleziona il todo preact repo scegli dockerfile deployment e conferma le impostazioni di build clicca su "distribuisci" per avviare il processo di build monitoraggio e gestione delle distribuzioni dopo la distribuzione, utilizza il dashboard di back4app per visualizzare i log per la risoluzione dei problemi monitorare le prestazioni del container e l'uso delle risorse attivare le ridistribuzioni su nuovi commit configurare domini personalizzati se necessario test e debugging della tua applicazione dopo il deployment, testa a fondo la tua app preact verifica la connettività api apri la console di sviluppo del tuo browser (f12 → rete) per monitorare le chiamate api durante le operazioni aggiungi e recupera attività usa l'interfaccia utente per aggiungere attività, quindi aggiorna la pagina per verificare la persistenza nel back4app database browser testa le operazioni crud assicurati che la marcatura delle attività come completate e la cancellazione siano correttamente riflesse nel backend gestione dei casi limite valida gli input del modulo e simula condizioni di rete lente utilizzando gli strumenti di sviluppo se riscontri problemi, controlla i log di back4app o verifica la tua configurazione api migliori pratiche per utilizzare i servizi di back4app migliora le prestazioni e la sicurezza della tua applicazione seguendo queste migliori pratiche ottimizza le chiamate api usa richieste batch per più operazioni e seleziona solo i campi necessari nelle tue query proteggi i dati sensibili memorizza le credenziali come l'id dell'applicazione e la chiave javascript in variabili d'ambiente con vite, crea un env file vite parse app id=your app id vite parse js key=your js key abilita auto scaling attiva l'auto scaling nel deployment web di back4app per gestire il traffico elevato migliora la sicurezza limita le autorizzazioni a livello di classe (clp) per controllare le modifiche ai dati e imposta acl come necessario utilizza il cloud code scarica la logica complessa nel cloud code per migliori prestazioni e ridotto esposizione api conclusione hai ora costruito un'applicazione to do list full stack utilizzando preact per il frontend e i robusti servizi backend di back4app questo tutorial ti ha guidato attraverso l'inizializzazione di un progetto preact, l'integrazione del parse sdk e il deployment della tua app utilizzando flussi di lavoro containerizzati su back4app man mano che continui a sviluppare, considera di aggiungere funzionalità come l'autenticazione avanzata degli utenti, aggiornamenti in tempo reale e integrazioni di terze parti per ulteriori dettagli e supporto, fai riferimento alla documentazione di back4app https //www back4app com/docs