Comunidad de diseño web y desarrollo en internet online

Mostrar el clima en Flash con el API Yahoo Weather para AS3

Yahoo API cuenta entre tantas herramientas para desarrolladores una extensa e interesante API en ActionScrip 3 para poder tener los datos climáticos en nuestra web o cualquier aplicación Flash, Flex o AIR.

La API cuenta con una extensa documentación, excelente estructura y muy fácil de utilizar. Aquí pueden consultar la documentación y también pueden descargar la api completa!

Como todo está en ingles me tome el tiempo de traducir los métodos con mi breve o corto entendimiento del ingles. Cualquiera que quiera hacerle una corrección bienvenida sea! :)


Metodos del API Yahoo Weather

Código :

///////////datos de geo localización
//event.data.location.city -- nombre de la ciudad
//event.data.location.country -- país
//event.data.location.latitude -- latitud
//event.data.location.longitude -- longitud
///////////datos generales
//event.data.language -- lenguaje del reporte
//event.data.date -- Mon Oct 13 23:00:00 GMT-0300 2008
//event.data.timeToLive -- tiempo de actualización
//event.data.units.distance -- unidad de distancia
//event.data.units.speed -- unidad de velocidad
//event.data.units.pressure -- unidad de presión
//event.data.units.temperature -- unidad de temperatura
///////////datos actuales
//event.data.current.temperature -- indica la temperatura actual
//event.data.current.description -- descripción del tiempo
//event.data.current.imageURL -- url de la imagen
//event.data.current.code -- estado del tiempo en referencia a su código
//////////datos del viento
//event.data.current.wind.chill -- temperatura del viento
//event.data.current.wind.direction -- dirección del viento en grados según el norte
//event.data.current.wind.speed -- velocidad según event.data.units.speed
//////////datos asmofericos
//event.data.current.atmosphere.humidity -- humedad
//event.data.current.atmosphere.pressure -- presión
//event.data.current.atmosphere.rising -- diferencia de presión
//event.data.current.atmosphere.visibility -- visibilidad en event.data.units.distance
//////////datos astronomicos
//event.data.current.astronomy.sunrise -- fecha, hora amanecer
//event.data.current.astronomy.sunset -- fecha, hora atardecer
//////////pronostico extendido
//event.data.forecast -- devielve un array con el objeto ForecastConditions
//event.data.forecast[x].code -- estado del tiempo en referencia a su código
//event.data.forecast[x].date -- fecha completa
//event.data.forecast[x].high -- temperatura max
//event.data.forecast[x].low -- temperatura minima
//event.data.forecast[x].imageURL -- url de la imagen
//event.data.forecast[x].description -- descripción 


Ejemplo de uso


El ejemplo que les prepare es algo simple pero un punto inicial para ir jugando con esto!, simplemente cuenta de un combo con una lista de localidades, y la carga de datos cada vez que cambiamos de localidad. Utilice la posibilidad de recibir el código del clima para poder usar iconos personalizados ya que los que usa Yahoo son medios feuchos. Para el ejemplo también tuve que hacer una traducción de los estados del tiempo ya que esta API solo está en ingles. La traducción esta en un XML así que la pueden mejorar, aquí pueden consultar los códigos de clima y con respecto al código de cada localidad lo que hice fue visitar su pagina, localizar la localidad y copiar el codigo de la url del navegador.

En los archivos para descargar incluye la API, documentación y ejemplos varios aparte del mío.

Código :

//importamos las clases necesarias
import com.yahoo.webapis.weather.WeatherService;
import com.yahoo.webapis.weather.Weather;
import com.yahoo.webapis.weather.events.WeatherErrorEvent;
import com.yahoo.webapis.weather.events.WeatherResultEvent;
import fl.data.DataProvider;
//cramos el servicio
var ws:WeatherService = new WeatherService();
//var w:Weather = new Weather();

//datos posibles recoger
///////////datos de geo localizacion
//event.data.location.city -- nombre de la ciudad
//event.data.location.country -- pais
//event.data.location.latitude -- latitud
//event.data.location.longitude -- longitud
///////////datos generales
//event.data.language -- lenguaje del reporte
//event.data.date -- Mon Oct 13 23:00:00 GMT-0300 2008
//event.data.timeToLive -- tiempo de actualizacion
//event.data.units.distance -- unidad de distancia
//event.data.units.speed -- unidad de velocidad
//event.data.units.pressure -- unidad de presion
//event.data.units.temperature -- unidad de temperatura
///////////datos actuales 
//event.data.current.temperature -- indica la temperatura actual
//event.data.current.description -- descripcion del tiempo
//event.data.current.imageURL -- url de la imagen
//event.data.current.code -- estado del tiempo en referencia a su codigo
//////////datos del viento
//event.data.current.wind.chill -- temperatura del viento
//event.data.current.wind.direction -- direccion del viento en grados segun el norte
//event.data.current.wind.speed -- vlocidad segun event.data.units.speed
//////////datos asmofericos
//event.data.current.atmosphere.humidity -- humedad
//event.data.current.atmosphere.pressure -- presion
//event.data.current.atmosphere.rising -- diferencia de presion
//event.data.current.atmosphere.visibility -- visibilidad en event.data.units.distance
//////////datos astronomicos
//event.data.current.astronomy.sunrise -- fecha, hora amanecer
//event.data.current.astronomy.sunset -- fecha, hora atardecer
//////////pronostico extendido
//event.data.forecast -- devielve un array con el objeto ForecastConditions
//event.data.forecast[x].code -- estado del tiempo en referencia a su codigo
//event.data.forecast[x].date -- fecha completa
//event.data.forecast[x].high -- temperatura max
//event.data.forecast[x].low -- temperatura minima
//event.data.forecast[x].imageURL -- url de la imagen
//event.data.forecast[x].description -- descipcion

