Programmare con Blazor in 10 step

Programmare con Blazor in 10 step

 
Ha un nome fighissimo che sembra uscito da un film coi supereroi: stiamo parlando di Microsoft Blazor, uno strumento di coding che supereroe forse lo è davvero.
 
Oggi vogliamo “festeggiarlo” facendo un regalo a tutti i programmatori alle prime armi che ci leggono: una mini guida introduttiva proprio a questo framework di sviluppo che per potenza, versatilità e completezza è probabilmente il più in auge del momento!
 
Solo una premessa: finora abbiamo dedicato molti dei nostri articoli ad argomenti di informatica generica e solo in parte al coding. Questo articolo invece - facendo parte della nostra rubrica tecnica e periodica ComprESSEI - è dedicato proprio al coding e si rivolge ai coder. Hai ricevuto questo articolo via mail perché iscritto alla nostra newsletter? È possibile che non sia di tuo interesse. In tal caso non preoccuparti: ti invitiamo a tornare sul blog la prossima settimana per un contenuto più “leggero” oppure a dare un’occhiata al nostro blog dove troverai sicuramente articoli più adatti a te.
 
Ma veniamo alla nostra guida.
 

Cos’è, più nel dettaglio, Blazor?

Blazor è un framework di sviluppo di tipo open source sviluppato da Microsoft che consente agli sviluppatori di creare applicazioni web interattive e dinamiche utilizzando il linguaggio di programmazione C# e il runtime .NET anziché dover ricorrere a linguaggi lato client come JavaScript. 
 
Questa è senza dubbio la sua prerogativa maggiore, oltre che fattore di successo.
 
Ma c’entra anche il suo funzionamento: Blazor presenta una netta separazione tra il modo in cui calcola i cambiamenti dell’interfaccia utente (modello dell’app/componente) e il modo in cui questi cambiamenti vengono applicati (renderizzatore), cosa che differenzia Blazor da altri framework UI come Angular o ReactJS/React Native che, invece, possono solo creare interfacce utente basate su tecnologie web. Utilizzando renderizzatori differenti, Blazor è in grado di creare non solo interfacce utente basate su web, ma anche interfacce utente native per dispositivi mobili.
 
Insomma Blazor è probabilmente oggi la principale porta d’ingresso per chi vuole avvicinarsi alla programmazione in modo serio e professionale.

Le principali caratteristiche di Blazor includono:
  • Utilizzo di C#: Blazor consente agli sviluppatori di scrivere codice lato client e lato server utilizzando il linguaggio C#. Ciò significa che gli sviluppatori possono condividere il codice tra i due ambienti, semplificando la manutenzione e riducendo il rischio di errori.
  • Esecuzione su WebAssembly o lato server: Blazor offre due modi principali di esecuzione. La prima è l’esecuzione su WebAssembly, che consente di eseguire applicazioni Blazor direttamente nel browser del cliente. La seconda opzione è l’esecuzione lato server, dove la logica dell’applicazione viene eseguita sul server e la UI viene aggiornata dinamicamente sul client.
  • Componenti riutilizzabili: Blazor segue il concetto di “componenti”, ovvero blocchi di interfaccia utente autonomi. I componenti possono essere riutilizzati in diverse parti dell’applicazione, facilitando la creazione di interfacce coerenti e manutenibili.
  • Integrazione con .NET: poiché Blazor è parte dell’ecosistema .NET, gli sviluppatori possono beneficiare di tutte le librerie e i framework disponibili in .NET. Ciò include accesso ai dati, autenticazione, servizi di terze parti e altro ancora.
  • Interoperabilità con JavaScript: Blazor offre un’interoperabilità fluida con JavaScript. Gli sviluppatori possono chiamare codice JavaScript da C# e viceversa, consentendo un’integrazione agevole di librerie esistenti in JavaScript o l’utilizzo di funzionalità specifiche del browser.
  • Ciclo di vita dei componenti: i componenti Blazor seguono un ciclo di vita che definisce i momenti chiave nel ciclo di vita di un componente, come la creazione, l’aggiornamento e la distruzione. Ciò consente agli sviluppatori di gestire il comportamento e le risorse in modo appropriato durante il ciclo di vita del componente.
  • Routing integrato: Blazor include un sistema di routing integrato che semplifica la gestione della navigazione all’interno dell’applicazione.


