Mit Web-Technologien auf Systemsoftware und Hardware zugreifen Cross-Platform-App mit dem Miletus Framework erstellen

Anbieter zum Thema

PresseBox - unn | UNITED NEWS NETWORK GmbH

Das Ziel: Mit Web-Technologien eine App – System-, Datenbank- und Hardwarezugriff inklusive – erstellen. Mit dem passenden Framework geht dieses leichtgewichtig und ohne großen Ressourcenbedarf. Auch eine Ansteuerung der spezifischen Schnittstellen des Raspberry Pi ist möglich.

Web-Applikationen bieten von Haus aus eine hohe Flexibilität in Bezug auf die nutzbaren Systeme und Geräte. Sie werden über einen Server und das Internet bereitgestellt und laufen direkt im Browser. Die Benutzeroberfläche kann mit Hilfe von HTML und CSS attraktiv im Design und gleichzeitig responsiv gestaltet werden. Vereinfacht wird dieses durch leistungsfähige Bibliotheken und Frameworks wie Bootstrap, Angular, React usw.

Nichtsdestotrotz gibt es einige Nachteile. Der Zugriff auf das System und die Hardware ist stark eingeschränkt. Ebenso ist eine Offline-Nutzung nicht oder nur bedingt möglich. Um an das Gerät angeschlossene Hardware zu steuern, d.h. über die Schnittstellen Signale zu lesen und zu schreiben, dafür eignen sich Web-Applikationen nicht.

Einen bekannten Ansatz, einige dieser Einschränkungen zu überwinden, bietet Electron. Mit Hilfe dieses Frameworks ist es möglich, die Webtechnologien HTML, CSS und JavaScript dazu zu nutzen, Cross-Plattform-Applikationen zu erstellen. Für Web-Entwicklerinnen und -Entwickler können damit Anwendungen programmieren, die sich offline auf einer Vielzahl von Client-Systemen ausführen lassen. Einige häufig genutzte Applikationen wurden mit Elektron erstellt, beispielsweise WhatsApp, Visual Studio Code oder Skype.

Mit Miletus gibt es ein weiteres Framework mit dem Ziel, eine Web-Anwendung nativ auf unterschiedlichen Clientsystemen auszuführen. Der technisch maßgebende Unterschied besteht in der Nutzung der Browser-Engine. Electron bindet in jeder Applikation eine eigene Browser-Engine ein, in welcher die Web-Applikation läuft. Die Browser-Engine ist verantwortlich für das Rendering und die Ausführung der Web-Applikation. Miletus verwendet dagegen die auf dem jeweiligen System vorhandene Browser-Engine und muss diese daher nicht in das Applikationspaket integrieren. Das sind unter anderem:

• Windows: WebView2

• macOS: WebKit (Safari)

• Linux: WebKitGTK

• Raspberry Pi: WebKitGTK

Im Regelfall kann man davon ausgehen, dass die aktuellen Browser auf dem Zielsystemen vorhanden sind. Diese Vorgehensweise bietet zwei Vorteile. Zum einem werden die Anwendungspakete für die Zielsysteme deutlich kleiner. Eine minimale Elektron App umfasst bereits über 100 MB Speicherplatz, da die Browser-Engine in jedes Anwendungspaket integriert wird. Eine vergleichbare Miletus App benötigt deutlich weniger Speicherplatz.

Der andere Vorteil besteht darin, dass Updates der Browser-Engine auf dem Zielsystem, auch den nutzenden Applikationen zugutekommen. Auf diese Weise werden beispielsweise Sicherheitsupdates auch für auf Miletus basierende Anwendungen direkt wirksam. Die Architektur einer auf dem Miletus-Framework basierenden Anwendung zeigt die vorangestellte Abbildung.

Funktionsumfang

Insgesamt bietet Miletus folgende Features, um eine neue oder bestehende Web-Applikation zu einer plattformübergreifenden Anwendung zu verpacken:

• Entwicklung der Benutzeroberfläche der App mit HTML, CSS und den passenden Web-Bibliotheken und -Frameworks.

• Die Programmlogik kann mit JavaScript oder mit der typischeren Sprache TypeScript erstellt werden.

• Plattformübergreifende Anwendungen für die Systeme Windows, macOS, Linux und Raspberry Pi.

• Erzeugung einer einzigen ausführbaren Datei für ein einfaches Deployment auf das Zielsystem.

• Direkter Zugriff auf lokale Datenbanken auf dem System.

• Erweiterbarkeit durch Einbindung von Bibliotheken für den Zugriff auf systemspezifische Funktionen.

• Expliziter Zugriff auf die Hardwareschnittstellen des Raspberry Pi, d.h. GPIO, I2C, SPI und UART für eine direkte Steuerung der Hardware.

• Umfassendes API zur Realisierung der App-Anforderungen, wie Dialoge, Zugriff auf das Dateisystem, Shell und Registry (Windows), Integration von Menüs, Handling der Applikationsfenster und dem Datenaustausch über die Zwischenablage.

Aus Sicht der Softwareentwicklung können bestehende oder neu erstellte Web-Applikationen genutzt werden, um diese zu den Anwendungspaketen für die gewünschten Zielsysteme zu verpacken.

Technischer Hintergrund

Das Framework Miletus besteht aus zwei Teilen. Zum einem aus einer API-Bibliothek und zum anderen aus einem Packager. Die API-Bibliothek enthält die Funktionen zur Integration und Interaktion der Web-Anwendung mit dem Betriebssystem. Der Packager hat die Aufgabe, die Web-Applikation – bestehend aus HTML-, CSS-, JavaScript- (TypeScript) und sonstigen Dateien – zu einem Anwendungspaket für die ausgewählten Zielsysteme zu verpacken. Über die API-Bibliothek werden für die Web-Applikation die notwendigen Systemzugriffe vermittelt.

Die Miletus-API wird in das Web-Projekt eingebunden. Über eine Konfigurationsdatei (miletus.config.json) erfolgt die Steuerung des Packagers zum Erstellen der Anwendungspakete. Dazu müssen dem Packager alle Dateien der Web-Applikation (HTML, CSS, JavaScript, TypeScript, Ressourcen) und der Verweis auf das Miletus-API bekannt (miletus.js) gemacht werden. Für welche Zielsysteme die Anwendungspakete erstellt werden sollen, kann angegeben werden.

Um Cross-Plattform-Applikationen mit diesem Ansatz zu erstellen sind folgende Schritte (Überblick) notwendig:

• 1. Erstellung der Web-Applikation mit HTML, CSS, JavaScript bzw. TypeScript und den gewünschten Bibliotheken und Frameworks.

• 2. Integration des Miletus-API für den Systemzugriff.

• 3. Erstellung der Anwendungspakete für die gewünschten Zielsysteme.

• 4. Deployment und ggf. Signierung der Anwendungspakete.

Der Packager kann dabei direkt über die Kommandozeile genutzt werden. Alternativ steht eine Extension für den Editor Visual Studio Code zur Verfügung. Installieren Sie Miletus in Visual Studio Code wie folgt:

• 1. Laden Sie die Extension von der Downloadseite des Miletus-Projektes

• 2. Wählen Sie in Visual Studio Code Install from VSIX

Danach steht die Extension in Visual Studio Code mit den folgenden Befehlen zur Verfügung (siehe Bild):

Miletus: Package application: Erstellt die Packages der Anwendung für die Zielsysteme Windows, macOS und Linux/ Raspberry Pi OS.

Miletus: Initialize config: Es wird ein minimalistisches Template für die Konfigurationsdatei miletus.config.json angelegt.

Miletus: Package and run: Es werden die Packages für die Zielsysteme erstellt und die Anwendung auf dem Entwicklungssystem gestartet.

Web-Applikationen für das Internet of Things auf einem Raspberry Pi

Beispielhaft betrachten wir hier ein Anwendungsszenario, in dem eine Web-Applikation zur Steuerung von spezifischer Hardware eingesetzt wird. Dabei wird der Raspberry Pi verwendet. Der Raspberry Pi ist als ein minimalistischer, jedoch vollständiger Computer in der Lage umfassende Steueraufgaben zu übernehmen. Individuelle Hardware kann dabei über diverse, direkt zugängliche Schnittstellen des Raspberry Pi angeschlossen werden.

Das Miletus-API bietet einen Zugriff auf die GPIO, I2C, SPI und UART- Schnittstellen. Als Betriebssystem wird auf dem Raspberry Pi meist das auf Linux basierende Raspberry Pi OS ausgeführt. Die Software wird als Web-Applikation erstellt und zu einem Anwendungspaket für den Raspberry Pi verpackt. Ein solches System ist gut geeignet für vielfältige Anforderungen der Automation im industriellen und privaten Bereich.

Beispielhaft wird hier die Vorgehensweise für ein SmartHome-System („MySweetHome“) demonstriert. Benötigt wird eine Web-Applikation. Inhalte, Layout und Design werden mittels HTML und CSS gestaltet. Häufig nutzt man dazu eine User Interface-Bibliothek wie Bootstrap, um auf einfache Art und Weise ein ansprechendes Design und eine responsive Darstellung auf unterschiedlichen Geräten zu erhalten. Das Bild vorne zeigt einen Entwurf für das angedachte Smart-Home-System, welches mit Hilfe des Designtools Bootstrap Studio gestaltet wurde.

