Neste instructables vamos analisar o funcionamento da ESP8266 como módulo wifi do arduino para controlarmos duas leds pelo navegador.

Pre-requisitos:

Ter noções em programação e lógica;
Ter conhecimentos básicos em eletrônica;
Ser curioso e saber pesquisar para obter mais informações.

Step 1: Componentes De Hardware

Arduino Uno;
ESP8266 ESP 01(módulo wifi);
Protoboard;
Dois leds, de preferência azul e vermelho;
5 resistores(4 de 220 Ohms e 1 de 1KOhm);
5 jumpers macho/fêmea;
6 a 8 jumpers macho/macho.

Step 2: Montagem

Como vamos usar as portas seriais padrão do arduino(0 - RX e 1 - TX) para monitorar os dados no monitor, iremos, então, utilizar as portas 2 e 3 como RX e TX, respectivamente, para fazermos a comunicação serial com o módulo ESP.

O ESP8266 trabalha a 3.3Volts e o arduino a 5Volts, então devemos diminiur a tensão usando resistores nas ligações. Somente o pino TX do ESP pode ser ligado diretamente ao RX(pino 2 no nosso caso) do arduino, os demais devem estar ligados aos resistores.

Usaremos 1 resistor de 1KOhm na ligação entre os pinos CH_PD e VCC do ESP e os demais resistores de 220Ohm entre os outros pinos, como mostrado na imagem.

Para assegurar-se de que da voltagem e também as ligações com os jumpers, resistores, etc. estão corretos, recomendo que faça o uso do tinkercad. Nele é possível montar vários projetos piloto antes de "botar a mão na massa".

O link do meu projeto no tinkercad você pode conferir aqui: https://tinkercad.com/things/iLx1NXMg6Dc

Step 3: Resultado Montagem

Seguindo corretamente o exemplo do tinkercad, seu projeto ficará semelhante a este.

Step 4: Ambiente De Desenvolvimento

Antes de começar a codificar é necessário apenas instalar a IDE do arduino que pode ser baixada no site do fabricante.

https://www.arduino.cc/en/Main/Software

Step 5: Codificando

//Adiciona a biblioteca SoftwareSerial para usar a comunicação serial em outros pinos digitais<br>

#include "SoftwareSerial.h"

//Define os pinos para os leds
int bluePin = 4;
int redPin = 7;

// Ligado diretamente ao pino tx do exp8266
const byte rxPin = 2;

// Ligado ao pino rx do esp8266(usar resistor para diminuir a voltagem)
const byte txPin = 3;

// Biblioteca do arduino que faz com que outros pinos digitais se comuniquem via serial
SoftwareSerial esp8266(rxPin, txPin)<br>

void setup() {<br>

  Serial.begin(115200);
  while (!Serial) {
    ; // Espera a conexão com a porta serial. Necessário somente para porta USB nativa
  }

  esp8266.begin(115200);
  while(!esp8266) {
    ; //Espera a conexão com o módulo esp8266
  }

  //Define os pinos como saida de dados
  pinMode(redPin,OUTPUT);
  pinMode(bluePin,OUTPUT);

  
  digitalWrite(redPin, HIGH);
  delay(1000);
  digitalWrite(redPin, LOW);
  delay(1000);
  digitalWrite(bluePin, HIGH);
  delay(1000);
  digitalWrite(bluePin, LOW);
  delay(1000);

  Serial.println("Serial and ESP8266 communication started!");
  delay(1000);

  //Comando de teste
  //String result = sendCommand("AT\r\n", 1000);
  //Serial.println(result);

  //Reinicia o módulo
  String result = sendCommand("AT+RST\r\n", 2000);
  Serial.println(result);

  //Configura como access point
  //1.station; 2.access point 3.access point + station
  result = sendCommand("AT+CWMODE=1\r\n", 1000);
  Serial.println(result);

  result = sendCommand("AT+CWJAP=\"networkId\",\"password\"", 3000);
  Serial.println(result);

  //Recupera o endereço IP - 192.168.4.1
  result = sendCommand("AT+CIFSR\r\n", 1000);
  Serial.println(result);
  
  //Configura para aceitar múltiplas conexões
  //0.Single connection 1.Multiple connections(Max 4)
  result = sendCommand("AT+CIPMUX=1\r\n", 2000);
  Serial.println(result);

  //Configura o servidor na porta 80
  //0. deleta o servidor 1.cria um servidor
  result = sendCommand("AT+CIPSERVER=1,80\r\n", 2000);
  Serial.println(result);

  //Recupera o endereço IP - 192.168.4.1
  result = sendCommand("AT+CIFSR\r\n", 1000);
  Serial.println(result);
}

