Startseite > Uncategorized > Desktop-Anwendung „cats“ mit electron – Teil II

Desktop-Anwendung „cats“ mit electron – Teil II

kleiner_kater_1

 

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

101_electron_installation

 

Dann kann ich electron über die Kommandozeile starten:

102_electron_installation

 

Im nächsten Schritt lege ich die Grundstruktur der Anwendung an.:

103_electron_helloworld

 

Zusätzlich erstelle ich im Unterverzeichnis .vscode die Datei launch.json um die Anwendung mit Visual Studio Code bearbeiten und debuggen zu können:

104_vscode_launch

 

Dann öffne ich den Ordner in Visual Studio Code und lege eine Startkonfiguration für die neue Anwendung fest:

105_vscode_launch

 

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:

106_run_helloworld

107_run_helloworld

 

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:

108_package_helloworld

 

und zum Schluss wird mit folgendem Befehl ein Executable für Windows erstellt:

electron-packager . --platform=win32 --arch=x64 --electron-version=1.4.13

109_package_helloworld

Damit ist die Anwendung als Executable verteilbar:

110_package_helloworld

 

Im nächsten Schritt werde ich dann endlich The Cat API benutzten.

Advertisements
Kategorien:Uncategorized
  1. Es gibt noch keine Kommentare.
  1. No trackbacks yet.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d Bloggern gefällt das: