Daniel Madeira Bueno

COMO CONTROLAR O MEU

ARDUINO
PELA INTERNET?
VOLUME I

Implemente soluções IoT para o seu ARDUINO

utilizando a linguagem HTML e sem recorrer a
softwares intermediários.
 DANIEL MADEIRA BUENO

COMO CONTROLAR O MEU ARDUINO PELA INTERNET?

VOLUME I

1ª edição

Vitória
Edição do Autor
2018
É proibida a duplicação ou reprodução deste volume, no
todo ou em parte, sob quaisquer formas ou por quaisquer
meios (eletrônico, mecânico, gravação, fotocópia, distribui-
ção na Web e outros), sem permissão expressa e prévia do
Autor.

Os transgressores estarão sujeitos à responsabilização ci-

vil e criminal, respondendo portanto, nos termos da lei.

Para enviar alguma sugestão, crítica, elogio ou até mesmo

para denunciar cópias ilegais, entre em contato com o au-
tor através do seguinte e-mail:

automacaoem5minutos@gmail.com

Este livro contém citações de nomes comerciais e marcas

registradas de produtos pertencentes a diversas institui-
ções, entretanto, estas são utilizadas apenas para fins edi-
toriais e em benefícios dos proprietários das mesmas, sem
nenhuma intenção de atingir seus direitos.

Esta obra está publicada sob o título:

Como controlar o meu Arduino pela internet? -
Volume I

ISBN: 978-85-924209-0-1

Todos os direitos desta edição estão reservados a:

© 2018 Daniel Madeira Bueno

Autor: Daniel Madeira Bueno

Editor responsável: Daniel Madeira Bueno
Capa: Daniel Madeira Bueno
SUMÁRIO
Capítulo 1 - IoT: Uma visão geral.................................................1
1.1 O que exatamente é a Internet das coisas?...........................1
1.2 O que você poderá aprender neste livro?.............................3
Capítulo 2 - Clientes e servidores................................................5
2.1 Uma breve explicação sobre clientes e servidores................5
2.2 A conectividade do Arduino UNO..........................................7
2.3 Como serão as aplicações a serem desenvolvidas neste
livro? ..........................................................................................8
Capítulo 3 - O Arduino UNO e os navegadores web....................9
3.1 Estrutura do código-base......................................................9
Capítulo 4 - Desenvolvendo a nossa primeira página................20
4.1 Um pouco sobre HTML.......................................................20
4.2 O uso de tags na linguagem HTML.....................................21
4.3 A estrutura do código HTML de uma página web..............22
4.4 Desenvolvendo a página web no Arduino..........................23
4.5 As principais tags HTML......................................................25
4.6 Definindo o idioma do documento.....................................27
4.7 Adicionando o título que deve ser apresentado na aba da
página.......................................................................................29
4.8 Resolvendo problemas de acentuação................................30
 Como controlar o meu ARDUINO pela Internet?

4.9 Escrevendo a primeira mensagem na tel............................32

4.10 Utilizando as tags de cabeçalho.........................................33
4.11 Utilizando tags de parágrafo..............................................35
Capítulo 5 - Desenvolvendo sistemas de monitoramento.........38
5.1 Definindo um cabeçalho simples para a página......39
5.2 Lendo as portas de entrada analógica.........................40
Capítulo 6 - Acionando saídas digitais com o método GET.........50
6.1 Os formulários.....................................................................50
6.2 Modelo de uma requisição GET...........................................51
6.3 Tratamento de uma requisição GET.....................................52
6.4 Criando acionamentos ON/OFF com caixas de marcação...58
6.5 Criando acionamentos ON/OFF com botões de rádio........62
6.6 Utilizando sinais PWM com caixas de texto........................67
Capítulo 7 - Acionando saídas digitais com o método POST.......71
7.1 Modelo de uma requisição POST........................................71
7.2 Tratamento de uma requisição POST..................................72
7.3 Adicionando os formulários.................................................76
7.4 Criando acionamentos ON/OFF com Botões ......................77
7.5 Utilizando sinais PWM com o elemento Number...............84
7.6 Utilizando sinais PWM com o elemento Range...................89
APÊNDICE A.............................................................................95
 Sumário

APÊNDICE B.............................................................................97
APÊNDICE C.............................................................................99
APÊNDICE D...........................................................................102
APÊNDICE E...........................................................................108
APÊNDICE G...........................................................................111
APÊNDICE H...........................................................................114
APÊNDICE I............................................................................117
 1
