Hat app document

1
Copyright © 2018. BluePrint Technologies. All rights reserved.

Table of Contents

Hybrid App Toolkit ‐ Installation .......................................................................... 2
Introduction ......................................................................................................... 2
Prerequisites ........................................................................................................ 2
Setting Proxy for Android SCK Manager ............................................................. 14
Setting Proxy for npm, Git and Plugman ............................................................ 28
Hat application – development . .......................................................................... 48
Preliminary steps .................................................................................................. 48
Check the prerequisites ..................................................................................... 48
Setup the required destination .......................................................................... 49
Start the HAT Connector .................................................................................... 49
Preview using Cordova Façade in Browser ........................................................ 63
Preview using Companion App on the emulator ............................................... 66
Preview using Companion App on the device .................................................... 69
Deploy the app on local HAT .............................................................................. 72
Run the app on the emulator ............................................................................. 75
Run the app on the device ................................................................................. 80

2
Hybrid App Toolkit – Installation

Hybrid App Toolkit ‐ Installation
Introduction
Hybrid Application Toolkit (from now on simply HAT) is the tool that allows you to deploy
SAP Hybrid applications on mobile devices. Hybrid application (also known as Kapsel applications)
can be created by using SAP Web IDE and then deployed on mobile devices with this tool. In order
to get more information on this tool and on SAP Web IDE we would recommend giving a look to
this page (SAP Web IDE – Overview). Here you can find many other useful resources for SAPUI5
application development.
HAT installation is NodeJS based: it guides you through all the steps for a successful result.
Prerequisites
The below one are the tools that is required for smooth installation of HAT. In addition, do
install the same exact version that has been specified.
 Java JDK 8 with latest release update
 Android SDK rel. 24.4.1 or higher
 Apache Ant 1.9.6
 SAP Kapsel Plugin SP10 PL1
 Node.JS v.5.4.1 only

3
 Git client
 Hybrid Application Toolkit latest version
 Cordova 5.2.0 only
 Plugman
Tools that are marked in bold has to be in that specific version only
The prerequisites here are nothing more than the following ones:
 Windows 7 and above
 Google Chrome browser
 An account on the SAP HANA Trial Landscape accessible by this link (SAP HANA Cloud Platform)
Further recommendations:
 UAC must be set as by default
 All the commands in the Terminal window has to be executed without administrator’s rights;
otherwise, you will not be able to perform HAT setup.
Install Java Development Kit (JDK)
The Android SDK requires Java Development Kit, so as first step we need to install this
component. In this guide, we are using JDK 8, but seven is fine as well.
1) Go to JDK download page “Java SE Development Kit 8 – Downloads“, accept the license
agreement and download the JDK according to your Windows platform (32 or 64 bit)

4

2) Once the download is finished double click on the downloaded file to start the installation
3) Leave all by default and click next at every step. When you reach the step where you can
change the installation path, take note of this path because it will be required later when you are
going to configure the JAVA_HOME system variable

5

4) When the installation finishes, you can check that all worked fine by opening a Terminal
window and typing the command “java ‐version“. You should get something like this

Install Android SDK
For the Android SDK you can go to the following URL: Download Android Studio and SDK Tools |
Android Developers
Now you have two possibilities:
 Download the complete Android Studio suite which contains in bundle the Android SDK
 Download the stand‐alone version of SDK without the Android Studio.
Here we will follow the second approach, but the first one is fine as well: just write down the
path where the bundled SDK tool is installed.
1) Go to the download URL and click on Other Download Options

6

2) Choose the recommended download option (for Windows), which is the one by the installer

3) Once the download is finished, double click on the downloaded file to start the installation
4) Accept the UAC request by clicking on Yes
5) Click on Next on the Welcome screen
6) Click on Next on the screen where the current installed Java version is verified

7
7) Choose if you want to install this just for you or for everyone and click on Next
8) Take note of the installation path (it will be required later) and click on Next

9) Click on Install
10) When the installation is completed click on Next
11) Choose to Start the SDK Manager and click on Finish
12) The SDK manager starts: if you get an error like this, it is because most probably, you are
behind a firewall and you need to configure your proxy settings; so click on Close and read the
APPENDIX to this section named Configure proxy for Android SDK Manager.
If you have no “Failed to fetch” error, you can continue with next step

8

13 We need to install these packages. At this moment, the android version supported by Kapsel
is Android 5 so we need to select android version 5.0 from the list and the following sub packages
has to be installed.
 Tools
 Android SDK Tools (it comes already installed)
 Android SDK Platform‐Tools
 Android SDK Build‐Tools
 Android 5.1.1 (API 22)
 SDK Platform
 ARM EABI v7a System Image
 Android 4.4.2 (API 19)
 SDK Platform
 ARM EABI v7a System Image

9
 Extras
 Android Support Repository
 Android Support Library
 Google Play Services
 Google Repository
 Google USB Driver
NOTE: After the installation of Google USB Driver, in order to have it fully working with your
mobile device, you have to follow the instructions reported at this link: OEM USB Drivers |
Android Developers

14) Select the root Android SDK License, click on Accept License and then on Install

10
15) The installation of the required packages starts. It might require some time depending on
your network speed, so be patient. If you get an error saying, “Stopping ADB server failed (code
‐1)” at the beginning of the installation process, do not worry, its normal!
16) When the installation finishes, you might need to restart your Android SDK manager

17) We need to create an Android Virtual Device (AVD) in order to test our Android applications.
Of course, this should not be mandatory, because we can test the applications just by using my
Android phone, but at moment the HAT setup looks for it, so we need to configure it. In the future
probably, this will not be a mandatory step.
In order to create your first AVD, select Tools –> Manage AVDs, click on the Device
Definitions tab, select a suitable device for your Android emulator (i.e. Nexus 4) and click
on Create AVD

11

18) Specify the required parameters (this is just an example and click on OK)
19) When the summary screen appears click on OK

12

20) You should be able to get your emulator in the list

21) The tool can be closed.
NOTE: Using the Android Emulator with this kind of ARM processor might result very slowly. We
would suggest you to use (if possible) Virtual Machine Acceleration as explained here. In this way,
you can have a better‐emulated device for your development.
Install Apache Ant
For the Apache Ant software installation, you can download it from Apache Ant – Binary
Distributions
1) Download this version

13

2) Select the downloaded zip file, right click on it and choose Extract All

3) Just put the extracted folder on your C: drive’s root. A subfolder will be automatically created

14

4) Rename the new folder simply with “apache‐ant“

Setting Proxy for Android SCK Manager
Configure proxy for Android SDK Manager
1) Click on Tools –> Options

15

2) Enter your proxy settings (i.e. for SAP Network proxy: 8080)

3) Close SDK Manager and reload it by double clicking on the SDK Manager executable

Now we are going to how to install Kapsel, how to configure some environment variables and
how to install a bunch of other components like GIT, Node.js, Kapsel CLI, Cordova and Plugman.
Below gives, an overview of what next should be done.

16
 Download and install SAP Kapsel Plugin
 Configure some environment variables (JAVA_HOME, ANT_HOME, KAPSEL_HOME,
ANDROID_HOME and PATH)
 Install a GIT client
 Install Node.js
 Install Kapsel CLI
 Install Apache Cordova
 Install Plugman
Download and install SAP Kapsel Plugin
SAP Kapsel Plugin is included in the SAP Mobile Platform SDK package, which can be downloaded
from the SAP Store at this link. Download is free.
1) Click on Trial Version. Once you have filled the contact form and sent it, you will receive an
email with the download link

17
2) Once downloaded the package you can extract it. You can do it in the current folder because
we will not need the entire package, but just a small part
3) Navigate to the extracted folder down to the path modulesKapselSDK. You will find another
zip file. Right click on it and select extract all

4) Just extract it in the C:KapselSDK folder: this is what you should get at the end

18
Configure some environment variables (JAVA_HOME, ANT_HOME, KAPSEL_HOME,
ANDROID_HOME and PATH)
Let us now configure a bunch of system variables.
First, let us set the JAVA_HOME. The steps listed here for setting the JAVA_HOME variable are
the same for all the other three variables. For the PATH variable, you just need to append a new
string to the existing PATH. You will see this later.
These are the variables you need to configure:
VARIABLE VALUE
JAVA_HOME C:Program FilesJavajdk1.8.0_65 (pay attention to the correct path here!)
ANT_HOME C:apache‐ant
KAPSEL_HOME C:KapselSDK
ANDROID_HOME C:UsersWinuserAppDataLocalAndroidandroid‐sdk
NOTE:
The ANDROID_HOME variable is NOT mandatory, but it is better to have it because it is
much easier to set up the PATH variable for the Android tools.
So let us see how to configure the JAVA_HOME: then you can do the same also for the other
variables.
1) Right click on the Start button and choose System. Alternatively you can open the Control
Panel and navigate to System and Security –> System

