3월, 2025의 게시물 표시

0. SAP UI5 Walkthrough 시작 - New Project create & Hello World

이미지
SAP UI5 공부를 시작하며  SAP UI5 Site에서 제공하는 Tutorial을 공부하며 이해한 내용을 해석해서 글을 작성했다. 이제부터 시작해보자. ( While studying the tutorial provided by SAP UI5 Site, I interpreted what I understood and wrote. Let's start now.) Hello World 만들기(Create Hello World) 실행 순서( Order of execution) : 새 프로젝트 생성 - 폴더 구조 만들기. ( Create a new project - Create a folder structure) 프로젝트 기본 File 생성 및 Setting 값 작성. ( Create Project Default File and Create Setting Values) index.html 파일 생성 및 Hello World 코딩. ( Create index.html file and code Hello World) UI5 서버 실행. (Run UI5 Server ) 1. 새 프로젝트 생성 - 폴더 구조 만들기.(Create a new project and a foler structure) Project 소스 파일을 관리할 webapp 폴더 생성 한다. (Cerate a webapp folder to manage project source files) 폴더 구조(Folder structure): ../UI5_TUTORIAL/webapp/... VS  Code에서 Open Folder 클릭 -> project 폴더 선택 한다. (Click Open Folder in VS Code -> Click Project Folder(UI5_TUTORIAL) 2. 프로젝트 기본 File 생성 및 Setting 값 코딩.( Create Project Default File and Create Setting Values) 새로운 Terminal Tab...

SAP UI5 개발환경 구성하기(Creating a Development Environment)

이미지
  SAP UI5 개발 환경 설치해보자. 설치 필요 항목( List of required installations ) Node.Js - javascript runtime & npm 사용을 위함 VS Code(Visual Studio Code) Install -  소스 코드 편집기 VS Code Extensions install UI5 CLI(Command Line Interface) - CMD 명령어를 통해서 UI5를 활용 가능 SAP Fiori Tools Extension Pack - 기본 제공되는 Fiori 구성 요소 활용 가능  Node.Js Install Node.Js 사이트에서 설치 파일 다운로드 및 설치 수행하자. ( Download and install the installation file from the Node.Js site.)   Node.Js URL:  https://nodejs.org 다운로드 받은 파일을 실행해서 기본 값 변경 없이 그냥 설치하면 된다. ( You just need to run the downloaded file and install it without changing the default value.)  VS Code(Visual Studio Code) Install Visual Studio Code 사이트에서 설치 파일 다운로드 및 설치 수행하자. ( Download and install the installation file from the VS Code site.)   Visual Studio Code URL:   https://code.visualstudio.com 다운로드 받은 파일을 실행해서 기본 값 변경 없이 그냥 설치하면 된다. ( You just need to run the downloaded file and install it without changing the default value.)    ...

SAP UI5와 SAP Fiori 가 뭘까?

이미지
  SAP UI5와 SAP Fiori 소개 현대의 비즈니스 환경에서 기업은 점점 더 직관적이고 유연한 사용자 경험(UX)을 필요로 합니다. SAP는 이러한 요구를 충족시키기 위해 SAP UI5와 SAP Fiori라는 두 가지 주요 기술 플랫폼을 제공하고 있습니다. 이 두 기술은 혁신적인 UX를 구축하고, 엔터프라이즈 애플리케이션의 사용성을 혁신적으로 개선하는 데 중점을 두고 있습니다. SAP UI5: 웹 애플리케이션 개발을 위한 도구 SAP UI5 사이트 SAP UI5는 SAP의 웹 애플리케이션 개발 도구로, 모바일 및 데스크탑 플랫폼에서 동작하는 반응형 UI를 개발할 수 있습니다. UI5는  HTML5 및 JavaScript 기반 으로 구축되어 있으며, 엔터프라이즈 수준의 애플리케이션을 쉽게 개발할 수 있도록 다양한 UI 컴포넌트와 라이브러리를 제공합니다. SAP UI5는  MVC(Model-View-Controller) 아키텍처를 기반 으로 하여 개발자가 애플리케이션의 데이터 모델, 뷰 디자인, 비즈니스 로직을 분리하여 관리할 수 있도록 합니다. SAP Fiori: 직관적이고 모던한 사용자 경험 SAP Fiori 사이트 SAP Fiori는 SAP UI5 기술을 기반으로 한 사용자 경험  디자인 가이드라인 입니다. Fiori는 사용자가 비즈니스 애플리케이션을 쉽게 이해하고 사용할 수 있도록 최적화된 인터페이스를 제공합니다. 이는 모바일 기기에서도 최적의 경험을 제공하며, 직관적이고 일관된 UX를 제공하는 데 중점을 두고 있습니다. Fiori의 디자인 원칙은 단순성, 일관성, 직관성을 중시하여 사용자가 애플리케이션을 쉽게 사용할 수 있도록 합니다. SAP UI5와 SAP Fiori의 결합 SAP UI5와 SAP Fiori는 종종 함께 언급되지만, 그들은 서로 다른 목적과 역할을 가지고 있습니다. SAP UI5는 주로 개발자가 엔터프라이즈 애플리케이션을 구축하고 사용자 인터페이스를 개발하는 데 중점을 둡니다. 반면, SAP Fi...

그냥 SAP UI5 해보자

요즘 SAP UI5를 열심히 공부하고 있다. 목표는 실무 적용이 가능한 수준의 사이트를 만드는 것이다.  일단 아래 순서로 진행해보려고 한다.  SAP 개발 환경 만들기 SAP UI5에서 제공하는 Walkthrough 따라하기 만들어볼 사이트 디자인 & 설계하기 SAP UI5 각 Component 하나하나 실험해보기 실제 샘플 사이트 만들기 하나하나 진행하면서 글로 남기려고 한다. 성공해보자. I'm studying SAP UI5 hard these days. The goal is to create a site with a level of practical application. First of all, I'm going to proceed in the order below. Create SAP Development Environment Follow the walkthrough provided by SAP UI5 Design and Design a Site to Create SAP UI5 Experiment with each Component Create a physical sample site I'm going to write one by one. Let's make it.