Hybride Desktop-Apps mit dem Framework Electron

Als Agentur setzen wir auf den Ansatz der hybriden (sprich cross platform) Entwicklung. Mit Hilfe der von uns bereits vorgestellten Technologien, wie Cordova, PhoneGap und Ionic lassen sich mobile Apps für die bekanntesten mobilen Betriebssysteme mit Webtechnologien entwickeln. Diesen Ansatz hat auch Team rund um das Projekt GitHub aufgegriffen. Jedoch portieren sie die Idee von Web- und Mobile-Apps zu richtigen Desktop-Anwendungen. Aus ihrer Idee ist am Ende ein mächtiges, aber noch sehr junges, Framework mit dem Namen Electron entstanden.

Electron

Das Electron Framework kombiniert JavaScript, HTML und CSS zur Gestaltung der Benutzeroberfläche mit nativen Funktionalitäten, die mit Hilfe von Node.js erstellt oder angesprochen werden können. Das dieses Konzept sehr gut funktioniert hat das Team selbst mit ihrem sehr beliebten Text-Editor Atom unter Beweis gestellt. Dieser erfreut sich immer größerer Beliebtheit bei Programmierern und kommt unter anderem auch bei uns zum Einsatz. Über die einfachen Schnittstellen von Node.js können eigene Plugins mühelos umgesetzt und integriert werden.

Einrichtung
Electron wird wie ein normales Node-Modul über die Paketverwaltung NPM installiert. Daher sind Node.js und NPM Voraussetzung für die Einrichtung.
npm install electron-prebuilt 

Die erste Anwendung
Danach kann das eigene Projekt in einem Verzeichnis angelegt werden. Die einfachste Form einer Electron-App besteht aus drei Dateien.

  1. package.json -
    • Informationen über das Projekt,
    • definiert zusätzliche Abhängigkeiten zu anderen Node-Module
    • legt Einstiegspunkt in die Anwendung fest
  2. main.js – Hauptdatei, verwaltet die Anwendungsfenster, reagiert auf System-Ereignisse
  3. index.html – Benutzeroberfläche als Webseite

Eine sehr einfache package.json sieht dann wie folgt aus:

Der Schlüssel main stellt die Verbindung zum Einstiegspunkt der Anwendung dar. Natürlich kann daher auch die Hauptdatei main.js umbenannt und in der package.json angegeben werden.

Der Standartinhalte der main.js übernimmt das initiale Erstellen des Anwendungsfensters, das Reagieren auf das Schließen des Hauptfensters.

Das Browserfenster lädt nach dem Erstellen unsere index.html. Hier können nach belieben weitere Frontend-Frameworks eingebunden und genutzt werden.

Über ein Terminal bzw. Kommandozeile kann dann die Anwendung über den Befehl electron . aufgerufen werden. Der ‘.’ steht hier für den Pfad zum Projekt. Befindet ihr euch bereits dort, dann reicht der Punkt vollkommen aus. Ist Electron bei euch nicht global installiert, müsst ihr noch den Pfad zum Modal angeben (./node_modules/.bin/electron .). Das Resultat sieht dann folgendermaßen aus.

HalloWelt Electron

Distribution
Um eure tolle Anwendung anderen bereitzustellen, müsste ihr einfach euer Projekt in den Resources-Ordner von Electron kopieren und in app umbenennen.

  • Mac – electron/Electron.app/Contents/Resources/app/ –> main.js, package.json, index.html
  • Windows, Linux – electron/resources/app/ –> main.js, package.json, index.html

Wenn ihr jetzt die Electron-App ausführt (electron.exe, Electron.app bzw. electron), sollte eure Anwendung starten.
Ihr könnt die Anwendung auch in ein spezielles Archiv verpacken und dann in den Resources-Ordner.
Eine genauere Anleitung findet ihr HIER.

Als kleines Hilfsmittel existiert auch ein Build-Tool für eigene Apps mit dem Namen Electron-Packager.

Das Build-Tool von FLYACTS
Wir bei FLYACTS haben uns natürlich auch schon ein wenig genauer mit Electron auseinandergesetzt. Dabei ist ein kleines Build-Tool für unsere Anwendungen entstanden. Dazu benutzen wir vor allem die GitLab-API, um unsere Projekte abzurufen und zu verarbeiten. Als Frontend Technologien kamen AngularJS und Bootstrap zum Einsatz. Es folgen ein paar kleine Einblicke.

Autorisierung mit Hilfe der GitLab-Zugangsdaten

Autorisierung mit Hilfe der GitLab-Zugangsdaten.

Eine Übersicht der Projekte, welche auch durchsucht werden kann.

Eine Übersicht der Projekte, welche auch durchsucht werden kann.

Ein Projekt wird von GitLab heruntergeladen und konfiguriert.

Ein Projekt wird von GitLab heruntergeladen und konfiguriert.

Der letzte Schritt ist dann das eigentliche Bauen der Anwendungen.

Wir freuen uns über eine Bewertung, um ein Feedback zu erhalten:

Durchschnittlich 4.2 Sterne aus 6 Meinungen.

2 Kommentare zu “Hybride Desktop-Apps mit dem Framework Electron

  1. Hallo, toller Artikel, aber habt ihr euch auch schon einmal SenchaTouch oder Appcelerator angesehen?
    Mit Sencha ist es ja schon seit geraumer Zeit möglich auch Desktop Apps zu erstellen.

    Liebe Grüße
    Markus

    • Vielen Dank für deinen Kommentar. Wir haben bereits einige Erfahrungen mit Sencha Touch gesammelt, uns dann allerdings aufgrund struktureller sowie performancetechnischer Gründe für Angular in Verbindung mit Electron entschieden.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">