SAPUI5 Grundlagen

Vorbereitung

(C) Brandeis Consulting.

Entwicklungsumgebung BAS

  • Entspricht 1:1 dem VS-Code, nur fertig Konfiguriert
  • Graphischer Betriebssystemzugriff fehlt, darum machen wir vieles im Terminal/Konsole

Arbeit auf Verzeichnisebene

Im BAS ist immer ein Verzeichnis geöffnet. Das ist die oberste Ebene. Falls man mit Git arbeitet, wird diese Ebene synchronisiert.

==> Vorher sollte man sich eine passende Verzeichnisstruktur anlegen.

Templates

Es gibt viele Templates für UI5/Fiori Anwendungen. Wir fangen später ohne Template an!

(C) Brandeis Consulting.

BAS Konsole

Typische Aktivitäten im Terminal:

  • mkdir- Anlegen von Verzeichnissen, z.B. mkdir projects
  • dir oder ls - Anzeigen des aktuellen Verzeichnis
  • cd - Verzeichnis wechseln, z.B. cd projects
(C) Brandeis Consulting.

Ordnerstruktur mit Projekten

Empfehlung: Legt unter dem Verzeichnis user ein Verzeichnis projects an. Darunter dann für jedes Projekt einen neues Verzeichnis. User erstes Projekt heisst UI5-Walkthrough .

Dieses Verzeichnis nennen wir Wurzelverzeichnis des Projektes oder Root Folder.

Öffne dieses Verzeichnis im BAS.

(C) Brandeis Consulting.

Hallo Welt Anwendung - Dateien anlegen

Die folgenden Schritte sind notwendig, weil wir kein Template nutzen. Im Gegensatz zu älteren Versionen des Walkthrough Tutorials wird jetzt alles vollständig initialisiert.

Datei package.json anlegen

{
  "name": "ui5.walkthrough",
  "version": "1.0.0",
  "description": "The UI5 walkthrough application",
  "scripts": {
      "start": "ui5 serve -o index.html"
  }
}

Ordner webapp anlegen

In diesem Ordner lebt unsere Anwendung!

Datei webapp/index.html anlegen

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5 Walkthrough</title>
</head>
<body>
	<div>Hello World</div>
</body>
</html>

Datei webapp/manifest.json anlegen

{
  "_version": "1.58.0",
  "sap.app": {
    "id": "ui5.walkthrough"
  }
}
(C) Brandeis Consulting.

Hallo Welt Anwendung - Konfiguration

Im Terminal is Wurzelverzeichnis unseres Projekts navigieren.

Installation der UI5 Commandline Tools.

Schadet nix, auch wenn die im BAS vorhanden sein sollten.

npm i -D @ui5/cli

Initialisierung des Projektes

ui5 init

Starten unserer Anwendung

npm start

Jetzt können wir im Browser unser Hallo Welt Beispiel sehen!

(C) Brandeis Consulting.