[SAP SCP 개발] SCP 에서 Fiori App 쉽게 개발하기 - OData 가져다 쓰기까지

안녕하세요. SAP 운영자 ST03 입니다.

오늘은 SCP 에서 간단하게 App 을 하나 만들어 보겠습니다.

기본적으로 제공되는 Template 을 이용해서 간단하게 만들어 볼 것이고 필요한 데이터는 이미 준비되어 있는 것으로 사용 하고자 합니다.

나중에는 ABAP 이나 HANA 에 있는 Data 를 그대로 사용 하는 것 까지 해 보려고 하지만 일단 시작 단계 이니까요:)

이번 예제는 SAP Developer 페이지에 있는 SCP WebIDE 에서 템플릿으로 앱 만들기 편 입니다.

#1 OData 확인

일단 이미 있는 OData 를 가지고 SCP 에서 Fiori App 을 만들어 볼 것 입니다.

OData 는 Open Data Protocol 의 줄임말로 쉽게 생각하면 웹에서 어떤 테이블의 데이터를 볼 수 있도록 하는 서비스라고 생각하면 되겠습니다. 자세한 것은 OData.org 에서 확인 하시면 좋을 것 같습니다.

이미 있는 OData 서비스로 service.odata.org 에 이미 있는 것을 사용 하도록 하겠습니다.

확인 하는 방법은 해당 사이트에 들어가서 각 서비스들을 확인 해 보시면 되겠습니다.

한 가지 주의 할 점은 아직 SCP Neo 에서는 OData V3 가 지원되지 않습니다. (제가 알기로는 SCP 전체에서 V3 가 아직 지원되지 않는 것으로 알고 있는데 이번 테스트에서는 Neo 에서만 하다보니 확실하지는 않습니다)

때문에 V2 버전으로 확인을 해 보겠습니다.

#2 SCP 와 OData 연결하기

SCP 로 들어가서 필요한 데이터로의 연결 설정을 진행 합니다.

좌측 연결 > 대상 선택 후 신규 대상을 눌러 줍니다.

아래와 같이 입력 해 줍니다.

참고로 이름과 내역은 마음대로 하셔도 되지만 그 외는 동일하게 작성 해 주셔야 합니다.

	가능 값	설명	권장값
이름	영문 및 일부 특수문자 (한글 불가)	관리를 위한 이름	마음대로
유형	HTTP / LDAP / MAIL / RFC	접속 Protocol 설정. OData 는 REST 이므로 HTTP 사용	HTTP
내역	모든 글자 (나중에 한글은 깨짐)	관리를 위한 설명	마음대로
URL	웹사이트 주소	OData 가 있는 사이트 이름. prefix 는 제외하고 넣음.	https://services.odata.org
프록시 유형	Internet / Onpremise	대상 서비스가 내부망 인지 외부망 인지 확인	Internet
인증	SSO 설정 / ID&비밀번호 / 로그온 하지 않음 등의 옵션 제공	대상 서비스에 로그온/인증이 필요 한 경우 여기에서 설정	NoAuthentication

여기에 추가 속성을 부여합니다.

일단 예제를 따라하는 거라 각 속성의 의미는 잘 모르겠네요.

신규 속성을 3번 눌러서 아래와 같이 3개의 추가 속성을 부여 합니다.

이후 하단에 저장을 눌러서 OData 와의 연결 설정을 완료 합니다.

#3 SCP Web IDE 접속

SCP 는 Cloud Platform 이다보니 브라우저 안에서 개발을 진행 할 수 있도록 Web IDE 라는 서비스를 제공 합니다.

좌측 서비스 > 개발자 경험 카테고리에 SAP Web IDE 전체 스택 > 서비스로 이동

#4 확장 기능 활성화

SCP 에 필요한 확장 기능을 활성화 할 수 있습니다. 여기에서는 예제로 Hybrid App Toolkit 을 사용 하려고 해서 해당 기능을 활성화 하도록 하겠습니다.

상단 Tools > Preferences > Extensions > 기능 검색 (hybrid) > OFF 를 눌러서 ON 으로 변경 > 하단 Save

#5 템플릿으로 Fiori App 만들기

일단 SCP 에서 기본 제공하는 템플릿으로 간단하게 만들어 보도록 하겠습니다.

하지만 템플릿 갯수가 많지 않기도 하고 해서 실제 개발 시에는 OpenUI5 API Reference 또는 SAPUI5 API Reference 를 참고하는 경우가 훨씬 많다고 하니 참고 하시기 바랍니다.

기본 화면으로 돌아가서 File > New > Project from Template 을 선택 합니다.

예제와 동일한 템플릿은 없어서 SAP Fiori Mater Detail Application 이 가장 비슷하길래 이 템플릿으로 진행 하도록 하겠습니다.

기본 정보는 크게 중요하지 않습니다. 원하시는 대로 넣어 주시면 됩니다.

나중에 앱간 연결을 하려고 하면 중요하겠지만, 이번에는 하나의 앱만 만들 거니까요.

앞에서 설정 한 외부 OData 를 연결하는 단계 입니다.

Service URL 을 선택하고 #2 에서 연결 한 내역을 넣어 줍니다. 하단에 prefix 에는 /V2/Northwind/Northwind.svc 라고 입력 해 줍니다.

Test 를 눌러 준 후 아래 Service 에 데이터가 나오면 제대로 된 것 입니다.

마지막으로 화면과 데이터를 연결 시켜 주는 단계 입니다.

각 데이터와 화면 간 상관관계는 오른쪽 예시 화면을 눌러 보시면 나오니 참고 하시기 바랍니다.

여기에서는 예제에서 나온 것과 같이 각 데이터를 아래와 같이 세팅 해 주도록 합니다.

필드 명	값
Object Collection	Product
Object Collection ID	ProductID
Object Title	ProductName
Object Numeric Attribute	UnitPrice
Object Unit of Measure	QuantityPerUnit
Line Item Collection	Supplier
Line Item Collection	SupplierID
Line Item Title	CompanyName

입력 후 아래 Finish 를 누르면 Fiori 앱이 만들어집니다.

#6 만든 Fiori 앱 실행 해 보기

여기까지 하고 나면 전체적으로 파일들이 만들어 집니다. (참 쉽죠~)

index.html 파일을 찾아 선택 후 상단에 수행을 누릅니다.

그러면 새로운 창으로 아래와 같이 만든 앱이 수행이 됩니다.

예제에서 나온 앱과 다른 형태라 제대로 나오지 않는 값들이 있는데 이는 다음에 고쳐 보도록 하겠습니다.

제가 어렸을 때에 홈페이지 만든다고 했던 기억이 있는데 요즘에는 정말 간단하게 만들 수 있게 된 것 같습니다. 물론 업무용 화면이니 만큼 이렇게 기본 기능으로 만드는 것이 전부는 아니겠지만 정말 신기할 따름 입니다.

## SAP Cloud Platform 도전기

01. SCP 계정 생성

02. SCP 에서 템플릿으로 앱 만들어 보기 - SCP 에서 OData 호출하기