ESP8266 – Cadastro RFID (MFRC522) com webserver

Introdução

Olá tudo bem, hoje faremos um sistema de cadastramento utilizando ESP8266 um leitor RFID . Iremos aprender como conectar e utilizar o leitor RFID MFRC522 Mifare ao ESP8266 e a criar um pequeno webserver que servirá de interface para o usuário que irá cadastrar novas tags RFID. Você poderá utilizar para controle de acesso de algum cômodo da sua casa. por exemplo.

Visão Geral do Projeto

Nosso sistema será capaz de realizar algumas tarefas básicas:

  • Cadastrar um usuário a partir de uma tag RFID – O usuário deve aproximar o cartão ou tag do leitor, informar um dado adicional como nome ou CPF e se cadastrar como novo usuário. Esse cadastro ficará salvo localmente na flash do ESP8266;
  • Excluir um usuário – O sistema permitirá a exclusão de um usuário do registro local;
  • Reconhecer tags cadastradas – O sistema deverá fazer a leitura e identificação de tags cadastradas. Ao reconhecer uma tag um led verde será acionado, e um vermelho em casos de tags não registradas.

Além disso não será possível cadastrar a mesma tag duas vezes. O campo de informações sobre o usuário também não poderá ser duplicado. Todo o processo de cadastro será feito através utilizando uma interface web.

Figura 1 – Interface do Sistema de Cadastro.

Conhecendo os Componentes

Leitor RFID MFRC522 Mifare 

O leitor MFRC522 Mifare é um leitor de tags RFID de 13,56MHz com interface SPI para troca de dados com microcontroladores. RFID (acrônimo para Radio-Frequency IDentification) é uma tecnologia de identificação por radiofrequência, geralmente de curto alcance muito utilizada em controle de acesso, sistemas de bilhetes de transporte público, identificação de produtos, etc.

Figura 2 – Sistema de RFID no transporte público.

Geralmente composta por dois elementos, uma tag ou etiqueta RFID que possui um id único e um leitor RFID que faz a leitura e, dependendo do casos, pode fazer escrita de alguma informação na tag. O leitor MFRC522 Mifare também pode fazer escrita em tags, mas não será o foco neste projeto. Abaixo algumas características desse leitor.

  • Tipos de cartões suportados: Mifare1 S50, S70 Mifare1, Mifare UltraLight, Mifare Pro, Mifare Desfire;
  • Frequência de operação: 13,56MHz;
  • Corrente de trabalho: 13-26mA / DC 3.3V;
  • Taxa de transferência: 10 Mbit/s;
  • Interface: SPI.

Para utilizarmos o leitor MFRC522 Mifare no nosso precisamos adicionar a biblioteca MFRC522.h. Ela pode ser encontrada no gerenciador de bibliotecas da Arduino IDE.

Figura 3 – Biblioteca MFRC522.h.

Sistema de arquivos SPIFFS

Um recurso presente no ESP8266 que será bastante útil no nosso projeto será o Sistema de Arquivos Flash de Interface Periférica Serial ou SPIFFS, que é um sistema de arquivos que permite escrita e leitura de dados na flash de forma simplificada. Ele pode ser usado para armazenar arquivos de configuração, arquivos com leituras colhidas periodicamente, páginas html para serem carregadas posteriormente.

O tamanho reservado para o sistema de arquivos vai depender do chip de memória flash on-board do ESP8266 em questão.

Figura 4 – Tabela de placas ESP8266 com respectivos espaços disponíveis para SPIFFS.

Antes de prosseguir verifique se você já possui as placas ESP8266 configuradas na Arduino IDE. Consulte este post caso ainda não tenha feito a instalação. Usaremos neste post a biblioteca FS.h para trabalhar com o SPIFFS. Ela é instalada automaticamente no momento em que as placas ESP8266 são adicionadas à Arduino IDE.

Instalando o Arduino ESP8266 Filesystem Uploader   

