Use Notifications in Cordova

If you want to add notification function in your cordova app local notificaiton plugin (the de.appplant.cordova.plugin.local-notification) is good solution.

https://github.com/katzer/cordova-plugin-local-notifications/

1. Add plugin.

cordova plugin add de.appplant.cordova.plugin.local-notification && cordova prepare

remove plugin.

cordova plugin rm de.appplant.cordova.plugin.local-notification

2. Update config.xml
Add this line to config.xml

<plugin name="local-notification" 
value="de.appplant.cordova.plugin.local-notification" />

3. Add simple notification in index.html.

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

function onDeviceReady() {

      window.plugin.notification.local.add({ message: 'Great app!' });

}

4. Scheduled local notification.
If you want to get an alarm at the same time weekly...

var now = new Date().getTime(),
_60_seconds_from_now = new Date(now + 60*1000);

window.plugin.notification.local.add({
    id:      888,
    title:   'Reminder',
    message: 'Dont forget to buy some flowers.',
    repeat:  'weekly',
    autoCancel: true,
    sound:'TYPE_ALARM',
    date:    _60_seconds_from_now
 });

5. Add event function

window.plugin.notification.local.ontrigger = function(id, state, json){
// do something... 
}
window.plugin.notification.local.onadd = function(id, state, json){
// do something... 
}
window.plugin.notification.local.onclick = function(id, state, json){
// do something...
}

Useful  but these don't work well if the app is not on.

using contact in cordova

Please refer to this page.. http://docs.phonegap.com/en/2.9.0/cordova_contacts_contacts.md.html

1. add plugin

$ cordova plugin add org.apache.cordova.contacts

2. Permissions

Android

app/res/xml/config.xml

<plugin name="Contacts" value="org.apache.cordova.ContactManager" />

app/AndroidManifest.xml

<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />

iOS

config.xml

<plugin name="Contacts" value="CDVContacts" />

3. make codes

contacts.create

Returns a new Contact object.

var contact = navigator.contacts.create(properties);

Quick Example

var myContact = navigator.contacts.create({"displayName": "Test User"});

contacts.find

Queries the device contacts database and returns one or more Contact objects, each containing the fields specified.

navigator.contacts.find(contactFields, contactSuccess, contactError, contactFindOptions);

Quick Example

function onSuccess(contacts) {
    alert('Found ' + contacts.length + ' contacts.');
};
function onError(contactError) {
    alert('onError!');
};
// find all contacts with 'Bob' in any name field
var options      = new ContactFindOptions();
options.filter   = "Bob";
options.multiple = true;
var fields       = ["displayName", "name"];
navigator.contacts.find(fields, onSuccess, onError, options);

Contact

Contains properties that describe a contact, such as a user's personal or business contact.

Properties

• id: A globally unique identifier. (DOMString)
• displayName: The name of this Contact, suitable for display to end-users. (DOMString)
• name: An object containing all components of a persons name. (ContactName)
• nickname: A casual name by which to address the contact. (DOMString)
• phoneNumbers: An array of all the contact's phone numbers. (ContactField[])
• emails: An array of all the contact's email addresses. (ContactField[])
• addresses: An array of all the contact's addresses. (ContactAddress[])
• ims: An array of all the contact's IM addresses. (ContactField[])
• organizations: An array of all the contact's organizations. (ContactOrganization[])
• birthday: The birthday of the contact. (Date)
• note: A note about the contact. (DOMString)
• photos: An array of the contact's photos. (ContactField[])
• categories: An array of all the user-defined categories associated with the contact. (ContactField[])
• urls: An array of web pages associated with the contact. (ContactField[])

Methods

• clone: Returns a new Contact object that is a deep copy of the calling object, with the id property set to null.
• remove: Removes the contact from the device contacts database, otherwise executes an error callback with a ContactError object.
• save: Saves a new contact to the device contacts database, or updates an existing contact if a contact with the same idalready exists.

Save Quick Example

function onSuccess(contact) {
    alert("Save Success");
};
function onError(contactError) {
    alert("Error = " + contactError.code);
};
// create a new contact object
var contact = navigator.contacts.create();
contact.displayName = "Plumber";
contact.nickname = "Plumber";            // specify both to support all devices
// populate some fields
var name = new ContactName();
name.givenName = "Jane";
name.familyName = "Doe";
contact.name = name;
// save to device
contact.save(onSuccess,onError);

