Appendix F: Tips

Dan_vL · ‎2015 Jul 21

Appendix F: Tips

Where to Get Help with Cordova Questions
Monitoring HTTP and HTTPS Requests
Setting the Session Timeout for the Management Cockpit
Sharing Your Device's Screen
Accelerating the Android Emulator
Wireless ADB Connection to an Android Device
Proxy Settings on Android
iOS 7 Status Bar Overlays the App
Enabling Landscape Orientation
Simple Customizations
Opening URL's
Miscellaneous Tips

Where to Get Help with Cordova Questions

There is an active forum on PhoneGap/Cordova at PhoneGap Forum.

The list of known Cordova issues can be searched at Apache Cordova Issue Tracker.

The Cordova mailing lists can be searched at Apache Cordova Mailing Lists.

The Apache Cordova Blog section often highlights important changes and lists bug fixes that are in a particular release.

Monitoring HTTP and HTTPS Requests

It can be useful to examine the REST calls made between an application and the SMP 3.0 server and the SMP server and a backend. The following shows some different tools to do that although there are many others that can also be used.

SMP 3.0 Server Trace
SMP 3.0 Server Trace with Fiddler
Device Trace with Fiddler

SMP 3.0 Server Trace

The SMP 3.0 server can log all requests. There are a couple of different ways to do this.

To enable this feature, modify C:\SAP\MobilePlatform3\Server\config_master\org.eclipse.gemini.web.tomcat\default-server.xml and uncomment the entry <Valve className="org.apache.catalina.valves.AccessLogValve".
Restart the SMP 3.0 server.

After making some requests to the SMP 3.0 server examine the log file at C:\SAP\MobilePlatform3\Server\log\localhost_http_access_2014-04-29.log.

10.7.171.196 - - [29/Apr/2014:16:58:28 -0400] "OPTIONS /odata/applications/latest/com.mycompany.timing/Connections HTTP/1.1" 200 - 146

10.7.171.196 - i826567 [29/Apr/2014:16:58:28 -0400] "POST /odata/applications/latest/com.mycompany.timing/Connections HTTP/1.1" 201 1704 453

10.7.171.196 - - [29/Apr/2014:16:58:30 -0400] "OPTIONS /com.mycompany.timing/FlightCollection HTTP/1.1" 200 - 3

10.7.171.196 - i826567 [29/Apr/2014:16:58:33 -0400] "GET /com.mycompany.timing/FlightCollection HTTP/1.1" 200 582225 3038

The second last entry indicates the response size and the last entry indicates the duration in milliseconds that the operation took. The last operation returned 569KB and took approximately 3 seconds to complete.

Modify the following file.

C:\SAP\MobilePlatform3\Server\config_master\com.sap.js.logging\logging.cfg

Add the following line.

system.logger.org.apache.http.wire=trace

Restart the SMP server and execute a read operation and then examine the following log file.

C:\SAP\MobilePlatform3\Server\log\machine_name-smp-server.log

"GET http://services.odata.org/V2/OData/OData.svc/Products HTTP/1.1[\r][\n]" "accept: application/atomsvc+xml;q=0.8, application/json;odata=fullmetadata;q=0.7, application/json;q=0.5, */*;q=0.1[\r][\n]" "maxdataserviceversion: 3.0[\r][\n]" "accept-encoding: gzip,deflate[\r][\n]" "accept-language: en-US[\r][\n]" "cookie: X-SMP-SESSID=1624561118350E68CDB6424A2804FEDE0DC8430295B095C2470ED2CF7409B793; X-SMP-SESSIDSSO=DD1BE16B2AC24AA77D88FB57B3DD2458; X-SMP-APPCID=8852b007-feba-49d6-907a-3df0413d66cb; X-SUP-APPCID=8852b007-feba-49d6-907a-3df0413d66cb[\r][\n]" "x-requested-with: com.mycompany.offline[\r][\n]" "Cookie: [\r][\n]" "Host: services.odata.org[\r][\n]" "Proxy-Connection: Keep-Alive[\r][\n]" "User-Agent: Apache-HttpClient/4.2.5 (java 1.5)[\r][\n]" "[\r][\n]" "HTTP/1.1 200 OK[\r][\n]" "Cache-Control: no-cache[\r][\n]" "Content-Length: 1028[\r][\n]" "Content-Type: application/json;charset=utf-8[\r][\n]" "Vary: Accept-Encoding[\r][\n]" "Server: Microsoft-IIS/8.0[\r][\n]" "DataServiceVersion: 2.0;[\r][\n]" "X-AspNet-Version: 4.0.30319[\r][\n]" "X-Powered-By: ASP.NET[\r][\n]" "Date: Wed, 25 Feb 2015 19:28:02 GMT[\r][\n]" "Proxy-Connection: Keep-Alive[\r][\n]" "Connection: Keep-Alive[\r][\n]" "Content-Encoding: gzip[\r][\n]" "Set-Cookie: ARRAffinity=4a346cc2ba936a87116efc1bc94884e8ba98aac9ef2852df21b6678b3bdb51e0;Path=/;Domain=services.odata.org[\r][\n]" "[\r][\n]"

For even more logging on SSL handshaking add
```
-Djavax.net.debug=ssl
```
to props.ini.

SMP 3.0 Server Trace with Fiddler

Another way to examine the requests made by the SMP server to an endpoint that has the option Use System Proxy checked is to configure the SMP Server to use Fiddler as the proxy. In this way requests made by the SMP server that go through the proxy can be examined.
To see this in action run the example from the Offlinesection.

Ensure that the option Use System Proxy is checked.
Configure the SMP Server to use Fiddler as its proxy.
Check the port that Fiddler is listening on. Fiddler > Tools > Fiddler Options > Connections. If your network requires a proxy, check Act as system proxy on startup. After making changes, restart fiddler.
Uncheck the option to Capture Traffic via File > Uncheck Capture Traffic. This means only the requests made using Fiddler as a proxy will be captured.
The following is the captured requests from performing a register, Read, Open Store. Note it is only the Read (1st request) and the Open Store requests (4 requests) are captured as register in this case is not using the proxy.
If the endpoint is accessed over HTTPS, in Fiddler choose Tools > Fiddler Options > Capture HTTPS Connects > Decrypt HTTPS traffic > from all processes.
Also ensure that tls.1.1 and tls1.2 are included in the Enabled Protocols list.

The Fiddler generated certificate for the specific backend will need to be imported into the SMP keystore. It does not appear to be sufficient to simply import the Fiddler Root certificate.
For example, if the endpoint is
```
https://sapes1.sapdevcenter.com/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT
```
after trying to capture the traffic with Fiddler, open certmgr.msc, and export the certificate generated by Fiddler for this endpoint. Note, you may need to refresh the view to see the certificate. Choose Copy to File > No, do not export the private key > Base-64 encoded X.509.

Import the Fiddler Root cert and this generated cert into the SMP keystore.
```
keytool -import -v -alias fiddlersapes -keystore smp_keystore.jks -storepass changeit -file c:\certs\fiddlerSapes.cer
```
Here is an example of a Read request being made from the SMP server to the backend using HTTPS being viewed in Fiddler.

Device Trace with Fiddler

It is also possible to use Fiddler to capture the traffic between the mobile device and the SMP server. This would include the calls that are made during the registration process which is not shown above. To do so, set the proxy on the mobile device to use Fiddler. Settings > Wi-Fi > Long Press on the network connection > Modify Network > Show Advanced Options > Proxy Manual, specify the proxy hostname and port.

The following is the trace from performing a Register, Read and Open Offline Store.

Notice that this time the registration calls are included in the trace. Also note that the calls from the offline store (MobiLink) are shown but are not readable as they are encrypted.
It is also possible to examine HTTPS traffic. In Fiddler choose Tools > Fiddler Options > Capture HTTPS Connects > Decrypt HTTPS traffic > from all processes.
Also ensure that tls.1.1 and tls1.2 are included inthe Enabled Protocols list.
In a browser on the device open the following URL and click on the link You can download the FiddlerRoot certificate.
```
http://ip_of_machine_with_fiddler_running:8888
```
Here is an example of viewing HTTPS traffic with Fiddler.
Note, that in order for Fiddler to view HTTPS traffic from an iOS device or simulator, the following instructions need to be followed. Note that replacing makecert with the CertMaker for iOS and Android causes the endpoint specific cert not to be generated in the Windows cert store and hence will cause the SMP Server trace with Fiddler for HTTPS backends to fail.

FAQ - Certificates in Fiddler
Capture Traffic from iOS Device

Setting the Session Timeout for the Management Cockpit

The duration after which the Management Cockpit by default times out and requests the user to log in again is 20 minutes from the last use. This value can be changed by modifying the

session-timeout

setting in the following file and restarting the SMP 3.0 server.

C:\SAP\MobilePlatform3\Server\config_master\org.eclipse.gemini.web.tomcat\web.xml

Note that if the same browser that is hosting the Management Cockpit is also used to say invoke a REST call against the SMP 3.0 server and uses a different security profile, the Management Cockpit is logged out. An example of this is using the Chrome Advanced Rest Client to send a push notification as described in the section Push.

