Skip to Content
Author's profile photo Daniel Van Leeuwen

Getting Started with Kapsel – Appendix H — Non Kapsel Plugins (SP09+)

/wp-content/uploads/2015/07/sap_logo_752822.png

Appendix H:  Non Kapsel Plugins

The following examples demonstrate how to include and use some of the native functionality that Cordova plugins provide.

Taking, Storing and Retrieving a Picture
Acquiring the Device Location and Displaying it on a Map

Using the PhoneGap Push Notifications Plugin

Taking, Storing and Retrieving a Picture

The following steps demonstrate how to take a picture using the Cordova camera pluginand how to store and retrieve previously taken images.

  • Create a new project named CameraDemo and add Android or iOS or both.
    cordova create C:\Kapsel_Projects\CameraDemo com.mycompany.camera CameraDemo
    cd CameraDemo
    cordova platform add android
    
    cordova create ~/Documents/Kapsel_Projects/CameraDemo com.mycompany.camera CameraDemo
    cd ~/Documents/Kapsel_Projects/CameraDemo
    cordova platform add ios
  • Add the Kapsel Encrypted Storage plugin and the Cordova Camera plugin.
    cordova plugin add cordova-plugin-camera
    
    cordova plugin add kapsel-plugin-encryptedstorage --searchpath %KAPSEL_HOME%/plugins
    or
    cordova plugin add kapsel-plugin-encryptedstorage --searchpath $KAPSEL_HOME/plugins
    
  • Replace the contents of  C:\Kapsel_Projects\CameraDemo\www\index.html with index.html.
  • Prepare, build and deploy the app with the following commands.
    cordova run android
    or
    cordova run ios

    image1.PNG

Acquiring the Device Location and Displaying it on a Map

The following steps demonstrate how to get a location and then use Google services to translate a location into an address and to display a map showing the address.

  • Create a new project named LocationDemo and add Android or iOS or both.
    cordova create C:\Kapsel_Projects\LocationDemo com.mycompany.location LocationDemo
    cd LocationDemo
    cordova platform add android
    
    cordova create ~/Documents/Kapsel_Projects/LocationDemo com.mycompany.location LocationDemo
    cd ~/Documents/Kapsel_Projects/LocationDemo
    cordova platform add ios
  • Add the InAppBrowser plugin to the project to enable showing the Google Map in a separate window that will have a close button.
    cordova plugin add cordova-plugin-inappbrowser
  • Note, that on some devices it may be required to add the geolocation plugin using the following command.
    cordova plugin add cordova-plugin-geolocation
  • Replace the contents of  C:\Kapsel_Projects\LocationDemo\www\index.html with index.html.
  • Add the below permissions if using Android to the AndroidManifest.xml
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  • Prepare, build and deploy the app with the following commands.
    cordova run android
    or
    cordova run ios

      If using an Android emulator, the emulator’s location will need to be passed to it.  To do this, switch to the DDMS view, select the emulator under devices, select Emulator Control, press the Send button.  Then press the Get Location button on the emulator.
    On an iOS simulator the location can be changed under Debug > Location.
    image2.PNGimage3.PNG

  • Depending on the device, the location may not be returned before the timeout occurs.
    On Android, ensure that the Location is enabled under Settings > Location > On.  The Mode can also be set.  Finally under recent location requests should appear LocationDemo if you have previously pressed the Get Location button.
    On iOS, ensure that Location is enabled under Settings > Privacy > Location > Location Service > On

Using the PhoneGap Push Notifications Plugin

