Hello World com NodeMCU e JavaScript

Em nossa coleção de tutoriais nós elaboramos alguns conteúdos sobre a utilização do módulo ESP8266 NodeMCU e também sobre a implementação de interfaces de controle para placas Arduino através do uso da linguagem HTML e de CSS3. Neste tutorial você irá aprender algo que agrega as duas vertentes citadas, pois, aqui nós vamos desenvolver interfaces de controle para o módulo ESP8266 NodeMCU utilizando os conceitos da linguagem HTML que nós já aprendemos em conjunto com uma ferramenta nova, o Javascript.

Veja os nossos tutoriais sobre o desenvolvimento de interfaces de controle com Arduino.

Para desenvolvermos a proposta deste tutorial, nós devemos primeiramente configurar a Arduino IDE para que seja possível gravarmos códigos nos módulos ESP8266 NodeMCU, portanto, caso você não saiba realizar este procedimento, basta acessar este nosso outro tutorial:

O que é ESP8266 – A família ESP e o NodeMCU

[toc]

O Javascript

Como nós aprendemos em nossos tutoriais citados anteriormente, a linguagem HTML é uma linguagem de marcação, isto é, um recurso responsável por organizar as informações de uma página web e também por atribuir sentido aos elementos existentes nas mesmas, portanto, caso nós tenhamos uma frase em uma página web, a linguagem HTML será a responsável por dizer ao navegador se a mesma é um título, um subtítulo, um link, entre outros e também como esta se enquadra em uma ordem hierárquica de importância em relação aos outros fragmentos textuais contidos na estrutura da página em questão.

Logo do HTML5

Além disso, como tivemos a chance de aprender nos tutoriais apresentados na introdução deste tutorial, a utilização das tags estruturais mais adequadas não é suficiente para que a aplicação possua uma aparência estética bem elaborada, pois, o uso das mesmas produz resultados em uma espécie de estilo padrão. Visando resolver este impasse, surgiu o CSS (Cascading Style Sheets), que por sua vez, consiste em um recurso semelhante a uma linguagem de marcação, como o HTML, porém totalmente distinta da mesma, com objetivo único de cuidar dos procedimentos de estilização. Uma das vantagens da utilização do CSS é a possibilidade de personalizar os objetos contidos em uma página web sem que seja necessário misturar as regras de estilização com os objetos citados (como acontecia anteriormente).

Logo do CSS3

Utilizando a linguagem HTML e o CSS3 nós conseguimos estruturar uma página web e também estilizá-la entretanto apenas com estes dois recursos não é possível atuar sobre o comportamento da página. Mas o que seria este suposto comportamento? Imagine que você tenha duas imagens de uma lâmpada, de modo que, uma delas representa a lâmpada apagada e a outra acesa. A sua ideia é utilizá-las para fazer uma animação, na qual, quando o estado de uma determinada porta de saída digital do seu sistema embarcado estiver em nível lógico alto, a figura que representa a lâmpada acesa fique em evidência e em contrapartida, quando a mesma estiver disponibilizando nível lógico baixo em seu terminal, somente a figura referente à lâmpada apagada apareça. Esta alteração automática de elementos reflete um exemplo de comportamento de uma página web e pode ser realizada utilizando Javascript. Basicamente, com ele nós podemos criar funções que são executadas pelo navegador em detrimento de determinados eventos ocorridos na página, como por exemplo, quando um botão é pressionado.

Logo Javascript

Javascript em um código HTML

Como nós já vimos nos tutoriais apresentados na introdução deste post, o código referente às páginas web já adaptados para serem utilizados dentro de um programa a ser gravado em uma placa Arduino possuem a seguinte estrutura:

client.println("<!DOCTYPE html>");
client.println("<html lang=\"pt-br\">");                
   client.println("<head>"); 
   client.println("</head>");
   client.println("<body>");
   client.println ("</body>");
client.println ("</html>");

O primeiro passo para incluirmos o Javascript na estrutura de uma página web é utilizar o par de tags <script></script>.

<script>
    ... Trecho de código em Javascript ...
</script>

Em seguida, basta inserir a estrutura em Javascript que você deseja dentro do espaço delimitado no código acima. É claro que como Javascript é uma linguagem de programação, existem infinitas possibilidades para serem implementadas, porém, neste tutorial, vamos fazer o famoso Hello World utilizando apenas Javascript.

Mãos à obra – Utilizando Javascript com NodeMCU

