electron - rip tutorial · eine electron-projektstruktur sieht normalerweise so aus:...

23
electron #electron

Upload: others

Post on 18-Oct-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

electron

#electron

Page 2: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Inhaltsverzeichnis

Über 1

Kapitel 1: Erste Schritte mit Elektron 2

Bemerkungen 2

Was ist Elektron? 2

Apps, die auf Electron basieren 2

Versionen 2

Examples 3

Installation von Electron 3

Abhängigkeiten 3

Wie installiere ich es? 3

Hallo Welt! 3

Konfiguration 3

Der Hauptprozess 4

HTML Template & Renderer Prozess 4

App ausführen 5

Mit electron-prebuilt Installation weltweit 5

Methode 2 - Ohne electron-prebuilt System 5

Kapitel 2: Bootstrap in Elektron verwenden 7

Einführung 7

Examples 7

Elektron mit Bootstrap verbinden 7

Kapitel 3: Elektroniktablett-App 8

Examples 8

Elektroniktablett App 8

Kapitel 4: Elektron-Winstaller 9

Einführung 9

Syntax 9

Parameter 9

Examples 10

Page 3: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Erstelle JS 10

Kapitel 5: Haupt- und Renderer-Prozess. 11

Bemerkungen 11

Examples 11

Asynchrone IPC-Kommunikation 11

Remote-Modul RMI 12

Synchrone IPC-Kommunikation 12

Kapitel 6: Remote-Funktion - Verwenden Sie die Elektron-Funktionen in JavaScript 14

Einführung 14

Syntax 14

Examples 14

Verwenden der Fernbedienung durch Einstellen der Fortschrittsleiste 14

Verwenden der Fernbedienung, indem Sie das Fenster auf Vollbild setzen 14

Kapitel 7: Verpackung einer Elektronen-App 15

Einführung 15

Syntax 15

Parameter 15

Examples 15

Elektron-Packager installieren 15

Verpackung von CLI 16

Verpackung aus Skript 16

Erstellung von npm-Skripten zur Automatisierung der Verpackung von Elektronen 16

Kapitel 8: Verwendung von Nedb in Elektron 18

Examples 18

Installation von nedb 18

Elektron-App mit Nedb verbinden 18

Daten in nedb einfügen 18

Suche in nedb 18

In nedb löschen 19

Credits 20

Page 4: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Über

You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: electron

It is an unofficial and free electron ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official electron.

The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to [email protected]

https://riptutorial.com/de/home 1

Page 5: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Kapitel 1: Erste Schritte mit Elektron

Bemerkungen

Was ist Elektron?

Electron ist ein Open-Source-Framework , das zur Erstellung von Desktop-Anwendungen mit HTML , CSS und JavaScript verwendet wird . Im Inneren funktioniert es dank Chromium und Node.js.

Der ursprüngliche Entwickler GitHub arbeitet mit einer breiten Community von Entwicklern zusammen, um das Projekt zu pflegen, das hier zu finden ist .

Einer der Hauptvorteile bei der Verwendung von Electron besteht darin, dass es auf der Grundlage von Web-Technologien plattformübergreifend ist und Anwendungen mit Linux, MacOS und Windows mit demselben Code bereitstellen kann.

Es enthält auch native Elemente wie Menüs und Benachrichtigungen sowie nützliche Entwicklungstools für das Debugging und Absturzberichte.

Apps, die auf Electron basieren

Beispiele für Anwendungen, die dieses Framework verwenden, sind:

Atom•Locker für den Desktop•Visual Studio Code•GitBook•Fluch•Wordpress für Desktop•

... und viele andere

Versionen

Ausführung Bemerkungen Veröffentlichungsdatum

1.0.0 2016-05-09

1.0.1 2016-05-11

1.0.2 2016-05-13

1.1.0 2016-05-13

https://riptutorial.com/de/home 2

Page 6: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Ausführung Bemerkungen Veröffentlichungsdatum

1.1.1 2016-05-20

1.1.2 2016-05-24

1.1.3 2016-05-25

1.2.0 2016-05-26

1.2.1 2016-06-01

1.2.2 2016-06-08

1.2.3Es gibt mehr zwischen diesem und 1.4.7, aber es waren zu viele auflisten

2016-06-16

1.4.7 Letzte Version ab 19. November 2016 2016-11-19

1.6.11 2017-05-25

1.7.3 Letzte Version ab 19. Juni 2017 2017-06-19

