SAPUI5 Grundlagen

Werkzeuge und Entwicklungsumgebung

(C) Brandeis Consulting.

Ü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

Wir verwenden in dieser Schulung VS-Code mit dem PlugIn UI5 Tools

(C) Brandeis Consulting.

Installation von VS Code

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

Installer laufen lassen, fertig!

(C) Brandeis Consulting.

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.

(C) Brandeis Consulting.

Node.js installieren

Download von https://nodejs.org/de

Dann die .msi-Datei ausführen.

(C) Brandeis Consulting.

Ausführen einer Anwendung Lokal

> npm start
(C) Brandeis Consulting.

Troubleshooting

Sind alle Dateien gespeichert?

Beliebter Fehler, falls sich nichts ändert.

(C) Brandeis Consulting.

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
(C) Brandeis Consulting.

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
(C) Brandeis Consulting.

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");
(C) Brandeis Consulting.