Solution Overview

Transcription

Solution Overview
SAP Web IDE
Solution Overview
June 2016
SAP Web IDE May 2016 Release (1605)
Provided by SAP Web IDE PM Team
Disclaimer
The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of
SAP. Except for your obligation to protect confidential information, this presentation is not subject to your license agreement or
any other service or subscription agreement with SAP. SAP has no obligation to pursue any course of business outlined in this
presentation or any related document, or to develop or release any functionality mentioned therein.
This presentation, or any related document and SAP's strategy and possible future developments, products and or platforms
directions and functionality are all subject to change and may be changed by SAP at any time for any reason without notice.
The information in this presentation is not a commitment, promise or legal obligation to deliver any material, code or
functionality. This presentation is provided without a warranty of any kind, either express or implied, including but not limited to,
the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. This presentation is for
informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in
this presentation, except if such damages were caused by SAP’s intentional or gross negligence.
All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially
from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only
as of their dates, and they should not be relied upon in making purchasing decisions.
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
2
Agenda
Introduction and overview
Developing applications
Extending SAP Fiori applications
SAP Web IDE releases
System overview
Additional information
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
3
Introduction and overview
SAP Web IDE
Key trends and impacts in business and technology
IDC: “Enterprise Guidance … Leverage
the productivity of cloud IDEs which
have entered mainstream usage.”1
Evans: “Browser-based development is
one of the most important capabilities
of a PaaS.”2
1 Source:
IDC Market Analysis Perspective: Worldwide Application Development Software, 2015 (September 2015) by Al Hilwa
2 Source:
Evans Data Corp Get Ahead in the Cloud, Cloud Development Survey Volume I & II, 2015
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
5
From today to vision
AppBuilder
AppDesigner
Gateway
Productivity
Accelerators
Eclipse
SAP Web IDE
Fiori
toolkit
UI development
toolkit for
HTML5
SAP HANA
Cloud Platform
Fiori
Cloud
Edition
Mobile
Services
Theme
Designer
Development
Infrastructure
HANA Cloud
Integration
API
Management
This is the current state of planning and may be changed by SAP at any time.
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
6
SAP Web IDE
Product description
Powerful, extensible, cloud-based integrated development tool that
simplifies end-to-end application development for
Fiori and SAPUI5 apps
Develop
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Test
Package
and deploy
App extensions
7
Key Use Cases
Build new Fiori and SAPUI5 applications
Extend SAP Fiori applications
• Leverage out of the box code templates based on SAP best
practices
• Extend existing SAP Fiori application with out of the box
extension points
• Easily deploy to relevant SAP platforms
• Extensions can be both via coding and graphical tools
Develop SAPUI5 hybrid mobile applications
Extend the SAP Web IDE with additional
plugins and templates
• Create, test, build and deploy Apache Cordova hybrid
mobile apps
• Enhance SAP Web IDE with new capabilities ranging from
menus, panels to full blown business solutions
• Leverage mobile services integration
• Create new templates including your look and feel
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
8
SAP Web IDE
Code simple
Key Benefits
 Zero installation and upgrade
 Rapid development of Fiori and SAPUI5 apps
 Increases developer productivity
 Improves team productivity
 Develop once, deploy to SAP platforms: HANA Cloud
Platform (HCP), ABAP, SAP Mobile Platform (SMP)
and Portal
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
9
Key features
 Sample applications, templates and wizards for creating
SAP Fiori, SAPUI5 and hybrid-mobile Apps
 Creating and testing applications with specific SAPUI5
versions
 Source code editor with SAPUI5 code completion
 Layout Editor (WYSIWYG)
 User-friendly graphical app extension mechanisms
 Instant application preview in browser
 Mock data support for backend-decoupled development
