Xamarin Forms - Consumindo Dados Json da Web
Fala pessoal, neste artigo irei abordar como consumir dados Json em aplicativos Xamarin Forms. Vou utilizar o Visual Studio for MAC, mas tudo que for citado aqui poderá ser facilmente replicado no Visual Studio para Windows.
Muito bem, chega de papo e mãos a obra!
Primeiramente com o Visual Studio aberto crie um novo projeto clicando no botão New Project.
Figura 1- Novo Projeto
Na próxima tela podemos escolher entre os Templates de projetos: Multiplataform, iOS, tvOS, Android, Mac, .NET Core e outros, vamos escolher a opção Multiplataform, clique em App e a direita em Forms App com linguagem de programação C# e depois clique em Next conforme mostrado na figura 2.
Figura 2 – Templates de projetos
Na próxima tela defina um o App Name para o seu projeto, no meu caso vou chama-lo de BuscaCEP, em seguida insira a Organization Identifier e em Target Platforms você poderá escolher se seu aplicativo irá rodar em na plataforma Android ou iOS, para este projeto vou querer que rode nas duas, mais abaixo poderá optar por usar Portable Class ou Shared Library e a ultima opção se habilitada poderá utilizar arquivos de interfaces XAML, então vamos deixa-la habilitada, agora clique em Next para avançar.
Figura 3 – Dados do Projeto
Agora confirme os dados e habilite as opções que achar interessante, por exemplo, se quiser utilizar um controle de versão git é só habilitar em Version Control, estando tudo de acordo clique em Create para que o Visual Studio crie sua solução.
Figura 4 - Configuração
Quando a criação do seu projeto for concluída você verá algo parecido com a figura 5.
Figura 5 - Solution
Temos então três projetos nesta solução, BuscaCEP(nosso projeto portable), BuscaCEP.Droid e BuscaCEP.iOS, vamos analisar superficialmente cada um deles e entender suas funções aqui. Pois bem, se tratando de um projeto Xamarin Forms vamos centralizar nossas classes e demais arquivos no projeto BuscaCEP(Portable), enquanto isso vamos ver que os projetos BuscaCEP.Droid e BuscaCEP.iOS serão responsáveis por executar o aplicativo dentro de suas respectivas plataformas. Em outro artigo explicarei de forma mais aprofundada como desenvolver aplicativos separadamente dentro de cada plataforma (Android e iOS nativos) com Xamarin. ;)
Dando sequencia ao desenvolvimento de nosso projeto, a ideia é desenvolver um aplicativo que consuma dados no formato Json que são disponibilizados por algumas empresas, para esta demonstração vamos utilizar um serviço disponibilizado na pagina ViaCEP com o endereço “viacep.com.br/ws/01001000/json/” onde vamos trocar o “01001000” do endereço pelo cep que desejamos buscar informações, por exemplo, se trocarmos o valor por “86807000” ficando: “viacep.com.br/ws/86807000/json/” teremos o seguinte resultado:
Figura 6 – Resultado da busca em Json
Bacaninha né!
Vamos então configurar nosso aplicativo para utilizar este serviço?
Primeiramente precisamos mapear as propriedades deste Json e criar uma classe que represente este objeto, para isso vamos extrair estas informações olhando para a propriedade que esta antes dos dois pontos “:” por exemplo: cep, logradouro, complemento, bairro e etc...
Para criação da classe no projeto BuscaCEP(Portable) clique nele com o botão direito do mouse sobre o projeto e clique em Add / New File, depois clique em General e adicione uma Empty Class com o nome de “Endereco”, clique em New para adicionar a classe ao seu projeto.
Figura 7 – Adicionando uma classe
Após isso a classe será adicionado ao seu projeto.
Figura 8 – Projeto com a classe Endereco
Inclua as propriedades na classe Endereço conforme a figura 9 respeitando a estrutura Json que estamos utilizando:
Figura 9 – Classe Endereco
Muito bem, agora algo importante para que possamos trabalhar com Json dentro de nossas aplicações com C#, note que em cada um dos projetos há um diretório chamado Packages, pois bem vamos precisar adicionar o pacote Json.NET nos três projetos clicando com o botão direito do mouse em cima de Packages / Add Packages, busque por Json.NET da Newtonsoft, selecione-o e clique no botão Add Package.
Figura 10 – Pacotes Nuget
Importante!!!
É necessário que o Json.NET esteja nos três projetos dentro dos diretórios Packages, caso contrário o aplicativo não irá funcionar na plataforma que estiver sem o pacote.
Figura 11 – Pacotes Json.NET adicionados
Pronto, agora com o projeto devidamente configurado vamos criar nossa interface de usuário para que possamos inserir um CEP e receber o resultado da busca, então no projeto principal dê dois cliques em BuscaCEPPage.xaml.
Figura 12 – Arquivo XAML da tela principal
Agora insira o código a seguir contendo uma estrutura StackLayout e seus controles conforme 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:BuscaCEP"
x:Class="BuscaCEP.BuscaCEPPage">
<StackLayout>
<Label Text="Busca de Endereços" VerticalOptions="Center" HorizontalOptions="Center" />
<Entry x:Name="txtCEP" Placeholder="Insira um CEP" FontSize="14" Keyboard="Numeric"/>
<Label x:Name="lblLogradouro" Text="{Binding logradouro}"/>
<Label x:Name="lblComplemento" />
<Label x:Name="lblBairro" />
<Label x:Name="lblLocalidade" Text="{Binding localidade}"/>
<Label x:Name="lblUF" />
<Label x:Name="lblUnidade" />
<Label x:Name="lblIBGE" />
<Label x:Name="lblGIA" />
<Button Text="Buscar" Clicked="btnBuscar_Clicked"/>
</StackLayout>
</ContentPage>
Gostaria de explicar alguns detalhes aqui:
Placeholder: Insere uma marca d’água mostrando informações sobre determinado campo.
Keyboard: Define o tipo de teclado que será utilizado para inserção de dados no campo, neste caso o teclado numérico. (Teste as outras opções para um melhor entendimento)
Agora vamos tratar o evento Clicked do botão que será responsável por disparar o código de busca, dê dois cliques no arquivo BuscaCEPPage.xaml.cs, você será levado para o code behind da sua tela principal.
Figura 13 – Arquivo .cs da tela principal
Agora precisamos criar o evento Clicked de nosso botão, vamos colocar o mesmo nome que foi definido no evento Clicked do botão que criamos no XAML, no nosso caso btnBuscar_Clicked.
1.async void btnBuscar_Clicked(object sender, System.EventArgs e)
2.{
3.
4.}
Feito!
Vamos incluir agora a funcionalidade para este evento, lembrando que se deve incluir as referencias para System.Net.Http e Newtonsoft.Json. Seu código deve ficar conforme a listagem abaixo.
01.using Xamarin.Forms;
02.using System.Net.Http;
03.using Newtonsoft.Json;
04.
05.namespace BuscaCEP
06.{
07. public partial class BuscaCEPPage : ContentPage
08. {
09. public BuscaCEPPage()
10. {
11. InitializeComponent();
12. }
13.
14. async void btnBuscar_Clicked(object sender, System.EventArgs e)
15. {
16. var client = new HttpClient();
17. string cep = txtCEP.Text;
18. var json = await client.GetStringAsync($"https://viacep.com.br/ws/{cep}/json/");
19. var dados = JsonConvert.DeserializeObject<endereco>(json);
20.
21. lblLogradouro.Text = dados.logradouro;
22. lblComplemento.Text = dados.complemento;
23. lblBairro.Text = dados.bairro;
24. lblLocalidade.Text = dados.localidade;
25. lblUF.Text = dados.uf;
26. lblUnidade.Text = dados.unidade;
27. lblIBGE.Text = dados.ibge;
28. lblGIA.Text = dados.gia;
29. }
30. }
31.}
Explicando o código acima:
Estou utilizando o método GetStringAsync da classe HttpClient para extrair todo o texto Json resultante da busca e guardando na variável que chamei de json, logo após faço uso do recurso do JsonConvert.DeserializeObject para desserializar nosso Json utilizando a classe que criamos anteriormente chamada de Endereco e passando nossa variável json. Agora passamos para os campos que criamos e nomeamos em nosso XAML as informações capturadas em dados.
Vamos agora testar nosso aplicativo, um detalhe importante aqui é verificar em qual plataforma vai querer realizar o teste, por padrão meu projeto veio setado como plataforma principal o projeto iOS, por isso vai perceber que ele está em negrito, mas quero testar no Android, então vamos clicar com o botão direito do mouse no projeto BuscaCEP.Droid e depois na opção Set As Startup Project, perceberá agora que o projeto BuscaCEP.Droid ficará em negrito ao invés do projeto iOS, feito isso poderás então dar um Run / Start e testar em um emulador Android ou em seu aparelho (Device).
Bom, ficamos por aqui, espero que este artigo possa ajuda-los em seus projeto.
Grande abraço!!! ;)
Links:
https://viacep.com.br
http://json2csharp.com
https://jsonformatter.curiousconcept.com