Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Die eigene Desktop-App mit Web-Technologien erstellen: Mit Electron von GitHub kein Problem

Electron von GitHub (Electron)

Jeder Web-Entwickler hat bestimmt schon mal versucht, Apps für Smartphones und Tablets umzusetzen. Im Zeitalter von PhoneGap und Co. haben sich die meisten Hürden erledigt. Doch wie steht es um die Entwicklung von Desktop-Apps mit Web-Technologien? Wir stellen euch Electron von GitHub vor.

Electron setzt auf Node.js und Chromium. Die Inhalte einer damit erstellten App bestehen aus HTML, CSS und JavaScript. Zusätzliche Node.js-Module werden direkt in der Applikation hinterlegt und ausgeliefert. Wir können mit Electron Cross-Device-Applikation erstellen, sprich: Es ist egal, ob wir mit Windows, Mac oder Linux arbeiten.

Electron von Github auf den Zahn fühlen

Da Electron von Github auf allen Betriebssystemen läuft, bietet es nicht nur eine Schnittstelle für die Entwicklung von Desktop-Applikationen mit Web-Technologien, wir können unsere erstellte Applikation auch auf mehreren Systemen ausliefern. Das spart nicht nur Zeit, sondern auch viel Geld in der Entwicklung. Das Know-how muss nicht mehr für unterschiedliche Systeme und Sprachen erworben, sondern kann fokussiert werden.

Electron von Github ist Open Source und kann kostenfrei auch für kommerzielle Projekte genutzt werden. Es bietet zusätzlich Schnittstellen zur System-Hardware, Crash-Reportings, Live-Updates, Windows-Installer und Debugging. Natürlich können alle Projekte auch mit Node.js-Modulen erweitert und angepasst werden.

Der Showroom von Electron (Screenshot: Electron)
Der Showroom von Electron (Screenshot: Electron)

Electron von Github wurde initial für den eigenen Atom-Editor entwickelt. Die Engine Electron wurde dann weiterentwickelt und Open Source für Entwickler bereitgestellt. Schon nennenswerte Unternehmen und Applikationen setzen auf Electron – unter anderem Facebook, Microsoft, Slack und Docker.

Aufbau unserer "Hello-World"-Applikation mit Electron von Github

Damit wir Electron von Github benutzen können, müssen wir auf unserem System zuerst Git und Node.js installieren. Dann können wir mit dem Electron-Quick-Start-Projekt beginnen. Über folgende Terminal-Befehle laden wir das Repository runter, installieren alle Abhängigkeiten und starten das Projekt.

# Clone this repository
$ git clone https://github.com/atom/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install dependencies and run the app
$ npm install && npm start

Sobald wir die Befehle ausgeführt haben, startet die App automatisch. Der Quellcode, der hier ausgeführt wird, besteht immer aus einer index.htmlmain.js und package.json. Die index.html beinhaltet den Content, die main.js liefert die JavaScript-Logik und die package.json hinterlegt alle wichtigen Eckdaten zu der App.

Die erstellte Hello-World-Electron-App (Screenshot: Electron)
Die erstellte Hello-World-Electron-App (Screenshot: Electron)

Automatisch öffnen sich auch die Chromium-Developer-Tools. Das ist kein Fehler, sondern wurde in der main.js programmiert. Ein kurzer Blick in die Datei gibt uns folgenden Befehl: mainWindow.webContents.openDevTools(); Sollte das nicht gewünscht sein, löschen wir diese Funktion und starten unsere App erneut mit npm start.

Wollen wir jetzt unsere App ausliefern und als Standalone-App benutzen, müssen wir uns zum Ordner electron-quick-start/node_modules/electron-prebuilt/dist navigieren. Hier finden wir eine fertige Elektron-Applikation. Starten wir sie, erhalten wir allerdings die Default-App. Damit jetzt unserer Content angezeigt wird, lassen wir uns den Inhalt dieser App anzeigen und navigieren uns zu /Contents/Resources/. Hier erstellen wir einen neuen Ordner namens „app“ und kopieren unsereindex.htmlmain.js und package.json hinein. Unsere App kann jetzt an einen belieben Ort kopiert und gestartet werden.

Welche Schnittstellen, Distributions-Möglichkeiten und weitere Funktionen es gibt, könnt ihr in der offiziellen Dokumentation nachschlagen. Viel Erfolg bei der ersten Desktop-Applikation!

Könnt ihr euch auch vorstellen, Applikationen für den Desktop zu erstellen oder bleibt ihr lieber dem Web treu? Und habt ihr schon unseren Artikel „Mac-Boilerplate für HTML und CSS: Mit Photon schicke Mac-Apps erstellen“ gelesen?

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
Johanna

Hey Jonathan,

guter Beitrag. Auch wir haben Electron ausprobiert und können es nur weiter empfehlen. Gerade für unseren Multi-Channel-App-Ansatz ist es super, dass auch Desktop-Apps immer weiter entwickelt werden. Mit Technologien, wie Node.js, Ionic und allen voran AngularJS kann man mittlerweile ganz wunderbar Apps basteln die auf allen Systemen und allen Engeräten fließend laufen. Und da kommt uns Electron gerade recht. Wir sind gespannt wie es weiter geht und freuen uns auf mehr Artikel. PS: Hier ist unsere Meinung ein bisschen genauer beschrieben ;) http://www.flyacts.com/blog/hybride-desktop-apps-mit-dem-framework-electron/

Grüße
Johanna

Antworten
Web-Apps

Das Grund-Problem ist, das APIs fast überall unerwünscht sind um den eigenen Content zu "beschützen".
Evtl bleibt das also nur ein Feature für Großkunden und B2B oder Business-Background-Systeme wo es schlaue IT-Abteilungen gibt welche sowas den IT-Firmen erfolgreich befehlen können. Überall sonst setzen sich Desktop-Web-Apps wohl leider bis heute kaum durch obwohl das sehr wünschenswert wäre und seit Jahren m.W. von FireFox versprochen wurde...

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.