Building Block Configuration Guide
SAP Fiori apps rapid-deployment solution
Document Version: 1.0 – 2015-08-06
English
CUSTOMER
Setup Development Environment and Verification Entities
(MD4)
Typographic Conventions
Type Style
Description
Example
Words or characters quoted from the screen. These include field names, screen titles, pushbuttons
labels, menu names, menu paths, and menu options.
Textual cross-references to other documents.
2
Example
Emphasized words or expressions.
EXAMPLE
Technical names of system objects. These include report names, program names, transaction codes,
table names, and key concepts of a programming language when they are surrounded by body text,
for example, SELECT and INCLUDE.
Example
Output on the screen. This includes file and directory names and their paths, messages, names of
variables and parameters, source text, and names of installation, upgrade and database tools.
Example
Exact user entry. These are words or characters that you enter in the system exactly as they appear in
the documentation.
<Example>
Variable user entry. Angle brackets indicate that you replace these words and characters with
appropriate entries to make entries in the system.
EXAMPLE
Keys on the keyboard, for example, F 2 or E N T E R .
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Typographic Conventions
Document History
Revision
Date
Change
0
2015-06-08
First version.
)
Setup Development Environment and Verification Entities
(MD4
Document History
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
3
Table of Contents
1 Purpose 6
2 Configuring the SAP Mobile SDK
2.1.1
Installing SAP Mobile SDK
2.1.2
Applying Patches for SAP Mobile SDK
2.1.3
Installing Agentry Toolkit (Only for Agentry Apps)
2.1.3.1
Installing Agentry Editor in Eclipse
2.1.3.2
Installing Agentry Test Environment
7
7
7
8
8
8
3 OData Service Creation
3.1
Creating Data for the Flight Data Model in Backend
3.2
Creating Service Document with Service Builder (Optional)
3.2.1
Creating a New Project
3.2.2
Defining Entity Type by Data Model Importer
3.2.3
Defining Entity Set
3.2.4
Implementing Service for the Entity Set
3.2.5
Generating Model Provider Class/Data Provider Class and Other Runtime Objects
3.3
Enabling Service in the SAP NetWeaver Gateway
3.3.1
Activating Service
9
9
9
9
10
11
11
12
12
12
4 Data Integration Using Integration Gateway
4.1
Installing Toolkit for Integration Gateway
4.2
Using Toolkit for Integration Gateway
4.2.1
Preparing Demo Data
4.2.2
Create an OData Model by Integration Toolkit
4.2.3
Define Data Source
4.2.4
Publishing the OData Service to the SMP Server
4.2.5
Enable SMP 3.0 Server for Integration Gateway Connection
4.2.6
Creating Security Profile for the OData Service
4.2.7
Using Gateway Management Cockpit
14
14
15
15
16
18
19
21
23
24
5 Client Development Environment Setup
5.1
Setting up IOS Development Environment
5.1.1
Installing latest Xcode
5.1.2
Enrolling in the IOS Developer Program
5.2
Setting up Android Development Environment
5.2.1
Installing Android SDK
5.2.2
Installing Android Development Tools Plugin for Eclipse
5.2.3
Creating a New Android Virtual Device
5.3
Setting up WebIDE plus Communicator with Local Build Environment
5.3.1
Preparing the Cordova Development Environment
5.3.1.1
Preparing Windows for Android Development
5.3.1.2
Preparing Macintosh OS X for IOS and Android Development
5.3.2
Running the Hybrid App Toolkit Installer
5.3.2.1
Running the Hybrid App Toolkit Installer for Windows
5.3.2.2
Running the Hybrid App Toolkit Installer for Macintosh
5.3.3
Enabling the Web IDE Plugin for Hybrid App Toolkit
5.3.4
Starting up Hybrid App Toolkit Connector
5.3.5
Strengthening Connection Security (Optional)
27
27
27
27
27
27
27
28
28
29
30
35
38
38
41
41
41
43
4
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Table of Contents
5.3.6
5.3.7
)
Creating a Hybrid Project
Building and Packaging Apps for Installation
Setup Development Environment and Verification Entities
(MD4
Table of Contents
43
45
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
5
1 Purpose
The purpose of this document is to describe the general configuration steps required to setup the underlying reusable entities
like data model, provider class, services etc., and the specific development environment used to do so. This document also
describes client development environment setup on various platforms to support design time scenarios like verification apps.
It mainly focused on major archetypes regarding the provisioning: Native OData, Hybrid and Agentry, and focused on four
client platforms including iOS, Android, and Windows 8.
6
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Purpose
2 Configuring the SAP Mobile SDK
2.1.1 Installing SAP Mobile SDK
Use
You should install the SAP Mobile SDK on developer’s machine but not the server.
We will not use MBO toolkit in this guide, so please ignore any information regarding MBO toolkit.
You can download the SAP Mobile SDK installation files at http://support.sap.com/swdc  Support Packages and
Patches  Search for Support Packages and Patches  SAP MOBILE PLATFORM SDK 3.0, choose
SP07 and the latest corresponding PL for your OS.
Procedure
1.
In the installation file folder, run the setupAMD64.exe as Administrator.
2.
In the pop-up window, confirm the SAP Mobile SDK version, and then choose Next.
3.
Read End-user License Agreement and then choose Next.
4.
On the next screen, browse for the SAP Mobile SDK directory, below we’ll refer it as %SDK_HOME%, and then
choose Next.
5.
Select installation Type, and choose Next
6.
On the next screen, choose the SDK components to install, and then choose Next.
7.
On the next screen, confirm the information displayed, and then choose Install.
Result
After installation, you should see several components installed in the directory like C:\SAP\MobileSDK3, for example
AgentryToolkit, KapselSDK, NativeSDK and SMSToolkit.
2.1.2 Applying Patches for SAP Mobile SDK
Use
You should always apply latest patch to adopt the latest development tools and SDKs. Since SAP Mobile SDK contain many
components and some rely on 3rd party products, so it usually has a faster iteration than SAP Mobile Platform Server, so
sometimes the latest PL number is bigger than PL of SMP Server.
If you want to install additional SDK components, you should run the SP installer again, but not the PL installer.
Procedure
)
Setup Development Environment and Verification Entities
(MD4
Configuring the SAP Mobile SDK
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
7
In the installation file folder, run the setupAMD64.exe as Administrator.
1.
On the pop-up window, confirm the SAP Mobile SDK PL version, and then choose Next.
2.
On the next screen, confirm the SAP Mobile SDK directory, and then choose Next.
3.
On the next screen, confirm the SDK components to upgrade, and then choose Next.
4.
On the next screen, confirm the information displayed, and then choose Upgrade.
2.1.3 Installing Agentry Toolkit (Only for Agentry Apps)
After installing SAP Mobile SDK, the Agentry Toolkit exists in the SAP Mobile SDK folder, but that’s just Agentry Toolkit
installation files, so you still need to install them to use.
2.1.3.1 Installing Agentry Editor in Eclipse
1.
2.
Download latest Eclipse from http://www.eclipse.org/downloads/.
Install the Java Runtime Environment.
o
If you install it under the Eclipse home directory, for example, C:\eclipse\jre, you do not have to modify any
environmental variables.
o
If you install it to the default location, be sure to add the paths for the jre\bin and jre\libdirectories to the Path
environment variable in Windows before attempting to start Eclipse.
3.
Run Eclipse, choose menu Help  Install New Software….
4.
On the Install dialog box, choose Add….
5.
On the Add Repository dialog box, choose Archive…, choose
%SDK_HOME%\AgentryToolkit\AgentryEditors\Agentry_XXX_EditorPlugin_XXX.zip
6.
On the Add Repository dialog box, input Name as Agentry, and then choose OK.
7.
On the Install dialog box, choose the Agentry Editor Plugin, and then choose Next.
8.
On the Install Details screen, choose Finish.
9.
Once the plugin is installed, restart Eclipse as prompted, and check that Perspectives Agentry (Diagram) and
Agentry (Properties) appear.
2.1.3.2 Installing Agentry Test Environment
1.
Run
%SDK_HOME%\AgentryToolkit\AgentryTestEnvironment\Agentry_XXX_Test_Environment.exe as
Administrator.
2.
On the pop up window, choose Next.
3.
On the License Agreement screen, choose Yes.
4.
On the Choose Install Location screen, browse for the Destination Folder, and then choose Next.
5.
On the next screen, choose Install.
8
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Configuring the SAP Mobile SDK
3 OData Service Creation
The following section describes the usage of the development environment to create and maintain entities like object model,
provider class, service, or use a fast-to-run tool called service builder to do this without coding. Such chapters are optional, if
the user is already familiar with them, or just want to setup a simple verification model with pre-defined entities.
The mandatory chapters describe the necessary steps to activate an existing service based on SFLIGHT model, fill in test data,
test the connection, as well as HTTP proxy connection creation to support REST API consumption for pure HTTP clients.
Some steps may require you to assign a package or a transport request; simply create one according to you real usage. If the
transport request is for testing purposes only, you can assign objects to package $TMP as local objects.
3.1 Creating Data for the Flight Data Model in Backend
The pre-defined SFLIGHT data tables are used in the verification apps in the package. Test data need to be created in advance
in such tables.
1.
In the Backend SAP Business Suite System, access the transaction using the following navigation path:
Transaction Code
2.
SE38
On the ABAP Editor: Initial Screen, enter SAPBC_DATA_GENERATOR for the Program and then
choose Execute (F8).
3.
On the Create Data for Flight Data Model screen, choose Execute (F8). If a dialog box is displayed,
choose Yes.
4.
After waiting a while, data records are then inserted into the SPFLI, SFLIGHT, and SBOOK tables.
3.2 Creating Service Document with Service Builder (Optional)
The purpose of this chapter is to introduce the Service Builder as an alternative approach for OData services creation, which
greatly accelerates the OData service development process. Developer can create service with it by importing DDIC
structures/EDMX model, BAPI, remote RFC etc.
We’ll follow the procedure below to create a SFLIGHT service, which is focusing on service creation based on BAPIs.
Note
The SAP Gateway service builder exists from SAP Netweaver Gateway Release 2.0 Support Package 4/5. You should
run service builder on the SAP server with component IW_BEP installed.
3.2.1 Creating a New Project
1.
Log in the server where the component IW_BEP is installed. (In our package, IW_BEP is installed on the SAP backend
business suite system)
2.
Go to transaction SEGW
3.
Choose the Create Project button to create a new project.
)
Setup Development Environment and Verification Entities
(MD4
OData Service Creation
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
9
4.
On the Create Project dialog box, enter following values:
Field Name
User Action and Values
Comment
Project
<Project Name>
e.g. Z_SEGW_SFLIGHT
Description
<Description>
Project Type
Service with SAP Annotations
Generation Strategy
Standard
Package
<Package>
e.g. $TMP
5.
Choose Continue (Enter).
6.
On the SAP NetWeaver Gateway Service Builder screen, choose Save (Crtl+S).
3.2.2 Defining Entity Type by Data Model Importer
1.
On the SAP NetWeaver Gateway Service Builder screen, navigate to the <Project Name>  Data
Model node.
2.
Right click on the node, and then choose Import  RFC/BOR Interface from the context menu.
3.
A wizard is opened for the data model definition.
4.
On the Wizard Step 1 of 3: Create Entity Type from Data Source screen, enter following values:
Field Name
User Action and Values
Comment
Entity Type Name
<Entity Type Name>
e.g. Flight
Target System
<BOR/RFC target system>
e.g. Local or RFC
destination to SAP Back
end system
Choose Local
Data Source Attributes/
Business Object Repository
Type
Data Source Attributes/
Name
Choose F4 to select the proper BOR method
from the list.
Select Flight.GetList
Create Default Entity
Check
Set
5.
Choose Next.
6.
On the Wizard Step 2 of 3: Create Entity Type from Data Source screen, navigate to the
GetListFlightList node. Select all its child nodes to define the parameters of the entity type.
7.
Choose Next.
8.
(Optional)On the Wizard Step 3 of 3: Create Entity Type from Data Source screen, you can modify the
attributes of the entity type parameters.
10
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
OData Service Creation
9.
Keep the default value and choose Finish.
Note
There may be error messages, because the project is incomplete, just ignore.
3.2.3 Defining Entity Set
1.
On the SAP NetWeaver Gateway Service Builder screen, navigate to the <Project Name>  Data
Model  Entity Set node.
2.
Right click on the node, and then choose Detail from the context menu.
3.
On the Entity Sets pane, ensure the FlightlistSet is there, and select the Subscribable property to allow service
consumers to subscribe to this entity set in order to be automatically notified of change.
4.
Choose Save (Ctrl+S).
3.2.4 Implementing Service for the Entity Set
1.
On the SAP NetWeaver Gateway Service Builder screen, navigate to the <Project Name(e.g.
Z_SEGW_SFLIGHT)>  Service Implementation  <Entity Set(e.g. Flights)>  GetEntitySet
(Query) node.
2.
To map the Data Source to the GetEntitySet operation, right click on the node, and then choose Map to Data
Source from the context menu.
3.
On the Map to Data Source dialog box, enter following value:
Field Name
User Action and Values
Comment
Target System
<BOR/RFC target system>
e.g. Local or RFC
destination to SAP Back
end system
Choose Local
Data Source Attributes/
Business Object Repository
Type
Data Source Attributes/
Name
Choose F4 to select the proper BOR method
from the list.
BOR/RFC corresponding to
the getEntitySet Query
Flight.GetList
4.
On the Mapping of Operation GetEntitySet (Query) for Flights screen, specify the mappings, you can also
choose Propose Mapping button to automatically map.
5.
Choose Save (Ctrl+S).
)
Setup Development Environment and Verification Entities
(MD4
OData Service Creation
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
11
3.2.5 Generating Model Provider Class/Data Provider Class and Other
Runtime Objects
1.
On the SAP NetWeaver Gateway Service Builder screen, navigate to the <Project Name> node.
2.
Right click on the node, and then choose Generate Runtime from the context menu.
3.
On the Model and Service Definition dialog box, a list of classes is shown and to be generated. You can keep
the default name or change them.
Note
Take a copy of the name of Technical Service Name. In the next chapter, you are able to enable the service by this
name.
4.
Choose Continue (Enter).
5.
On the Create Object Directory Entry dialog box, enter a value (e.g. $TMP) to the Package filed, and then
choose Save (Enter).
6.
Now the service classes are generated. You can check or refine them in the transaction SE24.
7.
Redefine abstract method CHECK_SUBSCRIPTION_AUTHORITY in data provider class to implement checks for
subscription authorization.
1.
Go the transaction SE24.
2.
Input the data provider class name (generated in the step 3, e.g. “ZCL_Z_SEGW_SFLIGHT_DPC_EXT”).
3.
Choose Change.
4.
Locate and choose the method CHECK_SUBSCRIPTION_AUTHORITY from the Methods tab.
5.
Choose the Redefine button.
6.
(Optional) Implement your authorization checks if specified authorization check is needed.
7.
Choose Save.
8.
Choose Activate.
3.3 Enabling Service in the SAP NetWeaver Gateway
After the necessary entities and service document are created, the service need to be activated.
In the following steps, we are going to activate the pre-defined Sflight service document.
If you’re going to activate other service document, just replace the pre-defined Sflight Servie name with specific service name,
for example the one you created in previous chapter.
3.3.1 Activating Service
1.
Login into SAP NetWeaver Gateway system.
2.
Access the transaction using one of the following navigation options:
12
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
OData Service Creation
Transaction Code
/IWFND/MAINT_SERVICE
IMG Menu
SAP NetWeaver  Gateway  OData Channel Development
with IW_BEP  Registration  Activate and Maintain
Services
3.
On the Activate and Maintain Services screen, choose Add Service.
4.
On the Add Service screen, choose <System Alias of ERP backend> as the System Alias, it was also
specified in the MP3 configuration guide, and then choose Enter. A list of services is then displayed.
5.
Locate and choose the line for the pre-defined Sflight service, where its External Service Name equals
RMTSAMPLEFLIGHT_2.
6.
In the Add Service dialog box, specify Package, choose ICF Node as Standard Mode, and then choose
Continue (Enter). A message is displayed at the bottom of the screen informing you that Service ‘<Service
Name>’ successfully created. Choose the Back pushbutton (F3).
7.
On the Activate and maintain service screen, all services are listed on the Service Catalog pane. Locate and
choose the service you just added.
8.
Choose “Call Browser” pushbutton. When prompt for username and password, enter your user information in the
Gateway system, and then you should see the service document in browser.
)
Setup Development Environment and Verification Entities
(MD4
OData Service Creation
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
13
4 Data Integration Using Integration Gateway
Integration Gateway is an OSGi service that runs within SAP Mobile Platform Server, to provide the ability to run mobile
applications that connect to various SAP and non-SAP (OData and non-OData) data sources.
Integration Gateway allows you to connect to different back ends, fetch data at runtime, and expose that data as an OData
service using:
1. Java Database Connectivity (JDBC)
2. Java Persistence API (JPA)
3. Simple Object Access Protocol (SOAP)
4. OData Channel (ODC)
4.1 Installing Toolkit for Integration Gateway
The Toolkit for Integration Gateway is a Gateway Productivity Accelerator plugin for Eclipse. Using the Toolkit for Integration
Gateway, you can enable data models as OData services by defining an OData model to match the table properties, then
binding the OData model to a datasource (e.g., SOAP, JPA, JDBC, or ODC). The resulting OData services can then be
consumed by SAP Mobile Platform clients.
1.
Download and install eclipse Kepler Java EE Version according to your operation system:
http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/keplersr2 .
Note
Toolkit for Integration Gateway only supports Eclipse Kepler.
2.
Start eclipse and choose Help  Install New Software.
3.
Input address: http://tools.hana.ondemand.com/kepler
4.
Select component SAP Mobile Platform Tools which contains API toolkit for SAP Mobile Platform
and OData Modeler.
5.
14
After finished the steps, restart the eclipse.
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
4.2 Using Toolkit for Integration Gateway
4.2.1 Preparing Demo Data
In your database run below SQL to prepare demo data, different database may have different SQL, please
CREATE TABLE CUSTOMER (
ID
INTEGER IDENTITY,
FIRST_NAME
VARCHAR(30) NOT NULL,
LAST_NAME
VARCHAR(30) NOT NULL,
ADDRESS VARCHAR(60) NULL,
CITY
VARCHAR(30) NULL,
COUNTRY
CHAR(2) NULL,
BIRTH_DATE DATE NULL
)
INSERT INTO CUSTOMER (FIRST_NAME, LAST_NAME, ADDRESS, CITY, COUNTRY, BIRTH_DATE) VALUES ('Marvin',
'Hoffmann', 'Hasso-Plattner-Ring 7', 'Walldorf', 'DE', '1920-03-02')
INSERT INTO CUSTOMER (FIRST_NAME, LAST_NAME, ADDRESS, CITY, COUNTRY, BIRTH_DATE) VALUES ('Ting',
'Hoffmann', 'Hasso-Plattner-Ring 7', 'Walldorf', 'DE', '1928-05-01')
INSERT INTO CUSTOMER (FIRST_NAME, LAST_NAME, ADDRESS, CITY, COUNTRY, BIRTH_DATE) VALUES ('Otto', 'Wigeel',
'Romstr. 13', 'Berlin', 'DE', '1967-03-02');
INSERT INTO CUSTOMER (FIRST_NAME, LAST_NAME, ADDRESS, CITY, COUNTRY, BIRTH_DATE) VALUES ('John', 'Miller',
'Carpenter Street 103', 'New York', 'US', '1988-03-02')
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
15
4.2.2 Create an OData Model by Integration Toolkit
1.
In Eclipse, right click in Project Explorer panel, choose New  Other.
2.
Select SAP Mobile Platform  SAP Mobile Platform OData Implementation Project.
3.
In the New SAP Mobile Platform OData Implementation Project dialog box, first, input Project
name, and choose the correct SMP server version, for example 3.0 SP7. The Integration Gateway Toolkit will create a
project.
4.
Choose Next, the model content will be defined in this step. Select the content type from the list in the bottom left
according to your model requirement. If you want to create the model manually, choose Blank OData Model. You
will see an OData model has been created under the project folder.
16
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
5.
Open the Model (*.odata file) and click in the Palette under Objects on "Entity Type" to create a new entity type. Set the
object name, the entity set name and the properties according to your database table structure.
Note
The entity set name must be same with the table name, properties name must be same with column name.
6.
o
ENTITY_SETS = CUSTOMER
o
PROPERTIES = ID (Key)
o
PROPERTIES = FIRST_NAME
o
PROPERTIES = LAST_NAME
o
PROPERTIES = CITY
o
PROPERTIES = COUNTRY
PROPERTIES = ADDRESS
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
17
If the backend connection should be realized via JDBC, the Integration Gateway component of SMP 3.0 SP0 requires
that the entity set is named exactly like the database table and that the properties are exactly named like the
columns in the table. There is no automatic mapping editor available in current version.
7.
Data model is finished and ready to be used for SMP in the next step.
4.2.3 Define Data Source
In Eclipse, right click on <Project>  src.main.resources.mode  <ODataModel>.odatasrv, choose Select Data Source
from the context menu.
1.
On the Select Data Source dialog box, choose the Entity Set, and the choose Select Data Source, here we’ll use
JDBC.
2.
18
Choose Finish.
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
4.2.4 Publishing the OData Service to the SMP Server
1.
In Eclipse, choose menu Window  Preferences.
2.
In the Preferences dialog box, choose SAP Mobile Platform Tools  Server. Input your SMP server information.
Test the connection.
3.
Right click on the project and select Generate and Deploy Integration Content.
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
19
4.
Specify the corresponding information (or leave the default) according to the table below.
Field Name
Entry Value
Comment
Service Name
Specify a name as you want,
e.g., intgwtest
The service name can be used to access the
service later.
Service Namespace
Specify a namespace, e.g., sap
The Service Namespace defines also the
security profile which is used to control
access to this service.
Service Version
Specify a version number, e.g.,
1
Version number of the service
Make sure that the JDBC driver is already known to SMP server before deploying the OData service via the Toolkit
for Integration Gateway.
20
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
5.
If everything is ok you should get the information message: "Deployment has been completed for <your project
name>".
4.2.5 Enable SMP 3.0 Server for Integration Gateway Connection
As mentioned before, SMP 3.0 is based on OSGi. When you try to connection to the SMP server, you will need to enable the
connection from these four connection types (JDBC, JAP, SOAP, and ODC).
Take JDBC as example, it is possible to deploy the JDBC driver as OSGi enabled jar package on SMP runtime. You need to
follow the steps below to enable the JDBC connection:
Download the jConnect JDBC driver according to your database type at http://www.sybase.com/products/allproductsaz/softwaredeveloperkit/jconnect, e.g. for Sybase ASE, download the driver file jconn4.jar.

If the JDBC driver JAR is already an OSGi Bundle JAR, just put the JAR file into <SMPHOME>\server\pickup, for example
C:\SAP\MobilePlatform3\server\pickup.
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
21

If the JDBC driver JAR is not an OSGi Bundle JAR, please follow below steps.
1.
Open EclipseNewOtherPlug-in DevelopmentPlug-in from Existing JAR Archivesc
2.
Choose Add External and browse to jar file
3.
Provide some project name, and then
o
Make sure you check Target Platform as Equinox
o
Uncheck unzip the JAR archives into the project
4.
Choose Finish to create a new project.
5.
Open the context menu of the project just created, choose ExportPlug-in DevelopmentDeployable
plug-ins and fragments
22
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
6.
Define some location to store OSGi enabled jar file
7.
Choose Finish.
8.
Put the JAR file in step 7 into <SMPHOME>\server\pickup, for example
C:\SAP\MobilePlatform3\server\pickup

To verify if JAR file has been deployed successfully, open <SMPHOME>\server\pickup\.state folder and see the 'OK'
message.
4.2.6 Creating Security Profile for the OData Service
Because we deployed our OData service in a specific namespace in last chapter, e.g., called sap, we have to create a security
profile which is matching this namespace.
1.
Open the Administration Management Cockpit by calling URL https://<SMP server hostname> :< https
port>/Admin/.
2.
Switch to the SETTINGS tab and click under SECURITY PROFILES the button New.
3.
Type a name which has to match the namespace that was chosen when deploying the OData service, e.g., sap.
4.
Click on the small plus/add button to add an authentication provider. Choose an authentication provider for the service
according to your system environment and security requirement.
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
23
5.
Save the change.
4.2.7 Using Gateway Management Cockpit
There is a Gateway Management Cockpit available, which is different from the Admin Management Cockpit. You can manage
the deployed OData services here and also the destinations. Destinations are the backend connections which serve as base for
the OData services.
1.
Access the Gateway Management Cockpit by calling https://<SMPServer>:8083/ gateway/cockpit/
2.
Choose the DESTINATIONS tab and then choose Create a New Destination.
3.
Choose the following information for a connection to the data source. You might have to adapt the destination URL,
username or password dependent on your environment.
24
Field Name
Entry Value
Destination Name
Destination name to connect to the database, e.g., Intgwtest
Destination Type
Select a Destination type, e.g., DATABASE
Destination URL
Destination connection URL, e.g., JDBC connection as
jdbc:sybase:Tds:<DBServerhost>:<port>/<databaseName>
Destination Driver
Destination connection driver, e.g., for Sybase JDBC connection,
com.sybase.jdbc4.jdbc.SybDriver
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
Field Name
Entry Value
You should download and deploy the corresponding
connection driver according to your database type.
Authentication Type
Connection authentication type, e.g., Basic Authentication
User Name
A database user, e.g. gomobile.
Password
The database user password, e.g. secret.
4.
Switch to SERVICES tab. You should see the OData Service which you have deployed.
5.
Click on the service name. In the coming window click on Add Destination and choose the newly created destination
in last steps (e.g., Intgwtest).
6.
Save and Close the window. Activate the service.
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
25
7. Choose the Open Service Document link in the line of your service, you can now access the Service Document, navigate in
web browser to ensure it is correct.
26
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Data Integration Using Integration Gateway
5 Client Development Environment Setup
5.1 Setting up IOS Development Environment
5.1.1 Installing latest Xcode
Xcode is Apple’s integrated development environment for creating apps for Mac and iOS. It includes Xcode IDE, iOS simulator,
and the latest Mac OS X and iOS SDKs. You must install Xcode on Mac OS X. To do so, you can download Xcode at
https://developer.apple.com/xcode/index.php.
5.1.2 Enrolling in the IOS Developer Program
To test and debug your code on devices and distribute your apps in the App Store, you need to enroll in the iOS Developer
Program at http://developer.apple.com/programs/ios/.
For a company or organization, iOS Developer Enterprise Program allows you to gain access to resources that will help you
develop proprietary, in-house iOS apps that you can distribute to employees or members of your organization. You can enroll
in this program at http://developer.apple.com/programs/ios/enterprise/.
5.2 Setting up Android Development Environment
5.2.1 Installing Android SDK
1.
Download and install the Android SDK from http://dl.google.com/android/android-sdk_r21-windows.zip.
2.
Start SDK Manager in the Android SDK folder. Since Android 2.2, Android 2.3.2, Android 3.0 and Android 4.1.2
are all supported by SAP Mobile SDK, on the Android SDK Manager screen, expand, and select Tools and SDK
Platform under these entries, and then choose Install XXX packages….
3.
In the Choose Packages to Install dialog box, select Accept and choose Install. The SDKs/Tools will then be
downloaded and installed.
5.2.2 Installing Android Development Tools Plugin for Eclipse
1.
Start the SAP Mobile SDK, choose Help  Install New Software… from the menu, and then choose Add.
2.
On the Add Repository dialog box, enter ADT Plugin as the Name and enter https://dlssl.google.com/android/eclipse/ as the location and then choose OK.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
27
Note
If the network is behind a proxy, please open Windows  Preferences, enter proxy in the upper-left text field
and choose Network Connections to configure the proxy.
3.
Select Developer Tools and all of its sub nodes, and then choose Next.
4.
Confirm the installation details and choose Finish to install the ADT Plugin.
5.
Restart the SAP Mobile SDK after the ADT Plugin is installed and choose Window  Preferences from the menu.
6.
On the Preferences dialog box, choose Android in left-hand tree, choose Browse… to browse, enter the SDK
Location and choose OK to apply the change.
7.
Restart the SAP Mobile SDK. You can now see the menus Window  Android SDK Manager and Windows
 AVD Manager, which means that you can now launch Android SDK in the SAP Mobile SDK.
5.2.3 Creating a New Android Virtual Device
1.
Start AVD Manager in the Android SDK folder. On the Android Virtual Device Manager screen,
choose New….
2.
In the Create new Android Virtual Device (AVD) dialog box, enter a Name and select a target android
version, then choose Create AVD.
3.
Choose Start. The Android Emulator will be started.
5.3 Setting up WebIDE plus Communicator with Local Build Environment
SAP Web IDE Hybrid App Toolkit enables developers to develop hybrid mobile apps in SAP Web IDE. The apps can be
previewed and deployed to mobile emulator and device in local development environment via Hybrid App Toolkit Connector.
28
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
5.3.1 Preparing the Cordova Development Environment
Procedure
1.
Download and install v0.10.3x of Node.js from http://nodejs.org/dist/
Note
Node.js v0.11.xx or v0.12.xx is not supported, please install v0.10.3x.
2.
3.
Run the installer and follow the prompts in the Install wizard.
o
On completion, verify that the Node.js folder is in your system environment path.
o
Open a command prompt, and enter npm to verify the Node.js package manager is available. After you issue this
command, the terminal window displays the help file for npm, if you do not see this, and see an error message for
example, then the node installation did not complete successfully. You may need to reboot the system to see the
changes or you may need to reinstall Node.js.
If you face this error Error: ENOENT, stat 'C:\Users\<username>\AppData\Roaming\npm'
Run this command will fix the error(if the network is behind a proxy, just ignore the proxy error, next step will mention
how to set proxy for npm):
npm install npm –g
4.
If you will be operating this software in an environment where network access is controlled by a proxy server, you may
need to add proxy settings for npm. Ask your administrator if you are not sure. Therefore, configure the HTTP and HTTPS
proxy for Node.js:
npm config set proxy <proxy server>:<port>
npm config set https-proxy <proxy server>:<port>
For example, proxy server is http://proxy.abc.corp:8080, then run:
npm config set proxy http://proxy.abc.corp:8080
npm config set https-proxy http://proxy.abc.corp:8080
5.
Get your WEB IDE URL, this URL will be used in the following steps.
1.
If you do not have SAP HANA Cloud Platform account, go to https://account.hanatrial.ondemand.com/, register an
account.
2.
Logon SAP HANA Cloud Platform Cockpit, choose Subscriptions on the left panel.
3.
If there is not a webide Subscriptions, choose New Subscriptions.
4.
Select the sapwebide application, enter a name for the subscription (you can leave the proposed “webide” name)
and choose Save.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
29
5.
Choose webide.
6.
The Web IDE URL will be displayed in the new page, write down this URL.
5.3.1.1 Preparing Windows for Android Development
With Windows, you can only build Android apps with Hybrid App Toolkit.
30
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
Procedure
1.
Use npm to install Cordova version 3.6.3-0.2.13.
2.
If your workstation is connected to the Web via a proxy server, create a file named C:\Users\<your
npm install -g cordova@3.6.3-0.2.13
user>\.plugman\config and add the same proxy settings you assigned using the npm command.
proxy = <proxyhost>:<port>
https-proxy = <proxyhost>:<port>
For example, proxy server is http://proxy.abc.corp:8080, then enter following in config file:
proxy = http://proxy.abc.corp:8080
https-proxy = http://proxy.abc.corp:8080
3.
Set up the command line Git client.
Download and install the Git client, and ensure it can be used from a Windows command prompt. SAP recommends:
http://msysgit.github.io/
If you are in an environment where network access is controlled by a proxy server, configure the Git client to use the same
proxy configured in previous steps:
git config --global http.proxy <proxyserver>:<port>
git config --global https.proxy <proxyserver>:<port>
For example, proxy server is http://proxy.abc.corp:8080, then ruun:
git config --global http.proxy http://proxy.abc.corp:8080
git config --global https.proxy http://proxy.abc.corp:8080
4.
(Optional) If you will be leveraging the capabilities of the SMP Hybrid SDK (Kapsel) with Hybrid App Toolkit (see
http://help.sap.com/smp305sdk?current=smp305sdk) then create an environment variable called KAPSEL_HOME and set
the location to the folder that contains the Kapsel plugins.
For example, C:\SAP\MobileSDK3\KapselSDK.
5.
(Optional) If you are performing Kapsel development, install the Kapsel CLI as an administrator:
npm install -g C:\SAP\MobileSDK3\KapselSDK\cli
6.
Restart your command line (Cmd.exe) to ensure the latest changes are used.
7.
Install required Android tools:
Android Tooling Guidelines
Steps
Java Development Kit
(JDK)
1.
Download and install the latest JDK from
http://www.oracle.com/technetwork/java/javase/downloads/index.h
tml.
2.
Follow the JDK installer.
3.
Set the JAVA_HOME system environment variable to the location
where the JDK is installed, for example, C:\Program
Files\Java\jdk1.8.0_31.
4.
Add <%JAVA_HOME%\bin> to the Windows path system
environment variable.
Note
The Android development
tools require that you
install the entire Java SDK.
Installing just the Java
Runtime Environment is
insufficient.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
31
Android Tooling Guidelines
Steps
Apache Ant 1.8 or later
1.
Download the package from http://ant.apache.org/.
2.
Unzip the package to your disk, and follow the instructions in the
INSTALL file.
3.
Add the unzipped Ant bin directory path to your Windows PATH
environment.
4.
Ensure that the ANT_HOME system environment variable has been
set to the ANT extraction location.
1.
Download the installation package from
http://developer.android.com/sdk/index.html#Other.
2.
Configure settings for your proxy, if required.
3.
In the SDK Manager application, install the SDK Tools, SDK
Platform-tools, SDK Build-tools and Android 4.4.2(API 19)
Android SDK tools
4.
5.
Set the ANDROID_HOME system environment variable to the
location of SDK.
6.
Add <%ANDROID_HOME%\tools> and
<%ANDROID_HOME%\platform-tools> to your path.
7.
Launch the Android Virtual Device Manager (AVD) and create an
Android virtual device to be used as your emulated device.
You can create any type of device you like, for example:
32
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
Android Tooling Guidelines
Steps
8.
Run the emulated device.
9.
Ensure the mobile browser can access the internet. If not, check the
proxy settings and change them if needed: choose Android Settings
 Wireless & Networks  More  Mobile networks
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
33
Android Tooling Guidelines
Steps
 Access Point Names Open existing APNs
10. Input the "proxy" and "port".
11. Choose Save.
34
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
Android Tooling Guidelines
Steps
5.3.1.2 Preparing Macintosh OS X for IOS and Android Development
Use Macintosh OS X machines to develop both iOS and Android applications.
Procedure
1. Make sure bower is installed, if not please run:
sudo npm install –g bower
2. Use npm to install Cordova version 3.6.3-0.2.13.
sudo npm install -g cordova@3.6.3-0.2.13
3.
If your workstation is connected to the Web via a proxy server, create a file named ~/.plugman/config and add the
same proxy settings you assigned using the npm command.
proxy = <proxyhost>:<port>
https-proxy = <proxyhost>:<port>
For example, proxy server is http://proxy.abc.corp:8080, then enter following in config file:
proxy = http://proxy.abc.corp:8080
https-proxy = http://proxy.abc.corp:8080
4.
Set up the command line Git client.
Download and install the Git client from http://git-scm.com/download/mac, and ensure it can be used from a terminal.
If you are in an environment where network access is controlled by a proxy server, configure the Git client to use the same
proxy configured in previous steps:
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
35
git config --global http.proxy <proxyserver>:<port>
git config --global https.proxy <proxyserver>:<port>
For example, proxy server is http://proxy.abc.corp:8080, then ruun:
git config --global http.proxy http://proxy.abc.corp:8080
git config --global https.proxy http://proxy.abc.corp:8080
5.
(Optional) If you will be leveraging the capabilities of the SMP Hybrid SDK (Kapsel) with Hybrid App Toolkit (see
http://help.sap.com/smp305sdk?current=smp305sdk) then create an environment variable called KAPSEL_HOME and set
the location to the folder that contains the Kapsel plugins.
For example, export KAPSEL_HOME=/Users/<yourusername>/SAP/MobileSDK3/KapselSDK.
6.
(Optional) If you are performing Kapsel development, install the Kapsel CLI as an administrator:
sudo npm install -g /Users/<yourusername>/SAP/MobileSDK3/KapselSDK/cli
7.
Install required iOS tools:
IOS Tooling Prerequisite
Xcode and utilities
Steps
1.
Install Xcode from either the App Store or Developer
Downloads.
2.
Start Xcode.
If the command line tools are not yet installed, please goto
Xcode menu Xcode  Open Developer Tool  More
Developer Tools…, find command line tools and install it.
(Optional) iOS sim tool, if
you want to start the
simulator from the
command line.
Run:
(Optional) iOS deploy tool,
if you want to deploy the
app onto a connected iOS
device with USB.
Run:
(Optional) iOS signing
profile, if you want to build
apps for your personal
device for testing.
8.
36
sudo npm install –g ios-sim
sudo npm install –g ios-deploy
1.
Download an iOS developer certificate by following these
instructions in the App Distribution Guide: Launching Your App
on Devices.
2.
Validate the profile setup, by creating a simple Xcode
application and running that it on your connected device.
Install required Android tool
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
Android Tooling Guidelines
Steps
Java Development Kit
(JDK)
1.
Download and install the latest JDK from
http://www.oracle.com/technetwork/java/javase/downloads/ind
ex.html.
2.
Follow the JDK installer instructions.
The Android development
tools require that you
install the entire Java SDK.
Installing just the Java
Runtime Environment is
insufficient.
3.
Create a JAVA_HOME environment variable in the .bash_profile
with this line (for Mac OSX 10.5 or later):
Apache Ant 1.8 or later
1.
Download the package from http://ant.apache.org.
2.
Unzip the package to your disk, and follow the instructions in
the INSTALL file.
3.
Add the unzipped Ant bin directory path to your Windows PATH
environment.
1.
Download the installation package from
http://developer.android.com/sdk/index.html#Other.
2.
Configure settings for your proxy, if required.
3.
In the SDK Manager application, install the SDK Tools, SDK
Platform-tools, SDK Build-tools and Android 4.4.2(API 19)
4.
Install the latest platform-tools package.
5.
Set the ANDROID_HOME system environment variable in the
.bash_profile. For example:
Note
Android SDK tools
export JAVA_HOME=$(/usr/libexec/java_home)
For an older Mac OSX, /usr/libexec/java_home does not exist.
You should set the JAVA_HOME to a fixed path such as:
export
JAVA_HOME=/System/Library/Java/JavaVirtualMa
chines/1.8.0.jdk/Contents/Home
export
ANDROID_HOME=/Users/<yourusername>/androidsdk-macosx
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
37
Android Tooling Guidelines
Steps
6.
Add the tools and platform-tools to your path. For example:
export
PATH=$PATH:/Users/<yourusername>/androidsdk-macosx/tools:/Users/
<yourusername>/android-sdk-macosx/platformtools
7.
Launch the Android Virtual Device Manager (AVD) and create an
Android virtual device to be used as your emulated device.
5.3.2 Running the Hybrid App Toolkit Installer
5.3.2.1 Running the Hybrid App Toolkit Installer for Windows
Procedure
1.
Go to
https://store.sap.com/sap/cp/ui/resources/store/html/SolutionDetails.html?pid=0000013586&catID=&pcntry=US&saplanguage=EN&_cp_id=id-1417532741302-0 and follow the download instructions for latest SAP_HAT_local.zip file.
2.
Extract the contents of your downloaded archive to a local folder, and run setup.cmd. The installer begins to extract and
load required packages, before opening in your default browser and prompting you to check installation prerequisites.
3.
All prerequisites are itemized and marked as passed or failed. For any unmet prerequisites, issues are color-coded in red
as an error and the resolution path clearly identified.
Use the information provided in a red error box to correct these issues and try again. For example, in the screen shot,
install an from http://ant.apache.org, and then click in the ANT_HOME={value of ANT_HOME} string set a new
environment variable. After you have fixed the issue, click Check All. Repeat this step until all requirements receive a
passed status.
38
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
Note
You cannot proceed to the installation step unless you meet all requirements.
4.
When the installer reaches the Web IDE URL definition step, type in the URL for your Web IDE instance (Chapter 5.3.1 step
5 will show you how to get Web IDE URL), then choose Save.
Hybrid App Toolkit Connector uses this URL to set up a secure connection with Web IDE running in your browser.
5.
When the installer reaches the Hybrid App Toolkit Connector certificate generation step, type a certificate password and
choose Confirm Password.
Hybrid App Toolkit Connector uses this certificate to connect to Web IDE. You need to enter this password each time you
start Hybrid App Toolkit Connector.
Choose Generate, and when Windows prompts you to allow it to change your computer, input the password of your
account.
The installer generates the server certificate and installs it on your machine.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
39
6.
Click the Build Hybrid Companion App step, and choose Build.
7.
Once built, use the Companion App to preview in-development applications that consume native mobile APIs, without
needing to build a full Cordova application each time. The companion container includes a range of popular Cordova
plugins and Kapsel plugins used in a hybrid app.
8.
Either accept the installer defaults or modify defaults values as needed, then choose Save.
Once the build completes, the installer generates the required Android file in the
<HAT_HOME>\WebIDECompanion\platforms\android folder.
9.
40
To exit the installer, in the banner, click Exit.
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
5.3.2.2 Running the Hybrid App Toolkit Installer for Macintosh
1.
Go to
https://store.sap.com/sap/cp/ui/resources/store/html/SolutionDetails.html?pid=0000013586&catID=&pcntry=US&saplanguage=EN&_cp_id=id-1417532741302-0 and follow the download instructions for latest SAP_HAT_local.zip file.
2.
Start the Terminal application: choose Applications Utilities Terminal.
3.
Change to the download folder of the Hybrid App Toolkit archive, and extract the contents of this file.
4.
Change to the root folder of the extracted archive contents.
5.
Ensure the scripts can be executed by running this command:
chmod +x *.sh
6.
Run ./setup.sh.
The installer begins to extract and load required packages, then opens in your default browser.
7.
The rest steps please refer Running the Hybrid App toolkit Installer for Windows.
5.3.3 Enabling the Web IDE Plugin for Hybrid App Toolkit
Enabling the Hybrid App Toolkit plugin makes it part of the Web IDE interface.
Procedure
1.
Open Web IDE (Chapter 5.3.1 step 5 will show you how to get Web IDE URL)
2.
In Web IDE menu, choose ToolsPreferencesPluginsOptional Plugins .
3.
In the list of available optional plugins overview, locate the com.sap.webide.hybrid and check the Enabled box.
4.
Choose Save.
5.
To load the plugin into Web IDE, choose the reload button to refresh the web page.
5.3.4 Starting up Hybrid App Toolkit Connector
Hybrid App Toolkit Connector allow Web IDE to interact with Hybrid App Toolkit add-on components on your local
machine over HTTPS, this section will introduce how to start Hybrid App Toolkit Connector.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
41
Procedure
1.
2.
Go to SAP_HAT_local-<version> folder:
o
On Windows, double-click run.cmd, or type this command in a terminal window.
o
On Macintosh, in a terminal window, first run chmod +x *.sh and then run ./run.sh.
At the prompt, enter the keystore password(This password is the one you entered during the setup procedure.).
During setup a keystore was created for the HTTPS server key of the Hybrid App Toolkit Connector. The Hybrid App
Toolkit Connector starts and listens for requests from Web IDE on the default port of 9010.
Note
If the output indicates that the default port (9010) is occupied by another program, change the <port> value in the
config.json file and then restart the Hybrid App Toolkit Connector. Valid ports are in the range of 1024 to 65535. All
changes to this file must then be replicated in the preferences for Hybrid App Toolkit Connector in Web IDE. Choose
Tools  Preferences  Hybrid Application Toolkit to change the port value.
3.
Configure your browser, as needed:
Browser
Configuration
Chrome
None required.
Safari
Configure Safari to always allow cookies for the local host by selecting
Preferences  Privacy  Cookie and website data 
Always allow.
Firefox
1.
Type https://localhost:9010 in the address bar.
2.
In the untrusted connection warning page, choose Add
Exception.
3.
In the Add Security Exception dialog, check Permanently
store this exception, then choose Confirm Security
Exception
Internet Explorer (IE)
1.
After loading Web IDE in IE, select Internet options, then
choose the Security tab.
2.
To add the Web IDE host as a trusted site, select Trusted
sites, then choose Sites, and add the host name that appears
to the list.
4.
3.
In Trusted sites, click Custom level.
4.
Set Access data sources across domains to Disable.
5.
Choose OK to close the popup windows.
In Web IDE, choose Tools  Preferences  Hybrid Application Toolkit  Test Connection.
Following message indicates the connection is established.
42
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
5.3.5 Strengthening Connection Security (Optional)
SAP recommends you perform this step to strengthen the connection security between Web IDE and Hybrid App
Toolkit Connector.
Procedure
1.
Replace the default <apiKey> value in the project config.json file with an alphanumeric string that is not easily
guessed.
2.
Restart the Hybrid App Toolkit Connector.
3.
In Web IDE then select Tools  Preferences  Hybrid App Toolkit, in API Key field, enter the new key
value.
5.3.6 Creating a Hybrid Project
Next step is to create a hybrid app project in Web IDE, and then deploy it to local emulator or device.
Procedure
1.
In Web IDE, create the hybrid app project: choose File->New->Project from Template.
2.
Select a Kapsel template.
3.
If this is your first hybrid app, SAP recommends that you choose Basic SAPUI5 Project SAPUI5 Mobile
Kapsel App Project template.
4.
In Basic Information, set the name.
Note
To avoid future deployment issues on HANA Cloud Platform, use lowercase for the project name. This convention
helps keep the name consistent across several deployment options.
5.
In Template Customization, View Type choose JavaScript, then choose Next and Finish. Web IDE creates the project in
workspace.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
43
6.
Open the context menu of the project just created, choose Project Settings.
7.
Choose Device Configuration.
8.
Enter App Name, App ID, Version.
9.
Check iOS or Android depends your environment.
10. Choose Save.
44
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
5.3.7 Building and Packaging Apps for Installation
Procedure
1.
2.
Open the Web IDE console, by selecting View  Console. Review the progress messages that appear.
o
If there is any issues, a popup message appears, which indicates the nature of the problem and corresponding
resolution details for it. Correct the issue and try again.
o
When Web IDE successfully completes the deployment, a success popup message appears.
With the project selected in Web IDE workspace, select Run  Run on, and choose the applicable target (simulator,
emulator, or device).
The project is downloaded to your local disk. Hybrid App Toolkit automatically fetches the specified Cordova plugins
to create a Cordova project from the downloaded file.
Results
Depending on your environment, the Run on command builds the mobile application for Android and iOS and installs
it on simulator, emulator, or mobile device.
)
Setup Development Environment and Verification Entities
(MD4
Client Development Environment Setup
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
45
www.sap.com/contactsap
© 2015 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
http://global.sap.com/corporate-en/legal/copyright/index.epx#trademark
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.