Xamarin Forms - Consumindo uma Web API ASP .NET  com HttpClient - III

Neste artigo vou mostrar como criar e consumir uma Web API ASP .NET em uma aplicação Xamarin Forms usando o HttpCliente com o Visual Studio 2015 e a linguagem C#.

Vamos concluir o nosso projeto, completando a segunda parte do artigo e definindo o código para incluir, alterar, excluir e selecionar produtos via acesso remoto à nossa web api que esta atendendo no endereço:  http://macwebapi.somee.com/api/produtos/

Para tornar mais simples o projeto não estou usando o padrão MVVM, e, assim estou acessando diretamente a camada de serviço a partir das Views. Em um projeto mais robusto isso não é recomendado.

Também não estou implementando a interface INotifyPropertyChanged nem usando a coleção ObservableCollection que permitiria atualizar a view automaticamente após qualquer alteração dos dados.

Para fazer a atualização estou chamando o método AtualizaDados() que acessa a web api e retorna todos os produtos. Essa abordagem simplifica o projeto mas não é aconselhável ser usada em um projeto de produção.

Recursos usados:

Nota: Baixe e use a versão Community 2015 do VS ela é grátis e é equivalente a versão Professional.

Definindo o código do arquivo code-behind MainPage.xaml.cs

Abrindo o arquivo MainPage.axml.cs vamos começar definindo os namespaces usados:

using System;
using System.Collections.Generic;
using System.Linq;
using Xamarin.Forms;
using XF_ConsumindoWebAPI.Models;
using XF_ConsumindoWebAPI.Service;

No início do arquivo vamos declarar duas variáveis:

 que iremos usar e que precisam ser vísiveis em todo o arquivo:

 DataService dataService;
 List<Produto> produtos;

Código do construtor MainPage

No construtor da classe MainPage inclua o código abaixo onde criamos uma nova instância da classe DataService() e chamamos o método AtualizaDados();

   public MainPage()
    {
          InitializeComponent();
          dataService = new DataService();
        AtualizaDados();
  }

Método AtualizaDados()

A seguir temos o código do método AtualizaDados():

   async void AtualizaDados()
   {
            produtos = await dataService.GetProdutosAsync();
            listaProdutos.ItemsSource = produtos.OrderBy(item => item.Nome).ToList();
   }

Estamos obtendo os produtos a partir da nossa web api usando o método GetProdutosAsync() e exibindo o resultado no controle ListView usando sua propriedade ItemSource.

Assim quando a aplicação for iniciada ela vai exibir todos os produtos que definimos em nossa web api.

Código do evento Clicked do botão : Adicionar Produto

Para incluir um novo produto basta digitar as informações para Nome, Categoria e Preço de um produto e clicar no botão Adicionar Produto.

O evento Clicked possui o seguinte código:

     private async void btnAdicionar_Clicked(object sender, EventArgs e)
    {
            if (Valida())
            {
                Produto novoProduto = new Produto
                {
                    Nome = txtNome.Text.Trim(),
                    Categoria = txtCategoria.Text.Trim(),
                    Preco = Convert.ToDecimal(txtPreco.Text)
                };

                try
                {
                    await dataService.AddProdutoAsync(novoProduto);
                    LimpaProduto();
                    AtualizaDados();
                }
                catch (Exception ex)
                {
                    await DisplayAlert("Erro", ex.Message, "OK");
                }
            }
            else
            {
                await DisplayAlert("Erro", "Dados inválidos...", "OK");
            }
    }

Este código chama o método Valida() que irá verificar se as informações do produto foram informadas e, em caso positivo, retornar true.

A seguir criamos um novo produto e atribuimos os valores digitados.

Depois usamos o método AddProdutoAsync() da classe DataService passando o novo produto para ser incluído e atualizamos os dados do Listview.

Código do método Valida()

O código do método Valida() apenas retorna true se os dados foram informados e false caso contrário:

       private bool Valida()
        {
            if( string.IsNullOrEmpty(txtNome.Text) &&
               string.IsNullOrEmpty(txtCategoria.Text) && string.IsNullOrEmpty(txtPreco.Text))
            {
                return false;
            }
            else
            {
                return true;
            }
       }

Código da ação de contexto do Listview para atualizar um produto: OnAtualizar

Se você não sabe o que uma ação de contexto do ListView veja o meu artigo:  Xamarin.Forms - Trabalhando com ListView - Macoratti

        private async void OnAtualizar(object sender, EventArgs e)
        {
            if (Valida())
            {
                try
                {
                    var mi = ((MenuItem)sender);
                    Produto produtoAtualizar = (Produto)mi.CommandParameter;

                    produtoAtualizar.Nome = txtNome.Text;
                    produtoAtualizar.Categoria = txtCategoria.Text;
                    produtoAtualizar.Preco = Convert.ToDecimal(txtPreco.Text);

                    await dataService.UpdateProdutoAsync(produtoAtualizar);

                    LimpaProduto();
                    AtualizaDados();
                }
                catch (Exception ex)
                {
                    await DisplayAlert("Erro", ex.Message, "OK");
                }
            }
            else
            {
                await DisplayAlert("Erro", "Dados inválidos...", "OK");
            }
        }

Para atualizar um produto você tem que selecionar o produto que deseja alterar no ListView para que os dados do produto sejam exibidos nas views Entry acima do ListView.

Após isso altere os dados e depois, no produto selecionado no ListView, mantenha o mouse pressionado por alguns segundos para que as ações de contexto sejam exibidas.

Clique então em Alterar para acionar o evento OnAtualizar() que vai usar o método UpdateProdutoAsync() para atualizar os dados do produto.

Código do evento ItemSelected do ListView

No evento ItemSelected do ListView temos o código que vai permitir obter os dados de um item selecionado e exibí-los nas views Entry da página:

   private void listaProdutos_ItemSelected(object sender, SelectedItemChangedEventArgs e)
   {
            var produto = e.SelectedItem as Produto;
            txtNome.Text = produto.Nome;
            txtCategoria.Text = produto.Categoria;
            txtPreco.Text = produto.Preco.ToString();
  }

Código da ação de contexto do Listview para remover um produto: OnDeletar

Na ação de contexto do ListView definida no evento OnDeletar temos o código que irá remover o produto selecionado:

 private async  void OnDeletar(object sender, EventArgs e)
  {
            try
            {
                var mi = ((MenuItem)sender);
                Produto produtoDeletar = (Produto)mi.CommandParameter;
                await dataService.DeletaProdutoAsync(produtoDeletar);
                LimpaProduto();
                AtualizaDados();
            }
            catch (Exception ex)
            {
                await DisplayAlert("Erro", ex.Message, "OK");
            }
 }

Este código chama o método DeletaProdutoAsync() da classe DataService passando o produto selecionado para que ele seja removido via web api.

Executando o projeto iremos obter o seguinte resultado: (á esquerda você ve o projeto Xamarin e à direita a web api sendo atualizada)

Pegue o projeto aqui :   XF_ConsumindoWebAPI.zip  (sem as referências)

"Ora, o fim do mandamento é o amor de um coração puro, e de uma boa consciência, e de uma fé não fingida."
1 Timóteo 1-5

Referências:

José Carlos Macoratti