and testing
 Project persistency through integrated Git source control
 Integrated deployment to SAP platforms (HANA Cloud
Platform, ABAP repository, …)
 Extension possibilities via plugins
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
10
SAP Web IDE Plugins
SAP out-of the-box plugins and templates
Hybrid Application Toolkit
OData Model Editor
SAP Fiori Overview Page
VizPacker
Create and deploy hybrid
mobile Fiori apps based on
Apache Cordova and
Kapsel
Develop your own OData
model and view it
graphically
Enables to create package
& deploy a SAP Fiori
overview page application
create chart extension
packages that can be used
within SAP Lumira and
other products
SAP Hana Cloud Portal
Enterprise Portal
Fact Sheet Editor
SAP Events Management
Set of wizards for creating
site templates, page
templates, pages, and
widgets
Deploy SAP Web-IDE
developed application into
a Portal
Create and edit fact sheets
using drag-and-drop
Create self-defined
transactional SAP Fiori
apps for SAP Event
Management
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
11
Developing applications
Development process overview
Create
Create
Test
Develop
Develop
Test
Deploy
Deploy
New / Import
Quick Start with
Layout Editor
from Archive
Project from
Template
from SAPUI5
ABAP repository
Sample
(Reference)
Application
from HCP
Extension Project
from SAP Fiori
cloud edition
Coding
Code Editor, dynamic API reference,
Layout Editor (WYSIWYG), Version
Control System (Git), etc.
HCP
Templates
Wizards guiding the user through a
step-by-step process, automatically
generating needed files and code
SAPUI5 ABAP
repository
WYSIWYG Design
Design the UI in the Layout Editor
SMP
from Git
Repository
Splash/BUILD*
Visual
Extensibility
While running the SAPUI5/Fiori app
select an element and apply an
extension, modification, replacement
Enterprise Portal
Git integration
* Currently in beta
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
13
Welcome screen
Perspectives:
• Home (Welcome)
• Developer
• Preferences
User Name
Current version
Notification every
time an update is
pushed.
Users can read
about new features
Link to external
resources and
tools
Quick and easy
access to the most
common creation
actions
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
14
Development environment overview
Create
Develop
Test
Deploy
Search
Menu Bar
 Advanced Repository Search
Global Toolbar
 Find in files
(file name or content)
Workspace
Git
 User’s copy of the
projects
 Manage your development
objects in your Git repository
Editor/Layout Editor
Git History
 SAPUI5 code editor
 Tag, Cherry-Pick, Revert
 Code completion
API Reference
 Context sensitive
 Dynamic support
Outline
Bottom Pane
Right Side Pane
 Show/hide various panes,
e.g. Console, Problems View
• Show/hide various panes, e.g.
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Search, Git, API Reference
15
Create
Create
Develop
Test
Deploy
Various options are available for the developer to create a new project:
1
File > New
•
•
2
1
Create a new project
•
from a template
•
from a sample application
•
Quick start with the Layout Editor
2
Create a new extension project, e.g.
for SAPUI5 or SAP Fiori extensibility
File > Import
•
3
Create a project by importing the
application from:
•
the file system (file, ZIP archive, etc.)
•
ABAP repository
•
HCP
•
Splash/BUILD
3
File > Git
•
Create a project from an existing Git
repository (Git clone)
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
16
Quick Start with Layout Editor
Create
Develop
Test
Deploy
Single click starter application creation
 Project “QuickStartApplication” is generated
 Model is created with three simple entity
types
 JSON files with mock data are generated
 View is created
 Layout Editor is launched with view
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
17
Templates
Create
Develop
Test
Deploy
The template wizard guides the user through the definition of an application and then generates the code
Standard templates are provided, e.g.:
 SAP Fiori projects
– SAP Fiori Master-Detail Application
– SAP Fiori CRUD Master-Detail Application
– SAP Fiori smart template
– SAP Fiori Worklist Application
– SAP Factsheet
 SAPUI5 projects
 Empty Plugin Project
Sample applications
 Easily ramp up Fiori development by audited readyto-run end to end samples
Additional templates of any kind can be
created, added and managed
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
You can choose the
SAPUI5 version for
the application
18
SAP Fiori Sample Applications
(Reference Apps)





Create
Develop
Test
Deploy
see SCN: http://scn.sap.com/docs/DOC-59963
SAP Fiori sample apps are complete apps with all coding
They can be used as a reference or to copy&paste coding from
They provide exemplary coding and comprehensive comments , representing best practices for Fiori applications
Mock-server support allows immediate look & try even without a backend system
Three sample applications are available:
Shop
Approve Purchase Orders
Manage Products
browse products and add them to a
shopping basket
review and approve/reject purchase orders
maintain the product master of the
Shop
•
Transactional application
•
Transactional application
•
Transactional application with edit
•
Full screen pattern
•
Master-detail pattern
•
Master-detail pattern
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
19
New extensibility project
Create
Develop
Test
Deploy
When creating a new extension project, you need to identify the parent SAP Fiori/SAPUI5 application
being extended
File > New > Extension Project
Three options. Either:
1. Parent app is from ABAP repository
2. Parent app is from HCP
3. Parent app is from your Workspace
 Option to import the original application
 Option to open the extension project in
