Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core

112 vues

Publié le

HTML5 ist überall - im Web, Mobile und natürlich auch auf den Desktop. Die große Stärke an HTML5 ist nicht nur, dass diese Plattform übergreifend unterstützt wird, sondern dass es immer mehr Features aus der Desktop-Welt bietet. Dennoch erfordert die Entwicklung von Desktop Anwendungen auf Basis von HTML & JavaScript neue Frameworks und Sprachen. Das Open Source Projekt Electron.NET verbindet ihr bekanntes C# & ASP.NET Core KnowHow mit den Möglichkeiten von Electron. In Kombination von C# und HTML5 können hoch performante Desktop Geschäftsanwendung für Windows, Mac und Linux entwickelt werden. Sie steigen mit den Grundlagen von Electron.NET ein und werden dann mit den wichtigsten Tools und Vorgehensweisen vertraut gemacht. Mit diesen Infos steigen Sie rasch zum versierten Cross-Platform Entwickler mit .NET auf.

Publié dans : Technologie
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL eBOOK INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Soyez le premier à aimer ceci

Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core

  1. 1. Electron.NET Cross-Platform Desktop Software mit ASP.NET Core Gregor Biswanger | Freier Berater, Trainer und Autor about.me/gregor.biswanger
  2. 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. 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
  4. 4. Einstieg in Electron Cross-Platform Desktop Apps
  5. 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. 6. Apps Built on Electron
  7. 7. Oktober 2017 war die Geburtsstunde von Electron.NET!
  8. 8. 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
  9. 9. 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
  10. 10. Meine erste Electron.NET App Die ersten Schritte
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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()); } }
  17. 17. Debuggen Die ersten Schritte
  18. 18. 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
  19. 19. Die Electron.NET- Architektur Die Anatomie
  20. 20. 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)
  21. 21. Electron Architektur
  22. 22. 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
  23. 23. 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
  24. 24. 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>
  25. 25. Kommunikation von Main Process und Renderer Process Die ersten Schritte
  26. 26. Inter-process Communication (IPC) Main Renderer ipcRenderer.send('start');Electron.IpcMain.on('start', fn); Electron.IpcMain.send('finish', true); ipcRenderer.on('finish', fn);
  27. 27. 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>
  28. 28. 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(); }
  29. 29. Builden Verpacken und Ausliefern
  30. 30. 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)
  31. 31. 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
  32. 32. https://github.com/ElectronNET/Electron.NET
  33. 33. http://about.me/Gregor.Biswanger Ich freue mich auf Feedback! Vielen Dank!

×