Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms...

20

Transcript of Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms...

Page 1: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para
Page 2: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Caro leitor,

Preparamos para este mês de Fevereiro uma coleção de artigos compostos dos mais diversos tipos de assuntos

no mundo da programação.

Para iniciar nossa série, o colunista mensal Luciano Pimenta redigiu a quarta parte do artigo sobre “XamarinForms“,

o qual nos apresenta o controle “ListView”, um dos mais usados em aplicações mobiles para exibir dados em lista. Ele

também irá demonstrar a facilidade de implementá-lo, customizá-lo adicionado imagens, textos e outras dicas

importantes. Já nosso outro colaborador Ricardo Barbosa Crivelli escreveu o artigo “Enviando e-mails com o Laravel”. Ele

nos ensina todo o conceito de “Mailable”, como gerenciar as “views” e os anexos. Ele aborda a classe “Mail” que é muito

mais extensa possuindo muitas outras funcionalidades que serão comentadas em possíveis futuros artigos. Para finalizar

a série sobre o framework “ASP. NET Web API”, o consultor técnico Thiago Cavalheiro Montebugnoli trouxe o artigo

intitulado “ASP. NET Web API – Implementando o método PUT e DELETE”. Neste mês ele implementou os métodos para

alteração e exclusão de dados, com o auxílio da ferramenta “Telerik Fiddler”, a qual faz o papel de cliente, disparando os

serviços supracitados.

Desejo uma ótima leitura, um forte abraço e até o mês que vem!

Marcos César Silva

Diretor Técnico

Editorial

Page 3: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Xamarin Forms – ListView

Para você que está acompanhando a nossa série sobre Xamarin Forms, mostramos até agora o conceito do

Xamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os

controles mais comuns para criação de aplicações mobile.

Neste artigo começaremos a desvendar o ListView, sem dúvida, um dos controles mais usados em aplicações

mobile para apresentação de dados em forma de lista. Veremos como podemos preencher o controle (a fonte de dados),

como customizar o mesmo, entre outras funcionalidades.

ListView

O ListView é um dos controles mais usados em aplicações mobile. Sua característica é mostrar uma lista de

dados, onde podemos ter uma listagem simples, com imagens, agrupada, configurar cabeçalho e rodapé entre outros,

ou seja, podemos customizar a lista de dados.

Os dados que preenchem o ListView podem ser originados de qualquer fonte: banco mobile, um array, consulta

remota etc. O ListView tem várias funcionalidades interessantes, como “puxar” a lista para atualizar, ações de contexto

(menus ao arrastar um item para o lado) etc.

Vamos criar um um novo projeto e dar o nome de “ListViewSample”. Na MainPage remova o Label e adicione o

seguinte código:

<ListView x:Name="listView"/>

No MainPage.xaml.cs vamos colocar o código para preencher o ListView, conforme a Listagem 1.

private void CarregaListView() {

List<string> lista = new List<string>(); lista.Add("C#"); lista.Add("Android"); lista.Add("iOS"); lista.Add("Xamarin Forms");

listView.ItemsSource = lista;

}

Listagem 1. Preenchendo o ListView

Page 4: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Rode o projeto e visualize os dados no ListView (Figura 1).

Figura 01. ListView com os dados

Essa é a maneira mais simples de exibir dados em um ListView, bastante semelhante quando preenchemos um

Picker no artigo anterior. Para mudar o layout, temos muitas opções, onde podemos personalizar a aparência da “célula”,

o item da lista etc.

Temos duas maneiras de personalização da célula: usar as do Xamarin Forms ou criar as nossas próprias

configurações. Para personalizar a célula podemos usar o TextCell, que como o próprio nome indica, mostrará um texto.

No TextCell podemos configurar a cor e também exibir um detalhe (texto abaixo do configurado no TextCell).

Crie uma nova página (“ListViewCellPage.xaml”) e adicione o código do ListView para o da Listagem 2.

<ListView x:Name="listView"> <ListView.ItemTemplate> <DataTemplate> <TextCell Text="{Binding tecnologia}" Detail="{Binding

empresa}" /> </DataTemplate> </ListView.ItemTemplate>

</ListView>

Listagem 2. Customizando as células do ListView

