Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
August 2015
SAP Web IDE
Developing 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...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 3
Agenda
Developing and deploying hybrid mobile applicatio...
Developing and deploying
hybrid mobile applications
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 5
Mobile application types
Native
Mobile App
Mobile Web
We...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 6
Mobile Qualities (Cordova and Kapsel plug-ins and APIs)
...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 7
SAP Fiori Runtimes
Fiori in browser
 Browser based apps...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 8
SAP Fiori Runtime Context
URL
Fiori front-
end server
Ap...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 9
Building apps with SAP Web IDE
SAP Web IDE
Hybrid
Applic...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 10
What is Hybrid Application Toolkit (HAT)?
 Enables dev...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 11
Enabling the Plugin
 Choose the menu option Tools -> P...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 16
Templates for Hybrid apps
Hybrid templates are provided...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 17
Coding (assisted development)
 “Ctrl + Space” to activ...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 18
Configuring devices
 Right mouse click on index.html f...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 19
Preview in browser with Cordova Facade
Live Preview & T...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 20
Hybrid App Toolkit Connector
HAT Connector will be setu...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 21
Hybrid App Toolkit Companion app
The Hybrid App Toolkit...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 24
Live preview to test native device APIs
Live Preview & ...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 25
Run on emulator or device
“Run on Emulator or Device” d...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 26
Preview vs. Run Create Develop Preview Deploy
SAP HANA ...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 27
Deploy the app
 Manually send your app (with profile f...
Getting started
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 30
Getting started with SAP Web IDE
SAP Web IDE prerequisi...
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 31
Getting started with Hybrid Application Toolkit
Additio...
Additional information
© 2015 SAP AG or an SAP affiliate company. All rights reserved. 33
Useful links
SAP Web IDE
 SAP Web IDE on HANA Marketpl...
© 2015 SAP AG or an SAP affiliate company. All rights reserved.
Thank You!
Provided by Technology RIG
Upcoming SlideShare
Loading in …5
×

SAP Web IDE and the Hybrid Application Toolkit

Overview of the SAP Web IDE and the Hybrid Application Toolkit

SAP Web IDE and the Hybrid Application Toolkit

  1. 1. August 2015 SAP Web IDE Developing and Deploying Hybrid Mobile Applications Provided by Technology RIG
  2. 2. © 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
  3. 3. © 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
  4. 4. Developing and deploying hybrid mobile applications
  5. 5. © 2015 SAP AG or an SAP affiliate company. All rights reserved. 5 Mobile application types Native Mobile App Mobile Web Web Browser Hybrid Mobile App Kapsel
  6. 6. © 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 Camera Capture Geolocation Contacts Accelerometer Device Information Network Connection Battery Status Compass Media Playback Access File File Transfer Dialog Notification Vibration Notification Globalization Splash Screen In-App Browser Debug Console Status Bar Logon Manager Offline OData Push App Update Logger E2E Tracing Settings Auth Proxy Barcode Scanning Calendar Encrypted Storage Voice Recording In-App Message App Preferences Attachment Viewer Cache Manager Printer Online Apps Toolbar Kapsel Cordova Barcode Reader Offline Capability Mobile Printing Device Calendar Device Tasks Device Contacts Camera GPS Voice Recording Biometric Identification Notifications Digital Signature OCR ...
  7. 7. © 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
  8. 8. © 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 or SMP 3.0 SP03 PL02+ OData SAP Mobile Platform SAP Fiori Client or custom Fiori Client SAP Fiori (UI) launchpad and applications * Fiori front- end server e.g. SAP Gateway, Fiori Cloud (HCP) HCPms or SMP 3.0 SP03 PL02+ OData SAP Mobile Platform Fiori Mobile app App Fiori Mobile with ‘Kapsel’ SDK *
  9. 9. © 2015 SAP AG or an SAP affiliate company. All rights reserved. 9 Building apps with SAP Web IDE SAP Web IDE Hybrid Application Toolkit (SAP Fiori) hybrid mobile appSAP Fiori applicationSAPUI5 application
  10. 10. © 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)
  11. 11. © 2015 SAP AG or an SAP affiliate company. All rights reserved. 11 Enabling the Plugin  Choose the menu option Tools -> Preferences -> Optional Plugins
  12. 12. © 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 project File > New > Project
  13. 13. © 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
  14. 14. © 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
  15. 15. © 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
  16. 16. © 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
  17. 17. © 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 installation for 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
  18. 18. © 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
  19. 19. © 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
  20. 20. © 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 1 Preview 2 Run 4 Companion app URL App 1 3 Hybrid mobile app App Hybrid mobile app App Companion app URL HAT Companion app 4 Refresh Scan QR code *
  21. 21. © 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 App Store Install app SAP SMP/HCP ms App update
  22. 22. Getting started
  23. 23. © 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.com after logon, open subscription tab to subscript sapwebide SAP Web IDE  SAP Web IDE online help https://help.hana.ondemand.com/SAP_RDE/frameset.htm?6284a94889db4f3ca d001ba674282f20.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 HCP http://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 Connector https://help.hana.ondemand.com/help/frameset.htm?e23f776e4d594fdbaeeb1196d4 7bbcc0.html Download SAP HANA Cloud Connector https://tools.hana.ondemand.com/#cloud On SCN: http://scn.sap.com/docs/DOC-55465
  24. 24. © 2015 SAP AG or an SAP affiliate company. All rights reserved. 31 Getting started with Hybrid Application Toolkit Additional resources: How to enable HCPms trial http://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 system http://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 Store https://store.sap.com/sap/cp/ui/resources/store/html/SolutionDetails.html?pid=0000 013586 Hybrid Application Toolkit (HAT)  HAT online help https://help.hana.ondemand.com/webide_hat/frameset.htm go 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
  25. 25. Additional information
  26. 26. © 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?e8fdaa44bb5710148368de 02b150bce3.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
  27. 27. © 2015 SAP AG or an SAP affiliate company. All rights reserved. Thank You! Provided by Technology RIG

×