ESP8266 Automação com Interface Web e DDNS




No artigo de hoje vamos mostrar uma automação, que pode ser residencial, utilizando o recurso DDNS (Dynamic Domain Name System). Você vai entender como configurar o aplicativo que você vai colocar no ESP8266, no NodeMCU. Também vamos ver como configurar o DDNS para controlar, do seu smartphone, os aparelhos de sua casa.
Basicamente, o esquema funciona da seguinte forma: seu smartphone vai enviar dados para a nuvem, com o serviço DDNS, o qual vai acessar o seu ESP8266 que vai estar na sua residência.





Neste caso, o código fonte (faça o download)  é grande e utiliza o recurso do ESP funcionar como um próprio webserver. Por que é vantajoso? Pois, assim, você não precisa, no smartphone, instalar nenhum aplicativo. Funciona perfeitamente no IOS, computador, android, ou outro que contenha um browser.

WiFi ESP8266 NodeMcu ESP-12E



DDNS
Primeiramente, é necessária a criação de uma conta no site do NO-IP, que é o serviço que iremos utilizar

Após a definição de login e senha, entre em sua conta. 

Defina o “hostname” e o “Domain”. O “Record Type” deixe como está (A). Depois de preencher, clique em “Add hostname”. Na sequência, vá para a configuração da conta, clicando em “Account”. Nesse caso usamos o “automacaoesp.ddns.net”.

Defina, então, o “USERNAME” e salve as configurações.

Agora acesse o roteador e clique em “Dynamic DNS”. 
Preencha os campos com o nome de usuário que você havia definido na configuração da conta, a senha e o Domain Name, que nesse caso foi “automacaoesp.ddns.net”. Ative a opção “Enable DDNS” e clique em salvar. Agora, ele irá dar a mensagem “Succeeded!” caso tenha dado certo.

Voltando para a página do NO-IP, clique no menu lateral “Hostnames”,  verifique se apareceu o registro do seu roteador, como mostra acima. Deverá aparecer o IP externo do seu roteador.

O último passo é redirecionar a porta do roteador para o aparelho da rede interna. Definimos o IP do ESP (192.168.1.111), logo, vamos entrar na tela “Forwarding” -> “Virtual Servers” do roteador e clicar em “Add new”. Irá exibir a tela acima.

Preencha a porta que irá redirecionar, o IP do aparelho da rede interna e oprotocolo pode deixar como “ALL”, a não ser que você trabalhe com apenas um específico, e deixe o Status como “Enabled” para ficar ativo. Salve.

  

Diagrama


Feito isso, já estará funcionando. Independente do endereço de IP Externo, ao você acessar o “automacaoesp.ddns.net” na porta padrão 80, você cairá na porta 80 do aparelho da rede interna cujo IP é 192.168.1.111.
Lembre-se de deixar esse endereço fixo.



Modificações no arquivo automacao.ino

Faça a alteração das configurações abaixo para as configurações da sua rede e coloque o número do GPIO máximo disponível na sua placa + 1 em MAX_PIN_COUNT.
//Mude para os dados da sua rede
#define SSID "TesteESP"
#define SENHA "87654321"
#define IP "192.168.1.111"
#define GATEWAY "192.168.1.1"
#define SUBNET "255.255.255.0"

//Quantidade máxima de pinos, lembrando que os gpios
//geralmente começam em 0.
//Se o gpio máximo for 16, por exemplo, coloque 17
#define MAX_PIN_COUNT 17

No arquivo automacao.html altere na linha 117 a URL para a que você cadastrou  no site de ddns no-ip



Plugin para gravar arquivos

Você deve incluir o plugin na IDE Arduino para gravar arquivos na flash do esp8266. Faça o download do plugin aqui. Descompacte o arquivo e se estiver no Windows coloque o arquivo .jar em:
C:\Users\<seu_usuario>\Documents\Arduino\tools\ESP8266FS\tool\esp8266fs.jar

Se usar Mac coloque o arquivo .jar em:
~/Documents/Arduino/tools/ESP8266FS/tool/esp8266fs.jar

Reinicie a IDE do Arduino. Agora uma nova opção aparecerá em Ferramentas. Esta opção, chamada de “ESP8266 Sketch Data Upload” vai gravar o conteúdo da pasta “data” na flash do ESP8266.
A pasta “data” deve estar dentro da pasta do arquivo .ino atual.
Se quiser gravar um arquivo html, por exemplo:
~/Automacao/automacao.ino
~/Automacao/data/automacao.html



Gravar arquivo html

Clique nesta opção para enviar o arquivo automacao.html que está na pasta “data” para o sistema de arquivos do ESP.




Testando

1. Ainda na IDE do arduino, clique na seta para compilar e enviar o código para o ESP. Agora vá até o navegador e digite na barra de endereços a url que você cadastrou no site no-ip. O resultado deve ser o da imagem. 
2. Clique “Pin Number” e escolha o número de um pino da lista que aparecer.
3. Digite o nome do botão que vai comandar o pino selecionado e clique em “+“.
4. Um botão com o nome escolhido aparecerá na lista.
5. Quando clicar no botão ele ficará azul e o pino com o número que você escolheu ficará em HIGH.
Caso queira que o pino volte para LOW apenas clique no botão novamente. Para remover o botão clique em “-”.
1


2


3

4

5



Faça download dos arquivos:
INO


