Electron – Einführung + Installation

Wer Desktop-Anwendungen für alle möglichen Endgeräte entwickeln möchte, benötigt oftmals ein Framework, das die Cross-Device-Entwicklung möglich macht. Mit dem Open-Source-Framework von Github lässt sich dieser Ansatz schnell und komfortabel umsetzen.


Das Electron Framework von Github basiert auf Node.js und dem Webbrowser Chromium. Es verbindet Javascript, HTML als auch CSS und lässt uns als Entwickler Anwendungen programmieren, die auf allen erdenklichen Endgeräten ausgeführt werden können. Die Verbindung von der Desktop-App und der Webanwendung wird dadurch realisiert, dass Electron aus zwei Prozessen besteht. Dabei gibt es zum einen den sogenannten Hauptprozess, der für den Part zuständig ist, der sich lokal auf unserem PC abspielt und zum anderen mehrere Renderer-Prozesse. Diese Renderer-Prozesse erzeugen ein Art Webseite bzw. ein Browser-Fenster in unserer Anwendung. Diese Seite besteht aus HTML, CSS und Javascript. Der Hauptprozess bietet dem Framework einen Einstiegspunkt für unsere App.

Bekannte Software, die auf dem Electron-Framework basiert, ist zum Beispiel der Atom-Editor, Visual Code von Microsoft oder Discord. Weitere Anwendungen, die mit Electron programmiert wurden, können hier gefunden werden.

Zur Installation

Um die ersten Schritte mit Electron zu bewältigen, benötigt man Node.js und den damit verbundenen Paketmanager npm. Auf der Webseite von Node.js lässt sich dieser zum Beispiel als Windows Installer (MSI Datei) herunterladen. Nach der Installation von Node.js (npm) sollte man nun einen Ordner für sein erstes Electron Projekt erstellen, in den dann die nötigen Dateien geladen werden können. Für die eigentliche Installation von Electron muss man nun in seinen angelegten Ordner über die Kommandozeile navigieren und dort npm ausführen.

npm init

npm install electron --save-dev --save-exact

Bei der Initialisierung gibt man dann eine Projektbeschreibung, einen Einstiegspunkt und weitere Merkmale des Projekts an. Der Einstiegspunkt sollte die Datei main.js sein. Alle diese eingegebenen Informationen werden dann in der package.json Datei abgespeichert, die notwendig für euer Projekt ist.

Nach der Installation werden alle nötigen Node Module in den Projektordner geladen. An diesem Punkt sollte euer Projektordner eine package.json Datei enthalten und einen Ordner namens “node_modules”. Jetzt ist es wichtig eine Einstiegsdatei anzulegen, die ihr so nennt, wie ihr es in der Initialisierung von Node.js angegeben habt. In diesem Beispiel wäre dies main.js. Die Datei legt ihr direkt in eurem Projektordner an.

Erste Anwendung ausführen

Eure main.js könnte zum Beispiel so in etwa aussehen:

const electron = require('electron');
const app = electron.app;

const BrowserWindow = electron.BrowserWindow;

var mainWindow;

app.on('ready',function()
{
    mainWindow = new BrowserWindow({width: 1024,height: 768,backgroundColor: '#D3D3D3'});
    mainWindow.loadURL('https://mediasuche.de');
});

Diesen Code könnt ihr zum Austesten von eurem Projekt benutzen.

Doch bevor ihr nun eure erste Anwendung ausführen könnt, müsst ihr eine kleine Änderung an der package.json Datei vornehmen. Dafür öffnet ihr diese und ändert in dem Eintrag “scripts” den ersten Eintrag auf “start” und ändert zu dem die Beschreibung dieses Skripts in “electron .” um. In dem folgenden Bild könnt ihr sehen, wie eure package.json Datei nun aussehen sollte.

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "electron hello World app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Stani",
  "license": "ISC",
  "devDependencies": {
    "electron": "^1.7.6"
  }
}

Als letzten Schritt müsst ihr jetzt nur noch über die Kommandozeile (CMD unter Windows) in euren Projektordner navigieren und dort den Befehl “npm start” ausführen.

npm start

Weitere Schritte wären dann eine index.html für seine Anwendung zu schreiben und diese mit der main.js zu verbinden.

Fazit:

Electron ist meiner Meinung nach eins der besten Frameworks für Javascirpt, wenn es um Cross-Device Apps geht. Die Einrichtung und die ersten Schritte sind leicht durchzuführen und bieten einen schnellen Einstieg in die eigentliche Programmierung der Anwendung. Für alle, für die die oben gezeigten Schritte zu aufwending sind, gibt es außerdem ein Quickstart-Kit von Electron, mit dem der Einstieg noch leichter erfolgen kann.

, , , , , markiert

Schreibe einen Kommentar

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

Dies ist ein Demo-Shop für Testzwecke — Bestellungen werden nicht ausgeführt. Ausblenden