SAPUI5 Entwicklungsumgebung einrichten: Schritt-für-Schritt-Anleitung

Die Einrichtung einer effizienten lokalen Entwicklungsumgebung ist entscheidend für jeden Softwareentwickler, und im Bereich der SAPUI5-Entwicklung bildet sie die Grundlage für erfolgreiche Projekte. Als Teil des SAP-Berufsausbildungsprogramms habe ich die Gelegenheit, verschiedene Technologien kennenzulernen und Entwicklungsumgebungen einzurichten. Dabei stelle ich oft fest, dass gerade die anfängliche Konfiguration entscheidend ist, um später schnell und reibungslos arbeiten zu können. Dieses Wissen möchte ich gerne weitergeben, um Ihnen den Einstieg in die SAPUI5-Entwicklung mit Visual Studio Code (VS Code) zu erleichtern.

Der folgende Leitfaden konzentriert sich auf die wesentlichen Schritte zur schnellen Einrichtung Ihrer Entwicklungsumgebung unter Windows, um sofort mit der UI5-Entwicklung beginnen zu können. Wir werden uns mit den notwendigen Programmen, nützlichen Erweiterungen und optionalen Anpassungen befassen, die Ihre Produktivität steigern. Entdecken Sie, wie Sie Ihre Maschiene optimal vorbereiten, um die Herausforderungen und den Spaß der SAPUI5-Entwicklung mit VS Code zu meistern.

I. Grundvoraussetzungen: Node.js, SAPUI5 CLI und Git

Bevor wir uns den Kern der SAPUI5-Entwicklung zuwenden, sind einige grundlegende Werkzeuge unerlässlich. Diese bilden das Fundament, auf dem Ihre Entwicklungsumgebung aufbaut.

1. Node.js – Das Fundament für JavaScript-Laufzeitumgebungen

Für viele Tools, die bei der Entwicklung von UI5-Anwendungen zum Einsatz kommen, ist die Node.js JavaScript-Laufzeitumgebung erforderlich. Sie können Ihre aktuell installierte Node.js-Version überprüfen, indem Sie ein Terminal öffnen und den folgenden Befehl eingeben:

node --version

Sollte keine Version angezeigt werden oder die Version nicht mit der neuesten Long-Term Support (LTS)-Version konsistent sein, können Sie das entsprechende Installationspaket für die neueste LTS-Version (derzeit v16.x.x) unter Download Node.js herunterladen. Die Verwendung einer aktuellen LTS-Version ist wichtig, um potenzielle Kompatibilitätsprobleme mit anderen Werkzeugen zu vermeiden, die möglicherweise spezifische Node.js-Versionen voraussetzen.

2. SAPUI5 CLI – Das Kommandozeilen-Werkzeug für UI5

Für die Entwicklung von UI5-Anwendungen ist das UI5 Tooling unerlässlich, insbesondere die UI5 CLI (Command Line Interface). Sie können diese über den npm Paketmanager mit folgendem Befehl installieren:

npm install --global @ui5/cli

Die erfolgreiche Installation lässt sich durch den Versionsbefehl überprüfen:

ui5 --version

3. Git – Versionskontrolle für Ihre Projekte

Für die Zusammenarbeit, das Klonen von Beispiel-Repositories und ähnliche Szenarien ist die Installation von Git unerlässlich. Git bietet eine leistungsstarke Versionskontrolle, die Sie sowohl über die Kommandozeile als auch direkt in VS Code nutzen können.

git --version

Sollte Git nicht installiert sein, können Sie es von Download Git herunterladen. Die Installation von Git Bash, das Teil der Git for Windows-Installation ist, bietet zudem eine komfortable Shell-Umgebung.

II. Kern der Einrichtung: VS Code, UI5-Erweiterungen und Code-Vervollständigung

Nachdem die grundlegenden Voraussetzungen geschaffen sind, widmen wir uns nun dem Herzstück unserer Entwicklungsumgebung: Visual Studio Code und den dafür verfügbaren Erweiterungen zur Optimierung der SAPUI5-Entwicklung.

1. Visual Studio Code – Der leistungsstarke Code-Editor

Visual Studio Code ist einer der empfohlenen Code-Editoren für die UI5-Entwicklung und bietet eine Fülle von Funktionen wie:

• IntelliSense für intelligente Code-Vervollständigung
• Integriertes Debugging
• Eingebaute Git-Unterstützung
• Erweiterbarkeit und Anpassbarkeit durch Extensions

Die neueste Version für Ihr Betriebssystem können Sie unter Download Visual Studio Code herunterladen.

2. UI5-Erweiterungen für Visual Studio Code

Nach der Installation von VS Code gibt es zahlreiche Erweiterungen, die die UI5-Entwicklung erleichtern. SAP bietet hierfür ein praktisches SAP Fiori tools Extension Pack an. Dieses Bündel enthält die wichtigsten Erweiterungen für die UI5- und SAP Fiori-Entwicklung. Sie können es installieren, indem Sie im Extensions Marketplace (links in der Seitenleiste oder mit Strg+Shift+X) nach “SAP Fiori tools” suchen und “Installieren” auswählen. Möglicherweise müssen Sie VS Code neu starten, damit alle Erweiterungen korrekt geladen werden.

Das SAP Fiori tools Extension Pack bietet eine Reihe von nützlichen Erweiterungen, darunter:

• SAP Fiori tools – Application Modeler: Zur grafischen Modellierung von Fiori-Anwendungen.
• SAP Fiori tools – Guided Development: Bietet schrittweise Anleitungen für gängige Entwicklungsszenarien.
• SAP Fiori tools – Service Modeler: Zur Modellierung von OData-Services.
• SAP Fiori tools – XML Annotation Language Server: Bietet erweiterte Unterstützung für XML-Annotationen.
• Application Wizard (UX for Yeoman generators): Integriert Yeoman-Generatoren direkt in VS Code.
• XML Toolkit (Language support for XML): Verbessert die Bearbeitung von XML-Dateien.

Erweiterungsmarktplatz in VS Code

SAP Fiori tools – Extension Pack

Zusätzlich zu diesem Paket empfehle ich dringend den UI5 Language Assistant. Diese Erweiterung verbessert die Code-Vervollständigung und Formatierung für XML-Dateien (Views, Fragments etc.) erheblich. In Kombination mit dem “XML Annotation Language Server” und dem “XML Toolkit” verfügen Sie damit über ein mächtiges Werkzeug für alle XML-bezogenen Aufgaben in Ihren UI5-Projekten.

3. JavaScript-Code-Assistenz mit TypeScript-Typen und JSDoc

Für die JavaScript-Entwicklung in UI5-Projekten gibt es ebenfalls Möglichkeiten, die Code-Vervollständigung und Fehlererkennung zu verbessern. Eine leistungsstarke Methode ist die Nutzung von TypeScript-Typen in Kombination mit JSDoc-Annotationen, auch wenn Sie kein TypeScript selbst verwenden. Dies erfordert eine Konfiguration innerhalb Ihres spezifischen UI5-Projekts.

Um diese Funktionalität zu implementieren, müssen Sie zunächst die folgenden npm-Pakete als Entwicklungsabhängigkeiten installieren:

npm install --save-dev eslint @sap/eslint-plugin-ui5-jsdocs @sapui5/ts-types

Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei namens tsconfig.json mit folgendem Inhalt, um VS Code die Nutzung der UI5-Typen mitzuteilen:

{
  "compilerOptions": {
    "module": "none",
    "noEmit": true,
    "checkJs": true,
    "allowJs": true,
    "types": [ "@sapui5/ts-types" ]
  }
}

Anschließend muss ESLint über das ui5-jsdocs-Plugin informiert werden. Erstellen Sie dazu eine .eslintrc-Datei im Projektstammverzeichnis mit folgendem Inhalt (oder fügen Sie die Zeilen zu einer bestehenden ESLint-Konfiguration hinzu):

{
  "plugins": [ "@sap/ui5-jsdocs" ],
  "extends": [ "plugin:@sap/ui5-jsdocs/recommended", "eslint:recommended" ]
}

Nach diesen Schritten steht Ihnen die Code-Assistenz für UI5-JavaScript-Dateien zur Verfügung. Beachten Sie, dass diese Konfiguration pro Projekt wiederholt werden muss. VS Code hilft Ihnen dabei, fehlende JSDoc-Annotationen zu ergänzen, was die Produktivität weiter steigert.

III. Optimierungen: UI5 Generator-Optionen und DevTools Browser-Erweiterung

Um den Entwicklungsprozess noch weiter zu beschleunigen und zu vereinfachen, gibt es verschiedene Generator-Werkzeuge und nützliche Browser-Erweiterungen.

1. SAP Fiori Application Generator – Schnelle Projekterstellung

Mit dem im SAP Fiori tools Extension Pack enthaltenen SAP Fiori Application Generator können Sie schnell Vorlagen für SAP Fiori Elements- oder SAPUI5 Freestyle-Anwendungen generieren. Öffnen Sie dazu die Befehlspalette in VS Code (Ansicht -> Befehlspalette... oder Strg+Shift+P) und wählen Sie “Fiori: Open Application Generator”. Der Generator wird automatisch die benötigten @sap/generator-fiori Pakete installieren, falls diese noch nicht vorhanden sind. Anschließend können Sie aus verschiedenen Floorplans wählen und den Anweisungen folgen, um Ihr neues UI5-Projekt zu erstellen.

