Conocer el tiempo de una ciudad usando los Servicios Web de "Google Wheater".

Objetivo:

Mostrar en una página HTML el tiempo y la temperatura de una ciudad usando los servicios web de Google Wheater.

Material Disponible (Código Fuente):
http://ascinformatix.com/material/googlewheater.rar

En esta oportunidad quiero presentar la forma básica para conocer el tiempo de una ciudad usando los servicios de Google Wheater.

Google provee varios servicios para programadores, pueden servirnos indistintamente del lenguaje que usemos. En este caso mostrare como saber la temperatura de una ciudad específica, su humedad, el estado del tiempo usando una simple llamada Http. En otro parte del documento indicaré como implementar este servicio en el website usando una técnica mas avanzada: con Ajax y JSON, para que la actualización de estos datos ocurra "in bkackground",es decir sin recargar la página web para que el tiempo se actualize.

Ejemplo avanzado con presentación de datos obtenidos. Google Wheater solo entrega datos XML, la presentación de estos datos es nuestro propio asunto..

--Aquí no trataré la instalación de PHP, ni el uso de Ajax, ni JSON, ni Javascript, solo me limitaré al ejemplo asumiendo que el usuario tiene los conocimientos y le es familiar el uso de las herramientas--

Cómo Funciona, lo más básico:

Google Wheater entrega datos XML cuando se le hace una consulta acerca de una ciudad en específico, no entrega ningún diseño, de forma alguna. Para obtener datos en formato XML que informen acerca del tiempo para una ciudad específica hay que hacer una llamada a esta URL:

http://www.google.com/ig/api?weather=caracas&hl=es

note los elementos: wheater=caracas y hl=es. los valores a usar aquí depende de nuestra necesidad, por ejemplo para consultar el tiempo en inglés de santiago de chile, se puede usar esta URL:

http://www.google.com/ig/api?weather=santiago&hl=en

Si prueba este ejemplo en un navegador web cualquiera no verá resultados inmediatos en pantalla, debido a que los datos devueltos son XML, en cambio si selecciona "ver código fuente" en la pagina en blanco que aparecerá como resultado de poner estas direcciones en el navegador vera datos como estos:

<?xml version="1.0"?><xml_api_reply version="1"><weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0" ><forecast_information><city data="Santiago, Santiago Metropolitan Region"/><postal_code data="santiago"/><latitude_e6 data=""/><longitude_e6 data=""/><forecast_date data="2011-04-07"/><current_date_time data="2011-04-07 10:00:00 +0000"/><unit_system data="US"/></forecast_information><current_conditions><condition data="Cloudy"/><temp_f data="68"/><temp_c data="20"/><humidity data="Humidity: 100%"/><icon data="/ig/images/weather/cloudy.gif"/><wind_condition data="Wind: N at 0 mph"/></current_conditions><forecast_conditions><day_of_week data="Thu"/><low data="64"/><high data="88"/><icon data="/ig/images/weather/chance_of_rain.gif"/><condition data="Chance of Rain"/></forecast_conditions><forecast_conditions><day_of_week data="Fri"/><low data="61"/><high data="88"/><icon data="/ig/images/weather/mostly_sunny.gif"/><condition data="Mostly Sunny"/></forecast_conditions><forecast_conditions><day_of_week data="Sat"/><low data="59"/><high data="88"/><icon data="/ig/images/weather/mostly_sunny.gif"/><condition data="Mostly Sunny"/></forecast_conditions><forecast_conditions><day_of_week data="Sun"/><low data="61"/><high data="90"/><icon data="/ig/images/weather/mostly_sunny.gif"/><condition data="Mostly Sunny"/></forecast_conditions></weather></xml_api_reply>

Archivos Requeridos y Ejemplo en Linea

Para usar el servicio web de Google Wheater se requieren algunos archivos extra, como dije anteriormente Google Wheater solo entrega datos XML por tanto la presentación de estos es nuestro propio asunto.

http://ascinformatix.com/material/googlewheater.rar

Pasos para Implementar:

Primero debe instalarse un script PHP que entregue los datos en un formato JSON, recuerde que Google Wheater entrega los datos en formato XML. JSON nos permitirá leer estos datos desde una página html usando javascript, por ende podremos usar AJAX para hacer que la actualización de datos sea transparente.

1-Script PHP: googletimereader.php

Este script hará la consulta a Google Wheater, leerá los datos en formato XML y los transformará en datos JSON, ese es su único objetivo. Para invocar el script, este debe estar alojado en un sitio web que permita PHP, una llamada al script debería ser como esta:

http://htca.ascinformatix.com/ejemplos/googlewheater/googletimereader.php?ciudad=barquisimeto

al hacer una llamada a esta URL (arriba), se generará para nosotros una salida en formato JSON, como esta:

{"ciudad":"barquisimeto","descripcion":"Mayormente nublado"
,"temperatura":"22","humedad":"Humedad: 88%"
,"imagen":"\/ig\/images\/weather\/mostly_cloudy.gif"
,"viento":"Viento: E a 8 km\/h"}

Si al correr el ejemplo.html aparece algo como esto:

ejemplo de google wheater

el tiempo en Barquisimeto es: no se pudo leer el tiempo.json_parse is not defined,data: ciudad = $_GET['ciudad']; $weather_current = $array["xml_api_reply"]["weather"]["current_conditions"]; $n = 0; foreach($weather_current as $item) { if(count($item)) { /* 0,data=Mayormente nublado 1,data=72 2,data=22 3,data=Humedad: 94% 4,data=/ig/images/weather/mostly_cloudy.gif 5,data=Viento: E a 13 km/h */ //echo $n.",data=".$item['data']; //echo "
"; if($n == 0) $dtt->descripcion = $item['data']; if($n == 2) $dtt->temperatura = $item['data']; if($n == 3) $dtt->humedad = $item['data']; if($n == 4) $dtt->imagen = $item['data']; if($n == 5) $dtt->viento = $item['data']; $n++; } } echo $json->encode($dtt); ?>

** es porque no se ha configurado php correctamente **. Vuelva al item #1 (1-Script PHP: googletimereader.php) y verifique que se muestre todo como indica este paso.

2-pruebe correr a http://htca.ascinformatix.com/ejemplos/googlewheater/ejemplo.html, debe aparecer así: