SAP Cloud Foundry: Wie erstellt man SAPUI5 Apps mit dem standalone Application Router?

Managed Approuter vs. standalone Approuter

In den meisten Fällen ist der managed Approuter zu empfehlen. Er bietet eine vereinfachte Integration der App in die SAP Business Technology Platform (BTP) und das SAP Fiori Launchpad. SAP empfiehlt die Nutzung eines eigenen Approuters daher nur in speziellen Fällen, etwa wenn die Funktionalität des Approuters angepasst oder erweitert werden soll. Es gibt aber auch einen anderen Grund, den standalone Approuter zu verwenden, nämlich, wenn die für den managed Approuter benötigten Services im Cloud-Account nicht vorhanden sind.

Im SAP Business Application Studio (BAS) lassen sich mit Hilfe der Wizards und Templates Anwendungen komfortabel mit dem managed Approuter erstellen, ohne Hand an die Konfigurationsdateien legen zu müssen. Mit dem standalone Approuter ist dies jedoch nicht ganz so einfach möglich, da hier nicht alle Schritte vollautomatisch ablaufen. Im Gegensatz zum managed Approuter gibt es für den standalone Approuter verhältnismäßig wenig Informationen online. Einige Tutorials sind aufgrund von technischen Änderungen im BAS oder der SAP Cloud Foundry (CF) nicht mehr replizierbar.

Erstellung einer SAPUI5 App mit standalone Approuter

Hier geht es um die Erstellung einer SAPUI5 App mit standalone Approuter.
Wir starten im SAP Business Application Studio. Zunächst legen wir per Template eine neue Multitarget Application (MTA) an. In diese betten wir später den Approuter und anschließend die App ein. Als Projektname wurde „cf_standalone“ gewählt.

Abbildung 1: Neues MTA-Projekt anlegen

Wenn der Rahmen für die MTA erstellt ist, können wir Module hinzufügen, indem wir per Rechtsklick auf die erzeugte mta.yaml im Kontextmenu „Create MTA Module from Template“ wählen. Wir erzeugen so zunächst den Approuter.

Abbildung 2: Neues MTA-Modul erstellen

Bei der Konfiguration muss aus dem oberen Dropdown der „standalone Approuter“ gewählt werden. Wenn „add Authentication“ gewählt wird, werden die entsprechenden Services zur Authentifizierung mit angelegt.  Auf jeden Fall im letzten Dropdown „yes“ wählen.

Abbildung 3: Approuter-Konfiguration

In unserem Projekt befindet sich jetzt der Approuter.

Abbildung 4: Approuter in der Projekthierarchie

Als nächstes fügen wir ein weiteres MTA-Modul für die eigentliche App hinzu. Dazu gehen wir wieder über das Kontextmenü „Create MTA Module from Template“, wählen aber dieses Mal SAP Fiori Application vom Application Type „freestyle“.

Abbildung 5: Zweites MTA-Modul für die SAPUI5 App

Im nächsten Schritt können wir eine Datenquelle aussuchen. In diesem Beispiel wählen wir ein über den Cloud Connector angebundenes On-Premise-Backend.

Abbildung 6: Datenquelle wählen

Danach folgen die Projektattribute. Der Name des Moduls wurde hier mit „cf_standalone_App“ gewählt, der Project-Pfad sollte bereits korrekt vorbelegt sein. Darüber hinaus ist es wichtig, bei dem Radiobutton „Add deployment configuration…“ die Option „yes“ zu wählen.

Abbildung 7: Attribute der SAPUI5 App

In der Deployment Configuration geben wir jetzt nämlich als target die SAP Cloud Foundry an und noch einmal die Destination.

Abbildung 8: Deployment-Konfiguration

Danach sollte die Projektstruktur wie folgt aussehen. Nun haben wir neben dem Ordner mit dem Approuter auch einen Ordner mit der App in unserem Projekt.

Abbildung 9: Projektstruktur nach Anlage des App-Moduls

In der Haupt-View fügen wir nun ein paar Zeilen hinzu. Hier binde ich eine Liste an ein Entity Set des Hauptservices an. So erkennen wir beim Starten der App auch gleich, ob die gewählte Datenquelle richtig funktioniert und wir aus unserer App Zugriff auf die OData Services des On-Premise-Systems haben.

Abbildung 10: Die View der App bekommt ein paar Zeilen

Jetzt fehlt noch ein Schritt, der im Falle des standalone Approuters nicht automatisch ausgeführt wird. Dazu öffnen und editieren wir die mta.yaml. In dieser sind verschiedene Service-Instanzen benannt, die für den Betrieb der App notwendig sind. Die Instanzen bestehen auf Ebene des Spaces. Wenn es in dem Space noch keinen Service mit dem hier vergebenen Namen gibt, wird dieser automatisch angelegt. Es wäre auch möglich, die Services manuell im Cloud Cockpit anzulegen und deren Namen in der mta.yaml einzutragen. So könnten sich Apps zum Beispiel Services teilen.

Der Service, der uns für unsere standalone App noch fehlt, ist der Connectivity Service. Dieser sorgt zusammen mit dem Destination Service dafür, dass wir eine Verbindung zu anderen Internet-Ressourcen oder einem On-Premise-System aufbauen können.

Einmal tragen wir unter dem modules cf-standalone-approuter den Connectivity Service in die requires:

Abbildung 11: mta.yaml-Erweiterung

Dann definieren wir den Service wie folgt unter „resources“:

Abbildung 12: mta.yaml-Erweiterung

Mit der so erweiterten mta.yaml können wir per Kontextmenü „Build MTA Project“ eine MTA-Datei erzeugen.

Abbildung 13: Build des MTA-Projekts aus dem Kontextmenü

Diese befindet sich unter „mta-archives“ (wiederum über Kontext „Deploy MTA Archive“). Es wird ein Space ausgewählt, der natürlich Zugriff auf die gewählte Destination haben muss. Die Services aus der mta.yaml werden beim ersten Deploy automatisch angelegt, sofern sie noch nicht vorhanden sind.

Abbildung 14: Angelegte Services im Space

Anders als bei der Nutzung des managed Approuters ist die deployte App nicht im HTML5 Application Repository zu finden, sondern im Space. Von hier aus kann die Approuter-Instanz geöffnet werden, die unsere App enthält.

Abbildung 15: Approuter Application im Space

Nach dem Öffnen der standalone Approuter-Instanz erscheint unsere App. Wie wir anhand der Einträge in der Liste erkennen können, sind wir an das On-Premise-Backend angebunden. Damit haben wir erfolgreich eine SAPUI5 App auf der Cloud Foundry-Plattform mit dem standalone Approuter deployed.

Abbildung 16: Ansicht unserer Test-Applikation