Agora, precisamos alterar o código que carrega os dados, pois temos mais de um texto, assim, vamos criar um

objeto e preencher uma lista (Listagem 3). Crie o arquivo da classe e dê o nome de “DTOListView.cs”.

Page 5: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

public class DTOListView {

public string tecnologia {get; set; } public string tecnologia { get; set; }

... private void CarregaListView() { ObservableCollection<DTOListView> lista = new

ObservableCollection<DTOListView>(); lista.Add(newDTOListView {

tecnologia = "C#", empresa = "Microsoft" }); lista.Add((new

DTOListView { tecnologia = "Android", empresa = "Google" });

lista.Add((new DTOListView { tecnologia = "iOS", empresa = "Apple"

}); lista.Add((new DTOListView { tecnologia = "Xamarin Forms",

empresa = "Xamarin" }); listView.ItemsSource = lista; }

Listagem 3.Mudando os dados do ListView

Usamos um ObservableCollection, classe que representa uma coleção de dados dinâmicos e que oferece

suporte de notificações quando os itens dessa coleção são adicionados, removidos ou a lista é alterada.

Assim, se alterarmos a lista, não precisamos atribuir novamente a propriedade ItensSource do ListView, o

Xamarin se encarrega de atualizar a lista. Rode a aplicação e veja o resultado (Figura 2).

Figura 02. Customizando as células do ListView

E se quisermos mostrar uma imagem na lista? Simples, vamos usar o ImageCell, que além de mostrar um texto,

exibe uma imagem alinhada à esquerda, configurada na fonte de dados do ListView.

Primeiro, vamos mudar o carregamento dos dados, passando imagens para o objeto criado anteriormente. Para

isso, basta adicionar a propriedade “imagem” na classe DTOListView e preencher a mesma no método que carrega os

dados no ListView.

Nota: essas imagens foram adicionadas na pasta Resources>drawable do projeto Android e Resources no

projeto iOS.

Altere o código, no XAML para configurar o ImageCell.

Page 6: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

<ImageCell Text="{Binding tecnologia}" Detail="{Binding empresa}"

ImageSource="{Binding imagem}" / >

Rode a aplicação e veja a lista com imagens (Figura 3).

Figura 03. Imagens no ListView do projeto

E se precisarmos de mais customizações? Podemos usar os recursos do Xamarin Forms e a nossa imaginação.

Dentro de um DataTemplate>ViewCell podemos colocar o layout que precisamos.

De um Label até um Grid podemos usar nessa célula. Altere o código anterior para o da Listagem 4 onde vamos

usar um Image e alterar a disposição dele na célula.

<ListView x:Name="listView">

<ListView.ItemTemplate> lt;DataTemplate> <ViewCell> <StackLayout Orientation="Horizontal"> <Image Source="{Binding imagem}" /> <Label Text="{Binding tecnologia}" TextColor="Blue"

FontAttributes="Bold" /> <Label Text="{Binding empresa}"

HorizontalOptions="EndAndExpand"

TextColor="Gray" FontAttributes="Italic" /> </StackLayout>

</ViewCell> </DataTemplate> </ListView.ItemTemplate>

</ListView>

Listagem 4.Customizando a célula com controles Xamarin Forms

Page 7: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Usando Label e Image, vamos mostrar os mesmos dados, mas com disposição e configuração diferente da

anterior. Veja o resultado na Figura 4.

Figura 04. Customizando o layout da célula

Como comentei, ainda podemos usar um Grid, usando o código da Listagem 5.

<ListView x:Name="listView">

<ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout Orientation="Horizontal"

Padding="10,5,5,10"> <Grid

HorizontalOptions="FillAndExpand">

<Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" />

</Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" />

</Grid.ColumnDefinitions> <Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"

Source="{Binding imagem}" HeightRequest="50" WidthRequest="50" /> <Label Grid.Row="1" Grid.Column="0" Text="{Binding

tecnologia}" TextColor="Blue" HorizontalTextAlignment="Start"/> <Label Grid.Row="1" Grid.Column="1" Text="{Binding

empresa}" HorizontalOptions="EndAndExpand" TextColor="Gray"

HorizontalTextAlignment="End"/> </Grid>

</StackLayout> </ViewCell>

</DataTemplate> </ListView.ItemTemplate>

</ListView>

Listagem 5.Usando um Grid na célula

Page 8: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Temos algumas configurações importantes. HasUnevenRows do ListView indica que os itens tenham o mesmo

tamanho, assim, não teremos problemas de imagens maiores que outras. Colocamos como FiilAndExpand a propriedade

HorizontalOptions do Grid para que ele fique do tamanho da célula.

Ainda no Grid, temos referência a quantidade de colunas e linhas que ele deve ter (nesse exemplo, duas linhas

e duas colunas).

Nota: O Grid NÃO é ligado a uma fonte de dados, as colunas e linhas servem para definir o layout.

Nesse exemplo, passamos “*” para a Height (para a linha) e Width (para a coluna), indicando para pegar o

tamanho proporcional ao espaço restante. Mas, podemos colocar valores fixos ou usar a opção Auto que vai ajustar o

tamanho ao conteúdo da linha. Como estamos customizando uma célula, o layout será replicado para cada item do

ListView.

Após, definimos novamente os controles de tela (Label e Image) e note que nas propriedades dos controles

devemos indicar a linha e coluna que ele deverá exibir no Grid. Na imagem, colocamos um ColumnSpan para usarmos

o tamanho de duas colunas, ou seja, fazermos um “mergê” entre as colunas e vamos mostrar a imagem centralizada.

Também definimos o tamanho da imagem, para que a mesma não fique desproporcional na célula. Tome

cuidado nessa configuração, é muito comum criar layouts totalmente desconfigurados em tela, por indicar

incorretamente a coluna e linha. Rode o projeto e veja o novo visual da célula do ListView (Figura 5).

Figura 5. Usando um grid na célula do ListView

Nota: nesse tipo de layout, é importante usarmos o Xamarin Forms Previewer, pois podemos visualizar o layout

sem precisar ficar carregando a aplicação.

Page 9: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Conclusão

Vimos nesse artigo, apenas um pouco do que o ListView no Xamarin Forms nos proporciona. No próximo artigo,

veremos como agrupar os itens, totalizador de itens agrupados, formatação de cabeçalho e rodapé do controle.

Também veremos como pesquisar em um ListView, algo bastante comum em qualquer aplicativo mobile.

Sobre o Autor

Luciano Pimenta (NOVO DOMINIO: www.lucianopimenta.com) é desenvolvedor Delphi/C# para aplicaÇÕes Web com

ASP.NET, Windows com Win32 e Windows Forms com .NET. Palestrante da 4° edição da Borland Conference (BorCon) e da 1°

Delphi Conference. É MVP Embarcadero, grupo de profissionais que ajudam a divulgar o Delphi no mundo. Atualmente é desenvolvedor da SoftDesign fábrica de softwares em Porto Alegre-RS. Autor de mais de 80 artigos e de mais de 600 vídeos aulas publicadas em revistas e sites especializados, além de treinamentos presenciais e multimídias. É consultor da FP2

Tecnologia (www.fp2.com.br) onde ministra cursos de programação e banco de dados.

E-mail: www.lucianopimenta.net

Page 10: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Enviando e-mails com o Laravel

Introdução

Atendendo à pedidos, o artigo de hoje não será sobre o sistema de biblioteca que estava sendo desenvolvido

com o Laravel. Nós vamos dar um passo a frente e falar sobre o envio de e-mails usando o framework. Como você já

pode imaginar o processo, assim como quase tudo, é muito simples e fácil de ser implementado.

Criando um projeto

Para este artigo nós iremos utilizar um novo projeto, para isso execute o comando abaixo na pasta em que você

deseja armazenar seu projeto. Eu irei chama-lo de Mailer:

laravel new mailer

Criando uma Mailable

Cada tipo de mensagem no Laravel é representado por uma classe que nós chamamos de Mailable. Elas são

armazenadas no diretório app/Mail, que será criado ao gerar a sua primeira Mailable. Existe um comando que

facilita muito a nossa vida que é o make:mail, vamos criar uma mensagem de boas-vindas através do comando:

php artisan make:mail WelcomeMessage

Abra o arquivo gerado em app/Mail/WelcomeMessage.php e veja que ele possui duas funções já pré-

implementadas: o construtor e o método build(). Ele é muito importante, pois como o nome sugere, é o método

responsável por criar toda a nossa mensagem.

Definindo o remetente

O primeiro passo é definir quem irá enviar a mensagem, ou seja, o remetente de nosso e-mail. Isso pode ser

definido de duas formas, a primeira é utilizando o método from():

public function build() { return $this->from('[email protected]')

->view('view.name'); }

É possível também informar o nome passando como segundo parâmetro:

public function build() {

return $this->from('[email protected]', 'Rico Crivelli') ->view('view.name');

}

A segunda forma é declarar um “from global” acabando com a necessidade de se chamar a função from()

em cada um de seus Mailables. Você pode definir o endereço padrão no arquivo config/mail.php:

Page 11: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

...

'from' => [

'address' => env('MAIL_FROM_ADDRESS',

'[email protected]'), 'name' =>

env('MAIL_FROM_NAME', 'Rico Crivelli'),

], ...

É possível configurar um endereço para resposta diferente do remente e esse processo é muito semelhante ao

passo anterior:

public function build() { return $this->from('[email protected]', 'Rico Crivelli')

->replyTo('[email protected]', 'Ricardo Crivelli') ->view('view.name');

}

Configurando a view

É claro que a equipe de desenvolvimento iria fazer uso do Blade para gerir a view do e-mail. Se você não conhece,

o Blade é o mecanismo responsável por renderizar todas as views do Laravel. É muito prático, rápido e simples de ser

utilizado, basta chamar a função view():

public function build() { return $this->from('[email protected]', 'Rico Crivelli')

->replyTo('[email protected]', 'Ricardo Crivelli') ->view('emails.messages.welcome');

}

O Laravel irá buscar pelo arquivo welcome.blade.php em resources/views/emails e

exibi-lo como corpo da mensagem. É claro que você pode guardar seus e-mails junto com suas views em

resources/views, mas para padronização e facilidade de manutenção é aconselhável mantê-las todas em uma

pasta separada.

É possível enviar uma mensagem em texto puro, para em casos que o usuário não consiga renderizar o HTML

ou para acessibilidade. Basta informar a view que será utilizada no método text():

public function build() { return $this->from('[email protected]', 'Rico Crivelli')

->replyTo('[email protected]', 'Ricardo Crivelli') ->view('emails.messages.welcome') ->text('emails.messages.welcome_text');

}

Page 12: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Incluindo informações externas

Vamos supor que o usuário ao se cadastrar irá receber a última edição da The Club anexo no e-mail, e que

nós queremos colocar as informações desta edição na mensagem do e-mail. Para isso vamos criar um modelo

chamado Edicao:

php artisan make:model -m Edicao

Para não prolongar muito o artigo não vou criar o banco de dados e as colunas da tabela, se você ainda não

souber com fazer basta dar uma olhada nos artigos anteriores.

Existem duas formas de tornar as informações disponíveis no corpo do e-mail. A primeira que a que eu

recomendo é através do método with():

<?php namespace App\Mail; use App\Edicao; use Illuminate\Bus\Queueable; use Illuminate\Mail\Mailable; use Illuminate\Queue\SerializesModels; use Illuminate\Contracts\Queue\ShouldQueue; class WelcomeMessage extends Mailable {

use Queueable, SerializesModels; /** @var Edicao */ protected $edicao;

public function __construct( Edicao $edicao ) { $this->edicao = $edicao;

} public function build() { return $this->from( '[email protected]', 'Rico Crivelli' ) ->replyTo( '[email protected]', 'Ricardo Crivelli' ) ->view( 'emails.messages.welcome' ) ->text( 'emails.messages.welcome_text' ) ->with( [ 'mes' => $this->edicao->mes, 'ano' => $this->edicao->ano, 'numero' => $this->edicao->numero

] ); }

}

Eu prefiro este método por ser mais fácil o controle de qual informação estará disponível no e-mail, mas é

claro que você pode passar o objeto $edicao inteiro e chamar as propriedades no corpo do e-mail ({{ $

edicao->numero}}, por exemplo).

A segunda forma é declarando o objeto como público, pois todo objeto público está automaticamente

disponível no corpo do e-mail:

Page 13: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

<?php namespace App\Mail; use App\Edicao; use Illuminate\Bus\Queueable; use Illuminate\Mail\Mailable; use Illuminate\Queue\SerializesModels; use Illuminate\Contracts\Queue\ShouldQueue; class WelcomeMessage extends Mailable {

use Queueable, SerializesModels; /** @var Edicao */ public $edicao; public function __construct( Edicao $edicao ) { $this->edicao = $edicao;

} public function build() { return $this->from( '[email protected]', 'Rico Crivelli' ) ->replyTo( '[email protected]', 'Ricardo Crivelli' ) ->view( 'emails.messages.welcome' ) ->text( 'emails.messages.welcome_text' )

} }

Anexos

Todo mundo que já trabalhou com e-mails no PHP sem o auxílio de um framework sabe o quão difícil esse processo

pode ser, mas como você já deve estar pensando este trabalho é muito simples de ser realizado.

Se o arquivo estiver no mesmo servidor que a aplicação é possível passar o método attach() com o caminho

para o arquivo:

public function build() { return $this->from( '[email protected]', 'Rico Crivelli' ) ->replyTo( '[email protected]', 'Ricardo Crivelli' ) ->view( 'emails.messages.welcome' ) ->text( 'emails.messages.welcome_text' ) ->attach('edicoes/' . $this->edicao->ano . '/' . $this->edicao->numero .

'.pdf'); }

Note que eu concatenei as informações da edição, então se formos anexar a edição número 10 do ano de

2019 o arquivo edições/2019/10.pdf será anexado, mas ele será enviado com o nome 10.pdf. Para

alterar esse nome ou o tipo do arquivo nós podemos informa-lo no código:

public function build() { return $this->from( '[email protected]', 'Rico Crivelli' ) ->replyTo( '[email protected]', 'Ricardo Crivelli' ) ->view( 'emails.messages.welcome' ) ->text( 'emails.messages.welcome_text' ) ->attach('edicoes/' . $this->edicao->ano . '/' . $this->edição

->numero . '.pdf', [

'as' => 'ultima-edicao.pdf', 'mime' => 'application/pdf',

]); }

Page 14: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Agora o mesmo arquivo será anexado, mas o seu nome será ultima-edicao.pdf.

Enviando o e-mail

Agora que nossa mensagem está pronta é hora de enviá-la, mas lembre-se que o Mailable é somente a definição

de como será o e-mail, o envio é feito pelo seu Controller.

Vamos supor que você possui um formulário de cadastro, com nome e e-mail do usuário. Para enviar a

mensagem basta chamar o método to() da face Mail e informar o remente:

public function store(Request $request) { $user = new User([ 'nome' => $request->get('nome'), 'email' => $request->get('email'), 'senha' => new Password($request->get('password'))

]); Mail::to($request->get('email'), $request->get('nome'))->send();

}

Conclusão

No artigo de hoje vimos como é simples enviar um e-mail através do Laravel. Aprendemos todo o conceito de

Mailable e como gerenciar as views e os anexos. É claro que não acaba por aí! A classe Mail é muito mais extensa e

possui muitas outras funcionalidades que poderemos abordar mais para frente. Espero muito que tenha gostado e até

a próxima!

Sobre o Autor

Ricardo Barbosa Crivelli, mais conhecido como Rico Crivelli, é formado como Bacharel em

Sistemas de Informação e Licenciado em Computação pela Universidade Estadual do Norte do Paraná e pós-graduado em Informática na Educação. Atualmente é Técnico em TI no Instituto Federal de São Paulo – Campus Avaré. Tem como especialidade a linguagem PHP e os frameworks Symfony e Laravel, apesar de adorar trabalhar com front-end e desenvolvimento mobile com Kotlin e Swift. Possui as certificações COBiT 4.1 Foundation e Delphi 2006 Developer.

E-mail: [email protected]

Page 15: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

ASP. NET Web API – Implementando o método

“PUT” e “DELETE”

Caro leitor,

No artigo deste mês de Fevereiro continuarei abordando sobre o assunto “ASP. NET Web API” trabalhando com

os métodos “PUT” para atualizar os dados e “DELETE” para excluir os dados. Teremos como base o artigo publicado no

mês de Janeiro, denominado: “ASP. NET Web API – Implementando o método “POST”, o qual servirá de base para

programarmos estes novos recursos. Utilizaremos também a ferramenta Telerik Fiddler, a qual fará o papel de cliente

para testarmos os nossos serviços.

Criando o exemplo

Usaremos o mesmo banco de dados criado no artigo anterior, ou seja, iremos atualizar e exlcuir os dados da

tabela “Funcionario” contendo os campos: “Cod”, “Nome”, “Sobrenome”, “Setor” e “Cidade”.

Localize a Pasta “Models/FuncionarioController.cs”. É dentro desta que iremos implementar o método PUT e

DELETE.

Implementando o método PUT

Por padrão este método é do tipo “VOID”, ou seja, não retorna nenhum tipo de dado. Para uma melhor

adequação, retornaremos um tipo “HttpResponseMessage”, o qual nos permitirá ter acesso às mensagens de sucesso

ou erro que poderá ocorrer. Listagem 01.

//Método padrão

[Cod] [int] IDENTITY(1,1) NOT NULL, {

}

//Método modificado

public HttpResponseMessage Put(int cod, [FromBody]Funcionario funcionario) {

try { using (THECLUBEntities db = new THECLUBEntities()) { var func = db.Funcionario.FirstOrDefault(e =>

e.Cod == cod); if (func == null) { return Request.CreateErrorResponse(HttpStatusCode.NotFound,

"Não Foi encontrado o funcionário Código: " +

cod.ToString() + " para atualização!");

}

Page 16: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

else { func.Nome = funcionario.Nome; func.Sobrenome = funcionario.Sobrenome; func.Setor = funcionario.Setor; func.Cidade = funcionario.Cidade; db.SaveChanges();

return

Request.CreateResponse(HttpStatusCode.OK, func);

} }

} catch (Exception ex) { return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ex);

} }

Listagem 01.

O atributo [FromBody] irá forçar a API para um tipo simples de leitura no corpo da solicitação. Passaremos por

parâmetro o campo inteiro “Cod” (campo necessário para realizar a atualização da tabela) e a classe “Funcionario”.

Dentro de um “Try/Catch” instanciaremos o modelo “TheClubEntities” seguido de uma consulta ao modelo de

dados através do campo “Cod”. Caso encontrarmos algum registro iremos alterar os campos “Nome”, “Sobrenome”,

“Setor” e “Cidade”, se não receberemos uma mensagem informativa através da classe “Request. CreateErrorResponse”

que o registro não foi encontrado.

O próximo passo seria compilar a solução e abrir o programa “Telerik Fiddler” para realizarmos o teste. Localize

a aba “Composer” (1) e dentro da mesma a “Parsed” (2). Insira os parâmetros abaixo (3) para indicar o aplicativo cliente

(Fiddler), o servidor onde o serviço está sendo disparado (localhost: 49686), o tipo de dado (json) e o tamanho do

conteúdo (Content-Length).

User-Agent: Fiddler Host: localhost:49686 Content-type: application/json Content-Length: 101

Escolheremos “PUT” e o camimho completo de nosso serviço (4) seguido do campo “Cod”, que será o parâmetro

necessário para realizar o Update da tabela. Em “request Body” inserimos os dados a serem alterados no formato correto

(JSON) conforme listagem abaixo (5)

{ "Nome": "Marcos", "Sobrenome": "Cesar", "Setor": "Informatica", "Cidade": "Lençois" }

Por final clicaremos no botão Execute (6)

Page 17: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Podemos conferir todos os passos enumerados acima através da Imagem 01.

Figura 01: Serviço de PUT.

Caso não ocorra nenhum erro podemos conferir clicando sobre o serviço ou na aba “Inspetor” (1) e através do

item “Raw” (2) podemos conferir os dados que foram alterados por parâmetro e na Raw (3) os dados contidos e alterados

no Banco de dados.

Ver Figura 02 para todos os detalhes.

Figura 02: Conferindo o método PUT para alterar dados.

Page 18: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Ao acessar o SQL Server teremos o resultado a seguir (Imagem 03)

Figura 03: Alterando os Dados.

Implementando o método DELETE

Este método por padrão também é do tipo “VOID”, ou seja, não retorna nenhum tipo de dado. Faremos o mesmo que

no “PUT”, retornaremos um tipo “HttpResponseMessage”, o qual nos permitirá ter acesso às mensagens de sucesso ou erro

que poderá ocorrer. Listagem 02.

//Método padrão

public void Delete(int id) {

}

Método modificado

public HttpResponseMessage Delete(int cod) {

try { using (THECLUBEntities db = new THECLUBEntities()) { var func = db.Funcionario.FirstOrDefault(e =>

e.Cod == cod); if (func == null) { return Request.CreateErrorResponse(HttpStatusCode.NotFound,

"Não Foi encontrado o funcionário Código: " +

cod.ToString() + " para exclusão!");

} else { db.Funcionario.Remove(func); db.SaveChanges(); return Request.CreateResponse(HttpStatusCode.OK);

} }

} catch (Exception ex) { return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ex);

} }

Listagem 02.

Page 19: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Passaremos por parâmetro o campo inteiro “Cod” (campo necessário para identificar o registro a ser excluído).

Dentro de um “Try/Catch” instanciaremos o modelo “TheClubEntities” seguido de uma consulta ao modelo de

dados através do campo “Cod”. Faremos um “IF” para filtrar o registro desejado, caso afirmativo iremos remover o

mesmo, caso contrário invocaremos uma mensagem ao usuário através da classe “Request.CreateErrorResponse”.

Após a compilação da solução abriremos o programa “Telerik Fiddler” para realizarmos o teste de exclusão.

Localize a aba “Composer” (1) e dentro da mesma a “Parsed” (2). Insira os parâmetros abaixo (3) para indicar o aplicativo

cliente (Fiddler), o servidor onde o serviço está sendo disparado (localhost: 49686) e o tipo de dado (json).

User-Agent: Fiddler Host: localhost:49686 Content-type: application/json

Escolheremos “DELETE” e o camimho completo de nosso serviço (4) seguido do campo “Cod”, que será o

parâmetro necessário para realizar a exclusão do registro da tabela. Por final clicaremos no botão Execute (5)

Podemos conferir todos os passos enumerados acima através da Imagem 04.

Figura 04: Serviço de DELETE.

Para conferir o resultado basta seguir os mesmos passos descritos no método “PUT”, acessando a aba

“Inspetor(1)”, através do item “Raw” (2) poderemos conferir todos os detalhes da exclusão.

Page 20: Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms Androis, iOS e Windows Phone. Conhecemos os ... (menus ao arrastar um item para

Ver Figura 05.

Figura 05: Conferindo o método DELETE.

Conclusões

Aprendemos neste artigo os dois últimos métodos faltantes, sendo: o “PUT”, necessário para atualizar os dados de

uma tabela e o “DELETE” para exclusão dos mesmos. Com o auxílio da ferramenta cliente “Telerik” a tarefa de testar estes tipos

de serviços ficou muito simples e intuitiva.

Finalizamos a série de dicas para produzir um serviço de Consulta, Inclusão, Alteração e Exclusão de dados utilizando

este poderoso recurso encontrado no .NET Framework, o “ASP. NET Web API”.

Desejo uma ótima leitura, um abraço e até o mês que vem!

Referências

https://www.telerik.com/

Sobre o Autor

Thiago Cavalheiro Montebugnoli adora aprender novas tecnologias. Formado pela Faculdade de Tecnologia de Botucatu – SP (FATEC), já desenvolveu softwares utilizando a plataforma .NET, Delphi junto com Banco de Dados SQL Server e Firebird. Como experiências profissionais mais recentes, possui em seu currículo sua atuação no Centro de Processamento de Dados da Prefeitura Municipal de Itaí-SP e atualmente compõe a equipe da Coordenadoria Tecnologia da Informação no IFSP – Instituto Federal do Estado de São Paulo em Avaré. Além disso, é colunista mensal da Revista The Club Megazine e é consultor Técnico do The Club. Possui as seguintes certificações: MCP - Microsoft Certified Professional,MCTS - Microsoft Certified Technology Specialist, MCAD - Microsoft Certified Application Developer e MCSD - Microsoft Certified Solution Developer. E-mail: [email protected]