Acionamento de

Cargas Residencias.
O QUE É
IoT?
2
 IoT - A internet das coisas
É comunicação máquina a máquina via Internet, A IoT pode ser aplicada em diversos setores,
que permite que diferentes objetos compartilhem seja para otimizar as atividades de uma
dados e informações para concluir determinadas indústria ou facilitar a vida dos cidadãos,
tarefas. sendo usada em Smart Cities, Smart Home,
aplicação nas áreas de saúde e educação.
A base para o funcionamento da IoT são sensores e
dispositivos, que tornam a comunicação entre as
“coisas” possível. Além disso, é preciso um sistema
de computação para analisar os dados recebidos e
gerenciar as ações de cada objeto conectado a
essa rede.

3
Conhecendo os
Componentes

4
 ESP32
O módulo o módulo ESP-WROOM-32 é uma placa de desenvolvimento que
microprocessador LX6 de 32 bits Tensilica Xtensa® Dual-Core , além de ter
suporte a WiFi, também possui Bluetooth 4.0, uma interface USB-serial e um
regulador de tensão 3.3 V.
Há também 448 KB de ROM, 520 KB de SRAM e 4 MB de memória Flash (para
armazenamento de programas e dados) apenas o suficiente para lidar com as
grandes seqüências de caracteres que compõem páginas da Web, dados
JSON / XML e tudo o que lançamos nos dispositivos IoT atualmente.
Uma das grandes vantagens é a utilização da IDE do Arduino para
programação.

5
ESP32

6
 RELÉ

O módulo relé serve para acionar

cargas que exija, no máximo, 10 A.

Ele funciona exatamente como um

interruptor eletrônico.

7
COMO O RELÉ FUNCIONA?

Possui uma bobina e um contato

preso a uma mola, que conecta aos
terminais NA e NF.

Quando a bobina é energizada,

cria-se um campo magnético que
faz com que o contato se desloque.

8
Montagem

9
 Passando O codigo para a ESP32

● EN - Redefinir o chip
ESP32.
● Boot - Baixar novos
programas.
● LED vermelho -
indicador de energia
● LED azul - programável
pelo usuário

10
 Passando O codigo para a ESP32

Um marcado como EN localizado

no canto superior esquerdo é o
botão Redefinir, usado para
redefinir o chip ESP32. O outro
botão(Boot) de inicialização no
canto inferior esquerdo é o botão
de download usado durante o
download dos novos esboços /
programas.
11
 Passando O codigo para a ESP32

Pressionar O botão Boot,

até que apareça a mensagem:

12
Primeiro WebServe

13
CIRCUITO COM LÂMPADA

14
Preparando a IDE
do Arduino

15
Entre na IDE do Arduino e clique em Arquivo -> Preferências:

16
Na tela seguinte, digite o link abaixo no campo URLs adicionais de
Gerenciadores de Placas:

http://arduino.esp8266.com/stable/package_esp8266com_index.json

Depois disso clique em ok

17
Agora clique em Ferramentas -> Placa -> Gerenciador de Placas:

18
Pesquise por esp8266 by ESP8266 Community e clique em INSTALAR

19
No menu Ferramentas -> Placas,
selecione a placa NodeMCU 1.0
(ESP 12-E module) e comece a
programar

20
Entendendo
o Codigo
21
22
O programa começa incluindo a biblioteca WiFi.h. Esta biblioteca fornece
métodos WiFi específicos do ESP32 que estamos chamando para conectar-se à
rede. Em seguida, também incluímos a biblioteca WebServer.h , que possui
alguns métodos disponíveis que nos ajudarão a configurar um servidor e
manipular solicitações HTTP recebidas.

#include <WiFi.h>
#include <WebServer.h>

23
Aqui você irá inserir os dados da rede, a senha e nome da rede. Irá servir para a
esp se conectar com o roteador.

const char* ssid = " YourNetworkName"; // Enter SSID here

const char* password = " YourPassword"; //Enter Password here

24
Em seguida, declaramos um objeto da biblioteca WebServer , para que possamos
acessar suas funções. O construtor deste objeto usa a porta (onde o servidor estará
ouvindo) como parâmetro. Como 80 é a porta padrão para HTTP, usaremos esse valor.
Agora você pode acessar o servidor sem precisar especificar a porta na URL.

WebServer server(80);

25
Em seguida, declaramos os pinos GPIO do ESP32 aos quais
os LEDs/Relé estão conectados e seu estado inicial.

Int LED1pin = 4;
bool LED1status = LOW;

26
Função Inside Setup ()