//escuchador cuando recivimos los datos
ws.addEventListener(WeatherResultEvent.WEATHER_LOADED, resultTiempo);
//si hay un error al recibir los datos
function xmlError(event:WeatherErrorEvent):void {
   //weather_txt.text = event.data.toString();
}
//error al leer el xml
ws.addEventListener(WeatherErrorEvent.XML_LOADING, xmlError);
//
//ACTION PARA ESTE EJEMPLO
//
var periodo:String;
var codigoEstado:int;
var miLoader:Loader = new Loader();
var miReq:URLRequest=new URLRequest();
var mes:Array;
var dia:Array;
var contImgGde:Sprite = new Sprite();
//estados del tiempo en español
var xmlData:XML;
var xmlLoader:URLLoader = new URLLoader();
var urlRequest:URLRequest = new URLRequest("clima-es.xml");
xmlLoader.load(urlRequest);
xmlLoader.addEventListener(Event.COMPLETE, this.iniciarXML);
var xmlList:XMLList = new XMLList();
function iniciarXML(e:Event):void {
   xmlData = new XML(xmlLoader.data);
   xmlList = XMLList(xmlData.clima);
   init();
}
//datos para el combo
var ciudades:Array = new Array({label:"Córdoba",data:"ARCA0023"},{label:"Buenos Aires",data:"ARBA0009"},{label:"Rio Cuarto",data:"ARCA0073"},{label:"Villa Carlos Paz",data:"ARCA0108"},{label:"Trevelin",data:"ARCT9203"},{label:"Azul",data:"ARBA0129"},{label:"Ushuaia",data:"ARTF0105"});
var dp:DataProvider = new DataProvider(ciudades);
cb.dataProvider=dp;
cb.addEventListener(Event.CHANGE, cbSelect);
function cbSelect(o:Event):void {
   ws.getWeather(cb.selectedItem.data, "metric");
}

function init() {
   mes = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
   dia = new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado");
   time_txt.autoSize = TextFieldAutoSize.LEFT ;
   contImgGde.y = time_txt.y+15;

   var defaud:Object = new Object();
   defaud = cb.getItemAt(0);

   ws.getWeather(defaud.data, "metric");
   formatFecha();
}

function formatFecha() {
   var date:Date = new Date();
   var minutos:String;
   if (date.getMinutes()<10) {
      minutos = "0"+String(date.getMinutes());
   } else {
      minutos = String(date.getMinutes());
   }
   if (date.getHours()<12) {
      periodo ="am";
   } else {
      periodo ="pm";
   }
   time_txt.text = dia[date.day]+" "+String(date.getDate() +" de "+mes[date.getMonth()]+" - "+date.getHours()+":"+minutos+" "+periodo);

   var contDay:int = date.day;
   switch (date.day) {
      case 5 :
         estado1_txt.text = dia[6];
         estado2_txt.text = dia[0];
         break;
      case 6 :
         estado1_txt.text = dia[0];
         estado2_txt.text = dia[1];
         break;
      default :
         estado1_txt.text = dia[date.day+1];
         estado2_txt.text = dia[date.day+2];
   }
}

function resultTiempo(event:WeatherResultEvent):void {
   codigoEstado = event.data.current.code;
   if (codigoEstado==0) {
      codigoEstado = 3200;
      temperatura_txt.text = "";
      estado_txt.text = "";
      dtosEx_txt.text ="";
   } else {
      temperatura_txt.text = event.data.current.temperature+"º";
      estado_txt.text = xmlList.@value[codigoEstado];
      dtosEx_txt.text = "Viento: "+event.data.current.wind.direction+" "+event.data.current.wind.speed+" "+event.data.units.speed+"\n"+"Humedad: "+event.data.current.atmosphere.humidity+"%"+"\n"+"Visibilidad: "+event.data.current.atmosphere.visibility+" "+event.data.units.distance+"\n"+"Presión atmosférica: "+event.data.current.atmosphere.pressure+" "+event.data.units.pressure;
      esttemp1_txt.text  = event.data.forecast[0].high+"º   "+ event.data.forecast[0].low+"º";
      esttemp2_txt.text  = event.data.forecast[1].high+"º   "+ event.data.forecast[1].low+"º";
   }
   var urlImagen:String = "imgactual/"+codigoEstado+".png";
   miReq = new URLRequest(urlImagen);
   miLoader.load(miReq);
   contImgGde.addChild(miLoader);
   this.addChild(contImgGde);
   formatFecha();
}


Ejemplo funcioando
Descargar ejemplo

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate