Post on 14-Feb-2018
Produced by Wellesley Information Services, LLC, publisher of SAPinsider. © 2016 Wellesley Information Services. All rights reserved.
Growing with SAPUI5: Expanding Mobility to the Enterprise
Brandon Webb hyperCision
1
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)
2
What We’ll 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
3
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 OpenUI5. Free and Open Source.
SAPUI5
4
What SAPUI5 Is Powered By?
• Web technologies
HTML5
JavaScript
CSS
• Data
REST/OData
5
SAPUI5 Explored
• Explore elements
• Test elements
• View element properties
• Download code (MVC)
Google “SAPUI5 Explored”
6
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
7
What Is Cordova?
• Cordova is a popular Open Source cross-platform framework used to build native mobile
apps using HTML5, JavaScript, and CSS
8
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
9
PhoneGap Build — Packaging for the Native Stores
Source: Adobe
Mobile OS Extension
iOS IPA
Android APK
Windows 10 APPX
PG Build simplifies
compiling UI5 apps for
iOS and Android
publishing
10
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
11
No Barriers to Entry
+ =
Free Free
SAPUI5
12
What We’ll 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
13
What Is SAP Web IDE?
• SAP’s 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
Cloud Fiori launchpad
Includes GitHub Integration!
14
SAP Web IDE Interface
• Code the cloud
• Easy deploy to SAP and
portal
• Templates/sample apps
• Code completion
• Instant preview
• Git integration
15
Create a Simple SAPUI5 App
• Create a simple SAPUI5 in Web IDE
• Package mobile apps
16
What We’ll 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
17
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!
18
SAP Gateway (cont.)
• Gateway Hub as front-end server (on-premise)
• OData Provisioning as front-end server (on-demand)
Source: openSAP
19
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
20
Consume an SAP Gateway Web Service
21
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
22
What We’ll 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
23
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
Cloud Fiori Launchpad
HAT is an optional plugin
in SAP Web IDE
24
SAP HAT Plugins
HAT currently chooses what specific
Cordova plugins are supported. SAP
Kapsel plugins expand the limited
support (licensing required) #HAT-Trick.
25
What We’ll 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
26
HANA Cloud Platform Mobile Services — HCPms
• HCPms offerings include:
Authentication
Onboarding
Push notifications
Reporting
27
SAP Mobile Secure
SAP mobility management in the cloud. Free trial available.
28
SAP Mobile Secure — Test Cloud Console
Test your app on live
devices connected to live
networks
29
SAP Mobile Secure — SAP Mobile Place
• 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
“Internal App store”
“More than 7,000 customers”
30
SAP Mobile Secure — Connectivity
• Enterprise connectivity
AD/LDAP
Exchange server
CA
SMTP server
• Alternatives include:
Basic authentication
Microsoft Gateway
Custom solution
31
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
32
SAP Mobile Secure — Cloud Build Service
Fiori Guidance Wizard
Group your apps into a launchpad
33
SAP Mobile Secure — Cloud Build Service (cont.)
• Publish your apps to SAP Mobile
Place instead of managing apps in
the common App Stores
34
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
35
SAP Mobile Secure — Cloud Build Service (cont.)
• Build
• Sign
• Provide trials
• Set as production
36
Mobile Workflows
SAP Web IDE
Hybrid App
Toolkit
SAP Cloud Build
SAP Mobile Place
User Device
IDE of choice
Cordova CLI
PhoneGap
Build App Stores
User Device
Workflow 1 Workflow 2
SAP products complete the full Cordova
application cycle
Some companies may still choose a
more Open Source cycle
37
What We’ll 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
38
SAPUI5 Prototyping
• Rapid prototyping
• User interaction research
• Open source
https://github.com/SAP/BUILD
www.build.me
39
Ripple Browser Emulator
Waiting for apps to deploy to
a device or emulator can be a
painful. In-browser emulators
fix that problem.
40
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
41
What We’ll 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
42
Developer Portals — iOS
Manage provisioning
Create certificates
developer.apple.com
43
Developer Portals — iOS (cont.)
Upload build
Manage store listing
• itunesconnect.apple.com
44
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
45
Visual Studio Tools for Apache Cordova
www.visualstudio.com/en-us/features/cordova-vs.aspx
Some companies can
capitalize on internal
experience with Visual
Studio for mobile
development
46
Developer Portals — Windows
Like iOS and Android,
Microsoft has a
developer portal for
uploading the package
file
47
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).
48
What We’ll 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
49
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, we’ve noticed a few bugs slip through
50
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/
51
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 Build’s 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
52
Your Turn!
How to contact me:
Brandon Webb
Email: bwebb@hypercision.com
Twitter: @gbwebb
Please remember to complete your session evaluation
53
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.
Disclaimer
Wellesley Information Services, 20 Carematrix Drive, Dedham, MA 02026 Copyright © 2016 Wellesley Information Services. All rights reserved.