CAPÍTULO 1

IoT: Uma visão geral

Imagine o seguinte cenário: você está a caminho de uma reu-

nião mas não tem certeza de qual é a melhor rota para chegar ao
seu destino. Se este tipo de situação acontecer nos dias atuais,
muito provavelmente você terá em mãos algum recurso que possa
te auxiliar, como por exemplo, aplicativos que forneçam in-
formações relacionadas ao tráfego, a novos trajetos ou
até mesmo que possam te proporcionar meios de comu-
nicação para avisar que chegará atrasado na reunião. O mais im-
pressionante é que estes recursos podem estar tanto dentro do seu
aparelho celular quanto embutidos no seu carro.
Podemos também pensar em uma situação na qual temos uma
máquina de tirar xerox de uso coletivo em uma empresa. Imagine
quão fiel será a garantia de continuidade do serviço se esta
máquina puder detectar automaticamente a falta de suprimentos
e ao mesmo tempo fazer as devidas requisições de troca.
As situações ilustradas acima denotam a existência de um ele-
mento que nos dias de hoje está cada vez mais presente em nosso
cotidiano: o conceito de Internet das Coisas (IoT). Este con-
ceito, tem causado impacto de maneira nítida, não só em nossa
maneira de viver como também no nosso modo de trabalhar.

1.1 O que exatamente é a Internet das coisas?

Quando pesquisamos sobre a famosa internet das coisas, en-
contramos uma infinidade de significados, os quais, em sua maio-
ria são convergentes, porém, algumas vezes bastante utópicos, ou
2 Como controlar o meu ARDUINO pela Internet?

seja, vão além da realidade de modo um pouco mais fantasioso do

que o normal.
De maneira bem simples, podemos dizer que o significado de
IoT está atrelado à possibilidade de conectarmos “qualquer” dis-
positivo à internet. Em um cenário, por exemplo, doméstico, os
equipamentos citados vão desde celulares e computadores até
outros aparelhos eletrônicos como por exemplo, cafeteiras ou
máquinas de lavar roupa.
Algumas análises estatísticas, como por exemplo, uma realiza-
da pela empresa de consultoria Gartner, sugere que até 2020 te-
remos mais de 20 bilhões de dispositivos conectados à internet.
De acordo com estes dados, podemos pensar que o conceito de
internet das coisas está ligado a um aspecto físico que pode ser tra-
duzido em algo muito semelhante a uma imensa rede de “coisas”
conectadas entre si. Basicamente, a ideia é que qualquer coisa
que possa ser conectada, será conectada.

Figura 1.1 - Internet das Coisas (IoT)

Capítulo 1 - IoT: Uma visão geral 3

1.2 O que você poderá aprender neste livro?

Neste livro iremos unir elementos muito importantes nos dias
atuais quando falamos em tecnologia: o conceito de internet das
coisas (IoT) e as placas Arduino.
As placas Arduino foram e ainda são uma grande revolução
no ensino de conteúdos relacionados com eletrônica, automação,
robótica, programação, entre outros. Estas consistem em sistemas
embarcados confeccionados em placas de circuito impresso, nas
quais, estão localizados todos os componentes necessários para o
funcionamento adequado dos recursos inerentes às mesmas.
Se você chegou até aqui, é bem provável que você já tenha uma
certa experiência na manipulação das placas Arduino, pois, o con-
teúdo que será apresentado no decorrer deste material é algo um
pouco distante do desenvolvimento de aplicações básicas, de modo
que, o que pretendemos ao lançar este material, é acrescentar à
sua bagagem de informações, um conhecimento avançado sobre a
implementação de soluções IoT utilizando uma placa Arduino.

Figura 1.2 - Logo Arduino

4 Como controlar o meu ARDUINO pela Internet?

Hoje em dia, existem vários materiais sobre as mais diversas

aplicações que utilizam recursos de internet em conjunto com as
placas Arduino, no entanto, dificilmente você encontrará um
conteúdo completo, simples e interessante sobre o desen-
volvimento de sistemas nos quais você poderá acessar sua placa e
manipula-la das mais diversas formas através de um navegador
de internet.
Sendo assim, a nossa proposta é apresentar os procedimen-
tos necessários para que possa utilizar a linguagem HTML para
começar a construir os mais diversos tipos de sistemas
(semelhantes aos websites que acessamos em nosso dia a dia) e
posteriormente manipular sua placa Arduino através do nave-
gador de internet de um dispositivo presente na sua rede
local ou até mesmo em uma outra rede.

