How to Build a Basic CRUD App with Angular?

introduzione in questa guida, ti guideremo attraverso il processo di costruzione di una semplice applicazione crud (crea, leggi, aggiorna, elimina) utilizzando angular imparerai a sviluppare un'applicazione che gestisce in modo efficiente le operazioni sui dati sfruttando il robusto framework di angular per iniziare, creerai e configurerai un nuovo progetto back4app intitolato basic crud app angular , che servirà come base per la gestione dei dati del tuo backend successivamente, progetterai un modello di database scalabile delineando collezioni e campi dettagliati—sia manualmente che con l'assistenza dell'agente ai di back4app questo passaggio garantisce che il tuo sistema sia ben preparato per gestire tutte le funzionalità crud dopo aver impostato il tuo schema, esplorerai l'app admin di back4app, un'interfaccia intuitiva drag and drop, per gestire facilmente le tue collezioni e i tuoi record infine, integrerai il tuo frontend angular con back4app utilizzando rest/graphql (o il parse sdk, se preferito), implementando anche misure di sicurezza avanzate per proteggere il tuo backend alla fine di questo tutorial, avrai costruito un'applicazione angular pronta per la produzione con funzionalità di autenticazione utente e complete capacità crud punti chiave impara a costruire applicazioni crud che gestiscono i dati in modo efficiente con un backend affidabile acquisisci intuizioni pratiche su come creare un modello di dati scalabile e collegarlo a un frontend angular scopri come utilizzare l'interfaccia user friendly dell'app admin di back4app per una gestione dei dati senza sforzo comprendi le strategie di distribuzione, inclusa la containerizzazione docker, per lanciare rapidamente la tua app angular requisiti prima di iniziare, assicurati di avere quanto segue un account back4app con un nuovo progetto configurato hai bisogno di aiuto? dai un'occhiata a iniziare con back4app https //www back4app com/docs/get started/new parse app un ambiente di sviluppo angular installa angular cli eseguendo npm install g @angular/cli e crea un nuovo progetto usando ng new assicurati che node js (versione 14 o superiore) sia installato una comprensione di base di typescript, angular e rest api per un ripasso, visita la documentazione di angular https //angular io/docs passo 1 – configurare il tuo progetto lancio di un nuovo progetto back4app accedi al tuo account back4app clicca sul pulsante “nuova app” dalla tua dashboard inserisci il nome del progetto basic crud app angular e segui le istruzioni di configurazione crea nuovo progetto una volta creato il progetto, apparirà sulla tua dashboard di back4app, fornendo una solida base per la configurazione del tuo backend passo 2 – creazione del tuo schema di database costruzione del tuo modello di dati per questa applicazione crud, definirai diverse collezioni di seguito sono riportati esempi delle collezioni e dei loro campi che formeranno la base del tuo schema di database queste collezioni consentono all'applicazione di eseguire operazioni crud essenziali 1 raccolta di articoli questa raccolta memorizza informazioni per ogni articolo campo tipo di dato dettagli id objectid identificatore unico generato automaticamente titolo stringa il titolo dell'elemento descrizione stringa un breve riassunto dell'elemento creato il data timestamp per quando l'elemento è stato aggiunto aggiornato a data timestamp per l'ultimo aggiornamento 2 raccolta utenti questa collezione mantiene le credenziali degli utenti e i dati di autenticazione campo tipo di dato descrizione id objectid identificatore unico generato automaticamente nome utente stringa un identificatore unico per l'utente email stringa un indirizzo email distinto hash password stringa password crittografata in modo sicuro per l'autenticazione creato il data timestamp che indica quando è stato creato l'account aggiornato a data timestamp dell'aggiornamento più recente puoi impostare queste collezioni manualmente nel pannello di controllo di back4app creando una nuova classe per ciascuna e aggiungendo colonne per definire i campi crea nuova classe aggiungi colonne scegliendo un tipo di dato, nominando il campo, impostando un valore predefinito e segnando se è obbligatorio crea colonna sfruttare l'agente ai di back4app per la configurazione dello schema l'agente ai di back4app è uno strumento versatile disponibile nel tuo dashboard che ti consente di generare automaticamente il tuo schema di database basato su un prompt descrittivo questa funzionalità fa risparmiare tempo e garantisce che il tuo backend sia perfettamente adattato per le operazioni crud passaggi per utilizzare l'agente ai apri l'agente ai accedi al tuo dashboard di back4app e trova l'opzione agente ai descrivi il tuo schema inserisci un prompt dettagliato che delinei le collezioni e i campi di cui hai bisogno rivedi e conferma dopo l'invio, rivedi lo schema generato e applicalo al tuo progetto esempio di prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) questo approccio potenziato dall'ai semplifica il processo e garantisce uno schema coerente e ottimizzato passo 3 – attivazione dell'app admin e gestione delle operazioni crud uno sguardo all'app admin l'app admin di back4app fornisce un'interfaccia senza codice, drag and drop che ti consente di gestire i tuoi dati backend senza sforzo con esso, puoi facilmente eseguire operazioni crud come aggiungere, visualizzare, modificare e eliminare record attivare l'app admin naviga nel menu “altro” nel tuo dashboard di back4app seleziona “app admin” e clicca “abilita app admin ” imposta le tue credenziali di amministratore crea il tuo utente amministratore iniziale, che configurerà anche i ruoli (ad es , b4aadminuser ) e le collezioni di sistema abilita app admin dopo l'attivazione, accedi all'app admin per gestire le tue collezioni e record dashboard app admin utilizzare l'app admin per compiti crud all'interno dell'app admin, puoi aggiungere nuovi record clicca “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 aggiornare i suoi campi rimuovere record usa l'opzione di eliminazione per rimuovere record obsoleti questa interfaccia intuitiva semplifica notevolmente la gestione dei tuoi dati di backend passo 4 – collegare il tuo frontend angular a back4app ora che il tuo backend è completamente configurato e gestito tramite l'app admin, è tempo di collegare il tuo frontend angular a back4app opzione a integrare il parse sdk con angular installa il parse sdk npm install parse configura parse nel tuo progetto angular crea un file di configurazione (ad esempio, src/app/parse config ts ) // src/app/parse config ts import parse from 'parse'; // sostituisci con le tue credenziali back4app reali parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 3\ implement parse in an angular component for example, create a component to fetch and display items ```typescript // src/app/components/items list/items list component ts import { component, oninit } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app items list', templateurl ' /items list component html', styleurls \[' /items list component css'] }) export class itemslistcomponent implements oninit { items any\[] = \[]; async ngoninit() { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error retrieving items ', error); } } } e nel template html ( items list component html ) items {{ item get('title') }} – {{ item get('description') }} opzione b utilizzare rest o graphql se preferisci non utilizzare il parse sdk, puoi eseguire operazioni crud tramite rest o graphql ad esempio, per recuperare articoli utilizzando rest in angular, crea un metodo di servizio come questo // src/app/services/items service ts import { injectable } from '@angular/core'; import { httpclient, httpheaders } from '@angular/common/http'; import { observable } from 'rxjs'; @injectable({ providedin 'root' }) export class itemsservice { private apiurl = 'https //parseapi back4app com/classes/items'; constructor(private http httpclient) { } getitems() observable\<any> { const headers = new httpheaders({ 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }); return this http get(this apiurl, { headers }); } } puoi integrare queste chiamate api all'interno dei tuoi componenti angular secondo necessità passo 5 – proteggere il tuo backend implementazione delle liste di controllo degli accessi (acl) migliora la sicurezza dei tuoi dati assegnando acl ai tuoi oggetti ad esempio, per creare un elemento accessibile solo dal suo proprietario async function createsecureitem(itemdata any, owneruser any) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // assign 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('secure item created ', saveditem); } catch (error) { console error('error creating item ', error); } } configurazione dei permessi a livello di classe (clp) all'interno del dashboard di back4app, regola i clp per ogni collezione per impostare le regole di accesso predefinite, assicurandoti che solo gli utenti autenticati o autorizzati possano accedere ai dati sensibili passo 6 – gestire l'autenticazione degli utenti creazione e gestione degli account utente back4app utilizza la classe user di parse per gestire l'autenticazione nel tuo progetto angular, puoi gestire la registrazione e il login degli utenti come segue // src/app/components/auth/auth component ts import { component } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app auth', templateurl ' /auth component html', styleurls \[' /auth component css'] }) export class authcomponent { username string = ''; password string = ''; email string = ''; async signup(event 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('user registration successful!'); } catch (error any) { alert('registration error ' + error message); } } } e il corrispondente template html ( auth component html ) register register register register un approccio simile può essere applicato per il login degli utenti e la gestione delle sessioni per funzionalità come i login social o il ripristino delle password, regola le tue impostazioni nel dashboard di back4app passo 7 – distribuzione del tuo frontend angular la funzione di distribuzione web di back4app ti consente di ospitare la tua applicazione angular distribuendo il codice direttamente da un repository github in questa sezione, preparerai la tua build di produzione, committerai il tuo codice sorgente e integrerai il tuo repository per la distribuzione 7 1 creazione della tua versione di produzione apri la directory del tuo progetto in un terminale esegui il comando di build di produzione ng build prod questo comando compila la tua applicazione angular in una cartella ottimizzata dist/ verifica la build assicurati che la cartella dist/ contenga il file index html e tutte le risorse necessarie 7 2 strutturare e caricare il tuo codice sorgente il tuo repository dovrebbe contenere l'intero progetto angular una struttura di file tipica potrebbe apparire così basic crud app angular/ ├── node modules/ ├── src/ │ ├── app/ │ │ ├── app component ts │ │ ├── app module ts │ │ └── components/ │ │ ├── auth/ │ │ │ ├── auth component ts │ │ │ └── auth component html │ │ └── items list/ │ │ ├── items list component ts │ │ └── items list component html ├── angular json ├── package json └── readme md esempio src/app/parse config ts // src/app/parse config ts import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; esempio src/app/app component ts import { component } from '@angular/core'; import parse from ' /parse config'; @component({ selector 'app root', template ` \<div style="padding 2rem;"> \<h1>items\</h1> \<app items list>\</app items list> \</div> `, styles \[] }) export class appcomponent { } impegnare il tuo codice su github inizializza un repository git nella tua cartella di progetto se non lo hai già fatto git init aggiungi i tuoi file di progetto git add impegnare le tue modifiche git commit m "impegno iniziale per il frontend angular" crea un repository github ad esempio, chiamalo basic crud app angular invia il tuo codice su github git remote add origin https //github com/your username/basic crud app angular git git push u origin main 7 3 collegare il tuo repository github con il web deployment accedi alla funzionalità di web deployment accedi al tuo dashboard di back4app, seleziona il tuo progetto ( basic crud app angular ), e scegli web deployment collega il tuo account github segui le istruzioni per integrare il tuo account github, consentendo a back4app di accedere al tuo repository seleziona il tuo repository e il ramo scegli il tuo repository (ad esempio, basic crud app angular ) e il ramo (ad esempio, main ) che contiene il tuo codice 7 4 configurare le impostazioni di deployment fornisci i dettagli di configurazione necessari comando di build se il tuo repository non ha una cartella pre costruita dist/ specifica il comando di build (ad esempio, ng build prod ) directory di output imposta la directory di output su dist/il tuo nome progetto in modo che back4app sappia dove si trovano i tuoi file statici variabili di ambiente aggiungi eventuali variabili di ambiente richieste (come le chiavi api) nella configurazione di deployment 7 5 containerizzare la tua applicazione angular con docker se preferisci un deployment basato su docker, includi un dockerfile nel tuo repository ad esempio # use an official node image to build the angular app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application and build it copy run npm run build prod \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/dist/your project name /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] includi questo dockerfile nel tuo repository, quindi seleziona l'opzione di distribuzione docker nelle impostazioni di distribuzione web di back4app 7 6 avviare la tua applicazione clicca sul pulsante di distribuzione una volta configurate le impostazioni di distribuzione, clicca su distribuisci monitora il processo di distribuzione back4app preleverà il tuo codice, eseguirà il comando di build se necessario e distribuirà la tua app angular recupera il tuo url dopo una distribuzione riuscita, back4app fornirà un url dove la tua applicazione è attiva 7 7 testare la tua applicazione distribuita visita l'url fornito apri l'url nel tuo browser verifica la funzionalità assicurati che la tua app angular si carichi correttamente, che tutte le rotte funzionino come previsto e che le risorse siano servite correttamente risolvi i problemi se necessario usa gli strumenti per sviluppatori del browser per identificare e risolvere eventuali problemi controlla i log di distribuzione di back4app e la tua configurazione se si verificano problemi passo 8 – conclusione e direzioni future congratulazioni! hai costruito con successo una base di applicazione crud utilizzando angular e back4app hai impostato un progetto chiamato basic crud app angular , progettato collezioni di database complete per articoli e utenti, e gestito i tuoi dati utilizzando l'intuitiva admin app inoltre, hai collegato il tuo frontend angular al tuo backend e implementato misure di sicurezza robuste prossimi passi migliora il tuo frontend estendi la tua applicazione angular con funzionalità avanzate come visualizzazioni dettagliate degli articoli, funzionalità di ricerca e aggiornamenti in tempo reale espandi la funzionalità considera di integrare logica backend aggiuntiva (come le cloud functions) o implementare il controllo degli accessi basato sui ruoli esplora risorse aggiuntive dai un'occhiata alla documentazione di back4app https //www back4app com/docs e ad altre risorse angular per approfondire la tua comprensione con questa guida, sei ora attrezzato per costruire backend crud robusti e scalabili per le tue applicazioni angular utilizzando back4app buon coding!