Mobile

It used to be the case that I would have to prepare a specific set of notes related to doing live web types of things on mobile devices. Thankfully, this has changed a great deal, at least on Android. On Android, using Chrome or Firefox, you can do all or almost all of the same things with WebRTC and Web Sockets that you can do on the desktop version of those applications.

Unfortunately, as with Safari, this is not the case on iOS. While Chrome exists on iOS, it is not allowed to use anything other than the built-in webkit rendering engine which makes adding some features that aren't supported impossible.

More Information:
Stackoverflow: Chrome IOS - Is it just a UIWebView?
Chrome on Android
Firefox for Android
Native Apps
WebRTC Doesn’t Fit iOS – or Does it?

Mobile Sensors in JavaScript/HTML5

Other Data Sources

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.

(XML - Extensible Markup Language is another popular means for providing machine readable data to and from web services.)

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"
}		
]		

One JSON data feed that might be interesting is from OpenWeatherMap. Their API is documented here.

This is the feed for New York City's data: http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial which yields the following:

{"coord":{"lon":-74.005966,"lat":40.714272},"sys":{"country":"US","sunrise":1380106043,"sunset":1380149242},"weather":[{"id":800,"main":"Clear","description":"Sky is Clear","icon":"01n"}],"base":"gdps stations","main":{"temp":60.44,"pressure":1013,"temp_min":54,"temp_max":66.2,"humidity":88},"wind":{"speed":2.22,"gust":3.08,"deg":285},"rain":{"3h":0},"clouds":{"all":0},"dt":1380076310,"id":5128581,"name":"New York","cod":200}
		

We can make this JSON easier to read by doing some formatting: http://jsonformatter.curiousconcept.com/

After formatting we get the following:

{
   "coord":{
      "lon":-74.005966,
      "lat":40.714272
   },
   "sys":{
      "country":"US",
      "sunrise":1380106043,
      "sunset":1380149242
   },
   "weather":[
      {
         "id":800,
         "main":"Clear",
         "description":"Sky is Clear",
         "icon":"01n"
      }
   ],
   "base":"gdps stations",
   "main":{
      "temp":60.44,
      "pressure":1013,
      "temp_min":54,
      "temp_max":66.2,
      "humidity":88
   },
   "wind":{
      "speed":2.22,
      "gust":3.08,
      "deg":285
   },
   "rain":{
      "3h":0
   },
   "clouds":{
      "all":0
   },
   "dt":1380076310,
   "id":5128581,
   "name":"New York",
   "cod":200
}
		

We see a lot of what we might expect, temp, pressure, humidity and so on. Also of interest is the sunrise and sunset time. These are particularly interesting because they are represented in standard "unix timestamp" which is the number of seconds from January 1, 1970. http://www.epochconverter.com/ - Command line: date "+%s"

Requesting and Parsing JSON with Node.js and JavaScript

In order to leverage this content in our applications, we can use Node to request feed and then relay the content to our clients. (We could also do something similar on the client side but that would mean each client would be making the request rather than one from the server. In other words, doing it on the server side yields some performance/resource benefits.)

First need to request the JSON from the server. We can use the built-in http module to do that. Here is an example:

var http = require('http');

// The final callback, when requestPage finishes, this will get called
var requestCallback = function(responseText) {
        console.log(responseText);
};

var requestPage = function(requestCallback) {
        // http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial
        var options = {
                host: 'api.openweathermap.org',
                path: '/data/2.5/weather?id=5128581&units=imperial'
        };

        var innerRequestCallback  = function(response) {
                // This string will contain everything back from the server but it will come in chunks
                var str = '';

                // Got a chunk
                response.on('data', function (chunk) {
                        str += chunk;
                });

                response.on('end', function () {
                		// call the final callback that was passed in
                        requestCallback(str);
                });
        }

		// This is the actual request for the page
        http.request(options, innerRequestCallback).end();
};

// Call our requestPage function
requestPage(requestCallback);

Once we have the JSON, we can turn it into a JavaScript Object using JSON.parse(the json to parse). We can do so, right within the requestCallback function:

var responseObject = JSON.parse(responseText);
console.log(responseObject);

The console.log function will show us the structure of the object so we can pull out the data we want. Here is how we would get the temperature:

responseObject.main.temp

If we wanted to do this repeatedly, we could use the setTimeout function, passing in the function we want to run and the amount of time to wait. In this way, we can request "live" data:

setTimeout(function() { requestPage(requestCallback); },10000);

More information:
How do I make a http request?
Request: Simplified HTTP request client.