Blazor offre agli sviluppatori una soluzione completa per la creazione di applicazioni web moderne garantendo una coerenza tra il lato client e il lato server.

È una scelta interessante per chi è già familiare con lo sviluppo su piattaforma .NET e desidera portare queste competenze nel mondo delle applicazioni web. E con il recente lancio di .NET8, tra l’altro, è divenuto uno strumento completo da usarsi a 360°, ovvero non solo “lato server” ma anche "lato client”: praticamente un “full-stack web UI framework.

 

 

Passo 1: installa l’ambiente di sviluppo

Per iniziare a sviluppare con Blazor per prima cosa è fondamentale avere un ambiente di sviluppo configurato correttamente. Ecco come fare:

  • Installa Visual Studio assicurandoti di avere la versione più recente. Puoi scaricare l’ultima versione di Visual Studio Community gratuitamente dal sito ufficiale di Microsoft (https://visualstudio.microsoft.com/). Durante l’installazione, assicurati di selezionare i carichi di lavoro necessari. Seleziona quindi “Sviluppo ASP.NET e Web.

  • Se preferisci utilizzare Visual Studio Code, assicurati di averlo installato. Puoi scaricarlo dal sito ufficiale (https://code.visualstudio.com/). Dopo l’installazione, apri Visual Studio Code e installa l’estensione Blazor.
  • Configurazione di .NET Core SDK: Blazor utilizza .NET Core come runtime. Assicurati di avere installato l’ultima versione di .NET Core SDK. Puoi scaricarlo dal sito ufficiale di .NET (https://dotnet.microsoft.com/download). Verifica l’installazione eseguendo dotnet --version nel prompt dei comandi. Dovresti vedere la versione corrente di .NET Core SDK installata.
  • Strumenti Blazor (se necessario): se hai installato Visual Studio, potrebbe essere necessario aggiungere il supporto Blazor. Assicurati di aver selezionato “ASP.NET e sviluppo web” durante l’installazione per garantire la presenza degli strumenti necessari.
  • Visual Studio Code e l’estensione Blazor (se necessario): nel caso di Visual Studio Code, dopo l’installazione, cerca e installa l’estensione “Blazor” dal marketplace di Visual Studio Code.

Una volta completati questi passaggi, il tuo ambiente di sviluppo sarà pronto per iniziare con Blazor. Puoi creare nuovi progetti, modificare il codice ed eseguire le tue applicazioni Blazor senza problemi. Assicurati di fare riferimento alla documentazione ufficiale di Blazor e .NET per eventuali aggiornamenti o dettagli specifici.

Nota: in questa guida prendiamo a modello un’installazione di Visual Studio Community 2022 (ma nel caso di installazioni diverse gli step sono analoghi).

 

Passo 2: crea un nuovo progetto Blazor

Dopo aver installato l’ambiente di sviluppo, il passo successivo è creare un nuovo progetto Blazor.

Segui questi passaggi:

  1. Apri Visual Studio: avvia Visual Studio sul tuo computer facendo clic sulla nuova icona, sul desktop o nel menù. Ma se hai lasciato il flag su “Avvia dopo l’installazione si aprirà” da solo. 

  2. Seleziona Crea un nuovo progetto: nella finestra principale di Visual Studio, seleziona “File” nella barra dei menu, quindi “Nuovo” e infine “Progetto...”.

  3. Scegli il tipo di progetto Blazor: nella finestra di creazione del nuovo progetto, cerca “Blazor” nella casella di ricerca dei modelli di progetto. Poi seleziona "Blazor Web App" tra le opzioni disponibili. Puoi scegliere tra un’applicazione Blazor Server o Blazor WebAssembly. Scegli Blazor Server per iniziare.

  4. Configura il progetto: assegna un nome al tuo progetto nella casella “Nome del progetto” e specifica la posizione in cui desideri salvare il progetto. Puoi anche selezionare la versione del framework .NET che desideri utilizzare, ma di solito è consigliabile utilizzare l’ultima versione stabile.

  5. Seleziona il modello di hosting: quando crei un progetto Blazor, verrà richiesto di selezionare il modello di hosting. Puoi scegliere tra lato server e lato client (WebAssembly). Per cominciare seleziona "Server”

  6. Configura le opzioni aggiuntive (se necessario): puoi configurare ulteriori opzioni, come l’uso di HTTPS, l’autenticazione utente, ecc. Per ora, puoi mantenere le opzioni predefinite.

  7. Premi Creadopo aver configurato il tuo progetto, premi il pulsante “Crea” per generare il progetto Blazor.

Una volta completati questi passaggi, Visual Studio creerà un nuovo progetto Blazor per te.

Da ora in poi puoi esplorare il codice sorgente, modificare le pagine di esempio e avviare l’applicazione per vedere i risultati nel browser integrato. Questo punto costituisce la base per iniziare a sviluppare con Blazor, e da qui puoi procedere con la modifica, l’aggiunta di funzionalità e l’apprendimento più approfondito delle caratteristiche di Blazor.

 

Passo 3: seleziona il modello di hosting

Quando crei un nuovo progetto Blazor è necessario scegliere il modello di hosting che determinerà come l’applicazione Blazor verrà eseguita.

Puoi sceglierlo in base alle esigenze specifiche della tua applicazione e procedi con la fase di sviluppo. I due modelli disponibili offrono vantaggi unici, quindi la tua scelta dipenderà dai requisiti specifici del tuo progetto.

Stiamo parlando del modello “Lato Server” (Server-Side Blazor) e del modello “Lato Client” (WebAssembly Blazor).
 
Ecco una breve spiegazione di entrambi:
  1. Blazor Server (lato server): in questo modello, la logica dell’applicazione Blazor viene eseguita sul server, e solo l’interfaccia utente viene inviata al browser dell’utente. Le interazioni dell’utente e gli eventi vengono gestiti sul server, e le modifiche vengono inviate al client utilizzando una connessione in tempo reale (WebSocket). Questo modello è particolarmente adatto per applicazioni che richiedono una gestione centralizzata dello stato o quando il server deve eseguire operazioni complesse.

  2. Blazor WebAssembly (Lato Client): in questo modello, l’intera applicazione Blazor viene eseguita nel browser dell’utente utilizzando WebAssembly. L’applicazione viene scaricata come file binario WebAssembly nel browser ed eseguita lì. Il server viene utilizzato principalmente per fornire l’applicazione e i servizi di backend. Questo modello consente di creare applicazioni Blazor che possono funzionare in modalità “offline” poiché tutto il codice viene eseguito nel browser del cliente.

Come scegliere:

Seleziona “Lato Server” se hai bisogno di una gestione centralizzata dello stato, se la larghezza di banda è una considerazione critica, o se hai bisogno di una comunicazione server-push in tempo reale. Scegli invece “Lato Client” se desideri distribuire l’applicazione come un’applicazione statica e se la tua applicazione può beneficiare delle prestazioni del WebAssembly nel browser.

Nota importante: è possibile passare da un modello all’altro in fasi successive dello sviluppo. Ad esempio, puoi iniziare con Blazor Server e passare a Blazor WebAssembly se le esigenze del tuo progetto lo richiedono.


 

Passo 4: comprendi la struttura del progetto

Dopo aver creato un nuovo progetto Blazor, è importante comprendere la struttura di base del progetto per poter navigare facilmente tra i file e le risorse. La struttura di un progetto Blazor può variare a seconda del modello di hosting scelto (lato server o lato client), ma condividono comunque alcune caratteristiche comuni. Qui ci concentriamo sulla struttura generale di un progetto Blazor Lato Server:

  1. Cartella wwwroot”: questa cartella contiene i file statici che devono essere accessibili direttamente dal browser, come fogli di stile CSS, script JavaScript, immagini e altri asset statici. Ad esempio, puoi trovare qui il file wwwroot/index.html che rappresenta la pagina principale dell’applicazione.

  2. Cartella Pages”: la cartella “Pages” contiene le pagine web dell’applicazione. Ogni file Razor (.razor) in questa cartella rappresenta una pagina dell’applicazione. Ad esempio, Pages/Index.razor è la pagina principale predefinita.

  3. Cartella Shared”: in questa cartella, puoi trovare componenti Razor condivisi che possono essere utilizzati in più pagine dell’applicazione. I componenti Razor (.razor) sono parti riutilizzabili dell’interfaccia utente.

  4. File _Imports.razor”: questo file contiene le dichiarazioni di importazione per gli spazi dei nomi che possono essere utilizzati in tutti i file Razor dell’applicazione. Facilita l’utilizzo di classi e componenti senza dover dichiarare gli spazi dei nomi in ogni pagina.

  5. File Program.cs”: questo file contiene il metodo Main che avvia l’applicazione. Nella versione Lato Server, imposta il server Blazor e avvia l’hosting.

  6. File Startup.cs”: questo file contiene la configurazione dell’applicazione. Qui puoi impostare i servizi, configurare l’autenticazione, e definire altre configurazioni dell’applicazione.

  7. File wwwroot/_content”: in questo percorso, puoi trovare file CSS, JavaScript o altri asset condivisi che possono essere referenziati nelle pagine Razor.

  8. File wwwroot/appsettings.json”: questo file contiene le impostazioni di configurazione dell’applicazione, come le stringhe di connessione al database o altre configurazioni personalizzate.

  9. File Pages/_ViewImports.razor”: questo file contiene le dichiarazioni di importazione che saranno disponibili per tutte le pagine dell’applicazione. È simile a “_Imports.razor”, ma si applica solo alle pagine nella cartella “Pages”.

  10. Altri file e cartelle: il progetto può contenere ulteriori file e cartelle a seconda delle esigenze specifiche del tuo progetto o delle librerie aggiuntive.

Comprendere questa struttura di base ti aiuterà a navigare più facilmente nel tuo progetto Blazor consentendoti di modificare, aggiungere o eliminare pagine, componenti e risorse statiche in modo efficace.

Esplorando questi file potrai inoltre iniziare a comprendere come Blazor organizza e gestisce le diverse parti di un’applicazione web.

 

Passo 5: modifica una pagina

Ora che hai compreso la struttura di base del progetto Blazor, è tempo di iniziare a modificare una pagina per vedere come funziona il framework.

Segui questi passaggi:

  1. Apri una pagina: nella cartella “Pages”, trova il file Razor di una pagina. Ad esempio, puoi aprire Pages/Index.razor per iniziare a modificare la pagina principale.

  2. Modifica il contenuto: all’interno del file Razor, troverai del markup HTML misto a codice C# tramite l’uso di sintassi Razor. Modifica il contenuto della pagina come preferisci. Ad esempio, puoi cambiare il testo di un elemento <h1> o aggiungere nuovi elementi HTML.

    <h1>Ciao, mondo!</h1> <p>Benvenuto nella mia applicazione Blazor.</p>
  3. Aggiungi codice C#: puoi incorporare codice C# direttamente nelle pagine Razor. Aggiungi nuove variabili, esegui operazioni e utilizza il data binding per collegare dati alla tua interfaccia utente.

    <p>Il mio nome è @nome</p> @code { private string nome = “John”; }
  4. Esegui l’applicazione: salva le tue modifiche e avvia l’applicazione. Puoi farlo premendo F5 in Visual Studio o eseguendo il comando dotnet run nella cartella del progetto tramite il prompt dei comandi. Apri il tuo browser e visita l’indirizzo locale (di solito http://localhost:5000) per vedere le tue modifiche.

  5. Esplora la live reload”: Blazor offre la live reload, il che significa che le modifiche al codice verranno riflesse automaticamente nel browser senza dover ricaricare manualmente la pagina.

Procedendo con queste modifiche, puoi iniziare a sperimentare con il modo in cui Blazor gestisce la separazione tra codice e markup, oltre a comprendere il concetto di data binding e la facilità con cui puoi incorporare logica C# nelle pagine web.

Esplora ulteriormente la documentazione di Blazor per approfondire argomenti come la gestione degli eventi, la navigazione tra pagine e l’utilizzo di componenti personalizzati.

 

Passo 6: utilizza il data binding

Il data binding è una delle caratteristiche fondamentali di Blazor che semplifica la connessione tra il codice C# e l’interfaccia utente HTML. Ti permette di collegare dinamicamente i dati nel codice C# alle parti visibili dell’interfaccia utente, consentendo una gestione agevole e reattiva dei dati.

Ecco come utilizzare il data binding in Blazor:

  1. One-way data binding: utilizza l’@ symbol per inserire variabili C# direttamente nel markup HTML. Questo è noto come one-way data binding, in quanto il valore della variabile è visualizzato nell’interfaccia utente, ma eventuali modifiche nel markup non influenzano la variabile:

    <p>Il mio nome è @nome</p> @code { private string nome = "John"; }
  2. Two-way data binding: per consentire la modifica bidirezionale dei dati tra il codice C# e l’interfaccia utente, puoi utilizzare l’elemento input insieme al modificatore @bind. In questo esempio, qualsiasi modifica all’input dell’utente verrà riflessa nella variabile nome e viceversa:

    <input type="text" @bind="nome" /> <p>Il mio nome è @nome</p> @code { private string nome = "John"; }
  3. Event binding: puoi associare eventi HTML a metodi C# nel tuo codice. Ad esempio, eccomo come gestire un clic su un pulsante. In questo caso, il metodo MostraMessaggio viene chiamato quando il pulsante viene cliccato:

    <button @onclick="MostraMessaggio">Clicca</button> @code { private void MostraMessaggio() { Console.WriteLine("Pulsante cliccato!"); } }
  4. Binding a liste e iterazione: puoi utilizzare il data binding per collegare collezioni di dati, come una lista di elementi, e iterare su di essi nell’interfaccia utente. In questo esempio, ogni elemento della lista viene visualizzato come un elemento della lista HTML:

    <ul> @foreach (var elemento in listaElementi) { <li>@elemento</li> } </ul> @code { private List<string> listaElementi = new List<string> { "Elemento 1", "Elemento 2", "Elemento 3" }; }

Esplorando e sperimentando con il data binding, puoi migliorare la reattività e l’interattività delle tue pagine Blazor. Questo è un aspetto potente di Blazor che semplifica la gestione dei dati e migliora l’esperienza di sviluppo complessiva.

 

Passo 7: aggiungi interattività

Blazor semplifica l’aggiunta di interattività alle tue pagine web senza la necessità di scrivere JavaScript. Puoi gestire eventi utente, come clic su pulsanti o input da tastiera, direttamente nel codice C# del tuo progetto.

Ecco come aggiungere interattività in Blazor:

  1. Gestione degli eventi: puoi gestire eventi HTML, come clic su un pulsante, direttamente nel codice C#. In questo esempio, il metodo MostraMessaggio viene chiamato quando il pulsante viene cliccato:

    <button @onclick="MostraMessaggio">Clicca</button> @code { private void MostraMessaggio() { Console.WriteLine("Pulsante cliccato!"); } }
  2. Utilizzo di variabili di stato: puoi utilizzare variabili di stato per mantenere lo stato dell’applicazione e renderizzare dinamicamente l’interfaccia utente in base a queste variabili. In questo esempio, la variabile stato viene aggiornata quando il pulsante viene cliccato:

    <p>Stato attuale: @stato</p> <button @onclick="CambiaStato">Cambia Stato</button> @code { private string stato = "Iniziale"; private void CambiaStato() { stato = "Modificato"; } }
  3. Visualizzazione condizionale: puoi utilizzare dichiarazioni @if per mostrare o nascondere parti dell’interfaccia utente in base a condizioni logiche. In questo esempio, il messaggio verrà mostrato o nascosto in base al valore della variabile mostraMessaggio:

    @if (mostraMessaggio) { <p>Messaggio visualizzato!</p> } <button @onclick="MostraNascondiMessaggio">Mostra/Nascondi Messaggio</button> @code { private bool mostraMessaggio = false; private void MostraNascondiMessaggio() { mostraMessaggio = !mostraMessaggio; } }
  4. Input utente e two-way data binding: utilizza gli elementi di input per consentire all’utente di inserire dati e collega questi input alle variabili C# utilizzando il two-way data binding. In questo esempio, la variabile inputUtente è collegata all’input dell’utente e viene visualizzata dinamicamente nella pagina:

    <input type="text" @bind="inputUtente" /> <p>Hai inserito: @inputUtente</p> @code { private string inputUtente = ""; }

Aggiungere interattività in Blazor è intuitivo e potente. Sfrutta la natura dichiarativa e reattiva di Blazor per creare pagine web dinamiche senza dover scrivere complesso codice JavaScript. Esplora ulteriormente le possibilità di gestione degli eventi e di aggiunta di interattività in base alle esigenze specifiche del tuo progetto.

 

Passo 8: crea componenti riutilizzabili

I componenti sono una parte essenziale di Blazor in quanto consentono di organizzare il codice in unità riutilizzabili. Puoi pensare a un componente Blazor come a un widget o a un controllo che può essere utilizzato in più parti dell’applicazione. Creare componenti ti permette di strutturare il tuo codice in modo più modulare e di promuovere la riutilizzabilità. Ecco come creare e utilizzare componenti in Blazor:

  1. Creazione di un componente: per creare un componente, è sufficiente creare un nuovo file Razor (.razor) nella cartella “Shared” o in una cartella dedicata. Ad esempio, puoi creare un file chiamato MyComponent.razor:

    <!-- MyComponent.razor --> <div> <h3>@Titolo</h3> <p>@Contenuto</p> </div> @code { [Parameter] public string Titolo { get; set; } [Parameter] public string Contenuto { get; set; } }
  2. Utilizzo del componente: dopo aver creato il componente puoi utilizzarlo all’interno di qualsiasi pagina Razor. Per farlo, aggiungi il tag del componente come se fosse un elemento HTML incorporato. In questo esempio, il componente MyComponent viene utilizzato nella pagina, passando i valori dei parametri Titolo e Contenuto:

    <!-- Utilizzo del componente in una pagina Razor --> <MyComponent Titolo="Titolo del Componente" Contenuto="Contenuto del Componente" />
  3. Parametri del componente: i componenti possono accettare parametri, che sono proprietà C# contrassegnate con l’attributo [Parameter]. Questi parametri possono essere utilizzati per passare dati al componente.

  4. Evento del componente: un componente può anche definire eventi che possono essere gestiti quando il componente viene utilizzato. Ad esempio, un componente di pulsante potrebbe definire un evento OnClick. L’evento OnClick può essere utilizzato nella pagina che utilizza il componente per gestire il clic del pulsante.

    <!-- MyButton.razor --> <button @onclick="OnButtonClick">Clicca</button> @code { [Parameter] public EventCallback OnClick { get; set; } private async Task OnButtonClick() { await OnClick.InvokeAsync(); } }
  5. Riutilizzo e manutenzione semplificati: l’utilizzo di componenti rende più facile il riutilizzo del codice e semplifica la manutenzione. Se hai bisogno di apportare modifiche al comportamento o all’aspetto di un componente, puoi farlo in un unico punto e i cambiamenti saranno riflessi ovunque il componente viene utilizzato.

  6. Comunicazione tra componenti: Blazor supporta la comunicazione tra componenti attraverso l’uso di servizi, eventi o la condivisione di dati attraverso il padre-figlio.

Utilizzando i componenti, puoi organizzare il tuo codice in modo più pulito e promuovere la riutilizzabilità. Questo è un aspetto fondamentale di Blazor che contribuisce a una gestione efficace delle interfacce utente complesse e delle funzionalità dell’applicazione.

 

Passo 9: aggiungi servizi

In Blazor puoi utilizzare l’iniezione di dipendenze per aggiungere servizi al tuo progetto. L’iniezione di dipendenze è un concetto chiave in .NET che consente di separare la logica di business da altri componenti, facilitando la manutenzione, il testing e la gestione dell’applicazione.

Ecco come aggiungere e utilizzare servizi in Blazor:

  1. Crea un servizio: puoi creare un servizio creando una classe che implementa un’interfaccia o una classe base. Ad esempio, crea un servizio per gestire dati utente:

    csharp:
    // UserService.cs public interface IUserService { string GetUserName(); } public class UserService : IUserService { public string GetUserName() { return "John Doe"; } }
  2. Registra il servizio: dopo aver creato il servizio, devi registrarlo nell’iniezione di dipendenze di Blazor. Questo di solito avviene nel file Startup.cs. In questo esempio, il servizio UserService è registrato come un servizio singleton. Ciò significa che esisterà un’unica istanza del servizio per l’intera durata dell’applicazione:

    csharp:
    // Startup.cs public void ConfigureServices(IServiceCollection services) { services.AddSingleton<IUserService, UserService>(); }
  3. Inietta il servizio in un componente: puoi iniettare il servizio in un componente utilizzando l’attributo @inject. In questo modo, il componente ha accesso al servizio IUserService e può chiamare il metodo GetUserName():

    html:
    @inject IUserService UserService <p>Ciao, @UserService.GetUserName()!</p>
  4. Utilizzo nei componenti: puoi utilizzare il servizio nei tuoi componenti per gestire logiche complesse, accesso ai dati, autenticazione e altro ancora. In questo esempio, il servizio viene utilizzato in una pagina Blazor per visualizzare i dettagli dell’utente.

    html:
    @page "/utente" @inject IUserService UserService <h3>Dettagli Utente</h3> <p>Nome utente: @UserService.GetUserName()</p>
  5. Scopes del servizio: puoi registrare i servizi con diversi scopes come Singleton, Scoped o Transient a seconda della tua esigenza. Ad esempio, Scoped crea una nuova istanza del servizio per ogni richiesta HTTP. La scelta dello scope dipende dalle esigenze specifiche del tuo servizio e della tua applicazione:

    csharp:
    // Startup.cs public void ConfigureServices(IServiceCollection services) { services.AddScoped<IUserService, UserService>(); }

L’utilizzo dei servizi in Blazor consente di mantenere il codice organizzato, facilita la gestione delle dipendenze e promuove la riusabilità. Puoi sfruttare la vasta gamma di servizi offerti dal framework .NET o creare i tuoi servizi personalizzati per soddisfare le esigenze specifiche della tua applicazione.

 
 

Passo 10: pubblica l’applicazione

Dopo aver sviluppato la tua applicazione Blazor, è il momento di pubblicarla in modo che possa essere distribuita e accessibile agli utenti. Puoi pubblicare l’applicazione Blazor in vari modi, tra cui la pubblicazione in un server web, il deployment su un servizio di hosting cloud o la distribuzione tramite contenitori.

Ecco i passaggi generali per pubblicare la tua applicazione Blazor:

  1. Configurazione dell’applicazione per la pubblicazione: assicurati di aver configurato correttamente le impostazioni dell’applicazione per la produzione. Controlla il file appsettings.json per eventuali configurazioni specifiche e assicurati che sia configurato correttamente per l’ambiente di produzione.

  2. Build dell’applicazione: esegui una build dell’applicazione Blazor utilizzando il comando dotnet publish. Questo comando compila l’applicazione e prepara i file necessari per la distribuzione. L’opzione -c Release specifica che la build deve essere ottimizzata per l’ambiente di produzione:

    bash:
    dotnet publish -c Release
  3. Distribuzione su un server web: se desideri distribuire l’applicazione su un server web tradizionale, copia i file generati nella cartella bin\Release\netcoreapp3.x\publish (o una directory simile) sul server. Assicurati che il server sia configurato correttamente per ospitare applicazioni ASP.NET Core.

  4. Deployment su un servizio di hosting cloud: se hai scelto di utilizzare un servizio di hosting cloud come Azure, AWS o Google Cloud, segui la documentazione del provider per distribuire l’applicazione. Molte di queste piattaforme offrono strumenti specifici per semplificare il deployment delle applicazioni .NET Core.

  5. Distribuzione tramite contenitori: puoi anche distribuire l’applicazione Blazor in un contenitore Docker. Prima di tutto, crea un file Dockerfile nella radice del tuo progetto con le istruzioni necessarie per creare un’immagine Docker. Successivamente, usa i comandi Docker per creare e distribuire l’immagine del contenitore:

    dockerfile:
    FROM mcr.microsoft.com/dotnet/core/aspnet:3.1 AS base WORKDIR /app EXPOSE 80 FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build WORKDIR /src COPY . . RUN dotnet restore "NomeAppBlazor.csproj" RUN dotnet build "NomeAppBlazor.csproj" -c Release -o /app/build FROM build AS publish RUN dotnet publish "NomeAppBlazor.csproj" -c Release -o /app/publish FROM base AS final WORKDIR /app COPY --from=publish /app/publish . ENTRYPOINT ["dotnet", "NomeAppBlazor.dll"]
  6. Test dell’applicazione distribuita: una volta distribuita, testa l’applicazione per assicurarti che funzioni correttamente in un ambiente di produzione. Controlla la connessione al database, la gestione delle risorse statiche e qualsiasi altra funzionalità specifica dell’ambiente di produzione.

  7. Monitoraggio e manutenzione: implementa strumenti di monitoraggio e logging per tenere traccia delle prestazioni dell’applicazione in produzione. Controlla regolarmente i log per individuare e risolvere eventuali problemi.

Pubblicare un’applicazione Blazor è un passo cruciale nel processo di sviluppo ed è importante essere consapevoli delle diverse opzioni disponibili a seconda delle esigenze specifiche del tuo progetto. Assicurati di seguire le best practice di sicurezza, configurazione e gestione durante il deployment per garantire un’esperienza utente ottimale e sicura.

 

Concludendo

Ci auguriamo questa breve guida possa dare il la alla tua voglia di coding nell’ambiente di sviluppo che noi di ESSE I consigliamo di più.

Hai bisogno di supporto per installare il tuo Blazor e iniziare a programmare, o anche solo per creare la tua applicazione? Sai a chi rivolgerti. Inizia gratuitamente e senza costi oggi stesso condividendo i tuoi dubbi con noi attraverso la nostra pagina di contatto.

Non vediamo l'ora di darti una mano a trasformare i tuoi obiettivi in... codice sorgente! 

 

(foto: Midjourney)

Newsletter

Desidero iscrivermi alla newsletter periodica del blog con articoli informativi su software, soluzioni ITC e novità dal mondo ESSE I. Potrai cancellarti quando lo desideri nel pieno rispetto della Privacy Policy .

 
 
 

Codice Anti Spam

Riportare nel box sottostante "Codice di verifica", il codice alfanumerico che trovi a fianco

NEWSLETTER

Iscriviti alla newsletter periodica del blog con articoli informativi su software, soluzioni ITC e novità dal mondo ESSE I.

Non registreremo la tua email in alcun modo fino a quando non avrai accettato le condizioni nel form successivo.

 
RIMANIAMO IN CONTATTO
Vai al FORM
Seguici sui SOCIAL