Blynk - Crie uma Dashboard online e controle seu projeto pela internet

Blynk - Crie uma Dashboard online e controle seu projeto pela internet

Neste tutorial iremos aprender a utilizar o Blynk, uma ferramenta muito útil para quem deseja controlar seus projetos com Arduino , Raspberry Pi, ESP8266, entre outras placas, com seu smartphone, através da internet.

[toc]

Sistemas de monitoramento e controle

Ao criar sistemas automatizados, é quase sempre fundamental que tenhamos uma interface para o monitoramento e controle das variáveis do processo cujo qual estamos controlando. Essa interfaces são chamadas de IHM, um acrônimo para Interface Homem-Máquina.

Qualquer forma de comunicação entre uma máquina e um ser humano pode ser considerado uma IHM. Essas interfaces podem ser feitas de varias formas, como por exemplo:

• Usando LED's
• Display imprimindo informações
• Teclado e botões para controle das variáveis
• Usando softwares de supervisionamento (Supervisórios)

Os supervisórios são softwares que conversam com um sistema automático através de algum tipo de rede, criando assim, uma interface de monitoramento e controle.

Apesar de haver plataformas de supervisório que podem ser usadas em conjunto com Arduino, ESP ou Raspberry PI, tal como o SCADABR, elas podem ser muito robustas para aplicações simples. Além disso, criar painéis usuais e organizados pode ser uma tarefa difícil.

Conhecendo o Blynk

O Blynk é uma ferramenta para criação de dashboards para controle, via internet, de dispositivos como Arduino , Raspberry Pi, ESP8266 dentre outros.

Através de componentes preexistentes, o Blynk fornece uma vasta gama de possibilidades, permitindo a criação de botões, Gauges, Gráficos e muitos outros componentes.

Dessa forma, é possível criar dashboards interativos de forma bem simples, bastando apenas mover os componentes desejados para a tela do seu projeto e configurar o mesmo à sua vontade.

- Blynk Server

Para usar essa ferramenta, seu Arduino, ESP ou outra placa de desenvolvimento que esteja usando  trocará informações, recebendo e enviando dados, com o Servidor online da Blynk. A Blynk disponibiliza bibliotecas compatíveis com a maioria das placas de desenvolvimento para facilitar essa interface.

Por sua vez, essa informações poderão ser acessadas pelo aplicativo do Blynk através de um Smartphone ou outro dispositivo portátil com Android ou IOS.

Sabendo disso, neste tutorial iremos aprender a como configurar um dashboard para monitorar a temperatura e umidade de um ambiente e controlar o nível de luminosidade de um LED.

---

Mãos à obra - Monitorando um projeto com NodeMcu usando Blynk 

Componentes utilizados

• 1x NodeMCU
• 1x Dht22 ou Dht11
• Cabos Jumpers
• Led
• Smartphone (Android ou iOS)

Montando o projeto

Para realizar a motagem do projeto, utilizaremos a ordem de ligação da imagem abaixo:

Instalando aplicativo

Para começarmos a criação do nosso dashboard iremos primeiramente baixar o aplicativo Blynk na loja de aplicativos do nosso smarphone (Apple Store para iOS e Play Store para Android). Na Play Store, ao pesquisarmos a palavra Blynk, veremos que ele é o primeiro aplicativo disponível. Sabendo disso basta fazer o download do aplicativo normalmente.

 

Ao fim do download, um ícone será criado na tela inicial do seu smartphone. Para iniciar o aplicativo basta selecionar o aplicativo Blynk.

---

Iniciando aplicativo pela primeira vez

Ao abrir o aplicativo pela primeira vez você deve criar um cadastro. Para isso você deve selecionar a opção Create new Account, uma vez nesta tela você vai precisar basicamente definir um email válido e uma senha para acessar o seu painel de aplicações.

---

Criando primeiro projeto

Ao criar o seu cadastro, você será direcionado a tela para criação de projetos. Para iniciarmos a criação do nosso dashboard selecione a opção New Project.

Ao selecionarmos a opção de criar um novo projeto, seremos direcionados a tela de configuração do nosso dispositivo. Nesta tela definimos o nome do projeto, dispositivo (microcontrolador) utilizado e o tipo de conexão. Como neste projeto iremos medir temperatura e controlar um led, daremos o nome de Monitor/Leds. O dispositivo utilizado será o NodeMCU e o tipo de conexão WiFi.

 

Após configurarmos o projeto corretamente, basta clicar no botão create e seremos direcionados ao nosso dashboard vazio.

 

Importante: Um Token será enviado ao seu email após clicar no botão create, ele será necessário no código do microcontrolador, portanto não se esqueça de fazer uma cópia para um local seguro.

 

---

 

Adicionando componentes ao dashboard