19

2) Click on Advanced System Settings

3) Click on Environment Variables

20
4) In the System Variables panel click on New

5) Enter the variable name JAVA_HOME and its value according to the table above and click
on OK

6) Do the same for all the other variables.
7) Once all the four environment variables have been set up we can configure the path. In
the System Variables panel, select the PATH variable and click on Edit

21
8) Append to the PATH variable the following string (including the first semicolon) and click on OK
; %JAVA_HOME%bin; %ANT_HOME%bin; %ANDROID_HOME%tools;
%ANDROID_HOME%platform‐tools
9) At the end, you can check if you have done all correctly by typing one by one the following
commands
echo %JAVA_HOME%
echo %ANT_HOME%
echo %ANDROID_HOME%
echo %KAPSEL_HOME%
path
You should get something like this

For each variable, you receive the related path. Check that they are all correct. All the
environment variables have been properly configured.

22
Install a GIT client
A GIT client is another very important tool for HAT. In order to manage the source code that
available on the git server we can this client .We can also check if you have such a Git client
installed on your machine by opening a terminal window, typing the word “git” and hitting ENTER
The terminal window will give a result as follows If git has been already installed.

The terminal window above depicts that git has been installed in your system. When git is not
installed we will get some error, so for installing the git client please follow the below given steps.
1) Download the Git client from here Git. Feel free to download the latest version
2) Start the installation process by double clicking on the installation file
3) Click on Next at the Welcome screen
4) Click on Next at the License information
5) Choose the path where you want to install it or leave the proposed one and click on Next
6) At the Select Components screen simply click on Next
7) Click again on Next to create a shortcut in the Start Menu

23
8) You come now to an important step: here you need to choose how you would like to use Git
from the command line. Choose the second option and click on Next

9) At next screen you are called to decide how Git client needs to deal with the line ending
conversions.

Select the first option from the above as it is recommended for hat.

24
10) At the screen named “Configuring the terminal emulator to use with Git Bash” keep the “Use MinTTY”
option selected and click on Next
11) At the screen named “Configuring experimental performance tweaks” keep the “Enable file
system caching” option unselected and click on Next
12) The installation starts. At the end, simply click on Finish
13) Close any open Terminal window and reopen a new one and issue again the “git” command.
You should see that the Git client is now installed
14) In case you are behind a proxy firewall and you need to manually configure the proxy settings
for Git, you can do it by following the steps listed in the How to configure proxy for Git
Install Node.js
Node.js is the main tool for HAT setup: the script, which installs HAT, uses this tool for executing
the installation instructions.
In order to download Node Js please look into this link https://nodejs.org/dist/v5.4.1/node‐
v5.4.1‐x64.msi
For smooth installation of HAT in our system, we need this npm tool. This tool brings many
packages that built inside it, as they are required for smooth running of HAT. Also using the “npm”
tool, we can connect and install repository and install the package specified in the command line
remotely. For this reason, since it needs to connect to the internet network, it might be required
to configure the proxy settings for it, in case your machine is behind a proxy firewall. The HAT
installation will automatically ask you for proxy information and will set the npm configuration
for you. In case you need to do it manually, you can by following the steps listed in the APPENDIX
to this part under the chapter How to configure proxy for npm

25
NOTE: You MUST NOT install the latest version, but just a specific version that is 5.4.1.
1) Download the application
2) Double click on the download file to launch the installation process
3) Click on Next at the Welcome screen
4) Accept the license agreement and click on Next
5) For the destination folder you can leave the proposed one (the default for 64bit should
be C:Program FilesNodeJS) and click on Next.
6) Click on Next again on the screen named Custom Setup.
7) Click on Install to start the installation.
8) If you get the User Access Control popup, click on Yes to install the “node.js” program
9) Click on Finish when the installation finishes.

10) Now, when we open the setup again it will show versions of Node and npm installed in our
system.

NOTE: Sometimes npm might not be recognised by the system .By doing a system reboot this
would get resolved.

26
Install Kapsel CLI
This step will install the Command Line Interface for Kapsel. This is a very short step. All you have
to do is just to run the following command in a Terminal window:
npm install ‐g c:KapselSDKcli (of course if you have installed the Kapsel plugin in a different
folder you have to adapt this line)
You should get something like this:

NOTE: If you get errors here, it is because most likely you have not properly configured your proxy
settings for npm. Please follow the steps listed in the APPENDIX to this part under the
chapter How to configure proxy for npm
Install Apache Cordova 5.2.0
HAT will automatically install the right apache Cordova version on runtime. However, The
installation is simple: it is done through the “npm” command. We need to just open a Terminal
window and run the command:
npm install ‐g cordova@5.2.0

27

NOTE: If you get errors here, it is because most likely you have not properly configured your proxy
settings for npm. Please follow the steps listed in the How to configure proxy for npm
Install Plugman
Plugman is a tool for installing/uninstalling plugins for Apache Cordova.
The following npm command will automatically install the right Plugman version that is required.
npm install ‐g plugman

28
In case you are behind a proxy firewall and you need to manually configure the proxy settings for
Plugman, you can do it by following the steps listed in the How to configure proxy for Plugman
Setting Proxy for npm, Git and Plugman
How to configure proxy for npm
These are the steps if you want to manually configure the proxy for the “npm” command:
1) Run the command
npm config list
To check that there is any proxy set for npm. Should you need to delete any old proxy information
from npm configuration you can use the two commands:
npm config del proxy
npm config del https‐proxy
2) Run
npm config set proxy <protocol> :://<proxyhost> :<proxyport>
To set the http proxy
3) Run
npm config set https‐proxy <protocol>:://<proxyhost>:<proxyport>
To set the https proxy
4) Run again the
npm config list

29
Command to check the proxy configuration
5) Check that now the proxy information is set correctly

How to configure proxy for Git client
The following shows the procedure for setting proxy for the “git” command:
1) Run the command
git config –list
To check that there is any proxy set for Git. Should you need to delete any old proxy information
from Git configuration you can use the two commands:

30
     git config –global –unset http.proxy
     git config –global –unset https.proxy
2) Run
git config –global http.proxy <protocol>:://<proxyhost>:<proxyport>
3) Run
     git config –global https.proxy <protocol>:://<proxyhost>:<proxyport>
4) Run again the
     git config –list
Command

31

How to configure proxy for Plugman
The following shows the procedure for setting proxy for the “plugman” command:
1) Run the command
plugman config list
To check that there is any proxy set for Plugman. Should you need to delete any old proxy
information from Plugman configuration you can use the two commands:
plugman config del proxy
plugman config del https‐proxy

32
2) Run
plugman config set proxy <protocol>:://<proxyhost>:<proxyport>
3) Run
plugman config set https‐proxy <protocol>:://<proxyhost>:<proxyport>
4) Run again the
plugman config list
Command

33

Until this point, all the prerequisites needed for hat installation have been successfully installed
at this point if you have followed the previous steps.
In this final step, we are going to see the following things:
 Download HAT
 Setup HAT
 Run HAT and test its connectivity with SAP Web IDE
 Deploy your first Kapsel app to local Hybrid App Toolkit

34
Download HAT
Hybrid Application Toolkit can be downloaded free from the SAP Store at this link.
Here we need to register our email id and the other information required by sap and have wait
for the download links to be sent by email and download the product.
1) Once downloaded the package you should have a file named SAP_HAT_local. Right click on it
and Extract All

2) Extract the file directly in the root of your C drive. A subfolder will be automatically created for
you.
3) If you want you can rename this folder to something else, like for example to “hat”
Setup HAT
It is time now to start your Hybrid Application Toolkit installation.
1) Open your HAT folder and double click on the setup.cmd file. It’s the one with Type=Windows
Command Script

35

2) The installation process is launched. The setup script looks for another component, which we
have not yet installed, but that the script automatically installs by itself. This component is
“bower“. It is a sort of tool that allows the script to easily install other missing libraries

36

3) It might happen that you are behind a proxy in your company and you have forgot to configure
it for any of Npm, Git and Plugman tools. No worries! You can specify your proxy settings here
and the HAT setup will manage all the needed configurations for you. The proxy must be entered
in the form <http|https>://<host>:<port> (i.e. http://proxy:8080).
If you are not behind a firewall, this step, of course, will not be required. If you want to manually
configure Bower’s proxy, you can follow the procedure shown in setting of proxy for bower

37
4) After all the required packages have been all successfully installed by bower; the main page of
HAT setup is opened. HAT setup is web based, so it is all managed by some web pages on a
temporary web server automatically created by Node.js. This is how the main page looks like: it
also reminds you to check if you have correctly matched all the basic prerequisites. Since we are
good so far, we just need to click on the Check All button and all the other prerequisites will be
checked by the script, which will also take care of installing all other missing things

5) Since we have already installed some components and configured all the environment
variables, the first page of checks should go forward very smooth

38
6) Again you might get an error like this complaining that you are probably behind a proxy and
you need to configure it. This time is for Gradle: you have here the chance to configure it during
the installation. Just click on the first text box

7) A popup window appears and here you need to enter your proxy settings in the same format
you did previously. Then click on Set

39
8) The values are automatically set in the system
9) Go to the top left corner of the page and click again on the Check All button

10) The setup will restart, but this time you should pass that Gradle configuration test without
any problem. When all the tests on the first page have been successfully completed, a popup
appears to inform you that you are going to be automatically redirected in a few seconds to the
next page. If you are in hurry or tried to wait, you can simply click on Next Step

11) In this second page, at step 3, you are requested to provide the link to your SAP Web IDE
instance (i.e. https://webide‐<your_account>.dispatcher.hanatrial.ondemand.com/). You can

40
enter of course more than one. In particular, here we areusing my SAP Web IDE from the HANA
Trial Landscape. Once you have copied the link in the text box, simply click on save.

12) Here, you can specify the path to the custom Cordova plugins folder. At moment, we do not
want to use any custom plugins so you can press Skip to skip this step

13) In the next step, we are being requested to provide a password for the local keystore, which
is going to be created on your machine in order to host all the passwords required for HAT. Just
enter twice the password you have chosen and click on Generate
14) Click on Yes, if you get the User Access Control popup

41

Note: In the above step, you may need to generate certificate, which is provided by Key tool
Here you may encounter the following error like as follows

Here you need to search whether any keytool.exe is present in any of your drives other
than the one that is present in your jre folder. If it is found anywhere else, please delete it as it is
overriding the key tool requested by the hat tool.
Once after being succeeded with this keytool generation, you are redirected now to page
three. At step 2 you need to provide, some information regarding the Companion app.
Fields are already pre‐filled for you, so you can leave the proposed values and click on save.
15) You are redirected now to page 3. At step 2 you need to provide, some information regarding
the Companion app. Fields are already pre‐filled for you, so you can leave the proposed values
and click on save. The only thing that you have to specify are the custom Cordova plugins that
you want to include in the companion app if any. We do not have any of them in this guide.
16) The Companion app is being built.

42

17) When this process ends we are invited to close the page because setup completed
successfully!

However, we can just skip this entire process, as it is not needed.
Now HAT is installed in your system successfully.
Run HAT and test its connectivity with SAP Web IDE
1. Open your HAT folder and double click on the run.cmd file
2. Enter your keystore password (the one you have previously defined)

43

3. HAT starts to listen on port 9010.

4. This port can be changed, of course, but you will need to edit the config.json file in the
HAT folder and then put the same port number in SAP Web IDE under Tools –> Preferences –>
Hybrid Application Toolkit. In this screen, you can also test HAT connectivity by clicking on the
Test Connection button. You should get the message that the connection is available

44

NOTE: If you are using Firefox, it might happen that the connectivity is not working at the first
attempt: this because of the https protocol on localhost. Therefore, you might get the following
error:

45

What you have to do is just to add the https://localost:9010 site to your browser like the below
Fix HAT connectivity issue with Firefox
1) Open another page on your browser and enter the URL address https://localhost:9010
2) Click on I Understand the Risks –> Add Exception

3) Click on Confirm Security Exception

46

4) You get this message. Do not ask me why it mentions “Chrome” even though you are on
Firefox

47

48
HAT Application ‐ Development
HAT Application – Development
Here we are going to develop simple master detail application that can be deployed to a mobile
as a HAT Application. The following are steps involved in developing an end‐to‐end hybrid
application.
Preliminary steps
1. Check the prerequisites
2. Setup the required destination
3. Enable HAT plugin in SAP Web IDE and check its connectivity
4. Create a new app in the HCPms administration console
5. Create a QR‐Code of a product
6. Create an hybrid application with SAP Web IDE
Check the prerequisites
The following prerequisite has to meet in order to develop hat application
1. SAP Web IDE (Register at SAP HANA Cloud Platform to get the development environment)
2. Hybrid Application Toolkit downloadable from here
3. An HCPms account configurable as described here
4. An Android/iOS device to test the application. To connect an Android device to the PC to test
your applications you need to install the appropriate USB driver. Follow this link for the detailed
steps.

49
Setup the required destination
2) Login to your HANA Trial account
3) Navigate to Destinations –> New Destination

4) Set up a destination named “SHD” in the following way:

5) Save the configuration
Start the HAT Connector
To allow SAP Web IDE to interact with HAT add‐on components on your local machine
over HTTPS protocol, start the HAT Connector

Windows platforms
1) With Windows Explorer on your machine, go to the folder where the HAT tool is installed

50
2) Double click on the run.cmd program

3) At the prompt enter your keystore password (which you defined already during the HAT setup
procedure)
4) The HAT Connector starts listening for requests from SAP Web IDE

Enable HAT plugin in SAP Web IDE and check its connectivity
Login to SAP Web IDE and ensure that HAT plugin is enabled. Verify that the connection is up and
running.
1) Open SAP Web IDE
2) Go to Tools –> Preferences
3) Select Plugins –> Optional Plugins
4) Enable the Hybrid App Toolkit plugin

51

5) Save the configuration
6) Choose the Hybrid Application Toolkit item on the left side
7) Click on Test Connection
8) Ensure that the connection is up and running

52

Create a new app in the HCPms administration console
Login to HCPms and create a new application.
1) Login to https://hcpmsadmin‐
<your_account>.dispatcher.hanatrial.ondemand.com where <your_account> is the account you
received when registering to the HANA Trial Landscape
2) Click on the Applications tile

53

3) Enter the following values and save the settings
Parameter Value
Application ID com.test.products
Version 1.0 (default)
Name Products
Type Hybrid
Description Sales Order Products
Vendor SAP
Enable same‐origin policy Disabled
Ignore case for user name Disabled
Security Configuration None

54

4) Keeping the application selected on the left side click on Configure

5) Select the Backend tab and enter the following values. Leave all the other values as proposed
and click on Save

Parameter Value
Backend URL http://bpts4hana.bpterp.com:8001/sap/opu/odata/sap/Z_BANKAPP_SRV/
Proxy Type Internet

55
Authentication
Type
Basic Authentication
User Name Backend username
Password Backend Password
Maximum
Connections
500
Rewrite Mode None
6) Test the connection by pinging it; you should get a successful result.
Create an hybrid application with SAP Web IDE
We are going to create now the hybrid application that we will use during this exercise.
1) Open SAP Web IDE
2) Choose File –> New –> Project from template
3) Choose SAPUI5 Master Detail Kapsel Application and click on Next
4) Enter a project name (i.e. “Products“) and click on Next
5) Select Service Catalog on the left side, choose the destination “SHD” you have created
previously, in the search bar enter “service name“, select the service name and click on Next

56

6) Eventually, enter the credentials for the “SHD” service
7) Enter the following information and click on Next

Parameter Value
Project Namespace com.test.products
Title Products
OData Collection ProductCollection
Search Field ProductID
Item Title ProductName
Numeric Attribute UnitPrice
Unit Attribute CurrencyCode
Title Product
Additional Attribute 1 ProductDescription
Additional Attribute 2 ProductCategory

57

8) Click on Finish
9) Paste the following code just after the closing of the “contentMiddle” tag and save the file

58
<contentRight>
<Button id="barcodebutton" icon="sap‐icon://bar‐code"
press="onBarcodeScan"></Button>
</contentRight>

10) Open the Master.controller.js file; paste the following code just after the “onInit” function
and save the file
onBarcodeScan: function() {
var that = this;
var code = "";
if (!cordova.plugins.barcodeScanner) {

59
alert("Barcode scanning not supported");
return;
}
cordova.plugins.barcodeScanner.scan(
function(result) {
code = result.text;
that.getView().byId("searchField").setValue(code);
that.onSearch();
},
function(error) {
alert("Scan failed: " + error);
}
);
},},

60

