Dies ist der zweite Artikel einer Serie über Electron.

Transkript

1 Electron WebDeskApps Dies ist der zweite Artikel einer Serie über Electron. Im ersten Artikel wurden die Grundlagen von Elektron, und die benötigten Ressourcen, die man benötigt um eine Elektron-App zu entwickeln, beschrieben. In diesem Artikel wird erläutert, wie man dieses Tool installiert und eine einfache Electron- Applikation baut. Übersicht: Installation von Visual Studio Code Installation von Node.js und npm Installation von Typescript Erste Electron-Applikation Einrichten der Projektstruktur Applikation initialisieren Electron-Paket herunterladen Die Datei index.ts Die Datei index.html Übersetzen und starten Next Visual Studio Code Um VS Code zu installieren, gehen Sie auf und installieren die für Ihr Betriebssystem geeignete Version. Ein Installer führt Sie Schritt für Schritt durch die Installation. Werden die vorgeschlagenen Einstellungen übernommen, wird VS Code unter C:\Benutzer{Benutzername\AppData\Local\Programs\Microsoft VS Code installiert. Node und npm Um Node.js zu installieren, gehen Sie auf und installieren die für Ihr Betriebssystem geeignete Version. Ein Installer führt Sie Schritt für Schritt durch die Installation. Stellen Sie sicher, dass in den angezeigten Optionen der npm package manager ausgewählt ist. Die erfolgreiche Installation von Node.js können Sie Testen, indem Sie folgende Schritte durchführen: Rufen Sie die Kommandozeile (z.b. CMD) auf und geben den Befehl

2 node -v Sie sollten die installierte Versionsnummer von Node.js als Ausgabe bekommen. Um erfolgreiche Installation von npm zu testen, geben Sie in der Kommandozeile folgenden Befehl ein: npm -v Auch hier sollten die installierte Versionsnummer von npm als Ausgabe bekommen. Typescript Haben Sie Visual Studio Code installiert, so haben Sie auch bereits Typescript auf Ihrem Rechner. Typescript lässt sich aber auch getrennt installieren, indem Sie folgende Schritte durchführen: Rufen Sie die Kommandozeile (z.b. CMD) auf und geben den Befehl npm install -g typescript Um erfolgreiche Installation von _typescript zu testen, geben Sie in der Kommandozeile folgenden Befehl ein: tsc -v Sie sollten die installierte Versionsnummer von typescript als Ausgabe bekommen. Erste Electron-Applikation Wir entwickeln jetzt die erste Electron-Applikation und führen alle notwendigen Schritte manuell durch: Einrichten der Projektstruktur, laden der Packages, Konfiguration und Einrichten des Debuggers. Wir beginnen mit einer einfachen Projektstruktur, in den nachfolgenden Artikeln werden wir diese ändern und an unsere Bedürfnisse anpassen. Einrichten der Projektstruktur Erstellen Sie zuerst mit Hilfe der Kommandozeile einen Ordner und benennen Sie ihn so, wie Ihre Applikation heißen soll, z.b. basic-electron-app mkdir basic-electron-app Applikation initialisieren Die Applikation muss zuerst initialisiert werden. Die Informationen über die Applikationen müssen in einer Datei namens package.json stehen. Node.js liest die Informationen aus dieser Datei. Die Datei kann manuell angelegt werden, oder man überlässt die Erstellung dem Node Package Manager. npm init

3 Sie werden nach mehreren Informationen gefragt. Sie können die Vorschläge übernehmen oder eigene eingeben. Die Datei lässt sich jederzeit updaten. Zu beachten ist der Wert für main. Dies ist der Einstiegspunkt für die Applikation. Im obigen Bild hat dieses Attribut den Wert index.js. Dies bedeutet, dass wir eine Datei index.ts in unserem Projekt brauchen, damit Typescript diese Datei in index.js übersetzen kann. In einer anderen Datei, tsconfig.json, werden die typescript-informationen abgelegt. Auch diese Datei kann manuell erstellt werden. Alternativ lässt sich diese Datei mit dem Befehl tsc --init erzeugen. In diesem Fall wird eine Datei mit vielen Attributen erzeugt, die meisten davon sind auskommentiert.

4 Die Datei tsconfig.json sollte aber auf jeden Fall folgende Einstellungen besitzen: { "compileroptions": { "target": "es5", "module": "commonjs", "strict": true Electron-Paket herunterladen Jetzt können wir im Verzeichnis basic-electron-app das npm Paket mit electron installieren. npm install electron -g --save-dev Die Option -g des Befehls bewirkt, dass Electron global installiert wird und sich somit von überall aufrufen lässt. Der Befehl lädt das Paket herunter und speichert es im Verzeichnis node_modules. Die Option save-dev lässt das Paket aber auch im Verzeichnis node_modules speichern. Das Paket wird als eine Abhängigkeit in der Datei package.json eingetragen. Sie können in das Verzeichnis node_modules navigieren und finden dort viele Packages, die alleine durch den obigen Befehl heruntergeladen worden sind. Die Datei electron.exe wird dabei im Verzeichnis electron\dist gespeichert, die anderen Pakete wurden heruntergeladen, weil Electron diese benötigt. Im Verzeichnis node_modules werden alle Pakete (und ihre Abhängigkeiten), die wir mittels npm herunterladen, gespeichert. Visual Studio Code als Entwicklungsumgebung Wir benutzen Visual Studio Code für die Erstellung unserer Applikation. Hier ein einfacher Weg, um unser Projekt ins VS Code zu laden. Sorgen Sie dafür, das Sie sich im Projektverzeichnis befinden. cd basic-electron-app Starten Sie VS Code. code. Nach kurzer Zeit wird VS Code gestartet und das Verzeichnis unserer Applikation mit allen sich dort befindenden Dateien angezeigt. Jetzt können wir unsere Typescript und unsere Html-Datei erstellen.

5 Die Datei index.ts Bei der Erstellung der Datei package.json haben wir index.js als unsere main-datei angegeben. Aus diesem Grund müssen wir eine Datei index.ts im Hauptverzeichnis der Anwendung erstellen. Zuerst müssen wir mit import dafür sorgen, dass Electron unserer Applikation bekannt gemacht wird. Durch den Import wird es möglich auf dirname (dort steht das Verzeichnis aus der die Applikation ausgeführt wird) und BrowserWindow zuzugreifen. // index.ts import {app, BrowserWindow from 'electron'; let dirname : string; let window; let createwindow = () => { win = new BrowserWindow({ width:200, height: 200 ); window.loadurl(`file://${ dirname/index.html`); window.on("closed", () => { window = null; ); app.on("ready", createwindow); Wir erstellen ein Fenster und laden die lokale Datei index.html. Electron sorgt dafür,dass die Datei nicht nur geladen, sondern auch gerendert wird. Wenn die Applikation initialisiert ist, erstellen wird das Fenster. Dies bewirkt der Befehl aus der letzten Zeile der Datei. Die Datei index.html Was noch fehlt ist die HTML-Datei, die wir anzeigen wollen. Diese muss index.html heißen und ebenfalls im Hauptverzeichnis der Anwendung liegen, da wir dies so in der Datei index.ts angeben haben. // index.ts... window.loadurl(`file://${ dirname/index.html`);... Hier ist unsere Html-Datei: // index.html <!DOCTYPE html> <html><style> body { background-color: #ffcc66

6 </style><head><title>electron</title></head><body><h2>this is a basic electron app with typescript.</h2></body> </html> Übersetzen und starten Sorgen Sie dafür, das Sie sich im Projektverzeichnis befinden. cd basic-electron-app Starten Sie die Übersetzung. tsc Starten Sie die Anwendung. electron. Die Anwendung startet - wir haben eine hybride Applikation erstellt. Sie enthält bereits ein Menüleiste, ein Icon und lässt sich minimieren. Wenn Sie in das Menü Ansicht (View) navigieren, werden Sie sehen, dass von dort das Zoomen möglich ist - genauso wie in einem Browser. Außerdem lassen sich die Entwicklungswerkzeuge (Developer Tools) aufrufen. Es handelt sich wirklich um eine hybride Anwendung! Next Im nächsten Artikel wird beschrieben, wie man die Applikation dahingehend konfigurieren kann, damit die Entwicklung sich komfortabler gestaltet. Außerdem erstellen wir eine weitere Electron-Applikation und werden diese mit Hilfe von VS Code debuggen. Wojciech Kusch