Desktop-Anwendung „cats“ mit electron – Teil II
Die Grundvoraussetzung für eine electron-Anwendung ist die Installation von node.js. Die Installation von node habe ich im Teil I kurz beschrieben. In diesem Teil geht es darum electron zu installieren eine „Hello World“-Anwendung zu erstellen und diese als Executable bereit zu stellen.
Eine sehr gute Anleitung zur Entwicklung einer electron-Anwendung findet man bei Stefan Niedermeier unter Electron – Noch ein Application Framework? Als erstes muss ich electron mit Hilfe von npm installieren: npm install -g electron-prebuilt
Dann kann ich electron über die Kommandozeile starten:
Im nächsten Schritt lege ich die Grundstruktur der Anwendung an.:
Zusätzlich erstelle ich im Unterverzeichnis .vscode die Datei launch.json um die Anwendung mit Visual Studio Code bearbeiten und debuggen zu können:
Dann öffne ich den Ordner in Visual Studio Code und lege eine Startkonfiguration für die neue Anwendung fest:
Die Datei Launch.json sieht bei mir so aus:
{ "version": "0.2.0", "configurations": [ { "name": "Debug Main Process", "type": "node", "request": "launch", "stopOnEntry": true, "cwd": "${workspaceRoot}", "runtimeExecutable": "C:/Users/strahberge/AppData/Roaming/npm/node_modules/electron-prebuilt/dist/electron.exe", "program": "${workspaceRoot}/main.js" } ] }
Jetzt kann ich die Anwendung erstellen. Diese besteht zunächst aus einer Konfigurationsdatei package.json in der die Basisdaten der Anwendung hinterlegt werden:
{ "name" : "cats", "version" : "0.0.1", "main" : "main.js" }
Die Hauptdatei main.js startet die eigentliche Anwendung in einem Browserfenster:
'use strict'; const {app, BrowserWindow} = require('electron') const path = require('path') const url = require('url') // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let win function createWindow () { // Create the browser window. win = new BrowserWindow({width: 500, height: 500}) // and load the index.html of the app. win.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) // Open the DevTools. win.webContents.openDevTools() // Emitted when the window is closed. win.on('closed', () => { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. win = null }) } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', createWindow) // Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win === null) { createWindow() } })
Zusätzlich werden noch die Developer-Tools mit openDevTools() gestartet um die eigentliche „Web-Anwendung“ untersuchen zu können. Der Einstiegspunkt der Web-Anwendung ist die Datei index.html:
<!DOCTYPE html> <html> <body> Hello Cats! </body> </html>
Über den Debugger in Visual Studio Code starte ich die Anwendung:
Als letzte muss die Anwendung noch in ein, durch den Anwender, ausführbares Format gebracht werden. Dazu gibt es den electron-packager. Dieser wird auch über npm installiert:
und zum Schluss wird mit folgendem Befehl ein Executable für Windows erstellt:
electron-packager . --platform=win32 --arch=x64 --electron-version=1.4.13
Damit ist die Anwendung als Executable verteilbar:
Im nächsten Schritt werde ich dann endlich The Cat API benutzten.