Tutorial sobre servicio web Xamarin.Forms

Artículo
Developer (Principiante)
Tiempo para finalizar: 14 minutos

Antes de intentar este tutorial, debe haber completado correctamente lo siguiente:

Inicio rápido Compilación de la primera aplicación de Xamarin.Forms.
Tutorial sobre el diseño de pila (StackLayout).
Tutorial sobre las etiquetas (Label).
Tutorial sobre los botones (Button).
Tutorial sobre CollectionView.

En este tutorial, aprenderá a:

Usar el Administrador de paquetes NuGet para agregar Newtonsoft.Json a un proyecto de Xamarin.Forms.
Crear las clases del servicio web.
Usar las clases del servicio web.

Va a usar Visual Studio 2019, o Visual Studio para Mac, para crear una aplicación sencilla que muestre cómo recuperar datos de repositorio para .NET de la API web de GitHub. Los datos recuperados se mostrarán en una vista CollectionView. En las capturas de pantalla siguientes se muestra la aplicación final:

Incorporación de Newtonsoft.Json

13 minutos restantes

Visual Studio
Visual Studio para Mac

Para completar este tutorial debe tener Visual Studio 2019 (versión más reciente), con la carga de trabajo Desarrollo para dispositivos móviles con .NET instalada. Además, necesita un equipo Mac emparejado para compilar la aplicación del tutorial en iOS. Para obtener información sobre la instalación de la plataforma de Xamarin, consulte Instalación de Xamarin. Para obtener información sobre cómo conectar Visual Studio 2019 a un host de compilación de Mac, consulte Emparejar con Mac para el desarrollo de Xamarin.iOS.

Inicie Visual Studio y cree una aplicación de Xamarin.Forms en blanco llamada WebServiceTutorial.

Importante

Los fragmentos de código de C# y XAML en este tutorial necesitan que la solución se denomine WebServiceTutorial. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este tutorial en la solución.

Para obtener más información sobre la biblioteca de .NET Standard creada, vea Anatomía de una aplicación de Xamarin.Forms en Análisis detallado de inicio rápido de Xamarin.Forms.
En el Explorador de soluciones, seleccione el proyecto WebServiceTutorial, haga clic con el botón derecho y, después, seleccione Administrar paquetes NuGet…:
En el Administrador de paquetes NuGet, seleccione la pestaña Examinar, busque el paquete NuGet Newtonsoft.Json, selecciónelo y haga clic en el botón Instalar para agregarlo al proyecto:

Este paquete se usará para incorporar la deserialización de JSON en la aplicación.
Compile la solución para asegurarse de que no haya errores.

Creación de clases de servicios web

11 minutos restantes

Las solicitudes REST se realizan a través de HTTP utilizando los mismos verbos HTTP que utilizan los exploradores web para recuperar páginas y enviar datos a los servidores. En este ejercicio, creará una clase que use el verbo GET para recuperar datos de repositorio para .NET de la API web de GitHub.

Visual Studio
Visual Studio para Mac

En el Explorador de soluciones, agregue una nueva clase denominada Constants al proyecto WebServiceTutorial. Después, en Constants.cs, quite todo el código de plantilla y sustitúyalo por el código siguiente:
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
Este código define una única constante, que es el punto de conexión en el que se efectuarán las solicitudes web.
En el Explorador de soluciones, agregue una nueva clase denominada Repository al proyecto WebServicesTutorial. Después, en Repository.cs, quite todo el código de la plantilla y sustitúyalo por el siguiente:
```
using System;
using Newtonsoft.Json;

namespace WebServiceTutorial
{
    public class Repository
    {
        [JsonProperty("name")]
        public string Name { get; set; }

        [JsonProperty("description")]
        public string Description { get; set; }

        [JsonProperty("html_url")]
        public Uri GitHubHomeUrl { get; set; }

        [JsonProperty("homepage")]
        public Uri Homepage { get; set; }

        [JsonProperty("watchers")]
        public int Watchers { get; set; }
    }
}
```
Este código define una clase Repository que se usa para modelar los datos JSON recuperados del servicio web. Cada propiedad está decorada con un atributo JsonProperty, que contiene un nombre de campo JSON. Newtonsoft.Json usará esta asignación de nombres de campo JSON a las propiedades CLR al deserializar los datos JSON en objetos de modelo.

Nota:

La definición de clase anterior se ha simplificado, y no modela completamente los datos JSON recuperados del servicio web.
En el Explorador de soluciones, agregue una nueva clase denominada RestService al proyecto WebServiceTutorial. Después, en RestService.cs, quite todo el código de plantilla y sustitúyalo por el código siguiente:
```
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace WebServiceTutorial
{
    public class RestService
    {
        HttpClient _client;

        public RestService()
        {
            _client = new HttpClient();

            if (Device.RuntimePlatform == Device.UWP)
            {
                _client.DefaultRequestHeaders.Add("User-Agent", ".NET Foundation Repository Reporter");
                _client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/vnd.github.v3+json"));
            }
        }

        public async Task<List<Repository>> GetRepositoriesAsync(string uri)
        {
            List<Repository> repositories = null;
            try
            {
                HttpResponseMessage response = await _client.GetAsync(uri);
                if (response.IsSuccessStatusCode)
                {
                    string content = await response.Content.ReadAsStringAsync();
                    repositories = JsonConvert.DeserializeObject<List<Repository>>(content);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine("\tERROR {0}", ex.Message);
            }

            return repositories;
        }
    }
}
```
Este código define un único método, GetRepositoriesAsync, que recupera datos de repositorio para .NET de la API web de GitHub. Este método utiliza el método HttpClient.GetAsync para enviar una solicitud GET a la API web especificada mediante el argumento uri. La API web envía una respuesta que se almacena en un objeto HttpResponseMessage. La respuesta incluye un código de estado HTTP, que indica si la solicitud HTTP se realizó correctamente o no. Siempre que la solicitud se realice correctamente, la API web responde con el código de estado HTTP 200 (OK) y una respuesta JSON, que se encuentra en la propiedad HttpResponseMessage.Content. Estos datos JSON se leen en un elemento string mediante el método HttpContent.ReadAsStringAsync antes de que se deserialicen en un objeto List<Repository> mediante el método JsonConvert.DeserializeObject. Este método usa las asignaciones entre los nombres de campo JSON y las propiedades CLR, que se definen en la clase Repository, para realizar la deserialización.

Nota

En UWP, se debe configurar el objeto HttpClient en el constructor para agregar un encabezado de agente de usuario a todas las solicitudes, además de para aceptar las respuestas en formato JSON de GitHub.
Compile la solución para asegurarse de que no haya errores.

En el Panel de solución, agregue una nueva clase denominada Constants al proyecto WebServiceTutorial. Después, en Constants.cs, quite todo el código de plantilla y sustitúyalo por el código siguiente:
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
Este código define una única constante, que es el punto de conexión en el que se efectuarán las solicitudes web.
En el Panel de solución, agregue una nueva clase denominada Repository al proyecto WebServicesTutorial. Después, en Repository.cs, quite todo el código de la plantilla y sustitúyalo por el siguiente:
```
using System;
using Newtonsoft.Json;

namespace WebServiceTutorial
{
    public class Repository
    {
        [JsonProperty("name")]
        public string Name { get; set; }

        [JsonProperty("description")]
        public string Description { get; set; }

        [JsonProperty("html_url")]
        public Uri GitHubHomeUrl { get; set; }

        [JsonProperty("homepage")]
        public Uri Homepage { get; set; }

        [JsonProperty("watchers")]
        public int Watchers { get; set; }
    }
}
```
Este código define una clase Repository que se usa para modelar los datos JSON recuperados del servicio web. Cada propiedad está decorada con un atributo JsonProperty, que contiene un nombre de campo JSON. Newtonsoft.Json usará esta asignación de nombres de campo JSON a las propiedades CLR al deserializar los datos JSON en objetos de modelo.

Nota:

La definición de clase anterior se ha simplificado, y no modela completamente los datos JSON recuperados del servicio web.
En el Panel de solución, agregue una nueva clase denominada RestService al proyecto WebServiceTutorial. Después, en RestService.cs, quite todo el código de plantilla y sustitúyalo por el código siguiente:
```
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Net.Http;
using System.Threading.Tasks;
using Newtonsoft.Json;

namespace WebServiceTutorial
{
    public class RestService
    {
        HttpClient _client;

        public RestService()
        {
            _client = new HttpClient();
        }

        public async Task<List<Repository>> GetRepositoriesAsync(string uri)
        {
            List<Repository> repositories = null;
            try
            {
                HttpResponseMessage response = await _client.GetAsync(uri);
                if (response.IsSuccessStatusCode)
                {
                    string content = await response.Content.ReadAsStringAsync();
                    repositories = JsonConvert.DeserializeObject<List<Repository>>(content);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine("\tERROR {0}", ex.Message);
            }

            return repositories;
        }
    }
}
```
Este código define un único método, GetRepositoriesAsync, que recupera datos de repositorio para .NET de la API web de GitHub. Este método utiliza el método HttpClient.GetAsync para enviar una solicitud GET a la API web especificada mediante el argumento uri. La API web envía una respuesta que se almacena en un objeto HttpResponseMessage. La respuesta incluye un código de estado HTTP, que indica si la solicitud HTTP se realizó correctamente o no. Siempre que la solicitud se realice correctamente, la API web responde con el código de estado HTTP 200 (OK) y una respuesta JSON, que se encuentra en la propiedad HttpResponseMessage.Content. Estos datos JSON se leen en un elemento string mediante el método HttpContent.ReadAsStringAsync antes de que se deserialicen en un objeto List<Repository> mediante el método JsonConvert.DeserializeObject. Este método usa las asignaciones entre los nombres de campo JSON y las propiedades CLR, que se definen en la clase Repository, para realizar la deserialización.
Compile la solución para asegurarse de que no haya errores.

