.NET

23 ago, 2017

Consumindo uma Web API ASP .NET com HttpClient – Parte 03

Publicidade

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 está atendendo no endereço: http://macwebapi.somee.com/api/produtos/.

Para tornar mais simples o projeto, não estou usando o padrão MVVM. 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:

  • Dataservice – que representa uma instância do nosso serviço que iremos usar para acessar a web API;
  • Produtos – que representa uma lista de produtos que iremos usar e que precisam ser visíveis 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 ListViewusando 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 atribuímos 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.

        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.

Depois disso, altere os dados. Em sequência, 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 exibi-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ê vê o projeto Xamarin e à direita, a web API sendo atualizada).

Pegue o projeto aqui: XF_ConsumindoWebAPI.zip