본문 바로가기

SAP 사용자들의 오픈 커뮤니티

SAP Business Technology Platform(BTP)

SAP UI5 Week 2 - Unit 1. Aggregation Binding을 이용해 외부 서비스 사용하기

페이지 정보

profile_image
작성자 no_profile SAPBTP헬퍼 쪽지보내기 아이디로 검색 전체게시물
댓글 1건 조회 416회 작성일 21-08-16 16:19

본문

Week 2 - Unit 1. Aggregation Binding을 이용해 외부 서비스 사용하기


목차


  1. 백엔드 시스템인 ES5 등록하기


  1. Application에서 외부 서비스 사용하기


1. 백엔드 시스템인 ES5 등록하기


일단, Week 0 - Unit 1에서 셋업했던 백엔드 연결을 활성화시켜줍니다.


https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata


해당 URL에 접속하여 Week 0 - Unit 1에서 만들었던 아이디와 비밀번호로 로그인을 해줍니다. 만일 백엔드 연결이 제대로 활성화되었다면 아래와 같은 XML 문서 화면이 나타납니다.


만일 이 부분이 제대로 되지 않는다면 이후의 실습을 제대로 진행할 수 없기 때문에, Week 0 - Unit 1으로 돌아가 ES5 연결 작업을 다시 수행하십시오.


다음으로는 ES5에 대한 Destination 설정 작업을 수행합니다.


https://account.hanatrial.ondemand.com/cockpit


해당 URL에 접속하여 아래의 사진처럼 "Destination" 탭을 클릭합니다.


해당 탭에서 ES5에 대한 destination이 생성되어 있는지 확인하고, 우측에 있는 체크 아이콘을 클릭하십시오. Destination에 대한 연결이 제대로 되고 있다면 아래와 같은 메시지가 나타납니다.



2. Application에서 외부 서비스 사용하기


이제 Application에 "Data Binding" 탭을 추가하고 ES5 백엔드 서비스로부터 제품 리스트를 불러와 이를 보여줄 것입니다. 해당 작업이 완료되면 아래와 같은 화면이 될 것입니다.


가장 먼저, neo-app.json 파일을 만들어줍니다.

일단 Web IDE 환경의 프로젝트 폴더 "myApp"에 우클릭을 하고, "New > HTML5 Application Descriptor"을 클릭하여줍니다.

해당 메뉴는 프로젝트 폴더가 루트 노드인 "Workspace" 바로 밑에 있을 때만 나타납니다. 만일 해당 메뉴가 보이지 않는다면 해당 부분을 체크해보십시오.


"HTML5 Application Descriptor"를 클릭하면 neo-app.json 파일이 자동으로 생성됩니다. 해당 파일에는 프로젝트에 필요한 리소스에 대한 destination이 저장되어 있습니다.


해당 폴더에 아래의 코드를 추가하십시오. 이는 ES5에 대한 destination 정보를 설정해줍니다. 

{
	welcomeFile: "index.html",
	routes: [
		{
			…
		},
		{
			"path": "/destinations/ES5",
			"target": {
				"type": "destination",
					"name": "ES5"
					},
			"description": "ES5 Demo Service"
		}
	]
}


이후 manifest.json 파일에 ES5에 대한 정보를 설정해줍니다. 아래의 노란색 코드를 추가해주십시오.

{
	"_version": "1.1.0",
	"sap.app": {
		…
		"applicationVersion": {
			"version": "1.0.0"
	 },
		"dataSources": {
			"ES5": {
				"uri": "/destinations/ES5/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0"
				}
			}
		}
	},
	"sap.ui": {
	…
	},
	"sap.ui5": {
	…
	"models": {
		…
		"helloPanel": {
			"type": "sap.ui.model.json.JSONModel",
			"uri": "model/HelloPanel.json"
		},
		"" : {
			"dataSource": "ES5"
		}
	}
}


sap.app 섹션에서 OData 서비스에 대한 데이터 소스 설정을 추가해줍니다. 이를 통하여 ES5의 서비스를 application에서 자동으로 인스턴스화 시킬 수 있습니다.


sap.ui5 아래에 있는 models 섹션에는 application을 시작할 때 ES5를 dataSource로 한다는 의미로 dataSource: ES5라는 코드를 추가해줍니다.


다음으로는 해당 서비스를 담을 view를 추가하겠습니다.

App.view.xml에 노란색으로 표시된 코드를 추가하십시오.

… 
<Page title="OpenSAP – Developing with SAPUI5">
	<IconTabBar
		id="idTopLevelIconTabBar"
		selectedKey="db"
		…>
		<items>
			…
			<IconTabFilter
				text="{i18n>dataBindingFilter}" key="db">
				<content>
					<List
						headerText="{i18n>productListTitle}"
						items="{/ProductSet}">
						<items>
							<ObjectListItem
								title="{Name}"
								number="{Price}"
								intro="{ProductID}" />
						</items>
					</List>
				</content>
			</IconTabFilter>
		</items>
	</IconTabBar>
</Page>
…


IconTabFilter에 새로운 탭을 추가해줍니다. 위의 selectedKey의 경우, application 초기 화면에서 나타나게할 tab을 정해줍니다. 현재 새로운 탭에 대한 key를 db로 하고 selectedKey 값을 db로 두었기 때문에, 새로운 탭이 default로 Application에 등장하게 됩니다.


Tab의 content는 List로 채워줍니다. List control에 대한 설정으로 items에 OData Service의 root path를 넣어줍니다. 그렇게 되면 List는 해당 데이터를 불러오게 되고, 아래의 ObjectListItem에서 ProductSet의 요소들을 접근할 수 있게 됩니다.


마지막으로 i18n.properties 파일에서 해당 부분에 대한 설정 작업을 완료해줍니다.

…
# Tabs
dataBindingFilter = Data Binding
…
# Data Binding Content
productListTitle = Products


*만일 ES5 시스템 데이터가 로드 되지 않는다면, 아래와 같이 Mock Server를 이용할 수도 있습니다.


아래의 코드들을 추가하십시오.

webapp/index.html

…
	<script>
		sap.ui.getCore().attachInit(function () {
			// workaround begin: start a mock server
			jQuery.sap.require("sap.ui.core.util.MockServer");
			var oMockServer = new sap.ui.core.util.MockServer({
				rootUri: "/destinations/ES5/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/"
			});
			oMockServer.simulate("metadata.xml", {
				sMockdataBaseUrl: "mockdata",
				bGenerateMissingMockData: true
			});
			oMockServer.start();
			// workaround end
			
			new sap.ui.core.ComponentContainer({
				name: "sap.ui.demo.wt"
			}).placeAt("content");
		});
	</script>
…


또한 새롭게 webapp 폴더에 metadata.xml 파일을 만들어 해당 코드를 추가하십시오.

<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx Version="1.0"
	xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"
	xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"
	xmlns:sap="http://www.sap.com/Protocols/SAPData">
	<edmx:DataServices m:DataServiceVersion="2.0">
		<Schema 
			xmlns="http://schemas.microsoft.com/ado/2008/09/edm"
			Namespace="/IWBEP/GWSAMPLE_BASIC"
			xml:lang="en"
			sap:schema-version="1">
			<EntityType Name="Product">
				<Key>
					<PropertyRef Name="ProductID"/>
				</Key>
				<Property Name="ProductID" Type="Edm.String" Nullable="false" MaxLength="10"/>
				<Property Name="TypeCode" Type="Edm.String" Nullable="false" MaxLength="2"/>
				<Property Name="Category" Type="Edm.String" Nullable="false" MaxLength="40"/>
				<Property Name="Name" Type="Edm.String" Nullable="false" MaxLength="255"/>
				<Property Name="NameLanguage" Type="Edm.String" MaxLength="2"/>
				<Property Name="Description" Type="Edm.String" MaxLength="255"/>
				<Property Name="DescriptionLanguage" Type="Edm.String" MaxLength="2"/>
				<Property Name="SupplierID" Type="Edm.String" Nullable="false" MaxLength="10"/>
				<Property Name="SupplierName" Type="Edm.String" MaxLength="80"/>
				<Property Name="TaxTarifCode" Type="Edm.Byte" Nullable="false"/>
				<Property Name="MeasureUnit" Type="Edm.String" Nullable="false" MaxLength="3"/>
				<Property Name="WeightMeasure" Type="Edm.Decimal" Precision="13" Scale="3"/>
				<Property Name="WeightUnit" Type="Edm.String" MaxLength="3"/>
				<Property Name="CurrencyCode" Type="Edm.String" Nullable="false" MaxLength="5"/>
				<Property Name="Price" Type="Edm.Decimal" Precision="16" Scale="3"/>
				<Property Name="Width" Type="Edm.Decimal" Precision="13" Scale="3"/>
				<Property Name="Depth" Type="Edm.Decimal" Precision="13" Scale="3"/>
				<Property Name="Height" Type="Edm.Decimal" Precision="13" Scale="3"/>
				<Property Name="DimUnit" Type="Edm.String" MaxLength="3" sap:label="Dimension Unit"/>
				<Property Name="CreatedAt" Type="Edm.DateTime" Precision="7"/>
				<Property Name="ChangedAt" Type="Edm.DateTime" Precision="7" ConcurrencyMode="Fixed"/>
			</EntityType>
			<EntityContainer Name="/IWBEP/GWSAMPLE_BASIC_Entities" m:IsDefaultEntityContainer="true">
				<EntitySet Name="ProductSet" EntityType="/IWBEP/GWSAMPLE_BASIC.Product"/>
			</EntityContainer>
		</Schema>
	</edmx:DataServices>
</edmx:Edmx>


이 작업을 완료하면, ES5에 접근하지 않고 가상의 서버를 통해 서비스를 제공 받게 됩니다.

하지만 여기에는 제대로 된 데이터가 아닌 더미 데이터가 있기 때문에, 되도록이면 ES5를 통해 실습을 진행하기를 추천합니다.


 

댓글목록

profile_image

KSUG님의 댓글

no_profile KSUG 쪽지보내기 아이디로 검색 전체게시물 작성일 0

좋은 정보 감사합니다.

이용약관
개인정보처리방침