ASP .NET Core – Criando serviços backend para aplicações móveis nativas – Parte 03

Neste artigo, eu vou mostrar como criar serviços backend usando ASP .NET Core MVC com suporte a aplicações móveis nativas (Android, iOS e Windows Phone).

Continuando o artigo anterior, vamos concluir o nosso projeto, completando a segunda parte do artigo e definindo o código para incluir, alterar, excluir e selecionar tarefas através do acesso ao serviço ASP .NET Core Web API, que está atendendo no endereço: http://192.168.1.18:5000/api/tarefa/.

Para tornar mais simples o projeto, não estou usando o padrão MVVM. Estou acessando diretamente a camada de serviço, à 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 dados das tarefas. 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 2017 do VS . Ela é grátis e é equivalente a versão Professional.

Definindo o código dos métodos CRUD no 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_Tarefas.Models;  using XF_Tarefas.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;
  • tarefas   que representa uma lista de tarefas.

Como iremos usá-las, elas precisam ser visíveis em todo o arquivo:

DataService dataService;  List<TarefaItem> tarefas;

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()     {              tarefas = await dataService.GetTarefasAsync();              listaTarefas.ItemsSource = tarefas.OrderBy(item => item.Nome).ToList();     }

Estamos obtendo as tarefas a partir da nossa web API, usando o método GetTarefasAsync() e exibindo o resultado no controle ListView, usando sua propriedade ItemSource.

Assim, quando a aplicação for iniciada, ela vai exibir todas as tarefas que definimos em nossa web API.

Código do evento Clicked do botão: adicionar tarefa

Para incluir uma nova tarefa, basta digitar as informações para Nome, Notas e marcar se a tarefa foi concluída ou não. Ao fim, clique no botão Adicionar Tarefa.

O evento Clicked possui o seguinte código:

        private async void btnAdicionar_Clicked(object sender, EventArgs e)          {              if (Valida())              {                  TarefaItem novaTarefa = new TarefaItem                  {                      ID = "T" + DateTime.Now.Millisecond.ToString(),                      Nome = txtNome.Text.Trim(),                      Notas = txtNotas.Text.Trim(),                      Concluido = opConcluido.IsToggled                  };                  try                  {                      await dataService.AddTarefaAsync(novaTarefa);                      LimpaTarefa();                      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 da tarefa foram informadas e, em caso positivo, retornar true.

A seguir, criamos uma nova tarefa e atribuímos os valores digitados. Depois, usamos o método AddTarefaAsync() da classe DataService passando a nova tarefa para ser incluída 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(txtNotas.Text))              {                  return false;              }              else              {                  return true;              }         }

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

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

       private async void OnAtualizar(object sender, EventArgs e)          {              if (Valida())              {                  try                  {                      var mi = ((MenuItem)sender);                      TarefaItem tarefaAtualizar = (TarefaItem)mi.CommandParameter;                        tarefaAtualizar.Nome = txtNome.Text;                      tarefaAtualizar.Notas = txtNotas.Text;                      tarefaAtualizar.Concluido = opConcluido.IsToggled;                      await dataService.UpdateTarefaAsync(tarefaAtualizar);                      LimpaTarefa();                      AtualizaDados();                  }                  catch (Exception ex)                  {                      await DisplayAlert("Erro", ex.Message, "OK");                  }              }              else              {                  await DisplayAlert("Erro", "Dados inválidos...", "OK");              }          }

Para atualizar uma tarefa, você tem que selecionar a tarefa que deseja alterar no ListView para que os dados da tarefa sejam exibidos nas views Entry/Switch acima do ListView.

Após isso, altere os dados e depois, na tarefa, selecione o 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 UpdateTarefaAsync() para atualizar os dados da tarefa.

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/Switch da página:

       private void listaTarefas_ItemSelected(object sender, SelectedItemChangedEventArgs e)          {              var tarefa = e.SelectedItem as TarefaItem;              txtNome.Text = tarefa.Nome;              txtNotas.Text = tarefa.Notas;              opConcluido.IsToggled = tarefa.Concluido;          }

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

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

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

Este código chama o método DeletaTarefaAsync(), da classe DataService, passando a tarefa selecionada para que ele seja removido via web API.

Executando o projeto, iremos obter o seguinte resultado:

Pegue o projeto aqui: XF_Tarefas.zip

You may also like...