opensap Developing Mobile Apps with SAP HANA Cloud Platform Setting Up Your Development Environment

Transcription

1 opensap Developing Mobile Apps with SAP HANA Cloud Platform Setting Up Your Development Environment

2 TABLE OF CONTENTS SAP MOBILE PLATFORM SDK... 3 Download SAP Mobile Platform SDK... 3 Install SAP Mobile Platform SDK... 6 SCN HYBRID APP TOOLKIT (HAT) Set Up HAT Prerequisites Install Node.js Read Closely! Install Git (Windows only for Mac Install Xcode Command Line Tools) Install Apache Cordova CLI Install Plugman Install Kapsel CLI Install Java (JDK) Install Apache Ant (Windows Only For Mac install Xcode Command Line Tools) Install Android SDK Set Up Path Variables Set Path Variables for Windows Set Path Variables for Mac Set Up SCN Hybrid App Toolkit Download SCN Hybrid App Toolkit Install SCN Hybrid App Toolkit Run SCN Hybrid App Toolkit Set WebIDE Hybrid App Toolkit Plugin CREATE SAP WEB IDE KAPSEL APPLICATION Set Up HCP Destination Create Sample Application Connect App Using Android Emulator TROUBLESHOOTING SAP Mobile SDK Issues downloading SDK SCN Hybrid Application Toolkit Node.js Tips Git Installation and Tips How to Change Apache Cordova Version Tips on Running HAT (v1.7 or later) Errors when Running Android Emulator How to Configure a Proxy for NPM How to Configure a Proxy for GIT How to Configure a Proxy for Plugman Troubleshoot HAT Connection Issue when Using the Firefox Browser How to Start the SAP Web IDE Console

3 Welcome to this guide for the opensap course Developing Mobile Apps on SAP HANA Cloud. It shows how you can set up your development environment using the SAP Mobile Platform SDK and SCN Hybrid App Toolkit. Both are available on the SAP Store at This guide covers guided installation based on a Windows platform but also contains relevant information for Mac. Linux is not supported. If you are going to be using a Mac to develop ios and Android applications you can visit this guide for setup: Make sure to first follow this guide and follow the sections on installing Node.JS, SAP Mobile Platform SDK, Apache Cordova and Kapsel CLI. Also, review the troubleshooting section at end of the document for assistance with common installation tasks. If you have already installed any of the software in this document, remember to update it per versions mentioned in this guide (if necessary). SAP MOBILE PLATFORM SDK Let s start by downloading the SAP Mobile Platform SDK. Simply follow the instructions and screenshots to complete this process. Download SAP Mobile Platform SDK 1. Log on to store.sap.com with your SAP HCP Trial Account and download the free SAP Mobile Platform SDK. 3

4 2. Fill out the Download trial version form and click Submit. 3. Download by clicking the click here link. The link is valid for 48 hours only. 4

5 4. Download the latest Service Pack (SP) and Patch Level (PL) of your development environment (Mac or Win). For example, SAP Mobile Platform SDK SP09 Win Installer and SAP Mobile Platform SP09 PL03 Win Installer. Note: Make sure to download the latest SDK (SP10 will be available soon and you should use that when it is). Note 2: the Sidecar Support Pack is for MBO development, which is not supported on HCP. 5. If an error occurs when downloading, please or use one of the options available on the home page to contact SAP Store personnel. 5

6 Install SAP Mobile Platform SDK 1. Unzip the file, right-click the setupamd64.exe file, and choose run as administrator. 2. Click Next to start the installation process. 6

7 3. Select SDK install path (if you are upgrading, then the system will automatically find your SDK path). 4. Click Next. (For a new installation, select all the components. If you are upgrading and have installed all the components, the installer will automatically upgrade them all.) 7

8 5. Click Install (for a new installation, or Upgrade for an existing installation). 6. Click Next. (DO NOT select any options on this screen). 8

9 7. Click Finish. 8. If your Windows OS prompts the following install alert, simply select the installed correctly option. 9. Now install the Patch executable (e.g. SAP Mobile Platform SP09 PL03) and accept all the defaults. 10. This completes SAP Mobile Platform SDK installation. If you need further assistance, please see the Troubleshooting section at end of this document. 9

10 SCN HYBRID APP TOOLKIT (HAT) In this section, you will download and install the SCN Hybrid App Toolkit and its prerequisites for Windows. 10

11 Set Up HAT Prerequisites Install Node.js Read Closely! Always use required Node.js version with appropriate HAT version. You can find the latest installation information here: 1. If you have HAT or earlier, please uninstall current version of Node.js and download and install Node.js version v (for advanced users with additional configuration, it is possible to run multiple versions of Node.js, however, it s beyond the scope of this course). Please see troubleshooting section at end of this document. a. For Windows Select: node-v x86.msi b. For Mac Select: node-v pkg 2. For HAT or greater install Node.js version v a. For Windows Select: node-v x86.msi b. For Mac Select: node-v pkg 11

12 3. Simply follow the Setup GUI. 4. This completes the Node.js installation. If you need further assistance, please see the Troubleshooting section at end of this document. 12

13 Install Git (Windows only for Mac Install Xcode Command Line Tools) 1. Download and install Git 2. Click the Download link for your platform (e.g. Windows), save the file, and start the installation. 13

14 3. Continue the installation by selecting the options in the screens below: Select Components (defaults) Select the Use Git from the Windows Command Prompt option. 14

15 You may not see the Choosing the SSH executable screen below unless you have either OpenSSH &/or Putty environment on your computer. Select the Checkout Windows-style, commit Unix-style line endings option. 15

16 Select the Use Windows default console window option. Do not select the option on this screen. 16

17 Click Finish to complete the Git installation. 17

18 Install Apache Cordova CLI 1. Open the Windows Command Prompt and type in npm install -g Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's sensors, data, and network status. NPM is node.js package manager that is installed with Node.js. It allows users to install Node.js applications that area available in the NPM registry. Note: Apache Cordova is supported by the SAP Hybrid Application Toolkit Always check the latest release notes to see which Apache Cordova Version you should be using. Note 2: If you have HAT or greater and SAP Mobile SDK SP10 or greater you can use Apache Cordova 5.2. The install command for this would be npm install g cordova@ For Mac, open a Terminal and type in sudo npm install -g cordova@ This completes the Apache Cordova CLI installation. More information on Apache Cordova CLI is available here: - The Command Line Interface 18

19 Install Plugman Plugman is a utility for managing plugins for Apache Cordova. 1. Open the Windows Command Prompt. 2. For Windows execute command npm install -g plugman. 3. For Mac execute command sudo npm install -g plugman Install Kapsel CLI Kapsel is a set of plugins that enhance Apache Cordova with functionality such as a stream-lined logon to an SMP 3.0 server, the ability to update deployed applications, encrypted storage and push notifications. Kapsel apps can be developed on Windows or Mac machines. Kapsel apps can target Android, ios and as of SP05 Windows 8.1 and Windows 8.1 Phone. The Kapsel CLI is used to execute a set of commands supported by the Kapsel SDK. HAT now requires you to install it. 1. Open the Command Prompt in KapselSDK cli directory (e.g. c:\sap\mobilesdk\kapselsdk\cli). 2. On Windows Type in npm install -g from this directory. 3. On Mac Type execute command sudo npm install -g from this directory. 19

20 Install Java (JDK) Please note, that there are many different versions of Java available and are used by different applications. This course requires that you use Java 1.7.x. We ensure that the application is using this version by specifically adding system path statement. 1. Check to see if Java 1.7.x is installed on your computer. Open your Windows Command Prompt and type in c:\java version. If it is installed, you will see the version information. If this is not found, go to the next step. 2. Download and install JDK

21 3. Download Windows or Mac JDK. 4. Finish installing JDK. This completes JDK installation section. 21