11) Right click on the name of the project and choose Project Settings
12) Click on Device Configuration and set the parameters in the following way
Parameter Value
App Name Products
App ID com.test.products
Description Sales Order Products
Version 1.0.0
Local Build
Options
Release Mode
Platform Android or iOS or both
Kapsel Plugins Logon Manager, App Update, Barcode Scanner
HCPms/SMP HCPms

61
HCPms Host hcpms‐<your_account>.hanatrial.ondemand.com (where <your_account> is
the one you got on the Trial Landscape
NOTE 1: pay attention that the App ID here must match the Application ID you defined at step 4
of the chapter “Create a new app in the HCPms administration console”, otherwise the
application will be not working

NOTE 2: regarding the Platform parameter, you have to choose the platform you are going to
test your app for. If you have a Windows machine, you can only use Android as deployment
platform. If you have a Mac, instead, you can use both platform for testing and running mobile
applications.

62

13) Congratulations! You have created your hybrid application.
We can run the application by three preview modes and they are as follows
 Preview using Cordova Façade in Browser
 Preview using Companion App on the emulator
 Preview using Companion App on the device

63
Preview using Cordova Façade in Browser
The first preview you can get of the new app is by executing it directly in the Web Browser
using a sort of web emulation for the Cordova / Kapsel plugins named Façade. This technology
allows you to use all the native devices of your local machine, as they were part of the mobile
device. You can use for example the webcam of your PC, as it was the camera of your mobile
device.
By right clicking on the project name in SAP Web IDE and accessing to Project Settings, you can
open the Façade configuration where you can change some of the parameters related to this kind
of emulation. You can assign some values to the Accelerometer for example or to the Compass,
you can also configure the emulation for the geo‐location feature.
In this exercise we are just going to use the camera so non‐need to change any of these
parameters.
1) Open SAP Web IDE
2) Go to Tools –> Preferences
3) Select Hybrid Application Toolkit and ensure that the checkbox Cordova Façade Preview is
enabled

64

4) click on save if you made any change
5) Select the index.html file in your project and click on the Run button on the toolbar

65
6) Click on the Barcode Scan button (you may be requested to allow the use of the webcam on
your laptop if you have one, please allow it)

7) Have a sample barcode generated so that we can be able to scan and see the barcode
functionality.
8) As soon the Barcode Scanner plugin identifies the code, this is searched in the search box and
the found product is displayed

66
Preview using Companion App on the emulator
We will see here how to preview the app directly on the Android emulator/iOS Simulator.
1) Open SAP Web IDE
2) Right click on the index.html in your project and choose Run –> Preview on –> (Android
Emulator | iOS Simulator)

3) After some time the Companion App included in the HAT folder, built at the time of the HAT
setup, is automatically pushed to the emulator. You can check the status of the process in SAP
Web IDE by enabling the console from the menu View –> Console. Once the application has been

67
pushed onto your emulator, it starts showing this screen. Choose to disable the passcode and
click on Submit

4) Enter your SCN credentials and Log On

5) Enter your credentials for the SHD system

68

6) Your application starts successfully

7) At this point we cannot go any further with the emulator because it’s not able to use the
camera of our underlying hardware (well, Android emulator can, but it needs to be properly
configured!), so we prefer to use real devices for preview: let’s go to the next chapter, then!

69
Preview using Companion App on the device
In order to preview the app on a real device the steps are pretty the same as for the emulator so
we will not report here the screenshots, but just the description of the steps.
1) Open SAP Web IDE
2) Right click on the index.html in your project and choose Run –> Preview on –> (Android Device
| iOS Device)

3) After some time the Companion App included in the HAT folder, built at the time of the HAT
setup, is automatically pushed to the device. You can check the status of the process in SAP Web
IDE by enabling the console from the menu View –> Console. Once the application has been
pushed onto your device, enter your SCN credentials and hit <ENTER>

70
4) Click on Disable Passcode
5) Click on Submit
6) Enter your credentials for the SHDsystem
7) Your application starts successfully. Since you are now on a real device, you can click on
the Barcode Scan button

8) The camera is invoked and it might be requested to allow the use of the camera on your device
for this app. Please allow it and take a sample barcode in front of the camera: the code is
automatically recognized

71

9) The product related to the code is found in the product list

10) Congratulations! You have successfully previewed the app on your device!
In this step, we are going to see how to run the mobile app we created in the first part of the blog
on a mobile emulator/device. The first thing to do is to use HAT to deploy the app on the local

