Xamarin.Forms Tutorial de serviço da Web

Antes de tentar realizar este tutorial, você deve ter concluído com sucesso:

Crie seu primeiro Xamarin.Forms início rápido de aplicativo .
Tutorial de StackLayout.
Tutorial de Rótulo.
Tutorial de Botão.
Tutorial de CollectionView.

Neste tutorial, você aprenderá a:

Use o Gerenciador de Pacotes NuGet para adicionar Newtonsoft.Json a um Xamarin.Forms projeto.
Crie classes de serviço Web.
Consuma as classes de serviço Web.

Você usará o Visual Studio 2019, ou o Visual Studio para Mac, para criar um aplicativo simples que demonstra como recuperar os dados do repositório .NET da API Web do GitHub. Os dados recuperados serão exibidos em um CollectionView. Estas capturas de tela mostram o aplicativo final:

Adicionar Newtonsoft.Json

13 minutos restantes

Visual Studio
Visual Studio para Mac

Para concluir este tutorial, você precisará ter o Visual Studio 2019 (versão mais recente) com a carga de trabalho Desenvolvimento mobile com .NET instalada. Além disso, você precisará de um Mac emparelhado para compilar o aplicativo do tutorial no iOS. Para obter informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin. Para obter informações sobre como conectar o Visual Studio 2019 a um host de build Mac, confira Emparelhar com o Mac para desenvolvimento no Xamarin.iOS.

Inicie o Visual Studio e crie um novo aplicativo em branco Xamarin.Forms chamado WebServiceTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada WebServiceTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.
Na Gerenciador de Soluções, selecione o projeto WebServiceTutorial, clique com o botão direito do mouse e selecione Gerenciar Pacotes do NuGet...:
No Gerenciador de Pacotes NuGet, selecione a guia Procurar, pesquise pelo pacote do NuGet Newtonsoft.Json, selecione-o e clique no botão Instalar para adicioná-lo ao projeto:

Este pacote será usado para incorporar a desserialização JSON no aplicativo.
Compile a solução para garantir que não haja erros.

Criar classes de serviço Web

11 minutos restantes

Solicitações REST são feitas por HTTP usando os mesmos verbos HTTP que os navegadores da Web usam para recuperar páginas e para enviar dados para os servidores. Neste exercício, você criará uma classe que usa o verbo GET para recuperar os dados do repositório .NET da API Web do GitHub.

Visual Studio
Visual Studio para Mac

No Gerenciador de Soluções, no projeto WebServiceTutorial, adicione uma nova classe chamada Constants ao projeto. Em seguida, em Constants.cs, remova todo o código do modelo e substitua-o pelo código a seguir:
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
Esse código define uma única constante – o ponto de extremidade em relação ao qual as solicitações da Web são feitas.
No Gerenciador de Soluções, no projeto WebServicesTutorial, adicione uma nova classe chamada Repository ao projeto. Em seguida, em Repository.cs, remova todo o código do modelo e substitua-o pelo seguinte código:
```
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; }
    }
}
```
Esse código define uma classe Repository usada para modelar os dados JSON recuperados do serviço Web. Cada propriedade é decorada com um atributo JsonProperty, que contém um nome de campo JSON. Newtonsoft.Json usará esse mapeamento de nomes de campos JSON para propriedades CLR ao desserializar os dados JSON em objetos de modelo.

Observação

A definição de classe acima foi simplificada e não modela totalmente os dados JSON recuperados do serviço Web.

No Gerenciador de Soluções, no projeto WebServiceTutorial, adicione uma nova classe chamada RestService ao projeto. Em seguida, em RestService.cs, remova todo o código do modelo e substitua-o pelo código a seguir:

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;
        }
    }
}

Esse código define um único método, GetRepositoriesAsync, que recupera os dados do repositório .NET da API Web do GitHub. Esse método usa o método HttpClient.GetAsync para enviar uma solicitação GET à API Web especificada pelo argumento uri. A API Web envia uma resposta que é armazenada em um objeto HttpResponseMessage. A resposta inclui um código de status HTTP que indica se a solicitação HTTP foi bem-sucedida ou falhou. Se a solicitação for bem-sucedida, a API Web responderá com o código de status HTTP 200 (OK) e uma resposta JSON, que está na propriedade HttpResponseMessage.Content. Esses dados JSON são lidos para um string usando o método HttpContent.ReadAsStringAsync antes de serem desserializados em um objeto List<Repository> usando o método JsonConvert.DeserializeObject. Esse método usa os mapeamentos entre os nomes de campos JSON e as propriedades CLR, definidos na classe Repository, para executar a desserialização.

Observação

Na UWP, é necessário configurar o HttpClient objeto no construtor para adicionar um cabeçalho User Agent a todas as solicitações e aceitar respostas JSON do GitHub.

Compile a solução para garantir que não haja erros.

No Painel de Soluções, no projeto WebServiceTutorial, adicione uma nova classe chamada Constants ao projeto. Em seguida, em Constants.cs, remova todo o código do modelo e substitua-o pelo código a seguir:
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
Esse código define uma única constante – o ponto de extremidade em relação ao qual as solicitações da Web são feitas.
No Painel de Soluções, no projeto WebServicesTutorial, adicione uma nova classe chamada Repository ao projeto. Em seguida, em Repository.cs, remova todo o código do modelo e substitua-o pelo seguinte código:
```
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; }
    }
}
```
Esse código define uma classe Repository usada para modelar os dados JSON recuperados do serviço Web. Cada propriedade é decorada com um atributo JsonProperty, que contém um nome de campo JSON. Newtonsoft.Json usará esse mapeamento de nomes de campos JSON para propriedades CLR ao desserializar os dados JSON em objetos de modelo.

Observação

A definição de classe acima foi simplificada e não modela totalmente os dados JSON recuperados do serviço Web.
No Painel de Soluções, no projeto WebServiceTutorial, adicione uma nova classe chamada RestService ao projeto. Em seguida, em RestService.cs, remova todo o código do modelo e substitua-o pelo código a seguir:
```
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;
        }
    }
}
```
Esse código define um único método, GetRepositoriesAsync, que recupera os dados do repositório .NET da API Web do GitHub. Esse método usa o método HttpClient.GetAsync para enviar uma solicitação GET à API Web especificada pelo argumento uri. A API Web envia uma resposta que é armazenada em um objeto HttpResponseMessage. A resposta inclui um código de status HTTP que indica se a solicitação HTTP foi bem-sucedida ou falhou. Se a solicitação for bem-sucedida, a API Web responderá com o código de status HTTP 200 (OK) e uma resposta JSON, que está na propriedade HttpResponseMessage.Content. Esses dados JSON são lidos para um string usando o método HttpContent.ReadAsStringAsync antes de serem desserializados em um objeto List<Repository> usando o método JsonConvert.DeserializeObject. Esse método usa os mapeamentos entre os nomes de campos JSON e as propriedades CLR, definidos na classe Repository, para executar a desserialização.
Compile a solução para garantir que não haja erros.

Consumir classes de serviço Web

5 minutos restantes

Neste exercício, você criará uma interface do usuário para consumir a classe RestService, que recupera os dados do repositório .NET da API Web do GitHub. Os dados recuperados serão exibidos por um CollectionView.

Visual Studio
Visual Studio para Mac

No Gerenciador de Soluções, no projeto WebServiceTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:

<?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>

Esse código define declarativamente a interface do usuário para a página, que é composta por um Button e um CollectionView. O Button define seu evento Clicked para um manipulador de eventos chamado OnButtonClicked que será criado na próxima etapa. O CollectionView define a propriedade CollectionView.ItemTemplate para um DataTemplate, que define a aparência de cada item no CollectionView. O filho do DataTemplate é um StackLayout, que contém três objetos Label. Os objetos Label associam as propriedades Text deles às propriedades Name, Description e GitHubHomeUrl de cada objeto Repository. Para obter mais informações sobre a associação de dados, consulte Xamarin.Forms Associação de dados.

Além disso, o CollectionView tem um nome especificado com o atributo x:Name. Isso permite que o arquivo code-behind acesse o objeto usando o nome atribuído.

No Gerenciador de Soluções, no projeto WebServiceTutorial, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Então, em MainPage.xaml.cs, remova todo o código de modelo e substitua-o pelo código a seguir:
```
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;
        }
    }
}
```
O método OnButtonClicked, executado quando alguém toca em Button, invoca o método RestService.GetRepositoriesAsync para recuperar os dados do repositório .NET da API Web do GitHub. O método GetRepositoriesAsync exige um argumento string que representa o URI da API Web que está sendo invocada e isso é retornado pelo campo Constants.GitHubReposEndpoint.

Depois de recuperar os dados solicitados, a propriedade CollectionView.ItemsSource será definida para os dados recuperados.
Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro de seu simulador remoto de iOS ou do Android Emulator escolhido. Toque no Button para recuperar os dados do repositório .NET do GitHub:

Interrompa o aplicativo no Visual Studio.

Para obter mais informações sobre o consumo de serviços Web baseados em REST no Xamarin.Forms, consulte Consumir um serviço Web RESTful (guia).

No Painel de Soluções, no projeto WebServiceTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:

<?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>

