SlideShare ist ein Scribd-Unternehmen logo
Electron.NET
Cross-Platform Desktop Software mit
ASP.NET Core
Gregor Biswanger | Freier Berater, Trainer und Autor
about.me/gregor.biswanger
Ü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
Unser Reiseplan
▪ Was ist Electron?
▪ Was ist Electron.NET?
▪ „Meine erste Electron.NET App“
▪ Debuggen
▪ Die Electron.NET Architektur
▪ Die Kommunikation zwischen Prozessen
▪ Builden
Einstieg in
Electron
Cross-Platform Desktop Apps
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
Apps Built on Electron
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Oktober 2017 war die Geburtsstunde von Electron.NET!
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
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
Meine erste
Electron.NET App
Die ersten Schritte
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
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
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
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
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
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());
}
}
Debuggen Die ersten Schritte
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
Die Electron.NET-
Architektur
Die Anatomie
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)
Electron Architektur
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
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
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>
Kommunikation von
Main Process und
Renderer Process
Die ersten Schritte
Inter-process Communication (IPC)
Main Renderer
ipcRenderer.send('start');Electron.IpcMain.on('start', fn);
Electron.IpcMain.send('finish', true); ipcRenderer.on('finish', fn);
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>
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();
}
Builden Verpacken und Ausliefern
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)
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
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
https://github.com/ElectronNET/Electron.NET
http://about.me/Gregor.Biswanger
Ich freue mich auf Feedback!
Vielen Dank!

Weitere ähnliche Inhalte

Was ist angesagt?

Automatischer Build mit Maven
Automatischer Build mit MavenAutomatischer Build mit Maven
Automatischer Build mit Maven
Stefan Scheidt
 
HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
Renate Hermanns
 
Build Patterns - Patterns und Best Practices für den Build Prozess
Build Patterns - Patterns und Best Practices für den Build ProzessBuild Patterns - Patterns und Best Practices für den Build Prozess
Build Patterns - Patterns und Best Practices für den Build Prozess
Ralf Abramowitsch
 
EntwicklerCamp 2014 - DOTS reloaded
EntwicklerCamp 2014 - DOTS reloadedEntwicklerCamp 2014 - DOTS reloaded
EntwicklerCamp 2014 - DOTS reloaded
René Winkelmeyer
 
Rhomobile
RhomobileRhomobile
Rhomobile
Jan Ow
 
Eine Stunde was mit Api First!
Eine Stunde was mit Api First!Eine Stunde was mit Api First!
Eine Stunde was mit Api First!
JanWeinschenker
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
schmichri
 
Dnug35 ak-dev.071111-cookbook
Dnug35 ak-dev.071111-cookbookDnug35 ak-dev.071111-cookbook
Dnug35 ak-dev.071111-cookbook
Ulrich Krause
 
Zend Framework 2 feat. MongoDB
Zend Framework 2 feat. MongoDBZend Framework 2 feat. MongoDB
Zend Framework 2 feat. MongoDB
Ralf Eggert
 
Entwicklungsumgebungen - Packer, Vagrant, Puppet
Entwicklungsumgebungen - Packer, Vagrant, PuppetEntwicklungsumgebungen - Packer, Vagrant, Puppet
Entwicklungsumgebungen - Packer, Vagrant, Puppet
inovex GmbH
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
Tobias Kraft
 
JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013
Oliver Zeigermann
 
Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...
Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...
Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...
inovex GmbH
 
Fix & fertig: Best Practises für "XPages-Migranten"
Fix & fertig: Best Practises für "XPages-Migranten"Fix & fertig: Best Practises für "XPages-Migranten"
Fix & fertig: Best Practises für "XPages-Migranten"
Oliver Busse
 
Boost your APEX Deployment and Provisioning with Docker
Boost your APEX Deployment and Provisioning with DockerBoost your APEX Deployment and Provisioning with Docker
Boost your APEX Deployment and Provisioning with Docker
Steven Grzbielok
 
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickTaugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Philipp Burgmer
 
C API for Lotus Notes & Domino
C API for Lotus Notes & DominoC API for Lotus Notes & Domino
C API for Lotus Notes & Domino
Ulrich Krause
 
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan ScheidtAutomatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
OPITZ CONSULTING Deutschland
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
Christian Keuerleber
 
Einführung Maven
Einführung MavenEinführung Maven
Einführung Maven
FunThomas424242
 