Sharing Your Device's Screen

It can be useful to view your device's screen on a computer and or to make a recording. There are multiple ways to accomplish this. Here are a few programs that may be helpful.

Android

Vysor can be installed as an app for Chrome. It enables an Android's screen to be shown that is connected via adb in a resizable window. It enables the computer to control the device using the mouse and enter text using the keyboard. Finally one additional feature is the ability to remotely control a device. To use it install Vysoras an app in Chrome. Establish an adb connection to your device. In Chrome, enter the below URL.

chrome://apps/

Click on Vysor and then you should see your device listed.

Android Studio can also be used to capture the device's screen and save it as an MP4 file. In Android Studio, in the logcat tab of the Android Monitor, click on the icon for Screen Record.

iOS

Connect your iOS device to a Mac and start the QuickTime Player and choose File, New Movie Recording. Under the Camera, select your connected device. The device's screen will now appear on the Mac and the created recording can be saved.

Windows

Install the Project My Screenapp on your Windows computer. Start it with your Windows Phone connected to your computer.

Wireless ADB Connection to an Android Device

It is possible to connect wirelessly to an Android device that was previously configured to enable this.
With a USB connected Android device enter the following commands.

adb tcpip 5555

adb connect ip_address

The Android device's IP address can be found under Settings > WI-FI > Click on the button in the top right with three dots > Advanced > Scroll down to IP address. To switch back to adb usb mode enter the following.

adb usb

Accelerating the Android Emulator

There are two ways that the Android emulator can be configured to run faster. The first way uses graphics acceleration to increase the redraw rate of the emulator. It can be enabled by checking Use Host GPU

Note you may run into screen redraw issues after enabling this option.

The second way is to use virtual machine acceleration. This requires the download of the Intel Hardware Accelerated Execution Manager.

It then needs to be installed.

C:\Android\adt-bundle-windows-x86_64-20130729\sdk\extras\intel\Hardware_Accelerated_Execution_Manager\IntelHaxm.exe

An Android X86 based image, Intel Atom (x86) must be selected.

Note that after starting the emulator; the following message appears indicating that it is working correctly.

For additional details see Using Hardware Acceleration.

Note, if you are unable to install IntelHaxm, you may need to remove the following setting in Control Panel > Programs and Features > Turn Windows Features on or off > Uncheck Hyper-V.

Note this has a side effect of disabling the Windows Simulators.

Proxy Setting for Android

If you use a proxy server, the Android emulator can be configured under Settings > More > Mobile Networks > Access Point Names. Note these steps only apply to 4.x emulators and not 5.x emulators.

For 5.x and higher emulators, the proxy value is taken by the http_proxy and https_proxy environment variables or it can be passed in via the command line such as the following.

emulator -avd Android6 -http-proxy http://proxy_server:proxy_port

To set the proxy settings for an Android device that is using WIFI, go to Settings > Wireless and Network > Wi-Fi Settings > Long press on the Wi-Fi network > Check the Show Advanced Options.
A quick way to test if the proxy settings are working is to open the browser and attempt to access a web site such as http://www.google.com.

iOS 7 Status Bar Overlays the App

If your app runs on iOS 7 you may need to add a 20 pixel top margin so that the status bar does not overlay the main screen of the application. The Status Bar Issuedescribes the problem in more detail and contains the following solution.

document.addEventListener('deviceready', onDeviceReady, false);



function init() {

    if (parseFloat(window.device.version) >= 7.0) {

          document.body.style.marginTop = "20px";

    }

}

A SAPUI5 specific solution is shown below.

html[data-sap-ui-os^="iOS7"] .sapMBar {

  border-top-color:#F2F2F2;

  border-top-style:solid;

  border-top-width:20px;

}

Perhaps a better way to address this is to use the cordova-plugin-statusbarplugin.

cordova plugin add cordova-plugin-statusbar

Then modify the config.xml file and set the StatusBarOverlaysWebView to false.

Enabling Landscape Orientation

If you rotate an iPhone device or simulator, the HTML page does not rotate to support the new orientation. To add this ability, in Xcode, under Info > Custom iOS Target Properties > Supported interface orientations, add the missing interface orientations such as Landscape (left home button).
Note a new settings was added to the Cordova config.xml file in Cordova 5.1.1 to specify the iOS device orientation. See the orientation preference setting in the following link. The config.xml File

On an Android device, check the following setting on 5.x devices. Settings > Display > When device is rotated > Rotate the contents of the screen.

Simple Customizations

There are a few easy ways to quickly customize your app including adding a gradient, removing the default Cordova splash screen and changing the app icon. Additional information on app icons and splashscreens can be seen at Splashscreen.

