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