22 Install Apache Ant (Windows Only For Mac install Xcode Command Line Tools) Apache Ant is an open-source java based build tool. HAT will use to build your mobile application locally. 1. Download and install Ant Download the latest zip for Windows (or tar for Mac). 3. Unpack the zip file; for example, c:\apache-ant This completes ANT installation section 22

23 Install Android SDK Android SDK is required for you to develop native Android applications. Although we will be focusing on developing hybrid web applications with SAP Web IDE, you are required to have the Android SDK installed on your computer in order to run your mobile app on either an Android Emulator (included with SDK) or a physical Android Device (connected to your computer). Here you have an option to either install the Android Studio (includes SDK) or simply download the standalone SDK Tools. Google s Android Studio is a complete Integrated Development Environment (IDE) used for native Android development that includes the Android SDK. The Standalone-Android SDK Tools is a subset of the Android Studio. 1. Download and install Android SDK If installing Android Studio, simply follow this installation documentation If you have installed Android Studio, open Android Studio and update your SDK (by choosing Tools > Android > SDK Manager). 4. If installing standalone SDK Tools, simply follow this installation documentation In either installation case, be sure to update your SDK Manager to get the latest available packages. 23

24 6. Launch the SDK Manager and make sure to install the following Android SDK components: a. Latest Build Tools, Tools, Platform Tools components: b. API Level 22 SDK, Google APIs and optionally the ARM emulator if you don t have a device: Note: Intel emulators are not supported (or devices for that matter). This is a current constraint of the SAP Mobile Platform SDK. 24

25 c. Install latest Google Play Services, Google Repository, Android Support Repository, Android Support Library: This completes Android SDK installation section. 25

26 Set Up Path Variables Set Path Variables for Windows In order to fully set up the environment, you will need to configure Windows Environment Variables. Open your computer s System Properties > Advanced > Environment Variables. Under User Variables, set or verify the following (may depend on versions installed): Note: Be sure to back up your system path information prior to making changes below. You can do this by copying current path and pasting to a notepad file. Please ensure the value matches your path_folder_location. VARIABLE ANDROID_HOME ANT_HOME JAVA_HOME KAPSEL_HOME VALUE* C:\Users\Winuser\AppData\Local\Android\sdk C:\apache-ant C:\Program Files\Java\jdk1.7.0_55\ C:\SAP\MobileSDK3\KapselSDK 26

27 Under System Variables, set or verify the following path values. Your default path may already have these values but ensure Java, Ant, Node.js, and Android-related values must be in your path. DO NOT REMOVE your existing path information but just ensure the value below are in the path. Note: Be sure to back up your system path information prior to making changes below. You can do this by copying current path and pasting to a notepad file. Please ensure the value matches your path_folder_location. VARIABLE Path VALUE %JAVA_HOME%\bin; C:\ProgramData\Oracle\Java\javapath; C:\Program Files\Java\jdk1.7.0_55\bin; C:\Program Files\Java\jdk1.7.0_55\lib; C:\Program Files\Java\jdk1.7.0_55\jre\lib; C:\Program Files\Java\jdk1.7.0_55\jre\bin\server; C:\Program Files (x86)\microsoft Application Virtualization Client; C:\Program Files (x86)\intel\opencl SDK\2.0\bin\x86; C:\Program Files (x86)\intel\opencl SDK\2.0\bin\x64; C:\android\sdk\platform-tools; C:\android\sdk\tools; C:\Program Files (x86)\nodejs\; C:\Program Files (x86)\git\cmd; %ANT_HOME%\bin; 27

