Always On, Always Connected Week 12 - PhoneGap

WebKit

Apple, when developing a browser for iOS decided to leverage an open source project, KHTML the HTML layout engine for KDE (a Linux GUI and suite of software). The core of the iOS browser is called WebKit and allows other applications on the OS to incorporate it's functionality as well.

This means that iOS applications can render web pages.

Since Apple based this all on an open Source project, they were compelled to make their code open source as well. http://www.webkit.org

This enabled Google to incorporate it in Android and many others to incorporate it as well: http://trac.webkit.org/wiki/Applications%20using%20WebKit

Intro to PhoneGap

Nitobi, a small private company located in Vancouver developed PhoneGap as a means to create cross platform applications based on rendering HTML and executing JavaScript inside of a WebKit component.

Essentially, PhoneGap bridges the gap between web applications and native applications by allowing web applications to be turned into native applications.

Supported Platforms: http://en.wikipedia.org/wiki/PhoneGap#Supported_platforms

Other Frameworks: http://en.wikipedia.org/wiki/Multiple_phone_web_based_application_framework

Late last year, Adobe purchased Nitobi: http://www.adobe.com/aboutadobe/pressroom/pressreleases/201110/AdobeAcquiresNitobi.html (Flash is dead on mobile?)

Apps made on PhoneGap: http://www.phonegap.com/app

Getting Started with PhoneGap

PhoneGap started with Android guide: http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

PhoneGap Build in the Cloud

Build for 7 OS's in one step: https://build.phonegap.com

Getting Started: https://build.phonegap.com/docs/start

Docs: https://build.phonegap.com/docs

Working with Sound

PhoneGap Media Documentation

Example:
<html>
     <head>
            <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>  
			<script type="text/javascript" charset="utf-8">

			// Wait for PhoneGap to load
			document.addEventListener("deviceready", onDeviceReady, false);

			// PhoneGap is ready
			function onDeviceReady() {
            	//playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3");
        	}

        	// Audio player
        	var my_media = null;
	        var mediaTimer = null;

    	    // Play audio
        	function playAudio() {
				var src="http://www.mobvcasting.com/phonegap_workshop/sound_example/funsound.mp3";
			
	            // Create Media object from src
    	        my_media = new Media(src, onSuccess, onError);

        	    // Play audio
            	my_media.play();
        	}
        	
			// onSuccess Callback
	        function onSuccess() {
    	        console.log("playAudio():Audio Success");
        	}

	        // onError Callback 
    	    function onError(error) {
        	    alert('code: '    + error.code    + '\n' + 
            	      'message: ' + error.message + '\n');
	        }            	
			</script>              
            <title>My Cool App</title>
     </head>
     <body>
          <a href="#" onClick="playAudio();">Play Sound</a>
     </body>
</html>

Working with Location

PhoneGap has a decent GeoLocation API built in: http://docs.phonegap.com/en/2.0.0/cordova_geolocation_geolocation.md.html#Geolocation

Let's go through an example:

<!DOCTYPE html]]>
<html>
  <head>
    <title>PhoneGap Location Tracking Example</title>

	<!-- Documentation here:  http://docs.phonegap.com/en/2.0.0/cordova_geolocation_geolocation.md.html#Geolocation -->

	<!-- Always include the PhoneGap JavaScript -->
    <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>

	<!-- Then you can write JavaScript that utilizes it -->
    <script type="text/javascript" charset="utf-8">
    // This event listener is used so that we don't try to run things before we are ready.
    // Anything that you want to run first should be put on the method specified here
    // "onDeviceReady"
    document.addEventListener("deviceready", onDeviceReady, false);

	// Global variable that holds the ID returned by our geolocation call
    var geoWatchID = null;

	// The onDeviceReady function, code here is run when the device is ready
    function onDeviceReady() {
		// If we don't get an update in 30 seconds (30000 milliseconds) throw an error
        var options = { timeout: 30000 };

		// Tell PhoneGap (navigator) that we want to track the position
		// Call onSuccess when an update occurs
		// Call onError when an error occurs
		// Passing in the options we specified above
        watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
	}

	// When we get an update, the onSuccess method, receives a "position" object
    function onSuccess(position) {
	    // http://docs.phonegap.com/en/2.0.0/cordova_geolocation_geolocation.md.html#Coordinates
    	// position.coords.latitude
	    // position.coords.longitude
    	// position.coords.speed
	    // ...
   
    	// Standard way with DHTML to get an ID within the content of the page
	    // Here we are getting the "geolocation" <p> tag
        var element = document.getElementById('geolocation');

        // Now we can set it's contents using the innerHTML property
        element.innerHTML = 'Latitude: ' + position.coords.latitude      + '<br />' +
                            'Longitude: ' + position.coords.longitude     + '<br />' +
                            '<hr />'      + element.innerHTML;
    }

    // onError Callback receives a PositionError object
    function onError(error) {
        alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }
    </script>
  </head>
  <body>
    <p id="geolocation">Watching geolocation...</p>
  </body>
</html>