Clone Quick Example

    // clone the contact object
    var clone = contact.clone();
    clone.name.givenName = "John";
    console.log("Original contact name = " + contact.name.givenName);
    console.log("Cloned contact name = " + clone.name.givenName);

Remove Quick Example

function onSuccess() {
    alert("Removal Success");
};
function onError(contactError) {
    alert("Error = " + contactError.code);
};

    // remove the contact from the device
    contact.remove(onSuccess,onError);

ContactAddress

Contains address properties for a Contact object.

Properties

• pref: Set to true if this ContactAddress contains the user's preferred value. (boolean)
• type: A string indicating what type of field this is, home for example. (DOMString)
• formatted: The full address formatted for display. (DOMString)
• streetAddress: The full street address. (DOMString)
• locality: The city or locality. (DOMString)
• region: The state or region. (DOMString)
• postalCode: The zip code or postal code. (DOMString)
• country: The country name. (DOMString)

4. Additional things...

Methods

• contacts.create
• contacts.find

Arguments

• contactFields
• contactSuccess
• contactError
• contactFindOptions

Objects

• Contact
• ContactName
• ContactField
• ContactAddress
• ContactOrganization
• ContactFindOptions
• ContactError

Cordova plugin list

• http://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html
• Basic device information (Device API):

  $ cordova plugin add org.apache.cordova.device

• Network Connection and Battery Events:

  $ cordova plugin add org.apache.cordova.network-information
  $ cordova plugin add org.apache.cordova.battery-status

• Accelerometer, Compass, and Geolocation:

  $ cordova plugin add org.apache.cordova.device-motion
  $ cordova plugin add org.apache.cordova.device-orientation
  $ cordova plugin add org.apache.cordova.geolocation

• Camera, Media playback and Capture:

  $ cordova plugin add org.apache.cordova.camera
  $ cordova plugin add org.apache.cordova.media-capture
  $ cordova plugin add org.apache.cordova.media

• Access files on device or network (File API):

  $ cordova plugin add org.apache.cordova.file
  $ cordova plugin add org.apache.cordova.file-transfer

• Notification via dialog box or vibration:

  $ cordova plugin add org.apache.cordova.dialogs
  $ cordova plugin add org.apache.cordova.vibration

• Contacts:

  $ cordova plugin add org.apache.cordova.contacts

• Globalization:

  $ cordova plugin add org.apache.cordova.globalization

• Splashscreen:

  $ cordova plugin add org.apache.cordova.splashscreen

• Open new browser windows (InAppBrowser):

  $ cordova plugin add org.apache.cordova.inappbrowser

• Debug console:

  $ cordova plugin add org.apache.cordova.console

Basic http server authentication from mobile app via ajax

1. script for ajax 
function make_base_auth(user, password) {
  var tok = user + ':' + password;
  var hash = btoa(tok);
  return "Basic " + hash;
}
$.ajax({
type: 'POST',
beforeSend: function (xhr){  xhr.setRequestHeader('Authorization', make_base_auth("guest", "guest"));   },
xhrFields: {
withCredentials: true
}
,  crossDomain: true,
url: 'http://www.gtatrade.ca/mobiletest',
data: ({name: "aaa"}),
success: function(data){alert(data.name);},
error: function(e, x, settings, exception){alert("error!!" + "," + e.staus + ","  + e.responseText + ","  + x + ","  + settings + ","  + exception);},
dataType: 'json'
});

*** If you send header every time, use ajaxSetup like below.
$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('Authorization', make_base_auth("guest", "guest"));
    }
xhrFields: {
withCredentials: true
}
,  crossDomain: true,
});

2. Server php
if (!isset($_SERVER['PHP_AUTH_USER'])) {
header("Access-Control-Allow-Origin: *"); // required for cross domain .. 
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Authorization");
    header('WWW-Authenticate: Basic realm="My Realm"');
    header('HTTP/1.0 401 Unauthorized');
    echo 'Text to send if user hits Cancel button';
    exit;
} else {
header("Access-Control-Allow-Origin: *");  // required for cross domain ..
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Authorization");
    $output = array("name"=>$_SERVER['PHP_AUTH_USER'], "pass"=>$_SERVER['PHP_AUTH_PW']);
    echo json_encode($output);
}