28 Set Path Variables for Mac Open Terminal.app and review your path by typing in the following: echo $PATH You will receive an output (e.g. /usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin). Review the output and ensure the path displays all highlighted path information as displayed in the example below. In your home directory, open an existing bash_profile or create a new one and enter any missing variables*. In order to test the new path information, simply open a new Terminal and type echo $PATH. You will see new variables added to the path. In the example path below, the highlighted path are relevant to the HAT/Cordova setup. export PATH=${PATH}:/Users/macuser/android-sdk/platform-tools/ export PATH=${PATH}:/Users/macuser/android-sdk/tools/ export STUDIO_JDK=/Library/Java/JavaVirtualMachines/jdk1.7.0_67.jdk/Conents/Home export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_67.jdk/Conents/Home export PATH=$JAVA_HOME/bin:$PATH export M2_HOME=/Library/Maven export M2=$M2_HOME/bin export PATH=$M2:$PATH export ANDROID_HOME=/Users/macuser/android-dsk export ANT_HOME=/Users/macuser/apache-ant export PATH=$ANT_HOME/bin:$PATH export KAPSEL_HOME=/Users/macuser/SAP/MobileSDK3/KapselSDK *Please ensure the value matches your path_folder_location. 28

29 Set Up SCN Hybrid App Toolkit Download SCN Hybrid App Toolkit SAP Web IDE Hybrid App Toolkit Add-on enables developers to create and deploy hybrid apps (also known as Cordova or Kapsel apps) using Apache Cordova and the SAP Mobile Platform SDK. 1. Log on to SAP Store and search for SCN Hybrid App Toolkit Add-On. "Click Trial Version. 2. Fill out the Download trial version form and click Submit. 29

30 3. Click OK. 4. Download by clicking the click here link. The link is valid for 48 hours only. 30

31 5. Please verify SAP Web IDE version and download the appropriate Hybrid App Toolkit Add-On version and save the file locally. Note: as of the writing of this document the latest version of HAT is please download and install it. 6. If an error occurs when downloading, please or use one of the options available on the home page to contact SAP Store personnel. 7. Unzip the file to C:\sap (e.g. C:\SAP\SAP_HAT_local-1.x.x) and go to the next section. This completes HAT installation. 31

32 Install SCN Hybrid App Toolkit In this section, we will set up and configure HAT. This section was created using HAT Run setup.cmd from the HAT directory. Your browser will open. You will see the Important Notes dialog. Click x on right-hand corner to close. 2. (Setup Page 1) Run Check All. If you are missing any required pre-requisites, this screen will show what needs to be fixed and in many cases it will allow you to fix the error for you by simply click on the error message. 32

33 3. (Setup page 1) Once the prerequisites are checked, you will automatically proceed to Setup Page 2 (Install Hybrid App Toolkit). 4. (Setup page 2) Configure HAT Connector for SAP Web IDE - Enter your WebIDE URL and click Save. Your WebIDE URL can be found in the HCP Cockpit > Subscriptions > Web IDE > Application URL. 33

34 5. (Setup Page 2) Configure Path for Custom Plugins 6. Set the certificate password and click Save. 34

35 7. After you click Generate, you may see User Access Control dialog box asking you to allow HAT to make changes to your computer. Click Yes. 8. You ll be automatically directed to Setup Page 3. 35

36 9. (Setup Page 3) You will build the Companion app. The fields (in the second step) should be prepopulated, so simply save the configuration. Once the process is completed, you ll receive a Setup completed successfully! message. 10. (Setup Page 3) Your Companion app will being to build You may experience high-cpu spike. 36

37 11. (Setup Page 3) Once the app is built, you will be prompted with Setup completed successfully! message. Click OK to exist setup. 12. You can close the setup page. This completes HAT installation section. 37

38 Run SCN Hybrid App Toolkit 1. Open Command Prompt from your HAT directory and type run.cmd 2. Open the browser to and verify that the connector is running. 38

39 Set WebIDE Hybrid App Toolkit Plugin 1. Open WebIDE 2. Go to Tools > Preferences 3. Enable com.sap.webide.hybrid. Choose Plugins > Optional Plugins 4. Click Test Connection. You should see the message the connection is available. If you run into an error, please ensure that your browser cookies. 39

