Playing with JS and Web API.

One thing really fun is this area, is that more and more data are freely available from/to the Web. Those data can be REALLY free like Weather Real-time information like the service i used below, or NEED APP REGISTRATION.

Note that for a lot of Web API, App Registration is free, it's more for tracking and avoid duplicate App development or that an IP 'get' too much data.

I'm not a Web Developer, but I think that as a developer if you don't know basis of JavaScript and HTML in our 21 century, you would be lost. So my today experiment, I will get Temperature information for my city, and simply display that.

So in the code below I declared 2 HTML label using an ID, temp_celsius, and temp_fraenheit.


<div>
<p> Rennes Today's Temperatures</p>
<ul>
<li><text> Celsius : </text><label id="temp_celsius" ></label></li>
<li><text> Farenheit : </text><label id="temp_farenheit" ></label></li>
<ul>
</div>


The result is here

Rennes Today's Temperatures

• Celsius :
• Farenheit :

To feel those 2 HTML label with data, i started using JQUERY (you can live without, but when you become familiar with its notation to access DOM element, you always start with it):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>




And now let's call the OpenWeather service . It propose a free Web/REST API to get (or push if you setup your own Weather station) data using JSON format.
My request is "http://api.openweathermap.org/data/2.5/weather?q=Rennes,fr" and in response i received something like:

{"coord":{"lon":-1.67429,"lat":48.11198},"sys":{"country":"FR","sunrise":1374813353,"sunset":1374868234},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}],"base":"gdps stations","main":{"temp":297.15,"pressure":1012,"humidity":50,"temp_min":297.15,"temp_max":297.15},"wind":{"speed":2.6,"deg":290,"var_beg":250,"var_end":330},"clouds":{"all":36},"dt":1374849000,"id":2983990,"name":"Rennes","cod":200}


One of the advantage of using JQuery is that you can get and parse the JSON data in only 1 call of $.getJSON. The field Temp is express in JKelvin as you can have guess when looking its value (297.15 ...).


<script type="text/javascript">
$(document).ready(function(){
var json_request = $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=Rennes,fr&callback=?", function(data) {
console.log("in cb ????" + data.main.temp);
var celsius = (data.main.temp - 273.15);
$("#temp_celsius").html(celsius);
var farenheit = (celsius * 1.8 ) + 32
$("#temp_farenheit").html(farenheit);


}).done(function() { console.log( "second success" ); })
.fail(function() { console.log( "error" ); });
});
</script>


There is nothing really dynamic after that, but my next step will be nicer, it will be the "Stackoverflow Question Meter" to dynamically show how many question are ask on Stackoverflow and using Google Chart API.