short presentation title · 2018-01-24 · sap web ide powered by scp sap web ide personal edition...

클라우드 기반 범용 개발 툴

SAP Web IDE for HANA

2017. 8. 9.SAP Korea

Digital Transformation, 강도균

© 2017 SAP SE or an SAP affiliate company. All rights reserved. 2

발표 내용

1 | SAP Web IDE ?

2 | SAP Web IDE 특징

3 | SAP Web IDE 적용 Demo


SAP Web IDE

테스트 빌드 및 배포 어플리케이션 확장개발

End-to-end 애플리케이션 개발을 단순화하는 강력하고 확장 가능한

웹 기반 통합 개발 툴

Digital Transformation을 위한 통합 개발 환경

1 | SAP Web IDE ?


Web IDE Big Picture


Web IDE Delivery Options

SAP Web IDE powered by SCP SAP Web IDE Personal Edition

• 설치 불필요, 낮은 관리 비용

• Anywhere 사용

• 2주 단위 Updates

• 클라우드 및 온 프레미스 데이터서비스

• SAP SCP 및 온 프레미스 ABAP 시스템으로 배포

• SAP SCP 라이선스에 포함

• 단일 사용자 (PC, Mac)

• 분기 단위 출시, 다운노드 & 설치

• 오프라인 개발용

• Web IDE SCP 에디션 기능을 모두지원하지 못함

• 온 프레미스 데이터 서비스 사용

• 로컬 ABAP 시스템에 배포

• SAP SCP 라이선스에 포함

Trial & production Trial & production

• 데이터 베이스 모델링 및 개발, Node.js 및

SAPUI5/SAP Fiori 어플리케이션

• HANA SPS와 함께 출시

• SAP HANA 라이선스에 포함

• SAP HANA Express Edition에서 사용 가능

Trial & production

SAP Web IDE for SAP HANA

Develop SAP HANA based applications

SAP HANA Cloud Platform , SAP Web IDE

Develop SAP Fiori/SAPUI5, hybrid mobile and IoT apps


Key Use Cases

풀 스택 어플리케이션

• 모든 어플리케이션 모듈을 위한 End-to-End 통합 개발

지원

• SAP HANA 데이터 모델 생성

• JAVA 기반 비즈니스 로직 개발

• SAP Fiori UX로 서비스 Consume

빌드 또는 확장 SAP Fiori / SAPUI5 applications

• SAP 베스트 프랙티스를 기반으로 한 코드 템플릿 활용

• 미리 정의된 확장 포인트를 이용하여 SAP Fiori

어플리케이션 확장

• 텍스트 및 그래픽 툴 이용

• 다양한 SAP 플랫폼으로 쉽게 Deploy

IoT 어플리케이션 개발

• RAD 기능 및 IoT 관련 템플릿을 사용하여 IoT

어플리케이션 빌더로 Jumpstart 개발

• IoT를 대상으로 사전 정의 된 SAPUI5 Component 사용

SAPUI5 하이브리드 모바일 어플리케이션 개발

• Apache Cordova 하이브리드 모바일 어플리케이션 생성,

테스트, 빌드 및 배포

• 모바일 서비스 통합


기존 방식 – XS Classic

XS Engine

HANA 관리 및 개발을 위한 HANA Studio

HANA 웹 기반 워크벤치

HANA 관리를 위한 HANA Cockpit

디자인 타임 레포지토리 “repo”

웹 서버 및 XS 엔진 – 웹 컨텐트와 JS 엔진

네이티브 개발: UI + 비즈니스 로직 +

HANA 데이터 모델

DU Deploy

index server

repo

studio

Work

bench

Cock

pit

apps…

modeldev admin

OS

browser

Workbench Cockpit

XSC


신규 방식 – XS Advanced

웹 및 클라우드 중심

확장성, Paas 아키텍처

Cloud Foundry와 같이 어플리케이션 런타임

(Java, Node.JS, …); 독립(분리된) 프로세스

개발 및 관리를 위한 웹 기반 도구 (No Eclipse)