The following steps demonstrate how to use the PhoneGap Push plugin.  Note, Kapsel also provides a similar pushplugin.

  • Create a new Android project named PushDemo2.
    cordova create C:\Kapsel_Projects\PushDemo2 com.mycompany.push2 PushDemo2
    cd PushDemo2
    cordova platform add android
    
  • Add the push, media, and console plugins to the project.
    cordova plugin add phonegap-plugin-push 
    cordova plugin add cordova-plugin-media
    cordova plugin add cordova-plugin-console
  • Replace the contents of  C:\Kapsel_Projects\PushDemo2\www\index.html with index.html.
  • Follow the instructions at Getting Started with GCM to create an API project, receive a project number (sender ID), and enable the GCM service for the project and to obtain an API key.
  • Add your senderID (received from Google to the register method in index.html on line 7.
  • Provide a wav file to be played when a notification is received while the app is in the foreground.  For example
    copy "C:\Windows\Media\Heritage\Windows Notify.wav" C:\Kapsel_Projects\PushDemo2\www\beep.wav
  • Copy the contents of the www folder to the platform specific www folder of the project using prepare.
    cordova prepare
    
  • Deploy the Kapsel app to an Android emulator based on the Google APIs or an Android device.  On startup the app will register with Google and receive a registration ID.  This registration ID can be used to send the app notifications.
    image4.PNG
  • Install node-gcm
     C:\Kapsel_Projects\PushDemo2\npm install node-gcm
  • Copy notify.js to C:\Kapsel_Projects\PushDemo2\notify.js.
    Edit notify.js and fill in the registration ID on line 20.  The registration ID can be copied from the Android logcat or the Web Inspector console by searching for registrationId and then selecting the line containing it and pressing Ctrl C.
    Also provide the API key on line 5.
  • Press the home button to place the app in the background.  Type
    node notify.js 

    to send a notification.  Notice that a notification appears on the device. 
    image5.PNG

    Open the notifications and then click on the notification.
    image6.PNG

    Note, try also sending a notification while the app is displayed (foreground notification) and after closing the app via the back button (cold start notification)

  • See also Tutorial: Implement Push Notifications in your PhoneGap Application

Back to Getting Started With Kapsel

Assigned tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Daniel Van Leeuwen
      Daniel Van Leeuwen
      Blog Post Author

      Changed the lockTimeout setting on the passcode policy of the camera example from 0 to 300 to prevent an error that could occur when attempting to save the picture.  The data vault was not being unlocked in time before the call to store the image using the encrypted storage plugin.

      Author's profile photo Former Member
      Former Member

      Hi Daniel,

      I am getting an error when trying to save the image to the encrypted store. The message says: Failed because: 4. This message appears twice.

      I am running this on an iPhone 6+. Any idea what that error message means and why it is appearing twice?

      Thanks,
      Dave

      Author's profile photo Daniel Van Leeuwen
      Daniel Van Leeuwen
      Blog Post Author

      I just tried the example and did not see an error.

      The error codes are described in the C:\SAP\MobileSDK3\KapselSDK\plugins\encryptedstorage\www\encryptedstorage.js

      /**

      * This error indicates that the datavault managed by the Logon plugin is locked.

      * the Logon plugin must be in an unlocked state to use the EncryptedStorage plugin.

      * @memberof sap.EncryptedStorage

      * @name sap.EncryptedStorage#ERROR_DATAVAULT_LOCKED

      * @constant

      */

      EncryptedStorage.prototype.ERROR_DATAVAULT_LOCKED = 4;

      I would double check that the init method is being called and specifically that the sap.Logon.initPasscodeManager's successCallback is being called before you try to save or retrieve something from the encrypted storage.

      Hope that helps,

      Dan van Leeuwen

      Author's profile photo Former Member
      Former Member

      Hi Dan,

      I didn't realize that the passcode was required and I had disabled it. Once I ran the app and entered the passcode the encrypted storage plugin worked properly.

      Thanks,

      Dave

      Author's profile photo Daniel Van Leeuwen
      Daniel Van Leeuwen
      Blog Post Author

      As far as I know the passcode is not required.  I tried it on iOS and Android by pressing the Dissable Passcode button in the example included in this guide.

      Regards,

      Dan van Leeuwen

      Author's profile photo Former Member
      Former Member

      I am using an iPhone 6+ (iOS 9.2). I had a typo in the appId which I fixed. I'm not sure the previous version of the app was cleared off the phone when I tested it. I just tried it again with the passcode disabled and it worked. So the problem was the appId typo.

      Thanks,

      Dave

      Author's profile photo Rakshit Doshi
      Rakshit Doshi

      Hi Daniel Van Leeuwen

      I am using the cordova push plugin alongwith SMP.

      I am able to successfully receive notification using

      http://localhost:8081/Notification/appid?alert="Test Notification"

      I would like to know how to implement it based on user rather than application connection id

      I tried http://localhost:8081/Notification/com.test.push/user/Tester

      but no luck

      Can you please advice.

      Author's profile photo Daniel Van Leeuwen
      Daniel Van Leeuwen
      Blog Post Author

      Note that the format to send a notification to a user is

      http[s]://<host:port>/restnotification/application/<applicationId>/user/<userID>


      See also

      Push Notification API Scenarios - REST API Application Development - SAP Library


      Hope that helps,


      Dan van Leeuwen

      Author's profile photo Former Member
      Former Member

      Hi Dan, I was trying to get the Geolocation demo to work and I realized that I had not installed the gelocation plugin. You might want to add that step to the instructions:

      cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git


      Thanks,

      Dave

      Author's profile photo Daniel Van Leeuwen
      Daniel Van Leeuwen
      Blog Post Author

      I assumed that on most devices this plugin is not needed.  I will include a link to it.  Did adding it make a difference for you?  What device did you use?

      Note that

      GitHub - apache/cordova-plugin-geolocation: Mirror of Apache Cordova Plugin geolocation

      says

      This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.


      Thanks again for the feedback,


      Dan van Leeuwen

      Author's profile photo Former Member
      Former Member

      Yes, the app didn't work without that plugin being installed. iPhone 6+ (iOS 9.2).

      Thanks,

      Dave

      Author's profile photo Former Member
      Former Member

      Hi!!!

       

      Link to index.html in the "take a photo" chapter is broken.. Could you upload again?

       

      Thank you so much.

       

      Author's profile photo Daniel Van Leeuwen
      Daniel Van Leeuwen
      Blog Post Author

      Please see the updated version of this guide that corresponds to SP 13+ at
      https://blogs.sap.com/2017/02/08/appendix-e-non-kapsel-plugins/

      Regards,

      Dan van Leeuwen

      Author's profile photo Martin Pruim
      Martin Pruim

      Hello Daniel,

      I'm trying to add a custom cordova plugin. On iOS it's working, but on Android i get an error that the class is not found.

      I used logcat to determine the cause. The error i get is:

      SMP_SETTINGS: plugin RareloopAppVersion is disabled by fioriURL security policy

      It's a simple plugin to retrieve the app version. Is this something i can configure before building the app or is this a server setting?

       

      Thanks in advance!

       

      Author's profile photo Daniel Van Leeuwen
      Daniel Van Leeuwen
      Blog Post Author

      I wonder if it is related to this feature.

      https://blogs.sap.com/2016/11/10/sap-fiori-client-sp13/#security

       

      Regards,

      Dan van Leeuwen

      Author's profile photo Roland Wenzel
      Roland Wenzel

      Hi Daniel,

      link to http://devgirl.org/2013/07/17/tutorial-implement-push-notifications-in-your-phonegap-application/

      and " index.html. " is broken.

      New links available ?

       

      br

      Roland

       

      Author's profile photo Daniel Van Leeuwen
      Daniel Van Leeuwen
      Blog Post Author

      If you are using the SAP Cloud Platform Mobile Services or the on premise SAP Mobile Platform server, you can follow the blog on the Kapsel push plugin at

      https://blogs.sap.com/2016/10/30/getting-started-kapsel-part-4-pushsp13/

       

      If you wish to use a third party push plugin, I would recommend looking at the documentation for that plugin.

      A list of available third party plugins can be found at

      https://cordova.apache.org/plugins/

      It has been a while since I have looked at this so I don't have a recommendation on which plugin to use at this time.

       

      Hope that helps,

      Dan van Leeuwen