Was ist angesagt? (20)

Automatischer Build mit Maven
Automatischer Build mit MavenAutomatischer Build mit Maven
Automatischer Build mit Maven
 
HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
 
Build Patterns - Patterns und Best Practices für den Build Prozess
Build Patterns - Patterns und Best Practices für den Build ProzessBuild Patterns - Patterns und Best Practices für den Build Prozess
Build Patterns - Patterns und Best Practices für den Build Prozess
 
EntwicklerCamp 2014 - DOTS reloaded
EntwicklerCamp 2014 - DOTS reloadedEntwicklerCamp 2014 - DOTS reloaded
EntwicklerCamp 2014 - DOTS reloaded
 
Rhomobile
RhomobileRhomobile
Rhomobile
 
Eine Stunde was mit Api First!
Eine Stunde was mit Api First!Eine Stunde was mit Api First!
Eine Stunde was mit Api First!
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
 
Dnug35 ak-dev.071111-cookbook
Dnug35 ak-dev.071111-cookbookDnug35 ak-dev.071111-cookbook
Dnug35 ak-dev.071111-cookbook
 
Zend Framework 2 feat. MongoDB
Zend Framework 2 feat. MongoDBZend Framework 2 feat. MongoDB
Zend Framework 2 feat. MongoDB
 
Entwicklungsumgebungen - Packer, Vagrant, Puppet
Entwicklungsumgebungen - Packer, Vagrant, PuppetEntwicklungsumgebungen - Packer, Vagrant, Puppet
Entwicklungsumgebungen - Packer, Vagrant, Puppet
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
 
JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013
 
Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...
Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...
Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...
 
Fix & fertig: Best Practises für "XPages-Migranten"
Fix & fertig: Best Practises für "XPages-Migranten"Fix & fertig: Best Practises für "XPages-Migranten"
Fix & fertig: Best Practises für "XPages-Migranten"
 
Boost your APEX Deployment and Provisioning with Docker
Boost your APEX Deployment and Provisioning with DockerBoost your APEX Deployment and Provisioning with Docker
Boost your APEX Deployment and Provisioning with Docker
 
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickTaugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
 
C API for Lotus Notes & Domino
C API for Lotus Notes & DominoC API for Lotus Notes & Domino
C API for Lotus Notes & Domino
 
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan ScheidtAutomatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
 
Einführung Maven
Einführung MavenEinführung Maven
Einführung Maven
 

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

Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?
Digicomp Academy AG
 
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Digicomp Academy AG
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
Manfred Steyer
 
Rich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit AndroidRich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit Android
Dominik Helleberg
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
greenrobot
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Christian Janz
 
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationDesktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
GWAVA
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
Jens Binfet
 
WTC 2019 – Flutter
WTC 2019 – FlutterWTC 2019 – Flutter
WTC 2019 – Flutter
webconia
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
Mayflower GmbH
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
Ralf Schwoebel
 
.NET Gadgeteer
.NET Gadgeteer.NET Gadgeteer
.NET Gadgeteer
Holger Wendel
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
Hendrik Lösch
 
Ionic 3
Ionic 3Ionic 3
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for Beginners
Ulrich Krause
 
Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009
greenrobot
 
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Gregor Biswanger
 
Gebäudeautomation mit Java und OpenRemote
 Gebäudeautomation mit Java und OpenRemote Gebäudeautomation mit Java und OpenRemote
Gebäudeautomation mit Java und OpenRemote
gedoplan
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core Middlewares
Matthias Jauernig
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
Cenarion Information Systems GmbH
 

Ähnlich wie Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core (20)

Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?
 
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
 
Rich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit AndroidRich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit Android
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationDesktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
 
WTC 2019 – Flutter
WTC 2019 – FlutterWTC 2019 – Flutter
WTC 2019 – Flutter
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
 
.NET Gadgeteer
.NET Gadgeteer.NET Gadgeteer
.NET Gadgeteer
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
 
Ionic 3
Ionic 3Ionic 3
Ionic 3
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for Beginners
 
Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009
 
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
 
Gebäudeautomation mit Java und OpenRemote
 Gebäudeautomation mit Java und OpenRemote Gebäudeautomation mit Java und OpenRemote
Gebäudeautomation mit Java und OpenRemote
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core Middlewares
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
 

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
  • 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()); } }
  • 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