the extensibility pane after project
generation
The tool creates the extension project in your
workspace and generates the files such as
 Component.js
 index.html
 Etc.
Find out more in the “Extending SAP Fiori App” section
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
20
Code Editor
Create
Develop
Test
Deploy
Assisted Development
 Code completion
– SAPUI5 code completion for XML, JS – AMD and non-AMD
– Editor completes words, code fragments or entire SAPUI5 objects
– Cross-file code completion
– Snippet-based XML and JS auto-completion
– Easily set a different SAPUI5 version
– Auto-hint – code completion while typing
 Code Editor
– Code Editor for JS, XML, JSON and CSS
– Workspace/project/file search and replace pane
– Integration with static code quality tools (ESLint)
– JSON validator – syntax, neo-app and manifest
– Semantic checks for SAPUI5 XML
– Beautifiers for JS, XML, JSON and CSS
– Problem view
– API reference pane for control documentation
– Outline pane for the JS main entities and the flow of the application
– Cross-file navigation
– Compare editor and manifest (AppDescriptor) editor
– Personalization of code editor theme and font size
 Auto-save
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
21
Layout Editor (WYSIWYG)
Create
Develop
Test
Deploy
Design your view graphically in the
Layout Editor and display the content of
the XML view
Right-click the XML file and open with
Layout Editor
 Design the view in the graphical display (Canvas)
 Drag & drop the SAPUI5 controls from the Palette to the Canvas
 Configure the properties and events of the controls
 Bind the data fields to the OData service entity sets
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
22
Layout Editor (WYSIWYG)
Device Form Factor
Create
Panes Hide/Show
Develop
Test
Deploy
Undo/Redo
 Smartphone/Tablet/Desktop
Canvas
 Content of the XML view
 Graphical display
Properties, Events and
Data Pane
Palette/Outline
 SAPUI5 controls
 drag & drop controls to
the canvas
 Add/Remove controls
from Outline
 Shows properties and data of
selected control
 Entity sets and properties of
OData service
 OData binding
 Focus on control from
Outline
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
23
Testing in SAP Web IDE
Create
Develop
Test
Deploy
Validate your app functionality, appearance, compatibility, performance and translation
Test Authoring
SAP Web IDE provides both wizard based and code based
assistance for developing unit tests and integration tests for
Fiori and SAPUI5 apps
 Create OPA Pages, OPA Journeys, and QUnit Tests in a
project using a wizard
 Use code completion to add snippets for OPA tests in an
OPA journey
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Test Execution / In-Development Testing
SAP Web IDE empowers developers to test and evaluate their
apps functionality and performance during development




Instant app preview, with various presets
Mock business data
Measure Performance
Execute QUnit and OPA tests
24
Run the application
Create
Develop
Test
Deploy
You can run the application to test functionality, design and performance
There are various ways to run your application:
 Run as
– Web Application: Application Preview in browser
– Unit Test: run the application as a unit test
– SAP Fiori Component on Sandbox: run in the SAP Fiori
launchpad environment
 Run Configurations: Define how the application runs,
including the SAPUI5 runtime version
 Run with Mock Data
– Automatically generated data
– Generate and edit persistent mock data: Mock data
provided in JSON files
 Running an application with performance measurements
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
25
Application Preview in browser
Create
Frame
Develop
Test
Deploy
Option to run with Frame in Project Settings
Choice of simulator
Language
 Desktop (large)
 If the application supports
multiple languages (i18n
properties), then the language
text can be changed on the fly
 Mobile devices, e.g. iPad
(medium), iPhone (small),
Android, etc.
 Define a custom size
 The application is responsive
– will adapt its appearance to
the screen size
 Multiple screen sizes are
predefined
QR Code generation
 A QR Code is generated for the
URL by
clicking the
rectangle
Orientation
 The orientation of the screen can