Esse código define declarativamente a interface do usuário para a página, que é composta por um Button e um CollectionView. O Button define seu evento Clicked para um manipulador de eventos chamado OnButtonClicked que será criado na próxima etapa. O CollectionView define a propriedade CollectionView.ItemTemplate para um DataTemplate, que define a aparência de cada item no CollectionView. O filho do DataTemplate é um StackLayout, que contém três objetos Label. Os objetos Label associam as propriedades Text deles às propriedades Name, Description e GitHubHomeUrl de cada objeto Repository. Para obter mais informações sobre a associação de dados, consulte Xamarin.Forms Associação de dados.

Além disso, o CollectionView tem um nome especificado com o atributo x:Name. Isso permite que o arquivo code-behind acesse o objeto usando o nome atribuído.

No Painel de Soluções, no projeto WebServiceTutorial, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Então, em MainPage.xaml.cs, remova todo o código de modelo e substitua-o pelo código a seguir:
```
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;
        }
    }
}
```
O método OnButtonClicked, executado quando alguém toca em Button, invoca o método RestService.GetRepositoriesAsync para recuperar os dados do repositório .NET da API Web do GitHub. O método GetRepositoriesAsync exige um argumento string que representa o URI da API Web que está sendo invocada e isso é retornado pelo campo Constants.GitHubReposEndpoint.

Depois de recuperar os dados solicitados, a propriedade CollectionView.ItemsSource será definida para os dados recuperados.
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido. Toque no Button para recuperar os dados do repositório .NET do GitHub:

Interrompa o aplicativo no Visual Studio para Mac.

Para obter mais informações sobre o consumo de serviços Web baseados em REST no Xamarin.Forms, consulte Consumir um serviço Web RESTful (guia).

Parabéns!

100% concluído!

Parabéns por concluir este tutorial, no qual você aprendeu a:

Use o Gerenciador de Pacotes NuGet para adicionar Newtonsoft.Json a um Xamarin.Forms projeto.
Crie classes de serviço Web.
Consuma as classes de serviço Web.

Próximas etapas

Esta série de tutoriais abordou os conceitos básicos da criação de aplicativos móveis com Xamarin.Formso . Para saber mais sobre Xamarin.Forms desenvolvimento, leia sobre a seguinte funcionalidade:

Existem quatro grupos de controle principais usados para criar a interface do usuário de um Xamarin.Forms aplicativo. Para obter mais informações, confira Referência de controles.
A associação de dados é uma técnica para vincular propriedades de dois objetos para que as alterações em uma propriedade sejam automaticamente refletidas na outra propriedade. Para obter mais informações, confira Associação de dados.
Xamarin.Forms Fornece várias experiências de navegação de página, dependendo do tipo de página que está sendo usado. Para obter mais informações, veja Navegação.
Estilos ajudam a reduzir as marcações repetitivas e permitem que a aparência de aplicativos seja alterada com mais facilidade. Para obter mais informações, consulte Estilizando Xamarin.Forms aplicativos.
As extensões de marcação XAML estendem a eficiência e a flexibilidade do XAML permitindo que os atributos do elemento sejam definidos de fontes que não sejam cadeias de caracteres de texto literal. Para obter mais informações, confira Extensões de marcação XAML.
Os modelos de dados fornecem a capacidade de definir a apresentação de dados em exibições com suporte. Para saber mais, veja Modelos de dados.
Cada página, layout e exibição é renderizado diferentemente em cada plataforma usando uma classe Renderer, que por sua vez cria um controle nativo, organiza sua disposição na tela e adiciona o comportamento especificado no código compartilhado. Os desenvolvedores podem implementar suas próprias classes Renderer personalizadas para personalizar a aparência e/ou o comportamento de um controle. Para obter mais informações, veja Renderizadores personalizados.
Efeitos também permitem que os controles nativos em cada plataforma sejam personalizados. Os efeitos são criados em projetos específicos da plataforma por meio da subclasse da PlatformEffect classe e são consumidos anexando-os a um controle apropriado Xamarin.Forms . Para obter mais informações, veja Efeitos.
O código compartilhado pode acessar a funcionalidade nativa por meio da classe DependencyService. Para obter mais informações, consulte Acessar recursos nativos com DependencyService.

Como alternativa, Criando aplicativos móveis comXamarin.Forms , um livro de Charles Petzold, é um bom lugar para aprender mais sobre Xamarin.Forms. O livro está disponível em PDF ou em vários formatos de livro eletrônico.

Compartilhar via

Adicionar Newtonsoft.Json

Criar classes de serviço Web

Consumir classes de serviço Web

Parabéns!

Próximas etapas

Links relacionados