Elektron einrichten und Hello World Application unter Linux erstellen

In diesem Artikel wird eine Anleitung zur Installation von Elektronen und zum Erstellen einer einfachen „Hello World“ -Elektronenanwendung unter Linux behandelt.

Über Elektron

Electron ist ein Anwendungsentwicklungsrahmen, das zum Erstellen von plattformübergreifenden Desktop-Anwendungen verwendet wird, indem Sie Web-Technologien in einem eigenständigen Webbrowser verwenden. Es bietet auch Betriebssystemspezifische APIs und ein robustes Verpackungssystem, um die Anwendungsverteilung zu vereinfachen. Für eine typische Elektronenanwendung sind drei Dinge erforderlich: Knoten.JS Runtime, ein eigenständiger Browser auf Chrombasis, der mit Elektronen- und OS -spezifischen APIs ausgestattet ist.

Knoten installieren.JS

Sie können den Knoten installieren.JS- und NPM -Paketmanager, indem der folgende Befehl in Ubuntu ausgeführt wird:

$ sudo apt installieren nodejs npm

Sie können diese Pakete in anderen Linux -Verteilungen aus dem Paketmanager installieren. Alternativ können offizielle Binärdateien auf dem Knoten heruntergeladen werden.JS -Website.

Erstellen Sie einen neuen Knoten.JS -Projekt

Sobald Sie den Knoten installiert haben.JS und "NPM" erstellen ein neues Projekt namens "HelloWorld", indem die folgenden Befehle nacheinander ausgeführt werden:

$ mkdir helloWorld
$ CD HelloWorld

Starten Sie als nächstes ein Terminal im Verzeichnis „HelloWorld“ und führen Sie den folgenden Befehl aus, um ein neues Paket zu initialisieren:

$ npm init

Gehen Sie den interaktiven Assistenten im Terminal durch und geben Sie nach Bedarf Namen und Werte ein.

Warten Sie, bis die Installation fertig ist. Sie sollten jetzt ein „Paket haben.JSON -Datei im Verzeichnis "HelloWorld". Ein „Paket haben.JSON ”-Datei in Ihrem Projektverzeichnis erleichtert die Konfiguration von Projektparametern und erleichtert das Projekt für eine einfachere Shareability.

Das „Paket.JSON ”-Datei sollte einen Eintrag wie diesen haben:

"Haupt": "Index.JS "

"Index.JS “befindet sich dort, wo sich die gesamte Logik für Ihr Hauptprogramm befindet. Sie können zusätzliche erstellen “.JS ”,“.html ”und“.CSS ”-Dateien entsprechend Ihren Anforderungen. Für den Zweck des in diesem Handbuchs erläuterten „HelloWorld“ -Programms werden im folgenden Befehl drei erforderliche Dateien erstellt:

$ touch Index.JS -Index.HTML -Index.CSS

Elektron einbauen

Sie können Elektron in Ihrem Projektverzeichnis installieren, indem Sie den folgenden Befehl ausführen:

$ npm install Electron-Save-dev

Warten Sie, bis die Installation fertig ist. Electron wird jetzt Ihrem Projekt als Abhängigkeit hinzugefügt und Sie sollten einen Ordner „node_modules“ in Ihrem Projektverzeichnis sehen. Die Installation von Elektron als Abhängigkeit von pro Projekt ist die empfohlene Methode zur Installation von Elektronen gemäß der offiziellen Elektronendokumentation. Wenn Sie jedoch das Elektronen weltweit in Ihrem System installieren möchten, können Sie den unten genannten Befehl verwenden:

$ NPM Electron -g installieren

Fügen Sie den Abschnitt "Skripte" in "Paket" den Abschnitt "Skripte" hinzu.JSON ”-Fatei zum Abschluss der Elektronen -Setup:

"Start": "Elektron ."

Hauptanwendung erstellen

Öffnen Sie “Index.JS ”-Datei in Texteditor Ihrer Wahl und fügen Sie den folgenden Code hinzu:

const App, BrowserWindow = Request ('Electron');
Funktion createwindow ()
const window = new browserWindow (
Breite: 1600,
Höhe: 900,
WebPreferences:
Knotenintegration: Richtig

);
Fenster.LoadFile ('Index.html ');

App.wenn bereit().dann (Createwindow);

Öffnen Sie “Index.HTML ”-Datei in Ihrem bevorzugten Texteditor und geben Sie den folgenden Code ein:

Hallo Welt !!

