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. 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.
On iOS this has not been the case until very recently. 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. Fortunately, Apple has added support for WebRTC in Safari version 11 on both the desktop and mobile.
More Information:
Stackoverflow: Chrome IOS - Is it just a UIWebView?
Chrome on Android
Firefox for Android
Highlights of Safari 11.0
mobiforge has a good series of examples using various mobile sensor data in HTML5/JavaScript.
Some Simple Examples (Now require HTTPS)
Device Motion and Orientation Permissions on iOS 13JSON 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"
}
]
values can be string, number, null or boolean (true/false)
One JSON data feed that might be interesting is from OpenWeatherMap. Their API is documented here. Of note is that they now require an API Key which is free. Once you get it you tack it onto the end of of any request:
&APPID={APIKEY}
This is the feed for New York City's data: http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial&appid=d21e79452f4461671f1ccf2a209d48c3 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"
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');
// http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial&APPID=d21e79452f4461671f1ccf2a209d48c3
var requestOptions = {
host: 'api.openweathermap.org',
path: '/data/2.5/weather?id=5128581&units=imperial&APPID=d21e79452f4461671f1ccf2a209d48c3'
};
var requestCallback = 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 () {
console.log(str);
});
};
// This is the actual request for the page
http.request(requestOptions, requestCallback).end();
Once we have the JSON, we can turn it into a JavaScript Object using JSON.parse(the json to parse). We can do so, within the requestCallback function, response.on 'end' function.:
var responseObject = JSON.parse(str); 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 setInteraval function, passing in the function we want to run and the amount of time to wait between requests. In this way, we can request "live" data:
setInterval(function() { http.request(requestOptions, requestCallback).end(); },10000);
More information:
How do I make a http request?
A light-weight module that brings window.fetch to Node.js
Public JSON Feeds
9 Cool Public JSON Feeds
Real World JSON Feeds
NASA API
Citibike Station JSON Feed
ITP ICM Feed List