SAPUI5 Grundlagen

Werkzeuge und Entwicklungsumgebung

Übersicht über die Tools

VS-Code

  • Visual Studio Code (aka. VS Code) - Entwickungsumgebung, vor allen Dingen ein Editor für alle möglichen Dateiformate
  • Fiori Tools - Plugins für VS Code
  • Node.js - Laufzeitumgebung für JavaScript auf Eurem Rechner
  • npm - Ein Paketmanager für Node.js Pakete

Business Application Studio (BAS)

  • Alles ist fertig eingerichtet, aber eigentlich die gleichen Tools wie im VS-Code

Installation von VS Code

Download von https://code.visualstudio.com/

Installer laufen lassen, fertig!

Plugins für VS Code für die UI5 Entwicklung installieren

Empfehlungen aus dem Buch Einstieg in SAPUI5:

  • SAPUI5 Extension (Ilja Postnovs)
  • UI5 Language Assistant (SAP OSS)
  • i18n Ally (Lokalise)
  • XML (Red Hat)
  • ESLint (Microsoft)
  • Live Server (Ritwick Dey)

Der App-Store ist direkt in VS-Code integriert. Es gibt tausende kostenlose Erweiterungen für alle möglichen Zwecke.

Node.js installieren

Download von https://nodejs.org/de

Dann die .msi-Datei ausführen.

Ausführen einer Anwendung Lokal

> npm start

Troubleshooting

Sind alle Dateien gespeichert?

Beliebter Fehler, falls sich nichts ändert.

Console im den Browser Entwicklungstools

Aufruf mit F12 ==> Console

Zeigt Laufzeitfehler im Browser. Ein paar Fehler sind übrigens normal - nicht jeder Fehler ist ein Problem.

Typische Fehlersituationen:

  • Ressourcen können nicht gefunden werden
  • Namen/Verzeichnis falsch gewählt

Debugging in den Browser Entwicklertools

Aufruf mit F12 ==> Source

Breakpoint in der entsprechenden Quelldatei setzen und dann die Aktion ausführen.

Zeigt Fehler im JavaScript Code.

Typische Fehler sind:

  • Die Daten stimmen nicht
  • Navigation funktioniert nicht
  • Aktionen werden nicht wie erwartet ausgeführt

Ausgaben im Code

Um zu prüfen, ob eine Zeile durchlaufen wird oder um kleine Infos aus dem JavaScript Code auszulesen, muss man nicht immer debuggen. Häufig hilft auch eine der beiden Anweisungen:

Ausgabe in der Konsole (F12)

console.log("Meldung");

Ausgabe als Alert

alert("Meldung");

div class="warning"> Wir verwenden in dieser Schulung **VS-Code** mit dem PlugIn **UI5 Tools** </div