sap web ide and the hybrid application toolkit
TRANSCRIPT
August 2015
SAP Web IDEDeveloping and Deploying Hybrid Mobile Applications
Provided by Technology RIG
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 2
The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of SAP. 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 document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation 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 document is not a commitment, promise or legal obligation to deliver any material, code or functionality. This document 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 document is for informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP´s willful misconduct 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.
Legal disclaimer
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 3
Agenda
Developing and deploying hybrid mobile applications
Getting started
Additional information
* This presentation is based on SAP Web IDE up to release 1.9
Developing and deploying hybrid mobile applications
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 5
Mobile application types
NativeMobile App
Mobile Web
Web Browser
Hybrid
Mobile App
Kapsel
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 6
Mobile Qualities (Cordova and Kapsel plug-ins and APIs)
Hybrid app
*
* in future release
CameraCaptureGeolocationContactsAccelerometerDevice InformationNetwork ConnectionBattery StatusCompassMedia PlaybackAccess FileFile TransferDialog NotificationVibration NotificationGlobalizationSplash ScreenIn-App BrowserDebug ConsoleStatus Bar
Logon ManagerOffline ODataPushApp UpdateLoggerE2E TracingSettingsAuth Proxy Barcode ScanningCalendarEncrypted StorageVoice RecordingIn-App MessageApp PreferencesAttachment ViewerCache ManagerPrinterOnline Apps Toolbar
Kap
sel
Cor
dovaBarcode Reader
Offline Capability
Mobile Printing
Device Calendar
Device Tasks
Device Contacts
Camera
GPS
Voice Recording
Biometric Identification
Notifications
Digital Signature
OCR
...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 7
SAP Fiori Runtimes
Fiori in browser Browser based apps Runs on all devices No installation required Coherent UX across devices
SAP Fiori Client Downloadable ‘native’ app Pre-packaged with commonly used Cordova
plug-ins for native device integration Improved performance Full screen operation Attachment viewing Native device integration Notification App Updates
Selected Mobile Platform Services can be used
Fiori Mobile with ‘Kapsel’ SDK Custom packaged & branded app Can be delivered on company store Native device integration Offers App Administration & Reporting Push Notifications* Offline application data* Use additional SAP Mobile Platform
services
Mobile Platform required
ONE ACCESS
Browser (Desktop or Mobile) Mobile only
*requires adapting Fiori app
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 8
SAP Fiori Runtime Context
URL
Fiori front-end server
App
e.g. SAP Gateway,Fiori Cloud (HCP)
OData
Fiori in browser
SAP Fiori (UI)launchpad
and applications
any browser * in future release
Fiori front-end server
App
SAP Fiori Client
URL
e.g. SAP Gateway,Fiori Cloud (HCP)
HCPms orSMP 3.0 SP03 PL02+OData
SAP Mobile Platform
SAP Fiori Clientor custom Fiori Client
SAP Fiori (UI)launchpad
and applications
*
Fiori front-end server
e.g. SAP Gateway,Fiori Cloud (HCP)
HCPms orSMP 3.0 SP03 PL02+OData
SAP Mobile Platform
Fiori Mobile app
App
Fiori Mobilewith ‘Kapsel’ SDK
*
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 9
Building apps with SAP Web IDE
SAP Web IDEHybrid
Application Toolkit
(SAP Fiori) hybrid mobile appSAP Fiori applicationSAPUI5 application
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 10
What is Hybrid Application Toolkit (HAT)?
Enables developers to develop and build Apache Cordova hybrid apps in SAP Web IDE
HAT has 3 components that are provided as a plugin and an add-on to SAP Web IDE:
1. The SAP Web IDE plugin for Hybrid App Toolkit
2. HAT Connector to local build environment(Cordova Command-Line Interface (CLI))
3. HAT Companion application
SAP HANA Cloud Platform
SAP Web IDE
HAT(add-on)
Android SDK Tools
XCode
HAT Connector
HAT Companion app
Kapsel
Hybrid Application
Toolkit(plugin)
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 11
Enabling the Plugin
Choose the menu option Tools -> Preferences -> Optional Plugins
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 16
Templates for Hybrid apps
Hybrid templates are provided SAPUI5 Master Detail Kapsel Application SAPUI5 Mobile Kapsel Application Project SAPUI5 Master Detail with Photos
(provided with core SAP Web IDE) SAPUI5 Master Detail Kapsel Offline
Application
Additional templates of any kind can be created, added and managed
Create Develop Preview Deploy
Create a new projectFile > New > Project
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 17
Coding (assisted development)
“Ctrl + Space” to activate code completion
Additional code completion– For Cordova plugins– For Kapsel plugins
API Reference pane– For Cordova plugins– For Kapsel plugins
* not in current GA release, planned for future release
Create Develop Preview Deploy
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 18
Configuring devices
Right mouse click on index.html file Device Configuration menu only
appears to Hybrid apps
Create Develop Preview Deploy
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 19
Preview in browser with Cordova Facade
Live Preview & Testing Use browser with Cordova Facade Quickly validate hybrid app functionality without
deploying to an emulator or device Allow/Deny access to mobile features, i.e. camera of
laptop
Note: you must enable Cordova Façade previews in Hybrid App Toolkit preferences
Create Develop Preview Deploy
Browser
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 20
Hybrid App Toolkit Connector
HAT Connector will be setup by the HAT Installer
Startup the HAT Connector
On Windows, double-click run.cmd
On Mac, (first chmod +x *.sh) run ./run.sh
Strengthen the connection security with the API key
Menu Tools > Preferences
Replace the default <apiKey> value in the project config.json file with an alphanumeric string
Test connection from SAP Web IDE to the HAT Connector running locally on the developer workstation
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 21
Hybrid App Toolkit Companion app
The Hybrid App Toolkit Companion app is a mobile application that runs on a mobile device or device emulator.
Enables a live preview of a Web application created with SAP Web IDE
Cordova based mobile app
Contains Cordova, SAP mobile (Kapsel) and SAPUI5 libraries
Automatically built during HAT installationfor iOS and Android
You may also use a QR code to load the corresponding application onto the mobile device. (double-click on Companion app and select Scan)
Companion app
Kapsel
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 24
Live preview to test native device APIs
Live Preview & Testing Use pre-built hybrid companion app Test native device APIs Double-click the app and refresh Give instant response without build the project
Note: you must configure device settings so the application can properly consume native APIs
Create Develop Preview Deploy
Emulator
Device
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 25
Run on emulator or device
“Run on Emulator or Device” does Download the project to local machine Fetches the specified Cordova plugins to create
a Cordova project Build mobile app for Android or iOS Install it on emulator or mobile device Run the app
Note: You must also have configured device properties, otherwise you will not have any contexts displayed for the Run on menu command
Create Develop Preview Deploy
Emulator
Device
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 26
Preview vs. Run Create Develop Preview Deploy
SAP HANA Cloud Platform
SAP Web IDE
HAT Connector
App
Preview on
2
3
1. In SAP Web IDE: Preview on simulator or device
2. Install and launch the Companion app
3. Load application from HCP by URL to the application
4. Possibility to refresh the application after modifications have been made to the application in SAP Web IDE
* You may also scan a QR code in the Companion app to load the application (double-tap in Companion app and scan) – pull instead of push
SAP HANA Cloud Platform
SAP Web IDE
HAT Connector
Run on
1. In SAP Web IDE: Deploy to local HAT(download the application to local workstation)
2. In SAP Web IDE: Run on simulator or device
3. Build hybrid app into Cordova container
4. Install and launch hybrid mobile app
If changes are made to application, repeat steps 1 – 4
1Preview
2Run
4
Companion app
URL
App
1
3
Hybrid mobile app
App
Hybrid mobile app
App
Companion app
URL
HAT Companion app
4Refresh
Scan QR code *
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 27
Deploy the app
Manually send your app (with profile for iOS) to the Administrator of the SAP Mobile Secure server
Upload and Sign the app Publish it to SAP Mobile Place for
distribution User selects the app in the store and installs
it to the mobile device App updates can then be deployed to
SMP/HCPms
Create Develop Preview Deploy
SAP
Mobile Secure Server
SAP
Mobile Place
Publish
.apk file (Android)
.ipa file + profile (iOS)
Developer workstation
SAP Web IDE
Manual upload
Mobile App
Mobile Device
AppStore
Install app
SAP
SMP/HCPms
App update
Getting started
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 30
Getting started with SAP Web IDE
SAP Web IDE prerequisite: HCP account Web IDE on HCP Trial
https://account.hanatrial.ondemand.comafter logon, open subscription tab to subscript sapwebide
SAP Web IDE SAP Web IDE online help
https://help.hana.ondemand.com/SAP_RDE/frameset.htm?6284a94889db4f3cad001ba674282f20.html
This will explain:– opening SAP Web IDE– entering the Git settings– connecting remote systems,
including installation and setup of HANA Cloud Connector– setting SAP Web IDE preferences– enabling external plugins
Additional resources:
How to setup your SAP Web IDE on HCPhttp://scn.sap.com/community/developer-center/front-end/blog/2015/02/11/set-up-your-sap-web-ide-on-hana-cloud-part-1
Prerequisites for HANA Cloud Connectorhttps://help.hana.ondemand.com/help/frameset.htm?e23f776e4d594fdbaeeb1196d47bbcc0.html
Download SAP HANA Cloud Connectorhttps://tools.hana.ondemand.com/#cloud
On SCN:http://scn.sap.com/docs/DOC-55465
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 31
Getting started with Hybrid Application Toolkit
Additional resources:
How to enable HCPms trialhttp://scn.sap.com/community/developer-center/mobility-platform/blog/2014/12/18/how-to-enable-hana-cloud-platform-mobile-services-trial
How to use SAP HCPms with an ABAP systemhttp://scn.sap.com/community/developer-center/mobility-platform/blog/2015/02/03/how-to-use-hcpms-with-an-abap-system
Get HAT package in SAP Storehttps://store.sap.com/sap/cp/ui/resources/store/html/SolutionDetails.html?pid=0000013586
Hybrid Application Toolkit (HAT) HAT online help
https://help.hana.ondemand.com/webide_hat/frameset.htmgo to Installing and Setting Up
The online help contains:– What’s new in the latest release– Installing and setting up– Getting started– Testing– Delivering and deploying– Troubleshooting
On SCN:http://scn.sap.com/docs/DOC-62033
Additional information
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 33
Useful links
SAP Web IDE SAP Web IDE on HANA Marketplace:
http://marketplace.saphana.com/p/3334 SAP HANA Cloud Platform:
http://hcp.sap.com/index.html SAP HANA Cloud Platform (SAP Web IDE trial beta):
https://account.hanatrial.ondemand.com/ Official documentation:
https://help.hana.ondemand.com/under Platform Solutions choose SAP SAP Web IDE
Documentation within SAP Web IDE:Choose Help > Documentation
Additional related information to SAP Web IDE SAP HANA Cloud Platform:
https://help.hana.ondemand.com/Go to SAP HANA Cloud Platform > Getting Started
SAP Gateway:http://help.sap.com/nwgateway20
SAPUI5 UI Development Toolkit for HTML5 - Demo Kit (interactive doc
on SAPUI5 / OpenUI5):https://sapui5.hana.ondemand.com/sdk/
OpenUI5:http://sap.github.io/openui5/
UI Development with SAPUI5 documentation:https://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.html
SCN (SAP Community Network) SAPUI5 & SAP Web IDE:
http://scn.sap.com/community/developer-center/front-end SAP Fiori:
http://scn.sap.com/docs/DOC-41598 SAP for Mobile:
http://scn.sap.com/community/mobile
© 2015 SAP AG or an SAP affiliate company. All rights reserved.
Thank You!
Provided by Technology RIG