EBOOK

AUTOMAÇÃO
RESIDENCIAL
POR WIFI
CONTROLE SUA CASA PELO
SEU CELULAR

ENG. LUAN BISPO

ENGEASIER
 EBOOK
AUTOMAÇÃO RESIDENCIAL
POR WIFI

Olá, sou o Luan. Criador da

EngEasier, um canal que ajuda
milhares de pessoas todos o dias a
entenderem a engenharia de uma
forma mais simples.

Neste eBook você aprenderá a

criar uma automação residencial
controlada pelo WiFi da sua casa.
Você verá como controlar as Luzes,
o portão automático e tudo mais
que sua imaginação permitir.

Então vamos para o conteúdo!

 MÓDULO 1
NODEMCU

Para criarmos nossa automação

residencial pelo WiFi a melhor
opção é utilizar a NodeMCU.

A NodeMCU é uma placa de

desenvolvimento que combina o
chip ESP8266, uma interface usb-
serial e um regulador de tensão
3.3V.

A programação pode ser feita

utilizando a IDE do Arduino, usando
a comunicação via cabo micro-usb.

Também possui antena embutida,

além de 11 pinos de I/O e conversor
analógico-digital.
Placa:

Pinagem:
 MÓDULO 2
Configuração
Neste eBook, para facilitar o seu
apredizado, vamos utilizar a IDE do
Arduino. O primeiro passo para é
baixar a IDE (Integrated
Development Environment ou
Ambiente de Desenvolvimento
Integrado), que pode ser baixada
no site oficial:

www.arduino.cc
Para programarmos a NodeMCU
com a IDE do Arduino, precisamos
fazer algumas configurações.

O primeiro passo é instalar os

pacotes do módulo ESP8266 na IDE.
Para isso vamos a Arquivo ->
Preferências:
Uma janela se abrirá. Copie a URL
abaixo e cole no campo “Additional
Boards Manager URLs” e dê OK:

http://arduino.esp8266.com/stable/package_esp826
6com_index.json
Agora vá a Ferramenta -> Placa ->
Gerenciador de Placa...

Nesta janela, procure pelo módulo

ESP8266 e clique em instalar:
Vá a Ferramentas -> Placa ->
NodeMCU 1.0 (ESP-12E Module):

Pronto! A IDE já está configurada

para você programar a NodeMCU.
 MÓDULO 3
Primeiro Circuito
Agora vamos começar a
desenvolver a nossa automação,
começando pelo desenvolvimento
do controle de luzes. De início
vamos simular com um LED e após
funcionar vamos para as lâmpadas.

Para isso vamos precisar de alguns

componentes além da NodeMCU.

Protoboard
LED

Resistor de 220Ω

Jumpers

Cabo Micro USB

A Ligação fica assim:

O Anodo (+) do LED vai para o Pino

D1 da NodeMCU e o Catodo(-) liga o
Resistor e vai para o GND. Você
também pode ligar o Resistor ao
Anodo do LED, a ordem dos fatores
não altera o resultado neste caso.
 MÓDULO 4
Programando
Agora vamos desenvolver a
programação da nossa Automação.
Nela faremos:
A NodeMCU conectar na rede
WiFi da nossa casa
Criar um Servidor Web que
conterá uma Página com
Botões
Receber os comandos da
Página Web e ligar e desligar o
LED (que em breve será uma
lâmpada).

Para isso, vamos abrir a nossa IDE

do Arduino e selecionar a Placa
NodeMCU como explicado
anteriormente.
O primeiro passo é colocar as
bibliotecas que iremos utilizar:

Agora vamos criar as variáveis

onde colocaremos os dados da
nossa rede WiFi: O nome e a senha

Coloque em NomedaRede e
SenhadaRede o nome da rede do
seu WiFi e a sua Senha,
respectivamente.
Digite corretamente!
Antes de irmos para o Setup,
vamos criar uma variável int
chamada luz, onde iremos definir o
pino D1 para ativarmos o LED, a
princípio

E vamos definir a porta 8090 para

o nosso servidor. A porta padrão é
80, assim garantimos que não
haverá nenhum problema.
Vamos para o Setup, onde o nosso
programa irá executar apenas uma
vez. Nele já de início vamos fazer 3
coisas:
Iniciar a nossa comunicação
serial (para conseguirmos ver
no Monitor Serial o que o
programa está fazendo)
Definir o nosso pino como saída
Começar com ele desligado

Agora vamos mostrar no Monitor

