APPs y APIS. Teoría parte II

En este post utilizaremos la API proporcionada por OpenWeatherMap para la consulta de la previsión del tiempo y lo integraremos en una aplicación desarrollada en Cordova con JQuery Mobile.

Como comentamos en el post anterior, aquí venimos con el post práctico para la integración de APIs de terceros en nuestra aplicación. Mediante este ejemplo se pretenden mostrar los pasos a seguir para integrar estos servicios en nuestros proyectos.

El objetivo es utilizar la API para saber el tiempo actual dependiendo de la localización del usuario. ¡Empecemos pues!

Registro en OpenWeatherMap

Para la utilización de la API, OpenWatherMap exige registrarse y obtener una llave identificativa. Existe una versión gratuita que es la utilizaremos en este ejemplo.

1. Visitamos la página https://openweathermap.org/api y seleccionamos la opción Subscribe.
2. Seleccionamos la versión gratuita y nos registramos siguiendo los pasos correspondientes.
3. Accedemos al correo electrónico facilitado en el registro y guardamos la key que se ha mandado a ella. Esta key se utilizará cada vez que se quiera hacer una consulta en la API.

Crear aplicación de ejemplo

Una vez tengamos la key para las consultas empezamos con la creación de la aplicación. Se supone que tenemos Cordova instalado en el ordenador, controlamos el framework y la distribución de las carpetas dentro del proyecto. En caso contrario se recomienda instalarlo siguiendo la documentación que existe en https://cordova.apache.org/ y consultar el tutorial básico para empaparse del tema:

1. Creamos un nuevo proyecto Cordova escribiendo en la lí­nea de comandos lo siguiente:
   

   cordova create prueba_apis com.ejemplo.apis PruebaApis

2. Añadimos la plataforma en la que ejecutaremos la aplicación:
   

   cordova platform add android (ios en caso de apple)

3. Descargamos jQuery Mobile (https://jquerymobile.com/download/) y copiamos el contenido dentro de la carpeta www/js/jquery. Debe tener los siguientes ficheros:
   • jquery-1.11.3.min.js (o la versión correspondiente)
   • jquery-mobileinit.js
   • jquery-ui.js
   • jquery.mobile-1.4.5.min.js
4. Hacemos lo mismo con las carpetas correspondientes del css. Dentro de www/css copiamos las siguientes:
   • jquery-ui.min.css
   • jquery.mobile-1.4.5.min.css
5. Enlazamos los ficheros en el index.html añadiendo en el head y el body lo siguiente:
   

   Head:
   <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
   <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css"> 
   Body:
   <script type="text/javascript" src="js/jquery/jquery-1.11.3.min.js"></script>
   <script type="text/javascript" src="js/jquery/jquery-mobileinit.js"></script>
   <script type="text/javascript" src="js/jquery/jquery.mobile-1.4.5.min.js"></script>
   <script type="text/javascript" src="js/jquery/jquery-ui.js"></script>
   

6. Ya que estamos retocando el index comentamos el meta de seguridad para evitar problemas. Es el que contiene esto: http-equiv=»Content-Security-Policy».
7. Limpiamos el body del  index.html para que no muestre nada. Dejamos solamente los scripts.
8. En el index.js limpiamos la función onDeviceReady y borramos el receivedEvent.
9. Ejecutamos la aplicación conectando un smartphone y verificamos que no hay nada en la pantalla. Para ello utilizaremos el siguiente comando.
   

   cordova run android ( o ios)
   

Añadir consultas

Ahora que tenemos una aplicación «vacía», el siguiente paso que nos queda es añadir la consulta a la API que nos interesa. Para este ejemplo consultaremos la información actual del tiempo (Current weather Data). La información sobre esta consulta se encuentra en su página correspondiente: https://openweathermap.org/current .

1. Como ejemplo utilizaremos la petición de información meteorológica de Londres. Utilizaremos esta llamada:http://api.openweathermap.org/data/2.5/weather?q=London,uk&units=metric&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   • units=metric: las unidades de la información.
   • appID: mi key para las consultas.

   Escribiendo esto en un navegador devolverá el json que nos interesa. Hay que analizar esta respuesta para saber los datos que se mandan y descifrar la forma de obtenerlos.

2. Sabiendo los datos que devuelve añadiremos en el index.html lo elementos para la visualización:
   

   <div id="content_div">
       <div id="result_div">
             <span id="city_name"></span>
                   <div>
                       <p id="humidity_p"></p>
                       <p id="pressure_p"></p>
                       <p id="temp_p"></p>
                       <p id="temp_max_p"></p>
                       <p id="temp_min_p"></p>
                   </div>    
                   <div>
                       <p id="weather"></p>
                       <p>
                           <img id="weather_icon" src=""/>
                       </p>
                   </div>
        </div>
   </div>
   

   Visualizaremos el nombre de la ciudad, la humedad, la presión, la temperatura actual, la temperatura máxima y mínima, la descripción del tiempo y un icono.

3. En el index.css añadimos los estilos de los elementos introducidos en el paso anterior:
   

   body
   {
       padding: 1em;
   }
   #city_name
   {
       font-size: 22px;
   }
   #weather_icon
   {
       width: 150px;
       height: 150px;
   }
   #result_div
   {
       display: none;
   }
   #result_div,
   #content_div
   {
       padding: 1em;
   }
   
   

4. En el fichero index.js introduciremos la función encargada de hacer la petición de información. Le llamaremos makeCall e irá justo antes del final.
   

   function makeCall()
   {
      $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=London,uk&units=metric&appid=70dd8e218e8b95ba9e48f9c1011f104f",function(result){
               var city_name=result.name;
               var hum="Humidity: "+result.main.humidity+"%";
               var pres="Pressure: "+result.main.pressure+"bar";
               var temp="Temperature: "+result.main.temp+"C";
               var temp_max="Temperature MAX: "+result.main.temp_max+"C";
               var temp_min="Temperature MIN: "+result.main.temp_min+"C";
               var weather="Description: "+result.weather[0].description;
               var icon_url="http://openweathermap.org/img/w/"+result.weather[0].icon+".png";
               $("#city_name").text(city_name);
               $("#humidity_p").text(hum);
               $("#pressure_p").text(pres);
               $("#temp_p").text(temp);
               $("#temp_max_p").text(temp_max);
               $("#temp_min_p").text(temp_min);
               $("#weather").text(weather);
               $("#weather_icon").attr("src",icon_url);
               $("#result_div").show();
           });
   }
   

   Esta función realiza una petición a la url que hemos especificado en el paso 1. Obtiene la información necesaria y la visualiza en los elementos incluidos en el index.html. La url de los iconos está disponible en la página de las apis.

   Dentro de la función onDeviceReady añadimos la llamada a la función.