be toggled between landscape
and portrait view
Refresh
 The application can be reloaded
without needing to rerun it from
the development environment
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
26
Run configurations
Create
Develop
Test
Deploy
You can configure how to run the application in
the application’s project settings:
 Application file path to the file that is used to run the
application
 Run the application preview with or without frame
 Open the application with mock data
 Application resource mapping, i.e. where to search for
application resources
 Application URL Parameters: name = value
Application
File Path
Frame
Mock Data
Application
Resource
Mapping
Application
URL
Parameters
Web
application
x
x
x
x
x
Unit Test
x
SAP Fiori
Component
x
x
x
x
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
x
27
Run the application with mock data
Create
Develop
Test
Deploy
You can run the application with mock data, e.g. in case your
backend systems are not ready or not available
The following options are available:
 Let the mock service generate data on-the-fly
 Let the mock service generate data that is stored in the workspace
as JSON files
 Provide data in a JSON file
Edit Mock Data allows to create or edit a mock data JSON file
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Project Settings:
28
Deploy the application
Create
Develop
Test
Deploy
Multiple options are available for the developer to deploy a new
application or update an existing application on the target system:
 Deploy an application to SAP HANA Cloud Platform (HCP)
 Deploy an application to the SAPUI5 ABAP Repository, e.g. SAP Gateway,
SAP Fiori front-end server
 Deploy an application to SAP Enterprise Portal
 Deploy a hybrid mobile application to the HCPms / SMP
Application Status
 Check if your application has been deployed to HCP.or SAPUI5 ABAP
Repository
If not, you may directly deploy from here.
Additional options are available for HCP:
 Check if your application has been registered to
SAP Fiori launchpad
 Register the application to SAP Fiori launchpad
– Once registration is complete, a new tile is created in SAP Fiori launchpad,
assigned to a group (optional), category, and content package
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
29
Deploy to SAPUI5 ABAP repository
Create
Develop
Test
Deploy
2
•
•
Deploy as a new
application
•
Update an existing
application
1
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
If it requires transport, select a
transport request. The request
ID will be automatically
generated.
3
30
Deploy to HANA Cloud Platform
Create
Develop
Test
Deploy
2
1
•
Deploy as a new application or as an
update to an existing app
•
Select account to deploy to
•
Select if to commit&push to HCP Git
•
Define the version number
•
You may define to automatically
active the application on HCP
3
Application Status
•
Once the application is
successfully deployed, you may
•
check the application status:
State, Versions, Active version
•
Register the app to SAP Fiori
launchpad
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
31
Extending SAP Fiori
applications
SAP Fiori extensibility example
SAP Delivered Standard Application
Custom Application (extending standard)
New Field
New Function
Hide Control
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
33
New extensibility project
Create
Develop
Test
Deploy
When creating a new extension project, you need to identify the parent SAP Fiori/SAPUI5 application
being extended
File > New > Extension Project
Three options. Either:
1. Parent app is from ABAP repository
2. Parent app is from HCP
3. Parent app is from your Workspace
 Option to import the original application
 Option to open the extension project in
the extensibility pane after project
generation
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
The tool creates the extension project in your
workspace and generates the files such as
 Component.js
 index.html
 Etc.
34
Visual extensibility
 While running the app, you
can select an element either
in the Outline pane or
directly in the app when in
Extensibility mode
Create
Preview/Extensibility
mode
Develop
Test
Deploy
Language
 If the application
supports multiple
languages (i18n
properties), then the
language text can be
changed on the fly
 Appropriate extension
options can be chosen
 Application can get data
online from backend or use
mock data
 Show all application
elements, or filter by
extensible or extended
elements
Outline pane
 shows the UI elements
available in the
application, as well as
extension points and
UI controller hooks
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
35
Extensibility by means of a template
Create
Develop
Test
Deploy
The template for extending an SAP Fiori resp. SAPUI5 app guides
the user through a step-by-step process
All extension options of the SAP Fiori / SAPUI5 extensibility
concept are provided in the template:
 Create extension project
 Extend controller
 Hide a control
 Extend a view or fragment
 Replace a view
 Replace a service
 Customize text of i18n resources
 Implement a UI controller hook
 Add new views to existing project
