SAPUI5 Grundlagen

OData Services nutzen und simulieren

Echte Services einbinden

(C) Brandeis Consulting.

Motivation & Herausforderungen

Bislang waren alles nur lokale Daten, die in der App, z.B. als JSON-Datei gespeichert waren. Jetzt wollen wir echte OData Services nutzen.

CORS Probleme

Zumindest während der Entwicklung haben wir das Problem, dass der Webserver (=unser System) und der OData Endpoint nicht auf dem gleichen Hostname erreichbar sind. Moderne Browser verhindern Aufrufe von anderen Hosts, weil das eine große Sicherheitslücke darstellt. Das führt zu sogenannten CORS( cross-origin resource sharing)-Problemen. Diese lassen sich in der Konsole der Entwicklertools des Browsers (F12) leicht erkennen.

Ein lokaler Proxyserver kann eine Lösung des Problems sein. Der Proxyserver ist damit auf dem gleichen Hostname und er reicht die Anfragen und Antworten zwischen App und OData einfach 1:1 weiter.

Eine andere Option ist ein sogenannter Mock-Server. Dieser simuliert ein echtes Backend System und bietet die Daten genauso als OData Service.

(C) Brandeis Consulting.

Proxy-Server instalieren

In der Konsole:

npm i -D ui5-middleware-simpleproxy

In der Datei ui5.yaml

...
server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    afterMiddleware: compression
    mountPath: /V2
    configuration:
      baseUri: "https://services.odata.org"

In der Datei manifest.json:

{
  ...
  "sap.app": {
    ...,
    "dataSources": {
      "invoiceRemote": {
        "uri": "V2/Northwind/Northwind.svc/",
        "type": "OData",
        "settings": {
          "odataVersion": "2.0"
        }
      }
    }
  },
  ...
  "sap.ui5": {
    ...
    "models": {
      ...
      "invoice": {
        "dataSource": "invoiceRemote"
      }
    }
    ...
(C) Brandeis Consulting.