개인적인 학습목적으로 작성한 포스트 입니다.
SAP FIORI
SAP의 Front-end 프레임웍 입니다.
사용자경험 기반의 UI로 새롭게 단장하고 폰, 테블릿, PC에서도 같이 보여집니다.
SAP UI5 에 기반한 기반한 UX 입니다.
[SAP 기존 UI vs Fiori UI 비교 동영상]
https://www.youtube.com/watch?v=_morrLqAZTQ
참고 : Fiori 소개
https://blogs.sap.com/2016/09/17/understanding-sap-fiori/
[정리할 개념 및 용어]
1. SAPUI5
- SAP가 구축한 HTML5 툴킷의 이름입니다.
(즉, 웹화면 부분을 개발할 수 있는 개발도구 입니다.) - Web 개발이 Server-client 방식으로 개발되는데, 웹클라이언트 개발의
javascript, CSS, HTML5 를 기반으로 만든 UI 라이브러리입니다. - Javascript Framework 으로 IE, Chrome, Firefox 등 메인 브라우저를 지원합니다.
- 튜토리얼 ( https://sapui5.hana.ondemand.com/ )
2. FIORI
- SAP 에서 SAPUI5로 만든 Front-end Framework 입니다.
(즉, SAPUI5를 이용하여 시스템의 화면부를 구성할 수 있도록 개발환경을 제공합니다.) - 모바일, 테블릿, PC 에서도 동일하게 작동하도록 설계되어있습니다.
3. Odata
- 웹상에서 손쉽게 데이터를 조회하거나 수정할 수 있도록 주고 받는 웹프로토콜(규약) 입니다.
- Fiori 에서 사용되며, Fiori 화면을 SAPUI5 로 만들어낸다고 하면, 그 내부적으로 데이터를
던지고 받는 구조적인 역할을 합니다.
4. Front-end Server
UI add-Ons(Fiori App Repogitory) + SAP NetWeaver Gateway
로 구성됩니다.
- Fiori App Repogitory : Fiori 프로그램의 구성된 공간
- SAP NetWeaver Gateway : ABAP Back-end Server 와 Fiori 간의 Odata 전달
5. SAP UI5 Concept
1) Model-view-Controller(MVC)
- Client 단에도 MVC 구조를 이루고 있음.
- View : 화면 레이아웃 구성
- Model : 데이터를 채워주는 부분. 뷰에 어떤 데이터를 보낼지 담는 그릇 역할
- Controller : View 에 버튼이 눌러졌을 때 Model 에 어떤 데이터를 넣어줄건지, 어떤 행동을 할 것인지를 정의하고 있는 부분.
2) Data Binding
- 서버에서 뿌려지는 것 뿐 아니라 화면에서 사용자가 변경한 부분까지 묶이도록 코딩으로 정의 하는 작업.
[코드 예]
// 샘플로 oData 를 만듬.
var oData = { recipient : { name : "world"} };
//위에서 만든 oData 를 model 로 구성함.
var oModel = new JSONModel(oData);
this.getView().setModel(oModel);
// model 에는 데이터가 실려있고, 이 model 을
// View 쪽에 연결(데이터 바인딩)
// 이렇게 데이터가 바인딩 되면....
// 화면에 데이터를 변경하면 연결된 데이터들도 함께
// 변경된다. 즉, 화면값과 연결된 model 내부의
// 값도 변경된다.
// 예를들어 화면의 world 값을 ABC 로 바꾸면,
// model이라는 그릇내의 world 값이 ABC로 바뀝니다.
// 이것을 다시 ABAP Back-end로 전달하면, 되겠지요.
그럼, Fiori는 뭘로 개발하나? (개발도구)
1) web IDE
- 웹사이트 들어가서 개발함.
- 하나클라우드에 들어가서 개발함.
2) web ide personal edition
- 로컬에 띄워놓고 개발하는 것임.
3) Eclipse 플러그인
웹화면 개발하는 것과 거의 유사.
SAP 에서는 클라우드 플랫폼에서 개발하도록 권하긴 합니다.
가입을 하면 트라이얼 환경에서 개발을 해볼 수 있습니다.
가짜 서버도 띄워보고 할 수 도 있습니다.- 개발도구 링크 : https://tools.hana.ondemand.com/#sapui5