To add a new extension, select the extension project and choose
one of the available templates
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
36
SAP Web IDE releases
SAP Web IDE Releases 2014
JUN
AUG
SEP
OCT
NOV
DEC
1.0
1.2
1.3
1.4
1.5
1.6
2014
Initial release to
HCP Trial at
SAPPHIRE
•
Additional external plugins
(VizPacker, HANA Cloud
Portal)
•
Sample applications
Name changed: SAP Web IDE
•
Predefined URL parameters
•
Extend apps on HCP
•
Other enhancements
•
Edit mock data
•
Personalization
Only on Trial:
•
Layout Editor
(experimental)
SAP River RDE
First release to HCP for
productive use
•
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
SAPUI5 ABAP repository
integration
•
Plugin development
•
Other enhancements
•
Fact Sheets
•
Local installation (via SCN)
•
Other enhancements
•
Activate app in HCP
•
HCP auto-subscription of
SAP Web IDE
•
Search/open documents
•
Other enhancements
38
SAP Web IDE Releases 2015
JAN
MAR
APR
MAY
1.10
1.11
JUN
JUL
1.12
1.13
2015
1.7
•
•
Hybrid App Toolkit
App registration to SAP
Fiori launchpad
•
Add custom content at
Finish
•
Generate pseudotranslation
•
1.8
1.9
•
•
SAP Fiori Full Screen
template
UI control hooks
•
Application status page
•
Defining languages
•
Code check levels
•
Defining run configuration
•
XML and CSS beautifier
•
Code snippets in
extension project
fragments
•
•
•
Option to fetch mock data
recourses from other
projects
Extensibility enhancements
and Fragment support
•
Menu link to HCP Cockpit
•
Code editor enhancements
•
Other enhancements
•
Other enhancements
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
•
Layout Editor with
enhancements for
productive use
•
Configurable library
versions
Tab navigation
•
Hiding workspace
Other enhancements
•
Git stash
•
Other enhancements
•
Welcome page
•
Performing actions on multiple items
•
Syntax validation for XML
•
Beautification of JSON
•
•
JavaScript validator
•
•
Code completion for property files
•
Context menu support for code editors
•
Configuring how to run unit tests
•
Other enhancements
•
•
New Deploy menu
Feedback form
•
API Management integration
Access to SAP HANA
Cloud UI Theme
Designer
•
SAP Event Management Plugin
•
Layout Editor canvas view in
different sizes, undo/redo,
additional controls
•
Other enhancements
Other enhancements
39
SAP Web IDE Releases 2015 (continued)
AUG
SEPT
OCT
1.14
1.15
1.16
Nov
Dec
Dec
1.17
1.18
1.19
2015
•
JSDoc comment
generation
•
URL fragment
identifier (hash
fragment) in Run
Configurations
•
•
•
•
•
Application build
(minification, etc.)
Other enhancements
Cross-file navigation
for function definition
and code completion
Embedded type
code completion
German keyboard
shortcuts for toggle
comments actions
•
Layout Editor: quick
start application
•
Run menu options
changed
•
•
Improved UI (facelift)
•
•
•
Application Descriptor Editor
of manifest.json
Smart Template application
template
New templates category:
“Featured Templates”
•
Application status
•
•
Annotation modeler plugin
Deployment to multiple
accounts
•
Extending application with
multiple Component.js
•
URL parameters when
running Extensibility Pane
•
SAP Enterprise Portal (EP)
plugin
•
SAP Fiori overview page
plugin (productive)
•
•
•
Application Destination
Mapping
Overview Page plugin
(experimental)
Run configuration without a
frame by default
•
Git: multiple local branches
•
Application build: creates
resources.json
•
Other enhancements
HAT enhancements
•
Run configuration with a
specific SAPUI5 version
•
Cross-file code completion
•
Other enhancements
•
•
•
Problems view
•
New templates category:
“Favorites Templates”
•
CRUD template
•
Hide/show hidden files
•
Validation of application
Descriptor (manifest.json)
•
Show all extension points in
an application from the
Extensibility Pane
•
Layout Editor toolbar (device
format view, expand/collapse
Layout Editor enhancements: the left/right pane, undo/redo
Add controls from outline,
actions)
cut/copy/paste
• Improved Run Configurations
Other enhancements
UI (facelift)
•
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Other enhancements
40
SAP Web IDE Releases 2016 (continued)
Jan
Feb
Mar
Apr
May
1601
1602
1603
1604
1605
2016
•
New versioning concept
•
•
Tips and Tricks dialog on SAP
Web IDE startup
SAP Fiori validators for XML
and JavaScript
•
•
Code completion and snippets
for OPA and QUnit tests
SAP Translation Hub
Integration (experimental)
•
Workspace toolbar: collapse
all projects, open resource
and more
•
XML semantic validations,
including deprecation
•
Decoupling Git from
Deployment
•
Code checking prior to Push
•
•
Application performance
measurement testing
XML semantic validations
include deprecation warnings
•
Keyboard shortcut
customization
Problem view includes XML
semantic validation issues
•
Outline pane reflects the
function assignment names of
anonymous functions
assigned to variables
•
•
•
Keyboard shortcuts to move
between code editor tabs
Deployment is decoupled
from Git
Create an event function from
the Layout Editor
•
Improved Run Configurations
UI (facelift)
•
Other enhancements
•
•
•
•
Sorting wizard elements, e.g.
templates, according to most
recently used
Code completion suggestions
for SAPUI5 static and
instance methods
Layout Editor supports
SAPUI5 semantic pages and
buttons
•
•
Compare two commits of the
same file
•
Other enhancements
•
Customize additional settings
of the code editor, e.g.
highlighting of all occurrences
of a selected word, new
themes, etc.
•
Other enhancements
Other enhancements
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
•
Notification Alerts
•
Selecting “Run Configuration”
in Global Toolbar
•
Duplicating an existing run
configuration for editing
•
Close all tabs to the right
•
Customizing code editor font
•
Code completion icons
aligned with SAPUI5 Demo
Kit
•
Other enhancements
41
System components
The Big Picture
SAPUI5 apps
SAP Fiori apps
Data Sources
Plugins
Hybrid App Toolkit
External services
SAP Gateway
(OData services)
Templates
OData Model Editor
Plugins
SAP Web IDE
Data Sources
SAP HANA XS
(OData services)
Overview page
REST services
VizPacker
Git
HANA Cloud Platform (HCP)
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
43
System overview for SAP HANA Cloud Platform
SAP HANA Cloud Platform
Cockpit
Developer/
Designer/
Functional
Specialist
SAP Web IDE
Orion
Internet / Cloud
Corporate Network / Intranet
Git
(App Projects)
SAPUI5
Version
Application
User
Permanent File
System
HTTPS
SAP HANA Cloud Connector
Windows OS
Linux OS
Mac OS X
(all 64-bit)
HTTP(S)
SAP Gateway
Trusted RFC

