Costruire un'applicazione CRUD con Qwik: Un tutorial completo

panoramica in questa guida, imparerai a creare un'applicazione crud (crea, leggi, aggiorna, elimina) completamente funzionale utilizzando qwik dimostreremo operazioni essenziali per gestire i dati mentre colleghi la tua app a back4app inizialmente, configurerai un progetto back4app intitolato basic crud app qwik per servire come backend per la gestione dei dati successivamente, configurerai un database scalabile definendo collezioni e campi—sia manualmente che con l'assistenza dell'agente ai di back4app questo assicura che il tuo modello di dati sia ottimizzato per gestire le operazioni crud in modo efficiente utilizzerai quindi l'app admin di back4app, un'interfaccia drag and drop user friendly, per gestire le tue collezioni senza problemi questo strumento semplifica le operazioni sui dati offrendo un modo intuitivo per creare, aggiornare ed eliminare record infine, integrerai il tuo frontend qwik con back4app utilizzando api rest o graphql, insieme all'implementazione di controlli di sicurezza robusti alla fine di questo tutorial, la tua applicazione pronta per la produzione non solo gestirà le operazioni crud, ma supporterà anche l'autenticazione degli utenti e l'accesso sicuro ai dati informazioni essenziali padroneggia l'arte di sviluppare applicazioni crud che gestiscono efficacemente i dati utilizzando un backend affidabile scopri i metodi per progettare un backend adattabile e unirlo a un frontend qwik per una maggiore interattività dell'utente esplora i vantaggi di un'interfaccia di amministrazione drag and drop (back4app admin app) per semplificare le funzioni crud scopri le strategie di distribuzione, inclusa la containerizzazione docker, per lanciare rapidamente la tua applicazione web requisiti prima di iniziare, assicurati di avere un account back4app con un nuovo progetto configurato visita iniziare con back4app https //www back4app com/docs/get started/new parse app per assistenza un ambiente di sviluppo qwik configura il tuo progetto utilizzando la documentazione di qwik https //qwik builder io/docs/getting started/ assicurati di avere node js (versione 14 o successiva) installato una comprensione di base di javascript, qwik e rest api consulta la documentazione di qwik https //qwik builder io/docs/ se hai bisogno di un ripasso passo 1 – inizializzazione del progetto stabilire un nuovo progetto back4app accedi al tuo account back4app clicca su “nuova app” nella tua dashboard inserisci il nome del progetto basic crud app qwik e segui le istruzioni per creare il tuo progetto crea nuovo progetto il tuo nuovo progetto apparirà quindi sulla tua dashboard, formando la base del backend per la tua applicazione passo 2 – progettazione del tuo schema di database creazione del tuo modello dati per questa app crud, definirai diverse collezioni di seguito sono riportati esempi che delineano i campi e i tipi necessari per aiutarti a creare uno schema di database efficace per gestire le operazioni crud 1\ raccolta di articoli questa raccolta contiene dettagli per ogni articolo campo tipo di dato descrizione id objectid chiave primaria generata automaticamente titolo stringa nome dell'oggetto descrizione stringa brevi dettagli sull'oggetto creato il data timestamp quando l'elemento è stato creato aggiornato a data timestamp dell'ultimo aggiornamento 2\ raccolta utenti questa collezione memorizza i dettagli dell'utente e le informazioni di autenticazione campo tipo di dati descrizione 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 il login creato il data timestamp di creazione dell'account aggiornato a data ultimo aggiornamento del timestamp per l'account utente puoi aggiungere manualmente queste collezioni tramite il pannello di controllo di back4app creando nuove classi e configurando ogni colonna secondo necessità crea nuova classe aggiungi facilmente campi selezionando il tipo, fornendo un nome e configurando valori predefiniti e vincoli crea colonna sfruttare l'agente ai di back4app per la creazione dello schema l'agente ai di back4app può generare automaticamente il tuo schema basato su un prompt descrittivo questa funzionalità accelera la configurazione del progetto e garantisce coerenza come operare l'agente ai accedi all'agente ai trovalo nel tuo dashboard di back4app o nelle impostazioni del tuo progetto dettaglia il tuo modello dati fornisci un prompt che descriva le collezioni e i campi di cui hai bisogno rivedi e implementa valuta le proposte di schema generate e applicale al tuo progetto esempio di prompt create the following 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 su misura per la tua applicazione 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 dati di backend la sua funzionalità intuitiva di trascinamento e rilascio ti consente di eseguire facilmente operazioni crud come abilitare l'app admin accedi al menu “altro” dal tuo dashboard di back4app seleziona “app admin” e poi clicca “abilita app admin ” imposta le tue credenziali di amministratore creando un utente amministratore, che stabilirà automaticamente ruoli e collezioni di sistema abilita app admin dopo l'attivazione, accedi all'app admin per gestire i tuoi dati senza sforzo dashboard app admin eseguire azioni crud tramite l'app admin aggiungi record usa il pulsante “aggiungi record” all'interno di qualsiasi collezione (ad es , articoli) per creare nuove voci visualizza/modifica record clicca su qualsiasi record per ispezionare i suoi dettagli o apportare aggiornamenti rimuovi record utilizza la funzione di eliminazione per eliminare voci obsolete questo strumento semplifica le operazioni sui dati, garantendo un'esperienza utente fluida passo 4 – collegare qwik con back4app ora che il tuo backend è configurato, è tempo di integrare il tuo frontend qwik con back4app opzione utilizzare le api rest o graphql utilizzeremo chiamate api rest per interagire con back4app esempio recuperare articoli tramite rest in qwik crea un componente qwik (ad esempio, src/components/itemslist tsx ) che recupera e visualizza gli elementi // src/components/itemslist tsx import { component$, usetask$ } from '@builder io/qwik'; export const itemslist = component$(() => { const items = \[]; usetask$(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(); items push( data results); } catch (error) { console error('error retrieving items ', error); } }); return ( \<div> \<h2>items\</h2> \<ul> {items map((item any) => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> ); }); export default itemslist; questo componente utilizza l'api fetch per chiamare l'endpoint rest di back4app, recuperando l'elenco degli elementi per altre operazioni crud (creare, aggiornare, eliminare), integra chiamate rest simili nei tuoi componenti qwik passo 5 – sicurezza del tuo backend implementazione delle liste di controllo degli accessi (acl) migliora la sicurezza dei tuoi dati impostando acl sui tuoi oggetti ad esempio, per limitare l'accesso a un elemento specifico async function createprivateitem(itemdata { title string; description string }, ownerid string) { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } catch (error) { console error('error creating private item ', error); } } configurazione delle autorizzazioni a livello di classe (clp) all'interno del dashboard di back4app, regola le clp per ogni collezione per imporre politiche di accesso predefinite, assicurando che solo gli utenti autorizzati possano interagire con i dati sensibili passo 6 – autenticazione utente creazione di account utente back4app utilizza la classe utente di parse per gestire l'autenticazione nella tua app qwik, implementa la registrazione e il login degli utenti come mostrato di seguito esempio componente di registrazione in qwik // src/components/auth tsx import { component$, usestore } from '@builder io/qwik'; export const signup = component$(() => { const store = usestore({ username '', password '', email '' }); const handlesignup = async (e event) => { e preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username store username, password store password, email store email }) }); const data = await response json(); alert('user successfully registered!'); } catch (error any) { alert('registration error ' + error message); } }; return ( \<form onsubmit$={handlesignup}> \<input type="text" placeholder="username" value={store username} oninput$={(e) => (store username = (e target as htmlinputelement) value)} /> \<input type="password" placeholder="password" value={store password} oninput$={(e) => (store password = (e target as htmlinputelement) value)} /> \<input type="email" placeholder="email" value={store email} oninput$={(e) => (store email = (e target as htmlinputelement) value)} /> \<button type="submit">register\</button> \</form> ); }); un approccio simile può essere applicato alla gestione del login e della sessione opzioni aggiuntive come l'autenticazione sociale, la verifica dell'email e il recupero della password possono essere configurate tramite back4app passo 7 – distribuire il tuo frontend qwik tramite distribuzione web il servizio di distribuzione web di back4app consente un hosting senza soluzione di continuità del tuo frontend qwik collegando il tuo repository github segui questi passaggi per distribuire il tuo sito 7 1 crea il tuo build di produzione apri la cartella del tuo progetto nel terminale esegui il comando di build npm run build questo genera una build cartella contenente risorse statiche ottimizzate conferma la build assicurati che la build cartella contenga un index html file insieme alle directory delle risorse associate 7 2 organizza e commetti il tuo codice su github il tuo repository dovrebbe includere il codice sorgente completo per il tuo frontend qwik una struttura tipica potrebbe essere basic crud app qwik frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── root tsx \| ├── entry tsx \| └── components/ \| ├── itemslist tsx \| └── auth tsx \| package json \| readme md esempio src/root tsx // src/root tsx import { component$ } from '@builder io/qwik'; import itemslist from ' /components/itemslist'; export default component$(() => { return ( \<div style={{ padding '2rem' }}> \<h1>crud application\</h1> \<itemslist /> \</div> ); }); impegnare il tuo codice inizializza git (se non già fatto) git init prepara i tuoi file git add impegnare le tue modifiche git commit m "impegno iniziale del codice frontend qwik" crea un repository github ad esempio, chiamalo basic crud app qwik frontend invia il tuo codice a github git remote add origin https //github com/your username/basic crud app qwik frontend git git push u origin main 7 3 collegare il tuo repository al web deployment accedi al web deployment accedi al tuo dashboard back4app, seleziona il tuo progetto (basic crud app qwik) e vai alla sezione web deployment collegati a github segui le istruzioni sullo schermo per collegare il tuo account github seleziona il repository e il branch scegli il tuo repository (ad esempio, basic crud app qwik frontend ) e il branch pertinente (ad esempio, main ) 7 4 configurazione del deployment specifica impostazioni aggiuntive comando di costruzione se una cartella di build precompilata non è inclusa, imposta il comando (ad es , npm run build ) directory di output definisci la directory di output come build variabili di ambiente inserisci eventuali variabili necessarie come le chiavi api 7 5 contenere la tua app qwik con docker (opzionale) se scegli docker, includi un dockerfile simile a \# use node for building the app from node 16 alpine as build workdir /app copy package json / run npm install copy run npm run build \# serve the built app with nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] quindi, seleziona l'opzione docker nelle impostazioni di distribuzione web 7 6 distribuire la tua applicazione clicca sul pulsante distribuisci una volta completata la configurazione, premi distribuisci guarda la build back4app preleverà il tuo codice, lo compilerà e distribuirà il contenitore ricevi il tuo url dopo la distribuzione, verrà fornito un url dove è ospitata la tua app 7 7 verificare la tua distribuzione visita l'url apri il link fornito nel tuo browser testa la funzionalità controlla che tutte le rotte e le risorse si carichino correttamente debug se necessario utilizza gli strumenti per sviluppatori del browser e i log di back4app per risolvere i problemi passo 8 – conclusione e miglioramenti futuri ben fatto! hai costruito con successo un'app crud completa utilizzando qwik e back4app hai creato il progetto basic crud app qwik , elaborato uno schema di database dettagliato per articoli e utenti, e gestito i dati con l'app admin inoltre, hai collegato il tuo frontend qwik al backend e applicato misure di sicurezza solide prossimi passi espandi il tuo frontend migliora la tua app qwik con funzionalità come visualizzazioni dettagliate degli articoli, funzionalità di ricerca o aggiornamenti in tempo reale aggiungi maggiore funzionalità considera di integrare logiche backend avanzate, api di terze parti o controllo degli accessi basato sui ruoli esplora risorse aggiuntive fai riferimento alla documentazione di back4app https //www back4app com/docs e ulteriori tutorial qwik per una conoscenza approfondita sui miglioramenti delle prestazioni e integrazioni personalizzate seguendo questo tutorial, ora possiedi le competenze per creare