Anwendungsgenerator aus der Befehlspalette

Template Wizard: Optionen für SAP Fiori Elements und SAPUI5 Freestyle

Dieser Generator bietet auch die Möglichkeit, die notwendige Konfiguration für die JavaScript-Code-Assistenz automatisch in Ihr Projekt einzufügen. Wählen Sie hierfür bei den erweiterten Optionen “Add javascript code assist libraries to your project.” aus.

Template Wizard erweiterte Optionen – JavaScript-Code-Assistenz-Bibliotheken

2. Yeoman Easy-Ui5 Generator – Flexibilität durch Kommandozeile

Ein weiteres sehr nützliches Werkzeug zur Beschleunigung der UI5-Entwicklung ist der Yeoman Easy-Ui5 generator. Dieser Generator wird über die Kommandozeile aufgerufen und bietet eine Vielzahl von Vorlagen und Konfigurationsoptionen. Zuerst muss Yeoman selbst installiert sein. Sie können dies mit folgendem Befehl überprüfen:

yo --version

Falls Yeoman nicht erkannt wird, installieren Sie es mit:

npm install --global yo

Anschließend installieren Sie den eigentlichen easy-ui5-generator:

npm install --global generator-easy-ui5

Sie können die Installation überprüfen, indem Sie yo aufrufen und nach “Easy-Ui5” in der Liste der Generatoren suchen.

Verfügbare Yeoman-Generatoren, einschließlich Easy-Ui5

Der Easy-Ui5 Generator ermöglicht das Erstellen neuer Projekte, das Hinzufügen von Models, Views und vielem mehr. Auch hier können Sie bei der Projekterstellung die Option zur Hinzufügung der JavaScript-Code-Assistenz auswählen, was die manuelle Konfiguration erspart.

Easy-Ui5 Generator-Optionen

UI5 Projektgenerator: Option für JavaScript-Code-Assistenz-Bibliotheken

3. UI5 Inspector – Debugging im Browser

Eine unverzichtbare Erweiterung für die UI5-Entwicklung ist der UI5 Inspector für den Chrome-Browser. Dieses Werkzeug ermöglicht die Inspektion, Analyse und das Debugging von UI5-basierten Anwendungen direkt im Browser. Es fügt einen neuen Tab zu den Chrome DevTools (F12) hinzu, der Ihnen tiefe Einblicke in die Struktur und das Verhalten Ihrer UI5-Anwendungen gibt. Laden Sie die Erweiterung vom Chrome Web Store herunter.

UI5 Inspector in Chrome DevTools

IV. Zusammenfassung und Ausblick

Mit diesen Schritten haben Sie Ihre lokale Entwicklungsumgebung für SAPUI5 mit Visual Studio Code erfolgreich eingerichtet. Nun sind Sie bestens gerüstet, um mit dem Bau Ihrer ersten UI5-Anwendungen zu beginnen. Die Einrichtung einer optimierten Entwicklungsumgebung ist ein fortlaufender Prozess, und es gibt immer weitere Werkzeuge und Techniken, um Ihre Produktivität zu steigern. Wir hoffen, dieser Leitfaden bietet Ihnen eine solide Grundlage. Teilen Sie gerne Ihre eigenen Must-Have-Erweiterungen und Tipps für die lokale UI5-Entwicklung in VS Code!

Die Möglichkeiten, die Ihnen mit dieser Konfiguration offenstehen, sind vielfältig. Von der schnellen Prototypenentwicklung mit den Generatoren bis hin zum tiefgreifenden Debugging mit dem UI5 Inspector – Sie verfügen nun über die Werkzeuge, um effizient und erfolgreich SAPUI5-Anwendungen zu entwickeln.

Die hier vorgestellten Tools und Erweiterungen können Ihnen helfen, powerpoint und word Dokumente besser zu organisieren oder sich auf das Wesentliche zu konzentrieren. Auch die Frage, wie Sie powerpoint auf 16 zu 9 umstellen, kann relevant werden, wenn Sie Präsentationen für Ihre UI5-Projekte erstellen. Die Integration von powerpoint 2021 online oder die Nutzung von powerpoint ai Funktionen können Ihre Arbeit weiter bereichern. Vergessen Sie nicht, dass auch einfache Hilfsmittel wie die Nutzung von internetten powerpoint Ihre Flexibilität erhöhen können.