growing with sapui5: expanding mobility to the enterprise · pdf filegrowing with sapui5:...

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








• 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








• 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

http://www.sap.com/fiori-demo



22

What We’ll Cover








• 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








• 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


• Select your icons and provide app

metadata as you would in the

Android, iOS, and Windows Phone

developer portals

35


• 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








• Wrap-up

38

SAPUI5 Prototyping

• Rapid prototyping

• User interaction research

• Open source

https://github.com/SAP/BUILD

www.build.me



http://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








• 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

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





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








• 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


• CodePush

https://microsoft.github.io/code-push/

https://open.sap.com/courses/mobile2/










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

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

growing with sapui5: expanding mobility to the enterprise · pdf filegrowing with sapui5:...

Documents