void loop() {
  if(esp8266.available()) {
    
    if(esp8266.find("+IPD,")){
      delay(1000);
      
      //Subtrai 48 devido a função read() retornar o valor decimal ASCII e 0(o primeiro 
      //número decimal) inicia no 48
      int connectionId = esp8266.read()-48;

      esp8266.find("pin=");
      int pinNumber = (esp8266.read()-48);

      digitalWrite(pinNumber, !digitalRead(pinNumber));

      //Serial.print("Pin number: ");
      //Serial.println(pinNumber);

      String content;
      if(pinNumber == bluePin){
        content += "blue led on pinNumber ";
      } else {
        content += "red led on pinNumber ";
      }
      content += pinNumber;
      content += ": ";

      if(digitalRead(pinNumber)){
        content+= "ON";
      }else{
        content+= "OFF";
      }

      sendHttpResponse(connectionId, content);
      
      String closeCommand = "AT+CIPCLOSE=";
      closeCommand+=connectionId;
      closeCommand+="\r\n";
      
      String result = sendCommand(closeCommand, 1000);
      //Serial.println(result);
    }
  }
}

String sendCommand(String command, const int timeout){
  delay(timeout);

  esp8266.print(command);
  
  String response = "";
  long int time = millis();
  
  while((time + timeout) > millis()){
    while(esp8266.available()){
        char c = esp8266.read();
        response += c;  
    }
  }
  return response;
}

void sendHttpResponse(int connectionId, String data){
  String httpResponse;
  String httpHeader;

  httpHeader = "HTTP/1.1 200 OK\r\nContent-Type: text/html; charset=UTF-8\r\n";
  httpHeader += "Content-Length: ";
  httpHeader += data.length();
  httpHeader += "Access-Control-Allow-Origin: *";
  httpHeader += "\r\n";
  httpHeader +="Connection: close\r\n\r\n";

  //O último caractere de "content" não está sendo enviado, por isto do espaço extra
  httpResponse = httpHeader + data + " ";

  String cipSend = "AT+CIPSEND=";
  cipSend += connectionId;
  cipSend += ",";
  cipSend +=data.length();
  cipSend +="\r\n";
  sendCommand(cipSend,1000);
  sendCommand(data,1000);
}

Step 6: Código HTML Para Fazer As Requisições

Escreva o código HTML como na imagem e salve-o em uma pasta de sua preferência.

Faça o download do JQuery no link abaixo e também salve-o na mesma pasta onde se encontra o arquivo HTML.

Link para o fonte do JQuery: http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/...

Step 7: Upload Do Código E Execução Do Projeto

Ligue o arduino no computador usando o cabo USB
Na IDE do arduino selecione Arduino Uno em Tools > Board e também a porta Serial em Tools > Port
Abra o serial monitor em Tools > Serial Monitor
Faça o upload do código pela IDE do arduino no botão de Upload
Espere até o arduino inicializar todas as configurações acompanhando pelo Serial Monitor - Lembre-se de colocar o baud rate como 115200 no serial monitor
Abra o código HTML no navegador e faça as requisições clicando nos botões
Enjoy XD