Neste projeto precisamos várias páginas html. Como já foi dito anteriormente podemos usar o SPIFFS para armazenar nossas páginas HTML. Podemos gravar esses arquivos diretamente na memória flash utilizando o plugin ESP8266 Filesystem Uploader.

Para obtê-lo entre na página de releases e clique no arquivo ESP8266FS-0.5.0.zip para fazer o download.

Descompacte a pasta .zip baixada para a pasta Ferramentas . Você deve ter uma estrutura de pastas semelhante:

<home_dir>/Arduino-<version>/tools/ESP8266FS/tool/esp8266fs.jar

Após isso abra a Arduino IDE e verifique se a ferramenta está disponível no menu Ferramentas.

Figura 5 – ESP8266 Filesystem Uploader instalado na Arduino IDE.

Mãos à Obra – Desenvolvimento do projeto

Componentes necessários

Bibliotecas necessárias

Além da biblioteca para o leitor MFRC522, serão necessárias as bibliotecas ESPAsyncWebServer e ESPAsyncTCP que nos ajudarão a implementar o servidor do projeto.

Com a Arduino IDE aberta, selecione o menu Sketch -> Incluir Bibliotecas -> Adicionar Biblioteca .ZIP.

Figura 6 – Instalando bibliotecas a partit de arquivos .zip.

Navegue até a pasta da biblioteca, selecione o arquivo .zip e em seguida clique em Abrir.Se tudo ocorrer bem a Arduino IDE mostrará uma mensagem de êxito.

 

Figura 7 – Mensagem de confirmação .

Montando o Projeto – Fritzing

O leitor RFID MFRC522 Mifare possui 8 pinos que serão ligados na seguinte sequência ao ESP8266.

  • Pino SDA – ligado na porta D2 do ESP8266 NodeMcu;
  • Pino SCK – ligado na porta D5 do ESP8266 NodeMcu;
  • Pino MOSI – ligado na porta D7 do ESP8266 NodeMcu;
  • Pino MISO – ligado na porta D6 do ESP8266 NodeMcu;
  • Pino NC – Não conectado;
  • Pino GND – ligado no pino GND do ESP8266 NodeMcu;
  • Pino RST -ligado na porta D1 do ESP8266 NodeMcu;
  • Pino 3.3 – ligado ao pino 3.3 V do ESP8266 NodeMcu.

A montagem deste projeto, pode ser feita seguindo a ordem dos fios mostrada na imagem abaixo.

Figura 8 – Montagem do circuito.

Programando

Baixe o projeto nesse link com todos os arquivos necessários para esse post. Você encontrará os arquivos que serão gravados via SPIFFS numa pasta com nome “data” dentro da pasta do seu sketch arduino. Em seguida você pode fazer o upload desses arquivos através da ferramenta ESP8266 Filesystem Uploader, no menu ferramentas da  Arduino IDE. Atenção! O sketch é compilado e gravado normalmente como qualquer outro sketch, somente os arquivos da pasta “data” serão gravados via ESP8266 Filesystem Uploader.

Segue abaixo o sketch do nosso sistema de cadastro. 

Entendendo o código

A seguir uma breve explanação sobre as partes do  código.

Inclusão das bibliotecas

Aqui fazemos a inclusão das bibliotecas que utilizaremos. Destaque para a bibliotecas FS.h que responsável pelo acesso ao SPIFFS,  ESPAsyncWebServer.h para criar nosso webserver e a MFRC522.h que fica responsável pela comunicação com o leitor RFID MFRC522 Mifare.

Definição de constantes, variáveis e credenciais de rede

Altere as constantes ssid e password para as credenciais da sua rede Wi-Fi.

Uma ressalva para ao trecho using namespace std é que uma diretiva que declara que o código a seguir terá funções e/ou objetos que pertencem ao namespace std. Neste exemplo a classe vector pertence a esse namespace, sem essa diretiva a forma de acessar acessar essa classe seria std::vector.

Instanciar objetos

Aqui instanciamos objetos para o webserver e para o leitor MFRC522.