For more details: SAP Web IDE Developer Guide
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Business Suite / ERP
44
Connecting Cloud Applications with On-Premise Systems
Accessing on-premise systems from the cloud can be achieved in two ways:
Usage of SAP HANA Cloud Connector as on-premise agent
HTTPS
On-Premise
SAP
Cloud Firewall Proxy
Application Connector
SSL
Firewall VPN
DMZ
HANA Cloud
Platform
Public
Internet
Reverse proxy approach
On-Premise
HANA Cloud
Platform
SAP
Application
Firewall
Proxy
DMZ
Firewall
Public
Internet
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
+
–
+
–
on-premise systems not reachable from Internet, easy setup and
configuration
additional on-premise component
existing network infrastructure can
be used
configuration of DMZ and firewall
needed, attacks from Internet
possible, not all protocols can be
supported
45
SAP HANA Cloud Connectivity Service
Secure Integration with the SAP Web IDE, Business
Suite, and Other On-Premise Systems
SAP Web IDE
Destinations
Cloud

Establishes secure SSL tunnel between the
SAP HANA Cloud and on-premise systems

Connectivity created by on-premise agent through reverseinvoke process

Supports pre-configured “Destination API” and certificate
inspection to safeguard against forgeries

Complementary to SAP Gateway,
SAP HANA Cloud Integration and 3rd party integration suites
both on-premise and in the cloud
(on-demand)
Internet
Customer
(on-premise)
SAP HANA
Cloud Connector
ERP NW Gateway Others
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
For more information on SAP Cloud Connector please refer to
whitepaper http://scn.sap.com/docs/DOC-60903
46
Running HTML5 Apps on SAP HANA Cloud Platform
SAP HANA Cloud Platform account
SAP Web IDE in
browser
SAP Web IDE
Deploy
HTML5 Apps
Dispatcher
Application
Push / Fetch
Orion
Git
(App Projects)
OData
User Workspace
OData
Internet / Cloud
Corporate Network / Intranet
HTTPS
SAP Gateway
Via Cloud Connector
Trusted RFC
Business Suite / ERP
For more details: SAP Web IDE Developer Guide
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
47
Running HTML5 Apps on SAP Gateway
SAP HANA Cloud Platform
SAP Web IDE
SAP Web IDE
Push / Fetch
Orion
OData
Git
(App Projects)
User Workspace
Deploy
Internet / Cloud
Corporate Network / Intranet
HTTPS
SAP Gateway
Via Cloud Connector
Trusted RFC
Application
Business Suite / ERP