Seja bem-vindo e divirta-se.

 CAPÍTULO 5

Clientes e servidores 2
Em nosso dia a dia, estamos acostumados a lidar com vários ti-
pos de situações que vão desde as mais comuns até impasses ines-
perados. É certo que, quando vivenciamos momentos corriquei-
ros, quase sempre realizamos ações de uma maneira “mecânica”,
ou seja, de uma maneira em que geralmente não pensamos muito
sobre a forma de como devemos proceder. Como exemplo destes
tipos de situações, podemos citar a ida à cozinha para beber um
copo de água ou até mesmo o ritual que realizamos para escovar
nossos dentes.
Observe que por mais simples que as situações ilustradas ante-
riormente sejam, existe um mecanismo biológico muito complexo
por trás de cada movimento efetuado. Algo análogo ocorre quando
nós simplesmente digitamos o endereço de um website na barra
de endereços de um navegador de internet.
É com esta reflexão que iremos iniciar nossos estudos sobre o
desenvolvimento de aplicações IoT em conjunto com as placas
Arduino.

2.1Umabreveexplicaçãosobreclienteseservidores

Seguindo a linha de raciocínio apresentada anteriormente, é

quase certo afirmar que nós praticamente não nos damos conta da
estrutura existente por trás do imenso universo de possibilidades
da internet.
De maneira bastante simplória, a internet pode ser considera-
6 Como controlar o meu ARDUINO pela Internet?

da como uma grande união de redes de computadores espalhadas

pelo mundo e que se comunicam através da utilização de um con-
junto próprio de protocolos de comunicação, os quais, são respon-
sáveis pelo “estabelecimento das regras” necessárias para que a
transmissão das informações ocorra de maneira adequada.
Quando falamos em internet, não podemos deixar de citar al-
guns dos elementos protagonistas deste universo: os servidores.
Os servidores consistem basicamente em computadores res-
ponsáveis por armazenar, fornecer e receber dados prove-
nientes de outros dispositivos, que por sua vez, são chamados de
clientes. Em resumo, os servidores atuam como centralizadores
das informações e os clientes são os dispositivos que interagem
com os servidores para fazer uso das informações citadas.

Figura 2.1 - Estrutura Cliente/Servidor

Por fim, é extremamente importante que você entenda que as

relações estabelecidas entre o par cliente/servidor  são basea-
das em um mecanismo de requisição e resposta, no qual, o cliente
faz uma requisição ao servidor e este, ao recebê-la, irá processar a
Capítulo 2 - Clientes e Servidores 7

mesma e em seguida responde-la ao cliente, de maneira adequada.

2.2 A conectividade do Arduino UNO

Como sabemos, as placas Arduino são sistemas embarcados
bastante difundidos nos dias atuais, no entanto, apesar da exis-
tência de uma infinidade de modelos, a placa mais popular é sem
dúvida a denominada Arduino UNO, que por sua vez, será a uti-
lizada por nós.

Figura 2.2 - Placa semelhante ao Arduino UNO

A placa Arduino UNO consiste em um sistema que possui

aparato suficiente para lidar com a implementação de grande par-
te das soluções voltadas para a resolução de problemas do nosso
dia a dia, no entanto, esta placa deixa a desejar no quesito conec-
tividade, seja com uma rede local ou com a internet, pois, em sua
estrutura, não há suporte para tal recurso.
Para resolver este impasse vamos recorrer a um dos Shields
mais famosos: o Ethernet Shield W5100. Este elemento con-
siste em uma placa de circuito impresso que pode ser encaixada
perfeitamente sobre a placa Arduino UNO, conferindo conecti-
vidade à mesma através de um cabo Ethernet.
8 Como controlar o meu ARDUINO pela Internet?

Figura 2.3 - Ethernet Shield W5100

2.3 Como serão as aplicações a serem desen-

volvidas neste livro?
As aplicações a serem desenvolvidas neste livro seguirão o mo-
delo cliente/servidor apresentado anteriormente, de modo que,
o Arduino UNO em conjunto com o Ethernet Shield W5100
irá fazer o papel de servidor e o navegador do seu computador, por
exemplo, será o cliente.
Neste momento você deve estar pensando: “tudo bem, temos um
servidor e um cliente, mas, o que irá acontecer daí para frente?”.
A ideia é bastante simples e consiste basicamente no fato de que
ao utilizarmos um navegador para acessar o endereço IP previa-
mente configurado no Arduino UNO, este deverá enviar uma pá-
gina web que deve ser exibida para nós pelo navegador, de modo
que, através da mesma, será possível controlarmos as portas
de saída e entrada do nosso sistema embarcado. Apenas
para complementar, quando um dispositivo, como por exemplo, a
nossa placa Arduino, atua com este tipo de funcionalidade, dize-
mos que temos em mãos um elemento chamado Servidor Web.
 CAPÍTULO