Serial que nossa placa está
conectando na nossa Rede WiFi
E vamos iniciar a conexão WiFi
passando o nome da nossa rede e
a senha

Enquanto não for efetuada a

conexão, vamos mostrar no
Monitor Serial uma série de "."

Quando o WiFi conectar, ele sairá

daquela condição do While e
mostraremos no Monitor Serial que
conectou
Vamos iniciar a comunicação com o
Servidor e exibir que ele iniciou

E agora vamos colocar os

endereços de IP, Gateway e
Máscara de Sub-rede

Lembrando que este IP é no meu

caso. No seu você precisa verificar
qual o range e qual está disponível.
Para saber, abra o prompt de
comando, digita ipconfig. Lá você
também verá qual é o seu Gateway
Padrão, que é o IP do seu roteador
e definiremos ali em gateway e a
Máscara de Sub-rede, que
definimos em subnet
E também vamos mostrar no
Monitor Serial qual será o IP que
digitaremos no navegador para
acessar a nossa automação. Ele é o
IP que definimos anteriormente:

Lembrando que este IP apenas

funcionará na rede em que a nossa
NodeMCu estiver conectada
E por último no Setup vamos
passar esses 3 dados (IP, Gateway
e Subnet) para as configurações do
Wifi

Agora vamos para o Loop, onde

realmente o nosso programa da
automação vai rodar. De início
vamos fazer uma verificação se o
cliente está conectado (o cliente é o
nosso navegador, quando nos
conectamos ao servidor). Ficará
nesta verificação até conectar
Vamos ler o que vier do cliente,
exibir no monitor serial e limpar.

Agora vamos criar uma variável

para ler se ligamos ou desligamos
o pino da Luz

Vamos ler se o que recebemos da