Some tips for jquery mobile or cordova

1. Phone call
- on the page
<a href="tel:+14163334444" rel="external" class="ui-btn ui-icon-phone ui-btn-icon-left phonelink">(416) 333-4444</a>

- add these linbes to config.xml
  <access origin="tel:*" launch-external="yes" />
  <access origin="mailto:*" launch-external="yes" />

2. Save properties to file
set :
window.localStorage.setItem("name", "yourname");
get:
var name = window.localStorage.getItem("name");

3. push footer to bottom
apply this style...

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}

Add Google map

Please refer to this link....
http://demos.jquerymobile.com/1.4.0/map-geolocation/

I'm going to do these things in this example.
- Add google map to my app.
- Get my current location and add marker.
- Show information window with the address when the marker is clicked.
- Show the boundary position of the google map when a button is clicked.

1. Prepare Page
<html>
    <head>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<style>
#map-page, #map-canvas { width: 100%; height: 93%; padding: 1px; }
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<!-- import google map js -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </head>

<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header">
<h1>Google map demo</h1>
<a href="#" id='showBounds'  class="ui-btn ui-icon-search ui-btn-icon-left">Show</a>
</div>
    <div role="main" class="ui-content" id="map-canvas">
        <!-- map loads here... -->
    </div>
</div>
</html>

2. Prepare Script
<script>
/*
 * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
 * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
 */
 var bounds;
 var map;
$( document ).on( "pageinit", "#map-page", function() {
    var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support
    if ( navigator.geolocation ) {
        function success(pos) {
            // Location found, show map with these coordinates
//alert(pos.coords.latitude);
            drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        }
        function fail(error) {
            drawMap(defaultLatLng);  // Failed to find location, show default map
        }
        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
    } else {
        drawMap(defaultLatLng);  // No geolocation support, show default map
    }
    function drawMap(latlng) {
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!",
        });

var contentString = '<div id="content"><h3>Info</h1></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});

google.maps.event.addListener(marker, 'click', function() {
showAddressFromLatLang(map,marker);
        });

google.maps.event.addListener(map, 'bounds_changed', function() {
           bounds = map.getBounds();
});
// var b = map.getBounds();
// alert(b);
//alert(b.getNorthEast().lat());
// alert(b.getCenter().lat());
    }

});
function showAddressFromLatLang(map,marker){
var pos = marker.getPosition();
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'latLng': pos}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if(results[0]) {
var infowindow0 = new google.maps.InfoWindow({
content: '<div id="content"><h3>' + results[0].formatted_address + '</h3></div>'
});
infowindow0.open(map,marker);
}
}else{
alert("Geocode was not successful     for the following reason: " + status);
}
});
}
$( "#showBounds" ).click(function() {
alert(bounds); // .getSouthWest());
});
</script>

3. Edit config.xml
- Add these lines to config.xml

<feature name="Geolocation">
<param name="ios-package" value="CDVLocation" />
    <param name="android-package" value="org.apache.cordova.GeoBroker" />
</feature>

4. Add permission for android
- Add these lines to AndroidManifest.xml

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

5. Run...

 $ cordova run android

6. Result Screen shot

When 'Show' button is clicked you can see the boundary positions.

Get my phone number from device

1. Add plugin
D:\mobile\hello>cordova plugin add https://github.com/macdonst/TelephoneNumberPlugin

2. Copy telephonenumber.js
- Copy telephonenumber.js to www/js directory of my project.

3. Prepare page

<html>
    <head>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<!-- import telephonenumber.js -->

<script type="text/javascript" charset="utf-8" src="js/telephonenumber.js"></script>

    </head>

<div data-role="page" id="phonenumber-page" data-url="phonenumber-page">
<div data-role="header">
<h1>Get telephone number from device</h1>
</div>
<div  data-role="main" class="ui-content">

<a href="#" class="ui-btn" id="showmynumber">Show</a>

</div>
</div>

</html>

