Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
1 gefällt mir1,189 aufrufe
Das Dokument beschreibt die Entwicklung von plattformübergreifenden Desktop-Anwendungen mit Electron und Electron.net, einer Erweiterung für ASP.NET Core. Es behandelt die Architektur, Installation, erste Schritte zur Anwendungsentwicklung, Debugging, Interprozesskommunikation sowie den Build- und Bereitstellungsprozess. Zudem werden Vorteile von Electron.net wie einfache Bereitstellung und Offline-Funktionalität hervorgehoben.
![Meine erste Electron.NET App in 3 Schritten
1. Neues ASP.NET Core Projekt anlegen
▪ Empfohlen wird eine Singe-Page App-
Architektur mit Angular oder React
2. Electron.NET API über NuGet Installieren
▪ PM> Install-Package ElectronNET.API
3. Die UseElectron WebHostBuilder-Extension
einbinden
public static IWebHost BuildWebHost(string[] args)
{
return WebHost.CreateDefaultBuilder(args)
.UseElectron(args)
.UseStartup<Startup>()
.Build();
}
Program.cs](https://image.slidesharecdn.com/electron-190521114806/85/Electron-NET-Cross-Platform-Desktop-Software-mit-ASP-NET-Core-12-320.jpg)
![Electron.NET App Debuggen
▪ Für das Debuggen gibt es zwei
Möglichkeiten:
1. Das Ausführen der App über
die Electron.NET CLI, dann mit
Visual Studio sich auf den
laufenden Prozess hängen
2. Die Chrome Developer Tools
nutzen für das direkte
Debuggen der View
▪ [Strg] + [Shift] + [ i ]
Oder](https://image.slidesharecdn.com/electron-190521114806/85/Electron-NET-Cross-Platform-Desktop-Software-mit-ASP-NET-Core-19-320.jpg)
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
- 1. Electron.NET Cross-Platform Desktop Software mit ASP.NET Core Gregor Biswanger | Freier Berater, Trainer und Autor about.me/gregor.biswanger
- 2. Über mich ▪ Freier Berater, Trainer und Autor ▪ Schwerpunkte: Softwarearchitektur, Web und Cross-Plattform Entwicklung mit JavaScript ▪ Technologieberater für die Intel Developer Zone ▪ Internationaler Sprecher auf Konferenzen und User Groups ▪ Freier Autor für heise.de, dotnetpro, WindowsDeveloper und viele weitere Fachmagazine ▪ Video-Trainer bei video2brain und Microsoft Gregor Biswanger Microsoft MVP, Intel Black Belt & Intel Software Innovator cross-platform-blog.de about.me/gregor.biswanger
- 3. Unser Reiseplan ▪ Was ist Electron? ▪ Was ist Electron.NET? ▪ „Meine erste Electron.NET App“ ▪ Debuggen ▪ Die Electron.NET Architektur ▪ Die Kommunikation zwischen Prozessen ▪ Builden
- 5. Electron ▪ Open-Source auf GitHub von GitHub ▪ Der Name war erst „Atom Shell“ ▪ Es ermöglicht die Ausführung von Desktop- Anwendungen mithilfe des Webbrowsers Chromium und des Node.js-Frameworks ▪ Läuft auf Windows, Mac und Linux ▪ Vorteile: ▪ Wir sind nicht mehr in der Sandbox ▪ Einfache Bereitstellung ohne notwendige Frameworks Installation (z.B. Java oder .NET) ▪ Einfache Update-Strategien ▪ Läuft ideal offline Download npm install electron
- 6. Apps Built on Electron
- 8. Oktober 2017 war die Geburtsstunde von Electron.NET!
- 9. Electron.NET ▪ Open-Source auf GitHub ▪ Es ermöglicht die Ausführung von Desktop- Anwendungen mithilfe von Electron und ASP.NET Core ▪ Läuft auf Windows, Mac und Linux ▪ Systemvoraussetzung: ▪ Die gleichen von .NET Core 2 ▪ Node.js ab Version 8 ▪ Vorteile: ▪ Electron-API mit C# Support ▪ Wir sind nicht mehr in der Sandbox ▪ Einfache Bereitstellung ohne notwendige Frameworks Installation (z.B. Java oder .NET) ▪ Einfache Update-Strategien ▪ Läuft ideal offline GitHub github.com/ElectronNET/Electron.NET
- 10. Bestandteile von Electron.NET Electron.NET API Electron.NET CLI ▪ Hängt sich an den Prozess von Electron ▪ Zugriff auf die Electron API via C# ▪ Führt die .NET-Anwendung als Electron-APP aus ▪ Erzeugt Ausführbare Assemblies für die unterschiedlichen Plattformen
- 11. Meine erste Electron.NET App Die ersten Schritte
- 12. Meine erste Electron.NET App in 3 Schritten 1. Neues ASP.NET Core Projekt anlegen ▪ Empfohlen wird eine Singe-Page App- Architektur mit Angular oder React 2. Electron.NET API über NuGet Installieren ▪ PM> Install-Package ElectronNET.API 3. Die UseElectron WebHostBuilder-Extension einbinden public static IWebHost BuildWebHost(string[] args) { return WebHost.CreateDefaultBuilder(args) .UseElectron(args) .UseStartup<Startup>() .Build(); } Program.cs
- 13. Aber bitte mit Fenster! ▪ Electron.NET wird als Prozess im Hintergrund ausgeführt ▪ Wenn die Anwendung nicht als Hintergrund-Prozess geplant wird, sollte beim Starten ein Hauptfenster erzeugt werden mit dem Electron.WindowManager public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); app.UseBrowserLink(); } else { app.UseExceptionHandler("/Home/Error"); } app.UseStaticFiles(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); // Open the Electron-Window here Task.Run(async () => await Electron.WindowManager.CreateWindowAsync()); } Startup.cs
- 14. Electron.NET CLI Installation ▪ Electron.NET CLI über die Projektdatei per XML registrieren ▪ Aktuell leider nur über diesen Weg möglich ▪ Anschließend in der Console innerhalb vom Projekt folgendes Ausführen: ▪ dotnet restore ▪ Die Electron.NET CLI steht dann über mit folgenden Command zur Verfügung: ▪ dotnet electronize .. <ItemGroup> <DotNetCliToolReference Include="ElectronNET.CLI" Version="*" /> </ItemGroup> .. Projektname.csproj-Datei
- 15. Electron.NET Projekt initialisieren ▪ Die Electron.NET CLI benötigt für das Ausführen und das Erzeugen eine eigene Konfigurationsdatei ▪ electron.manifest.json ▪ Diese wird erzeugt mit: ▪ dotnet electronize init
- 16. Electron.NET App starten ▪ In der Console innerhalb vom Web- Projekt folgendes eingeben: ▪ dotnet electronize start ▪ Wichtig! Der erste Start dauert etwas. Das liegt daran, das Electron und einige weitere Pakete installiert werden
- 17. Electron.NET bietet einen Hybrid-Support ▪ Wenn die Anwendung ebenfalls über einen Web-Server bereitgestellt wird, muss der Zugriff auf die Electron.NET API abgefangen werden ▪ Dazu bietet Electron.NET eine eigene Abfrage an mit: ▪ HybridSupport.IsElectronActive Startup.cs public void Configure(IApplicationBuilder app, IHostingEnvironment env) { ... // Open the Electron-Window here if(HybridSupport.IsElectronActive) { Task.Run(async () => await Electron.WindowManager.CreateWindowAsync()); } }
- 18. Debuggen Die ersten Schritte
- 19. Electron.NET App Debuggen ▪ Für das Debuggen gibt es zwei Möglichkeiten: 1. Das Ausführen der App über die Electron.NET CLI, dann mit Visual Studio sich auf den laufenden Prozess hängen 2. Die Chrome Developer Tools nutzen für das direkte Debuggen der View ▪ [Strg] + [Shift] + [ i ] Oder
- 21. Plattform (Betriebssystem) Native App (Electron-Executable) Node.js (Backend – Main Process) Electron.NET Architektur RendererProcess Chromium (Browser) API (Node.js Modules) require Sensoren (Hardware) .NET Core / ASP.NET Core (Main Process) HTML5 und CSS (Frontend)
- 23. Main Process (Hauptprozess) ▪ Haupteinstiegspunkt der App ▪ Laufzeitumgebung Node.js ▪ Wichtig! Electron bringt immer eine eigenständige Node-Version mit sich ▪ Kontrolliert das Leben der App ▪ Es verwaltet auch native Elemente wie Menü, Menüleiste, Dock, Tray usw. ▪ Der Hauptprozess ist verantwortlich für die Erstellung jedes neuen Renderers in der App ▪ Bei Electron.NET startet dieser zusätzlich die .NET Core Anwendung
- 24. Renderer Process ▪ Der Render-Prozess ist ein Browser-Fenster ▪ Laufzeitumgebung Chromium ohne Sandbox ▪ Komplett eigener Prozess ▪ Es können mehrere Renderer Processe (Fenster) erzeugt und unabhängig ausgeführt werden ▪ Kann direkt Node.js-Module einbinden und Ausführen (Node.js-API Support) ▪ Wird vom Main Process über das BrowserWindow- Objekt erzeugt und Verwaltet
- 25. Die index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> We are using node <span id="nodeVersion"></span>, chrome <span id="chromeVersion"></span>, and Electron <span id="electronVersion"></span>. <script> document.getElementById('nodeVersion').textContent = process.versions.node; document.getElementById('chromeVersion').textContent = process.versions.chrome; document.getElementById('electronVersion').textContent = process.versions.electron; </script> </body> </html>
- 26. Kommunikation von Main Process und Renderer Process Die ersten Schritte
- 27. Inter-process Communication (IPC) Main Renderer ipcRenderer.send('start');Electron.IpcMain.on('start', fn); Electron.IpcMain.send('finish', true); ipcRenderer.on('finish', fn);
- 28. Die index.html (Renderer Process) – Ab Zeile 75 <h3 id="cpuHeader"></h3> <button id="cpuBtn">Show CPU activity</button> <script> (function () { const { ipcRenderer } = require("electron"); document.getElementById("cpuBtn").addEventListener("click", () => { ipcRenderer.send("getCpuActivity", 'my possible args'); }); ipcRenderer.on('cpuActivityReply', (event, arg) => { document.getElementById('cpuHeader').innerHTML = arg + "%"; }); }()); </script>
- 29. Die HomeController.cs (Main Process) public IActionResult Index() { if (HybridSupport.IsElectronActive) { Electron.IpcMain.On("getCpuActivity", async (args) => { while (true) { var processes = await Electron.App.GetAppMetricsAsync(); var firstCpuPercentUsage = processes.First().Cpu.PercentCPUUsage; var mainWindow = Electron.WindowManager.BrowserWindows.First(); Electron.IpcMain.Send(mainWindow, "cpuActivityReply", firstCpuPercentUsage); Thread.Sleep(1000); } }); } return View(); }
- 30. Builden Verpacken und Ausliefern
- 31. Builden ▪ Mit „electronize build“ wird für das aktuell laufende Betriebssystem eine Ausführbare Datei im Bin-Ordner erzeugt ▪ electronize build /target win Windows (*.exe) ▪ electronize build /target osx Mac (*.app) ▪ electronize build /target linux Linux (No-extension binary)
- 32. Die Electron.NET API Demos-App ▪ Zeigt die wichtigsten Electron.NET API Beispiele ▪ Bei einer Hybrid-App ▪ ASP.NET Core MVC ▪ https://github.com/ElectronNET/ electron.net-api-demos
- 35. http://about.me/Gregor.Biswanger Ich freue mich auf Feedback! Vielen Dank!