Xamarin Forms -  Consumindo JSON via WEB API

Neste artigo vou mostrar como acessar informações no formato JSON usando um serviço REST e como exibir informações de objetos aninhados usando o databinding.

Esse é um artigo prático que mostra como usar alguns recursos do Xamarin.Forms para criar uma aplicação simples mas funcional e útil.

O objetivo da aplicação é acessar o endereço http://jsonplaceholder.typicode.com/users/ e exibir essas informações em um ListView na aplicação Xamarin Forms.

Nesta aplicação vamos aprender a fazer o seguinte:

  • Acessar um serviço RESTFull
  • Serializar e deserializar dados remotos no formato JSON
  • Exibir os dados em um controle ListView usando um DataTemplate

Abaixo vemos as duas páginas da aplicação :

1 - A página principal onde acessamos o serviço REST e exibimos o nome e o email do usuário em um ListView;

A primeira coisa que vou definir será a url de acesso aos dados : http://jsonplaceholder.typicode.com/users/"

Se você digitar essa url no seu navegador e informar o nome de um ator vai obter o seguinte resultado:

Ai temos os dados no formato JSON.

Para gerar as classes para as informações acima acesse o site : http://json2csharp.com/  e digite a url na caixa de texto e clique no botão Generate.

Ao final você verá as classes geradas conforme abaixo. Vamos usar essas classess para definir o nosso modelo de domínio:

Vamos apenas alterar o nome da classe RootObject para User.

Isto posto vamos para a parte prática.

Nota: Em outro artigo eu mostrei uma outra abordagem para esse mesmo serviço onde implementei a aplicação Xamarin Forms para exibir os detalhes do usuário.

Criando um projeto no VS 2017 com Xamarin

Abra o  VS 2017 Community e clique em New Project e a seguir escolha Cross Platform -> Mobile App (Xamarin.Forms) e informe o nome XF_JsonAPI;

A seguir selecione a Plataforma (eu marquei somente Android) e escolha a estratégia de compartilhamento que será .NET Standard.

Clique no botão OK.

Pronto, nosso projeto já esta criado.

Incluindo as referências ao pacote Newtonsoft.Json

Vamos incluir no projeto (em todos eles) a referência à biblioteca NewtonSoft.Json  para dar suporte a serialização dos dados no formato JSON.

No menu Tools clique em Nuget Package Manager e a seguir em Manage Nuget Packages for Solution;

Selecione o pacote conforme mostrado abaixo, selecione instalar em todos os projetos e clique no botão Install.

Ao final teremos as referências incluídas em todos os projetos da nossa solução.

Criando a classe de domínio User

Vamos criar uma classe para representar as informações do nosso domínio que são as informações sobre os usuários que vamos usar na aplicação.

Vamos criar uma nova pasta no projeto compartilhado com o nome Model via menu Project -> Add New Folder.

A seguir clique com o botão direito do mouse sobre a pasta Model e clique em Add Class e informe o nome User.cs e a seguir inclua o código abaixo nesta classe:

Nota: Cole os dados que você obteve a partir do site http://json2csharp.com/

 public class Geo
    {
        public string lat { get; set; }
        public string lng { get; set; }
    }

    public class Address
    {
        public string street { get; set; }
        public string suite { get; set; }
        public string city { get; set; }
        public string zipcode { get; set; }
        public Geo geo { get; set; }
    }

    public class Company
    {
        public string name { get; set; }
        public string catchPhrase { get; set; }
        public string bs { get; set; }
    }

    public class User
    {
        public int id { get; set; }
        public string name { get; set; }
        public string username { get; set; }
        public string email { get; set; }
        public Address address { get; set; }
        public string phone { get; set; }
        public string website { get; set; }
        public Company company { get; set; }
    }

Definindo o código da MainPage para exibir os dados

Como queremos apenas exibir os dados JSON obtidos a partir da url: http://jsonplaceholder.typicode.com/users/
vamos definir o código na view MainPage.xaml.

Abra o arquivo MainPage.xaml e inclua o código abaixo:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_JsonAPI"
             x:Class="XF_JsonAPI.MainPage">

    <ListView x:Name="lvUsers">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding name}" Detail="{Binding email}" TextColor="Blue" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage>

Definimos apenas um ListView chamado lvUsers e um DataTemplate usando um TextCell para exibir o nome e email do usuário obtido.

Agora abra o arquivo code-behind MainPage.xaml.cs e inclua o código a seguir:

using Newtonsoft.Json;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Net.Http;
using Xamarin.Forms;
using XF_JsonAPI.Model;

namespace XF_JsonAPI
{
    public partial class MainPage : ContentPage
    {
        private const string Url = "https://jsonplaceholder.typicode.com/users";
        private readonly HttpClient _client = new HttpClient();
        private ObservableCollection<User> _users;

        public MainPage()
        {
            InitializeComponent();
        }

        async override protected void OnAppearing()
        {
            base.OnAppearing();
            string rescontent = await _client.GetStringAsync(Url);

            List<User> usuarios = JsonConvert.DeserializeObject<List<User>>(rescontent);

            _users = new ObservableCollection<User>(usuarios);
            lvUsers.ItemsSource = _users;
            base.OnAppearing();
        }
    }
}

Definimos o a URI onde temos o serviço REST : http://jsonplaceholder.typicode.com/users/

O método GetStringAsync envia uma requisição HTTP GET de forma assíncrona. A palavra chave await suspende a execução até que o método assíncrono termine e quando isso ocorrer ele retorna um HttpResponseMessage que contém um response HTTP.

Se o código do status no response for um código de sucesso, o corpo do response conterá a representação JSON dos usuários.

Chamamos então o método JsonConvert.DeserializeObject() pra deserializar as informações e obter assim uma coleção de objetos do tipo User.

Agora é só alegria...

Executando o projeto iremos obter:

Acessamos assim dados remotos no formato JSON em uma aplicação Xamarin Forms.

Pegue o código do projeto compartilhado aqui:  XF_JsonAPI.zip

"Bem-aventurados os que guardam os seus testemunhos, e que o buscam com todo o coração"
Salmos 119:2

Referências:

José Carlos Macoratti