Examples

Installation von Electron

Abhängigkeiten

Um ein Elektron zu installieren, müssen Sie zuerst Node.js installieren, das mit npm geliefert wird .

Wie installiere ich es?

Npm verwenden :

# Install the `electron` command globally in your $PATH npm install electron -g # OR # Install as a development dependency npm install electron --save-dev

Hallo Welt!

https://riptutorial.com/de/home 3

Page 7: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Konfiguration

Eine Electron-Projektstruktur sieht normalerweise so aus:

hello-world-app/ ├── package.json ├── index.js └── index.html

Nun erstellen wir die Dateien und initialisieren unsere package.json .

$ mkdir hello-world-app && cd hello-world-app $ touch index.js $ touch index.html $ npm init

Hinweis: Wenn der main nicht in package.json angegeben package.json , verwendet Electron index.js als Standardeinstiegspunkt.

Der Hauptprozess

In Electron wird der Prozess, der das package.json , als Hauptprozess bezeichnet . Hier können wir eine GUI anzeigen, indem Sie BrowserWindow Instanzen BrowserWindow .

Fügen Sie Folgendes zu index.js :

const { app, BrowserWindow } = require('electron') // Global reference to the window object let win // This method will be called when Electron has finished // initialization and is ready to create browser windows app.on('ready', function(){ // Create the window win = new BrowserWindow({width: 800, height: 600}) // Open and load index.html to the window win.loadURL('file://' + __dirname + '/index.html') // Emitted when the window is closed. win.on('closed', () => { // Dereference the window object win = null }); }) // Quit the app if all windows are closed app.on('window-all-closed', () => { app.quit() })

https://riptutorial.com/de/home 4

Page 8: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

HTML Template & Renderer Prozess

Als Nächstes erstellen wir die GUI für die App. Electron verwendet Webseiten als GUI, die jeweils in einem eigenen Prozess ausgeführt werden, der als Renderer-Prozess bezeichnet wird .

Fügen Sie den folgenden Code zu index.html :

<!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> </body> </html>

App ausführen

Es gibt mehrere Möglichkeiten, eine Electron App auszuführen.

Mit electron-prebuilt Installation weltweit

Vergewissern Sie sich zunächst, dass Sie ein electron-prebuilt installiert haben .

Jetzt können wir die App mit diesem Befehl testen:

$ electron .

Methode 2 - Ohne electron-prebuilt System

Zuerst müssen wir den Ordner Ihrer App eingeben (den Ordner, in dem package.json ist).

Öffnen Sie dort ein Terminal- / Eingabeaufforderungsfenster und geben Sie npm install , um die erforderlichen Dateien im Ordner dieser App zu installieren.

npm start , um die App auszuführen. package.json Sie, dass Ihre package.json noch ein package.json angeben muss.

Wenn alles richtig funktioniert hat, sollten Sie so etwas sehen:

https://riptutorial.com/de/home 5

Page 9: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Herzliche Glückwünsche! Sie haben erfolgreich Ihre erste Electron-App erstellt.

Erste Schritte mit Elektron online lesen: https://riptutorial.com/de/electron/topic/4934/erste-schritte-mit-elektron

https://riptutorial.com/de/home 6

Page 10: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Kapitel 2: Bootstrap in Elektron verwenden

Einführung

Mit twitter bootstrap eines der besten Front-End-Frameworks der Web-Welt. Da Elektron auf einen Webbrowser angewiesen ist, können wir Bootstrap problemlos mit Elektron verwenden, um die Kraft von Bootstrap in unserem Elektronensystem zu nutzen. Die aktuellste Version von Bootstrap ist heute 3.3.7 und Bootstrap 4 befindet sich noch in der Alphaphase.

Examples

Elektron mit Bootstrap verbinden

Um Bootstrap zu verwenden, gibt es zwei Fälle.

Die Elektronen-App ist mit dem Internet verbunden1. Die Elektronen-App ist nicht mit dem Internet verbunden2.

Für elektronische Apps, die mit dem Internet verbunden sind, können wir einfach CDN-Links für Bootstrap verwenden und diese in unsere HTML-Dateien aufnehmen.

Das Problem tritt auf, wenn wir eine Offline-Version verwenden müssen, bei der die App nicht mit dem Internet verbunden ist. In diesem Fall,

