[UI5] SAP Fiori Tools BAS에서 UI5 앱 개발 세팅 및 설명

체험판은 Space 두개까지 생성가능합니다.

개발 스페이스는 우리 회사 모든 개발자들이 사용하는 공간이니까 실제로는 신중하게 생성해야합니다.

컴퓨터 껐다 키면 STOP되어있으니까 재시작 눌러야 합니다.

 

Starting-> Running으로 바껴야 사용가능합니다.

 

 

SAP Business Application Studio(BAS) 에서 보게 되는 “New Project From Template” 프로젝트 생성 화면입니다.

 

지금은 어떤 템플릿으로 새 프로젝트를 만들지 고르는 단계입니다.

 

2. 템플릿 목록(카드 형태)

오른쪽에는 다양한 프로젝트 템플릿 카드가 보이네요.
보이는 것만 간단히 설명하면:

• Basic Multitarget Application (MTA)
  여러 기술을 섞어 쓰는 MTA 프로젝트를 생성할 때 사용하는 템플릿이에요.
  UI5 + CAP + 디플로이 모듈 등 복합 구성일 때 선택.
• (Legacy) SAPUI5 Adaptation Project ---- 고객사가 템플릿에 기능 추가하고 싶어할 때 사용
  기존 SAP Fiori Elements 또는 SAPUI5 앱을 변경하지 않고 확장하고 싶을 때 써요.
  예: 기존 표준 Fiori 앱에 필드 하나 추가하고 싶을 때.
• SAP Fiori Generator
  가장 많이 사용하는 템플릿!
  SAPUI5 기반 Fiori Elements 앱 또는 Freestyle UI5 앱을 생성할 때 사용합니다.
  ABAP 개발자가 Fiori 앱 만들 때 가장 자주 클릭하는 메뉴죠.

3. 상단 탭 – Project From Template

지금은 “Get Started” 탭 옆에 Project From Template 탭이 열려 있어,
새 UI5/Fiori 프로젝트 생성 절차를 진행 중이라는 것을 알 수 있어요.

 

1. Basic

 

“빈 화면에서부터 자유롭게 만드는 Freestyle UI5 앱”

 

• 컨트롤 배치부터 라우팅, 모델 연결까지 전부 개발자가 직접 구성
• 자유도 높음 / 개발량 많음

2. Custom Page

 

“기본은 Fiori Elements 구조인데, 중간에 커스텀 화면도 넣고 싶은 경우”

 

• Fiori Elements의 표준 구조 + Custom Page(자유 구성) 혼합
• Flexible Programming Model 기반

3. List Report Page

 

“SAP Fiori Elements의 정석. 자동으로 LRP(Object Page까지) 생성”

 

• SAP에서 권장하는 가장 생산성이 높은 Fiori Elements 앱 타입
• 필터바 + 테이블 + Object Page 자동 생성
• CDS OData 기반일 때 특히 강력
• ABAP RAP와 함께 쓰면 UI가 거의 자동 완성됨

 

🏷️ 1. Module Name

• 실제 프로젝트 폴더 이름이 됩니다.
• 공백 없이 작성해야 하고, 보통 소문자를 사용합니다.

📝 2. Application Title

• 앱의 표시용 이름(사용자에게 보이는 타이틀)
• Launchpad 타일명이나 앱 상단 바 등에 이용될 수 있어요.

🧭 3. Application Namespace

• SAPUI5 앱의 패키지 구조와 같은 역할
• 일반적으로 회사 도메인을 반대로 적는 패턴 사용 (com.company.project)
• UI5의 Controller, View 경로 구조에도 반영됩니다.

💬 4. Description

• 프로젝트 설명. 개발자 문서 용도.

📂 5. Project Folder Path

• 프로젝트가 생성될 위치.
• 여기 밑에 Module Name으로 폴더가 자동 생성됩니다.

🧩 6. Minimum SAPUI5 Version

• 사용할 UI5 SDK의 최소 버전/ 회사 표준 버전에 맞춰 설정

 

생성된 View에서 오른쪽 버튼 누르고 Open with 누르면 아래처럼 뜹니다.

 

 

Layout Editor Active 누르면 화면을 만들 수 있는 창이 뜹니다.

초보자들은 버튼을 끌어다가 만들기도 하지만 보통은 태그를 통해서 버튼 생성합니다.

 

그리고 소스에 가보면 버튼 소스 추가되어 있는 것을 확인가능합니다.

 

 

 

Terminal > New Terminal 눌러서 터미널 실행합니다.

 

npm install 치면 필요한 모듈 설치를 알아서 하고 node_modules 폴더 추가된걸 확인할 수 있음

 

 

 

Webapp>Preview Application 클릭합니다.

 

 

3번째 누르면 생성한 버튼볼 수 있는 웹 페이지 확인가능합니다.

 

 

 

원하는대로 화면이 안나오면 맨 밑에 터미널 종료하고 다시 실행하면 잘 나옵니다.

 

 

 

터미널에서 npm run start-noflp 을 쳐서 실행도 가능합니다.