Funções de manipulação de arquivos, cadastro.

Aqui encontramos as funções que responsáveis por adicionar, remover e buscar por usuários cadastrados no nosso sistema. Todas essas funções utilizam o SPIFFS para manter o cadastro salvo de forma persistente na memoria flash.

Também temos a função processor() que será importante adicionar conteúdo extra as paginas html.

Função Setup

Inicializamos a serial e os pinos conectados aos leds, as funções listAllFiles() e readFile() aqui são puramente para efeito de debug, listando todos os arquivos que existem na flash e o exibindo o conteúdo do nosso arquivo registro de usuários. O nome do arquivo é definido pela constante FILENAME.

Rotas

Logo após teremos uma sequencia de definições de rotas com as respectivas paginas html que serão servidas como resposta.

Definimos uma rota utilizando o método server.on(). Nos métodos acima por exemplo temos que para a rota “/” e “/home” serviremos a mesma página home.html e ela deve ser encontrada utilizando SPIFFS. Definimos qual arquivo será enviado utilizando o método request->send(). Além de simplesmente carregar paginas também podemos realizar outras tarefas como adicionar, excluir usuários dentro do método server.on().

Vale destacar que em algumas chamadas dessa função utilizei uma função callback. Essa função callback, neste caso a função é processor(). Ela fará uma substituição de parte do código html da página antes de servi-la para o usuário. Isso é útil pois precisamos manter uma tabela de usuários cadastrados sempre visível e como essa informação é variável não podemos salva-la previamente memória flash.

Não só paginas html mas também outros tipos de arquivos salvos na flash devem ter rotas configuradas.

Utilizei um arquivo css para estilizar nossa pagina, alem disso, adicionei também uma imagem de logo. Depois de definirmos todas as rotas podemos iniciar o serviço.

Função Loop

Na função Loop() aguardamos a leitura de tags RFID. O funcionamento é bem simples, quando um cartão cadastrado é detectado o led verde é acionado por 1 segundo, quando um cartão desconhecido é detectado o led vermelho é acionado pelo mesmo período.

Colocando para Funcionar

Para verificar o funcionamento tenha em mão algumas tags RFID de 13,56MHz e um navegador. Acesse a pagina de cadastro através do ip informado pelo ESP8266 via MonitorSerial. Uma pagina semelhante a da imagem abaixo será exibida.

Figura 9 – Página principal do Sistema.

Para realizar um cadastro aproxime uma tag do leitor e observe que o primeiro campo será preenchido automaticamente. Em seguida adicione uma informação antes de prosseguir o cadastro.  Agora clique em cadastrar. Em caso de sucesso uma pagina de confirmação será exibida.

Figura 10 – Página de cadastro bem sucedido.

Clique em voltar e observe a lista de usuários foi atualizada.

Figura 11 – Página principal com o acréscimo de um usuário.

Note que para cada usuário possui um UID RFID e uma informação relacionada. Também existe um botão “Excluir” para cada usuário. O processo de exclusão é muito simples, basta clicar no botão “Excluir” correspondente ao usuário, uma nova pagina será exibida perguntando se deseja prosseguir com a exclusão.

 

Figura 10 – Página de confirmação de exclusão.

Existem outras paginas pra eventuais falhas no cadastro, mas deixarei para vocês testarem e descobrirem.

Desafio

O sistema proposto é uma versão simples e possui varias limitações que vocês podem descobrir e melhorar. Por exemplo adicionar uma autenticação com usuário e senha antes do cadastro de novas tags para evitar que qualquer invasor apague seus cadastros. Também fica como lição de casa encontrar uma forma de manter o sistema ativo mesmo sem a presença de uma rede Wi-Fi.

Gostou? Deixe seu comentário logo abaixo, aguardo você no próximo post. Confira também a nossa loja virtual encontre todos os componentes utilizados no projeto no post.

Yure Albuquerque