Consumo de clases de servicios web

5 minutos restantes

En este ejercicio, creará una interfaz de usuario para usar la clase RestService, que recupera datos de repositorio para .NET de la API web de GitHub. Una vista CollectionView mostrará los datos recuperados.

Visual Studio
Visual Studio para Mac

En el Explorador de soluciones, en el proyecto WebServiceTutorial, haga doble clic en MainPage.xaml para abrirlo. Después, en MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el código siguiente:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebServiceTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Get Repository Data"
                Clicked="OnButtonClicked" />
        <CollectionView x:Name="collectionView">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontSize="Medium" />
                        <Label Text="{Binding Description}"
                               TextColor="Silver"
                               FontSize="Small" />
                        <Label Text="{Binding GitHubHomeUrl}"
                               TextColor="Gray"
                               FontSize="Caption" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>
```
Este código define mediante declaración la interfaz de usuario de la página, que consiste en un objeto Button y una vista CollectionView. El elemento Button establece su evento Clicked en un controlador de eventos denominado OnButtonClicked que se creará en el paso siguiente. La vista CollectionView establece la propiedad CollectionView.ItemTemplate en un valor DataTemplate, que define la apariencia de cada elemento en CollectionView. El elemento secundario de DataTemplate es un valor StackLayout, que contiene tres objetos Label. Los objetos Label enlazan sus propiedades Text con las propiedades Name, Description y GitHubHomeUrl de cada objeto Repository. Para obtener más información sobre el enlace de datos, consulte Enlace de datos de Xamarin.Forms.

Además, el objeto CollectionView tiene un nombre que se especifica con el atributo x:Name. Esto permite al archivo de código subyacente tener acceso al objeto con el nombre que se le ha asignado.
En el Explorador de soluciones, en el proyecto WebServiceTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, quite todo el código de plantilla y sustitúyalo por el código siguiente:
```
using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace WebServiceTutorial
{
    public partial class MainPage : ContentPage
    {
        RestService _restService;

        public MainPage()
        {
            InitializeComponent();
            _restService = new RestService();
        }

        async void OnButtonClicked(object sender, EventArgs e)
        {
            List<Repository> repositories = await _restService.GetRepositoriesAsync(Constants.GitHubReposEndpoint);
            collectionView.ItemsSource = repositories;
        }
    }
}
```
El método OnButtonClicked, que se ejecuta cuando se pulsa el objeto Button, invoca el método RestService.GetRepositoriesAsync para recuperar datos de repositorio para .NET de la API web de GitHub. El método GetRepositoriesAsync requiere un argumento string que representa el URI de la API web que se invoca; el campo Constants.GitHubReposEndpoint devuelve dicho argumento.

Después de recuperar los datos solicitados, la propiedad CollectionView.ItemsSource se establece en los datos recuperados.
En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido. Pulse el objeto Button a fin de recuperar datos de repositorio para .NET de GitHub:

En Visual Studio, detenga la aplicación.

Para obtener más información sobre cómo usar servicios web basados en REST en Xamarin.Forms, vea Consumo de servicios web RESTful (guía).

En el Panel de solución, en el proyecto WebServiceTutorial, haga doble clic en MainPage.xaml para abrirlo. Después, en MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el código siguiente:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebServiceTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Get Repository Data"
                Clicked="OnButtonClicked" />
        <CollectionView x:Name="collectionView">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontSize="Medium" />
                        <Label Text="{Binding Description}"
                               TextColor="Silver"
                               FontSize="Small" />
                        <Label Text="{Binding GitHubHomeUrl}"
                               TextColor="Gray"
                               FontSize="Caption" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>
```
Este código define mediante declaración la interfaz de usuario de la página, que consiste en un objeto Button y una vista CollectionView. El elemento Button establece su evento Clicked en un controlador de eventos denominado OnButtonClicked que se creará en el paso siguiente. La vista CollectionView establece la propiedad CollectionView.ItemTemplate en un valor DataTemplate, que define la apariencia de cada elemento en CollectionView. El elemento secundario de DataTemplate es un valor StackLayout, que contiene tres objetos Label. Los objetos Label enlazan sus propiedades Text con las propiedades Name, Description y GitHubHomeUrl de cada objeto Repository. Para obtener más información sobre el enlace de datos, consulte Enlace de datos de Xamarin.Forms.

Además, el objeto CollectionView tiene un nombre que se especifica con el atributo x:Name. Esto permite al archivo de código subyacente tener acceso al objeto con el nombre que se le ha asignado.
En el Panel de solución, en el proyecto WebServiceTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, quite todo el código de plantilla y sustitúyalo por el código siguiente:
```
using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace WebServiceTutorial
{
    public partial class MainPage : ContentPage
    {
        RestService _restService;

        public MainPage()
        {
            InitializeComponent();
            _restService = new RestService();
        }

        async void OnButtonClicked(object sender, EventArgs e)
        {
            List<Repository> repositories = await _restService.GetRepositoriesAsync(Constants.GitHubReposEndpoint);
            collectionView.ItemsSource = repositories;
        }
    }
}
```
El método OnButtonClicked, que se ejecuta cuando se pulsa el objeto Button, invoca el método RestService.GetRepositoriesAsync para recuperar datos de repositorio para .NET de la API web de GitHub. El método GetRepositoriesAsync requiere un argumento string que representa el URI de la API web que se invoca; el campo Constants.GitHubReposEndpoint devuelve dicho argumento.

Después de recuperar los datos solicitados, la propiedad CollectionView.ItemsSource se establece en los datos recuperados.
En la barra de herramientas de Visual Studio para Mac, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador de iOS elegido. Pulse el objeto Button a fin de recuperar datos de repositorio para .NET de GitHub:

En Visual Studio para Mac, detenga la aplicación.

Para obtener más información sobre cómo usar servicios web basados en REST en Xamarin.Forms, vea Consumo de servicios web RESTful (guía).

¡Enhorabuena!

100 % completado.

Ha completado el tutorial, donde ha aprendido a:

Usar el Administrador de paquetes NuGet para agregar Newtonsoft.Json a un proyecto de Xamarin.Forms.
Crear las clases del servicio web.
Usar las clases del servicio web.

Pasos siguientes

En esta serie de tutoriales, se han descrito los conceptos básicos de crear aplicaciones móviles con Xamarin.Forms. Para obtener más información sobre el desarrollo de Xamarin.Forms, lea sobre la siguiente función:

Existen cuatro grupos de controles principales que se usan para crear la interfaz de usuario de una aplicación Xamarin.Forms. Para obtener más información, vea Referencia de controles.
El enlace de datos es la técnica que consiste en vincular las propiedades de dos objetos para que los cambios en una propiedad se reflejen automáticamente en la otra propiedad. Para obtener más información, vea Enlace de datos.
Xamarin.Forms ofrece varias experiencias de navegación por páginas, en función del tipo de página que se use. Para obtener más información, consulte Navigation (Navegación).
Los estilos permiten reducir el uso de marcado repetitivo y conseguir que la apariencia de las aplicaciones pueda cambiarse con mayor facilidad. Para obtener más información, consulte Aplicación de estilos a aplicaciones Xamarin.Forms.
Las extensiones de marcado XAML extienden las funciones avanzadas y la flexibilidad de XAML al permitir establecer atributos de elementos desde orígenes distintos de cadenas de texto literales. Para obtener más información, vea Extensiones de marcado XAML.
Las plantillas de datos permiten definir la presentación de los datos en las vistas admitidas. Para obtener más información, consulte Data Templates (Plantillas de datos).
Cada página, diseño y control se representan de forma diferente en cada plataforma mediante una clase Renderer que, a su vez, crea un control nativo, lo organiza en la pantalla y agrega el comportamiento especificado al código compartido. Los desarrolladores pueden implementar sus propias clases Renderer personalizadas para personalizar la apariencia o el comportamiento de un control. Para obtener más información, consulte Custom Renderers (Representadores personalizados).
Los efectos también permiten personalizar los controles nativos de cada plataforma. Los efectos se crean en proyectos específicos de la plataforma mediante la creación de subclases de la clase PlatformEffect. Para usarlos, se adjuntan a un control adecuado de Xamarin.Forms. Para obtener más información, consulte Effects (Efectos).
El código compartido puede tener acceso a la funcionalidad nativa mediante la clase DependencyService. Para obtener más información, consulte Accessing Native Features with DependencyService (Acceso a características nativas con DependencyService).

También es recomendable el libro de Charles Petzold titulado Creación de aplicaciones móviles con Xamarin.Forms para obtener más información sobre Xamarin.Forms. El libro está disponible como un archivo PDF o en una variedad de formatos de libro electrónico.

Compartir vía