Growing with SAPUI5: Expanding Mobility

to the Enterprise

Brandon Webb
hyperCision
Produced by Wellesley Information Services, LLC, publisher of SAPinsider. 2016 Wellesley Information Services. All rights reserved.

In This Session

Discover the fundamentals needed to extend SAP logic onto tablets and smartphones

Find out what technologies are necessary to get started and how to build up a
successful team

Understand the advantages of cross-platform development, which allows companies to

avoid double development efforts when pushing to a new platform (iOS, Android,
Windows Phone)

What Well Cover

Examine what makes SAPUI5 and Cordova so cool

Understand the benefits of SAP Web IDE
See how Gateway exposes SAP Data via standardized APIs
Become familiar with the new Hybrid Application Toolkit (HAT)
Explore the new HANA Mobile offerings
Breeze through a few of our favorite mobile development tools
Look at the iOS, Android, and Windows developer portals
Wrap-up

What Is SAPUI5?

Enterprise-ready web toolkit

Translation support
Handicapped user aid
Consistent user experience
Feature-rich UI controls
Responsive across browsers/devices
Powerful development concepts
MVC
OData

Code Once. Run on Any Device.

OpenUI5.org

SAPUI5

OpenUI5. Free and Open Source.

3

What SAPUI5 Is Powered By?

Web technologies
HTML5
JavaScript
CSS
Data
REST/OData

SAPUI5 Explored

Explore elements
Test elements
View element properties
Download code (MVC)

Google SAPUI5 Explored

5

What Is SAP Fiori?

SAP Fiori is the SAP user experience created by adding a set of design principles to apps
developed using the SAPUI5 framework
SAP Fiori focuses on consistency of experience in screen layout, navigation, design
approach, and even interaction/icon consistency

Source: SAP

What Is Cordova?

Cordova is a popular Open Source cross-platform framework used to build native mobile
apps using HTML5, JavaScript, and CSS

Cordova Plugins

Camera
Contacts
Geolocation
InAppBrowser
Dialogs
Push
Vibration
BarcodeScanner
Purchase
100s more
Cordova apps run in the web layer of mobile devices, using plugins to access
native capabilities
8

PhoneGap Build Packaging for the Native Stores

PG Build simplifies
compiling UI5 apps for
iOS and Android
publishing
Mobile OS

Extension

iOS

IPA

Android

APK

Windows 10

APPX
Source: Adobe

PhoneGap Build Package for the Native Stores