página é "/ON" (que definiremos
para ligar. Se for, ligamos o pino e
atribuímos "Ligado" ao "statusLuz"
E faremos o mesmo para desligar.
Se recebermos "/OFF", ligamos o
pino e atribuímos ao "statusLuz" a
palavra "Desligado"

Agora vamos criar a nossa página

HTML, onde acessaremos pelo
navegador do nosso celular ou
computador e controlaremos nossa
automação. Toda página tem que
ser "impressa" pelo client.print("");.
Vamos começar dizendo ao cliente
a versão do HTTP e o tipo do
conteúdo, que é o HTML
Vamos agora abrir a tag <html>
onde toda a página fica. Vamos
também iniciar o <head>, que é o
cabeçalho onde as informações
não são visíveis no navegador, mas
contém instruções sobre o
conteúdo da página. Finalizamos o
head com </head>

Vamos iniciar agora o <body>, que

é o corpo da página. Já de inicio
vamos definir a cor de fundo. Esta
cor tem que estar no formato
Hexadecimal. No meu caso utilizei
um azul claro (que está grifado na
imagem abaixo). Também vamos
utilizar a tag <center> para deixar
tudo centralizado
Antes de colocar os botões de Ligar
e Desligar, vamos verificar se a
saída está ligada ou desligada.
Para isso vamos utilizar a variável
statusLuz que criamos
anteriormente

Agora vamos criar os dois botões.

O primeiro irá mandar "ON" e terá
o texto "Liga" e o segundo
mandará "OFF" e o texto "Desliga"

E vamos fechar as tags que

abrimos do center, body e html
E para finalizar a programação,
vamos dar um pequeno delay e
mostrar no Monitor Serial que após
efetuar a ação que fizemos,
desconectamos o cliente.

Pronto! Com isso finalizamos a

programação da nossa NodeMCU e
podemos carregar o programa
para a placa e testar.
Com a NodeMCU conectada ao
computador pelo cabo USB, vamos
clicar em Carregar, na IDE
Após carregar, vamos abrir o
Monitor Serial e verificar se
conectou corretamente. Lembre de
colocar a velocidade em 115200

Agora abra o navegador do celular

ou computador que estiver
conectado na mesma rede e digite
o IP que aparece ali, com o final
:8090
Dê enter e a página que criamos
será carregada
Ao clicarmos no botão Liga, o LED
ligará e informará e na página
mostrará o Status
E ao clicarmos no botão Desliga, o
LED desligará e informará e na
página mostrará também o Status
 MÓDULO 5
Aplicativo para Android

A plataforma utilizada para

desenvolver o Aplicativo para o
Android será o MIT App Inventor,
que é uma aplicação de código
aberto que foi desenvolvido pela
Google e atualmente é mantida
pelo MIT (Massachusetts Institute of
Technology).

O MIT App Inventor é acessado

através do navegador de internet,
pelo link:

ai2.appinventor.mit.edu
Após acessar, será necessário
efetuar o login utilizando uma
conta Google

Feito o login, a tela inicial é aberta,

onde podem ser acessados todos
os menus
Na guia “Projetos”, você poderá
acessar os seus projetos anteriores,
iniciar um novo, importar os que
você salvou em seu computador,
salvá-lo e exportá-lo.

Em “Conectar”, você poderá

conectar o seu celular com o
projeto via Wifi* em Assistente AI ou
pelo USB. Também poderá simular
um celular na aplicação, em
Emulador. Caso aconteça algum
problema ou você desconecte o seu
celular e queira conectá-lo
novamente, poderá reiniciar a
conexão.
*Para conectar via Wifi,
primeiramente você deverá ter o
Aplicativo MIT AI2 Companion em
seu celular, que pode ser baixado
no Play Store.
E poderá escanear ou digitar o
código de 6 dígitos:

Para utilizar o Emulador ou via USB,

você deverá ter em seu
computador o Software aiStarter,
que pode ser baixado neste link:

http://appinventor.mit.edu/explore/ai2/setup
-emulator.html
Na aba “Conectar”, você poderá
baixar o seu projeto via QR Code ou
direto para o seu computador.

Para começar a desenvolver,

vamos clicar em “Iniciar um novo
projeto” e dar um nome ao
aplicativo:
Após dar o nome ao aplicativo,
vamos para a tela de
desenvolvimento.
Esta tela é dividida em duas partes
principais: Designer e Blocos.
No Designer é onde faremos toda a
parte da interface do aplicativo
com o usuário, como botões,
imagens e textos.
Na tela de Blocos é onde faremos a
programação do Aplicativo.

Vamos iniciar o desenvolvimento

do Aplicativo.
De início vamos carregar as
imagens que serão usadas para os
botões de liga e desliga. Você pode
baixar as que uso aqui:

Download Imagens App

2º

1º
Agora vamos colocar os dois
botões de liga e desliga. Para isso
vamos ao menu ao lado esquerdo,
em interface de usuário e
arrastamos dois botões para a tela.

Vamos também colocar dois blocos

para dar um espaço entre os
botões. Eles não ficarão visíveis,
apenas o seu espaço. Para isso
vamos em Organização e pegamos
qualquer bloco.
Em Componentes, ao lado direito,
vamos clicar em Screen1 e nas
Propriedades da Tela, também ao
lado direito, vamos definir seu
Alinhamento Horizontal como
“Centro”, e desmarcar a opção de
Título Visível.
Novamente em Componentes, ao
lado direiro, vamos clicar em
Botão1 e nas Propriedades,
também ao lado direito, vamos
adicionar a imagem que subimos
ao nosso botão, clicando em
Imagem e escolhendo ela. Também
vamos apagar o texto. Na Altura e
Largura também colocaremos 50
pontos.

Vamos fazer isso para os dois

botões.
E por último na tela de Designer,
vamos adicionar um componente.
Vamos ao menu do lado esquerdo,
em Conectividade e arrastamos
para a tela o Componente Web. Ele
não ficará visível, mas será
responsável por fazer a conexão do
aplicativo com a nossa automação.
Pronto, terminamos a parte visual
do nosso App e ele fica assim

Agora vamos desenvolver a

programação do nosso aplicativo.
Para isso vamos para a tela de
Blocos.
Vamos de início colocar uma
variável global, chamá-la de ip.
Vamos também adicionar um bloco
de texto e colocar o IP que nós
definimos anteriormente e que
usamos para acessar a nossa
página. Da mesma forma que no
design, é só arrastar para a tela.

Não esquece de colocar o "http://"

e a "/" no final.
Agora vamos dar função para os
nossos botões. Para isso, vamos
clicar no "Botão1", escolher o
componente "quando .Clique" e
arrastar para a tela.

Então assim que clicarmos no

botão, devemos ajustar a URL para
simularmos o navegador
mandando a informação, igual
fizemos na página HTML. Para
fazer isso vamos ao bloco "Web1" e
pegamos o componente "ajustar
URL para"
E vamos juntar os dois blocos
assim:

Agora precisamos definir o texto

que iremos "ajustar a URL". A gente
precisará juntar a nossa variável ip
que criamos com o texto que
usamos para enviar para ligar a
Luz. Para isso pegamos o bloco
"Juntar"

No primeiro campo colocaremos a

variável global que criamos e no
segundo campo um bloco de texto
com o texto.
E abaixo deles colocamos o bloco
para fazer o método GET. Vamos
de novo no Bloco Web1 e
selecionamos o componente
"chamar .Obter"
E por último, precisamos dar
função para o segundo botão, de
desligar. Para isso, vamos duplicar
(clicando com o botão direito do
mouse) o nosso bloco inteiro e
alterar os nomes e textos

Pronto! Temos o nosso aplicativo

para Android finalizado. Agora é só
baixar e instalar no seu celular ou
também simulá-lo utilizando o App
do MIT App Inventor.
 MÓDULO 6
Controlando Lâmpadas
Para controlarmos as lâmpadas de
verdade, precisaremos de mais um
componente: o módulo relé.

Esse módulo da foto é de 2 canais,

ou seja, você poderá controlar duas
lâmpadas (ou outros
equipamentos) com ele. Existem
módulos relés de diversas
quantidades de canais.
Para ligá-lo com a nossa NodeMCU
precisamos tomar um cuidado:
Esses módulos normalmente são
5V e a NodeMCU trabalha com 3.3V,
além da corrente ser baixa.
Para reverter esse problema,
podemos utilizar uma fonte de 5V,
e pelo menos 1A. O 5V da fonte
mandamos direto para a
alimentação do módulo relé e o
GND colocamos em comum com o
da NodeMCU. E da NodeMCU o pino
digital, que antes utilizávamos para
ligar o LED, vai para o Canal do
Relé.
Agora para fazer a ligação da
lâmpada com o nosso módulo relé
nós temos que utilizar em paralelo
com ele um interruptor three way.
Isso porque, caso caia a conexão
da nossa automação, você possa
continuar ligando e desligando a
luz normalmente pelo interruptor
físico. A ligação deve ser feita
assim:

Você também assistir ao nosso

vídeo, onde explico como fazer
essa conexão:

Ligando Módulo Relé com

Interruptor
Além de lâmpadas, você pode
controlar praticamente qualquer
equipamento que liga e desliga.
Como na foto abaixo você pode ver
a ligação com um ventilador
também
 MÓDULO 7
Controlando
o Portão da Garagem
Algo que podemos automatizar e
controlar pelo nosso celular é o
portão automático da garagem.

E é algo muito mais simples do que

parece. Isso porque a maiorias das
placas de portão já possuem uma
entrada para botões. Só que ao
invés de utilizarmos um botão,
colocamos o módulo relé!

O modelo da placa que irei

demonstrar aqui é a P3000, da
Ipec. Porém outros modelos são
parecidos e seguem praticamente a
mesma nomenclatura.
Olhando no manual desta placa,
vemos como instalar o botão:
A ligação com o relé fica desta
forma: BOT com NA e – com
Comum.

Para acionar o portão existe uma

diferença importante do que ligar
uma luz.
Isso porque com a Luz, ao ligarmos
o relé, ela acende e ao desligarmos
ele, a luz apaga. Com o portão é
diferente, ele aciona com um pulso.
Ou seja, ao apertar e soltar o botão
ele abre, repetindo isso ele fecha.
Então temos que fazer o nosso relé
ligar e desligar.
No nosso código da NodeMCU,
vamos adicionar o pino digital para
acionar o portão

Aqui lemos o que a Página envia. Se

for PORT, ligamos o relé que está
ligado à porta D2 e desligamos
após 1 segundo.

E adicionamos o botão que envia o

PORT na nossa página HTML,
abaixo dos demais

Com isso a programação da

NodeMCU está pronta. Só carregar
o programa para a placa.
Agora vamos atualizar o nosso
Aplicativo para Android. Para isso
voltamos ao MIT App Inventor.

Vamos adicionar um novo botão à

tela, colocar um bloco para dar um
espaço e colocar também uma
imagem a ele.
E em blocos, vamos fazer igual aos
outro botões, mudando apenas o
nome do botão e o que ele envia

Pronto! Agora poderemos abrir e

fechar o portão da garagem pelo
nosso celular.
Chegamos ao final do nosso eBook
e eu realmente espero que você
tenha gostado e, mais que isso,
aprendido a criar a suas
automações residenciais utilizando
a NodeMCU.

Continue aprendendo e aplicando o

que você aprendeu neste eBook
que os seus projetos ficarão cada
vez melhores e mais completos!

Ah, assim que desenvolver sua

automação, faz um story no
Instagram e marca a gente:
@engeasier

Um grande abraço!
Eng. Luan Bispo
Equipe EngEasier