Xamarin Forms - Desenvolvendo um leitor de QR Code
Olá, neste artigo vou mostrar como desenvolver um leitor de QR Code com Xamarin Forms, são passos simples mas que talvez seja a duvida de muitos, o QR Code nada mais é do que um código de barras 2D que pode ser lido e decodificado pela maioria dos celulares que possuem câmera, ele é muito utilizado em para validar documentos, crachás, notas fiscais, campanhas de Marketing e por ai vai e neste artigo você poderá desenvolver seu próprio leitor e utiliza-lo da maneira que seus projetos necessitarem, então vamos lá, mãos a obra!
Primeiramente crie um novo projeto no Visual Studio escolhendo o template Multiplatform / Forms App e clique em Next, estarei utilizando o Visual Studio for MAC porem tudo que for citado aqui poderá ser facilmente replicado no Visual Studio para Windows ok! ;)
Figura 1 – Templates de projetos
Na próxima janela defina um App Name para o seu projeto, no meu caso deixei como LeitorQRCode mas pode colocar o nome que achar melhor, defina também o Organization Identifier que no meu caso ficou br.com.fernandocruz, você pode trocar o fernandocruz pelo seu nome ou o de sua empresa, vamos deixar marcadas as opções Android e iOS pois queremos que nosso aplicativo rode nas duas plataformas e em Shared Code vamos trabalhar com PCL com arquivos de interface XAML conforme a Figura 2, agora clique em Next novamente.
Figura 2 – Dados do Projeto
Agora confira os dados e marque as opções que achar necessário, por exemplo, se for trabalhar com controle de versão e com Xamarin Test Cloud poderá marca-las aqui, clique em Create para finalizar e deixar com que o Visual Studio crie toda estrutura para você.
Figura 3 - Configurações
Depois de finalizada a criação da estrutura dos seus projetos LeitorQRCode(Projeto Shared), LeitorQRCode.Droid(Projeto Android) e LeitorQRCode.iOS(Projeto iOS) é necessário adicionar nos diretórios Packages de cada projeto o componente ZXing.Net.Mobile, vamos fazer isso clicando com o botão direito do mouse em Package no projeto Shared e depois com o botão esquerdo em Add Packages, a janela representada na Figura 4 irá se abrir.
Figura 4 – Pacotes Nuget
Busque pelo componente ZXing.Net.Mobile Barcode Scanner for Xamarin.Forms, selecione-o e clique no botão Add Package, o ZXing.Net.Mobile e ZXing.Net.Mobile.Forms devem ser adicionados no diretório Packages conforme a Figura 5, agora faça o mesmo procedimento nos outros dois projetos (.Droid e .iOS).
Figura 5 – Pacotes ZXing.Net e ZXing.Net.Mobile adicionados
Pronto! Agora com a estrutura configurada vamos codar ;)
No projeto Shared clique duas vezes no arquivo LeitorQRCodePage.xaml e adicione um Button conforme a Listagem 1, eu deixei um Label para apresentar um texto e sabemos que para alinhar estes controles na tela há a necessidade de coloca-los dentro de um StackLayout por exemplo que irá alinhar os controles adicionados em uma pilha ou seja, um abaixo do outro conforme a ordem que forem inseridos dentro do StackLayout.
01.<?xml version="1.0" encoding="utf-8"?>
02.<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:LeitorQRCode" x:Class="LeitorQRCode.LeitorQRCodePage">
03.
04. <StackLayout>
05. <Label Text="App para leitura da QR Code" VerticalOptions="Center" HorizontalOptions="Center" />
06. <Button x:Name="btnLeitura" Text="Leitura" Clicked="btnLeitura_Clicked"/>
07. </StackLayout>
08.
09.</ContentPage>
Listagem 1
Agora precisamos adicionar as funcionalidades no evento Clicked do Button criado anteriormente no XAML, no nosso caso o btnLeitura, de dois cliques no arquivo LeitorQRCodePage.xaml.cs do projeto Shared (para encontrar este arquivo basta expandir o arquivo LeitorQRCodePage.xaml no Solution Explorer), depois de criado o evento vamos adicionar uma variável chamada scanner que recebe a instancia do método MobileBarcodeScanner da classe Mobile que esta dentro de ZXing, depois criamos mais uma variável chamada result para que possamos verificar se ela não esta nula antes de tentarmos apresentar o valor do QR Code no DisplayAlert. Veja como ficou na Listagem 2.
01.using Xamarin.Forms;
02.
03.namespace LeitorQRCode
04.{
05. public partial class LeitorQRCodePage : ContentPage
06. {
07. public LeitorQRCodePage()
08. {
09. InitializeComponent();
10. }
11.
12. async void btnLeitura_Clicked(object sender, System.EventArgs e)
13. {
14. var scanner = new ZXing.Mobile.MobileBarcodeScanner();
15. var result = await scanner.Scan();
16.
17. if (result != null)
18. {
19. await DisplayAlert("Valor", $"Leitura do codigo: {result.Text}", "OK");
20. }
21. }
22. }
23.}
Listagem 2
E agora precisamos adicionar uma linha de código no evento OnCreate do arquivo MainActivity localizado no projeto LeitorQRCode.Droid.
Figura 6 – Main Activity do projeto Android
Dentro do evento OnCreate adicione a seguinte linha: ZXing.Mobile.MobileBarcodeScanner.Initialize(Application);
Seu código deve ficar como apresentado na Listagem 3.
01.protected override void OnCreate(Bundle bundle)
02. {
03. //Adicionei esta linha para funcionamento do projeto Android com ZXing
04. ZXing.Mobile.MobileBarcodeScanner.Initialize(Application);
05.
06. TabLayoutResource = Resource.Layout.Tabbar;
07. ToolbarResource = Resource.Layout.Toolbar;
08.
09. base.OnCreate(bundle);
10.
11. global::Xamarin.Forms.Forms.Init(this, bundle);
12.
13. LoadApplication(new App());
14. }
Listagem 3
Lembre-se, se esta linha não for adicionada corretamente seu projeto na Plataforma Android não irá funcionar, ja para o projeto iOS não há a necessidade de alterações a não ser a adição do pacote ZXing que ja fizemos.
E por fim no projeto Android temos que dar permissão para o uso do Flash, clique com o botão direito do mouse sobre o projeto LeitorQRCode.Droid e depois clique em Options, na janela que irá se abrir selecione à esquerda Android Application e a direita em Required permissions selecione Flashlight conforme a Figura 7 e clique em OK.
Figura 7 - Adicionando Permissões
Feito!
Terminamos aqui nosso aplicativo para leitura de QR Code e o melhor, rodando nas plataformas Android e iOS :) Clique com o botão direito do mouse em qualquer um dos dois projetos (.Droid ou . iOS), agora clique em Set As Startup Project e dê um Run para testar seu aplicativo no emulador ou direto em seu Device.
Ficamos por aqui então, espero ter ajudado e bons projetos a todos!!!
Link ZXing: https://components.xamarin.com/view/zxing.net.mobile