For more details: SAP Web IDE Developer Guide
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
48
Project persistency by using Git
What is Git?
Git is a widely used version control and source code management system
that records snapshots of all your files over time.
 Most popular version control system for software development
– Used by several major open source projects (Eclipse,…)
 Distributed and independent of network, user works offline (contrary to ABAP)
 No exclusive locking but conflict detection & powerful merge algorithms/tools
 Powerful branching options allow to develop several things independently
Version control system
Distributed versioning
Created 2005 for Linux
kernel development
Enables collaborative
workflows
SAP Web IDE has a built-in Git client
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
50
SAP Web IDE and Git Integration
SAP Web IDE includes integration with the Git source control
system, via its built-in Git client
 The SAP Web IDE Git Client can work with HCP Git and with any
public Git server (e.g. GitHub, Bitbucket)
 SAP Web IDE provides a graphical user interface for executing Git
commands and managing your source control and versioning
– Git Pane for common commands
– Git History Pane for additional commands
 Conflict resolution - graphical Git Rebase Interactive using
integrated compare editor
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
51
Git on HANA Cloud Platform used by SAP Web IDE
 Source code is stored in Git repositories
 1 Every developer has a local clone of a central
remote repository
– Clone is only executed initially to create the local Git
repository
– If clone is executed again, then local Git repository
will be overridden
 2 A specific state of the repository is checked out into
the developer’s workspace
 3 Changes are collected in commits (≅ ABAP
transport)
 4 Commits can be pushed to and fetched from the
remote repository
 Git allows to branch or the merge branches at any time
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
SAP HANA Cloud Platform
Remote
Git
Repository
Clone
Fetch
1
Push
4
Checkout
Workspace
2
Files
3
Local Git
Repository
Commit
52
Additional information
Useful links
SAP Web IDE
SAPUI5
 SAP Web IDE at SAP Store:
 SAPUI5 Developer Center- Demo Kit (interactive doc on SAPUI5
/ OpenUI5):
https://www.sapstore.com/solutions/60009/Web-IDE
 SAP HANA Cloud Platform:
http://hcp.sap.com/index.html
 SAP HANA Cloud Platform trial:
https://sapui5.hana.ondemand.com/sdk/
 OpenUI5:
http://sap.github.io/openui5/
https://account.hanatrial.ondemand.com/
 Official documentation:
https://help.hana.ondemand.com/webide/frameset.htm
 under Platform Solutions choose SAP SAP Web IDE
 Documentation within SAP Web IDE:
Go to SAP Web IDE Welcome page
SCN (SAP Community Network)
 SAPUI5 & SAP Web IDE:
http://scn.sap.com/community/developer-center/front-end
 All Things SAP Fiori:
http://scn.sap.com/docs/DOC-41598
 SAP for Mobile:
Additional related information to SAP Web IDE
http://scn.sap.com/community/mobile
 SAP HANA Cloud Platform:
https://help.hana.ondemand.com/
Go to SAP HANA Cloud Platform > Getting Started
 SAP HANA Cloud Connector:
https://help.hana.ondemand.com/help/frameset.htm?e6c7616abb5710148cfcf3e
75d96d596.html
 SAP Gateway:
http://help.sap.com/nwgateway20
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
54
Thank you
Contact information:
Raz Korn
SAP Web IDE Product Manager
[email protected]