Laden Sie bootstrap von Bootstrap herunter1. Entpacken Sie den Ordner in die Elektronen-App2. Im Bootstrap-Verzeichnis befinden sich CSS- und Javascript-Dateien.3. Verschieben Sie die Bootstrap-CSS-Dateien zum besseren Verständnis in den CSS-Ordner (alle Styling-Dateien befinden sich in diesem Ordner) und Bootstrap-JS-Dateien in den JS-Ordner (Alle Javascript-Dateien befinden sich in diesem Ordner)

4.

Verknüpfen Sie in Ihren HTML-Dateien die HTML-Dateien mit dem folgenden Code5.

<link rel="stylesheet" href="path_to_the_offline_bootstrap_css_file"> <script scr="path_to_the_offline_bootstrap_js_file"></script>

Auf diese Weise können Sie twitter bootstrap im Elektron-Framework einsetzen.

Bootstrap in Elektron verwenden online lesen: https://riptutorial.com/de/electron/topic/10897/bootstrap-in-elektron-verwenden

https://riptutorial.com/de/home 7

Page 11: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Kapitel 3: Elektroniktablett-App

Examples

Elektroniktablett App

Hinzufügen eines Symbols zu Ihrer Taskleiste

let tray = null; let mainWindow = null; let user = null; app.on('ready', () => { /** * Tray related code. */ const iconName = 'icon.png'; const iconPath = path.join(__dirname, iconName); tray = new Tray(iconPath); tray.setToolTip('AMP Notifier App'); const contextMenu = Menu.buildFromTemplate([{ label: 'Quit', click: destroyApp }]); tray.setContextMenu(contextMenu); tray.on('click', () => { app.quit(); }); });

Elektroniktablett-App online lesen: https://riptutorial.com/de/electron/topic/8160/elektroniktablett-app

https://riptutorial.com/de/home 8

Page 12: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Kapitel 4: Elektron-Winstaller

Einführung

NPM-Modul zum Erstellen von Windows-Installationsprogrammen für Electron-Apps. Es hilft, eine einzige EXE-Datei für die Electron-Windows-Anwendung zu erstellen

Syntax

Weltweit installieren•npm install -g electron-winstaller•Lokal installieren•npm install --save-dev electron-winstaller•

Parameter

Config Name Beschreibung

appVerzeichnisDer Wert des Autors für die Metadaten des Nuget-Pakets. Standardmäßig wird das Autorfeld aus der package.json-Datei Ihrer App übernommen, wenn es nicht angegeben ist.

BesitzerDer Wert des Eigentümers für die Metadaten des Nuget-Pakets. Wird standardmäßig auf das Feld autors gesetzt, wenn nicht angegeben.

exe

Der Name der Haupt-EXE-Datei Ihrer App. Hierbei wird das Namensfeld in der package.json-Datei Ihrer App mit einer hinzugefügten Erweiterung .exe verwendet, wenn es nicht angegeben ist.

BeschreibungDer Beschreibungswert für die Metadaten des Nuget-Pakets. Standardmäßig wird das Beschreibungsfeld aus der package.json-Datei Ihrer App übernommen, wenn es nicht angegeben ist.

AusführungDer Versionswert für die Metadaten des Nuget-Pakets. Standardmäßig wird das Versionsfeld aus der package.json-Datei Ihrer App übernommen, wenn es nicht angegeben ist.

TitelDer Titelwert für die Metadaten des Nuget-Pakets. Der Standardwert ist das Feld productName und dann das Namensfeld aus der package.json-Datei Ihrer App, wenn diese nicht angegeben ist.

NameWindows-Anwendungsmodell-ID (appId). Der Standardwert ist das Namensfeld in der package.json-Datei Ihrer App.

https://riptutorial.com/de/home 9

Page 13: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Config Name Beschreibung

certificateFile Der Pfad zu einem Authenticode-Code-Signaturzertifikat

certificatePasswordDas Kennwort zum Entschlüsseln des in certificateFile angegebenen Zertifikats

signWithParamsParameter, die an das Signtool übergeben werden. Überschreibt certificateFile und certificatePassword.

iconUrlEine URL zu einer ICO-Datei, die als Anwendungssymbol verwendet wird (wird in der Systemsteuerung> Programme und Funktionen angezeigt). Standardmäßig das Atom-Symbol.

setupIconDie ICO-Datei, die als Symbol für das generierte Setup.exe verwendet werden soll

setupExe Der für die generierte Setup.exe-Datei zu verwendende Name

