Kontakt & Service
Jetzt Beratung vereinbaren

In wenigen Schritten einen Beratungs­termin mit unseren Experten buchen.

Anwender Helpdesk

Hilfestellung bei Problemen in Ihren SAP-Systemen.

Schulungen

Unser Schulungsangebot. Jetzt informieren!

Webinare

Unser Webinarangebot. Jetzt informieren!

UI5 CLI

News & Wissen Lokale Entwicklung mit den SAPUI5 CLI Tools - das Setup einfach erklärt

Die UI5 CLI (Command Line Interface) ist eine auf node.js basierte Toolbox für die lokale Entwicklung von SAPUI5 oder OpenUI5-Projekten und stellt einen lokalen Testserver zur Verfügung, um Projekte während der Entwicklung zu testen. So können wir hiermit beispielsweise UI5-Projekte lokal ohne Cloud IDE entwickeln, diese mit dem integrierten Testserver auf dem eigenen Rechner testen oder Projekte für weiteres Deployment builden.

Voraussetzungen

Zunächst einmal: Node.js ist eine auf Javascript basierende Laufzeitbibliothek, die das performante, terminalbasierte Ausführen von Javascript Code mittels der Chrome V8 Engine ermöglicht - und eine Vielzahl an nützlichen Paketen (Modulen) für Entwickler aus den unterschiedlichsten Bereichen zur Verfügung stellt.

Um die UI5 CLI zu nutzen, wird node.js in der Version 10 oder höher benötigt. Wir empfehlen die aktuelle stabile Version mit Long Term Support zu verwenden, aktueller Stand bei Verfassung dieses Textes 16.13.0.

Für das Editieren von Projekten wird eine IDE oder ein Texteditor mit Syntaxhighlighting für XML und Javascript empfohlen. Wir raten zu VS Code, da es derzeit die einzige Desktop IDE ist, die offiziell von der SAP mit - zahlreichen nützlichen - Plugins für UI5 unterstützt wird. Die UI5-Unterstützung der SAP für Eclipse wurde eingestellt - es werden nur noch die ABAP Development Tools für Eclipse weiterentwickelt. Es reicht aber auch ein simpler Texteditor wie Notepad++ oder Sublime Text zum Editieren von Projekten aus.

Erste Schritte – Hands-on

Installation node.js

Zunächst installieren wir node.js in der LTS-Version von der offiziellen node.js-Seite.

Nach erfolgreicher Installation prüfen wir über ein geeignetes Terminal, ob die Installation erfolgreich war. Unter Windows können wir beispielsweise das Windows-Terminal oder die PowerShell oder eine Vielzahl der erhältlichen Third Party Terminals verwenden, sollte Ihnen das Standard Windows Terminal zu altmodisch sein. Ich empfehle die offizielle, moderne Neuauflage des Terminals von Microsoft, die ab Windows 10 über den Microsoft Store erhältlich ist: Das neue Terminal von Microsoft basiert auf der PowerShell und bietet neben einer moderneren Oberfläche erweiterte Features wie Syntaxhighlighting und Tabbing.

Nun testen wir mit dem Befehl node-v, ob die Installation von node.js erfolgreich war.

Sollte alles funktioniert haben, wird die installierte Version von node.js zurückgegeben.

Abbildung 1: Installation von node.js prüfen

Installation Template Generator

Nun zeige ich Ihnen, wie Sie Ihr UI5-Projekt mit der UI5 CLI verbinden können.

Zunächst brauchen Sie natürlich ein UI5-Projekt. Sollten Sie kein bestehendes Projekt haben oder ein neues beginnen, empfehle ich Ihnen den Easy UI5 Generator, offizieller UI5-Projekt-Generator der SAP für node.js.

Nun installieren wir das node package Easy UI5 Generator mithilfe des Commands npm install -g yo generator-easy-ui5.

Mit diesem Command installieren wir gleich zwei Packages: den Template Generator yo sowie den darauf basierenden generator-easy-ui5. Der Parameter -g sorgt für eine Installation auf globaler Ebene, so dass wir die Tools global und nicht nur auf Projektebene nutzen können.

Sollte alles funktioniert haben, bekommen Sie im Terminal folgende Meldung(en) zurück:

Abbildung 2: Paketinstallation yo / generator-easy-ui5

Abbildung 3: Erfolgreiche Paketinstallation yo / generator-easy-ui5

Zur Sicherheit prüfen wir noch einmal, ob yo erfolgreich installiert wurde. Dies ist ein bekanntes Template Generator Tool, das auch von der SAP für den generator-easy-ui5 mit eingebunden ist und für die weiteren Schritte funktionieren muss.

Hierzu geben wir lediglich im Terminal den Command yo ein. Nun sollte „Easy Ui5“ als Generator angezeigt werden.

Sollte es bei der Ausführung des yo Commands unter Windows zu Fehlern kommen, liegt dies mit großer Wahrscheinlichkeit an den Windows Policy-Einstellungen.

Um dieses Problem zu beheben, muss die Windows PowerShell als Administrator gestartet werden und folgender Command ausgeführt werden: Set-ExecutionPolicy -ExecutionPolicy Unrestricted

War der yo Command erfolgreich, sollte nun Folgendes zurückgegeben werden:

Abbildung 4: Prüfung Installation Easy UI5

Easy UI5 sollte als Template Generator mit angezeigt werden.

Mit den Optionen Update / Install a generator(s) kann man seine Generatoren updaten oder neue herunterladen.

Neues Projekt aus Template erstellen

Um nun mit dem Generator ein neues Template zu erstellen, führen wir den command yo easy-ui5 project aus und wählen die erste Option Create a new OPENUI5/SAPUI5 project.

Abbildung 5: Projekt aus Template mit easy-ui5

Nun kann man folgende Angaben angeben und mit Enter bestätigen. (Lassen wir ein Feld leer, wird ein Default-Wert verwendet):

  • Projektname | z. B. meineErsteApp
  • Namespace | z. B. com.cpro
  • Zielplattform | Für ein lokales Projekt wählen wir hier Static Webserver.
  • View-Typ - XML, JSON, JS, HTML | Für moderne Applikationen empfehle ich immer XML zu verwenden. XML ist aus meiner Sicht am angenehmsten lesbar und wir sind gezwungen, View und Controller zu trennen, da wir in XML keine Datenlogik auf JavaScript-Ebene implementieren können.
  • Library - Open UI5 oder SAP UI5 | Für kommerzielle Entwicklung nehmen wir SAPUI5, ansonsten Open UI5.
  • Library Servereinstellungen | Hier können wir wählen, ob die OpenUI5 oder SAPUI5 Libraries aus lokaler Quelle oder aus dem CDN der SAP geladen werden sollen.
  • Neuen Unterordner für Projekt erstellen | Wählen wir hier yes aus, wird ein eigener Projektordner basierend auf dem Projektnamen und dem angegebenen Namespace erzeugt, ansonsten wird das Template im aktuellen Stammverzeichnis angelegt.
  • Zusätzliche Libraries hinzufügen | Hier können wir unser Projekt bei Bedarf mit weiteren Javascript Libraries erweitern. Wir benötigen diesen Schritt für das erste Beispiel nicht.

Der Generator legt nach Durchführung der erwähnten Schritte das generierte Template in einem neuen Ordner uimodule an.

Wichtig ist, dass wir nun unseren webapp-Ordner aus diesem Ordner in den gewünschten Stammpfad unseres neuen Projektes verschieben / kopieren.

In meinem Fall kopiere ich den webapp-Ordner in den neu angelegten Ordner meineNeueApp.

Abbildung 6: Projektstruktur

UI5 CLI für Projekt initialisieren

Der Ordner node_modules und weitere Dateien, die im Screenshot zu sehen sind, werden später von der UI5 CLI angelegt, und zwar, indem wir mit dem Command ui5 init die CLI für das Projekt aus dem gewünschten Stammordner heraus initialisieren.

Abbildung 7: UI5 CLI initialisieren

Nun ist die UI5 CLI für unser Projekt initialisiert.

App testen

Um unsere App zu testen, können wir mit dem Befehl ui5 serve nun zum Beispiel den Mockserver der Ui5 CLI starten und unser Projekt mit dem Pfad http://localhost:8080/index.html im Browser testen.

Abbildung 8: UI5 CLI Mockserver starten

Die index.html verweist auf den initialen View unserer UI5 App.

Der Mockserver läuft so lange, bis wir ihn im Terminal mit dem Command STRG + C beenden.

Projekt builden

Möchten wir das Projekt nach Entwicklungen beispielsweise für weiteres Deployment builden, führen wir den Command ui5 build aus.

Abbildung 9: CLI Projekt Build

Es wird automatisch ein neuer Ordner dist im Stammverzeichnis des Projekts angelegt, in dem der generierte Build zu finden ist.

UI5 CLI Versioning

Wenn Sie bei der Arbeit an Ihrem Projekt von SAPUI5 auf OpenUI5 oder umgekehrt wechseln möchten, hilft Ihnen der Command ui5 use openui5 bzw. ui5 use sapui5.

Ähnlich können Sie auch die Version der Libraries ändern, indem Sie explizit die Version mitgeben, zum Beispiel folgendermaßen: ui5 use openui5@1.76

Nun verfügen Sie über die notwendigen Kenntnisse, plattform- und standortunabhängig mit der IDE Ihrer Wahl an Ihren SAPUI5 / OpenUI5-Projekten zu entwickeln.

Weitere Informationen

Weitere Informationen zu den beschriebenen sowie weiteren CLI Commands und deren zugehörigen Parametern finden Sie auf der offiziellen Referenzseite der SAP.

Newsletter Setzen Sie auf fundiertes Wissen aus allen Bereichen unserer Branche. Regelmäßig und stets aktuell.
Beratende Person
Kontakt Haben Sie Fragen oder wünschen weitere Informationen? Unsere Experten beraten Sie gerne.