![\"Electron](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/\/2020\/04\/Header-1.png\")
<\/p>\n<\/p>\n
Una delle prime problematiche che si incontrano nella realizzazione di un applicativo desktop multipiattaforma \u00e8 sicuramente la scelta delle librerie grafiche per la realizzazione dell’interfaccia.<\/p>\n
In questo articolo viene proposto l’utilizzo di due strumenti: Electron<\/strong> <\/a>e .NET Core<\/strong>, rispettivamente, per la gestione del front-end\u00a0il primo e per la gestione della business logic dell’applicativo il secondo.<\/p>\n Electron<\/strong>, citando il sito web, \u00e8 un framework per la creazione di applicazioni native con tecnologie web come Javascript<\/em>, HTML<\/em> e CSS<\/em>.<\/p>\n L’utilizzo di queste tecnologie permette di creare interfacce grafiche veloci, intuitive, piacevoli alla vista e soprattutto, multipiattaforma.<\/p>\n Tanto per rendere l’idea, Visual Studio Code<\/strong> \u00e8 basato su Electron<\/strong>.<\/p>\n Arrivato alla versione 3, \u00e8 un framework software gratuito e open source per i sistemi operativi Microsoft Windows, MacOS e Linux che consente la creazione di applicazioni Web ASP.NET Core, app da riga di comando, librerie e applicazioni Universal Windows Platform.<\/p>\n Il punto d’incontro di questi due framework, \u00e8 Electron CGI<\/strong>, una libreria NodeJs<\/em> rilasciata con licenza MIT<\/em> che permette di stabilire un canale di comunicazione bidirezionale tra l’applicativo Electron<\/strong> ed un processo esterno .NET Core<\/strong> mediante uno scambio di messaggi tramite flussi stdin<\/em> ed stdout<\/em>.<\/p>\n Il risultato finale \u00e8 un matrimonio perfetto, un’applicativo multipiattaforma che sfrutta tutte le potenzialit\u00e0 della piattaforma .NET Core<\/strong> insieme a quelle Electron<\/strong> per l’interfaccia grafica.<\/p>\n Per la realizzazione di questa applicazione di esempio e di questa guida, sono stati utilizzati i seguenti strumenti di sviluppo:<\/p>\n Visual Studio 2019<\/strong> e Visual Studio Code<\/strong> non sono strettamente necessari in quanto, sia per quanto riguarda Electron<\/strong>, sia per .NET Core<\/strong>, si possono creare e gestire progetti anche da riga di comando.<\/p>\n Una volta aperto VS2019<\/em>, creare un nuovo progetto App console (.NET Core)<\/strong> selezionando il template che utilizza il linguaggio C#<\/em>:<\/p>\n Successivamente, aggiungere al progetto, il pacchetto Nuget<\/em> ElectronCgi.DotNet<\/strong>:<\/p>\n Copiare quindi il codice seguente all’interno del file Program.cs<\/strong>:<\/p>\n Esaminiamo ora il codice pi\u00f9 nel dettaglio.<\/p>\n Prima di tutto \u00e8 necessario importare la libreria:<\/p>\n Successivamente, all’interno del metodo principale Main<\/strong>, si inizializza il canale di comunicazione:<\/p>\n Impostiamo poi un messaggio “in ascolto<\/em>” che chiamiamo getCarManufacturerFromModel<\/strong>. Questo, accetta in input una variabile stringa, nel nostro caso il modello di un’auto, e restituisce in output un’altra variabile stringa, nel nostro caso la casa costruttrice del modello di auto in ingresso:<\/p>\n Impostiamo anche un Timer<\/em> con un intervallo di un secondo che: aumenta un contatore ed invia un messaggio sendCounter<\/strong> tramite il canale di comunicazione con al suo interno il contatore progressivo:<\/p>\n Questi due messaggi di esempio ci permetteranno di vedere all’opera una comunicazione bidirezionale fra questo applicativo .NET Core<\/strong> e quello che andremo a creare successivamente con Electron<\/strong>.<\/p>\n Infine, bisogna impostare il canale di comunicazione per iniziare l’ascolto<\/em> dei messaggi in entrata:<\/p>\n A questo punto non ci resta che compilare il progetto per generare il file .dll e l’eseguibile .exe dell’applicativo console.<\/p>\n Creare una nuova cartella per il nuovo progetto Electron<\/strong>, ed al suo interno creare tre file vuoti:<\/p>\n Aprire quindi la cartella appena creata con VSCODE<\/em> e, tramite il pannello del terminale (View<\/strong>, Terminal<\/strong>), lanciare il comando:<\/p>\n Questo comando effettua l’inizializzazione del progetto compilando il file package.json<\/strong>.<\/p>\n Verr\u00e0 richiesto di impostare alcuni parametri come: il nome pacchetto, la versione, la descrizione, ecc….<\/p>\n Quando verr\u00e0 richiesto di impostare il punto d’ingresso dell’applicativo (Entry point<\/strong>), \u00e8 necessario inserire main.js<\/strong>.<\/p>\n Al termine della procedura si otterr\u00e0 un package.json<\/strong> di questo tipo:<\/p>\n All’interno del nodo scripts<\/strong> bisogna aggiungere la chiave start<\/strong> come segue, per trasformare l’applicazione Node<\/em> appena creata in applicazione Electron<\/strong>:<\/p>\n Proseguire quindi con l’installazione del pacchetto Electron<\/strong> all’interno del progetto con questo comando:<\/p>\n Compilare il file main.js<\/strong> come segue:<\/p>\n Le istruzioni sopra permettono di inizializzare l’applicativo Electron<\/strong> creando una nuova finestra (BrowserWindow<\/em>) in cui viene caricato il file index.html<\/strong> che conterr\u00e0 ci\u00f2 che verr\u00e0 renderizzato all’interno di essa.<\/p>\n Il template mostrato \u00e8 basilare e fornisce gli elementi essenziali per caricare e gestire correttamente la finestra appena creata anche su altri sistemi operativi, come per esempio macOS<\/em>.<\/p>\n Compiliamo ora il file index.html<\/strong> come segue:<\/p>\n Lanciando dal pannello terminale il comando:<\/p>\n Verr\u00e0 avviata l’applicazione:<\/p>\n Come si pu\u00f2 vedere l’applicazione si presenta gi\u00e0 con un menu predefinito ed il nostro codice HTML<\/em> viene renderizzato correttamente.<\/p>\n Ora non ci resta che “legare<\/em>” l’applicativo console .NET Core<\/strong> con l’applicativo Electron<\/strong>.<\/p>\n Per farlo dobbiamo innanzitutto aggiungere al nostro progetto Electron<\/em> il pacchetto electron-cgi<\/strong>.<\/p>\n Per farlo possiamo utilizzare il comando:<\/p>\n Fatto ci\u00f2, bisogna ora aggiungere le istruzioni per inizializzare ed utilizzare il canale di comunicazione anche da questo applicativo.<\/p>\n Di seguito il file index.html<\/strong> precedente, con le dovute aggiunte:<\/p>\n Spieghiamo ora il codice un po’ pi\u00f9 nel dettaglio.<\/p>\n La prima cosa da fare, come per il progetto .NET Core<\/strong>, bisogna inizializzare il canale di comunicazione:<\/p>\n Il metodo connectTo<\/strong> permette di “collegarsi<\/em>” ad un processo esterno .NET Core<\/strong>.<\/p>\n Il processo esterno pu\u00f2 essere collegato come nell’esempio sopra tramite la cartella del progetto, oppure, mediante il file .dll o l’eseguibile .exe compilato.<\/p>\n L’evento onDisconnect<\/strong> permette di intercettare una disconnessione, volontaria o in caso di errore, fra il processo esterno .NET Core<\/strong> e l’applicativo Electron<\/strong>.<\/p>\n All’evento onclick<\/strong>, sul pulsante Invia<\/strong>, viene prelevato il valore di input (il modello dell’auto) e viene inviato il messaggio getCarManufacturerFromModel<\/strong> all’interno del canale di comunicazione.<\/p>\n La risposta del messaggio, una variabile stringa contenente la casa costruttrice del modello di auto, viene poi stampata all’interno di un’oggetto label<\/em>.<\/p>\n Infine, intercettando il messaggio sendCounter<\/strong>, inviato dall’applicativo console .NET Core<\/strong> ogni secondo mediante un timer, viene stampato il risultato ricevuto all’interno della label predisposta.<\/p>\n Il risultato finale \u00e8 il seguente:<\/p>\n Su macOS<\/strong> (dopo aver installato come su Window<\/em> .NET Core SDK<\/strong>), basta aprire il progetto con VSCODE <\/em>e lanciare il comando:<\/p>\n attendere il termine dell’installazione dei pacchetti e successivamente lanciare:<\/p>\n ed ecco il risultato:<\/p>\n In conclusione, l’accoppiata Electron<\/strong> e .NET Core<\/strong> risulta vincente sotto diversi aspetti:<\/p>\n L’esempio presente in questa guida \u00e8 scaricabile a questo link<\/a>.<\/p>\n https:\/\/www.electronjs.org\/docs\/tutorial\/first-app#scrivi-la-tua-prima-app-electron<\/a><\/p>\n https:\/\/www.nuget.org\/packages\/ElectronCgi.DotNet<\/a><\/p>\n https:\/\/www.blinkingcaret.com\/2019\/02\/27\/electron-cgi\/<\/a><\/p>\nChe cos’\u00e8 Electron?<\/h1>\n
e .NET Core?<\/h1>\n
Strumenti di sviluppo<\/h1>\n
\n
Il progetto .NET Core<\/h1>\n
![\"Creazione](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/\/2020\/04\/Crea_Progetto_App_Console.png\")
<\/p>\n![\"Installazione](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/\/2020\/04\/Installazione_Pacchetto_Nuget.png\")
<\/p>\n\r\nusing ElectronCgi.DotNet;\r\nusing System.Timers;\r\n\r\nnamespace ConsoleAppNETCore\r\n{\r\n class Program\r\n {\r\n static void Main(string[] args)\r\n {\r\n var connection = new ConnectionBuilder()\r\n .WithLogging()\r\n .Build();\r\n\r\n connection.On<string, string>("getCarManufacturerFromModel", model =>\r\n {\r\n switch (model)\r\n {\r\n case "Punto":\r\n case "Tipo":\r\n case "Bravo":\r\n return "Fiat";\r\n case "Fiesta":\r\n case "Focus":\r\n return "Ford";\r\n case "Corsa":\r\n case "Astra":\r\n return "Opel";\r\n case "Ibiza":\r\n case "Leon":\r\n return "Seat";\r\n default:\r\n return "Unknown";\r\n }\r\n });\r\n\r\n var counter = 0;\r\n\r\n var timer = new Timer(1000);\r\n timer.Elapsed += delegate\r\n {\r\n connection.Send<int>("sendCounter", counter);\r\n counter++;\r\n };\r\n timer.Start();\r\n\r\n \/\/ In ascolto per le richieste in entrata\r\n connection.Listen();\r\n }\r\n }\r\n}\r\n<\/pre>\n\r\nusing ElectronCgi.DotNet;\r\n<\/pre>\n
\r\nvar connection = new ConnectionBuilder()\r\n .WithLogging()\r\n .Build();\r\n<\/pre>\n
\r\nconnection.On<string, string>("getCarManufacturerFromModel", model =>\r\n{\r\n switch (model)\r\n {\r\n case "Punto":\r\n case "Tipo":\r\n case "Bravo":\r\n return "Fiat";\r\n case "Fiesta":\r\n case "Focus":\r\n return "Ford";\r\n case "Corsa":\r\n case "Astra":\r\n return "Opel";\r\n case "Ibiza":\r\n case "Leon":\r\n return "Seat";\r\n default:\r\n return "Unknown";\r\n }\r\n});\r\n<\/pre>\n\r\nvar counter = 0; \r\nvar timer = new Timer(1000); \r\ntimer.Elapsed += delegate { \r\n connection.Send<int>("sendCounter", counter); \r\n counter++; \r\n}; \r\ntimer.Start();\r\n<\/pre>\n\r\nconnection.Listen();\r\n<\/pre>\n
![\"Progetto](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/\/2020\/04\/Progetto_NET_Core_Compilato.png\")
<\/p>\nIl progetto Electron<\/h1>\n
\n
![\"Cartella](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/\/2020\/04\/Progetto_ElectronApp.png\")
<\/p>\n\r\nnpm init\r\n<\/pre>\n
\r\n{\r\n "name": "com.electronapp.example",\r\n "version": "1.0.0",\r\n "description": "Esempio di applicazione Electron + .NET Core",\r\n "main": "main.js",\r\n "scripts": {\r\n "test": "echo \\"Error: no test specified\\" && exit 1"\r\n },\r\n "author": "",\r\n "license": "ISC"\r\n}\r\n<\/pre>\n\r\n"scripts": {\r\n "start": "electron .",\r\n "test": "echo \\"Error: no test specified\\" && exit 1"\r\n},\r\n<\/pre>\n\r\nnpm install --save-dev electron\r\n<\/pre>\n
\r\nconst { app, BrowserWindow } = require('electron')\r\n\r\nfunction createWindow () {\r\n const win = new BrowserWindow({\r\n width: 800,\r\n height: 600,\r\n webPreferences: {\r\n nodeIntegration: true\r\n }\r\n });\r\n\r\n win.loadFile('index.html');\r\n}\r\n\/\/ Questo metodo viene chiamato quando Electron ha terminato l'inizializzazione\r\napp.whenReady().then(createWindow);\r\n\r\n\/\/ Evento invocato quando tutte le finestre sono chiuse\r\napp.on('window-all-closed', () => {\r\n \/\/ Su macOS \u00e8 comune che l'applicazione e la barra men\u00f9\r\n \/\/ restano attive finch\u00e9 l'utente non esce espressamente tramite i tasti Cmd + Q\r\n if (process.platform !== 'darwin') {\r\n app.quit();\r\n }\r\n});\r\n\r\napp.on('activate', () => {\r\n \/\/ Su macOS \u00e8 comune ri-creare la finestra dell'app quando\r\n \/\/ viene cliccata l'icona sul dock e non ci sono altre finestre aperte.\r\n if (BrowserWindow.getAllWindows().length === 0) {\r\n createWindow()\r\n }\r\n});\r\n<\/pre>\n\r\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset="UTF-8">\r\n <title>Example App<\/title>\r\n <!-- https:\/\/electronjs.org\/docs\/tutorial\/security#csp-meta-tag -->\r\n <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" \/>\r\n <\/head>\r\n <body>\r\n <h1>Esempio Invio<\/h1>\r\n <div>\r\n <input type="text" placeholder="Modello auto" \/>\r\n <button>Invia<\/button>\r\n <label>Risultato: <\/label>\r\n <\/div>\r\n <h1>Esempio Ricezione<\/h1>\r\n <div>\r\n <label>Contatore: 0<\/label>\r\n <\/div>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n
\r\nnpm start\r\n<\/pre>\n
![\"Primo](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/\/2020\/04\/Immagine_Primo_Esempio_App.png\")
<\/p>\nIl matrimonio<\/h1>\n
\r\nnpm install electron-cgi\r\n<\/pre>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset="UTF-8">\r\n <title>Example App<\/title>\r\n <!-- https:\/\/electronjs.org\/docs\/tutorial\/security#csp-meta-tag -->\r\n <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" \/>\r\n <\/head>\r\n <body>\r\n <h1>Esempio Invio<\/h1>\r\n <div>\r\n <input id="inputModello" type="text" placeholder="Modello auto" \/>\r\n <button onclick="onSendClick()">Invia<\/button>\r\n <label id="labelRisultato">Risultato: <\/label>\r\n <\/div>\r\n <h1>Esempio Ricezione<\/h1>\r\n <div>\r\n <label id="labelContatore">Contatore: 0<\/label>\r\n <\/div>\r\n <script>\r\n const { ConnectionBuilder } = require('electron-cgi');\r\n \r\n const inputModello = document.querySelector("#inputModello");\r\n const labelRisultato = document.querySelector("#labelRisultato");\r\n const labelContatore = document.querySelector("#labelContatore");\r\n\r\n const connection = new ConnectionBuilder()\r\n .connectTo('dotnet', 'run', '--project', '..\/ConsoleAppNETCore')\r\n .build();\r\n \r\n connection.onDisconnect = () => {\r\n console.log('Perdita di connessione al processo .NET');\r\n };\r\n\r\n async function onSendClick() {\r\n const modello = inputModello.value;\r\n const costruttore = await connection.send('getCarManufacturerFromModel', modello);\r\n labelRisultato.textContent = `Risultato: ${costruttore}`;\r\n }\r\n\r\n connection.on('sendCounter', res => {\r\n labelContatore.textContent = `Contatore: ${res}`;\r\n });\r\n <\/script>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n\r\nconst { ConnectionBuilder } = require('electron-cgi');\r\n\r\nconst connection = new ConnectionBuilder()\r\n .connectTo('dotnet', 'run', '--project', '..\/ConsoleAppNETCore')\r\n .build();\r\n<\/pre>\n\r\nconnection.onDisconnect = () => {\r\n console.log('Perdita di connessione al processo .NET');\r\n};\r\n<\/pre>\n\r\nasync function onSendClick() {\r\n const modello = inputModello.value;\r\n const costruttore = await connection.send('getCarManufacturerFromModel', modello);\r\n labelRisultato.textContent = `Risultato: ${costruttore}`;\r\n}\r\n<\/pre>\n\r\nconnection.on('sendCounter', res => {\r\n labelContatore.textContent = `Contatore: ${res}`;\r\n});\r\n<\/pre>\n![\"Risultato](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/\/2020\/04\/Risultato_Finale.gif\")
<\/p>\nE su macOS?<\/h1>\n
\r\nnpm install\r\n<\/pre>\n
\r\nnpm start\r\n<\/pre>\n
![\"Applicativo](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/\/2020\/04\/2020-04-29-14.41.57.gif\")
<\/p>\nConclusione<\/h1>\n
\n
Link utili<\/h1>\n