Marcos César Silva - The ClubXamarin Forms e a criação de aplicações nativas para as plataforms...
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/1.jpg)
![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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/2.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/3.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/4.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/5.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/6.jpg)
<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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/7.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/8.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/9.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/10.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/11.jpg)
...
'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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/12.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/13.jpg)
<?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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/14.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/15.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/16.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/17.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/18.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/19.jpg)
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](https://reader034.fdocumentos.tips/reader034/viewer/2022042306/5ed2c981ae2cb511b1780c9d/html5/thumbnails/20.jpg)
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]