Tutorial App: Web Services - API Clima
sábado, agosto 15, 2015 1 Comments

En este tutorial veremos cómo desarrollar una Aplicación que consuma datos de un API. Probablemente se estén preguntando, ¿qué es una API? Bueno, una API (Aplication Programming Interface), es un conjunto de reglas (código) y especificaciones que las aplicaciones pueden seguir para comunicarse entre ellas. Más que nada la función es facilitar la comunicación entre humano-software.

Últimamente muchas redes sociales y plataformas como Twitter, Facebook, YouTube, Flickr, LinkedIn, Google Maps, Wordpress, etc., han creado diversas API para manejar información, así como permitir el uso de funciones ya existentes en otro software, para no estar reinventando o buscando la manera de consumir información.

La API que utilizaremos el día de hoy, será la proporcionada por Open Weather Map que posee una sección denominada API (http://openweathermap.org/api).

Ahora bien.

Comencemos.

Nuestro primer paso será crear una aplicación del tipo Single View

Agregamos un nombre a nuestra Aplicación

Quitamos la opción de Auto Layout

Lo siguiente será ajustar nuestra App a un tamaño predeterminado como lo es iPhone 4.

El siguiente paso será agregar una serie de elementos:

Un label que será nuestra etiqueta de Clima, otro label para el título de Ciudad, un TextField para capturar el nombre de la ciudad que nos interesa averiguar el clima, después otro label donde aparecerán los datos de la ciudad y por último un botón que no permitirá al momento de hacer un touch up, interactuar con nuestra aplicación.

Buscaremos alguna imagen ya sea en Google, o alguna que tengamos en nuestra computadora, un tipo interesante es buscar "wallpaper for iphone 4" por mencionar un ejemplo, ya que vienen con un tamaño específico para el móvil.

Creamos una carpeta (en XCode se llama "New Group") para crear y agregar nuestra imagen que hemos descargado.

A la derecha se puede ver la carpeta y la imagen contenida.

Una manera además de utilizar un elemento del tipo ImageView, es utilizar los atributos que posee nuestra aplicación, así que lo que haremos será escribir las siguientes instrucciones para que nos agregue la imagen como fondo de nuestra Aplicación.

Lo siguiente será poner los label en color blanco, que aunque al comienzo puede que no se vean, al momento de cargar nuestra App, se cargará con el background de imagen.

Una manera bastante sencilla de lograr menos complicaciones, es crear una constante para almacenar el nombre de la imagen.

Nuestro próximo paso será vincular los elementos y así definir las variables que utilizaremos para nuestra App.

Para la información que usaremos en nuestra App será manejar Open Weather Map, un sitio que provee información climatológica y que a su vez, provee una API desde la cual podremos obtener datos.

Ya si están interesados en buscar más información, métodos para consumir los datos y demás, simplemente se van a la Opción de API dentro del sitio Web

A modo de ejemplo, si nos interesa averiguar la información climatológica de Guadalajara accedemos a la siguiente URL:

http://api.openweathermap.org/data/2.5/weather?q=guadalajara

La cual nos mostrará toda la información en formato JSON.

Si se dan cuenta los datos no se ven con una estructura muy legible.

Así que lo que haremos será instalar la siguiente extensión en nuestro navegador para poder visualizar de una manera más bonita.

Volviendo al código, escribimos la siguiente instrucción, al momento de presionar el botón "iniciarWebService" nos imprimirá en el visualizador el nombre de la ciudad que hayamos escrito, esto nos sirve para verificar si hemos hecho todo bien.

Compilamos y verificamos.

Lo siguiente será crear una función denominada "llamadaWebService", quitamos nuestro printLn() y agregamos la llamada a la función. Una vez en la función escribimos una constante la cual contendrá la url de la API de donde obtendremos información.

Otra constante para convertir la cadena en un tipo url, así como crear una constante para nuestra sesión. Crearemos una constante que nos servirá para denominar o crear tareas que realizaremos con nuestra url y la sesión.

Vemos todo el código que hemos escrito, por ejemplo, una validación para imprimir y revisar si error NO está vacío y así nos imprima el error que posee.

Ahora bien, compilamos y podremos observar que el resultado puesto en println se ve extraño, bueno, esto es la información que nos arroja la url, el detalle es que no posee un formato legible a los humanos.

Así que lo que haremos será crear otra función que nos permitirá recuperar el clima pero ya en formato JSON, para ello creamos una constante llamada "jsonCompleto" que permitirá "serializar" nuestro JSON y permitirle una conversión de datos ilegibles a un formato más estructurado.

Corremos nuestra aplicación y podremos verificar que los datos han cambiado de estructura

Acá se puede ver la función completa para hacer el cambio de JSON legible y la tarea es que se despliegue en texto en pantalla y que en lugar de que aparezca la información en inglés, aparezca en español directamente del API.

Referencias:

http://www.ticbeat.com/tecnologias/que-es-una-api-para-que-sirve/

http://openweathermap.org/

Repositorio de código fuente:

https://github.com/OmarSainz/swift-apps