Pulls code from GitHub (#1 cloud code repository)

Manages required OS certificates
Creates the compiled app needed for app publication

10

No Barriers to Entry

SAPUI5

Free

=
Free

11

What Well Cover

Examine what makes SAPUI5 and Cordova so cool

Understand the benefits of SAP Web IDE
See how Gateway exposes SAP Data via standardized APIs
Become familiar with the new Hybrid Application Toolkit (HAT)
Explore the new HANA Mobile offerings
Breeze through a few of our favorite mobile development tools
Look at the iOS, Android, and Windows developer portals
Wrap-up

12

What Is SAP Web IDE?

SAPs cloud development tool for building SAPUI5 applications

Go-to tool for extending SAP Fiori applications
Home of the Hybrid Application Toolkit (Cordova)
Excellent for deployment to:
SAP Gateway
HANA HTML5
SAP Enterprise Portal
Includes GitHub Integration!
Cloud Fiori launchpad

13

SAP Web IDE Interface

Code the cloud

Easy deploy to SAP and
portal
Templates/sample apps
Code completion
Instant preview
Git integration

14

Create a Simple SAPUI5 App

Create a simple SAPUI5 in Web IDE

Package mobile apps

15

What Well Cover

Examine what makes SAPUI5 and Cordova so cool

Understand the benefits of SAP Web IDE
See how Gateway exposes SAP Data via standardized APIs
Become familiar with the new Hybrid Application Toolkit (HAT)
Explore the new HANA Mobile offerings
Breeze through a few of our favorite mobile development tools
Look at the iOS, Android, and Windows developer portals
Wrap-up

16

SAP Gateway

Exposing SAP data to SAP and non-SAP platforms via simple web services with only a small footprint
Gateway is built on top of an ABAP system, so Basis personnel already know how to support it
By hiding the complexity of SAP, developers can spend less time on the plumbing and more time
developing
Simple access to complex systems via APIs developers know how to consume
No SAP knowledge required
Free for existing SAP Customers!

17

SAP Gateway (cont.)

Gateway Hub as front-end server (on-premise)

OData Provisioning as front-end server (on-demand)
Source: openSAP

18

SAP Gateway REST/OData

RESTful web services

Client/server communication via HTTP
Common operations: PUT, GET, POST, DELETE
What is OData?
Database-like access to business data
Standardized protocol for REST

RESTClient

19

Consume an SAP Gateway Web Service

20

SAP Fiori Client

Available in App stores or create your

own company branded SAP Fiori Client
Requires SMP SDK
Based on Cordova and Kapsel plugins
Works with SAP Fiori launch page or
individual application URLs
Can integrate with SAP Mobile Place

To learn more about SAP Fiori UX, refer to www.sap.com/fiori-demo

21

What Well Cover

Examine what makes SAPUI5 and Cordova so cool

Understand the benefits of SAP Web IDE
See how Gateway exposes SAP Data via standardized APIs
Become familiar with the new Hybrid Application Toolkit (HAT)
Explore the new HANA Mobile offerings
Breeze through a few of our favorite mobile development tools
Look at the iOS, Android, and Windows developer portals
Wrap-up

22

SAP Hybrid Application Toolkit (HAT)

Deploy a UI5 app to a Cordova container from SAP Web IDE

Go-to tool for extending SAP Fiori applications
Home of the Hybrid Application Toolkit (Cordova)
Excellent for deployment
SAP Gateway
HANA HTML5
SAP Enterprise Portal
HAT is an optional plugin
Cloud Fiori Launchpad
in SAP Web IDE

23

SAP HAT Plugins

HAT currently chooses what specific

Cordova plugins are supported. SAP
Kapsel plugins expand the limited
support (licensing required) #HAT-Trick.
24

What Well Cover

Examine what makes SAPUI5 and Cordova so cool

Understand the benefits of SAP Web IDE
See how Gateway exposes SAP Data via standardized APIs
Become familiar with the new Hybrid Application Toolkit (HAT)
Explore the new HANA Mobile offerings
Breeze through a few of our favorite mobile development tools
Look at the iOS, Android, and Windows developer portals
Wrap-up

25

HANA Cloud Platform Mobile Services HCPms

HCPms offerings include:

Authentication
Onboarding
Push notifications
Reporting

26

SAP Mobile Secure

SAP mobility management in the cloud. Free trial available.

27

SAP Mobile Secure Test Cloud Console

Test your app on live

devices connected to live
networks

28

SAP Mobile Secure SAP Mobile Place

Internal App store
More than 7,000 customers

Create a branded self-service

experience to best serve apps to
employees, partners, and consumers
Ongoing management of apps to both
managed and unmanaged devices
Recreate the typical store experience
with search, categorization, ratings,
and reviews
29

SAP Mobile Secure Connectivity

Enterprise connectivity
AD/LDAP
Exchange server
CA
SMTP server
Alternatives include:
Basic authentication
Microsoft Gateway
Custom solution

30

SAP Mobile Secure Analytics

Much of the current reporting is also
provided via Google Analytics (free),
but I expect more functionality as the
Mobile Secure product matures

Google Analytics

31

SAP Mobile Secure Cloud Build Service

Fiori Guidance Wizard

Group your apps into a launchpad
32

SAP Mobile Secure Cloud Build Service (cont.)

Publish your apps to SAP Mobile

Place instead of managing apps in
the common App Stores

33

SAP Mobile Secure Cloud Build Service (cont.)

Select your icons and provide app

metadata as you would in the
Android, iOS, and Windows Phone
developer portals

34

SAP Mobile Secure Cloud Build Service (cont.)

Build
Sign

Provide trials
Set as production
35

Mobile Workflows
SAP
Web
IDE

IDE of
choice

Hybrid
App
Toolkit

User
Device

Workflow 1
SAP
Mobile
Place

SAP
Cloud
Build

SAP products complete the full Cordova

application cycle

User
Device

Cordova
CLI

Workflow 2

App Stores

PhoneGap
Build

Some companies may still choose a

more Open Source cycle
36

What Well Cover

Examine what makes SAPUI5 and Cordova so cool

Understand the benefits of SAP Web IDE
See how Gateway exposes SAP Data via standardized APIs
Become familiar with the new Hybrid Application Toolkit (HAT)
Explore the new HANA Mobile offerings
Breeze through a few of our favorite mobile development tools
Look at the iOS, Android, and Windows developer portals
Wrap-up

37

SAPUI5 Prototyping

Rapid prototyping
User interaction research
Open source

www.build.me
https://github.com/SAP/BUILD
38

Ripple Browser Emulator

Waiting for apps to deploy to

a device or emulator can be a
painful. In-browser emulators
fix that problem.

39

CodePush

Solving the time from

submit-to-published
issue
Android: 2 hours
Windows: 8 hours
iOS: 5-10 days!
With CodePush your
updates are live
immediately

40

What Well Cover

Examine what makes SAPUI5 and Cordova so cool

Understand the benefits of SAP Web IDE
See how Gateway exposes SAP Data via standardized APIs
Become familiar with the new Hybrid Application Toolkit (HAT)
Explore the new HANA Mobile offerings
Breeze through a few of our favorite mobile development tools
Look at the iOS, Android, and Windows developer portals
Wrap-up

41

Developer Portals iOS

developer.apple.com

Manage provisioning
Create certificates

42

Developer Portals iOS (cont.)

itunesconnect.apple.com

Upload build
Manage store listing

43

Developer Portals Android

Once you have your certified APK file, you can upload to the Google Play developer
Console
New builds are usually available within a few hours

44

Visual Studio Tools for Apache Cordova

Some companies can
capitalize on internal
experience with Visual
Studio for mobile
development

www.visualstudio.com/en-us/features/cordova-vs.aspx
45

Developer Portals Windows

Like iOS and Android,
Microsoft has a
developer portal for
uploading the package
file

46

openSAP Rocks!

Learning new SAP technologies can be very time demanding. Open SAP provides free
access to seasoned employees to give overviews and demos via MOOCs (Massive Open
Online Courses).
47

What Well Cover

Examine what makes SAPUI5 and Cordova so cool

Understand the benefits of SAP Web IDE
See how Gateway exposes SAP Data via standardized APIs
Become familiar with the new Hybrid Application Toolkit (HAT)
Explore the new HANA Mobile offerings
Breeze through a few of our favorite mobile development tools
Look at the iOS, Android, and Windows developer portals
Wrap-up

48

Lessons Learned

Try to use only the sap.m library for a smooth mobile experience
Clear Gateway Cache after making a changes to the entity
Pay attention to SAP Web IDE updates, weve noticed a few bugs slip through

49

Where to Find More Information

Jeff Gebo and Dhimant Patel, Developing Mobile Apps with SAP HANA Cloud Platform
(openSAP, October 2015).
https://open.sap.com/courses/mobile2/
SAP Web IDE Enablement on SCN
http://scn.sap.com/docs/DOC-55465
SAP Mobile Secure Enablement on SCN
http://scn.sap.com/docs/DOC-62447
CodePush
https://microsoft.github.io/code-push/

50

7 Key Points to Take Home

UI5 is a beautiful, enterprise-ready UI (Open Source)

Cordova: reusable code across multiple mobile platforms (Open Source)
SAP Gateway is free to current SAP customers
PhoneGap Builds first app is free
REST/OData makes developers lives much easier
SAP is creating some great tools for Cordova development
Publishing apps to the store(s) is time demanding

51

Your Turn!

How to contact me:

Brandon Webb
Email: bwebb@hypercision.com
Twitter: @gbwebb

Please remember to complete your session evaluation

52

Disclaimer
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other
countries. All other product and service names mentioned are the trademarks of their respective companies. Wellesley Information Services is neither owned nor controlled by SAP SE.

53

Wellesley Information Services, 20 Carematrix Drive, Dedham, MA 02026

Copyright 2016 Wellesley Information Services. All rights reserved.