Graduando em Tecnologia Mecatrônica Industrial. Tenho experiência com Arduino e Raspberry Pi. Atualmente experimentando novas tecnologias como ESP32 e compartilhando no blog da Smart Kits.

Post navigation

29 Comentários

  • Boa noite. Instalei o sketch acima alterando ssid e senha logicamente. Alterei pinos PIN SS e PIN RST para D3 e D8, conforme minha montagem. Quando reinicio a tela monitor serial mostra a conexao feita na rede com sucesso e fas leitura das tags (RFID ok) nas a pagina de acesso na rede da erro 404 (não localizada) e nao abre. Alguma dica?

  • ou então amigo teria como agregar unidades aos cartões rfid e por outro sistema retirar essa unidades com um controle de passe
    necessito muito de uma ajuda por favor

  • Olá Yure, tudo bem!
    Fiz tudo conforme sua explicação neste tópico, mas está dando erro 404 não carrega a página o que poderá ser, você pode me ajudar?

    • Olá Luciano!
      Além de carregar o sketch você também precisa carregar as paginas html para a memoria flash do esp8266. Esse upload é feito pela ferramenta “ESP8266 Filesystem Uploader” como explanado no tópico “Programando”.
      Abraço.

  • Bom dia Yure!
    Verificando em outro tutorial vi que tem que criar uma pasta “data” e dentro dela colocar as páginas HTML, más a onde está os arquivos da página HTML?

    • Olá Caique, o serviço só funciona como interface(http) com o usuário via navegador, mas poderia ser feito com mqtt tambem.

  • Olá Yure, muito obrigado pelo tutorial. tentei recriar o código para o ESP 32, mas estou encontrando dificuldade, você conseguiria fazer o favor postar o código portado para o ESP 32? Desde já agradeço pela atenção.

    • apareceu para mim também, troquei para de byte para int e funcionou, não sei se é o correto, mas até agora não percebi nenhum erro que poderia acontecer por causa dessa troca

  • Cara, muito bom… eu comecei a desenvolver alguns projetos com o node mcu, mas faz pouco tempo e ainda estou em um nível bem amador. Esse projeto abriu um pouco mais minha mente para uma forma de fazer projetos realmente profissionais. Parabéns, se você puder compartilhar seu linkedin, eu gostaria muito de acompanhar mais do seu trabalho.

  • Olá estou com problemas no cadastramento das tags em alguns momentos ao salvar ocorre um erro depois do html/string ele apresenta</td????, e quebra o carregamento da pagina, suspeito que seja algum problema de leitura enquanto grava.
    Alguém ja teve este problema? tem limite de tamanho ou cadastro no arquivo?

  • muito bom o projeto, abre uma grande gama de possibilidades de projetos para utilizar estes recursos, e o fato de ter mostrado essa tool de upload de arquivos para o esp32 foi muito interessante, não conhecia, tive o mesmo problema mencionado por outros usuários com o byte sendo considerado ambíguo, mas trocar por int resolveu.

    • Olá Luiz, Sim a memoria do ESP8266 é suficiente pra armazenar essa quantidade de registros. Recomendo editar a função readFile() retirando os prints da porta serial afim de reduzir o tempo de processamento.

  • Yure.
    Valeu por esse exemplo.
    Mas eu estou tentando colocar o WiFimanager e não consigo compilar com o esp8266 ou o esp32.
    Tu sabe o que pode estar ocorrendo?

  • Boa tarde!

    funcionou corretamente, estou com problemas quando cadastro mais de uma tag, ai a pagina de cadastro nao abre mais, pergunto , onde deveria estar este arquivos cadastro.txt citado no codigo? nao achei o mesmo em lugar algum.

    Agradeço a ajuda!

  • Olá Yure.
    Seria possível no ‘else’ de usuário encontrado, que faz acender o led verde, ele também dar um print na porta serial mostrando o nome que foi cadastrado para aquele id?

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Primeiros passos com o Arduino Mega WiFi

Blynk – Medição de temperatura com DS18B20

Video loop na Raspberry Pi