Come costruire un'applicazione CRUD con Aurelia? Un tutorial completo

panoramica in questa guida, imparerai come creare un'applicazione crud semplice (crea, leggi, aggiorna, elimina) utilizzando il framework aurelia questo tutorial spiega come costruire un'applicazione in grado di gestire operazioni essenziali sui dati integrando aurelia con back4app come servizio backend inizialmente, configurerai un progetto back4app intitolato basic crud app aurelia per servire come il tuo robusto sistema di gestione dei dati successivamente, delineerai una struttura di database scalabile definendo manualmente collezioni e campi—o utilizzando l'ai agent di back4app—per garantire operazioni sui dati affidabili successivamente, sfrutterai l'app admin di back4app, che offre un'interfaccia drag and drop per gestire i tuoi dati senza sforzo infine, collegherai il tuo frontend aurelia con back4app utilizzando chiamate rest/graphql (o il parse sdk dove applicabile), e proteggerai il tuo backend con un controllo degli accessi dettagliato alla fine di questo tutorial, avrai un'applicazione web pronta per la produzione con completa funzionalità crud, autenticazione utente e gestione sicura dei dati principali intuizioni masterizza la creazione di applicazioni crud con un servizio backend affidabile acquisisci competenze pratiche per progettare un backend scalabile e collegarlo a un frontend aurelia esplora un'interfaccia di amministrazione senza codice (back4app admin app) per operazioni sui dati senza soluzione di continuità impara a distribuire la tua applicazione utilizzando tecniche moderne, inclusa la containerizzazione prerequisiti prima di iniziare, assicurati di avere quanto segue un account back4app con un progetto attivo visita iniziare con back4app https //www back4app com/docs/get started/new parse app se hai bisogno di indicazioni un setup di sviluppo aurelia usa l'aurelia cli o uno strumento simile; assicurati di avere node js (versione 14 o successiva) installato competenze di base in javascript, aurelia e rest api consulta la documentazione di aurelia https //aurelia io/docs per ulteriori dettagli se necessario passo 1 – configurare il tuo progetto creare un nuovo progetto back4app accedi al tuo account back4app premi il pulsante “nuova app” dalla tua dashboard inserisci il nome del progetto basic crud app aurelia e completa i passaggi di configurazione crea nuovo progetto dopo la creazione, il tuo progetto sarà visibile sulla tua dashboard, pronto per la configurazione del backend e la gestione dei dati passo 2 – progettare il tuo schema di database creare il modello di dati per questa applicazione crud, definirai più collezioni di seguito sono riportati esempi delle collezioni richieste insieme ai campi e ai tipi di dati necessari per supportare efficacemente le operazioni crud 1\ collezione degli elementi campo tipo di dati dettagli id objectid chiave primaria generata automaticamente titolo stringa nome o titolo dell'elemento descrizione stringa una breve descrizione dell'oggetto creato il data timestamp quando l'elemento è stato creato aggiornato a data timestamp dell'ultima modifica dell'elemento 2\ raccolta utenti campo tipo di dato dettagli id objectid chiave primaria generata automaticamente nome utente stringa identificatore unico per l'utente email stringa indirizzo email unico per la convalida dell'account hash password stringa password crittografata per l'autenticazione dell'utente creato il data timestamp di creazione dell'account aggiornato a data timestamp dell'ultimo aggiornamento dell'account puoi creare queste collezioni manualmente nel pannello di controllo di back4app aggiungendo una nuova classe per ciascuna e definendo le colonne necessarie crea nuova classe imposta facilmente i campi del tuo database scegliendo il tipo di dato corretto, specificando i nomi dei campi, impostando valori predefiniti e indicando se il campo è obbligatorio crea colonna utilizzare l'agente ai di back4app per la creazione dello schema l'agente ai di back4app semplifica la generazione dello schema permettendoti di descrivere il tuo modello di dati attraverso dei prompt questo strumento crea automaticamente collezioni e campi in base alle tue esigenze passaggi per utilizzare l'agente ai avvia l'agente ai apri il tuo dashboard di back4app e trova l'agente ai nelle impostazioni del progetto descrivi il tuo schema inserisci un prompt dettagliato che delinei le collezioni e i campi di cui hai bisogno esamina e conferma esamina 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 metodo accelera il processo di creazione dello schema e garantisce una struttura coerente per la tua applicazione passo 3 – attivazione dell'interfaccia di amministrazione e funzionalità crud esplorare l'interfaccia di amministrazione l'app admin di back4app è una soluzione robusta senza codice che ti consente di gestire i tuoi dati di backend attraverso un'interfaccia intuitiva drag and drop questo strumento semplifica l'esecuzione delle operazioni crud attivazione dell'app admin apri il menu “altro” nel tuo dashboard di back4app seleziona “admin app” e poi clicca “abilita admin app ” imposta le tue credenziali di amministratore creando il tuo account amministratore iniziale, che stabilisce anche i ruoli predefiniti (come b4aadminuser ) e le collezioni di sistema abilita admin app dopo aver abilitato, accedi all'admin app per iniziare a gestire i tuoi dati dashboard admin app eseguire operazioni crud con l'admin app all'interno di questa interfaccia puoi creare voci usa l'opzione “aggiungi record” in una collezione (ad es , articoli) per aggiungere nuovi dati visualizzare/modificare voci clicca su qualsiasi record per ispezionare i suoi dettagli o apportare modifiche rimuovere voci seleziona l'opzione di eliminazione per eliminare i dati che non sono più necessari questa interfaccia semplifica le tue operazioni sui dati, migliorando l'esperienza dell'utente con il suo design intuitivo passo 4 – collegare aurelia a back4app con il tuo backend configurato e gestito tramite l'app admin, è tempo di collegare il tuo frontend aurelia a back4app utilizzando rest o graphql puoi utilizzare le api rest o graphql ad esempio, per recuperare elementi tramite rest // example rest request to get items async function fetchitems() { 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 fetched ', data results); } catch (error) { console error('fetch error ', error); } } fetchitems(); integra queste chiamate api all'interno dei tuoi componenti aurelia secondo necessità passo 5 – proteggere il tuo backend implementazione delle liste di controllo degli accessi (acl) migliora la sicurezza assegnando acl ai tuoi oggetti dati ad esempio, per creare un elemento privato async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access to the owner only const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error saving secure item ', error); } } impostazione dei permessi a livello di classe (clp) all'interno del dashboard di back4app, regola i clp per ogni collezione per applicare regole di sicurezza predefinite, assicurando che solo gli utenti autenticati o autorizzati possano accedere a informazioni sensibili passo 6 – gestire l'autenticazione degli utenti configurazione degli account utente back4app utilizza la classe utente di parse per gestire l'autenticazione nella tua app aurelia, puoi gestire la registrazione e il login degli utenti come illustrato di seguito // src/resources/components/auth js import { observable } from 'aurelia framework'; import parse from ' / /parse config'; export class auth { @observable username = ''; @observable password = ''; @observable email = ''; async signup(event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration error ' + error message); } } } un modello simile può essere implementato per il login e la gestione delle sessioni funzionalità aggiuntive, come l'integrazione del login sociale, la verifica dell'email e il ripristino della password, possono essere configurate tramite il dashboard di back4app passo 7 – distribuzione del tuo frontend aurelia tramite distribuzione web la funzione di distribuzione web di back4app ti consente di ospitare la tua applicazione aurelia in modo efficiente distribuendo il codice da un repository github in questa sezione, preparerai la tua build di produzione, committerai il tuo codice su github, collegherai il tuo repository con la distribuzione web e distribuirai il tuo sito 7 1 crea la tua build di produzione apri la directory del tuo progetto nel terminale esegui il comando di build au build env production questo comando genera una dist cartella contenente le tue risorse statiche ottimizzate conferma la build assicurati che la dist cartella includa un index html e le sottodirectory necessarie per javascript, css e immagini 7 2 organizza e carica il codice del tuo progetto il tuo repository github dovrebbe contenere tutti i file sorgente per il tuo frontend aurelia una struttura di esempio potrebbe essere basic crud app aurelia frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parse config js \| ` resources/ \| | components/ \| | | items list js \| | ` auth js \| package json ` readme md file di esempio src/parse config 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 import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } impegnare il tuo codice su github inizializza git nella tua cartella di progetto (se non è già stato fatto) git init metti in fase i tuoi file git add impegnare le tue modifiche git commit m "impegno iniziale del codice sorgente frontend di aurelia" crea un repository su github (ad esempio, basic crud app aurelia frontend ) invia il tuo codice su github git remote add origin https //github com/your username/basic crud app aurelia frontend git git push u origin main 7 3 collegare il tuo repository github con il web deployment accedi al web deployment accedi al tuo dashboard di back4app, naviga al tuo progetto (basic crud app aurelia) e seleziona l'opzione web deployment collegati a github segui le istruzioni per integrare il tuo account github, concedendo a back4app l'accesso al tuo repository scegli il tuo repository e branch seleziona il repository (ad esempio, basic crud app aurelia frontend ) e il branch (ad esempio, main ) contenente il tuo codice 7 4 configurazione del deployment imposta i seguenti dettagli di configurazione comando di build se la dist cartella non è pre costruita, specifica un comando (ad es , au build env production ) da eseguire per back4app directory di output imposta questo su dist in modo che back4app sappia dove si trovano i tuoi file statici variabili d'ambiente aggiungi eventuali variabili d'ambiente richieste (come le chiavi api) nelle impostazioni di configurazione 7 5 contenere la tua applicazione aurelia (docker) se preferisci il deployment con docker, includi un dockerfile nel tuo repository simile al seguente \# use an official node image as the build environment from node 16 alpine as build \# set 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 au build env production \# use nginx to serve the production build from nginx\ stable alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configura l'opzione di deployment docker in web deployment di conseguenza 7 6 distribuire la tua applicazione premi il pulsante di distribuzione dopo aver configurato la distribuzione, fai clic su distribuisci monitora il processo di build back4app recupererà il tuo codice da github, eseguirà il comando di build se necessario e distribuirà la tua applicazione in un contenitore recupera il tuo url una volta completata la distribuzione, back4app fornirà l'url dove è ospitata la tua applicazione aurelia 7 7 verificare la tua distribuzione apri l'url fornito visita l'url nel tuo browser per vedere il tuo sito live testa l'applicazione assicurati che la tua applicazione si carichi correttamente, che le route funzionino come previsto e che tutte le risorse (css, javascript, immagini) siano servite risolvi i problemi se necessario utilizza gli strumenti per sviluppatori del browser per diagnosticare eventuali problemi e rivedi i log di distribuzione di back4app se necessario passo 8 – conclusione e direzioni future congratulazioni! hai costruito con successo un'applicazione crud completa utilizzando aurelia e back4app hai impostato un progetto chiamato basic crud app aurelia , definito schemi di database completi per articoli e utenti, e gestito i tuoi dati utilizzando l'app di amministrazione di back4app hai anche integrato il tuo frontend aurelia con il backend e implementato misure di sicurezza robuste prossimi passi migliora la tua ui espandi la tua applicazione aurelia con viste dettagliate, funzionalità di ricerca e aggiornamenti di dati in tempo reale aggiungi funzionalità avanzate considera di incorporare funzioni cloud, api di terze parti o permessi basati sui ruoli esplora ulteriormente dai un'occhiata alla documentazione di back4app https //www back4app com/docs e ulteriori risorse aurelia per una guida più approfondita su ottimizzazione e personalizzazione buon coding e buona fortuna nel tuo percorso di sviluppo!