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

[Dan_vL]

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

  

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.
  
• 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.
  
  
  
• 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. 
  
  
  Open the notifications and then click on the notification.
  
  
  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