Xamarin Forms - Fazendo o Parser em arquivos JSON

 Neste tutorial veremos como fazer o parser em arquivos JSON usando o Xamarin Forms.

Eu já tratei do acesso a arquivos usando a PCL Storage neste artigo aqui.

Hoje vou mostrar como fazer uma análise ou parser de arquivos JSON, acessando e exibindo as informações neles contidas.

Para este artigo eu vou obter o arquivo JSON da seguinte URL : https://jsonplaceholder.typicode.com/photos

Que tem a seguinte estrutura:

[
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "https://via.placeholder.com/600/771796",
    "thumbnailUrl": "https://via.placeholder.com/150/771796"
  },
....
]

E vou salvar as informações em um arquivo chamado photos.json que vou copiar para a pasta Album do projeto Xamarin Forms.

Um detalhe importante é que você tem que alterar a propriedade Build Action deste arquivo json para Embedded resource.

A seguir temos que criar uma classe que representa e estrutura dos dados que desejamos acessar e exibir, e para isso eu vou usar o site : http://json2csharp.com/ .

Basta acessar o site, e digitar a url na caixa de texto, e clicar no botão Generate.

Você verá a classe gerada conforme mostra a figura acima. Copie o código gerado e crie um arquivo chamado Album.cs com o conteúdo desta classe em uma pasta Model no projeto.

    public class Album
    {
        public int albumId { get; set; }
        public int id { get; set; }
        public string title { get; set; }
        public string url { get; set; }
        public string thumbnailUrl { get; set; }
    }

Nosso objetivo é acessar e exibir o contéudo do arquivo em um controle ListView no Xamarin Forms.

Pois, vamos lá...

recursos usados:

Criando o projeto Xamarin Forms

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

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.

Após criar as pastas Model e Album e os arquivos Album.cs e photos.json, a estrutura do projeto deve ficar assim:

Vamos incluir agora a referência ao pacote Newtonsof.Json em nosso projeto.

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

Digite : Newtonsof.Json para localizar o pacote e a seguir marque o pacote e instale-o em todos os projetos:

Criando a interface com o usuário no arquivo MainPage

Abra o arquivo MainPage.xaml e incluia o código abaixo que define um ListView para exibir os dados JSON:

<?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_ParseJson"
             x:Class="XF_ParseJson.MainPage">
    <ListView x:Name="lvAlbum">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal">
                        <Image Source="{Binding thumbnailUrl}" Aspect="AspectFit" />
                        <StackLayout HorizontalOptions="StartAndExpand">
                            <Label Text="{Binding title}" TextColor="Black"/>
                            <Label Text="{Binding url}" TextColor="Gray"/>
                        </StackLayout>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

No código estamos usando um ItemTemplate e definindo um DataTemplate do tipo ViewCell, que é uma célula que pode ser adicionado no ListView ou TableView e que pode conter views definidas pelo usuário. (A renderização de uma ViewCell é feita de forma diferente nas plataformas iOS, Android e Windows Phone.)

exibindo o title, a url e a imagem dos dados JSON obtidos do arquivo photos.json.

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

using Newtonsoft.Json;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Reflection;
using Xamarin.Forms;
using XF_ParseJson.Model;
namespace XF_ParseJson
{
    public partial class MainPage : ContentPage
    {
        private ObservableCollection<Album> _album;
        public MainPage()
        {
            InitializeComponent();
            BindingContext = this;
            var assembly = typeof(MainPage).GetTypeInfo().Assembly;
            Stream stream = assembly.GetManifestResourceStream("XF_ParseJson.Album.photos.json");

            using (var reader = new System.IO.StreamReader(stream))
            {
                var json = reader.ReadToEnd();
                List<Album> albuns = JsonConvert.DeserializeObject<List<Album>>(json);
                _album = new ObservableCollection<Album>(albuns);
                lvAlbum.ItemsSource = _album;
            }
        }
    }
}

Neste código acessamos o arquivo photos.json da pasta Album; a seguir deserializamos as informações para uma lista de objetos do tipo Album atribuindos à propriedade ItemsSource do ListView.

O método GetManifestResourceStream carrega o recurso (o Json) de manifesto especificado desse assembly.

Executando o projeto iremos obter o seguinte resultado:

Assim, conseguimos acessar o arquivo JSON e exibir os dados no Xamarin Forms.

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

Ó Senhor, Senhor nosso, quão admirável é o teu nome em toda a terra, pois puseste a tua glória sobre os céus!
Salmos 8:1

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:


José Carlos Macoratti