In diesem Quick-Start-Guide findest du alle Informationen, um sofort mit der Entwicklung deiner App in Electron zu starten.

Der Guide besteht aus mehreren Teilen. Hier in Teil 1 „Electron Quick-Start: Vorbereitung“ geht es um die nötigen Vorbereitungen, also um alles was zu tun ist, bevor du mit der Entwicklung deiner eigenen App starten kannst. Die Links unten führen dich zu den anschließenden Kapiteln des Guides.

Teil 2: Entwicklung der App
Teil 3: Export der App

Eine Zusammenfassung (Nur einzelne Schritte, keine Erklärungen) aller drei Kapitel ist hier verfügbar:

Zusammenfassung

Vorbereitung – Inhalt

Was ist Electron?

Electron ist ein Open-Source Framework zur Entwicklung von Desktopanwendungen auf verschiedenen Plattformen (Windows, Linux & MacOS).

Elelctron Apps bestehen aus mehreren Prozessen, die alle in JavaScript (oder C++) geschrieben werden. Das GUI wird in HTML bzw. CSS umgesetzt, und mithilfe von Chromium (die Open-Source Basis von Google-Chrome) gerendert & ausgeführt. Als Laufzeitumgebung wird Node.js verwendet.

Aufgrund dieses Aufbaus ist Electron für viele einfache, aber auch sehr komplexe Desktopanwendungen geeignet und sehr flexibel einsetzbar.

Der Grundaufbau einer Electron-App ist inklusive verschiedener Vorlagen unten beschrieben, so dass du sofort mit der Entwicklung deiner App beginnen kannst.

Beispiele für bekannte Apps, die in Electron entwickelt wurden sind z.B. Discord, WhatsApp, oder auch Visual Studio Code (welches wir auch hier als Editor verwenden werden, um unsere eigene App in Electron zu schreiben).

Allgemeine Infos zum Electron Quick-Start Tutorial

Das Tutorial bezieht sich auf Electron 18.2.3. Electron ist grundsätzlich abwärtskompatibel – manchmal gibt es zwischen den Versionen aber größere Änderungen (z.B. die Einführung von preload.js – mehr dazu später). Sollte das Tutorial mit der aktuellen Version von Electron nicht mehr kompatibel sein, gebt bitte Bescheid!

Weiterhin möchte ich kurz darauf hinweisen, dass ich hier nur das wirklich knappe Grundgerüst einer Electron-App zeige und erkläre, das hilft auf jeden Fall dabei, das eigene Projekt zu starten, aber reicht keinesfalls aus, um sofort all deine Ideen umsetzen zu können.

Das folgende Tutorial bezieht sich auf die Entwicklung einer App mit Visual-Studio-Code, es kann aber natürlich auch ein beliebiger anderer Editor verwendet werden.

Weiterhin zeige ich den Prozess der Entwicklung auf einem Windows-Rechner. Solltest du auf einer anderen Plattform arbeiten, unterscheiden sich natürlich plattformabhängige Dialoge, Einstellungen, usw.

Was du mitbringen solltest:

Du solltest zumindest etwas Erfahrung mit Web-Entwicklung haben, sprich HTML, JavaScript und CSS sollten für dich keine Fremdworte sein.

Vorbereitung

1. Visual Studio Code installieren

Falls du gerade erst mit der Entwicklung von Apps oder dem Programmieren von Computern im allgemeinen beginnst, werden dir schnell verschiedene Code-Editor über den Weg laufen, einer davon ist VS-Code.

Lade dir hier die neuste Version von Visual Studio Code herunter, und installiere sie auf deinem System.

Die Standardeinstellungen im Installer können übernommen, oder nach deinen Vorstellungen angepasst werden.
Wichtig: „Zu PATH hinzufügen“ sollte ausgewählt werden!

Beim ersten Start von VS-Code kannst du verschiedene Einstellungen machen, aber das ist für unsere Zwecke nicht nötig. Du kannst den Tab „Getting started“ einfach schließen.

Unten rechts wird dir wahrscheinlich eine Meldung angezeigt:

Klicke auf „Installieren und neu starten“. Falls du die Meldung nicht siehst, versuch‘ es mit einem Klick auf die kleine Glocke unten rechts.

Nach dem Neustart klicke auf Datei > Einstellungen > Einstellungen. Suche die Einstellung „File: Auto Save“ und stelle sie auf „afterDelay“ um. Änderungen an Dateien werden von CS-Code nun automatisch gespeichert. Du kannst VS-Code nun schließen.

2. Node.js installieren

Node.js ist das Runtime-Environment in dem Electron Apps auf einem Computer ausgeführt werden. Über den Node-Package-Manager (npm) können auch sogenannte „Programmpakete“ verwaltet werden (mehr dazu später).

