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

로 구성됩니다. 

• 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