Der JavaScript -Code ist ziemlich selbsterklärend. Die erste Linie importiert die erforderlichen Elektronenmodule, die für die Arbeit erforderlich sind, um zu arbeiten. Als nächstes erstellen Sie ein neues Fenster des eigenständigen Browsers, der mit Elektron geliefert wird, und laden den „Index.HTML -Datei drin. Das Markup im „Index.Die HTML -Datei erstellt einen neuen Absatz „Hallo Welt !!"In die" eingewickelt "

" Schild. Es enthält auch einen Referenzlink zum „Index.CSS ”Stylesheet -Datei, die später im Artikel verwendet wurde.

Führen Sie Ihre Elektronenanwendung aus

Führen Sie den folgenden Befehl aus, um Ihre Elektronen -App zu starten:

$ npm Start

Wenn Sie die Anweisungen bisher korrekt befolgt haben, sollten Sie ein neues Fenster erhalten, das dieser ähnlich ist:

Öffnen Sie “Index.CSS ”-Datei und fügen Sie den folgenden Code hinzu, um die Farbe von„ Hello World “zu ändern !!”String.

#HWorld
Farbe Rot;

Führen Sie den folgenden Befehl erneut aus, um zu sehen, wie der CSS -Stil auf „Hello World angewendet wird !!”String.

$ npm Start

Sie haben nun den minimalen Satz von erforderlichen Dateien, um eine grundlegende Elektronenanwendung auszuführen. Sie haben „Index.JS ”, um Programmlogik zu schreiben,„ Index.HTML ”zum Hinzufügen von HTML -Markup und" Index.CSS “zum Styling verschiedener Elemente. Sie haben auch ein „Paket.JSON -Datei und Ordner "node_modules" mit den erforderlichen Abhängigkeiten und Modulen enthalten.

Paketelektronenanwendung

Sie können Electron Forge verwenden, um Ihre Anwendung zu verpacken, wie in der offiziellen Elektronendokumentation empfohlen.

Fügen Sie den folgenden Befehl aus, um Ihrem Projekt Elektronenschmieden hinzuzufügen:

$ NPX @Electron-Forge/CLI @Letzter Import

Sie sollten eine solche Ausgabe sehen:

✔ Überprüfen Sie Ihr System
✔ Git -Repository initialisieren
✔ Schreiben des modifizierten Pakets.JSON -Datei
✔ Abhängigkeiten installieren
✔ Schreiben des modifizierten Pakets.JSON -Datei
✔ Fixierung .Gitignore
Wir haben versucht, Ihre App in ein Format zu konvertieren, das Electron-Forge versteht.
Danke, dass du "Electron-Forge" verwendet hast!!!

Bewertung „Paket.JSON -Datei und Bearbeiten oder Entfernen von Einträgen aus Abschnitten „Macher“ entsprechend Ihren Anforderungen. Wenn Sie beispielsweise keine „RPM“ -Datei erstellen möchten, entfernen Sie den Eintrag zum Erstellen von „RPM“ -Paketen.

Führen Sie den folgenden Befehl aus, um das Anwendungspaket zu erstellen:

$ npm run make

Sie sollten eine ähnliche Ausgabe wie folgt erhalten:

> [email protected] make/home/nit/helloWorld
> Electron-Forge Make
✔ Überprüfen Sie Ihr System
✔ Auflösen von Forge -Konfiguration
Wir müssen Ihre Bewerbung verpacken, bevor wir sie schaffen können
✔ Vorbereitung auf die Verpackung der Anwendung für Arch: x64
✔ Vorbereitung einheimischer Abhängigkeiten
✔ Verpackungsanwendung
Die folgenden Ziele machen: Deb
✔ Making for Target: Deb - auf Plattform: Linux - für Arch: x64

Ich habe das „Paket bearbeitet.JSON ”-Datei, um nur das„ DEB “-Paket zu erstellen. In dem Ordner „Out“ finden Sie in Ihrem Projektverzeichnis gebaute Pakete im Ordner „Out“.

Abschluss

Elektron eignet sich hervorragend zum Erstellen von plattformübergreifenden Anwendungen basierend auf einer einzelnen Codebasis mit geringfügigen OS-spezifischen Änderungen. Es hat einige eigene Themen, die am wichtigsten sind, der Ressourcenkonsum ist. Da alles in einem eigenständigen Browser gerendert wird und ein neues Browserfenster mit jeder Elektronen -App gestartet wird, können diese Anwendungen im Vergleich zu anderen Anwendungen mit nativen OS -spezifischen Toolkits für Anwendungsentwicklungen ressourcenintensiv sein.