Componentes necessários

1 x NodeMCU Wifi ESP8266 ESP-12E

Montando o projeto

Programando

O próximo passo que você deverá realizar será copiar este código para a sua Arduino IDE, alterar os valores das variáveis ssid e password com as informações referentes ao nome da sua rede sem fio e à senha dela e compilar o código.

#include <ESP8266WiFi.h> 
 
const char* ssid = "******"; 
const char* password = "******"; 

IPAddress ip(192,168,25,16);
IPAddress gateway(192,168,25,1); 
IPAddress subnet(255,255,255,0); 
 
WiFiServer server(80); 
 
void setup() 
{ 
  WiFi.begin(ssid, password); 
  WiFi.config(ip, gateway, subnet);
  server.begin(); 
}

void loop() 
{
  String req_str;
  WiFiClient client = server.available(); 
  if (client) 
  { 
    boolean currentLineIsBlank = true;
    req_str = "";
    while (client.connected()) 
    { 
       if (client.available()) 
      {
         char c = client.read(); 
         req_str = req_str + c;
         if(c == '\n' && currentLineIsBlank) 
        {    
            
             client.println("HTTP/1.1 200 OK");
             client.println("Content-Type: text/html");
             client.println("Connection: close");
             client.println();
             client.println("<!DOCTYPE html>");
             client.println("<html lang=\"pt-br\">");                
               client.println("<head>");
                 client.println("<meta charset= \"UTF-8\"/>"); 
               client.println("</head>");
               client.println("<body>");
                 client.println("<h1>Exemplo com JavaScript</h1>");
                 client.println("<script>");
                    client.println ("alert('Esse é o meu primeiro código em JS');");
                 client.println("</script>");                         
               client.println ("</body>");
             client.println ("</html>");
             
          break;
        }
        if (c == '\n') 
        {
         currentLineIsBlank = true;
        }
        else if (c != '\r') 
        {
           currentLineIsBlank = false;
        }
      }
    }
    delay(1); 
    client.stop();
  }
}

Resultado final

Veja o resultado final que nós obtemos:

Entendendo a fundo

Software

– Apenas uma primeira observação

Este software é praticamente igual a todos os outros que nós desenvolvemos em nossos tutoriais (apresentados na introdução deste documento) sobre a criação de interfaces de controle utilizando a linguagem HTML, portanto, não será necessário entrarmos nos detalhes referentes ao funcionamento do mesmo . Por outro lado, como nos tutoriais citados nós estávamos utilizando o conjunto Arduino UNO + Ethernet Shield, deveremos realizar algumas alterações básicas para que o mesmo funcione no módulo ESP8266 NodeMCU, de modo que, esta consiste na troca da sentença:

EthernetClient client = server.available();

por:

WiFiClient client = server.available();

– Definindo os pré-requisitos para o funcionamento do código