Lade dir hier die neuste Version von Node.js herunter, und installiere sie auf deinem System.

Die Standardeinstellungen im Installer können in der Regel übernommen werden. Es ist allerdings nicht nötig, unter „Tools for Native Modules“ das Häkchen bei „Automatically install the necessary tools […]“ zu setzen.

Starte deinen PC jetzt neu.

3. Projektverzeichnis erstellen

In diesem Ordner werden alle deine Projektdateien aufbewahrt. Der Einfachheit halber werde ich das Verzeichnis unter folgendem Pfad anlegen:

c:\Electron-App

Öffne dazu VS-Code und drücke dann strg + ö.
Unten öffnet sich das Terminal von VS-Code, in dem du deinen Computer via Powershell steuern kannst.

In der untersten (=neuesten) Zeile des Terminals sollte etwas stehen wie: „PS C:\Users\username>„. Hinter dem „>“ kannst du eigene Befehle eingeben. Gib folgenden Befehl ein, und bestätige mit Enter: cd C:\

Jetzt befindest zu dich im Verzeichnis C:\. Erstelle einen Ordner mit dem Namen „Electron-App“ mit folgendem Kommando:

mkdir Electron-App

Die wichtigsten Powershell-Kommandos sind hier zu finden.

Klicke oben links auf wodurch sich die Ordner-Ansicht („Explorer“) öffnet. Klicke auf „Ordner öffnen“ und wähle unser Projektverzeichnis aus.
Bestätige mit einem Klick auf „Ja, ich vertraue den Autoren“.

4. VS-Code Workspace speichern

Klicke oben links auf „Datei“, und dann auf „Arbeitsbereich speichern unter…“.

Navigiere in unser Projektverzeichnis (c:\Electron-App) und speichere den Workspace als „Electron-App.code-workspace“ ab.

Oben Links im Explorer sollte dir nun eine erste Datei im Projektverzeichnis angezeigt werden. Willst du deine Arbeit mal unterbrechen, kannst du VS-Code einfach schließen. Wenn du dann den gerade angelegten Workspace öffnest, kannst du einfach genau da weitermachen, wo du aufgehört hast.

5. Installation überpüfen

Führe nach einander die Kommandos „node -v“ und „npm -v“ über das Terminal in VS-Code aus.
Dir sollten jeweils die aktuellen Versionen über das Terminal ausgegeben werden. Falls nicht, hat die Installation von node.js nicht funktioniert.

Wichtig: Halte die Version von node.js auf deinem System immer aktuell! Das geht über das Kommando: „npm update„.

6. App konfigurieren

Stelle sicher, dass sich die Konsole im Projektverzeichnis befindet („PS C:\Electron-App“). Führe das Kommando „npm init“ aus.

Die Konsole sollte nun ganz unten einen Text, wie den folgenden anzeigen: „package name: (electron-app)“. Das bedeutet, dass der Name unseres App-Pakets „electron-app“ ist.

Tippe in die Zeile einen Namen für deine App ein, z.B. „test-app“ und bestätige mit Enter.

Vergebe jeweils auch einen Wert für „version“ & „description“.

Gib für „entry point“ „main.js“ in die Konsole ein und bestätige mit Enter.

Lasse alle weiteren Einstellungen zunächst leer: Drücke dazu mehrfach Enter. Falls gewünscht, kannst du die Einstellungen später noch anpassen.

Gib unter „Is this OK? (yes)“ „y“ ein und bestätige mit Enter.

In der Explorer-Ansicht oben links sollten in unserem Projektverzeichnis nun zwei neue Dateien angezeigt werden:

  • package.json
  • package-lock.json

Öffne „package.json“ mit einem Doppelklick. Im Editor sollte dir nun etwas ähnliches, wie hier angezeigt werden:

{
  "name": "test-app",
  "version": "1.0.0",
  "description": "Tutorial: parallellines.de/tutorial/electron-quick-start",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "parallellines.de",
  "license": "MIT"
}Code-Sprache: JSON / JSON mit Kommentaren (json)

Ändere den Inhalt unter „scripts“ zum Folgenden: 

{
  ...
  "scripts": {
    "start": "electron ."
  },
  ...
}Code-Sprache: JavaScript (javascript)

7. Electron installieren

Führe das Kommando „npm install --save-dev electron“ aus.

Durch dieses Kommando wird das NPM-Paket „Electron“ installiert.

Und das war’s auch schon mit den Vorbereitungen! 🙂

Der Guide besteht aus mehreren Teilen. Weiter geht es mit der Entwicklung der App. Auch eine kurze Zusammenfassung des Tutorials ist unten verlinkt.

Zusammenfassung
Weiter: Teil 2 – Entwicklung der App