/wp-content/uploads/2014/02/sap_logo_333927.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 Cordova Push Notifications Plugin
Using the Cordova Push Notification Plugin with the SMP 3.0 Server

Taking, Storing and Retrieving a Picture

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

  • Create a new project named CameraDemo and add Android or iOS or both.
    cordova -d create C:\Kapsel_Projects\CameraDemo com.mycompany.camera CameraDemo "{\"plugin_search_path\":\"C:/SAP/MobileSDK3/KapselSDK/plugins/\"}"
    cd CameraDemo
    cordova -d platform add android
    
    cordova -d create ~/Documents/Kapsel_Projects/CameraDemo com.mycompany.camera CameraDemo "{\"plugin_search_path\":\"C:/SAP/MobileSDK3/KapselSDK/plugins/\"}"
    cd ~/Documents/Kapsel_Projects/CameraDemo
    cordova -d platform add ios
  • Add the Kapsel Encrypted Storage plugin and the Cordova Camera plugin.
    cordova plugin add org.apache.cordova.camera  (if this fails try)

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


    cordova -d plugin add com.sap.mp.cordova.plugins.encryptedstorage
  • Replace the contents of  C:\Kapsel_Projects\CameraDemo\www\index.html with index.html.
  • Copy the contents of the www folder to the platform specific www folder of the project using prepare.
    cordova -d prepare
    
  • Deploy the Kapsel app to the device or simulator using the Android IDE or Xcode.
    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 -d create C:\Kapsel_Projects\LocationDemo com.mycompany.location LocationDemo
    cd LocationDemo
    cordova -d platform add android
    
    cordova -d create ~/Documents/Kapsel_Projects/LocationDemo com.mycompany.location LocationDemo
    cd ~/Documents/Kapsel_Projects/LocationDemo
    cordova -d 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 https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
  • Replace the contents of  C:\Kapsel_Projects\LocationDemo\www\index.html with index.html.
  • Copy the contents of the www folder to the platform specific www folder of the project using prepare.
    cordova -d prepare
    
  • 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" />
  • Deploy the Kapsel app to the device or simulator using the Android IDE or Xcode.  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 Cordova Push Notifications Plugin

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

  • Create a new Android project named PushDemo2.
    cordova -d create C:\Kapsel_Projects\PushDemo2 com.mycompany.push2 PushDemo2
    cd PushDemo2
    cordova -d platform add android
    
  • Add the push, media, and console plugins to the project.
    cordova plugin add https://github.com/phonegap-build/PushPlugin.git 
    cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git

    cordova plugin add
    https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
  • 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 to 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 -d 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 it and fill in the registration ID on line 20.  The registration ID can be copied from the Android Eclipse logcat 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

Using the Cordova Push Notifications Plugin with the SMP 3.0 Server

The following steps demonstrate how to use the SMP 3.0 server to send a notification to an application that uses the cordova push Notification plugin.  This example is similar to the previous one except that the application will register with the SMP 3.0 server and will provide the SMP 3.0 server the registration ID so that a post to http://SMP_3.0_SERVER:8080/Notifications/application_registration_id will cause the SMP 3.0 server to send a notification to the GCM push notification service that will then forward the notification to the application.  The previously created project PushDemo2 will be modified.

  • Follow the steps shown in Configuring a Kapsel App in the Management Cockpit to create an Application with the application id of
    com.mycompany.push2

      This app does not use an OData endpoint so the endpoint can be set to a dummy URL such as

    http://mycompany.com
  • Fill in the Push settings for the application. 
    image2.PNG
  • Replace the contents of  C:\Kapsel_Projects\PushDemo2\www\index.html with index.html.
  • Place a copy of datajs-1.1.2.min.js into the www folder.
  • Add your senderID (received from Google) to the register method in index.html on line 12.
  • Copy the contents of the www folder to the platform specific www folder of the project using prepare.
    cordova -d 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 needs to be sent to the SMP 3.0 server.  The following screen shot shows the result of pressing the Register button to create an application registration with the SMP 3.0 server followed by the Send Reg ID button to update the SMP 3.0 server with the registration ID and then finally using the Advance Rest Client in Chrome to instruct the SMP 3.0 server to send a notification to the application.
    image7.PNG
    image8.PNG

Back to Getting Started With Kapsel

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. jitendra kansal

    Hi Daniel,

     

    I was trying with “Device location and displaying it on a Map” and after pressing on “Get Location” button , i get this error

     

    location.PNG

     

     

     

    If i manually enter Latitude, Longitude details and press Get address from location, it works but device is not detecting it automatically.

     

    Rgrds

    JK

    (0) 
    1. Daniel Van Leeuwen Post author

      I imagine when I first tried this I was using the emulators.  Which device are you using?  It may take longer on a device to establish a location.  On a Nexus 7 running Android 4.4 I had to increase the timeout before is started working.  Try increasing the timeout parameter from 3 seconds to 1 minute in the call navigator.geolocation.getCurrentPosition.  I also added the following information.

       

      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


      Hope that helps,


      Dan van Leeuwen

      (0) 

Leave a Reply