O Arduino UNO
e os navegadores web 3
Neste capítulo, vamos aprender os procedimentos necessá-
rios para configurar um Servidor Web em uma placa Arduino
UNO anexada a um Ethernet Shield W5100. Além disso, tam-
bém iremos elaborar uma estrutura, que por sua vez, será utili-
zada por nós no desenvolvimento de todos os códigos presentes
neste livro.
Antes de começar a desenvolver o conteúdo proposto, devemos
salientar que apesar de estarmos utilizando o Ethernet Shield
W5100, isto não é obrigatório, pois, é perfeitamente possível que
você possa aplicar os conhecimentos adquiridos aqui, em projetos
que utilizem outro tipo elemento que possibilite a conexão da sua
placa Arduino (não necessáriamente a placa Arduino UNO) à sua
rede local (desde que você faça as adaptações necessárias).

3.1 Estrutura do código base

O código que utilizaremos como base para o desenvolvimen-
to nossas aplicações será o código-exemplo da biblioteca Ether-
net.h denominado WebServer (criado por David A. Mellis em
18 de dezembro de 2009 e modificado por Tom Igoe em 9 de
Abril de 2012).
Nos itens a seguir iremos detalhar a estrutura do código cita-
do e ensinar como você deve proceder para analisá-lo da maneira
correta. O programa em questão será dividido em cinco (5) blocos:
• Declaração das bibliotecas
• Declaração das variáveis globais
10 Como controlar o meu ARDUINO pela Internet?

• Definição das configurações iniciais

• Recebimento das requisições
• Criação da página web

3.1.1 Primeiro bloco – Inclusão das bibliotecas

O primeiro bloco do código-base consiste em um espaço onde

iremos fazer a inclusão das bibliotecas necessárias para que o
código funcione de maneira adequada.

1 #include <SPI.h>
2 #include <Ethernet.h>

Nas aplicações propostas neste livro, nós iremos fazer o uso de

apenas duas bibliotecas: a biblioteca SPI.h, responsável pela co-
municação do Ethernet Shield W5100 com a placa Arduino
UNO utilizando o protocolo SPI e a biblioteca Ethernet.h, que
por sua vez, atua possibilitando a conexão do conjunto, em um
primeiro momento, com uma rede local.

3.1.2 Segundo bloco – Declaração das variáveis globais

O segundo bloco do código-base consiste em um espaço onde

iremos declarar as variáveis globais que fazem parte do programa.

1 byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};

2 IPAddress ip(192, 168, 25, 16);
3 EthernetServer server(80);

O primeiro passo a ser seguido é a definição do endere-

ço MAC que será atribuído ao Arduino UNO. Na prática, este
Capítulo 3 - O Arduino UNO e os navegadores web 11

endereço pode ser qualquer um, desde que seja único na rede.
Como sugestão, apenas copie o valor que apresentamos.
Em seguida, além do endereço MAC definido anteriormente,
torna-se necessário definir um endereço IP para o nosso Ardui-
no UNO. Esta informação é imprescindível para que seja possível
estabelecer a conexão entre o mesmo e a rede local. Obviamente,
este endereço deve estar disponível na sua rede para que possa ser
utilizado (caso você não saiba como proceder, visite o Apêncice A
deste livro).
Por último, vamos criar um objeto chamado server, o qual,
será responsável por representar o Servidor Web no código do Ar-
duino UNO (Note que ao criarmos este objeto, passamos o nú-
mero 80 como parâmetro, pois estamos determinando a porta
que o Servidor Web utilizará para enviar as páginas web que serão
criadas posteriormente).
A título de curiosidade, quando digitamos o endereço de algum
site no navegador, ele automaticamente procura a porta 80 do ser-
vidor no qual está se conectando. Em contrapartida, caso o serviço
responsável por disponibilizar as páginas web para o cliente esti-
ver em outra porta, devemos especificar esta no endereço do site,
por exemplo: www.exemplo.com.br:1234

3.1.3 Terceiro bloco – Definição das configurações

iniciais