Configuramos nosso servidor HTTP antes de executá-lo. Primeiro, abrimos uma conexão
serial para fins de depuração e configuramos as portas GPIO para OUTPUT.

Serial.begin(115200);
pinMode(LED1pin, OUTPUT);

27
Estamos ingressando na rede existente usando a WiFi.begin() função.

//connect to your local wi-fi network

WiFi.begin(ssid, password);

28
Enquanto o ESP32 tenta se conectar à rede, podemos verificar o status
da conectividade com a WiFi.status() função

//check wi-fi is connected to wi-fi network

while (WiFi.status() != WL_CONNECTED)
{
delay(1000);
Serial.print(".");}

29
● WL_CONNECTED : atribuído quando conectado a uma rede Wi-Fi
● WL_NO_SHIELD : atribuído quando nenhum escudo Wi-Fi está presente
● WL_IDLE_STATUS : um status temporário atribuído quando WiFi.begin () é chamado e
permanece ativo até o número de tentativas expirar (resultando em
WL_CONNECT_FAILED) ou uma conexão estabelecida (resultando em
WL_CONNECTED)
● WL_NO_SSID_AVAIL : atribuído quando nenhum SSID está disponível
● WL_SCAN_COMPLETED : atribuído quando as redes de digitalização são concluídas
● WL_CONNECT_FAILED : atribuído quando a conexão falha para todas as tentativas
● WL_CONNECTION_LOST : atribuído quando a conexão é perdida
● WL_DISCONNECTED : atribuído quando desconectado de uma rede

30
Depois que o ESP32 está conectado à rede, o esboço imprime o endereço IP atribuído
ao ESP32, exibindo o WiFi.localIP() valor no monitor serial.

Serial.println("");
Serial.println("WiFi connected..!");

Serial.print("Got IP: ");

Serial.println(WiFi.localIP());

31
Para lidar com solicitações HTTP recebidas, precisamos especificar qual código executar quando um URL específico for
atingido. Para fazer isso, usamos on método Este método usa dois parâmetros. O primeiro é um caminho de URL e o
segundo é o nome da função que queremos executar quando esse URL for atingido.

Por exemplo, a primeira linha do trecho de código abaixo indica que quando um servidor recebe uma solicitação HTTP no
caminho raiz ( / ), ele dispara a handle_OnConnect() função. Observe que o URL especificado é um caminho relativo.

server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);

32
Não especificamos o que o servidor deve fazer se o cliente solicitar qualquer URL diferente do especificado server.on() .
Ele deve responder com um status HTTP 404 (Não encontrado) e uma mensagem para o usuário. Também colocamos isso
em uma função e usamos server.onNotFound() para dizer que ele deve ser executado quando receber uma solicitação de
um URI que não foi especificado com o server.on

server.onNotFound(handle_NotFound);

Agora, para iniciar nosso servidor, chamamos o método begin no objeto server.

server.begin();

Serial.println("HTTP server started");

33
Função Inside Loop ()

Para lidar com as solicitações HTTP de entrada reais, precisamos chamar o handleClient() método no objeto do
servidor. Também mudamos o estado do LED conforme a solicitação.

void loop() {
server.handleClient();
if(LED1status)
{digitalWrite(LED1pin, HIGH);}
else
{digitalWrite(LED1pin, LOW);}

34
Em seguida, precisamos criar uma função anexada à URL raiz (/) com server.on. Lembrar? No início desta função, configuramos o
status de ambos os LEDs para LOW (estado inicial dos LEDs) e os imprimimos no monitor serial. Para responder à solicitação HTTP,
usamos o método send . Embora o método possa ser chamado com um conjunto diferente de argumentos, sua forma mais simples
consiste no código de resposta HTTP, no tipo de conteúdo e no conteúdo.

No nosso caso, estamos enviando o código 200 (um dos códigos de status HTTP ), que corresponde à resposta OK . Em seguida,
especificamos o tipo de conteúdo como "text / html" e, finalmente, chamamos a função personalizada SendHTML () que cria uma página
HTML dinâmica contendo o status dos LEDs.

void handle_OnConnect() {
LED1status = LOW;
Serial.println("GPIO4 Status: OFF");
server.send(200, "text/html",
SendHTML(LED1status));
}

35
Da mesma forma, precisamos criar quatro funções para lidar com solicitações de LED
ON / OFF e na página de erro 404.

void handle_led1on() {
LED1status = HIGH;
Serial.println("GPIO4 Status: ON");
server.send(200, "text/html", SendHTML(true,LED2status));
}

void handle_led1off() {
LED1status = LOW;
Serial.println("GPIO4 Status: OFF");
server.send(200, "text/html", SendHTML(false,LED2status));
}
voidhandle_NotFound(){
server.send(404, "text/plain", "Not found");
}

36
Exibindo a página da Web HTML
SendHTML() A função é responsável por gerar uma página da Web sempre que o servidor da Web ESP32 receber uma solicitação de um
cliente da Web. Apenas concatena o código HTML em uma grande string e retorna à server.send() função que discutimos anteriormente. A
função assume o status dos LEDs como um parâmetro para gerar dinamicamente o conteúdo HTML.

O primeiro texto que você sempre deve enviar é a declaração <! DOCTYPE> que indica que estamos enviando código HTML.

String SendHTML(uint8_t led1stat){

String ptr = "<!DOCTYPE html> <html>\n";

37
Em seguida, o elemento de viewport <meta> torna a página da web responsiva
em qualquer navegador da web. Enquanto a tag title define o título da página.

ptr +="<head><meta name=\"viewport\" content=\"width=device-

width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>LED Control</title>\n";

38
Estilo da página da Web
A seguir, temos CSS para estilizar os botões e a aparência da página da web. Escolhemos a fonte Helvetica, definimos o
conteúdo a ser exibido como um bloco embutido e alinhado no centro.

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-
align: center;}\n";

O código a seguir define cor, fonte e margem ao redor do corpo, tags H1, H3 e p.

ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color:

#444444;margin-bottom: 50px;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";

39
Alguns estilos são aplicados aos botões, bem como propriedades como cor, tamanho, margem, etc. Os botões
LIGAR e DESLIGAR têm cores de fundo diferentes, enquanto : o seletor ativo de botões garante o efeito de
clique no botão.

ptr +=".button {display: block;width: 80px;background-color: #3498db;border:

none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px
auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #3498db;}\n";
ptr +=".button-on:active {background-color: #2980b9;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";

40
Definindo o cabeçalho da página da Web
Em seguida, o cabeçalho da página da web é definido; você pode alterar este texto para qualquer coisa que seja adequada ao
seu aplicativo.

ptr +="<h1>ESP32 Web Server</h1>\n";

ptr +="<h3>Using Station(STA) Mode</h3>\n";

Exibindo os botões e o estado correspondente

Para gerar dinamicamente os botões e o status do LED, usamos a instrução if. Portanto, dependendo do status dos pinos
GPIO, o botão ON / OFF é exibido.

41
if(led1stat)
{ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\
n";}
else
{ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\"
href=\"/led1on\">ON</a>\n";}

42
Bônus: Blynk

43
Preparando a IDE
do Arduino

44
Clicar onde a seta indica

45
● Depois do arquivo ser
baixado, você tem que
descompactar ele.

● Depois que você abrir a pasta

do Blynk irá encontrar mais
duas pastas, as mesmas
deverão ser inseridas na pasta
do arduino.

46
 Abriu a libraries do blynk,
voce copia os documentos
para a libraries do arduino

Caso a sua pasta do arduino já tenha a pasta Tools você irá

realizar o mesmo passo que foi citado anteriormente, se não
você irá copiar todo a pasta tools e inserir na pasta do
arduino.

47
 Primeiro
exemplo
utilizando a
NodeMCU

48
O Blynk é um serviço baseado em um aplicativo personalizável que permite
controlar remotamente um hardware programável, bem como reportar dados
do hardware ao aplicativo

É composto de três partes: o Blynk App, o Blynk Server e a Blynk Library,

conforme esquema da Figura 2 a seguir:

49
 Como usar o Blynk?
Primeiro deve-se baixar o aplicativo, podendo ser na Play Store ou Apple Store. Após o
download a sua conta deve ser criada

50
 Como usar o Blynk?
Depois de logar no aplicativo Blynk, criaremos um novo projeto. Selecione a opção New Project
e depois clique em Create. Um token será enviado ao seu email.

A seguir, em Choose
Hardware, escolha a
opção NodeMCU

51
 Como usar o Blynk?
Para adicionar os componentes clique no ícone abaixo e selecione o componente desejado.

52
 Como usar o Blynk?
Ao clicar no componente adicionado as seguintes opções aparecerão. Clique no PIN e escolha o pino
a ser usado no seu projeto.

53
THANKS!
Alguma dúvida?
Dayalla Fernandes | dayallamfc19@gmail.com
Laura Macaíba | lauramacaiba@gmail.com
Júlia Leite | Jubsnoona@gmail.com
Iasmin Palma |
Mariana Barros | mariana.barros@ieee.org
Marcos Oliveira |marcospedroso@ieee.org

54