Step 26: (Optional) Remote OData Service

지금까지는 로컬 JSON 데이터로만 작업했다. 이제 실제 OData 서비스를 액세스해보자

자체적 인 OData 서비스를 구현하는 대신 Northwind OData 서비스를 사용하여 데이터를 받아온다.

note: 이 튜토리얼은 선택 사항이다. 작동시키지 못해도 나머지 단계는 지금까지 사용한 로컬 JSON 데이터로 작동한다.

Preview

Coding

Walkthrough - Step 26.

webapp/package.json

{
  "name": "WalkthroughTutorial",
  "private": true,
  "version": "1.0.0",
  "author": "SAP SE",
  "description": "UI5 Demo App - Walkthrough Tutorial",
  "scripts": {
    "serve": "ui5 serve --open /index.html",
    "proxy": "node proxy.js"
  },
  "devDependencies": {
    "cors-anywhere": "^0.4.1"
  }
}

우리의 환경은 sap webIDE가 아니기 때문에 로컬에서 Northwind Odata를 받아오면 cors오류가 나온다.

따라서 proxy 설정을 위해 package.json파일을 위와 같이 하고

npm install을 통해 노드 모듈을 받은 받는다.

webapp/proxy.js

var cors_proxy = require('cors-anywhere');

// Listen on a specific IP Address
// 0.0.0.0 equals localhost
var host = '0.0.0.0';

// Listen on a specific port, adjust if necessary
var port = 8081;

cors_proxy.createServer({
    originWhitelist: [], // Allow all origins
    requireHeader: ['origin', 'x-requested-with'],
    removeHeaders: ['cookie', 'cookie2']
}).listen(port, host, function() {
    console.log('Running CORS Anywhere on ' + host + ':' + port);
});

proxy 파일을 만들어 위와 같이 설정한 상태에서 npm run proxy를 통해 실행을 시킨다.

webapp/manifest.json

{
  "_version": "1.12.0",
  "sap.app": {
	...
	"ach": "CA-UI5-DOC",
    "dataSources": {
        "invoiceRemote": {
            "uri": "http://localhost:8081/https://services.odata.org/V2/Northwind/Northwind.svc/",
            "type": "OData",
            "settings": {
                "odataVersion": "2.0"
            }
        }
    }
  },
  "sap.ui": {
	...
  },
  "sap.ui5": {
	...
	"models": {
	  "i18n": {
		"type": "sap.ui.model.resource.ResourceModel",
		"settings": {
		  "bundleName": "sap.ui.demo.walkthrough.i18n.i18n"
		}
	  },
    "invoice": {
        "dataSource": "invoiceRemote"
    }
	}
  }
}

sap.app section에 data source 추가한다. invoiceRemote 키를 사용하여 자동 모델 configuration 객체를 지정한다.
OData과 버전 2.0을 지정한다. 공개적으로 사용 가능한 Northwind OData 서비스를 사용하기 위해 URI는 경로를 넣어준다.

note:우리는 HTTPS를 통해 Northwind OData 서비스를 참조하고 있다.
그러나 인증서가 신뢰되지 않을 수 있다. 따라서 http://localhost:8081/https://services.odata.org/V2/Northwind/Northwind.svc/ URL을 호출하고 인증서를 수락한다.

model section에서 invoice 모델의 내용을 invocieRemote로 바꾼다.
해당 키는 component 초기화 중에 model이 자동으로 인스턴스화 될 때 model 이름으로 사용된다.
dataSource(Key)의 invoiceRemote(value)는 위에서 지정한 datasources 섹션에 대한 참조이다.

이제 component는 설정해준 셋팅에 따라 sap.ui.model.odata.v2.ODataModel의 인스턴스를 자동으로 만들고 invoice라는 model로 사용할 수 있다.
component에 default model을 원할 경우 manifest.json의 model의 이름을 empty string으로 변경할 수 있다. 

Related Information

OData Home PageInformation published on non-SAP site

API Reference: sap.ui.model.odata.v2.ODataModel

First-Aid Kit

Request Fails Due to Same-Origin Policy (Cross-Origin Resource Sharing - CORS)