setupMsiDer Name, der für die generierte Datei Setup.msi verwendet werden soll

noMsi Sollte Squirrel.Windows ein MSI-Installationsprogramm erstellen?

remoteReleasesEine URL zu Ihren vorhandenen Updates. Wenn angegeben, werden diese heruntergeladen, um Delta-Aktualisierungen zu erstellen

remoteToken Authentifizierungstoken für Remote-Updates

Examples

Erstelle JS

Hier ist eine grundlegende Build-Datei zum Erstellen einer ausführbaren Datei aus einer Windows-App.

var electronInstaller = require('electron-winstaller'); var resultPromise = electronInstaller.createWindowsInstaller({ appDirectory: 'Your_electron_application_path', authors: 'Author Name', description: "Description" }); resultPromise.then(() => console.log("Build Success!"), (e) => console.log(`No dice: ${e.message}`));

Elektron-Winstaller online lesen: https://riptutorial.com/de/electron/topic/9492/elektron-winstaller

https://riptutorial.com/de/home 10

Page 14: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Kapitel 5: Haupt- und Renderer-Prozess.

Bemerkungen

Der Prozess, der das package.json , wird als Hauptprozess bezeichnet . Der Hauptprozess erstellt Webseiten, indem BrowserWindow Instanzen erstellt werden. Jede Webseite in Electron läuft in einem eigenen Prozess ab, der als Renderer-Prozess bezeichnet wird . Der Hauptprozess verwaltet alle Webseiten und die entsprechenden Renderer-Prozesse. Jeder Renderer-Prozess ist isoliert und kümmert sich nur um die darin laufende Webseite.

Examples

Asynchrone IPC-Kommunikation

Hauptprozess-Quellcode index.js :

const {app, BrowserWindow, ipcMain} = require('electron') let win = null app.on('ready', () => { win = new BrowserWindow() win.loadURL(`file://${__dirname}/index.html`) win.webContents.openDevTools() win.on('closed', () => { win = null }) win.webContents.on('did-finish-load', () => { win.webContents.send('asyncChannelToRenderer', 'hello') }) }) ipcMain.on('asyncChannelToMain', (event, arg) => { console.log(arg + ' from renderer') if (arg === 'hello') { event.sender.send('asyncChannelToRenderer', 'world') } })

Renderer-Prozess in index.html :

<!DOCTYPE html> <html> <head> <title>Hello World IPC</title> <script> require('electron').ipcRenderer.on('asyncChannelToRenderer', (event, arg) => { console.log(arg + ' from main') if (arg === 'hello') { event.sender.send('asyncChannelToMain', 'world') } }) </script>

https://riptutorial.com/de/home 11

Page 15: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

</head> <body> <button onclick="require('electron').ipcRenderer.send('asyncChannelToMain', 'hello')">click me</button> </body> </html>

Remote-Modul RMI

Das remote Modul ermöglicht das einfache RMI (Remote Method Invocation) von Hauptprozessobjekten aus dem Renderer-Prozess. Erstellen Sie zuerst den Hauptprozess in index.js

const {app, BrowserWindow} = require('electron') let win = null app.on('ready', () => { win = new BrowserWindow() win.loadURL(`file://${__dirname}/index.html`) win.on('closed', () => { win = null }) })

und dann Remote-Prozess index.html

<!DOCTYPE html> <html> <head> <script> const {BrowserWindow, app} = require('electron').remote </script> </head> <body> <button onclick= "let win = new BrowserWindow(); win.loadURL(`file://${__dirname}/index.html`)">new window</button> <button onclick= "app.quit()">quit</button> </body> </html>

Synchrone IPC-Kommunikation

Erstellen Sie index.js als

const {app, BrowserWindow, ipcMain} = require('electron') let win = null app.on('ready', () => { win = new BrowserWindow() win.loadURL(`file://${__dirname}/index.html`) win.webContents.openDevTools() win.on('closed', () => { win = null }) })

https://riptutorial.com/de/home 12

Page 16: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

ipcMain.on('syncChannelToMain', (event, arg) => { console.log(arg + ' from renderer') event.returnValue = 'world' })

und Renderer-Prozess index.html als

<!DOCTYPE html> <html> <head> <title>Hello World IPC</title> </head> <body> <button onclick="console.log(require('electron').ipcRenderer.sendSync('syncChannelToMain', 'world') + ' from main')">click me</button> </body> </html>

