Meu nome é Ricarth Lima e serei o instrutor deste curso de Flutter. Desta vez, vamos abordar a leitura de NFC.
Audiodescrição: Ricarth Lima é uma pessoa de olhos castanhos e cabelo crespo castanho. Usa barba e óculos de armação retangular transparente. Está com uma camiseta preta. Ao fundo, parede com iluminação azulada e prateleiras de livros.
Para começar, iremos te mostrar o projeto em funcionamento, pois é muito interessante. Dessa vez, vamos utilizar um dispositivo físico, mas vamos projetar o aplicativo na tela. Quando pressionamos o botão "Entrar" no celular, a tela muda.
Nosso objetivo é adicionar uma camada extra de segurança ao aplicativo do Banco d' Ouro, desenvolvido na formação de Dart.
Após a pessoa logar e acessar a tela de login, ela será direcionada para a tela de cadastro do cartão NFC do Banco d'Ouro. Para demonstrar como isso funciona, clicaremos no botão "Continuar". O sistema solicitará que aproximemos um cartão.
Para realizar o procedimento, basta ter um cartão com tecnologia de aproximação.
Pode ser um cartão de crédito, mas utilizaremos um cartão de transporte metropolitano. Ao encostar o cartão no celular, o app registra os dados. Quando pressionar o botão "Finalizar", o sistema retorna à tela inicial.
Se sairmos da aplicação e tentarmos entrar novamente, será necessário realizar o procedimento para iniciar uma leitura com o NFC. Inclusive, se aproximamos um cartão diferente, recebemos um aviso de que esse cartão não cadastrado. O sistema prossegue apenas quando o cartão correto é aproximado.
Para isso, utilizaremos a tecnologia NFC (Near Field Communication ou Comunicação por campo de proximidade).
Antes de prosseguir, o que você precisa saber para fazer esse curso? É necessário ter concluído a Formação em Dart e a Formação Flutter. O foco deste curso será a comunicação com o NFC, portanto, não criaremos telas ou desenvolveremos a lógica de mudança de estado de telas. As telas já estarão prontas, e para compreender o fluxo do código, é importante ter passado pela formação em Dart, onde também trabalhamos com o Banco D'Ouro, e pela formação em Flutter.
Outro ponto importante é que o projeto será entregue com as telas e toda a parte visual pronta. Por isso, lembre-se de fazer o download do material no GitHub para acompanhar o curso. Com esses recados, podemos começar.
Vamos interromper a execução do projeto atual para começarmos a criar um novo do zero, utilizando o que será baixado. Após parar a execução, vamos explorar a estrutura do projeto no VS Code para nos situarmos. Além das telas de login e home do projeto Banco d'Ouro, temos duas novas telas entregues pela equipe de desenvolvimento de interfaces. Nosso foco será no cadastro do cartão, sem criar telas ou lidar com a segurança do banco, que são responsabilidades de outras equipes. Nosso objetivo é trabalhar com NFC (Near Field Communication), uma tecnologia de comunicação de campo próximo, que funciona até 4 cm de distância.
O NFC é utilizado em transportes públicos e pagamentos por aproximação, como cartões de crédito e celulares. Este curso não ensina a clonar cartões de crédito, pois as informações lidas via NFC são públicas e não permitem clonagem. A segurança é garantida por chips e tokens que mudam a cada transação. Vamos detalhar as diferenças entre NFC e outras tecnologias de aproximação.
Compreendido o NFC, vamos ao código. Temos duas novas telas: uma para registrar o cartão e outra para verificar se o cartão registrado é o correto. Ambas estão cadastradas como rotas na main e localizadas na pasta "UI". Vamos começar pela tela de registro. Na pasta "widgets", há subtelas que utilizaremos para transições de estado. Na tela de registro, temos um enum privado com quatro estados: welcome, notValid, readCard e finished. Esses valores representam subtelas na tela de registro.
Inicialmente, apresentamos a tela de welcome, que sugere registrar o cartão físico. Dependendo do dispositivo, bifurcamos a aplicação: se o dispositivo suporta NFC, vamos para a tela readCard; caso contrário, para a tela notValid. Na tela NFCRegisterScreen, há dois botões: next e back, associados aos métodos onBackButtonClicked e onNextButtonClicked. Precisamos ajustar o comportamento desses botões conforme a subtela ativa.
Para testar, mudamos do dispositivo físico para o emulador, que não suporta NFC. No botão de voltar, se estivermos na tela welcome, retornamos à tela de login usando Navigator.pushReplacementNamed com routeName login. Após ajustes, ao clicar em continuar na tela welcome, verificamos se o dispositivo suporta NFC. Se não suportar, direcionamos para a tela notValid.
Configuramos o plugin NFC no Flutter. No terminal, instalamos o plugin nfc_manager e configuramos o AndroidManifest.xml para permitir o uso de NFC. Adicionamos permissões e configuramos o uso de NFC, permitindo que dispositivos sem NFC ainda possam usar a aplicação. Após essas configurações, rodamos a aplicação novamente.
Na tela welcome, ao clicar em continuar, verificamos a disponibilidade de NFC com o método verifyNFCAvailable. Se disponível, mudamos para a tela readCard; caso contrário, para notValid. No emulador, ao clicar em continuar, a tela notValid é exibida, pois o emulador não suporta NFC. Ajustamos o comportamento do botão de voltar para todas as subtelas retornarem à tela de login.
Para testar a leitura de NFC, mudamos para um dispositivo físico. No dispositivo, ao clicar em continuar, a tela readCard é exibida, solicitando a aproximação do cartão. Criamos o método startReading para iniciar a leitura de NFC. Quando uma tag NFC é detectada, um callback é chamado, e imprimimos os dados da tag no console para visualização.
Para persistir os dados lidos, utilizamos o SharedPreferences. Criamos um arquivo PrefsKeys para armazenar as chaves de preferência e um LocalDataManager para gerenciar a leitura e escrita de dados locais. Implementamos métodos para salvar e ler o identificador da tag NFC, garantindo que os dados sejam persistidos corretamente.
Se sairmos e tentarmos entrar novamente, não chegamos à tela de confirmação do cartão cadastrado. Precisamos implementar uma lógica para verificar se um cartão já foi registrado ou se o dispositivo não é capaz de registrar cartões. Vamos criar uma nova chave no SharedPreferences para verificar se é a primeira vez que a pessoa está passando por aquela tela.
Após implementar essas funcionalidades, nosso sistema de autenticação com cartão físico estará pronto. Podemos usar esse conhecimento para diversas aplicações de NFC, como autenticação, estudos, escape rooms, entre outros. Explore as possibilidades criativas dessa tecnologia. Não deixe de conferir as atividades em texto para informações complementares. Nos vemos no mundo do Flutter!
O curso Flutter: integrações com NFC possui 95 minutos de vídeos, em um total de 10 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
O Plano Plus evoluiu: agora com Luri para impulsionar sua carreira com os melhores cursos e acesso à maior comunidade tech.
2 anos de Alura
Matricule-se no plano PLUS 24 e garanta:
Jornada de estudos progressiva que te guia desde os fundamentos até a atuação prática. Você acompanha sua evolução, entende os próximos passos e se aprofunda nos conteúdos com quem é referência no mercado.
Programação, Data Science, Front-end, DevOps, Mobile, Inovação & Gestão, UX & Design, Inteligência Artificial
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
Acesso à inteligência artificial da Alura.
No Discord, você participa de eventos exclusivos, pode tirar dúvidas em estudos colaborativos e ainda conta com mentorias em grupo com especialistas de diversas áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Luri Vision chegou no Plano Pro: a IA da Alura que enxerga suas dúvidas, acelera seu aprendizado e conta também com o Alura Língua que prepara você para competir no mercado internacional.
2 anos de Alura
Todos os benefícios do PLUS 24 e mais vantagens exclusivas:
Chat, busca, exercícios abertos, revisão de aula, geração de legenda para certificado.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Para quem quer atingir seus objetivos mais rápido: Luri Vision ilimitado, vagas de emprego exclusivas e mentorias para acelerar cada etapa da jornada.
2 anos de Alura
Todos os benefícios do PRO 24 e mais vantagens exclusivas:
Catálogo de tecnologia para quem é da área de Marketing
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais de forma ilimitada.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Conecte-se ao mercado com mentoria individual personalizada, vagas exclusivas e networking estratégico que impulsionam sua carreira tech para o próximo nível.
