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:
[email protected]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.
