index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Apigee Training App</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="phonegap-2.5.0.js"></script>
    	<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
	<script type="text/javascript" charset="utf-8" src="barcodescanner.js"></script>
  	        <!-- Don't forget to download and include the SDK -->
        <!-- It’s available at the root of github.com/apigee/usergrid-javascript-sdk -->
        <script src="usergrid.js"></script>

        <script type="text/javascript">

            // Initializing the SDK
            var client = new Usergrid.Client({
                orgName:'resultsonlyjosh', // Your Usergrid organization name (or apigee.com username for App Services)
                appName:'sandbox' // Your Usergrid app name
            });

            // A Collection object that will be used to hold the list of books locally
            var my_locations = new Usergrid.Collection( { "client":client, "type":"locations" } );

            $(document).ready( function () {
               $('#create-button').bind('click', createLocation);
               $('#barcodeScanBtn').bind('click', barcodeScan);
                refreshFeed();
                
		function refreshFeed() {
			// Actual network call
			my_locations.fetch(

				// Success Callback
				function () {
					$('#locations-list').empty();
					
					while ( my_locations.hasNextEntity() ) {
						var current_location = my_locations.getNextEntity();

						// Output the book on the page
						$('#locations-list').append('<li><h3>'+current_location.get('name')+'</h3><p>'+current_location.get('address')+'</p></li>');
					}
					
					// Re-apply jQuery Mobile styles
					$('#locations-list').listview('refresh');
				},

				// Failure Callback
				function () { alert("read failed"); }
			);
			
			
		}
		
		function createLocation() {

			new_location = { "name":$("#name-field").val(),
						"address":$("#address-field").val() };

			my_locations.addEntity(new_location, function (error, response) {
				if (error) {
					alert('write failed');
				} else {
					$("#name-field").val(""), $("#address-field").val("");
					refreshFeed();
					history.back();
				}
			});
		}
		
		function alertDismissed() {
			alert("Alert Dismissed Function called!");
		}

		function barcodeScan() {
			navigator.notification.alert(
			    'You started the barcodeScan function!',  // message
			    alertDismissed,         // callback
			    'Say What?',            // title
			    'Go Away'                  // buttonName
			);
			var scanner = window.PhoneGap.require("cordova/plugin/BarcodeScanner");
			scanner.scan( function (result) { alert("We got a barcode\n" + "Result: " + result.text + "\n" + "Format: " + result.format + "\n" + "Cancelled: " + result.cancelled); }, function (error) { alert("Scanning failed: " + error); } );
			alert("went through barcode scan code");
		}
		function onBackKeyDown () {
			alert("you pushed the back button but it does nothing... try the menu button...");
		}
		
		function onMenuKeyDown() {
			alert("you pushed the menu button but it does nothing... try the back button...");
		}
		
		function onSearchKeyDown() {
			alert("you pushed the search button but it doesn't do anything... try the menu button...");
		}

            });
        </script>
	<script type="text/javascript" charset="utf-8">
	
	    // Wait for PhoneGap to load
	    //
	    document.addEventListener("deviceready", onDeviceReady, false);
	
	    // PhoneGap is ready
	    //
	    function onDeviceReady() {
	    	alert("devicereadyfunction fired");
	        navigator.geolocation.getCurrentPosition(onSuccess, onError);
	        var element = document.getElementById('deviceProperties');

        	element.innerHTML = 'Device Name: '     + device.name     + '<br />' + 
                	            'Device Cordova: '  + device.cordova + '<br />' + 
                        	    'Device Platform: ' + device.platform + '<br />' + 
                        	    'Device UUID: '     + device.uuid     + '<br />' + 
                        	    'Device Model: '    + device.model     + '<br />' + 
                        	    'Device Version: '  + device.version  + '<br />';
                        	    
       		document.addEventListener("backbutton", onBackKeyDown, false);
       		document.addEventListener("menubutton", onMenuKeyDown, false);
       		document.addEventListener("searchbutton", onSearchKeyDown, false);
	    }
	
	    // onSuccess Geolocation
	    //
	    function onSuccess(position) {
	        var element = document.getElementById('geolocation');
	        element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' +
	                            'Longitude: '          + position.coords.longitude             + '<br />' +
	                            'Altitude: '           + position.coords.altitude              + '<br />' +
	                            'Accuracy: '           + position.coords.accuracy              + '<br />' +
	                            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
	                            'Heading: '            + position.coords.heading               + '<br />' +
	                            'Speed: '              + position.coords.speed                 + '<br />' +
	                            'Timestamp: '          + new Date(position.timestamp)          + '<br />';
	    }
	
	    // onError Callback receives a PositionError object
	    //
	    function onError(error) {
	        alert('code: '    + error.code    + '\n' +
	              'message: ' + error.message + '\n');
	    }
	    
	 </script>
    </head>
    <body>

        <div data-role="page" data-theme="c" id="page-locations-list">
            <div data-role="header" data-theme="b">
                <h1>Locations</h1>
                <a href="#page-new-location" id="btn-compose" data-icon="plus" data-iconpos="right" data-inline="true" data-role="button" class="ui-btn-right">Add</a>
            </div>

            <div data-role="content">
                <ul id="locations-list" data-role="listview" data-inset="false">
                </ul>
            </div>
    	    <p>
                <button id="barcodeScanBtn" data-inline="true">Scan</button>
            </p>
    	    <p id="geolocation">Finding geolocation...</p>
    	    <p id="deviceProperties">Getting Device Properties...</p>
        </div>


        <div data-role="page" data-theme="b" id="page-new-location">
            <div data-role="header" data-theme="b">
                <h1>Add a New Location</h1>
            </div>
            <div data-role="content">
                <form>
                    <label for="name-field">Name</label>
                    <textarea id="name-field"></textarea>
                    <label for="address-field">Address</label>
                    <textarea id="address-field"></textarea>
                </form>    
                <a href="#page-locations-list" data-role="button" data-theme="c" data-inline="true">Cancel</a>
                <button id="create-button" data-inline="true">Create</button>
            </div>
        </div>
    </body>
</html>