ÍNDICE
1. INTRODUCCIÓN
2. CASO PRÁCTICO
2.1. Creación de cuenta en la API «OpenWeatherMap»
2.2. Creación de la aplicación
2.3. Ejecución de la aplicación
3. CONCLUSIÓN

1. INTRODUCCIÓN

Presentación del problema

En este post se va a mostrar cómo consumir una Web API en una aplicación móvil Xamarin.Forms. La API que se va a consumir es OpenWeatherMap, la cual ofrece datos sobre el tiempo actual, pronóstico del tiempo, mapas del tiempo, etc, de miles de ciudades de manera abierta y gratuita para todos los usuarios que quieran usar dichos datos en sus aplicaciones.

Puntos importantes

Para entender el problema es importante entender primero qué es Xamarin.Forms y qué es OpenWeatherMap.

Xamarin.Forms presenta un completo kit de herramientas de interfaz de usuario multiplataforma para desarrolladores .NET. Compile aplicaciones de Android, iOS y Plataforma universal de Windows totalmente nativas con C# en Visual Studio.

Por su parte, OpenWeatherMap es un sitio web que ofrecevarias APIs con datos del tiempo actual y predicciones para miles de ciudades. Entre sus APIs están: Current weather data; Hourly forecast; 16 day / daily forecast; Historical data, Weather maps 2.0; Weather stations, y Air pollution.

El caso de uso que se va a mostrar en este post es el consumo de la API OpenWatherMap para obtener los datos del tiempo actuales de diferentes ciudades en una aplicación móvil.

Resolución del problema

Para resolver el problema se va a crear una aplicación móvil de tipo crossplatform .NET Standard con Xamarin.Forms, es decir, una aplicación móvil multiplataforma (Android, iOS y Windows Phone) programada sobre el entorno único de Xamarin.

2. CASO PRÁCTICO

2.1. Creación de cuenta en la API “OpenWeatherMap»

Creación de cuenta en la API

1. En el sitio web de OpenWeatherMap se crea una cuenta de usuario para poder tener acceso a los servicios que ofrece.

2. Cuando se crea la cuenta se envía un mensaje al correo proporcionado, con la API KEY y con el Endpoint (extremo) necesario para llamar a la API. También se puede ver la API KEY en: API keys (una vez que se haya iniciado sesión)

WeatherApp-OWM-ApiKey
Weather App. API OpenWeatherMap: API Key

Elección de los datos a consumir por la API

3. En la pestaña API aparece un listado de los datos que ofrece el servicio web API. Se elige consumir los datos de “Current Weather data”. Después clic en “API doc” para obtener la información de qué URIs se tienen que usar para consumir ciertos datos de la API.

WeatherApp-OWM-EleccionDatosApi
Weather App. API OpenWeatherMap: Elección de datos de la API

4. En la documentación de la API se elige llamar los datos del tiempo actual para una localización a través del nombre de ciudad. La URI para obtener los datos de la API será: api.openweathermap.org/data/2.5/weather?q={city name}.

WeatherApp-OWM-EleccionDatosApi-URI
Weather App. API OpenWeatherMap: URI de obtención de datos de la API

5. Si hace clic en la URI de ejemplo: api.openweathermap.org/data/2.5/weather?q=London, la cual permite obtener los datos actuales del tiempo que hace en Londres, se ve los datos que devuelve en formato JSON.

WeatherApp-OWM-DatosApi
Weather App. API OpenWeatherMap: Datos de la API

2.2. Creación de la aplicación

Creación de la aplicación Xamarin.Forms

6. Una vez que se tiene la cuenta del servicio API de OpenWeatherMap, desde Visual Studio se procede a crear un proyecto Xamarin.Forms de tipo crossplatform .NET Standard.

WeatherApp-Aplicacion-Creacion

Weather App. Aplicación: Creación de la aplicación móvil crossplatform

7. En el proyecto se instala el paquete NuGet: Newtonsoft Json, que permite mapear (enlazar) las propiedades de un objeto JSON dado por la API con las propiedades de un objeto (instancia) de una clase C# de la aplicación, la cual se usa como modelo para deserializar dicho objeto JSON a un objeto de una clase C# y viceversa ( serializar un objeto de una clase C# a un objeto JSON).

WeatherApp-Aplicacion-NuGet-NewtonsoftJson
Weather App. Aplicación: Instalación del paquete NuGet «Newtonsoft.Json»

Creación de clases de servicios web

8. En el proyecto común “WeatherApp” se crea la carpeta “Models” donde se crea la clase que se usará como modelo de los datos devueltos por el servicio web API, y la carpeta “Repositories” donde se crean las clases necesarias para consumir el servicio web API de OpenWeatherMap.

9. Dentro de WeatherApp > Models se crea la clase “WeatherData.cs” que será el modelo de datos que se usará para mostrar los datos del tiempo actuales obtenidos de la API. De todos los datos que devuelve: api.openweathermap.org/data/2.5/weather?q=London se coge algunos de ellos, por lo que la clase WeatherData tendrá las siguientes propiedades:

WeatherApp-Aplicacion-WeatherData.cs
Weather App. Aplicación: Creación de la clase «WeatherData.cs»

10. Dentro de WeatherApp > Repositories se crea la clase “Constants.cs” que contendrá dos constantes: OpenWeatherMapEndpoint, que contiene la URI del servicio web API (es decir, el extremo de conexión), y OpenWeatherMapAPIKey, la clave de la API.

WeatherApp-Aplicacion-Constants.cs
Weather App. Aplicación: Creación de la clase «Constants.cs»

11. Después, dentro de WeatherApp > Repositories se crea la clase “RestService.cs” que contiene el método GetWeatherDataAsync() al que se le pasa como parámetro la URI de la API. Si el estado de la petición HTTP a la API es correcta, el método deserializa el objeto JSON convirtiéndolo en objetos de la clase WeatherData,con los cuales ya se puede trabajar.

WeatherApp-Aplicacion-RestService.cs
Weather App. Aplicación: Creación de la clase «RestService.cs»

Consumo de clases de servicios web

12. En el archivo “MainPage.xaml” se crea el diseño de la página principal de la aplicación. El diseño esta conformado por un <Grid> (o cuadricula) de 2 columnas y 7 filas.

La distribución del Grid es la siguiente: en la fila 1 (con un ancho de 2 columnas) hay un <Entry> para introducir la ciudad; en la fila 2 (con un ancho de 2 columnas) está un <Button> que al hacer clic sobre él se obtendrá los resultados; en la fila 3, columna 1 (con un ancho de 1 columna) está un <Label> que indica el tipo de dato que se va a obtener y en la fila 3, columna 2 (con un ancho de 1 columna) está otro <Label> que muestra el resultado que se obtiene al pulsar el botón. Las filas 4 a 7 tendrán los demás datos que se espera obtener.

NOTA: En el código XAML, las filas y columnas se inicializan en 0, de modo que la celda de la primera fila y primera columna sería la (0,0).

WeatherApp-Aplicacion-MainPage.xaml
Weather App. Aplicación: Creación de la clase «MainPage.xaml»

13. Después, clic en la vista “MainPage.xaml” para expandir su contenido donde estará la clase “MainPage.xaml.cs” y doble clic en sobre dicho clase para abrirla y ver la lógica de la vista.

La clase tendrá un método asíncrono que da funcionalidad al botón llamado OnButtonClicked(), el cual hace referencia al atributo Clicked de la etiqueta <Button> en la vista “MainPage.xaml”. El método llama al método GetWeatherDataAsync() de la clase “RestService.cs” obteniendo así los datos de la API transformados ya a un objeto (instancia) de la clase WeatherData.Este objeto se asigna al BindingContext, de modo que queda asociado a los elementos de la vista si estos llevan como valor del atributo de la etiqueta “{Binding PROPIEDADCLASE}” (Ej: <Label Grid.Row=»2″ Grid.Column=»1″ Text=»{Binding Title}» />).

WeatherApp-Aplicacion-MainPage.xaml.cs
Weather App. Aplicación: Creación de la clase «MainPage.xaml.cs»

2.3. Ejecución de la aplicación

14. Se establece como proyecto de arranque el proyecto WeatherApp.Android y ejecuta la aplicación con el emulador de Android, en este caso, emulador (Android 8.0 – API 26) se puede ver la aplicación ejecutándose en Android. Se introduce el nombre de una ciudad cualquiera, en este caso, Madrid y se obtiene los datos actuales del tiemplo de la ciudad.

WeatherApp-Aplicacion-EjecucionEnAndroid

Weather App. Aplicación: Ejecución de la aplicación en Android

15. Si se establece como proyecto de arranque el proyecto WeatherApp.iOS y ejecuta la aplicación con el emulador de iOS, en este caso, iPhone X iOS 12.2 se puede ver la aplicación ejecutándose en iOS.

WeatherApp-Aplicacion-EjecucionEniOS
Weather App. Aplicación: Ejecución de la aplicación en iOS

3. CONCLUSIÓN

En resumen, el consumo de servicios web API en Xamarin permite obtener datos para realizar aplicaciones con múltiples funciones. Se puede usar APIs propias o de terceros como OpenWeatherMap.

Entre los problemas que te puedes encontrar es no saber cómo usar la API a pesar de la documentación existente en el sitio de OpenWeatherMap, no saber cómo va a quedar el diseño de la pagina (vista) de la aplicación hasta que no ejecutes si no usas herramientas de previsualización como Gorilla Player y no poder visualizar el proyecto en el emulador de iOS por la configuración previa que hay que hacer.

Espero que el seguimiento de este post os ayude a entender el tema y podáis profundizar en el mismo. ¡Saludos y hasta la próxima!

Autor: Andrés Marcelo Sánchez Luzuriaga
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2018-2019
Código / recursos utilizados / Otros datos de interés: GitHub / Tutorial sobre el servicio web de Xamarin.Forms
Redes Sociales: LinkedIn

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.