4. Add script
<script>
$( "#showmynumber" ).click(function() {
           var telephoneNumber = cordova.require("cordova/plugin/telephonenumber");
           telephoneNumber.get(function(result) {
                 alert("result = " + result);
          }, function() {
                 alert("error");
          });
});
</script>

5. Edit config.xml
- Add this line to config.xml of my project.

<plugin name="TelephoneNumber" value="com.simonmacdonald.cordova.plugins.TelephoneNumber"/>

6. Run...
D:\mobile\hello>cordova run android

Apache Cordova - gettting started

1. Site
Apache cordova - http://cordova.apache.org/

2. Download and istall...
It is recommended that the cordova CLI be installed from npm rather than downloading this .zip version. For more information on installing the npm version see the Command-Line Interface section of the documentation.

<< The Command-Line Infterface >> 
http://cordova.apache.org/docs/en/3.6.0//guide_cli_index.md.html#The%20Command-Line%20Interface

To install the cordova command-line tool, follow these steps:

step 1>> Download and install Node.js. Following installation, you should be able to invoke node and npm on your command line. If desired, you may optionally use a tool such as nvm or nave to manage your Node.js installation.

Node.js® is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

step 2 >> Download and install a git client, if you don't already have one. Following installation, you should be able to invoke giton your command line. Even though you won't be using git manually, the CLI does use it behind-the-scenes to download some assets when creating a new project.

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

step 3>> Install the cordova module using npm utility of Node.js. The cordova module will automatically be downloaded by the npm utility.

• I'm working on Windows:

  C:\>npm install -g cordova

3. Install required packages

- Install android sdk.

Please see Android Platform Guide for android sdk. => http://cordova.apache.org/docs/en/3.2.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide_requirements_and_support

- Install Apache Ant.

http://ant.apache.org/index.html

- Update path 

- android-sdks\platform-tools
- android-sdks\tools

- apache-ant\bin

4. Create Hello World application

Go to the directory where you maintain your source code, and run a command such as the following:

    $ cordova create hello com.example.hello HelloWorld

5. Add Platforms

All subsequent commands need to be run within the project's directory, or any subdirectories within its scope:

    $ cd hello

Before you can build the project, you need to specify a set of target platforms. Your ability to run these commands depends on whether your machine supports each SDK, and whether you have already installed each SDK. Run any of these from a Mac:

Please see Android Platform Guide for android sdk. => http://cordova.apache.org/docs/en/3.2.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide_requirements_and_support

You don't need to install all of these platforms. 
For android, JAVA_HOME is specified as a system variables.

    $ cordova platform add ios
    $ cordova platform add amazon-fireos
    $ cordova platform add android
    $ cordova platform add blackberry10
    $ cordova platform add firefoxos

Run any of these from a Windows machine, where wp refers to different versions of the Windows Phone operating system:

    $ cordova platform add wp8
    $ cordova platform add windows
    $ cordova platform add amazon-fireos
    $ cordova platform add android
    $ cordova platform add blackberry10
    $ cordova platform add firefoxos

Run this to check your current set of platforms:

    $ cordova platforms ls

(Note the platform and platforms commands are synonymous.)

Run either of the following synonymous commands to remove a platform:

    $ cordova platform remove blackberry10
    $ cordova platform rm amazon-fireos
    $ cordova platform rm android

6. Build the App

By default, the cordova create script generates a skeletal web-based application whose home page is the project's www/index.html file. Edit this application however you want, but any initialization should be specified as part of the deviceready event handler, referenced by default from www/js/index.js.

Run the following command to iteratively build the project:

    $ cordova build

This generates platform-specific code within the project's platforms subdirectory. You can optionally limit the scope of each build to specific platforms:

    $ cordova build ios

The cordova build command is a shorthand for the following, which in this example is also targeted to a single platform:

    $ cordova prepare ios
    $ cordova compile ios

7. Test the App on an Emulator or Device

SDKs for mobile platforms often come bundled with emulators that execute a device image, so that you can launch the app from the home screen and see how it interacts with many platform features. Run a command such as the following to rebuild the app and view it within a specific platform's emulator:

    $ cordova emulate android




Alternately, you can plug the handset into your computer and test the app directly:

    $ cordova run android