5. Ejecutamos y verificamos que la aplicación muestra la temperatura actual de Londres.

Open Weather Map API. Ejemplo Tiempo en Londres

Añadir localización

Una vez realizada la primera consulta con éxito. Añadiremos la localización del usuario para obtener información en base a su posicionamiento. Consultando la documentación de la API se puede observar que existe la posibilidad de utilizar la latitud y la longitud de un lugar como variable en la petición. Este es la url que se utilizará:
http://api.openweathermap.org/data/2.5/weather?lat=»+lat+»&lon=»+lon+»&units=metric&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Obtendremos la latitud y longitud gracias a Cordova y lo utilizaremos en la petición.

1. Añadimos el plugin de geolocalización:
   

   cordova plugin add cordova-plugin-geolocation
   

2. Añadimos las variables que utilizaremos para guardar la información de la latitud y longitud:
   

   var lat;
   var lon;
   

3. Añadiremos un botón para que obtenga la posición del usuario y realice la petición. Lo introduciremos antes del div «result_div».
   

   <button id="button" onclick="makeCall()">Hacer consulta</button>
   

   Este botón ejecutará la función makeCall definida en el apartado anterior.

4. Debemos añadir la parte del código responsable de la obtención de la latitud y longitud. Dentro del onDeviceReady reemplazamos el código existente por el siguiente:
   

   var onSuccess = function(position) {
               lat=position.coords.latitude;
               lon=position.coords.longitude;
               $("#button").show();
           };
           // onError Callback receives a PositionError object
           //
           function onError(error) {
               alert('code: '    + error.code    + '\n' +
                     'message: ' + error.message + '\n');
           }
           navigator.geolocation.getCurrentPosition(onSuccess, onError);
   

   Definimos las funciones que se ejecutarán cuando se haga la consulta. Si todo va bien se actualizan las variables de posicionamiento y se visualiza el botón. En caso de que vaya mal se muestra un mensaje de error.

5. Ejecutamos y probamos. Deberá mostrarse el tiempo que haya en base a la localización del usuario.

Open Weather Map API. Consulta del tiempo según ubicación física del usuario,

Como habréis podido observar, esta API tiene un montón de información disponible, previsión del tiempo, históricos, mapas, í­ndices ultravioleta, etc. Os animo a que los probéis ampliando este ejemplo y los integréis en futuros proyectos.

Tenéis el código disponible para su descarga en el siguiente enlace. Código

ErtzilProject Manager