SAP UI5 에 대해서 알아보자

SAP UI5로 서비스를 만드는 과제를 받게 되었다. 

프레임워크가 좀 생소하기 때문에 이 과제를 위해 공부하는 과정을 기록해보려고 한다.

 

글을 작성하는 동안 참고한 자료는 하단 참고자료 섹션을 통해 확인할 수 있다.

SAP UI5란 무엇인가?

HTML, CSS, JS 베이스로 화면(UI)를 구축할 수 있는 일종의 Frame work 이다. 주로 Enterprise 용 서비스를 만들 때 사용되고, 호환성 / 유지보수성 / 국제화 / 견고성 / 보안 / 접근성 / 대용량 데이터 처리 / 효율적인 ui 개발 및 여러 UI 위젯을 포함한다고 한다. 이 프레임워크를 통해 만들어진 서비스를 통틀어서 Fiori 라고 부른다.

(이 글에 따르면 Fiori란 SAP 기반 프로덕트의 디자인 시스템을 의미한다고 함. UI 뿐만아니라 전반적인 UX 까지를 포괄하는 가이드라인이고, SAP 앱에서 일관되고 접근하기 쉬운 UX를 제공하기 위해 존재한다.) 

 

SAP UI5는 반응형을 지원해서 다양한 디바이스에 대응할 수 있고, MVC 패턴이 적용된다고 한다.

이 프레임워크를 바탕으로 데이터를 보여주는 화면을 구현하고, 유저의 입력을 받으면 이를 SAP 서버 (ABAP 등으로 구현된) 에 전송하는 역할을 할 수 있다. 

 

정리하면 SAP 솔루션을 사용해 ERP 시스템을 구축할 때 백엔드 서비스와 통합해서 화면단을 개발할 수 있도록 도와주는 도구라고 할 수 있다. 

 

이 글에서 SAP UI5 가 어떻게 등장하게 되었는지 상세하게 소개한다. 서비스가 고도화되면서 프론트엔드 분야가 분리된 것과 같이 SAP 솔루션에서도 UI5를 통해 이런 시도를 한 것 같다. 

 

왜 SAP UI5를 써야할까?

리액트나 앵귤러, Vue.js 등 다른 프론트엔드 라이브러리도 있는데 왜 UI5를 써야할까?

아마도 SAP 생태계와의 연동성 때문이 아닐까 싶다. 

2016년도 글이긴 하지만, SAPUI5, 앵귤러, 리액트를 비교한 아티클이 있어 참고해보았다.

이를 보면 꼭 SAP UI5를 써야만 구현할 수 있는건 아닌 것 같다. 필요와 서비스의 성격에 따라 다르게 구현할 수 있는 것 같은데 실제 현업에서는 (요즘은) 어떤 기술로 구현하는지 궁금해지는 부분이다. 

 

일단 따라해보자!

SAP 에서는 다양한 레벨의 튜토리얼을 제공하는데, SAPUI5또한 Walkthrough를 제공하고 있다. 어떤 분이 친절하게 유튜브 강의까지 찍어 올리셨으니, 일단 천천히 따라가며 개념을 익혀보겠다. 

 

UI5 프로젝트 초기 셋팅을 위한 내용은 이 글을 참조.

1. ui5 cli

2. bootstraping 개념, 어떻게 적용?

https://sap.github.io/ui5-tooling/v3/pages/GettingStarted/ 하단 가이드를 보니 라이브러리를 설치해서 적용하는건가봄.

3. UI 는 controlls 를 통해 제공, 적용할 수 있다. 

4. xml로 View 표현하는 MVC 구조로 표현된다. 

5. view와 model을 조작하는 controller에는 메소드가 있는 모양인데, 이 중 onInit 이란 메서드에 정의된 내용은 controller 가 실행될 때 함께 실행된다. 생성자 함수의 constructor와 비슷한 개념. 

위와 같이 onInit 에 로컬 oData를 정의하고, JSON 모델로 변경한다. 이를 아래와 같이 View에 바인딩 할 수 있다. 

그러면 이런 인풋창과 내용이 표시되는 텍스트가 렌더링된다. 음.. 뭔가 어렵다.

6. i18n이란 internationalization(국제화) 라는 단어를 축약한 것이다. i부터 n 까지 문자열을 축약해서 18이라고 하는 것 같다. 말 그대로 다양한 지역에 맞춰 적용할 수 있도록 시스템화 하는 것이다. 튜토리얼에 따르면 아래와 같이 파일을 만들어서 값을 저장해두고, 

Controller onInit 시점에 아래와 같이 초기 모델을 만든 뒤에

이런식으로 컨트롤러 메서드에 가져와서 적용할 수 있다. 번들이라는게 아까 만든 i18n모델의 리소스 번들이고, 여기서 값을 가져와 화면에 띄워줄 수 있도록 함. 뭔가 getView에 getModel 에 get으로 시작하는게 많다.

7. component 를 정의해 컨트롤러와 분리시킨다. 아래와 같이 UIComponent 생성자 함수를 불러오고 여기서 metadata 항목을 이용해 view를 바인딩한다. 

기존 index.js 파일에는 아래와 같이 컴포넌트 컨테이너를 적용할 수 있음.

솔직히 아직은 뭐가 뭔지 느낌만 알겠음.. 좀 더 해보자.

8. manifest 를 활용해 메타 데이터 정의 : i18n 이나 컴포넌트 메타 데이터, rootView 같은 내용을 manifest.json 에 정의할 수 있음.

 

9. CSS 적인 부분은 view 에 해당하는 App.view.xml 속성을 변경시키면서 적용 가능.

https://ui5.sap.com/#/topic/777168ffe8324873973151dae2356d1c.html 이 문서에 보면 어떻게 적용시키는지, predefined 클래스명의 종류에 대해서도 나와있다. 

 

10. Fragment란 SAPUI5 에서 UI 블록을 재사용 가능한 코드 단위로 묶어서 관리하는 개념이다. 각각의 Fragment 는 모듈로 작성되어서 분리가 됨. 아래는 Dialog Fragment를 만드는 예시 코드이다.

그리고 그 아래는 패널 Controller 에서 Dialog Fragment 의 open 과 close 를 담당하는 부분.

11. json 데이터 렌더링하기

json 형태의 데이터 경로를 manifest.json > sap.ui5 > models 에 아래와 같이 정의하고, view 에서 접근할 수 있다.

App.view 에서는 아래와 같이 정의한 view를 렌더할 수 있음.

 

12. remote oData service 연결해보기.

API와 비슷한 개념인데 SAP 에서는 oData 라는 것(?)을 이용해 데이터 통신을 한다. 방법은 간단한데, manifest.json에서 dataSource 와 model을 정의하면 된다. 그러면 이제 invoice 를 참조하는 view에서는 이 oData를 참조해서 화면을 그려주는데, 예상 가능하겠지만 CORS 때문에 우회가 필요하다. 공식문서에는 WEB IDE 를 사용하면 된다고 하는데, 나는 로컬 환경이기 때문에.. 일단 다른 api 통신을 할 때 더 자세히 보는 것으로 하고..

 

 

참고자료

https://www.cbs-consulting.com/apac/difference-between-sap-fiori-and-sap-ui5/

Difference between SAP Fiori and SAP UI5 | cbs Corporate Business Solutions

https://community.sap.com/topics/fiori

SAP Fiori | SAP Community

https://blogs.sap.com/2020/11/04/a-brief-history-of-openui5-and-sapui5/

A Brief History of OpenUI5 (and SAPUI5) | SAP Blogs

https://blogs.sap.com/2016/10/12/building-web-applications-sapui5-angularjs-react/

Building Web Applications – SAPUI5, AngularJS, or REACT? | SAP Blogs

** SAPUI5를 처음 접하는 사람들이 보면 좋을 아티클, 튜토리얼을 모아둔 페이지이다. 링크를 타고 들어가서 찾아보기 좋다.

https://blogs.sap.com/2020/12/15/learning-sapui5-for-beginners/

Learning SAPUI5 for Beginners | SAP Blogs

https://boy0.tistory.com/158

[번역] OData 와 SAP 넷위버 게이트웨이. 제 1장. 소개