Always On, Always Connected Week 6 - Data Storage and Network Services

Data Storage

HTML 5 Storage Options

PhoneGap Documentation Storage

LocalStorage

Since PhoneGap/Cordova is built on top of WebKit, we have the latest/greatest HTML5 features available. One of these is LocalStorage which takes the form of key/value pairs that you can access in JavaScript: 

var currentUsername = localStorage.getItem("username");
localStorage.setItem("username", currentUsername);
If you want to store other than strings, you have to use parseInt and parseFloat to get other data out. More Information: Dive into HTML5: The Past, Present & Future of Local Storage for Web Applications

File System

PhoneGap/Cordova also has the ability to access the native file system with the File plugin

Install using: phonegap cordova plugin add org.apache.cordova.file

cordova.file.dataDirectory is a path that you can use for the normal device storage 

		
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, gotFSError);

var fileSystem = null;
function gotFS(_fileSystem) {
		fileSystem = _fileSystem;
}

function gotFSError(err) {
		console.log("Error: " + err);
}
If you are using this in combination with image capture, you'll need to do the following after you get the mediaFile capture success callback: 
window.resolveLocalFileSystemURL(mediaFile.fullPath, gotImageURI, gotImageURIerrorHandler);        

function gotImageURI(fileEntry) {
       fileEntry.moveTo(fileSystem.root, "blahblah", movedImageSuccess, gotImageURIerrorHandler);
}

function gotImageURIerrorHandler(err) {
        console.log("ImageURI Error: " + err);
}


function movedImageSuccess(fileEntry) {
        console.log("Moved Image Success" + fileEntry.fullPath);
}

function moveerrorHandler(err) {
        console.log("MoveErrorHander: " + err);
}

File Transfer

Please see the end of week 4 notes.

JSON

JSON stands for JavaScript Object Notation. It has become a standard way to provide machine readable data to and from web services. Despite the fact that JavaScript is part of it's title, it is generally useful in all programming languages.

As stated on the json.org site: An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma).

A simple JSON object 
{
	fist_name: "Shawn",
	last_name: "Van Every
}
An array of JSON objects 
[
{
	fist_name: "Shawn",
	last_name: "Van Every"
},
{
	fist_name: "Joe",
	last_name: "Frank"
}		
]
values can be string, number, null or boolean (true/false)

jQuery JSON Parsing

You can load and parse JSON on with jQuery.

		
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$.ajax({
		  url: "http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial",
		  dataType: 'json',
		  success: function(data) {
			alert("Temperature is: " + data.main.temp );
		  },
		  error: function() {
			alert("error");
		  }
		});        
	});
</script>

More Information:
A JSON Tutorial. Getting started with JSON using JavaScript and jQuery