Haupt- und Renderer-Prozess. online lesen: https://riptutorial.com/de/electron/topic/5432/haupt--und-renderer-prozess-

https://riptutorial.com/de/home 13

Page 17: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Kapitel 6: Remote-Funktion - Verwenden Sie die Elektron-Funktionen in JavaScript

Einführung

Wenn Sie einige Dinge in renderer.js oder main.js ändern müssen, aber die Änderungen in index.html vornehmen möchten, können Sie die Remote-Funktion verwenden. Sie haben Zugriff auf alle Elektronenfunktionen, die Sie benötigen!

Syntax

Verwenden Sie die Fernbedienung wie require("electron") :

main.js: const electron = require("electron");

index.html: const electron = require("electron").remote;

Examples

Verwenden der Fernbedienung durch Einstellen der Fortschrittsleiste

const { remote } = require("electron"); // <- The Node.js require() function is // added to JavaScript by electron function setProgress(p) { // p = number from 0 to 1 const currentWindow = remote.getCurrentWindow(); currentWindow.setProgressBar(p); }

Verwenden der Fernbedienung, indem Sie das Fenster auf Vollbild setzen

const { remote } = require("electron"); // <- The Node.js require() function is // added to JavaScript by electron function fullscreen(f) { // p = false or true const currentWindow = remote.getCurrentWindow(); currentWindow.maximize(); }

Remote-Funktion - Verwenden Sie die Elektron-Funktionen in JavaScript online lesen: https://riptutorial.com/de/electron/topic/8719/remote-funktion---verwenden-sie-die-elektron-funktionen-in-javascript

https://riptutorial.com/de/home 14

Page 18: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Kapitel 7: Verpackung einer Elektronen-App

Einführung

Wenn Sie zur Verteilung bereit sind, können Sie Ihre Elektron-App in eine ausführbare Datei packen.

Elektronische Anwendungen können unter Windows (32/64 Bit), OSX (Mac OS) und Linux (x86 / x86_64) installiert werden.

Verwenden Sie zum Packen des Codes das npm-Paket 'electron-packager \

https://github.com/electron-userland/electron-packager

Syntax

$ Elektron-Packager•Sourcedir•App Name•--platform = Plattform•--arch = Bogen•[optionale Flags ...]•

Parameter

Parameter Einzelheiten

Sourcedir Das Verzeichnis Ihrer elektronischen Anwendungsdateien

App Name Der Name Ihrer Bewerbung

PlattformDie Plattform, für die Sie Ihren Code kompilieren möchten. Wenn Sie dies auslassen, wird dies für das Host-Betriebssystem kompiliert

BogenDie Systemarchitektur, für die Sie Ihren Code kompilieren möchten. Wenn Sie dies auslassen, wird es für den Hostbogen kompiliert

Examples

Elektron-Packager installieren

# for use in npm scripts npm install electron-packager --save-dev

https://riptutorial.com/de/home 15

Page 19: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

# for use from cli npm install electron-packager -g

Verpackung von CLI

electron-packager C:/my-app MyApp

Verpackung aus Skript