O terceiro bloco do código-base consiste em um espaço onde

iremos definir as configurações iniciais do programa.

1 void setup()
2 {
12 Como controlar o meu ARDUINO pela Internet?

1 Ethernet.begin(mac, ip);
2 server.begin();
3 }

Na função setup() iniciamos a conexão com a rede local atra-

vés da função Ethernet.begin() (passando como parâmetro os
endereços MAC e IP definidos anteriormente) e também inicia-
mos o Servidor Web por meio da sentença server.begin() (lem-
bre-se que server é o objeto criado para representar o Servidor
Web no código).
O quarto bloco do nosso código-base consiste em um espa-
ço onde iremos construir o código responsável por intera-
gir com as requisições feitas pelo navegador ao Servidor
Web. Apenas como uma observação, o intervalo que vai da linha
11 até a linha 16 não faz parte deste bloco, mas sim do quinto bloco.

1 void loop()
2 {
3 EthernetClient client = server.available();
4 if (client)
5 {
6 boolean currentLineIsBlank = true;
7 while (client.connected())
8 {
9 if (client.available())
10 {
11 char c = client.read();
12 if(c == ‘\n’ && currentLineIsBlank)
13 {
14 .
15 .
16 .
17 break;
Capítulo 3 - O Arduino UNO e os navegadores web 13

18 }
19 if (c == '\n')
20 {
21 currentLineIsBlank = true;
22 }
23 else if (c != '\r')
24 {
25 currentLineIsBlank = false;
26 }
27 }
28 }
29 delay(1);
30 client.stop();
31 }
32 }

Primeiramente, devemos entender que todo conteúdo existen-

te na função loop() será executado de forma cíclica, ou seja, o
processo de interpretação do mesmo pelo microcontrolador será
sempre reiniciado quando a última linha da função em questão for
atingida.
Logo no começo da função loop(), temos uma estrutura com-
posta por duas linhas de código, na qual, a primeira contém a cria-
ção de um objeto da classe EthernetClient denominado client,
que por sua vez, através da sentença server.available(), irá ar-
mazenar as informações relativas a um possível cliente
que possa estar conectado com o Servidor Web.
O teste para conferir se existe um cliente conectado é feito atra-
vés do uso de uma estrutura condicional if(), utilizando como
parâmetro, o objeto client. Veja no trecho de código abaixo como
este procedimento citado é realizado.
14 Como controlar o meu ARDUINO pela Internet?

1 EthernetClient client = server.available();

2 if (client)
3 {
4 CONTEÚDO DA ESTRUTURA CONDICIONAL IF()
5 }

Caso exista um cliente conectado com o nosso Servidor Web,

o conteúdo interno da estrutura condicional if() apresentada an-
teriormente será executado, de modo que, a primeira linha desta
irá inicializar uma variável local, booleana (isto é, que admite
apenas os valores verdadeiro ou falso) e que será responsável
por detectar as linhas em branco de uma requisição feita
pelo navegador (mais adiante veremos como estas requisições
são). Esta variável é iniciada com o valor verdadeiro.

1 boolean currentLineIsBlank = true;

2 while (client.connected())
3 {
4 CONTEÚDO DA ESTRUTURA CONDICIONAL WHILE()
5 }

Além disso, temos uma outra estrutura condicional, no entanto,

desta vez, é a estrutura while(), a qual, terá seu conteúdo sendo
executado enquanto o cliente permanecer conectado. A verificação
da condição citada é feita através da sentença client.connected().
Em seguida, utilizamos a sentença cliente.available() como
parâmetro de uma outra estrutura condicional if(). Este recurso
é utilizado para verificarmos se existem informações pro-
venientes do cliente para serem lidas. Para os casos exis-
tentes neste livro, as informações citadas consistem basicamente
nas requisições feitas por um navegador atuando como cliente na
relação cliente/servidor. Em caso positivo, o conteúdo desta es-
Capítulo 3 - O Arduino UNO e os navegadores web 15

trutura condicional if() será executado.

1 if(client.available())
2 {
3 CONTEÚDO DA ESTRUTURA CONDICIONAL IF()
4 }

É neste ponto do código que começa a brincadeira. Como dito