Neste dashboard vazio, selecione o ícone do + como mostra a figura abaixo para abrir o painel dos componentes que iremos utilizar.

Ao clicarmos no ícone uma janela será aberta com todos os componentes disponíveis no aplicativo. Algo que deve se levar em consideração, é o fato de que o blynk apesar de grátis, permite que apenas uma quantidade limitada de widgets possam ser adicionadas em um dashboard. Para utilizar uma quantidade maior, é necessário comprar créditos. Porém para pequenos projetos esta quantidade costuma ser o suficiente.

Para elaboração deste Dashboard de exemplo, iremos utilizar apenas três componentes, sendo eles dois gauges e um slider, fazendo com que a tela fique com o formato da figura abaixo:

 

---

Configurando componentes

Agora que criamos a "casca" do nosso dashboard, iremos configurar cada um dos componentes adicionados para que se comuniquem com o nosso NodeMCU. para isso clique duas vezes sobre cada um dos componentes adicionados ao dashboard. Ao clicar sobre cada um dos Gauges, uma tela de configuração será aberta. Nela iremos definir o nome, valores limites e o pino de onde iremos receber os dados. Neste exemplo utilizaremos a configuração da figura abaixo para a temperatura:

 

Para o Gauge da temperatura , foi definido inicialmente o seu nome, o pino de onde os dados serão recebidos ( iremos entender isso melhor no código do NodeMCU e um intervalo que vai de 0 até 100 que será mostrado ao usuário neste Gauge.

Faremos o mesmo para o segundo Gauge, onde ao invés da temperatura iremos mostrar a umidade do ambiente. Iremos definir um intervalo de 0 até 100% e associaremos este gauge ao pino V5

Por fim, iremos configurar o nosso slider com o nome de luminosidade, associado ao pino D2 do NodeMCU, e um intervalo entre 0 e 1024.

Agora que configuramos o nosso dashboard, podemos ir para o código fonte que será executado pelo nosso NodeMCU.

---

Programando

Antes de adentrarmos na apresentação do código, disponibilizamos uma seção para ajudar aqueles que são iniciantes no NodeMCU. Sinta-se livre para prosseguir caso você já tem domínio da IDE do Arduino e com o NodeMCU.

- Bibliotecas

Para este projeto, iremos precisar fazer o download de três bibliotecas, sendo elas:

Adafruit Unified Sensor: Biblioteca base para utilizar todas as bibliotecas disponibilizadas pela Adafruit.

DHT: Biblioteca responsável por estabelecer comunicação com sensores dht11/dht22

Blynk: Biblioteca responsável por se comunicar com seu dashboard

 

Todas elas podem ser baixadas através do Gerenciar bibliotecas, que pode ser acessado selecionando Sketch no menu principal.

Agora que temos todas as bibliotecas instaladas e o nosso circuito de monitoramento e controle de led está montado, iremos carregar o software de monitoramento abaixo para controlar o led e obter a temperatura/umidade do ambiente.

#include <Adafruit_Sensor.h>
#include <DHT.h>
#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>

#define DHTPIN            D3         
//#define DHTTYPE           DHT11     
#define DHTTYPE           DHT22     

char auth[] = "Código recebido no Email";
char ssid[] = "Nome da sua rede Wifi";
char pass[] = "Senha da sua rede WiFi";
DHT dht(DHTPIN, DHTTYPE);
BlynkTimer timer;

void enviaDados(){
  float umidade = dht.readHumidity();
  float temperatura = dht.readTemperature(); 
  if (isnan(temperatura) || isnan(umidade)) {
    Serial.println("Falha ao ler dados do sensor!");
    return;
  }
  Blynk.virtualWrite(V5, temperatura);
  Blynk.virtualWrite(V6, umidade);
}

void setup() {
  pinMode(D2,OUTPUT);
  dht.begin();
  Blynk.begin(auth, ssid, pass);
  timer.setInterval(1000L, enviaDados);
}

void loop() {
  Blynk.run();
  timer.run();
}

Colocando pra funcionar

Agora que temos o código e o nosso dashboard montado, vejamos como ficou o funcionamento das duas plataformas trocando informações entre si.

 

---

Entendendo a fundo

Software

- Incluindo as bibliotecas necessárias

De início, iremos utilizar quatro bibliotecas, sendo duas voltadas exclusivamente para o nosso sensor de temperatura, e as outras duas voltadas para conexão sem fio e comunicação com a plataforma Blynk. As bibliotecas Adafruit_sensor e DHT, serão responsáveis por fornecer uma interface de comunicação com o sensor dht11/dht22. A biblioteca ESP8266WiFi, será responsável por fornecer toda a interface para conexão e comunicação sem fio do nosso código. E por fim a biblioteca BlynkSimpleEsp8266 será responsável por fornecer os métodos de comunicação com a plataforma Blynk.

#include <Adafruit_Sensor.h> 
#include <DHT.h> 
#include <ESP8266WiFi.h> 
#include <BlynkSimpleEsp8266.h>

- Defines

Para facilitar a criação e a troca de sensores utilizados, dois defines foram criados. Caso o usuário queira trocar o tipo de sensor dht utilizado ou o pino de comunicação basta trocar em um único lugar no define.

#define DHTPIN            D3         
//#define DHTTYPE           DHT11     
#define DHTTYPE           DHT22

- Variáveis de acesso ( Acesso WiFi )

Como iremos utilizar a conexão WiFi para acessar o nosso dispositivo remotamente, é necessário configurar a rede a qual ele irá se conectar, sabendo disso nesta parte serão criadas duas variáveis para acesso a rede sem fio.

char ssid[] = "Nome da rede";
char pass[] = "Senha da rede";

- Variáveis de acesso ( Acesso Blynk )

Para fazer com que o NodeMCU se comunique com a aplicação, é necessário que o usuário utilize aquele Token que foi enviado pelo email no processo de criação do dashboard. Com isso iremos também criar uma variável de nome auth, responsável por armazenar o token de comunicação com o dashboard.

char auth[] = "Código recebido no email";

- Instância do objeto de comunicação com o sensor

Por fim, iremos instanciar o objeto dht, que terá como função se comunicar com o sensor utilizado neste exemplo. Note que ele deve receber como argumentos para seu construtor o pino onde o sensor está conectado e o tipo de sensor utilizado.

DHT dht(DHTPIN, DHTTYPE);

- Função setup ( inicializando pinos e sensores utilizados )

Dentro da função setup, iremos simplesmente configurar o pino onde o led foi conectado D2, como um pino de saída, e inicializar o nosso sensor de temperatura através de sua função begin().

pinMode(D2,OUTPUT);
dht.begin();

- Função setup ( inicializando comunicação com aplicação blynk e temporizador )

Agora que temos os pinos de comunicação do nosso circuito incializados, podemos partir para o próximo passo, que é inicializar a comunicação com os servidores Blynk. Para fazer isso, iremos utilizar o método begin, que recebendo como parâmetros o nome da rede, a senha da rede e o código recebido no email, inicializará todo o processo de comunicação de forma transparente ao usuário. Iremos também inicializar um temporizador no nosso código, que será responsável por executar uma função toda vez que um intervalo de tempo x for alcançado, que no nosso caso será um valor de 1 segundo.

  Blynk.begin(auth, ssid, pass);
  timer.setInterval(1000L, enviaDados);

A função setInterval, recebe como parâmetros o tempo em milissegundos e a função que deve ser executada.

- Função enviaDados

A função enviaDados, é responsável por periodicamente enviar a informação do sensor para a aplicação. O processo de envio é feito da seguinte forma:

1. Dados de temperatura e umidade são lidos do sensor através dos métodos readTemperature e readHumidity

   1. float umidade = dht.readHumidity();
      float temperatura = dht.readTemperature();

   2. Caso os dados lidos não sejam valores números, possivelmente ocorreu um erro na leitura do sensor, sendo assim o bloco if do código é acionado e a função termina sem escrever os dados para a plataforma

      1. if (isnan(temperatura) || isnan(umidade)) {
           Serial.println("Falha ao ler dados do sensor!");
           return;
         }

   3. Caso contrário, os dados de temperatura e umidade lidos pelo sistema são enviados para a plataforma através do método virtualWrite, como associamos aos nossos gauges os pinos V4 e V5 eles vão receber o valor de temperatura lido pelo nosso sistema

      1. Blynk.virtualWrite(V5, temperatura);
         Blynk.virtualWrite(V6, umidade);

- Função loop

Por fim, na função loop iremos executar tanto o nosso objeto principal blynk, quanto nosso temportizador através do método run.

Blynk.run();
timer.run();

---

Vídeo tutorial

Vocês também podem ver uma explicação do código em vídeo no canal abaixo:

https://www.youtube.com/watch?v=kVq3-yH8wNs&t=68s

---

Desafio

Agora que você sabe um pouco sobre como adicionar e configurar componentes no Blynk. Crie novos componentes no seu dashboard. Adicione gráficos para monitorar a variação da temperatura e umidade do ambiente, você irá obter resultados interessantes :D.

Considerações Finais

Este tutorial, teve como objetivo mostrar como construir dashboards através da plataforma blynk, e estabelecer uma comunicação bi-direcional com o seu nodeMCU. Espero que tenham gostado do conteúdo apresentado, sinta-se à vontade para nos dar sugestões e de deixar suas dúvidas nos comentários abaixo.

---

by Danilo Almeida