본문 바로가기

안녕하세요!

SAP/UI5

[ SAPUI5 ] VSCode에서 SPAUI5 환경 설정 및 실행

참고 출처 :

 

윈도우 SAPUI5 개발 환경 구축을 위한 Tools - Node.js 및 npm, Yeoman 개념 - SAP Space

윈도우 SAPUI5 개발 환경 구축 시 Node.js, CLI, npm, scaffolding 등의 의미, UI5를 윈도우 10, Visual Studio 코드환경에서 개발하기 위해 사전 설치시에 알아두면 좋을 프로그램과, 해당 프로그램이 필요한 주

sap-learn-more.com


 

Git 설치

 

Git

 

git-scm.com


 

Node.js 설치

    - npm 자동으로 설치됨

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org


 

    - 설치 완료 후, 시스템 환경변수 설정 진행

      1) 하단의 '환경 변수' 클릭

 


 

       2) 시스템 변수의 Path 및 편집 클릭

 


 

      3) nodejs 경로 추가


 

ui5 설치

    - cmd 실행

    - npm install -global @ui5/cli 입력

    - 설치 완료 후, ui5 -version 입력 및 확인

 


 

sqlite 설치

    - https://sqlite.org/download.html

 

SQLite Download Page

Templates (1) and (2) are used for source-code products. Template (1) is used for generic source-code products and templates (2) is used for source-code products that are generally only useful on unix-like platforms. Template (3) is used for precompiled bi

sqlite.org


 

    - Windows에서 3번째 다운로드


 

    - 윈도우 전역에서 해당 경로 인식할 수 있도록 사용자 변수 path에 추가


 

CDS development kit 설치

    - SAPUI5 VSCode 개발 시 클라우드 연계

    - 클라우드와 연계해 개발하기 위해서는 CDS cli 설치 필요

      1) Frontend는 SAPUI5 Flori로 개발

      2) Backend는 Node.js, Java로 개발

      3) 비즈니스 데이터는 Hana DB / CDS로 개발

    - cmd에 'npm install -global @sap/cds-dk' 입력 및 설치

    - 'cds --version' 입력 및 설치 여부 확인

 


 

○ VSCode에 SAPUI5 Fiori Tools 익스텐션 설치하기

    - SAP CDS Language Support 설치

 


 

    - SAP Fiori Tools 설치


 

○ Yeoman 설

    - SAPUI5 VSCode개발 위한 스캐폴딩 툴

    - 'npm install -global yo'

 


 

○ VSCode에서 Fiori 실행

    - F1 눌러 Fiori: Open Application Generator 클릭

 


 

    - Application Type에서 'SAPUI5 freestyle' 선택 

 


 

    - SAPUI5 Application 선택 후, Next 클릭 

 


 

    - Test 진행만을 위해 Data source에서 'None' 선택

 


 

    - View 이름 입력

 


 

    - 필수항목 입력 후, Add deployment configuration에서 'No' 선택 및 Finish 클릭 

 


 

    - 프로젝트 모듈 생성

 


 

    - 생성된 프로젝트 우클릭 및 Preview Application 선택 

 


 

    - start 클릭

 


 

    - 실행되는 중

 


 

    - 실행 완료 및 창 자동 실행

 

 

728x90
반응형

'SAP > UI5' 카테고리의 다른 글

[ SAPUI5 ] Hello World!  (0) 2023.02.02
[ SAPUI5 ] BookedFlights  (0) 2023.02.01
[ SAPUI5 ] Hello World  (2) 2023.02.01
[ SAPUI5 ] BAS 생성 및 SpringBoot 연동  (2) 2023.01.31

loading