SAP Web IDE

msg-systems_ag_GBD 1,386 views 35 slides Sep 22, 2015
Slide 1
Slide 1 of 35
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35

About This Presentation

SAP Web IDE, SAP Web IDE Hybrid Application Toolkit


Slide Content

SAP Web IDE IT Conference on SAP Technologies by msg

SAP Web IDE 2 © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg SAP Web IDE - A modern web-based IDE for the future 1 3 Develop and Deploy applications with SAP Web IDE 2 9 SAP Web IDE Hybrid Application Toolkit 3 22 Conclusion & Outlook 4 31

SAP Web IDE 3 © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg SAP Web IDE - A modern web-based IDE for the future 1 3 Develop and Deploy applications with SAP Web IDE 2 9 SAP Web IDE Hybrid Application Toolkit 3 22 Conclusion & Outlook 4 31

SAP Web IDE – A modern web- based IDE for the future What is SAP Web IDE? © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 4 w eb- based toolkit available on SAP HANA Cloud Platform I ntegrated D evelopment E nvironment for HTML5/UI5 and Fiori Apps the extension of supported apps the creation of Hybrid Applications provides standard web development tools like wizards , code / layout editors , mocking tools SAP Web IDE foundation itself is based on Eclipse Orion, a JavaScript Editor written in JavaScript

SAP Web IDE – A modern web- based IDE for the future Why a web- based IDE? © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 5 Several market research companies predict that by 2020 at least 70% of new app development will take place in the cloud . Developer collaboration over cloud-based development infrastructures increases every day . Faster and cheaper deliveries . Developer is not bound to a specific device . Develop everywhere and everytime .

© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 6 SAP Web IDE – A modern web- based IDE for the future Tool evolution and consolidation SAP UI Development Toolkit f or HTML5 Fiori Toolkit AppBuilder AppDesigner SAP Web IDE

© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 7 SAP Web IDE – A modern web- based IDE for the future End- to -end lifecycle support for applications

SAP Web IDE – A modern web- based IDE for the future SAP Web IDE key features © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 8 Development environment Source Code editor with SAPUI5 specific code completion Layout Editor Instant application test Mock data support OData „ Modeller “ IDE extensions via plugins Templates for creating and extending projects SAPUI5 A pplication templates SAP Fiori Application templates SAP Web IDE Plugin Development templates Sample Applications Own Templates Application extension support (via code and graphical tools ) Deployment t o SAP HANA Cloud Platform t o ABAP UI5 R epository

SAP Web IDE 9 © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg SAP Web IDE - A modern web-based IDE for the future 1 3 Develop and Deploy applications with SAP Web IDE 2 9 SAP Web IDE Hybrid Application Toolkit 3 22 Conclusion & Outlook 4 31

Develop and Deploy applications with SAP Web IDE Development and deployment process overview © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 10 New Project/ Extension Project Coding WYSIWYG Layout Editor t o SAP HANA Cloud Platform t o ABAP UI5 R epository Templates Graphical Extensibility

Develop and Deploy applications with SAP Web IDE Development environment overview © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 11 Menubar Toolbar Welcome View Development View Editor Preferences Repository Search Outline Pane Git Pane Git History API Reference

Develop and Deploy applications with SAP Web IDE Create or Import an application © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 12

Develop and Deploy applications with SAP Web IDE Templates © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 13 In case an application is created using a template , a wizard guides the developer through the creation process and generates the code . Several standard templates are available , for instance SAPUI5 Application Project SAP Fiori Master Detail Application SAP Fiori Master Master Detail Application Empty Plugin Project Own templates of any kind can be defined by the developer itself .

Develop and Deploy applications with SAP Web IDE Code Editor © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 14 Code Completion for words , code fragments or entire SAPUI5 objects JavaScript JavaScript snippets XML XML snippets ( for XML views ) API Reference Pane i ntegrated API Reference c ontext sensitive Auto-Save

Develop and Deploy applications with SAP Web IDE Layout Editor © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 15 g raphical XML View Properties a nd Data Control Palette XML View Outline

Develop and Deploy applications with SAP Web IDE Run/Preview the application © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 16

Develop and Deploy applications with SAP Web IDE Preview mode options © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 17 s creen size simulation QR Code generation Language Orientation Refresh

Develop and Deploy applications with SAP Web IDE Mock Data Editor © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 18 The Mock Data Editor allows to enter or generate mock data for an OData Service definition .

Develop and Deploy applications with SAP Web IDE Deploy to SAP HANA Cloud Platform © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 19

Develop and Deploy applications with SAP Web IDE Deploy to ABAP UI5 Repository © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 20

© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 21 Demo

SAP Web IDE 22 © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg SAP Web IDE - A modern web-based IDE for the future 1 3 Develop and Deploy applications with SAP Web IDE 2 9 SAP Web IDE Hybrid Application Toolkit 3 22 Conclusion & Outlook 4 31

What is the Hybrid Application Toolkit (HAT)? HAT enables a developer to develop and deploy Apache Cordova hybrid applications within SAP Web IDE It has three components SAP Web IDE Plugin Connector to the local Cordova build environment Companion app for application preview on emulator and device SAP Web IDE - Hybrid Application Toolkit © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 23 © SAP SE

SAP Web IDE Hybrid Application Toolkit Simple Development and Deployment © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 24 New Project Coding WYSIWYG Layout Editor t o iOS and Android devices t o SMP/ HCPms

SAP Web IDE Hybrid Application Toolkit Device and Plugin Configuration © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 25

SAP Web IDE Hybrid Application Toolkit Coding © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 26 Code Completion for Cordova /Kapsel plugins API Reference for Cordova /Kapsel plugins

SAP Web IDE Hybrid Application Toolkit Preview with Companion App on Emulator or Device © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 27 Preview on Emulator or Device without the need of a build Test of ( supported ) native device APIs Refresh option in Companion App Preview is also possible ( restricted ) in browser using Cordova Facade Preview

SAP Web IDE Hybrid Application Toolkit Deployment to local Hybrid App Toolkit © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 28 Deployment to local HAT d ownloads the sources to the local machine f etches Cordova /Kapsel plugins

SAP Web IDE Hybrid Application Toolkit Run App on Emulator or Device © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 29

© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 30 Demo

SAP Web IDE 31 © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg SAP Web IDE - A modern web-based IDE for the future 1 3 Develop and Deploy applications with SAP Web IDE 2 9 SAP Web IDE Hybrid Application Toolkit 3 22 Conclusion & Outlook 4 31

Conclusion & Outlook © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 32 SAP Web IDE is a powerful tool for developing UI5/Fiori and hybrid applications . Support of End- to -End lifecycle for applications . At the moment monthly shipment of new SAP Web IDE version on cloud environment . Further improvements and new functionality regarding developer features (e.g. Developer Infrastructure, OnPremise Git , improved documentation ). Fusion of SAP Web IDE and HANA Web- Based Development Workbench . Cloud based build and test service for hybrid applications . Windows 10 (Mobile) Support for HAT.

Additional Information © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 33 SAP Web IDE https:// help.hana.ondemand.com/SAP_RDE/frameset.htm http://scn.sap.com/docs/DOC-55465 SAP Web IDE - Hybrid Application Toolkit https://help.hana.ondemand.com/webide_hat/frameset.htm

© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 34 Q&A

Florian Pfeffer Lead IT Consultant +49 (0) 851 / 56069 - 4278 f [email protected] msg systems ag Dr.-Hans- Kapfinger -Str. 30, 94032 Passau Germany www.msg-systems.com