Come creare un'applicazione CRUD con Blazor?

panoramica questa guida ti guiderà nella creazione di un'applicazione crud completa (crea, leggi, aggiorna, elimina) utilizzando blazor in questo tutorial, configurerai un progetto back4app, progetterai il tuo schema di database e integrerai il tuo frontend blazor con back4app tramite api rest questo processo ti aiuterà a stabilire un backend robusto garantendo che la tua applicazione web possa gestire i dati in modo efficiente inizialmente, imposterai un progetto back4app intitolato basic crud app blazor , che servirà da spina dorsale del tuo sistema di gestione dei dati successivamente, creerai un design di database scalabile stabilendo collezioni e campi dettagliati, sia manualmente che con l'assistenza dell'ai agent di back4app dopo, sfrutterai il potere dell'app admin di back4app—un'interfaccia intuitiva e drag and drop—per gestire le tue collezioni senza sforzo infine, collegherai il tuo frontend blazor a back4app utilizzando api rest e proteggerai il tuo backend con un adeguato controllo degli accessi entro la fine di questo tutorial, avrai un'applicazione web pronta per la produzione che supporta le operazioni crud essenziali insieme all'autenticazione degli utenti e aggiornamenti sicuri dei dati punti chiave di apprendimento costruisci applicazioni crud che gestiscono le operazioni sui dati senza problemi utilizzando un backend affidabile acquisisci informazioni su come creare un backend scalabile e integrarlo con un frontend blazor utilizza le capacità di trascinamento e rilascio dell'app back4app admin per semplificare la gestione dei dati impara tecniche di distribuzione, inclusa la containerizzazione docker, per lanciare rapidamente la tua applicazione prerequisiti prima di iniziare, assicurati di avere un account back4app e un nuovo progetto impostato visita iniziare con back4app https //www back4app com/docs/get started/new parse app se hai bisogno di assistenza un ambiente di sviluppo blazor usa visual studio o visual studio code con l'ultima versione del net sdk (versione 6 o superiore) conoscenze di base di c#, blazor e api restful controlla la documentazione di blazor https //docs microsoft com/en us/aspnet/core/blazor se necessario passo 1 – configurazione iniziale del progetto creazione di un nuovo progetto back4app accedi al tuo account back4app seleziona il pulsante “nuova app” dalla tua dashboard inserisci il titolo del progetto basic crud app blazor e segui le istruzioni sullo schermo per completare il processo di creazione crea nuovo progetto dopo la configurazione, il tuo nuovo progetto verrà visualizzato sulla tua dashboard, fornendo una solida base per configurare il tuo backend passo 2 – progettazione del tuo schema di database creare il tuo modello di dati per questa applicazione crud di base, dovrai creare diverse collezioni di seguito sono riportati esempi delle collezioni insieme ai campi richiesti e ai tipi di dati per configurare il tuo database in modo efficiente 1\ raccolta di articoli campo tipo di dato scopo id objectid identificatore unico generato automaticamente titolo stringa il nome o titolo dell'elemento descrizione stringa un breve riassunto dell'elemento creato il data il timestamp quando l'elemento è stato creato aggiornato a data il timestamp quando l'elemento è stato modificato per l'ultima volta 2\ raccolta utenti campo tipo di dato scopo id objectid identificatore unico generato automaticamente nome utente stringa identificatore unico per l'utente email stringa indirizzo email dell'utente hash password stringa password crittografata per un accesso sicuro creato il data timestamp della creazione dell'account aggiornato a data timestamp dell'ultimo aggiornamento dell'account puoi creare queste collezioni manualmente nel dashboard di back4app stabilendo una nuova classe per ogni collezione e aggiungendo le colonne necessarie crea nuova classe puoi definire colonne scegliendo un tipo di dato, nominando il campo, impostando valori predefiniti e determinando se il campo è obbligatorio crea colonna utilizzare l'agente ai di back4app per la creazione dello schema l'agente ai di back4app semplifica la creazione dello schema direttamente dal tuo dashboard inserendo un prompt che dettaglia le tue collezioni e i campi, l'agente ai genera automaticamente lo schema del database necessario come utilizzare l'agente ai accedi all'agente ai accedi al tuo dashboard di back4app e trova l'agente ai nelle impostazioni o nel menu principale definisci il tuo modello di dati incolla un prompt descrittivo che elenchi le collezioni e i loro campi rivedi e conferma controlla lo schema suggerito e applicalo 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) utilizzare questo agente ai non solo fa risparmiare tempo, ma garantisce anche una configurazione dello schema coerente ed efficiente 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, drag and drop per gestire i tuoi dati di backend questo strumento intuitivo ti consente di eseguire operazioni crud con facilità attivare l'app admin naviga nel “altro” menu nel tuo dashboard di back4app clicca su “app admin” e poi seleziona “abilita app admin ” configura le tue credenziali di amministratore creando un utente amministratore iniziale, che stabilirà anche ruoli predefiniti e collezioni di sistema abilita app admin dopo aver abilitato, accedi all'app admin per gestire le tue collezioni e i tuoi dati dashboard app admin eseguire operazioni crud con l'app admin all'interno dell'app admin puoi creare record clicca sul pulsante “aggiungi record” all'interno di una collezione (ad esempio, articoli) per aggiungere nuove voci leggere/aggiornare record clicca su un record per ispezionare i suoi dettagli o modificare i suoi campi eliminare record rimuovi voci che non sono più necessarie questa semplice interfaccia drag and drop migliora significativamente l'esperienza di gestione dei dati passo 4 – collegare blazor con back4app ora che il tuo backend è configurato, è tempo di integrare il tuo frontend blazor con back4app utilizzare le api rest in blazor poiché il parse sdk non è applicabile a blazor, utilizzerai le api rest per eseguire operazioni crud nella tua applicazione blazor, utilizza l'httpclient per interagire con gli endpoint rest di back4app esempio recupero di elementi tramite rest crea un servizio nel tuo progetto blazor per recuperare elementi ad esempio // services/itemservice cs using system net http; using system net http headers; using system text json; using system threading tasks; using system collections generic; public class item { public string id { get; set; } public string title { get; set; } public string description { get; set; } } public class itemservice { private readonly httpclient httpclient; private const string baseurl = "https //parseapi back4app com/classes/items"; public itemservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task\<list\<item>> getitemsasync() { var response = await httpclient getasync(baseurl); response ensuresuccessstatuscode(); var json = await response content readasstringasync(); var itemsdata = jsonserializer deserialize\<itemsresponse>(json); return itemsdata results; } } public class itemsresponse { public list\<item> results { get; set; } } integra tali chiamate api all'interno dei tuoi componenti blazor per gestire le operazioni crud passo 5 – sicurezza del tuo backend implementazione delle liste di controllo degli accessi (acl) proteggi i tuoi dati impostando acl sui tuoi oggetti ad esempio, per creare un elemento privato public async task createprivateitemasync(item newitem, string ownerid) { // prepare your item data with proper access controls // in your rest call, include acl information as required by your backend // this is a conceptual example; refer to back4app documentation for acl details } configurazione delle autorizzazioni a livello di classe (clp) all'interno del dashboard di back4app, regola le clp per ogni collezione per garantire che solo gli utenti autorizzati possano accedere o modificare dati sensibili passo 6 – gestione dell'autenticazione degli utenti impostazione degli account utente in blazor back4app utilizza la classe user di parse per gestire l'autenticazione nella tua app blazor, gestisci la registrazione e l'accesso degli utenti tramite chiamate rest ad esempio // services/authservice cs using system net http; using system net http json; using system threading tasks; public class authservice { private readonly httpclient httpclient; private const string signupurl = "https //parseapi back4app com/users"; public authservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task signupasync(string username, string password, string email) { var user = new { username, password, email }; var response = await httpclient postasjsonasync(signupurl, user); response ensuresuccessstatuscode(); // handle success, such as storing tokens or redirecting the user } } metodi simili possono essere implementati per la gestione del login e delle sessioni funzionalità aggiuntive come accessi social, verifica email e recupero password possono essere configurate tramite il dashboard di back4app passo 7 – distribuzione del tuo frontend blazor la funzione di distribuzione web di back4app ti consente di ospitare senza problemi la tua applicazione blazor distribuendo il tuo codice da un repository github 7 1 creazione della tua build di produzione apri la directory del tuo progetto in un terminale esegui il comando di pubblicazione dotnet publish c release questo comando genera una cartella pubblicata con file statici ottimizzati per la tua app blazor verifica la build conferma che la cartella di output contenga i file necessari (ad esempio, index html , javascript, css, ecc ) 7 2 organizzazione e caricamento del tuo codice il tuo repository git dovrebbe racchiudere l'intero sorgente della tua applicazione blazor una struttura di cartelle di esempio potrebbe essere basic crud app blazor frontend/ \| wwwroot/ \| | index html \| pages/ \| | index razor \| | items razor \| | login razor \| services/ \| | itemservice cs \| | authservice cs \| program cs \| basic crud app blazor csproj \| readme md file di esempio program cs using microsoft aspnetcore components web; using microsoft aspnetcore components webassembly hosting; using basic crud app blazor; using basic crud app blazor services; var builder = webassemblyhostbuilder createdefault(args); builder rootcomponents add\<app>("#app"); builder rootcomponents add\<headoutlet>("head after"); builder services addscoped(sp => new httpclient { baseaddress = new uri(builder hostenvironment baseaddress) }); builder services addscoped\<itemservice>(); builder services addscoped\<authservice>(); await builder build() runasync(); impegnare e inviare a github inizializza git nella tua cartella di progetto (se non è già stato fatto) git init aggiungi i tuoi file git add impegnare le tue modifiche git commit m "impegno iniziale del codice sorgente del frontend blazor" crea un repository github chiamalo basic crud app blazor frontend invia il tuo repository git remote add origin https //github com/your username/basic crud app blazor frontend git git push u origin main 7 3 integrazione del tuo repository con il deployment web accedi all'opzione di distribuzione web nel tuo dashboard di back4app, apri il tuo progetto ( basic crud app blazor ) e naviga alla sezione distribuzione web collega il tuo account github segui le istruzioni per collegare il tuo account github, consentendo a back4app di accedere al tuo repository seleziona il repository e il branch scegli il repository (ad esempio, basic crud app blazor frontend ) e il branch (ad esempio, main ) che contiene il tuo codice blazor 7 4 configurazione della distribuzione fornire ulteriori dettagli come comando di costruzione se la cartella pubblicata non è pre generata, specificare un comando come dotnet publish c release directory di output impostare il percorso di output (ad esempio, bin/release/net6 0/wwwroot ) variabili di ambiente aggiungere eventuali impostazioni ambientali richieste (come le chiavi api) nella configurazione 7 5 contenere la tua applicazione blazor con docker se preferisci docker per il deployment, includi un dockerfile nel tuo repository ecco un esempio \# use the official net sdk image for building the app from mcr microsoft com/dotnet/sdk 6 0 as build workdir /src copy \["basic crud app blazor csproj", " /"] run dotnet restore "basic crud app blazor csproj" copy run dotnet publish "basic crud app blazor csproj" c release o /app/publish \# use the official asp net core runtime image to run the app from mcr microsoft com/dotnet/aspnet 6 0 as runtime workdir /app copy from=build /app/publish expose 80 entrypoint \["dotnet", "basic crud app blazor dll"] quindi, nelle impostazioni di distribuzione web, seleziona l'opzione docker per distribuire la tua applicazione containerizzata 7 6 lancio della tua applicazione inizia il deployment clicca sul deploy pulsante nel dashboard di back4app monitora la build back4app recupererà il tuo codice da github, eseguirà il comando di build se necessario e distribuirà la tua app in un contenitore ottieni il tuo url una volta completato il processo di deployment, back4app fornirà un url per la tua applicazione blazor ospitata 7 7 conferma del deployment apri l'url fornito visita l'url in un browser per visualizzare la tua app distribuita testa l'applicazione verifica che tutte le pagine si carichino correttamente e che le operazioni crud funzionino come previsto risolvi i problemi se necessario utilizza gli strumenti per sviluppatori del browser e rivedi i log di deployment su back4app per diagnosticare eventuali problemi passo 8 – riepilogo e ulteriore esplorazione congratulazioni! hai costruito con successo un'applicazione crud di base utilizzando blazor e back4app hai impostato un progetto intitolato basic crud app blazor , progettato collezioni per articoli e utenti, e utilizzato l'app admin di back4app per una gestione dei dati senza soluzione di continuità inoltre, hai integrato il tuo frontend blazor con back4app utilizzando le api rest e applicato misure di sicurezza robuste passi futuri espandi il tuo frontend migliora la tua app blazor con viste più dettagliate, funzionalità di ricerca o notifiche in tempo reale aggiungi funzionalità avanzate considera di incorporare funzioni cloud, integrazioni di terze parti o permessi basati sui ruoli consulta risorse aggiuntive rivedi la documentazione di back4app https //www back4app com/docs e altri tutorial avanzati per ottimizzare ulteriormente e ampliare la tua applicazione seguendo questa guida, ora hai le basi per costruire un backend crud scalabile e sicuro per la tua applicazione blazor utilizzando back4app buon coding!