Inicialmente, devemos incluir uma biblioteca no código para que o mesmo possa funcionar corretamente. A biblioteca em questão é a ESP8266WiFi.h, que por sua vez, é a responsável por garantir a conectividade do módulo com a nossa rede local (essa biblioteca é automaticamente instalada no momento em que pacote do ESP8266 é instalado na Arduino IDE.

#include <ESP8266WiFi.h>

Após a inclusão da bibliotecas citadas, devemos definir a rede na qual queremos conectar o nosso módulo ESP8266 NodeMCU e a senha de acesso à esta mesma rede.

const char* ssid = "** digite aqui o nome da sua rede **"; 
const char* password = "** digite aqui a senha da sua **";

Em seguida, você deverá determinar um endereço IP (válido e disponível na sua rede) para o seu módulo ESP8266 NodeMCU e também outros dois elementos: o endereço do gateway (geralmente possui os 3 primeiros conjuntos de algarismos igual ao definido por você anteriormente, no entanto, com o número 1 no último grupo de algarismos) e a máscara de rede (subnet), que por sua vez, para residências costuma ter o padrão 255.255.255.0 (você pode levantar estes dois últimos elementos digitando ipconfig no prompt de comando (caso o sistema operacional que você estiver utilizando seja o Windows)). Por fim, devemos criar o objeto que será responsável por representar o Servidor Web no código (aqui, chamamos este de server) e relacioná-lo com a porta 80.

IPAddress ip(192,168,25,16);
IPAddress gateway(192,168,25,1); 
IPAddress subnet(255,255,255,0);  
WiFiServer server(80);

– Definindo as configurações iniciais

Dentro da função setup() nós iniciamos a conexão com a rede local através da função WiFi.begin() (passando como parâmetro o nome da rede local e a senha de acesso à mesma, definidos anteriormente) e também realizamos a configuração do nosso módulo ESP8266 NodeMCU através da sentença WiFi.config(). Por fim, iniciamos o nosso Servidor Web por meio da sentença server.begin() (lembre-se que server é o objeto criado para representar o Servidor Web no código).

void setup() 
{
  WiFi.begin(ssid, password); 
  WiFi.config(ip, gateway, subnet);
  server.begin(); 
}

– Criando a página para responder à requisição do navegador

Nos artigos anteriores, elencados em nossa introdução, nós aprendemos como devemos proceder para elaborar uma página bem simples, contendo elementos escritos. Neste momento, como de praxe, nós também iremos inserir uma mensagem em nossa página, porém além desta, vamos fazer o famoso Hello World utilizando Javascript.

Você se lembra do cabeçalho padrão que enviamos para o navegador antes de enviarmos a página propriamente dita? Para ajudar, vamos colocá-lo aqui.

client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();

A estrutura da página em HTML

O próximo passo que faremos será construir, de fato, a página que será enviada ao navegador. Com uma breve recapitulação, devemos lembrar que todo conteúdo que compõe a página deve estar dentro da seguinte estrutura:

client.println("<!DOCTYPE HTML>");
client.println("<html>");
           .
           .
***** Conteúdo da página *****
           .
           .
client.println("</html>");

Como ressaltado anteriormente, dentro desta estrutura temos o conteúdo da página que queremos enviar para o navegador, de modo que, nesta, devemos ter pelo menos dois blocos, um responsável pelas informações gerais do documento, limitado pelo uso do par <head></head> e o outro, por sua vez, deve conter o corpo da página e está entre as tags <body> e </body>.

client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
           .
           .
   ***** Bloco 1 *****
           .
           .
client.println("</head>");
client.println("<body>");
           .
           .
   ***** Bloco 2 *****
           .
           .
client.println("</body>");
client.println("</html>");

Definido o título para a página

Neste momento, vamos utilizar apenas uma tag dentro do bloco 1, denominada <title>, cuja função consistirá em definir um título para a página (este título aparecerá na aba do navegador). Para executarmos a ação proposta, devemos colocar o título desejado entre o par <title></title>.

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

client.println("<head>");
client.println("<title>Servidor Web VDS</title>");
client.println("</head>");

client.println("<body>");
           .
           .
   ***** Bloco 2 *****
           .
           .
client.println("</body>");
client.println("</html>");

Veja como ficou o título da nossa página:

servidor Shield Ethernet W5100 - Monitorando sensores com um Servidor Web

Escrevendo o corpo da página web

Quanto ao corpo da página (entre o par <body></body>), a primeira coisa que faremos será colocar um título visível na própria página. Para realizar este procedimento, utilizaremos a tag <h1>, que por sua vez, consiste em uma tag para apresentar um determinado texto em um modelo predefinido.

client.println("<h1>Exemplo com JavaScript</h1>");

Exibindo uma mensagem de alerta com JavaScript

Como dissemos anteriormente para inserirmos algum trecho de código em JavaScript em nosso programa nós devemos primeiramente inserir o par de tags <script> e </script> na estrutura de nossa página web. Após realizarmos o procedimento anterior, nós vamos recorrer à função alert() do JavaScript, cujo argumento será a frase que queremos mostrar na tela, veja o nosso código.

client.println("<body>");
  client.println("<h1>Exemplo com JavaScript</h1>");
  client.println("<script>");
    client.println ("alert('Esse é o meu primeiro código em JS');");
  client.println("</script>");                         
client.println ("</body>");

Considerações finais

Neste tutorial, demonstramos uma pequena introdução sobre a inclusão de códigos em JavaScript para personalizar o seu projeto de criação de interfaces web com o Módulo ESP8266 NodeMCU. Esta foi mais uma parte de uma série de artigos sobre a criação de Servidores Web, portanto, esperamos que continue nos acompanhando e sinta-se à vontade para nos dar sugestões. Lembre-se de deixar suas dúvidas nos comentários abaixo.

Daniel Madeira

3 Comments

Deixe uma pergunta, sugestão ou elogio! Estamos ansiosos para ter ouvir!Cancelar resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.