How to Build a Qwik Frontend and Connect It to a Backend?

in questo tutorial, costruirai un'applicazione to do list utilizzando qwik e la collegherai a un robusto backend alimentato da back4app questa guida è pensata per gli sviluppatori che vogliono sfruttare la riprendibilità e le capacità di caricamento lazy di qwik mentre integrano operazioni crud essenziali (crea, leggi, aggiorna, elimina) con un backend gestito alla fine, avrai un'applicazione completamente funzionale che dimostra come combinare un moderno frontend qwik con i servizi backend affidabili di back4app costruire un'applicazione full stack può essere impegnativo perché comporta la configurazione del backend, la gestione del database, l'autenticazione e il deployment per semplificare questi compiti, utilizziamo back4app— un backend as a service (baas) scalabile —in modo da poterti concentrare sulla costruzione della tua app qwik mentre si occupa di hosting, database e api back4app offre una suite completa di servizi backend, inclusi un database nosql pronto all'uso, autenticazione, cloud code per la logica lato server e integrazioni sdk fluide il supporto per il deployment containerizzato lo rende un'ottima scelta per le moderne applicazioni full stack con questi strumenti a portata di mano, puoi sviluppare e distribuire rapidamente applicazioni senza il sovraccarico della gestione dell'infrastruttura server punti chiave seguendo questo tutorial imparerai a inizializzare un progetto qwik moderno integrare un servizio backend per gestire i dati della tua applicazione implementare operazioni crud essenziali per un'interfaccia utente interattiva distribuire un applicazione to do list completamente funzionale utilizzando flussi di lavoro containerizzati su back4app requisiti prima di iniziare, assicurati di avere i seguenti requisiti node js e npm installa l'ultima versione lts da nodejs org https //nodejs org/ e verifica con node v e npm v conoscenze di base su qwik è consigliata familiarità con i componenti di qwik, i segnali (utilizzando usesignal ), e il concetto di riprendibilità se sei nuovo a qwik, consulta prima la sua documentazione un account back4app registrati su back4app https //www back4app com/ per configurare e gestire i tuoi servizi backend con questi requisiti in atto, sei pronto per configurare il tuo progetto e iniziare a costruire impostazione del progetto inizia configurando il tuo ambiente di sviluppo locale e inizializzando il tuo progetto qwik conferma che node js (versione lts) sia installato node v npm v crea un nuovo progetto qwik utilizzando il qwik cli esegui il seguente comando npm create qwik\@latest rispondi alle domande che il cli fornirà nomina il progetto todo app o sostituiscilo con qualsiasi nome tu preferisca cambia nella directory del tuo progetto cd todo app avvia il server di sviluppo per verificare la tua configurazione npm start la tua app qwik 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 questo servizio fornisce un database nosql, autenticazione, cloud code e api auto generate pronte all'uso questa sezione ti guida nella creazione di un task modello di dati per memorizzare i tuoi elementi da fare e collegarlo con il tuo frontend qwik 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, todoqwikapp ) e seleziona nodejs/parse come tipo di backend una volta creata, naviga su "database" > "browser" clicca su "crea una classe" e scegli "personalizzata" dai un nome alla classe task e imposta le autorizzazioni a livello di classe per consentire lettura e scrittura pubbliche (puoi affinare queste impostazioni in seguito) nella classe task aggiungi i seguenti campi titolo (string) – il titolo del compito descrizione (string) – dettagli sul compito completato (boolean) – indica se il compito è completato datascadenza (data) – la scadenza per il compito clicca su "salva" per finalizzare il tuo schema integrazione di back4app con qwik integra back4app nel tuo progetto qwik utilizzando il parse javascript sdk installa l'sdk tramite npm npm install parse configura l'sdk inizializzandolo con il tuo application id e javascript key recupera queste credenziali dal tuo back4app dashboard sotto app settings > security & keys crea un file di configurazione (ad esempio, src/lib/parse js ) e aggiungi quanto segue 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; export default parse; ora puoi importare questa configurazione nei tuoi componenti e percorsi qwik per interagire con il tuo backend sviluppare il frontend con qwik ora che il tuo backend è connesso, costruisci l'interfaccia utente per la tua applicazione to do list utilizzando qwik creerai componenti per aggiungere, visualizzare, aggiornare e eliminare attività mentre gestisci lo stato con i segnali di qwik organizzare i tuoi componenti la tua applicazione includerà i seguenti componenti chiave taskform tsx – un componente per gestire l'aggiunta di nuove attività tasklist tsx – un componente per visualizzare tutte le attività e fornire controlli per contrassegnare le attività come completate o eliminarle taskitem tsx – un componente che rappresenta un'attività individuale con azioni per attivare la completamento o rimuoverla crea una components cartella all'interno di src e aggiungi questi file mkdir src/components touch src/components/taskform tsx src/components/tasklist tsx src/components/taskitem tsx gestire lo stato con i segnali di qwik utilizza usesignal di qwik per la gestione reattiva dello stato nella tua pagina principale (ad esempio, src/routes/index tsx ), imposta lo stato e il recupero dei dati come segue import { component$, usesignal, usevisibletask$, $ } from '@builder io/qwik'; import parse from ' /lib/parse js'; import taskform from ' /components/taskform'; import tasklist from ' /components/tasklist'; export default component$(() => { const tasks = usesignal< { id string; createdat string; updatedat string; title string; description string; completed boolean; }\[] \>(\[]); const fetchtasks = $ ( async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id ?? '', createdat task createdat ? task createdat toisostring() '', updatedat task updatedat ? task updatedat toisostring() '', title task get('title') ?? '', description task get('description') ?? '', completed task get('completed') ?? false, })); } catch (error) { console error("error fetching tasks ", error); } }); usevisibletask$(async () => { await fetchtasks(); }); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform ontaskadded$={fetchtasks} /> \<tasklist tasks={tasks value} ontaskschange$={fetchtasks} /> \</div> ); }); costruire il componente del modulo attività in src/components/taskform tsx , crea un componente di modulo per aggiungere attività usa i segnali reattivi di qwik per gli input del modulo import { component$, usesignal, $, qrl } from '@builder io/qwik'; import parse from ' /lib/parse js'; interface taskformprops { ontaskadded$ qrl<() => void>; } export default component$((props taskformprops) => { const title = usesignal(''); const description = usesignal(''); const handlesubmit$ = $(async (e event) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title value); task set("description", description value); task set("completed", false); await task save(); title value = ''; description value = ''; return true; } catch (error) { console error("error adding task ", error); return false; } }); return ( \<form preventdefault\ submit onsubmit$={async (event) => { const success = await handlesubmit$(event); if (success) { await props ontaskadded$(); } }} \> \<input type="text" placeholder="task title" value={title value} oninput$={(e) => title value = (e target as htmlinputelement) value} required /> \<input type="text" placeholder="description" value={description value} oninput$={(e) => description value = (e target as htmlinputelement) value} required /> \<button type="submit">add task\</button> \</form> ); }); costruire i componenti della lista delle attività e degli elementi in src/components/tasklist tsx , rendi l'elenco delle attività import { component$ } from '@builder io/qwik'; import taskitem from ' /taskitem'; interface task { id string; title string; description string; completed boolean; } interface tasklistprops { tasks task\[]; ontaskschange$ () => void; } export default component$((props tasklistprops) => { return ( \<div> {props tasks length === 0 ? ( \<p>no tasks available\</p> ) ( props tasks map(task => ( \<taskitem key={task id} task={task} ontaskschange$={props ontaskschange$} /> )) )} \</div> ); }); in src/components/taskitem tsx , crea un componente per attività individuali con azioni per attivare il completamento o eliminare l'attività import { component$, $ } from '@builder io/qwik'; import parse from ' /lib/parse js'; interface task { id string; title string; description string; completed boolean; } interface taskitemprops { task task; ontaskschange$ () => void; } export default component$((props taskitemprops) => { const handletoggle = $(async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(props task id); tasktoupdate set("completed", !props task completed); await tasktoupdate save(); props ontaskschange$(); } catch (error) { console error("error updating task ", error); } }); const handledelete = $(async () => { try { const query = new parse query("task"); const tasktodelete = await query get(props task id); await tasktodelete destroy(); props ontaskschange$(); } catch (error) { console error("error deleting task ", error); } }); return ( \<div class={`task item ${props task completed ? "completed" ""}`}> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \<button onclick$={handletoggle}> {props task completed ? "undo" "complete"} \</button> \<button onclick$={handledelete}>delete\</button> \</div> ); }); styling your application create a src/global css file to add basic styling / src/global css / 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 gli stili globali nel tuo file radice (ad es , src/root tsx ) import " /global css"; finalizzare l'interfaccia utente la tua applicazione qwik 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à garantendo una comunicazione fluida tra il frontend e il backend successivamente, distribuirai la tua applicazione qwik 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 ospitare le tue applicazioni con distribuzioni basate su docker, puoi impacchettare la tua app qwik e distribuirla senza problemi aggiungi l'adapter del server express qwik ti consente di configurare adapter di distribuzione per obiettivi specifici aggiungeremo l'adapter express per servire il tuo progetto in produzione installa l'adapter npm run qwik add poi seleziona adapter node js express server e conferma l'installazione questo aggiorna il tuo readme e aggiunge nuovi script di distribuzione nel tuo package json aggiorna lo script di avvio apri package json e modifica lo script di avvio in "start" "node server/entry express" facoltativamente, mantieni uno script di sviluppo separato se necessario questo assicura che il tuo progetto utilizzi express per servire la build di produzione configurare qwik per la produzione costruisci il tuo sito qwik pronto per la produzione con npm run build creare un dockerfile per la tua app crea un dockerfile nella radice del progetto per containerizzare la tua applicazione qwik # build stage from node\ lts alpine as builder user node workdir /home/node copy package json run npm ci copy chown=node\ node run npm run build \# final run stage from node\ lts alpine as runner env node env=production user node workdir /home/node copy from=builder chown=node\ node /home/node/package json copy from=builder chown=node\ node /home/node/node modules /node modules copy from=builder chown=node\ node /home/node/dist /dist copy from=builder chown=node\ node /home/node/server /server arg port expose ${port 3000} cmd \["node", "server/entry express"] caricare su github e distribuire 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 poi, distribuisci utilizzando il deployment web di back4app accedi a back4app web deployment https //www back4app com/containers clicca su "crea nuova app" , fornisci un nome e seleziona repository github autorizza back4app ad accedere al tuo repository e seleziona il tuo repository del progetto qwik 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 quando vengono inviati nuovi commit configurare domini personalizzati se necessario testare e debuggare la tua applicazione una volta distribuita, testa a fondo la tua app qwik verifica la connettività api apri la console di sviluppo del tuo browser (f12 → rete) per controllare le chiamate api durante le operazioni aggiungi e recupera attività usa l'interfaccia utente per aggiungere attività, quindi aggiorna per confermare la persistenza dei dati nel back4app database browser testa le operazioni crud assicurati che la marcatura delle attività come completate e la cancellazione si riflettano correttamente nel backend gestisci i casi limite valida gli input del modulo e simula condizioni di rete lente utilizzando gli strumenti di sviluppo se si verificano problemi, controlla i log di back4app o ricontrolla la tua configurazione api migliori pratiche per l'utilizzo dei servizi back4app migliora le prestazioni e la sicurezza della tua applicazione ottimizzare le chiamate api usa richieste batch per più operazioni e interroga solo i campi necessari proteggere i dati sensibili memorizza le credenziali come l'id dell'applicazione e la chiave javascript in variabili di ambiente in qwik, crea un env file vite parse app id=your app id vite parse js key=your js key abilitare l'auto scaling attiva l'auto scaling nel deployment web di back4app per gestire il traffico elevato migliorare la sicurezza limita i permessi a livello di classe (clp) per controllare le modifiche ai dati e imposta acl come necessario utilizzare il cloud code scarica la logica complessa nel cloud code per migliorare le prestazioni e ridurre l'esposizione dell'api conclusione hai ora costruito un'applicazione to do list full stack utilizzando qwik per il frontend e i robusti servizi backend di back4app questo tutorial ti ha guidato attraverso la configurazione di un progetto qwik, l'integrazione del parse sdk e il deployment del tuo sito 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 informazioni e supporto, fai riferimento alla documentazione di back4app https //www back4app com/docs