40 CREATE SAP WEB IDE KAPSEL APPLICATION Set Up HCP Destination In order to connect to a back end from SAP Web IDE, you will need to select an HCP destination. 1. Open your HCP cockpit and choose Destinations > New Destination. 2. Provide destination configuration (as seen below) and click Save. 3. Review your changes. 40

41 Create Sample Application 1. Open SAP Web IDE and choose New Project from Template. 2. Click the All Categories dropdown and select SAPUI5 Mobile Application. 41

42 3. Select SAPUI5 Master Detail Kapsel Application and click Next. 4. Provide a project name and click Next. 42

43 5. Click Service URL. Service Information, click drop-down and select Northwind and provide the service URL. You can obtain the service URL from > Browse the Full Access (Read- Write) Service, change the URL version from V3 to V2 and press Enter. Paste this URL in Service URL section and click arrow besides workspace. The details will populate and Next button will be enabled. Change V3 to V2 (and press Enter). (Note, V3 is currently not supported). 43

44 6. Fill out the details of this application and click Next. Below are sample Main Data Fields, Details Section, and Information Section 44

45 7. Click Finish. 8. Now let s Run your app. Expand your app and highlight index.html and click Run button form button bar. 9. A new browser window will open and you ll be able to review your app by running it. 45

46 Connect App Using Android Emulator Before you can run on an emulator, you will have to configure your project settings. 1. Right-click your project and select Project Settings and select Project Settings and choose Device Configuration from the list 46

47 2. Configure Project Settings Provide Application information and Build Options (default) that will be used to define your application. App Name Name displayed App ID unique identifier (e.g. com.sap.yourname.mobileapp) Description (optional) Version App Version (e.g ) Select a platform. 47

48 Plugins Cordova - Select at least one plugin. Plugins Kapsel Select at least one plugin; some users have had issues with only Cordova plugin being selected. 48

49 Preferences You can set a global platform icon or set specific Android settings (see next screen). Once you set preferences, click Save and Close....Click Android tab to set specific preferences. Once you set preferences, click Save and Close. 49

50 3. Now you are ready to run on a connected device or an emulator. The following scenario is using Android Emulator. Right-click your project and choose Run > Run on > Android Emulator. If you don t see the option, then right-click index.html file and choose Run > Run on > Android Emulator (or device if you have it connected). 50

51 4. Setup the release key for Android Set an application key Test Key Use system generated application key (and click OK) Custom Key Use your own application key (fill out information and click OK) 51

52 Your application will start to build the build time may take some time. 5. Your emulator will start. Click All Apps. 6. Select your app. 52