var packager = require('electron-packager'); packager({ dir: '/', }, function(err, path){ if(err) throw err; // Application has been packaged });

Erstellung von npm-Skripten zur Automatisierung der Verpackung von Elektronen

Eine praktische Methode zum Packen Ihrer Anwendung besteht darin, die Skripts in Ihre packages.json Datei zu schreiben und sie mit dem Befehl npm run

{ "name": "AppName", "productName": "AppName", "version": "0.1.1", "main": "main.js", "devDependencies": { "electron": "^1.6.6", "electron-packager": "^8.7.0" }, "scripts": { "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=images/icon.png --prune=true --out=release-builds", "package-win": "electron-packager . --overwrite --platform=win32 --arch=ia32 --icon=images/icon.png --prune=true --out=release-builds", "package-linux" : "electron-packager . --overwrite --platform=linux --arch=x64 --icon=images/icon.png --prune=true --out=release-builds" } }

Und um sie auszuführen, schreiben Sie einfach:

npm run package-mac npm run package-win npm run package-linux

Eine Aufschlüsselung der Befehlsflags lautet:

electron-packager . // this runs the packager in the current folder

https://riptutorial.com/de/home 16

Page 20: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

--overwrite // overwrite any previous build --platform=darwin // platform for which the binaries should be created --arch=x64 // the OS architecture --icon=images/icon.png // the icon for the app executable --prune=true // this does not copy your dev-dependencies that appear in your packages.json --out=release-builds // the name of the folder were the binaries will be outputed

Bevor Sie die Skripts ausführen, ändern Sie die devDependencies in Abhängigkeiten, da der elektronische Packager die Pakete in den devDependencies nicht in der App bündeln kann. Ändern Sie in packager.json das Wort devDependencies (wenn es dort ist oder wenn Pakete mit --save-dev in npm install installiert werden) in nur Abhängigkeiten.

Verpackung einer Elektronen-App online lesen: https://riptutorial.com/de/electron/topic/8945/verpackung-einer-elektronen-app

https://riptutorial.com/de/home 17

Page 21: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Kapitel 8: Verwendung von Nedb in Elektron

Examples

Installation von nedb

Es ist sehr einfach, nedb zu installieren.

npm install nedb --save # Put latest version in your package.json

Für laubenliebende Menschen

bower install nedb

Elektron-App mit Nedb verbinden

Beim Erstellen von Elektron-Apps befindet sich das Backend normalerweise in einem separaten Ordner (js-Dateien) und das Frontend in einem separaten Ordner (html-Dateien). Im Backend müssen Sie zur Verwendung der Datenbank das nedb-Paket wie folgt in die Anforderung aufnehmen.

var Datastore = require('nedb'),db = new Datastore({ filename: 'data.db', autoload: true });

Beachten Sie, dass das Laden der Datenbankdatei eine asynchrone Aufgabe ist.

Daten in nedb einfügen

Um Datensätze in nedb einzufügen, werden die Daten grundsätzlich in Form von json gespeichert, wobei der Schlüssel die Spaltennamen ist und der Wert für diese Namen die Werte für diesen Datensatz sind.

var rec = { name: 'bigbounty',age:16}; db.insert(rec, function (err, newrec) { // Callback is optional // newrec is the newly inserted document, including its _id // newrec has no key called notToBeSaved since its value was undefined });

Seien Sie vorsichtig mit allen Operationen der Datenbank, da diese asynchron sind.

Hinweis **: Wenn _id nicht automatisch in den json-Daten enthalten ist, die Sie einfügen, wird diese von nedb für Sie erstellt.

Suche in nedb

Um nach Datensätzen in nedb zu suchen, müssen wir den Json, der die Suchkriterien enthält,

https://riptutorial.com/de/home 18

Page 22: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

einfach als Parameter an die Suchfunktion des DB-Objekts übergeben.

db.find({ name: 'bigbounty' }, function (err, docs) { // docs is an array containing documents that have name as bigbounty // If no document is found, docs is equal to [] });

Um nur ein Dokument zu finden, wie wir in mysql limit verwenden, ist es in nedb einfach.

db.findOne({ name: 'bigbounty' }, function (err, doc) { // doc is only one document that has name as bigbounty // If no document is found, docs is equal to [] });

In nedb löschen

Um Dokumente in nedb zu entfernen, ist das sehr einfach. Wir müssen nur die Funktion zum Entfernen des DB-Objekts verwenden.

db.remove ({name: 'bigbounty'}, function (err, numremoved) {// numremoved ist die Anzahl der Dokumente, die entfernt werden.});

Verwendung von Nedb in Elektron online lesen: https://riptutorial.com/de/electron/topic/10906/verwendung-von-nedb-in-elektron

https://riptutorial.com/de/home 19

Page 23: electron - RIP Tutorial · Eine Electron-Projektstruktur sieht normalerweise so aus: hello-world-app/ ├── package.json ├── index.js └── index.html Nun erstellen

Credits

S. No

Kapitel Contributors

1Erste Schritte mit Elektron

Alphonsus, Community, Eslam Mahmoud, Florian Hämmerle, Hewbot, J F, Piero Divasto, SimplyCodin, Theo, vintproykt, Vishal

2Bootstrap in Elektron verwenden

bigbounty

3 Elektroniktablett-App Anavar Bharmal, nmnsud

4 Elektron-Winstaller Krupesh Kotecha

5Haupt- und Renderer-Prozess.

mrkovec

6

Remote-Funktion - Verwenden Sie die Elektron-Funktionen in JavaScript

B. Colin Tim, Florian Hämmerle

7Verpackung einer Elektronen-App

bigbounty, Dan Johnson, VladNeacsu

8Verwendung von Nedb in Elektron

bigbounty

https://riptutorial.com/de/home 20