To add a gradient use a tool like Ultimate CSS Gradient Generatorto generate a line of CSS that can be added to the top of your index.html.

<head>
    <style>
        body {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(35%,#ddf1f9), color-stop(100%,#a0d8ef));}

    </style>

To change the splash screen on iOS, left-click on the Project > Target > scroll to Launch Images, right-click on the image that matches the device type being used and choose open with Finder. Replace that image with a new image that has the appropriate resolution. The same approach can be followed to change the app icon.
To change the app icon on Android, replace the icon image with a new image that has the appropriate resolution. The icon images are located in the following folder.
```
project_name\platforms\android\res\drawable-xxxx.
```

Note that cleaning the project may be necessary after changing the icon or splash screen.

Opening URL's

To open an external URL from index.html, the Cordova InAppBrowserplugin can be used.

<script>    function showURL(url) {

        var URLToOpen = encodeURI(url);  //may be needed if URL contains parameters

        var ref = window.open(URLToOpen, '_blank', 'location=yes,toolbar=yes,toolbarposition=top'); //toolbar options are iOS only

        //Note on Android, some attachment types such as PDF, XLS, DOCX can be opened by changing '_blank' to '_system'

        //The appropriate viewer would need to be installed and it may help to have a file manager program like ES File Explorer installed

    }

</script><a href="javascript:void(0);" onclick="showURL('http://www.google.com')">www.google.com</a>

This will open a new window showing the web site www.google.com. ; When the window is closed, the Kapsel app will regain focus.

Note that local HTML files can simply be opened using

<a href="accounts.html">Open Accounts</a>

Note that on Android, if the resource does not exist and the link is clicked on the app will close. To instead shown an error screen, modify the config.xml file under the res/xml folder to include a preference setting indicating an error page to open.

<preference name="errorUrl" value="file:///android_asset/www/error.html" />

See Android Configuration for additional details.

Miscellaneous Tips

Sometimes in Xcode it is necessary to perform a more complete clean of a project. This can be performed by holding the Alt key when selecting the Product menu. The Clean menu item changes to Clean Build Folder...
If a permissions error occurs on a Mac, a files permissions can be seen via the finder menu item Get Info in the Sharing & Permissions. To change the permissions of a folder and its children the following command can be used.
```
sudo chown -R user_name /Users/UserName/folder name
```
The iOS simulator can be reset to a clean state. This can be performed by choosing iOS Simulator > Reset Content and Settings...
To delete an app on iOS, long press on the app icon.
An iOS app can be removed from memory by pressing the home button twice quickly. On iOS 7 swipe the app up to remove it.
See Getting Started in Simulator for details on things such as how to rotate, drag and pinch.
A linker error may occur if the Deployment Target is changed from 6.0 to 7 or 8 on an Xcode project that contains the Logon plugin. This can be corrected by adding the library "libstdc++.6.0.9.dylib". Under the General tab for the project, click on the + sign in the Linked Frameworks and Libraries section and add "libstdc++.6.0.9.dylib".
An Android app can be uninstalled or reset to a newly deployed state via Settings > Apps > App > Uninstall or Clear Data. A quicker way to do this is to long press on the app and then drag the icon to Uninstall or App Info.

If the application running in an Android emulator takes a while to load it may be necessary to increase the loadUrlTimeout value. This can be set in the Java class for the plugin.

public class LogonDemo extends DroidGap

{

    @Override

    public void onCreate(Bundle savedInstanceState)

    {

        super.setIntegerProperty("loadUrlTimeoutValue", 60000);   //add this line.



        super.onCreate(savedInstanceState);

        // Set by <content src="index.html" /> in config.xml

        super.loadUrl(Config.getStartUrl());

        //super.loadUrl("file:///android_asset/www/index.html")

    }

}

Getting Started with Kapsel - Appendix F -- Tips (SP09+)

Appendix F: Tips

Where to Get Help with Cordova Questions

Monitoring HTTP and HTTPS Requests

SMP 3.0 Server Trace

SMP 3.0 Server Trace with Fiddler

Device Trace with Fiddler

Setting the Session Timeout for the Management Cockpit

Sharing Your Device's Screen

Android

iOS

Windows

Wireless ADB Connection to an Android Device

Accelerating the Android Emulator

Proxy Setting for Android

iOS 7 Status Bar Overlays the App

Enabling Landscape Orientation

Simple Customizations

Opening URL's

Miscellaneous Tips

Get Your SAP HANA Idea Incubator Badge Today!

SCN Mission - SAP HANA Quiz Challenge is now retired

Share your #HANAStory and Win