72
machine and then push the app as stand‐alone on the mobile emulator/device. We will see as
well how to update the app and push it again to all the devices that have installed it. This will be
done through HCPms.
Deploy the app on local HAT
At this moment, the application is still inside SAP Web IDE. What we have seen in the
previous part is that a link to the preview page is sent to the Companion App and this app takes
care to show this preview as it was a stand‐alone application. So far, only the Companion app is
installed on the mobile device.
Now we will see how to deploy the app from SAP Web IDE to your local machine (PC or Mac) so
that you can push the generated .apk (Android) or .ipa (iOS) files to your device.
1) Open SAP Web IDE
2) Right click on the name of your project and choose Deploy –> Deploy to local Hybrid App
Toolkit

73

3) The deployment starts: you can follow its status by the console window
4) At the end of the process click on OK

5) If you look in your user folder you will find a subfolder called SAP Hybrid. Inside of it, there will
be another subfolder with the name of your project containing all the needed files for
deployment of the app on the mobile device

74

6) Congratulations! You have deployed your app on your local HAT!
Note : After deploying the application successfully you should not immediately run in on mobile
, but before that we need to a code in the build.gradle file which is available in this path

C:UsersUsernameSAPHybridappnamehybridplatformsandroid then open build.gradle in
any text editor but preferably notepad++, and add the following code after the source sets
aaptOptions {
    cruncherEnabled = false

75
}
Do not forgot to do this else, we need to deploy the application from the beginning.

Run the app on the emulator
We’ll firstly run the app on the Android emulator/iOS Simulator
1) Open SAP Web IDE
2) Right click on the index.html in your project and choose Run –> Run on –> (Android Emulator
| iOS Simulator)

3) If you are running your app on the Android emulator you may get this further screen. Since we
are just doing a test you can select Test Key and click on OK

76

4) The application, which has been built by the deployment operation in the previous chapter, is
being pushed now to the emulator. You can check the status of the process in SAP Web IDE by
enabling the console from the menu View –> Console. Once the application has been pushed
onto your emulator, enter your SCN credentials and hit <ENTER>

After opening the application on mobile if you get the error like Registration error, because of
enabling the logon manager from Kapsel plugins, Do the following change in your webide
application’s devapp.js file replace the existing one with this following line to
if (that.smpInfo.server && that.smpInfo.server.length > 0) {
var context = {

77
"serverHost": that.smpInfo.server,
"https": data.hybrid.msType === 0 ? "true" : "false",
"serverPort": that.smpInfo.port,

"auth": [{
"type": "saml2.web.post"
}]
};

The code in the bold is the one to be added, Once this is done follow the previous process of
deployment and testing in in mobile.

5) We don’t need a passcode for this exercise, so click on Disable Passcode

78

6) Click on Submit


79

8) You can also click on one of the products to see its details

9) At this point we cannot go any further with the emulator because it’s not able to use the
camera of our underlying hardware (well, Android emulator can but it needs to be properly
configured!), so we prefer to use real devices for preview: let’s go to the next chapter, then!

80
Run the app on the device
In order to run the app on a real device the steps are pretty the same as for the emulator so we
will not report here all the screenshots again, but just the description of the steps.
1) Open SAP Web IDE
2) Right click on the index.html in your project and choose Run –> Run on –> (Android device |
iOS device)
3) If you are running your app on the Android emulator you might get a further screen where you
have to choose between using a Test Key or a Custom Key. Since we are just doing a test you can
select Test Key and click on OK
4) The application, which has been built by the deployment operation in the previous chapter, is
being pushed to the emulator. You can check the status of the process in SAP Web IDE by enabling
the console from the menu View –> Console. Once the application has been pushed onto your
emulator, enter your SCN credentials and hit <ENTER>
5) Click on Disable Passcode
6) Click on Submit
8) You can also click on one of the products to see its details
9) Click on the Barcode Scanner button
10) The camera is invoked: you might be requested to allow the use of the camera on your device
for this app. Please allow it and put the barcode you printed/downloaded in front of the camera:
the barcode is automatically recognised

81

11) The product related to this code is found in the product list

12) Congratulations! You have successfully installed and executed the app on your device!

Hat app document

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Hat app document

Similar to Hat app document (20)

More from Ashwin Ananthapadmanabhan

More from Ashwin Ananthapadmanabhan (8)

Recently uploaded

Recently uploaded (20)

Hat app document