25 comentários:

  1. Estou gostando muito das suas aulas!
    Estou com uma duvida.
    Fiz todos os passos conforme você explicou. Porem depois de alguns segundos parece que o meu ESP8266 NODEMCU trava e para de funcionar. Tenho que dar upload do sketch toda vez que trava.
    Você poderia me esclarecer onde estou errando?

    ResponderExcluir
    Respostas
    1. Olá,
      Geralmente isto acontece quando se coloca um GPIO que não existe. Ná vá pelos labels D0, D1, etc. Não é o mesmo que aparece na lista de pinos. Use o datasheet do nodemcu para verificar quais os números gpios. Por exemplo do D0 na verdade é o pino 16 da lista.

      Excluir
  2. ola , gostaria da sua ajuda
    aqui para mim não aparece os números para escolher a porta na pin mumber
    poderiam me ajudar por favor

    ResponderExcluir
    Respostas
    1. boa tarde, pra mim tbm não aparece, alguma dica?

      Excluir
    2. estou com o mesmo problema. alguem ja conseguiu resolver?
      obrigado professor pelo excelente tutorial e aula

      Excluir
    3. Olá, pessoal.
      Desculpem a demora.
      Por favor, verifiquem se a URL no arquivo html está correta. O domínio deve ser o que você mesmo criou no no-ip. Altere a linha:
      const URL = "http://automacaoesp.ddns.net/";

      Excluir
  3. O arquivo de automação.ino só está aparecendo 11 linhas na foto, está completo ? Se não estiver, mande para mim fazendo favor. Obrigado! mauro.neves.gonzaga@gmail.com

    ResponderExcluir
    Respostas
    1. Olá, o arquivo tem 271 linhas. Faça o download dele ao final do texto, onde está escrito: Faça download dos arquivos:
      PDF
      INO
      Abraço!

      Excluir
  4. bom dia, quando vou verificar o codigo na ide, ele dá um erro dizendo que o loadConfig não esta declarado no escopo, inclusive ele diz que todas as funçoes nao estao declaradas no escopo

    ResponderExcluir
    Respostas
    1. Olá, também me deparei com este problema e resolvi o problema colocando a função chamada acima da função que está chamando.
      No caso a Função Setup() fica no fim da lista acima da função Loop();
      A sequencia das funções ficou assim: loadConfig(), saveConfig(), onAddPin(), onRemovePin(), onPinList(), onDigitalWrite(), onNotFound(), setup(), loop().

      Espero que resolva o seu caso.

      Excluir
  5. E esta acontecendo isto tambem : Exception in thread "AWT-EventQueue-0" java.lang.NoSuchMethodError: processing.app.Sketch.getBuildPath()Ljava/io/File;
    at com.esp8266.mkspiffs.ESP8266FS.getBuildFolderPath(ESP8266FS.java:117)
    at com.esp8266.mkspiffs.ESP8266FS.createAndUpload(ESP8266FS.java:263)
    at com.esp8266.mkspiffs.ESP8266FS.run(ESP8266FS.java:322)
    at java.awt.event.InvocationEvent.dispatch(InvocationEvent.java:311)
    at java.awt.EventQueue.dispatchEventImpl(EventQueue.java:756)
    at java.awt.EventQueue.access$500(EventQueue.java:97)
    at java.awt.EventQueue$3.run(EventQueue.java:709)
    at java.awt.EventQueue$3.run(EventQueue.java:703)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:76)
    at java.awt.EventQueue.dispatchEvent(EventQueue.java:726)
    at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:201)
    at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:116)
    at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:105)
    at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:101)
    at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:93)
    at java.awt.EventDispatchThread.run(EventDispatchThread.java:82)

    ResponderExcluir
    Respostas
    1. Resolvi este problema atualizando a versão do Arduino para 1.8.5

      Excluir
    2. Olá.
      Qual a versão da IDE do Arduino? Realmente, se não estiver utilizando a mais recente talvez aconteça alguma incompatibilidade.

      Excluir
  6. Olá Prof. Fernando, blz? já assisti várias vezes estes 2 vídeos mais ainda não consegui entender, esse DDNS é um aparelho físico ou um programa instalado no computador?

    ResponderExcluir
    Respostas
    1. É um programa, o DDNS é um programa que "grava" um nome ao seu IP, tornando-o fixo e "físico".

      Excluir
  7. parabéns pelo vídeo é bem didático e de fácil entendimento, agora seria interessante se o aplicativo que aparece no celular tivesse uma opção de ser configurado como entrada tambem caso queira monitorar algo, e tambem seria interessante o aplicativo aceitar tambem o PWM e conversor A/D.

    ResponderExcluir
  8. Ola, Parei por aqui, a mensagem informa que não tenho permissão.
    Tudo gravado sem erros, mas ao entrar com a URL eu recebo a mensagem abaixo.

    Forbidden
    You don't have permission to access / on this server.

    Alguma luz??

    ResponderExcluir
  9. Aqui o meu deu erro ao carregar os números dos pinos na interface web: "Erro ao recuperar informações".

    selectPinNumber.options[1].setAttribute("selected", "");
    }
    else
    {
    alert("Erro ao recuperar informações");
    }

    Alguém pode ajudar?

    ResponderExcluir
  10. Oi Fernando boa noite , estou com duvida com automação com interface web e ddns é possivel receber alarme no celular se uma temperatura esta baixa de mais ou alta de mais pra intervir na automação. obrigado Abraço.

    ResponderExcluir
  11. Oi Fernando boa noite, estou com duvida quanto à automação com interface web e ddns.É possivel receber alarme no celular indicando se uma temperatura esta baixa de mais ou alta de mais pra intervir na automação. Abraço

    ResponderExcluir
  12. Olá professor!, excelente este seu trabalho porém estamos aguardando sua video aula sobre o código, no meu caso não consigo incluir nenhum pino.

    Obrigado!

    ResponderExcluir
  13. Boa Noite Mestre Fernando quando tendo adicionar o nome da porta apresenta "erro ao adicionar a ação"

    ResponderExcluir
    Respostas
    1. Estou tendo o mesmo erro você conseguiu resolver?

      Excluir
    2. Alexandre consegui meus objetivos controlar os reles via web com DDNS porem com um programa mais simples.

      Excluir
  14. Gostaria de saber se funciona para esp32 , se tiver alterações quais seriam. Parabens pelos seus vídeos que hoje são meu melhor lazer.. Obrigado

    ResponderExcluir

Tecnologia do Blogger.