SAP BTP - Fiori App 만들기 & SAP UI5 APP 만들기

16 May 2024

SAP BTP란 무엇인가? SAP BTP는 소프트웨어, 플랫폼, 인프라 서비스로 구성된 오픈형 시스템이다. 이 시스템은 인메모리 기능, 핵심 플랫폼 서비스, 특별한 마이크로 서비스를 제공하는 소프트웨어를 제공하여 모바일과 브라우저에서 훨씬 더 지능적인 응용 프로그램을 구축하고 확장할 수 있게 해준다.

SAP BTP는 ABAP을 포함한 대부분의 언어를 지원하여 개발, 테스트, 프로덕션 시스템을 제공한다. 또한 ON-PREMISE SAP 어플리케이션을 Cloud 중심으로 제공합니다.

SAP BTP는 많은 SAP 소프트웨어 패키지와 서비스를 제공하는데 개발자들이 이러한 기능들을 이용하여 새로운 응용 프로그램 개발하여 맞춤형 응용 프로그램을 만들 수 있다는 장점이 있다.

SAP BTP는 지속적으로 발전 및 업데이트가 되고 있기 때문에, 개발자들은 코드에만 집중할 수 있다.

보통 서버와 관련된 자원을 관리하는 방법은 아래와 같다.

On premise : 로컬 서버에서 소프트웨어 및 하드웨어를 운영하는 방식. 모든 관리는 내부 IT팀이 책임진다.
IaaS(Infrastructure as a Service) : 클라우드 제공 업체가 가상화된 서버를 제공하는 서비스. 인프라에 따라 확장하거나 축소할 수 있고 사용자가 가상서버를 배포하고 운영한다.
PaaS(Platform as a Service) : 어플리케이션 개발 및 배포를 위한 플랫폼을 제공하는 서비스. 개발자가 어플리케이션을 개발하고 테스트하는 데 모든 필요한 도구와 환경을 클라우드에서 제공 받는다.
SaaS(Sofrware as a Service) : 클라우드 기반 소프트웨어 애플리케이션을 제공한다. 브라우저를 통해 접근한다.

SAP BTP는 Paas와 SaaS를 제공한다. 즉 클라우드 서버에서 직접 개발하고 배포하거나 클라우드 서버에 만들어진 소프트웨어 어플리케이션을 사용한다.

우리는 기존에 평가판 계정을 모두 만들고 실습을 했기 때문에 진행하지 않은 튜토리얼들만 진행해보자.

** btp CLI 클라이언트 다운로드 및 설치 ** https://tools.hana.ondemand.com/#cloud-btpcli

설치 이후에 원하는 폴더에 해당 실행파일을 옮겨 놓은 뒤 환경 변수 설정

cmd창을 열어 btp 명령어를 실행

btp

btp 명령어를 알아보자

btp help

브라우저로 btp를 로그인하려면

btp login --sso

커맨드에서 바로 로그인 하려면

btp login

config.json을 이용하여 로그인 하는 방법도 있음.

하위 계정 정보보기

btp --verbose list accounts/subaccount

target 변경하는 방법

btp target

저장해놓은 커맨드를 사용하는 방법(커맨드를 저장해놓은게 없기 때문에 진행하지 않음)

btp enable autocomplete

이후 진행했던 부분들은 제외하고 진행.

SAPUI5 Project를 만들어보자.

Cockpit에서 SAP Business Application Studio를 접속한다.

Create Dev Space를 클릭한다.

SAP Fiori를 선택하고 Create Dev Space 클릭

정상적으로 만들어졌다.

만들어진 fiori dev space를 들어가면 VS코드와 아주 유사하게 구성이 되어있다.

햄버거 버튼을 클릭하여 view -> Command Pallette를 클릭하여 cf:login을 클릭한다. 클릭 후에 EndPoint, UserName, Password를 입력하고 SignIn하게 되면 CF에 로그인이 되고

이후 Fiori Generator를 통해 Fiori Application을 생성해준다.

Basic을 선택하고

OData를 선택해준 뒤 URL(https://services.odata.org/V2/Northwind/Northwind.svc/)을 입력해준다.

View name을 View1으로 적어주고

아래 속성들과 같이 설정해준 뒤 Next를 클릭한다.

예제에서는 Destination이 있는데 실제 진행중에는 Destination이 아무것도 뜨지 않는다.

아래 사진과 같이 생성되었다.

Run Configurations 선택 이후 + 버튼 클릭 후 sapui5 프로젝트 선택

File Name : test/flpSandbox.html 선택 후 저장하면 아래와 같은 화면이 나옴

좌측 패널에서 실행하기 클릭

정상적으로 실행되면 아래와 같은 화면이 나옴 Tutorial 선택

선택하면 빈화면이 나옴

크롬에서 network를 trace해보자. 개발자 도구를 켠 뒤에 리프레쉬하면 네트워크에 여러 목록들이 뜰 것이다. 거기서 filter에 $metadata를 검색해보면 Odata 목록을 확인할 수 있다.

Fiori App을 만들어 보았으니, SAPUI5 App을 Command Line을 통해 만들어보자.

yo easy-ui5 project

com.org.myui5app 폴더에서 package.json파일 확인

pacakge.json 경로에서 npm start

npm start

해당 프로젝트를 build 해보자

npm run build:mta

빌드가 되었으면 배포해보자(이전에 cf login 명령어를 통해 배포할 하위 계정을 선택해주세요)

cf deploy mta_archives/myUI5App_0.0.1.mtar

BuildpackCompileFailed 오류 발생

빌드시 오류가 생겼었는지 확인

approuter의 pacakge.json을 수정

오류가 뜨지 않고 제대로 빌드됨

재배포

cf deploy mta_archives/myUI5App_0.0.1.mtar

정상적으로 실행되는 것을 확인할 수 있음

MainView.view.xml을 아래와 같이 수정

<mvc:View controllerName="com.myorg.myui5app.controller.MainView"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <MessagePage showHeader="false"
        description="More content to come"
        text="Stay tuned!"
        icon="sap-icon://home" />
        <content />
    </Page>
</mvc:View>

MainView.controller.js를 아래와 같이 수정

sap.ui.define([
    "./BaseController"
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller) {
        "use strict";

        return Controller.extend("com.myorg.myui5app.controller.MainView", {
            onBeforeRendering: function() {
              jQuery.sap.log.error("A problem occurred!");
            },
            onAfterRendering: function() {
              debugger
            },
            onInit: function () {

            }
        });
    });

breakpoint가 걸린다.

if(재능이 없으면 시간으로 극복하라){return 성공;}

Profile

Post

Project

SAP BTP - Fiori App 만들기 & SAP UI5 APP 만들기