Das Tool generiert die notwendigen HTML, CSS und JavaScript-Dateien. Diese kann man exportieren und in einem Quelltexteditor anpassen. Unser Beispiel besteht zunächst aus drei Seiten, Home, Geräte und Login. Die Seite home.index haben wir eben in Designtool gezeigt. Die beiden anderen Seiten sind devices.html und login.html (siehe Bild). Diese Web-Applikation soll nun in nativ ausführbare Anwendungen für die gewünschten Zielsysteme und speziell für den Raspberry Pi überführt werden.

Der Dateiordner für die Web-Applikation besitzt eine Struktur gemäß der vorangestellten Abbildung. Neben den HTML-Dateien (index.html, devices.html, login.html) haben wir im Unterordner /assets weitere Dateien. Das sind CSS-Dateien, Bilddateien und Dateien für Formatierungen für Schriftarten.

Um die Anzahl der einzubindenden Dateien zu minimieren, wurde die Bibliothek Bootstrap direkt in HTML über CDN (Content Delivery Network) referenziert. Gleiches gilt für einen Verweis auf die genutzten Google-Fonts. Statt Referenzen auf diese Bibliotheken kann man diese auch lokal einbinden. Um aus der Web-Applikation native Anwendungen zu erstellen, wird wie folgt vorgegangen:

• 1. Man erstellt einen neuen Projektordner. Im Beispiel hat dieser die Bezeichnung: MySweetHomeApp

• 2. Kopieren aller Dateien aus dem Web-Projekt in diesen Ordner.

• 3. Hinzufügen der Datei miletus.js aus der Miletus-Installation, zum Beispiel in einem Ordner js für einen Zugriff auf die API. Die Datei entnehmen Sie der Installation nach dem Download von der Miletus-Webseite.

• 4. Öffnen Sie den Projektordner in Visual Studio Code.

• 5. Erstellen Sie die Konfigurationsdatei in dem Sie über die Tastenkombination [STRG + SHIFT + P] den o.g. Befehl Miletus: Initialize config ausführen. Durchlaufen Sie dann die Abfragen des Tools, d.h. vergeben Sie einen Namen für die Applikation; ordnen Sie die Startdatei zu, zum Beispiel index.html und wählen Sie die gewünschten Zielsysteme aus.

Aus den Angaben wird die Konfigurationsdatei erstellt. Diese sieht dann beispielsweise wie folgt aus:

Die Verweise auf die Dateien im Abschnitt „include“ sind manuell zu ergänzen. Es sind die genannten CSS- und JavaScript-Dateien zum Projekt. In größeren Projekten ggf. weit mehr Dateien. Nach diesem Vorgehen können wir die Anwendungspakete für die Zielsysteme erstellen lassen. Nutzen Sie dazu in Visual Studio Code den Befehl Miletus: Package application. Diesen erreichen Sie auch über die Tastenkombination [STRG + SHIFT + P]. Nach kurzer Zeit erhalten Sie einen Ordner output im Projektverzeichnis mit den ausführbaren Dateien für die Zielsysteme (siehe Bildausschnitt).

Die generierten Applikationen können wir auf den Zielsystemen testen. Beispielsweise unter:

Windows: Es muss der Edge-Browser installiert werden. In Windows 11 und aktuellen Versionen von Windows 10 ist dieser bereits vorhanden. Zusätzlich ist es notwendig, dass die Dateien WebView2Loader_x86.dll (32-Bit) und WebView2Loader_x64.dll (64-Bit) in den Anwendungsordner kopiert werden, wenn diese noch nicht auf dem Zielsystem vorhanden sind. Fehlen diese Dateien, kommt es zu einer Fehlermeldung. Die Dateien finden Sie im Unterordner „Edge Support“ der Miletus-Installation. Danach kann die exe-Datei unserer Applikation ausgeführt werden.

Linux: Hier ist es notwendig, dass auf dem System GTK3 installiert ist. Dazu muss WebKitGTK eingerichtet werden. Das geht über die jeweiligen Installationsbefehle, hier am Beispiel eines Debian-basierten Systems (im Bild das Ubuntu-Derivat Linux Mint):

Zunächst aktualisieren wir die Anwendungsquellen auf dem Linux-System, dann wird die Browser-Engine installiert. Nach dem Kopieren des Anwendungspaketes müssen ggf. noch die Dateirechte neu gesetzt werden. Das erreichen Sie über:

Spätestens dann, kann die Anwendung gestartet werden.

Hinweis: Die Anwendungspakete für Linux sind für einen x64-Prozessor und können daher nicht auf einen Raspberry Pi (ARM-Prozessor) ausgeführt werden. Hier müssen eigene Pakete erstellt werden.

Raspberry Pi OS: Da es sich auch um ein Linux-System handelt, ist ebenfalls GTK notwendig. Installieren Sie dieses wie im Abschnitt unter Linux angegeben. Verwenden Sie die Anwendungspakete für den Raspberry Pi für den ARM-Prozessor. Die Vergabe der Rechte für die Anwendungsdatei ist auch hier notwendig.

macOS: Sie müssen die entsprechenden Applikations-Dateien aus dem Ordner output kopieren, die Rechte zuweisen und dann kann die Anwendung gestartet werden. Unter macOS wird zwischen den Architekturen x64 und ARM unterschieden, daher gibt es auch unterschiedliche Anwendungspakete. Auf einem ARM-basierten System ist eine Codesignierung der App notwendig.

Im folgenden Abschnitt wird auf einige ausgewählte Features von Miletus eingegangen und die Funktionsweise demonstriert.

Ein API für System- und Hardwarezugriffe

Miletus vermittelt zwischen der Web-Applikation und den Systemzugriffen. Beispielhaft wird hier das Vorgehen demonstriert. Möchte man auf das Dateisystem zugreifen, so genügen die folgenden JavaScript-Befehle für das Schreiben einer Datei:

Es wird die Bibliothek importiert und mittels der Funktion saveTextFile(…) kann eine Textdatei am gewünschten Zielort geschrieben werden. Entsprechende Befehle für das Lesen (loadTextFile(…)) oder das Überwachen auf Änderungen an einer Datei (watchFile(…)) gibt es ebenso. Ähnlich komfortabel erfolgt der Datenaustausch über die Hardware-Schnittstellen des Raspberry Pi. Signale auf den GPIO-Port kann man lesen oder schreiben mittels …

Ähnlich komfortabel kann man auf die Schnittstellen I2C (Inter-Integrated Circuit), UART (Universal Asynchronous Receiver/ Transmitter) und SPI (Serial Peripheral Interface) zugreifen. Diese Möglichkeit des API erweitert die Verwendung von Web-Applikationen erheblich. Ein direkter Hardwarezugriff ist ansonsten aus einer im Browser laufenden Web-Anwendung nicht möglich. Nunmehr kann man mit JavaScript-Funktionen auf diese Systeme zugreifen, wie es sonst nur mit nativen Apps möglich ist.

Als letztes Beispiel wird demonstriert, wie zwischen den Seiten einer App gewechselt werden kann. In einer Web-Anwendung werden die Seiten über Hyperlinks referenziert, beispielsweise die Seiten index.html, login.html und devices.html unserer Anwendung. In einer nativen App handelt es sich um Fenster. Ein solches Fenster basiert auf einer HTML-Datei. Mittels JavaScript können wir ein Fenster erstellen und aufrufen, beispielsweise:

Wir importieren die Funktion aus der Bibliothek und erzeugen ein neues Fenster. Dessen Basis ist die HTML-Datei login.html (siehe oben) mittels win.show() kann das Fenster angezeigt werden. Das ist beispielsweise nach dem Start der App sinnvoll.

Hinweis: Wenn Sie experimentieren möchten, dann können Sie die Web-Anwendung MySweetHome aus dem GitHub-Repository der Autoren herunterladen. Sie finden dort auch den Designentwurf für das Tool Bootstrap-Studio.

Nutzen und Fazit

In diesem Artikel wurde der Weg von einer Web-Applikation zu einer nativ und offline ausführbaren Anwendung beschrieben. Dabei kommt das Framework Miletus zum Einsatz, welches zwischen der Web-Applikation und der Systemschnittstelle vermittelt. Durch die Nutzung der jeweiligen Browser-Engine des Systems sind die Applikationspakete klein und können auch auf weniger leistungsfähiger Hardware ausgeführt werden.

In Verbindung mit der Möglichkeit, direkt auf die Hardwareschnittstellen zuzugreifen, ist das System gut geeignet, um Steuerapplikationen für Industrie- und Home-Nutzung auf einem Raspberry Pi auszuführen. Die Nutzung von Web-Applikationen beschleunigt dabei den Entwicklungsprozess, da die Tools, Bibliotheken und Vorgehensweisen des Web genutzt werden können. Die verpackte Web-App kann dann wie eine nativ programmierte App offline ausgeführt werden.

(ID:48984823)