53 7. Open your app. If your app does not show any results, then change the service url in your components.js file of your mobile app in SAP Web IDE to absolute URL (i.e. and deploy mobileapp to HAT again. 53

54 TROUBLESHOOTING This section covers basic troubleshooting tips. SAP Mobile SDK Issues downloading SDK 1. If you have issues downloading SAP Mobile SDK, please contact 2. If you have trouble installing SAP Mobile SDK, make sure no other applications are running and run the installer again by right-clicking and choosing the run as administrator option. 54

55 SCN Hybrid Application Toolkit Node.js Tips If you need to use a specific version of Node.js with HAT, try using Node Version Manager (Windows). Run the following in Windows Command Prompt in your nodejs installation directory: C:\nodejs>npm install -g nvmw C:\nodejs >nvmw install v C:\nodejs >nvmw use v # Install nvmw globally # Install a specific version number # Use the specific version Other options: nvmw help nvmw install [version] nvmw uninstall [version] nvmw use [version] nvmw ls # Show this message # Download and install a [version] # Uninstall a [version] # Modify PATH to use [version] # List installed versions On Mac, you can try using: # npm install g n # Install n globally # n # Install and use v If you have issues with installation/uninstallation of Node.js, try removing the nodejs or nvmw (if installed) directory in C:\Users\<your_user_account 55

56 Git Installation and Tips Please refer to the installation document on the Git web site at Started-Installing-Git 56

57 How to Change Apache Cordova Version If you need to change an Apache Cordova version, you can use the following commands: >npm install g cordova@5.1.1 See the latest documentation at 57

58 Tips on Running HAT (v1.7 or later) 1. When running HAT setup.cmd, you see ERROR not compatible. Simply update Node.js and restart your computer (if necessary) and run setup.cmd again. See the Node.js Tips section for updating versions. 2. When running HAT setup.cmd, you see ERROR: bower cannot be found! Simply let the process install bower and continue. If you still run into an error, simply install Bower manually in a Command Window: npm install g bower 58

59 3. If you have installed Node v and the HAT installer errors out, please try installing Node v and running HAT setup again. 4. JAVA_HOME not set correctly when checking HAT prerequisites. Review the Setup PATH Variables sections and ensure the path points to your java directory. 5. Cordova version warning. While Cordova version may work, you may have issues starting up HAT and thus you should downgrade it by running Cordova You can install Cordova by running npm install g cordova@5.1.1 from Windows Command Prompt or Mac Terminal. 59

60 6. Cordova build android project error when checking HAT prerequisites. Ensure JAVA_HOME is set correctly (see #3 above). 7. Kapsel is not recognized warning when checking HAT prerequisites. Open Windows Command Prompt and run npm install g from your C:\SAP\MobileSDK3\kapselSDK\cli directory. 60

61 Errors when Running Android Emulator 1. When launching Android Emulator, you encounter x86 emulation error. If you are running Android Studio, open AVD Manager. 61

62 2. When launching AVD, you receive a message that it is already running. Simply delete the lock file and start again. 62

63 How to Configure a Proxy for NPM If you require a connection via a proxy server, you need to configure the proxy manually using the NPM command. 1. Open Windows Command Prompt and check the proxy settings by running npm config list. If you previously set a proxy and would like to remove it, run npm config del proxy and/or npm config del https-proxy. 2. Set an HTTP proxy by running npm config set proxy <protocol>:://<proxyhost>:<proxyport> 3. Set an HTTPS proxy by running npm config set https-proxy <protocol>:://<proxyhost>:<proxyport> 4. Run npm config list to review the changes. 63

64 How to Configure a Proxy for GIT If you require a connection via a proxy server, then you need to configure the proxy manually using the GIT command. 1. Open Windows Command Prompt and check the proxy settings by running git config --list. If you previously set a proxy and would like to remove it, run git config global unset http.proxy and/or git config global unset https.proxy. 2. Set an HTTP proxy by running git config --global http.proxy <protocol>:://<proxyhost>:<proxyport> 3. Set an HTTPS proxy by running git config --global https.proxy <protocol>:://<proxyhost>:<proxyport> 4. Run git config --list to review the changes. 64

65 How to Configure a Proxy for Plugman If you require a connection via a proxy server, then you need to configure the proxy manually using the plugman command. 1. Open Windows Command Prompt and check the proxy settings by running plugman config list. If you previously set a proxy and would like to remove it, run plugman config del proxy and/or plugman config del https-proxy. 2. Set an HTTP proxy by running plugman config set proxy <protocol>:://<proxyhost>:<proxyport> 3. Set an HTTPS proxy by running plugman config set https-proxy <protocol>:://<proxyhost>:<proxyport> 4. Run plugman config list to review the changes. 65

66 Troubleshoot HAT Connection Issue when Using the Firefox Browser If you are using Firefox and encounter a Connection Failure issue (or if you receive the message in Chrome), make sure the toolkit is running and check to ensure that the proxy is set. Click the Add Exception button. Click Confirm Security Exception. 66

67 How to Start the SAP Web IDE Console If you run into any other issues, it may be helpful to see messages in the SAP Web IDE console. You can start the SAP Web IDE console by choosing View > Console. You will see the console opened at bottom of your main view. 67

68 SAP SE or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. 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. Please see for additional trademark information and notices. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. In particular, SAP SE or its affiliated companies have 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 SE s or its affiliated companies strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies 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. 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.