Moin Moin, heute will ich mit dir aus einer bestehenden UI5-Anwendung eine Desktop App erstellen. Das machen wir mit Electron.

Electron ist ein freies Framework für Dektop Apps, dass von GitHub entwickelt wurde und mittlerweile in vielen modernen Anwendungen zum Einsatz kommt. Electron-Anwendungen können auf Linux, macOS und Windows laufen.

[0]: Vorbereitungen

Bevor wir loslegen, müssen wir ein paar Dinge vorbereiten. Du brauchst eine fertige SAP UI5 Applikation. Wenn du gerade keine Applikation zur Hand hast, kannst du die App aus dem UI5 Walkthrough nehmen. Öffne also einmal die URL zu der App und klick oben rechts auf Download.

Dann muss bei dir NodeJS installiert sein. Falls du das noch nicht hast, gehst du einmal auf die Webseite und lädst die LTS Version herunter (bei mir ist es 10.15.x). Folge einfach den Installationsanweisungen.

Wenn du das erledigt hast, lädst du noch die SAP UI5 Runtime herunter, diese brauchen wir damit unsere App offline laufen kann.

[1]: Projekt anlegen

Als nächstes erstellen wir ein neues Verzeichnis für unser Projekt, mein neues Projekt heißt saptron.

Jetzt brauchen wir die Konsole, wechsel einmal in deinen Projektverzeichnis saptron und gib npm init ein. npm wird dich durch die Erstellung deines neuen Projekts leiten, die Default-Werte sind ausreichend.

C:\Users\benjamin\projekte\saptron>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (saptron)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\benjamin\saptron\package.json:

{
  "name": "saptron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

Jetzt liegt in deinem saptron-Verzeichnis eine neue Datei. Auf diese kommen wir später noch mal zurück. Als nächstes öffnest du das sap.m.tutorial.walkthrough.25.zip und kopierst das Verzeichnis webapp in das saptron-Verzeichnis.

Damit sind unsere Vorbereitungen abgeschlossen. Bis jetzt hast du das eigentlich ganz gut gemacht.

[2]: Electron App erstellen

Als nächstes legst du eine neue Datei index.js an und füllst sie mit folgendem Inhalt.

const {app, BrowserWindow} = require('electron');

let mainWindow;

app.on('ready', () => {
            mainWindow = new BrowserWindow({ 
                width: 800, 
                height: 600,
                webPreferences: {
                        nodeIntegration: false   
                } 
        });
        mainWindow.loadURL('file://' + __dirname + '/webapp/index.html');
});

Das ist der Einstiegspunkt für unsere App. Hier wird ein neues Browser Fenster erstellt und die index.html aus unserer webapp geladen.

Jetzt benötigen wir noch Electron, dafür öffnest du wieder die Konsole und gehst in das saptron-Verzeichnis dort führst du npm install electron --save-dev aus. Sobald npm fertig ist sieht dein Verzeichnis schon etwas anders aus.

Öffne einmal die package.json.

{
  "name": "saptron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^5.0.1"
  }
}

Wie du siehst gibt es jetzt eine neue Sektion “devDependencies” und darin das Paket electron. Die Developer Dependencies werden nur während der Entwicklung benötigt. In der fertigen Applikation landen nur die Teile von Electorn, die wir auch benutzen.

Da wir Datei schon mal offen haben, ersetzt du den Inhalt von “scripts” so wie oben.

In dem node_modules-Verzeichnis findest du electron und alle seine Abhängigkeiten. In dem package-lock.json sind alle Pakete mit ihrer Version und Abhängigkeiten festgehalten.

[3]: Testlauf

In der Konsole, gibst du jetzt einmal npm start ein. Es öffnet sich ein neues Fenster und siehe da unsere App erscheint auf dem Bildschirm.

Sieht doch eigentlich schon ganz gut aus, oder? Aber noch ist unsere App nicht so richtig offline-fähig, denn noch lädt sie die SAP UI5 Bibliothek über das Internet nach.

Jetzt kopierst du das resources Verzeichnis aus der SAP UI5 Runtime in unser Projektverzeichnis.

Damit die neuen Ressourcen auch genutzt werden, müssen wir die index.html im webapp Verzeichnis anpassen. In Zeile 9 wird die URL durch den Pfad zur SAP UI5 Runtime ersetzt.

Wenn du die App jetzt wieder mit npm start aufrufst wird sie die UI5 Bibliothek nicht mehr aus dem Netz nachgeladen.

[4]: Die Electron App bauen

Zum Abschluss wollen wir noch ausführbare Binarys erstellen, dafür fügen wir ein weiteres Paket zu unserem Projekt hinzu.

npm install electron-packager --save-dev

Unserem package.json fügen wir einen neuen Befehl hinzu.

{
  "name": "saptron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-packager . saptron --overwrite --platform win32 --arch x64 --out dist/"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^5.0.1",
    "electron-packager": "^13.1.1"
  }
}

Mit npm run build starten wir den den Prozess. Sobald der packager fertig ist, finden wir in dist/saptron-win32-x64 unsere Windows Anwendung.
Um auch noch für Linux und macOS zu kompilieren, ändern wir erneut das package.json.

{
  "name": "saptron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "win": "electron-packager . saptron --overwrite --platform win32 --arch x64 --out dist/",
    "mac": "electron-packager . saptron --overwrite --platform darwin --arch x64 --out dist/",
    "lin": "electron-packager . saptron --overwrite --platform linux --arch x64 --out dist/"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^5.0.1",
    "electron-packager": "^13.1.1"
  }
}

Du ahnst vermutlich bereits, wie du auch für Linux und macOS, ausführbare Anwendungen bauen kannst, probier es einfach mal aus.

Damit beenden wir unseren kleinen Ausflug in die Welt von Electron. Man kann mit diesem Framework natürlich noch viel mehr machen aber für einen Einstieg war das doch schon mal ganz gut oder?

Noch Zeit? Dann guck dir doch mal einen von unseren anderen UI5 Artikeln an.

Du interessierst dich für Fiori und hast Lust coole Projekte mit uns zu machen? Wir suchen dich! Schau doch mal in unserer Stellenbeschreibung vorbei.