anteriormente, neste nosso caso, sempre que existirem dados para
serem lidos, estes serão provenientes de alguma requisição feita
pelo cliente.
Para simplificar a explicação do funcionamento desta parte do
código, vamos utilizar o seguinte exemplo: imagine que você foi
até a barra de endereços do seu navegador e digitou o Endereço
IP configurado previamente (em nosso caso 192.168.25.16). Neste
momento, o navegador irá atuar como cliente, enviando
uma requisição para o servidor configurado na placa Ar-
duino UNO, ou seja, para o nosso Servidor Web, pedindo que
este lhe entregue uma página web. Esta requisição possui o
seguinte formato:

1 GET / HTTP/1.1
2 Host: 192.168.25.17
3 Connection: keep-alive
4 User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
5 Upgrade-Insecure-Requests: 1
6 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,
image/apng,*/*;q=0.8
7 Accept-Encoding: gzip, deflate
8 Accept-Language: pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7
9
10
16 Como controlar o meu ARDUINO pela Internet?

Quando esta requisição chegar para o servidor, este deverá ler

a mesma, caractere por caractere, até o final. O procedi-
mento em questão é feito através da utilização da sentença client.
read(), que por sua vez, irá pegar o primeiro caractere da fila de
caracteres e armazená-lo em uma variável do tipo char, chamada
c.

1 char c = client.read();

Neste exemplo, quando o conteúdo da função if() cujo parâme-

tro é a sentença client.available() for executado pela primeira
vez, a variável c irá conter a letra G e em seguida, este dado será
componente do parâmetro de uma primeira estrutura condicio-
nal if(), de modo que, o conteúdo desta estrutura será executado
apenas se a variável c for o caractere de nova linha (\n) e se o
conteúdo da variável que indica se a linha atual está em
branco for verdadeiro (na primeira execução, esta segunda
condição é satisfeita pois a variável currentlineisblank foi ini-
ciada com este valor e até o momento ele não foi alterado).

1 if (c == '\n' && currentLineIsBlank)

2 {
3 CONTEÚDO DA ESTRUTURA CONDICIONAL IF()
4 }

Como a primeira condição deste parâmetro não foi cumprida, o

conteúdo desta estrutura não será executado. Esta trecho de códi-
go será estudado mais adiante, pois, ela faz parte do quinto blo-
co.
Em seguida, encontramos uma outra estrutura condicional if()
que também irá testar o conteúdo da variável c. Neste caso, a
Capítulo 3 - O Arduino UNO e os navegadores web 17

comparação é feita em uma única condição, na qual, compara-se a

variável em questão com o caractere de nova linha (\n).

1 if (c == '\n')
2 {
3 CONTEÚDO DA ESTRUTURA CONDICIONAL IF()
4 }

Assim como na primeira estrutura de verificação do valor ar-

mazenado na variável c, neste caso, a condição para execução da
estrutura condicional if() também não é satisfeita, pois, o dado
existente na variável c é a letra G.
Por fim, a variável c irá passar por mais uma comparação. Desta
vez será verificado se a variável em questão é diferente do ca-
ractere \r.

1 else if (c != '\r')
2 {
3 currentLineIsBlank = false;
4 }

Repare que neste caso, a confirmação da verificação realizada é

positiva, pois, o caractere armazenado na variável c é, de fato, dife-
rente do caractere \r. Como resultado deste procedimento, temos
a alteração no conteúdo da variável responsável por detectar se
uma determinada linha está em branco, para falso.
Note que, em um primeiro momento, este ciclo irá ocorrer até
o ponto em que o caractere armazenado na variável c for o algaris-
mo 1 (lembre-se que a primeira linha da requisição contém a frase
GET / HTTP/1.1). Entretanto, observe que, após este o passo cita-
do, existe novamente um caractere de nova linha (\n), o qual, será
18 Como controlar o meu ARDUINO pela Internet?

responsável por fazer com que a segunda linha da requisição seja

lida (lembre-se que no momento em que o caractere citado é lido,
alteramos o conteúdo da variável currentlineisblank para verda-
deiro, através da segunda estrutura condicional if() apresentada).
Por fim, repare que este processo irá se repetindo até o momento
em que os caracteres armazenados na variável c forem, em sequên-
cia, os elementos \n,\r,\n (situação que ocorre após a leitura do
último caractere visível da requisição, neste caso, o algarismo 7 da
frase Accept-Language: pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7).
O resultado da ocorrência da sequência descrita é a execução
do código existente na primeira das três estruturas condicionais
if() apresentadas (isto será apresentado no próximo item), pois,
neste momento, tanto o conteúdo da variável c quanto o da
variável currentlineisblank irão satisfazer as condições
desejadas.

3.1.5 Quinto bloco – Criação da página web

O quinto e último bloco do nosso código-base consiste em um

espaço onde iremos construir o código responsável pelo de-
senvolvimento da página web que será entregue ao nave-
gador pelo nosso Servidor Web.

1 if (c == '\n' && currentLineIsBlank)

2 {
3 NESTE ESPAÇO DESENVOLVEREMOS A NOSSA PÁGINA WEB
4 break;
5 }

Este bloco começa a estrutura condicional if() responsável por

detectar se a requisição feita pelo navegador foi lida até
Capítulo 3 - O Arduino UNO e os navegadores web 19

o final. O mecanismo utilizado para verificar se o fato citado ocor-

reu, consiste em determinar se a informação armazenada
na variável c é um caractere de nova linha (\n) e se a va-
riável booleana currentLineIsBlank contém o valor ver-
dadeiro (situação descrita no item anterior).
Caso a requisição tenha sido lida até o final, teremos um es-
paço para desenvolvermos a página web que será enviada para o
navegador e em seguida, encontramos a instrução break, a qual,
será responsável por sair abruptamente da função while(),
possibilitando assim, que o código volte a ser executado a partir da
linha 29 do quarto bloco.
 4
CAPÍTULO

Desenvolvendo a nossa
primeira página web
Neste capítulo, iremos iniciar o desenvolvimento de nossa
primeira página web, apresentando os procedimentos básicos
para a criação de qualquer aplicação deste tipo. Para cumprir
este objetivo, será necessário apenas que nós sejamos capazes
de elaborar as linhas de código referentes ao conteúdo que deve-
rá ser exibido pelo seu navegador.

4.1 Um pouco sobre HTML

Antes de começarmos a realizar os passos necessários para a
construção de uma página web contendo informações referentes
ao processo no qual o Arduino UNO está inserido, devemos pri-
meiramente falar sobre a ferramenta que será utilizada para cum-
prirmos tal proposito: A linguagem HTML

Figura 4.1 - Logo do HTML 5

O HTML (HyperText Markup Language) consiste em uma

linguagem, não de programação propriamente dita, mas sim em
uma linguagem de marcação, que por sua vez, é utilizada na
Capítulo 4 - Desenvolvendo a nossa primeira página web 21

construção de páginas web. Esta linguagem é responsável

pela organização das informações existentes nos websites.
Em poucas palavras, podemos dizer que a função dos navegado-
res consiste em montar as páginas web de acordo com os seus
respectivos códigos HTML e posteriormente exibir as mesmas
para o usuário.
Além de organizar as informações, a linguagem HTML tam-
bém é responsável por dar significado aos dados que compõe
a estrutura de uma determinada página, auxiliando o entendi-
mento da mesma por parte dos sistemas de busca, como
por exemplo, o Google.

4.2 O uso de tags na linguagem HTML

Como dissemos anteriormente, as funções da linguagem
HTML são organizar e atribuir significado semântico para
toda informação existente nas páginas que acessamos através dos
nossos navegadores. Este procedimentos são realizados através de
elementos chamados tags.
As tags são estruturas intrínsecas do código HTML de uma
página e são responsáveis por informar algo ao navegador, como
por exemplo, o que ele deve apresentar para o usuário, qual é a
fonte que deve ser utilizada em determinada palavra, onde deverá
ser posicionada uma certa imagem, se tal seção é um cabeçalho ou
um rodapé, entre outros aspectos.

Todas as tags em HTML devem ser declaradas entre os sinais

de < >. A maioria das tags devem ser utilizadas em pares, ou seja,
deve haver uma tag de abertura, <tag> e uma tag de fechamento,
</tag>, de modo que, o conteúdo que estiver entre o par citado,
estará sujeito a algum tipo de modificação em virtude da proprie-
22 Como controlar o meu ARDUINO pela Internet?

dade manipulada pelas mesmas. Além disso, existem casos em que

não é necessário haver duas tags(uma de abertura e outra de fe-
chamento), portanto, nestas ocasiões, basta utilizar uma tag seme-
lhante à de abertura <tag> (pode-se utilizar também tag citada,
porém com uma / ao final, <tag/>).

4.3AestruturadocódigoHTMLdeumapáginaweb
Neste item, iremos demonstrar a estrutura básica do código
HTML referente a uma página web e em seguida vamos te ensi-
nar os procedimentos que devem ser realizados com o mesmo para
que a nossa placa Arduino seja capaz de enviar as informações
necessárias ao navegador para a construção da página que dese-
jamos.
Antes de prosseguirmos, vamos apresentar estrutura básica do
código HTML de uma página web. Não se preocupe, mais adiante
você irá aprender o significado de todas as linhas existentes neste
código.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 </head>
5 <body>
6 </body>
7 </html>

Note que o código acima está escrito apenas em HTML, portan-

to, teremos que manipulá-lo para que o mesmo fique no formato
adequado para ser utilizado em conjunto com a nossa placa Ardui-
no UNO.
Capítulo 4 - Desenvolvendo a nossa primeira página web 23

O procedimento que deveremos adotar para resolver este im-

passe é a utilização da sentença client.println(), a qual, será res-
ponsável por enviar strings contendo o código HTML para
o cliente, que por sua vez, está sendo representado pelo objeto
client presente na sentença apresentada.

1 client.println("CÓDIGO HTML QUE DEVERÁ SER ENVIADO PARA O CLIENTE ");

Desta maneira, após realizarmos as alterações necessárias, o

código HTML estará pronto para ser incorporado ao programa
que será gravado em nossa placa Arduino UNO.

1 client.println("<!DOCTYPE html>");
2 client.println ("<html>");
3 client.println ("<head>");
4 client.println ("</head>");
5 client.println ("<body>");
6 client.println ("</body>");
7 client.println ("</html>");

4.4 Desenvolvendo a página web no Arduino

Antes de proseguirmos, devemos lembrar que as páginas web
são respostas enviadas do servidor para um navegador
em virtude de um certo tipo de requisição feita por este.
Sendo assim, é importante termos em mente que o pacote de res-
posta em que as páginas web são anexadas para serem enviadas ao
navegador também possuem um cabeçalho (como todo pacote
de dados), que por sua vez, deve ser inserido antes do código
referente à construção das páginas em questão. Por en-
quanto, utilizaremos o seguinte cabeçalho:
24 Como controlar o meu ARDUINO pela Internet?

1 client.println("HTTP/1.1 200 OK");

2 client.println("Content-Type: text/html");
3 client.println("Connection: close");
4 client.println();

A área na qual devemos colocar os trechos de código referentes

à implementação da nossa página web é o quinto bloco do códi-
go-base (este pode ser encontrado no Apêndice A). Aplicando o
conteúdo apresentado até aqui, teremos a seguinte estrutura:

1 if (c == ‘\n’ && currentLineIsBlank)

2 {
3 client.println(“HTTP/1.1 200 OK”);
4 client.println(“Content-Type: text/html”);
5 client.println(“Connection: close”);
6 client.println();
7 client.println(“<!DOCTYPE html>”);
8 client.println(“<html>”);
9 client.println(“<head>”);
10 client.println(“</head>”);
11 client.println(“<body>”);
12 client.println(“</body>”);
13 client.println(“</html>”);
14 break;
15 }

Nos próximos itens, por questão de praticidade, vamos omi-

tir a estrutura condicional if() apresentada no trecho de
código anterior. Além disso, vamos omitir também o cabe-
çalho apresentado, pois, não iremos realizar alterações nele ao
logo do conteúdo deste livro.
Capítulo 4 - Desenvolvendo a nossa primeira página web 25

No entanto, lembre-se que tudo que for demonstrado posterior-

mente, ficará dentro da estrutura citada, ou seja, no quinto bloco
do código-base.

4.5 As principais tags HTML

O primeiro passo no desenvolvimento de um código HTML é

a inclusão de uma declaração que irá dizer ao navegador que está
requisitando a página, qual é a versão da linguagem HTML
que está sendo utilizada. Como estamos utilizando a versão 5
do HTML, basta digitarmos na primeira linha do código, a decla-
ração <!DOCTYPE html>.

1 client.println("<!DOCTYPE html>");

Em seguida, devemos incluir um par de tags para irão delimitar

código que será utilizado para elaborar a nossa página web. O con-
junto citado indica o início e o final do código HTML e é formado
pelas tags <html> e </html>.

1 client.println("<!DOCTYPE html>");
2 client.println("<html>");
3 CÓDIGO DA PÁGINA WEB
4 client.println("</html>");

Dentro do bloco delimitado pelas tags <html> e </html> te-

mos o conteúdo da página que queremos enviar para o
navegador. A estrutura do conteúdo citado deve ser dividida
em duas seções, de modo que, a primeira delas, apesar de
não apresentar elementos visíveis para o usuário, é responsável
por conter algumas informações referentes às configura-