개발: SAP Web IDE + Server-side Development

Infrastructure (DI)

HANA container 격리 및 액티베이션: HDI

MTA 아카이브 배포

Notes: XSA는 HANA SPS11부터 지원

XSA

XSA

browser

index server

OS

UAA etc. R

TT

DI

HDI

Java

apps

Node.js

apps

Web IDE Run-time tools

admin

Git

2 | SAP Web IDE 특징

차세대 플랫폼을 위한 개발 환경 지원


Web IDE 특징

create project

create modules

Git clone

edit

run / debug

build package deploydevcycle

import

Cloud-ready

• 웹 기반; 서버 사이드 워크스페이스 & 프로젝트

다중 모듈 어플리케이션

• HANA 오브젝트 (CDS, 모델링, SQLScript, …)

• Node.js 및 XSJS 모듈

• HTML5, UI5 모듈

• OData 인터페이스

Syntax sensitive editors, code assist, debug

Git 버전 컨트롤 (commit, clone, push, pull, branch, …)

Build 서비스

Debug, run, test (test-driven development)

Package (MTA archive) => deploy productively

+

Web IDE

HANA XS Advanced


Web IDE 주요 기능

project wizardmodule

(DB, JS, UI) wizards

modeler

run configurations

debugger

Text editor

Version control


Web IDE for HANA

템플릿은 HANA 주요 개발 기능을

지원:

Database

Node.js

Java

Web

Fiori

MTA (Multi-Target Application)


Web IDE for HANA

Git / GitHub를 기본 소스 코드

저장소로 사용하도록 설계

Clone repository

Create repository

Load from local file system


Web IDE for HANA

MTA 프로젝트 예

Sub-structures for

• db

• js

• Web

Generates configuration files

• .hdiconfig

• package.json

• mta.yaml


CDS Editor

HANA CDS를 이용하여 View나 Entity(Table) 생성


SAPUI5 WYSIWYG View Editor


Deploy

SAP Web IDE에서 MTA아카이브를 직접 Deploy

Deploy를 위한 타겟은 로컬 XSA 서버나 리모트 SAP

Cloud Platform Cloud Foundry 인스턴스


Feature Activation

주요 도구 세트는 각 서비스로 Feature별로

활성화 또는 비활성화 할 수 있음

SAP API Business Hub, hanacdstools-

client, SAP HANA Database Explorer 등

3 | SAP Web IDE 적용 Demo

Web IDE를 이용한 어플리케이션 데모


Demo 1- OData service를 이용하여 데이터 획득 후 SAPUI5로 Consume

2, 수행 결과Demo 환경

보기

프로젝트

생성

OData 정보

기술

화면 표시

데이터 기술

저장, 수행

1, 데모 수행

절차

참조: https://www.sap.com/developer/tutorials/hcp-template-mobile-web-app.html


Demo 2- Sort 후 화면 출력

2, 수행 결과

오픈 : northwind ->

view -> master.view.xml

1, 데모 수행 절차

수정 : path :'/Products',

sorter : {

path : 'ProductName',

descending : false

저장 및 수행

참조: https://www.sap.com/developer/tutorials/hcp-webide-inserting-query-options.html


Demo 3- Sort Order 변경

2, 수행 결과

오픈 : northwind ->

view -> master.view.xml

1, 데모 수행 절차

수정 : path :'/Products',

sorter : {

path : 'ProductName',

descending : true

저장 및 수행

참조: https://www.sap.com/developer/tutorials/hcp-webide-inserting-query-options.html

질의 응답

https://www.sap.com/developer/topics/sap-webide.htmlhttps://www.sap.com/developer/tutorials/hcp-template-mobile-web-app.htmlhttps://www.sap.com/developer/tutorials/hcp-webide-inserting-query-options.html

Useful links

https://www.sap.com/developer/tutorials/hcp-template-mobile-web-app.html

short presentation title · 2018-01-24 · sap web ide powered by scp sap web ide personal edition...

Documents